You, me, and billions of other people rely on the Internet as the first source of information. Despite the sheer number of people who go online every day, websites are still in a fierce competition for traffic. Website owners try to remain at the top by producing quality content, developing cut-edge marketing strategies, and of course, dishing out a stunning website.

Although content is still the king, no one wants to read anything on a poorly designed website. As business owners gunning for online presence, keep in mind that the overall visual appeal of a website also contributes to capturing a reader’s attention, and should not be taken lightly.

A website’s layout is crucial in making sure that your content is received well. As a website owner who wants to reach the top, you must take note of the flow of information, layout, graphics, and structure of your site. By doing so, you ease readers into the information on offer without overwhelming them, thereby keeping interested to continue reading.

Smart and efficient web design is more relevant now that the universal display or resolution no longer exists. Mobile phones and computers now come in a myriad of screen sizes, making it important to optimize your website to look good and function well on any device, i.e. to be responsive. Research shows that 57 percent of mobile users will close a website if it takes too long to load while Adobe claims that 8 in 10 consumers will stop viewing content if it isn’t displayed properly on their device. Evidently, there is power in effective website design and optimization for page speed.

Visual Hierarchy

“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.”

—Jeffery Veen, The Art and Science of Web Design

Visual hierarchy, one of the most important principles behind good web design, is the difference between a site that strategically influences user flow and decisions and a site that just “looks nice.” It refers to the order in which the human eye perceives what it sees.

In basic terms, visual hierarchy describes which elements capture your user’s attention and draw their eyes most. But there’s no right way to build a concrete hierarchy, and competitive designers must have perfectly unique methods – or invent new ones – to stay on top of the game.

Visual presentation of a web interface is essential for:

• Informing Users
• Communicating Content Relationships
• Creating Emotional Impact

The end goal of your UI design should be to answer the following questions :

• What is this? (Usefulness)
• How do I use it? (Usability)
• Why should I care? (Desirability)

Let’s describe the most basic elements, the essential building blocks, necessary to support simple or complex hierarchies.

1. Scanning Patterns: The Predictability of The Human Eye

There are two predominant reading patterns for cultures who read left to right.

1. F-Pattern

Typically for text-heavy websites like blogs, the F-Pattern is prevalent amongst readers.

First scanning a vertical line down the left side of the text looking for keywords or points of interest in a paragraph’s initial sentences. When the reader finds something they like, they begin reading normally, forming horizontal lines. The end result is something that looks like the letters F or E. As shown, readers on CNN and NY Times both use the F-Pattern to read the content.

Jakob Nielsen of The Nielsen Norman Group conducted a readability study based on 232 users scanning thousands of websites and elaborates on the practical implications of the F-Pattern:

• Users will rarely read every word of your text.
• The first two paragraphs are the most important and should contain your hook
• Start paragraphs, subheads, and bullet points with enticing keywords.

You can see in the left image that the most important content can be seen in a few seconds, with more detailed content (and a Call-To-Action or CTA) presented immediately below for quick scanning. The pattern can be very helpful for sites that want to embed advertising or CTAs in a way that doesn’t overwhelm the content.

Just remember that content is always king, and the sidebar exists to get users involved on a deeper level.

As with all patterns, the F-Pattern is a guideline, rather than a template. It can begin to feel boring after the top rows of the “F.” As you’ll see below, Kickstarter adds in some widgets (laid out horizontally) to keep the design visually interesting beyond the first 1000 pixels.

Source: Understanding The F Layout

1. Z-Pattern

Z-Pattern scanning occurs on pages that are not focused on the text. If you were to access a Z-Pattern website, tendency is that your eyes would wander horizontally over the top. It’s possible that your attention is drawn to the menu bar at first or simply because you’re used to reading from left-to-right. When you reach the end, your attention shifts down and left (again based on reading habit), and repeats a horizontal search on the lower part of the page.

Source: Understanding The Z Layout

The Z-Pattern is applicable to almost any web interface since it addresses the core website requirements such as hierarchy, branding, and Calls-To-Action. The Z-Pattern is perfect for interfaces where simplicity is a priority and the CTA is the main takeaway. Forcing a Z-pattern for a website with complex content may not work as well as the F-pattern, but a Z-pattern can help bring a sense of order to simpler layouts (and increase conversion rates). Here are a few best practices to keep in mind based on the image above:

