Creating the visual hierarchy

Facebook Twitter Google +1 LinkedIn
Sunday, March 17, 2013 by Richard Howe

A visual hierarchy the system by which the relative importance of individual design elements on a website or printed document is made clear to the reader. 

Creating a well-structured hierarchy is vital in communicating any message effectively whilst maintaining interest and comprehension. In the fast-paced world of the internet, where websites have only seconds to ‘hook’ their readers, this is absolutely critical.

For the most complicated of designs, creating a vibrant and high-functioning hierarchy takes some experience and adept interplay between the tools available to the designer. But the basic techniques remain the same, regardless of the complexity of the project. Here are some of the main concepts.

Size

It seems obvious, but the bigger the font and the larger the image, the more visual punch the object has.

Typography

As well as larger and bolder fonts, heavier weights, darker colours, and italicised or upper case text grab the reader’s attention quickly. Using a different typeface for your main message can be a valuable tool, and combining typefaces can quickly communicate areas of importance.

Images and scale

Images themselves draw the eye in, particularly if the image is large or has unusual scale (e.g. zoomed-in photos or part-images). Colour, contrast and saturation – Bright colours such as red and orange are immediately eye-catching. Dark colours against a lighter background stand out and opposite colours also create contrast. Using the same colours but with different saturations is one way to demarcate areas of a page that are of greater or lesser importance.

Motion and movement

On a webpage, moving images and text compete very strongly for a reader’s attention. Used well, they can be very effective, but overuse can create confusion.

Location

Western audiences read left-to-right and top-to-bottom and if in doubt, will tend to naturally look at the top left corner of a page. Generally speaking, the higher up the page, the more important the item will be considered, unless other techniques such as size or colour are employed.

Shapes

Arrows, circles and other rounded shapes often draw the eye around them and onwards (with the exception of a circle in the centre of a page). Ensure that they are positioned carefully with this in mind.

Faces

Whether friendly or threatening, we are naturally drawn towards human faces. As well as a common sales technique, using an image of a human face strongly affects visual hierarchy and pulls readers towards that area of the page.

Complexity

Making the main item on your page either very much simpler or very much more complex than the surrounding items will encourage the reader to focus their attention on that element.

Grids and structures

Grids provide a structure for combining all graphic elements and a well-organised and structured web page is far easier for a reader to understand and navigate. Text blocks and a logical, natural flow assist this further and ensure that your reader knows where to read and in what order.

Proximity, density and whitespace

Items that are close together will be seen as linked by readers and packing a lot of text or several images into a smaller space will give that area more weight. Leaving plenty of whitespace around an image or a text block will also draw the reader’s eye to that area.

Convention and repetition

Repeating a graphic or typographic element indicates the same hierarchical level. Conventions such as menu bars, dropdown menus and blue underlined hyperlinks are all examples that readers are already aware of and bring to their reading of your site. Whether you choose to use these conventions or create your own, consistency is the key to making this work.

In summary, a strong visual hierarchy can aid both communication and comprehension. Used most effectively, it can create very memorable pages and make the content seem full of energy – stimulating and exciting to read.

Your comments

Post has no comments.

Post a Comment





Captcha Image
Facebook Google Plus LinkedIn

Request a callback

Filter by category

Post archive

When I began my first start-up adventure, I knew that building a full-featured e-commerce site would be challenging, but Richard made it feel easy!

First and foremost, Richard is a talented designer, who was able to hear my vision for my site and then make it a zillion times better. I could not be happier with the site, which is beautiful, clean, user-friendly and professional.
While his design skills are superb, I will hire Richard again and again because he is an excellent partner.

As a non-technical solopreneur, I needed a designer who could work with - and manage - me. He is an excellent communicator, who made sure I understood and could anticipate what was needed from me at each stage of the building process. He is also a patient and willing teacher.

Thank you, Richard! I could not have done it without you.

What's next?

Get in touch on 01993 883767 and let's kick-start your project.

Colour Rich custom website design

6 facts about user-generated content

Tuesday, September 23, 2014

6 facts about user-generated content Whether you’re including user-generated content in your current website, or just curious as to how it might increase your visitors’ engagement and your brand recognition, there’s no doubt that innovative use of user-generated content (UCG) is an intriguing idea.

In this blog post, we focus on six facts to get you thinking about the possibilities.  Read more

DesignCMSSEOE-marketingPrintPortfolioContact
© Copyright Colour Rich. Privacy