Visual Hierarchy In Web Design

An efficient and smart web design requires cohesive, clear visual aids so that the visitor has quick and easy access to what they are looking for. Visual hierarchy in web design refers to the arrangement or presentation of elements in a way that implies importance and influences the order in which the human eye perceives what it sees. The theory behind it is that the human brain has “innate organizing tendencies that structure individual elements, shapes or forms into a coherent, organized whole.”

Insert picture description

It’s important to note that in web design, visual hierarchy needs to work in conjunction with functionality. In other words, form and function need to work in perfect harmony. If a website only has beautiful aesthetics, but lacks functionality, the visitor has no way to answer CTAs or purchase a product and will move on to a competitor’s site that meets their needs.

Detailed Description:

On August 6, 1991, the first web page went live. Created by British Scientist, Tim Berners-Lee, the web page was dedicated to the World Wide Web Project, “aiming to give universal access to a large universe of documents.” The single page consisted of lines of text and blue hyperlinks.

Throughout the 1990s, many companies started to create their own hand-coded HTML websites using a wide array of colors, hyperlinks and flash animation. There was fervor for adding as much information as possible to a page with no rhyme or reason to the design layout. These early websites had a lot going on with a collage of competing images, mismatched colors, fonts and content. To get an idea of a common 1990’s web design, check out this older site which is still live today. The lack of visual hierarchy in this incoherent design leaves the visitor unsure of where to look first!

The F-Pattern

When our eyes scan a website, the images and content at the top of the hierarchy grab our attention first. Studies have shown that we read in an F shaped scanning pattern on the internet. We tend to choose the path of least resistance, so we quickly look over images and content to get to the information we want. When we do this, our eyes scan from the top left-hand side of a web page and then move to the right, then down the left side looking for visual cues and then right again, but we read a little bit less across the right each time we scan down the page. A well-executed web design places the most important information within an F-pattern, allowing the reader to scan the images and catch keywords in a matter of seconds.

An example of a well-executed F-shaped scanning pattern incorporated into the design. This homepage seamlessly guides the viewer along using clear communication and keywords within the top of the hierarchy:

The Hero Image

Another popular and effective use of visual hierarchy is to place a large image, called the “hero image” above the fold. The name came from the term “hero prop” which is used in the film world and refers to any object intended to be held or used by the main actor. The web design world picked up on the name ‘hero’ and along came the “hero image” which has grown in popularity and size – it can take up a lot of the homepage real-estate. It is the first visual element a visitor sees, displaying a clear overview of the site’s most important content.

While the hero image has taken the website design world by storm, it’s interesting to note the resemblance to traditional newspaper layouts. Think about the front page of a newspaper. It typically has a high contrast image, a large, attention-grabbing headline followed by the story. The hero image design follows a visual hierarchy that has been in use for centuries.

6 Tips for Incorporating Visual Hierarchy

When designing a site, here are the key elements to consider when following visual hierarchy:

1. Size – large elements attract attention
2. Color – bright colors attract attention
3. Contrast – dramatically contrasting colors will catch the eye easily
4. Alignment – space between elements attracts more attention
5. Whitespace – the eye is attracted to elements with more space around them
6. Texture and style – rich textures attract more attention than flat ones

Since design trends always seem to circle back, will we return to chaotic web designs of the 90’s? Let’s hope not! Many of the early sites did not have a coherent, clear arrangement of images or presentation. It has been exciting to watch the evolution of web design and the importance that visual hierarchy plays between creating a good or bad design.

When designing a website, it’s important to consider key factors such as visual hierarchy, functionality and SEO. This is when it’s best to consider hiring a professional. Are you ready to make improvements to your website? For better improvements get in touch with Vie Signals at www.viesignals.co.uk for best website designs.