When you’re on a well-designed website like Apple.com or Netflix.com, you’re not sitting there thinking consciously about where to look first. Your brain just knows.
Your eye probably immediately goes to a large headline, then a bright button, then a smaller section of text explaining what the company does. That’s not accidental. It’s visual hierarchy in website design, and it’s one of the tools web designers use to guide visitors through a website.
Good visual hierarchy makes a website easier to understand, easier to skim, and ultimately easier to use. Learn more about how Wes Web uses visual hierarchy in our web designs.
What Is Visual Hierarchy In Web Design?
Visual hierarchy is how design elements are arranged visually to communicate how important they are. In other words, they define what you notice first, what to look at next, and what the additional information is if you want to dive deeper into something you notice.
Without a clear hierarchy on a page, every element competes for your attention in the same manner. It can make everything blend together too much, which can quickly overwhelm a viewer and make it harder to understand what they’re looking at quickly. Good visual hierarchy gives each element a different level to create a natural path for a user’s eyes to follow.
This is especially important because people don’t necessarily read a webpage from beginning to end. They skim. Your website design should make it possible for someone to scan a page, pick out its most important information, and understand where to go next.
How Do Web Designers Create Visual Hierarchy?
There isn’t one element that creates visual hierarchy on a website. Instead, designers use a combination of techniques to establish which information should command attention and which information should support it.
Size Helps Establish Importance
One of the most obvious ways to establish hierarchy is size. A large heading naturally gets more attention than the smaller paragraph underneath it. A prominent statistic can stand out from supporting information. A larger button or image can draw your eye toward an important action or message.
Typography is one of the places you’ll see this most frequently. The differences between page headers, section headings, subheadings and body material should be obvious so that visitors can easily see how information is organized.
But here at Wes Web we don’t select heading levels based on looks. Heading structure is very important for SEO and accessibility. We consider the actual organization of the content first, then use styling to create the visual hierarchy we want.
Color Draws Attention to Important Elements
Color is another powerful way to tell visitors, “Hey! Look here.” An accent color can pull attention toward a call-to-action button, an important word or phrase, an icon, a statistic, or another element you want someone to notice while scanning the page.
The key is being selective. If every section, button, heading, and graphic uses a bold accent color, nothing really stands out anymore. It’s very important to use color intentionally and with careful thought to create contrast between the information we want users to see first and then the supporting content to explore later.
Spacing Creates Structure
Sometimes, hierarchy isn’t all about the obvious things to make something bigger or brighter. Each element or section on a webpage needs room to breathe, too.
Consistent spacing helps make sure related elements are visually grouped together and also separates one idea from the next one. Creating more space around an important image or call-to-action can also make sure that part of the page has a bigger visual importance.
The designers at Wes Web and many top designers around the world use 12-column grids to help maintain that consistent feeling in alignment and structure throughout your website. Combined with consistent spacing between sections and elements, that underlying grid creates a rhythm as someone moves down the page.
Once that consistency is established, we can also intentionally break from it when something deserves extra attention.
Contrast Makes Important Information Stand Out
Contrast is really a combination of several principles of visual hierarchy.
- A bold heading next to regular body copy creates contrast.
- A bright button against a neutral background creates contrast.
- A large photograph surrounded by white space creates contrast.
The greater the difference between an element and everything surrounding it, the more likely your eye is to notice it. The goal isn’t to make every element as visually different as possible but rather to decide what deserves the most attention and create enough difference in contrast to show exactly that.
Visual Hierarchy Makes Your Website Easier To Skim
Overall, all of these techniques we mention make it easier to work towards the goal of helping a website visitor quickly understand your website without having to think too hard.
In today’s modern times, people don’t want to and don’t always have time to carefully read every paragraph to figure out what your company does, what a particular page is about, or what they’re supposed to do next. They should be able to skim the headings and emphasized information and understand the basic message. If they want more information, the supporting elements are there for them.
That’s one of the differences between simply putting information on a webpage and actually designing a website. We’re not only considering what information needs to be there. We’re considering how someone’s eye will move through it.
Get a Website Designed With Intention
Good web design isn’t just about choosing attractive colors, fonts, and images. Every part of the design helps to communicate something.
At Wes Web, our sites are designed with visual hierarchy and strategic SEO considerations to look good and assist visitors understand your business and discover what they are searching for quickly. Contact Wes Web to talk about your website design with visual hierarchy.