Hendra Nicholas I am a software engineer, consultant and CEO at 41studio currently living in West Java, Indonesia. My interests range from programming to sport. I am also interested in entrepreneurship, technology, and design.

Visual Hierarchy on Web Design

2 min read

Visual Hierarchy on Web Design

Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance. In other words, visual hierarchy influences the order in which the human eye perceives what it sees. This order is created by the visual contrast between forms in a field of perception.

Visual hierarchy is one of the most important principles behind effective web design. Visual hierarchy is the difference between a site that strategically influences user flow and decisions, and a site that just “looks nice.”

An interface’s visual hierarchy relies on the same principles of aesthetics used by the Renaissance masters, but on top of that (or rather beneath it) there’s the subtext of secondary goals – promoting specific content, encouraging user signups and call-to-actions, and generally improving the overall experience so users enjoy their visit beyond just accomplishing their goals.

1. Scanning Patterns: The Predictability of the Human Eye

All cultures read from the top down and most cultures read from left to right. But while that knowledge is important for page design, designers know the task is much more complex.

  • F pattern

Typically for text-heavy websites like blogs, the F-Pattern comes from the reader first scanning a vertical line down the left side of the text looking for keywords or points of interest in the paragraph’s initial sentences. When the reader finds something they like, they begin reading normally, forming horizontal lines.

  • Z- Patterns

Z-patterns apply to other sorts of pages, like ads or websites, where information is not necessarily presented in block paragraphs. A reader’s eye first scans across the top of the page, where important information is likely to be found, then shoots down to the opposite corner at a diagonal and does the same thing across the lower part of the page.

Web designer commonly construct their pages to conform explicitly to this behavior, placing the most important information in the corners and orienting other important information along the top and bottom bars and connecting diagonal.

2. Go Big

This one is simple enough: people read bigger things first. If your eye goes to “performance” before “cracking” in the below ad for the Young Vic theater, then you should get in touch with a perceptual psychologist immediately: you can probably make some good money undergoing testing as a rare anomaly.

3. Tools of the Trade: Color, Size, and Space

I. Color

In a nutshell, bright colors stand out from muted colors. This may seem obvious, but the important takeaway is its application: you can exploit this to draw your user’s attention where you want. Additionally, certain colors can help set the mood of the entire site (blues are tranquil, reds are aggressive, etc.).

II. Size

Size, particularly for text, is a powerful tool in that it circumvents the traditional rules of left-to-right and up-to-down reading. That means a large word or phrase in the bottom right-hand corner might be the first thing a person reads. Moreover, size can add emphasis to the actual message or content, making it more significant.

III. Space

One of the most important tricks in making something pretty is the absolute absence of something pretty. Cluttering too many attractive images together is a quick way to ruin them all. It’s important that your web interface has breathing room and that you space everything out. Reducing the amount of “visual noise” will make the points you want to keep even stronger.

4. Takeaway

Understanding visual hierarchy and applying design patterns are two of the most important skills in good web UI design. They are fundamental and interconnected: once you know how to visually prioritize information, you’ll have a better grasp of how to apply existing design patterns.

Prioritize your interface based on how people scan for information. Then, apply color, contrast, color, size, and spacing for further accentuation. To help shorten the learning curve, you can also turn to UI pattern resources like UI Patterns and PatternTap.

5. Typeface weight and pairing

Typeface selection is critical to establishing visual hierarchy. Among a typeface’s most important attributes are weight – the width of the strokes that compose its letters – and style, like serif and sans serif. Other modifications like italicization can play a role too.

Are you still confused about virtual hierarcy on web design? 41studio understand how important to make your website and or mobile apps look more interesting and attractive when visitors come by. Tell us what look you like or simply trust us to make it different based on your business goals.

Hendra Nicholas I am a software engineer, consultant and CEO at 41studio currently living in West Java, Indonesia. My interests range from programming to sport. I am also interested in entrepreneurship, technology, and design.