Visual hierarchy allows users to see relative importance in a layout. It's achieved through the combined effect of position, color, and scale. Comparing these attributes across different chunks and regions provides a sense of which elements are more (or less) important in a layout.聽

• Position聽refers to the placement of an element in a user's normal reading pattern. Usually, the closer an item is to the top left corner, the higher its position in the hierarchy.
• Color聽can give visual emphasis which will influence our perception of an element's importance. Bright colors or pronounced contrast between an element and its surroundings can make the element stand out, so it appears more significant.聽
• 厂肠补濒别听refers to the relative size of an element. Bigger items in a layout are typically interpreted as more important than smaller ones.聽

Since visual hierarchy is about聽谤别濒补迟颈惫别听importance, users understand it by making comparisons between chunks and regions. This means differences must be clearly visible. This is pretty easy when working with聽position. But you have to pay more attention when聽working with color or scale.

In the case of聽color, a聽red button won't stand out if you use red everywhere. Red (and other colors) also won't stand out much for users with some forms of color blindness. For this reason, consider using a range of visibly different聽聽(light, medium, and dark) so that colors appear different even if users can't see the hue.

Here's an example. You can probably see how this arrangement is visually pleasing and informative to someone with normal vision. The differences in hue (yellow, red, orange, purple) help someone with normal color vision to distinguish between the dots:

There are many forms of color blindness which can weaken distinctions between certain hues. It's safest to design as if your users may be completely color blind. That means all they see is the value (lightness or darkness) of the color:

You can see how using a range of values (in addition to a range of hues) makes the distinctions easier to read - and more aesthetically pleasing - for all users.聽

When using聽scale, you'll want to amplify differences between the largest and smallest headings. Otherwise, users might not notice the difference when scanning the page. If users can't see obvious differences in size, the layout can also seem boring or overwhelming.

Let's look at the combined effect of all the attributes. Here's an example of a layout with a weak visual hierarchy:

In this example, some of the blocks are formatted differently: one has no heading, two have only headings and no paragraph text; one has a larger heading than the others. But these differences feel random and aren't obvious at a glance. Because all the items look so similar, position is the only clear indicator of visual hierarchy. Most users will need to read the content to decide whether it's relevant, making the page less efficient than a normal scannable layout.

Compare this to a page with strong visual hierarchy:

In this example, all three attributes communicate visual hierarchy:

• Our most important call to action ("Visit 看片视频 from home") is...
  • The only full-width block on the page (scale)
  • At the very top (position)聽
  • Accented with a red call to action link (color)
  • (It also has the largest title font, but the size distinction isn't pronounced enough to be obvious.)
• The second row presents two options of equal importance. These get some visual emphasis from...
  • Large images (scale)
  • Color photography (color)
  • Medium-sized titles (scale)
  • Bold black buttons (contrasting color)
• The third row has the least emphasis:
  • The blocks and their titles are visibly smaller (scale)
  • They're at the bottom of the layout (position)
  • The images are in black and white (color)
  • The buttons use an outline, which stands out less (contrasting color)

In general, a good visual hierarchy will allow a user to easily read a layout by skimming over elements from most to least important.

But what's "important" will vary depending on the needs of the user. Sometimes users will visit a page multiple times, with different priorities each time! This means that "importance" is based on what your target audience needs most, but also on what they expect. The brainstorming and sketching activities in "How to use this toolkit" will help you balance these concerns in your visual hierarchy.