6 Website Design Principles to Follow

By Lindsey Hency

Redesigning a website is about more than fonts, colors and animations. It’s about ensuring the user experience is as frictionless as possible.

If you’re heading into a redesign, these are the web design principles you’ll want to keep top of mind.

1. Establish Clear Hierarchies

Visual hierarchy is critical to helping users consume content. If everything looks like it has the same importance, then nothing appears essential. Users need visual cues to understand which elements to pay attention to, meaning you need to structure your pages in a way that directs users where you want them to go. So, first things first, decide the most important initiatives for your organization and then create a design that places emphasis on those items by using scale, color or whitespace.

2. Consider Proximity

Proximity allows us to build perceived relationships between different elements based on where they are placed. In short, things that are related should be closer to each other, and things that are unrelated should be placed farther apart. Think of how related material in a book is grouped together in a chapter. The same principle — keeping birds of a feather together — applies to your website.

3. Keep Accessibility in Mind

Designing for accessibility means that your website can be equally accessed by users regardless of their physical and/or cognitive abilities. Beyond the obvious equity case for accessibility, having an accessible website design gives you the potential to reach more people with your content. While you should be consulting the Web Content Accessibility Guidelines for comprehensive technical standards, here are a few big-ticket items to watch for:

• Your site should be usable on both mobile and desktop.
• Hyperlinked text should clearly indicate where the link will take a user.
• All sites should be navigable by a screen reader.

4. Check Your Color Contrast

Speaking of accessibility, color contrast not only adds heft to your primary calls to action — it’s vital for readability. For example, people with vision impairments can have a difficult time reading text on a screen that does not have sufficient contrast. If you’re ever in doubt, run your colors through a contrast check.

5. Embrace and Enable Eye Movement

Dynamic design encourages lots of eye movement. The most common eye movement patterns are F and Z patterns:

• F pattern (F means fast): In designs with an abundance of text, we quickly scan across the top of the page, from left to right — headlines and decks, essentially — then down the left, searching for clues that tell us what we want to know, or if we want to stay on the page.
• Z pattern: In designs without a lot of text or content, we scan in a zigzag pattern from top left to top right then diagonally down to the bottom left, stopping at the bottom right.

Take a moment to step back from the screen and skim your designs. Where do your eyes want to land? Does that match the desired action that you want users to take?

6. Engage Visitors with Variety

Variety is what keeps things interesting and engaging. Imagine a site where all of the information is presented in the same way using the same fonts, colors and hierarchy. Users would get lost in this sea of sameness and bounce. Instead, you want to serve up the information in a variety of ways, from card patterns to sliders to accordions and more.