• Background: Separate the background to keep the user’s sight within your framework
• Point #1: This is a prime location for your logo
• Point #2: Adding a colorful secondary CTA can help guide users along the Z-pattern
• Center of the page: A featured image slider in the center of the page will separate the top and bottom sections and guide the eyes along the Z path.
• Point #3: Adding icons that start here and move along the bottom axis can guide the users to the final CTA at point #4.
• Point #4: This is the finish line and an ideal place for your primary CTA.

Predicting where the user’s eye will go can be a huge advantage. Before arranging the elements on your page, prioritize the most over the least important ones. Once you know what you want your users to see, it’s just a simple matter of placing them in the pattern’s “hot spots” for the right interactions.

2. Size

Bigger is more eye-catching, but it’s not always better. The simplest way to explain it is that your most important element should be the one that is standing out, but it’s when we get into the details that it becomes a little more complicated. The user exerts less effort to click bigger items. This holds especially true for calls-to-action, where you want to leave no question as to where the user should go. Of course, that’s not to say that it’s as simple as making your “DOWNLOAD NOW” call-to-action 10x larger for more conversions. Subtlety and harmony between elements is the key.

Source: Huge Inc.

All the principles of size are visible in this screenshot from Huge Inc. The first thing you notice is the biggest, the stylistic H that serves as their logo. Next is “Nike Making,” whose large typeface and bold style create immediate weight. Next is the line of text directly beneath it, written in a smaller font size so as not to steal attention from the key visuals. If your eyes are still interested enough to wander, they’ll eventually notice the tiny logo and hamburger menu in the corners, or the navigation bar to the right.

The hierarchy makes sense here. First, the large colorful H catches your eye. Soon afterward, you’ll seek context for the unorthodox visual, which is immediately accessible with the hyperlinked “Nike Making” headline and secondary sentence. Visual hierarchy lays out the user path, while size hierarchy simplifies interaction by making the entire chunk of copy clickable and in close proximity to its related visual.

Without even thinking about it, you end up clicking exactly where the designer wants you to go. It goes without saying that balance and moderation is key. The design should not

• be overpowered with an overly large focal point or
• compromise user usability with secondary content that ends up being too small.

3. Color

We’re visually drawn to color, especially when it’s used strategically to highlight important information or imagery. A bright splash of a color like red or yellow, for example, is hard to miss — whether it’s on a traffic sign on the side of the road, or a flyer hanging in your local coffee shop. Clever use of color can be one of the most visually interesting ways to differentiate elements on a page and draw attention where you want it. Your brain’s obsession with contrast will cause your eyes to focus on objects that stand out due simply to their difference in color in relation to the surrounding objects. Consider the following example:

Source: Fitbit

Fitbit’s use of color in their Z-pattern interface above is especially clever. The bright use of magenta immediately places the calls to action near the top of the visual hierarchy, but also matches the color of the “Get Active” button — subconsciously signaling that the two concepts are related. Similar shades of blue are also used in the fitness goals and product sections, which cleverly creates an association between the two (and draws clicks to the most valuable parts of the interface).

4. Layout

One of the most straightforward ways to control your website’s visual hierarchy is through its interface. By placing a focus element front and center, you can then follow up the visual hierarchy with the use of rows and columns for a more organized and structured layout. This can help keep the chaos at bay and also leaves some space at the end for CTAs or other chosen content. It can be a tedious and fiddly balance, but crucial if you want to avoid overcrowding your website with too many elements. The visual hierarchy can flatten and very little will stand out on the design.

Source: Adoratorio

In web design, these are, amongst others, the corners and border of the screen. As “throwing” the cursor to sides requires less mouse control than a fixed point in the middle. While you’ll probably focus primarily on the center of the screen (given its size and contrasting black lines), the stagnant clickable links remain easily accessible in the corner and at the bottom. Scrolling up and down changes what’s displayed in the middle. However, the site logo, hamburger menu, contact information, and social media links stay firmly in their prime locations.

Of course, your layout certainly affects the visual hierarchy, not to mention usability. The Gestalt principles (described below) dictate that objects in a line create momentum to propel eyesight forward, even dominating the effects of color. Rows and columns, then, aside from supporting an organized structure to keep the chaos at bay, also create some prime real estate when they end – perfect for CTAs or other preferred content.

Source: Huncwot

As you can see, Huncwot keeps the options for its homepage organized in a straight horizontal line (with an animation behind whichever selection you’re hovering over). It’s a tricky balance, but mandatory for every single website. Otherwise, if you crowd your website with too many interface elements, your visual hierarchy flattens, and nothing stands out for the user.

5. Spacing

