the 6 principles of visual hierarchy 

Page Scanning Pattern

Most people skim pages in order to decide if they want to actually read the content or to to another page.

For traditional pages that have a lot of text many readers will use what is called an F-pattern by tracking down the left side of the page, while quickly skimming right to pick up any pertinant information.

In order to really capture your viewers attention, be sure to place your vital information at the top left of the page and always use left-aligned headings.

If you’re using layouts with less text, a safe bet is that your reader is going to scan the page using a Z-pattern.

As you can see, the most important information should still go in the top left corner, followed by the top right corner and the footer (bottom) section of the page.

In this situation, I generally recommend that you place a high resolution image to align the top and bottom content.

Size

Important content should be larger as humans tend to read larger, bold aspects of the page before the rest.

By using larger or high contrast content, you can often trump the traditional F-pattern & Z-pattern habits of your readers.

Just be sure that you don’t go overboard with the size. Too much and your page can go from pretty to ugly and will look like an ameture designed it. 

Bold Color – High Contrast  

Easily to understand but often the most underutilized in day to day design. 

Where They At does an excellent job with this concept. As you can see the grayscale layout puts emphasis on the brand and logo in the top left. As you hover through the list of artists, they color pops out and truly makes for a visually pleasing experience.  

White Space  

Technology has really screwed up our attention span as humans. It’s sad to think that a Goldfish can focus longer than we can.  

This is why white space is so very important now, specifically when you have large amounts of content on a particular page (like this one). I’ve intentionally spaced this to keep you reading. 

 Segmenting your content into smaller, easy to read pieces makes your words easier to consume. If this page was just one giant essay, you would have already left the page. 

White space can also increase conversion rate of a website. Any decent marketer will tell you that giving prospects too many options will confuse them and you will end up losing their interest entirely. So…use white space, be simple. 

Keeping It Simple

Simple websites almost always convert better than busy websites.   

In this example I’m using a clean, yet effective layout used by a Hosting company. Generally speaking, a hosting company has two main objectives.

Sell domain registrations and sell hosting packages. 

You’ll notice this designer has heavily focused the domain search function by bringing down the opacity of the header image, and utilizing white space. 

The orange button promotes their call to action (search for domain availability). 

Directly below that is their hosting service packages. 

This is a perfect example of simple, yet conversion focused web design.

Following A Grid Outline

If you do have a busy page on your website, it’s best to use a grid system when outlining your content. 

By keeping things in a linear it provides a solid structure for how a brain should interpret your page. 

This doesn’t mean your page should look like a checkerboard. You can break up the grid at any time as look as it stays fluent. 

Notice how the shop categories are all organised neatly near the bottom. The picture and text to the left remain congruent making a seamless transition.  

Typeface/Font 

Technology has come a long way since I started website design in Traverse City 12 years ago. 

Web Designers didn’t have much of a choice as far as font format goes. Now, the possibilities are virtually endless with modern browsers supporting hundreds of font faces. 

This doesn’t mean you should use 20 different fonts on one page. Two styles are my max, it’s all you really need.

Start by choosing a display font, a serif font, and a san-serif font — this combination should meet the majority of your design needs without becoming distracting. 

Colors

I’m going to stick to the “minimalist” approach again here and suggest that you keep your color scheme minimum. Here you can see a 5 color website. 

Remember, distractions kill sales and conversions. I like to pick 2-3 neutral colors and base the theme of the website on those colors. 

I use 1-2 more vibrant colors for call to action buttons, forms, headings, and page breaks. 

Images

Using creative or vibrant images will either make or break your website. 

One good header image can make your website stand out from competition, but too many will make it look like your page was the product of Cousin Eddie. 

 Use images to draw in the attention, then hit your viewers with a powerful message to drive your point home.

Closure

Our brain is an extremely powerful muscle. It’s quite unbelievable really.

Gestalt’s Laws are what our brain does subconsciously. Our eyes have very little to do with this process. 

Closure is essentially the act of our brain filling in the gaps between elements, making it whole.

This works best when using common elements easily recognizable by the audience. 

Continuity

Once we start following an object, our eyes naturally skim to the right predicting that there will be something else. 

We can use this in design to visually direct our audience where we want them to go. 

An example would be a model pointing in the direction of your contact form.

Using an image like this saves time since we processes pictures 60,000 times faster than text.

Similarity 

We group similar objects together in a group, even if the objects are different. 

This element of design is commonly used on websites to display the services that a business offers. 

It’s also common practice in testimonials, blog posts, and in the navigation bar. 

Though this doesn’t seem like a big deal, it is. Remember, it’s our job to make your website as easy to consume as possible.

Symmetry

When your Web Designer builds your website, it’s important that we create a symmetrical design. 

Readers eyes seek symmetry and struggle if they can’t find it. 

Text alignment, image alignment, columns help potential customers easily scroll through and find the information they’re looking for.