Visual Hierarchy • 237 Marketing + Web

If you’ve been involved in a design project recently, chances are you heard the phrase “visual hierarchy” come up at least once.

A big-picture definition of the term refers to the placement of design elements in a way that denotes varied levels of importance. The interpretation of significance usually happens subconsciously, as the human eye goes automatically to elements in high contrast to what surrounds them. That means bigger and more colorful text stands out from small, black text, attracting the eye – and brain – first.

When you drill down to the micro level of visual hierarchy as it pertains to text, you starting noting how headlines are usually bolder and larger than regular text. Lists are set off by bullet points. Legalese is portrayed in tiny, often italic, fonts. Photos come with their own hierarchy ramifications depending on placement, content and size.

Here’s a look at the main principles of visual hierarchy, specifically as it pertains to website design.

  • Size: Simply put, bigger elements get more attention. The human brain loves to differentiate between items and whatever surrounds them. Size equates with importance.
  • Color: This can be used as both organization and personality tools. It also helps reinforce a brand.
  • Alignment: Creating order out of chaos, this term encompasses thing such as columns, grids and horizontal lines.
  • Position: Higher items usually get more attention. That is, unless an element with more weight competes for the spotlight.
  • Contrast: Light or dark. Big or little. These comparisons are what dictate how the message is read and perceived.
  • Repetition: Pattern help readers understand which elements are which. For example, if you establish that text is black and special headlines are red, they will expect them to serve those roles every time they appear.
  • White space: White space helps direct the eye while also offering a break from the clutter. A healthy dose of white space is recommended in most designs.
  • Proximity: Design elements’ location in relation to related items helps readers navigate the layout. Photo captions are next to the photos, for example.

Take a look at your business’s or organization’s website to see whether you are using visual hierarchy to direct and educate readers. If some tweaks are needed, we can help with that. Even if you just want an honest opinion or suggestions for improvement, our team is ready to assist you.