One of the most important yet often ignored design principles is the use of White or blank space and spacing. Failing to allow some amount of blank space can leave your design looking overcrowded and confusing, ultimately drowning viewers with too much information. White space is your number one go-to for separating and organizing the elements in your design. No one wants to spend time making sense of a design. What you want is a site that is easy on the eyes, orderly, and well balanced. Always plan for unused space. It’s essential for things like:

• Giving the viewer’s eyes a place to rest and a path to travel through the design
• Separating your layout into sections (the flip side of this is proximity – reducing space to place related items close together – also an aspect of good spacing)
• Isolating focal points

David Salgado and Mariana Perfeito’s editorial design does both of the above, leaving plenty of white space between and around each section of the layout, while grouping related items together. The result is a clean and balanced design.

6. Fonts

When typesetting, there are other aspects to take into consideration other than just Typographic hierarchy. Different aspects of the fonts can really make or break the design such as the category used, decorative, script, sans-serif, serif or script or even the use of uppercase, lowercase, bold or italic, width of the strokes, etc.

Notice how typeface affects the hierarchy order of the words in web design below for The Tea Factory. “The perfect teas to keep you warm” is the focal point, but differences in type weight and italicization, in addition to word placement, produce a more dynamic, less linear, reading experience. “See our selection,” the call to action, is more strongly emphasized than the text above it due to sizing and spacing.

Source: Tea Factory

7. Style & Texture

Another way of drawing attention is to give content ample room to breathe. A site that looks crowded will render your visitors lost and later asking themselves “what am I supposed to do here?” Ultimately, they click away, absorbing no information about your brand at all. If there is substantial negative space left around a button, or the lines in a text block are widely tracked, these elements will be more readily visible to readers. Not everyone will know where to click next, as a website owner, it is your job to guide them to the behavior you desire.

As you see in the image below (part of DrawtoClick‘s website), spacing can be an elegant alternative or addition to the use of size. Here, the selling point, “Notre agence vous accompagne …”, is in a very small font, but it is surrounded by an excess of white space that signals its importance. Below, the phrases “Le Compendre,” “Le Réaliser” and “Le Partager” receive extra emphasis by being boxed off from surrounding space.

Source: Draw to Click

When people talk about “texture” with respect to visual hierarchy, they are not referring to pictorial texture effects. Rather, this kind of “texture” refers to the overall arrangement or pattern of space, text and other detail on a page. This example by Bright Pink illustrates the concept nicely:

In the first image, the word “Sports” is higher in the hierarchy than “badminton” due to being higher, bigger and bolder. In the second image, the two words are about equivalent. Thanks to a black rectangle that highlights “badminton” and sets it into its own space.

In the third image, a background scribble interrupts the space of “Sports” but not “badminton.” Consequently results in a reversal where “badminton” is highest in the hierarchy. Such a progression is difficult to predict, so designers often chalk it up to a holistic sense of “texture.”

Source: Posters “Bright Pink” via Smashing Magazine

8. Composition

Using some of the techniques in the article can help guide visitors to your website through your design and layout. Think of it as a first impression. At first glance, does your website leave a pleasant impression? Or will it scare visitors away because elements are all over the place?

Overall, most designs will greatly benefit from putting in place an overall structure, more commonly known as the composition, which is made up of Implied Movement:

• The Rule of Thirds

Following the rule of thirds is one way of creating a dynamic composition. This is where your focal point isn’t predictably placed at the center.

Instead, this rule divides a layout into a grid (three equally spaced horizontal lines and three vertical lines). The focal point is placed either on one of the lines, or ideally, on one of the four points where the lines intersect.

Source: Cover Design Studio

• The Rule of Odds

The rule of odds often involves threes as well. The idea behind this one is that an odd number of objects (perhaps the focal point surrounded by two other items — or four, as below) is always more interesting and pleasing to the eye than an even number.

Source: Charlotte Cheetham (many stuff)

Failed Hierarchy  – Brandon Jones (Web Designer Speaker, Author, Former editor for Tuts+)

“Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters; it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.”

As suggested in the last section, it’s important to note that hierarchy can be used for both good and evil. Think of all the annoying Flash advertisements, popup windows, glitter banners, etc. the web has been plagued with for years! While these ads succeed in grabbing attention, they ultimately fail the site owner. They also fail the viewer by breaking the visual hierarchy within a site.

Similarly, if a designer builds a visual hierarchy with certain key pieces of information nearly impossible to find, the designer will have failed at his task. Brandon Jones put it best when he states that good visual hierarchy isn’t about wild and crazy graphics or the newest Photoshop filters; it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.