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

I had a strong vision of how I wanted my website to look and function and Richard has totally fulfilled the brief and more.

He is efficient, quick and creative and his a can-do attitude has meant that my launch has gone off without a hitch which is invaluable.

I now have a great online brand, a CMS that I can update myself easily, amazing analytics, as well as my own mail-out system that even the most computer illiterate could use.

If I get stuck Richard always gets back to my endless queries and I would recommend him to anyone.

What's next?

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

Colour Rich custom website design

Ten social media time-savers

Monday, November 24, 2014

Ten social media time-saversWith a limited amount of hours in a day, spending time on social media can be an ongoing challenge for business owners.

Here is a list of time-saving tips to help you plan, deliver and analyse your social strategy in less time.

  Read more

DesignCMSSEOE-marketingPrintPortfolioContact
© Copyright Colour Rich. Privacy