Source: Vanseo Design

Before we get started with any more tactical aspects of design, it's important to understand the high level fundamental fact that your user scans through your page in a particular order which is dictated by the characteristics and relationships between elements on the page. True, the content of each section matters to a degree, but most of that behavior is subconsciously guided by the visual hierarchy of your page.

Visual Hierarchy is exactly that -- the hierarchy of elements on the page based purely on their visual characteristics. More concretely, it's the priority of how your eye is drawn to different areas of the page. A site without any clear visual hierarchy is like the page of a book -- all text looks the same, so you just start at the top and work your way down. If you squint your eyes, it all has the same shade of blurry gray.

You don't want your users to just read your site from top left to bottom right -- they would get lost in irrelevant navigational information from the very beginning. To encourage them to take a different route, you would probably instinctively make the headlines bigger than the surrounding text and maybe put in some images that are particularly informative. That would be a good start but it's just the beginning of your options.

In this lesson, you'll see how visual hierarchy works and the tactics you can use to manipulate yours so your users consume the content in the most efficient pattern to achieve their goals.

Read Visual Hierarchy from 52weeksofux for a strong introduction to the topic.

Read An Introduction to Hierarchy by Rachel Shillcock for another look.

Implementing Visual Hierarchy

Your tools for implementing visual hierarchy should be familiar from our previous discussion about high level design elements:

1. Size -- Larger objects will stand out more
2. Color -- Stronger colors will stand out more
3. Contrast -- Things with deep contrasts between them (e.g. in color or tone) will be viewed as "separate".
4. Repetition -- Things repeated will be viewed as related.
5. Alignment -- Things aligned either vertically or horizontally will be viewed as related.
6. Proximity -- Things placed close to each other will be viewed as related.
7. Density and Whitespace -- Content framed by space draws focus while overcrowding distracts
8. Style and Texture -- Tweaks to these finer properties will also draw or repel the eye.

Read Understanding Visual Hierarchy In Web Design by Brandon Jones at Tutsplus for a deeper look at using each of these tools.

The principles of contrast, repetition, alignment, and proximity from the list above form the cheeky acronym CRAP. These in particular define not just the properties of a single element but the relationship between multiple elements. They are cornerstone ideas of graphic design as well.

Read The Big Four: Contrast, Repetition, Alignment and Proximity, a document which covers these principles as they relate to slide design (the parallels with websites should be obvious).

Dive deeper into contrast and read Contrast and Meaning by Andy Rudledge from A List Apart.

Takeaways

• The path your user will take through your page is highly dependent on the visual hierarchy of the page
• The visual hierarchy is determined by the properties of each element and the relative relationships between them.
• Your job is to tweak those properties to guide the user along the right path (e.g. towards her goal) while de-emphasizing or separating elements that are little used or less important.

• On Visual Hierarchy by Ryan Heath
• Visual Hierarchy: How Well Does Your Design Communicate? by Steven Bradley
• Building Content Hierarchy Through Design by Rachel Shillcock
• Building Visual Hierarchy into Your Designs by Rachel Shillcock

Sorry, comments aren't active just yet!