A visual hierarchy is the system by which the relative importance of individual design elements on a website or printed document design 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 bespoke web development, 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.
{module_contentholder,name=”Blog ad”}
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 design 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.