Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /nfs/c07/h01/mnt/112544/domains/mouthmedia.com/html/blog/wp-includes/pomo/plural-forms.php on line 210
Understanding Visual Hierarchy

Did you know that your version of Internet Explorer is out of date?
To get the best possible experience using our website we recommend downloading one of the browsers below.

Internet Explorer 10, Firefox, Chrome, or Safari.

Skip To Content
Get a Quote
416.531.5443
Blog

Our Blog

Aug 15

Understanding Visual Hierarchy

A website is an interactive portal which combines business with aesthetics. The business part might be clear but how does aesthetics come into the picture? A website uses visual art to grab a user’s attention and this is the aesthetic part.

A web design isn’t concerned with the pretty part. Its main aim is to make the interface user-friendly. Here in enters visual hierarchy. No need to get afraid by the sound of it. It is actually a pretty simple concept which makes use of colour, contrast, texture, shape, position, orientation, and size to organize the elements of the page in terms of visual importance. Visual Hierarchy makes use of the same underlying principles that were followed by Renaissance masters. The main objective of applying visual hierarchy while designing is to give the user a starting point so that they travel through the website easily and also to end their journey on the most important information present on the site.

If a website is backed with the right visual hierarchy, you own the power to control the minuscule seconds a user may spend on the site. A basic visual hierarchy design will have the following elements. But the importance lies in how the designers make use of these.

Size

Size equals the importance of design. The most effective design would place the most important information in big, bold type and vice versa for the less relevant information. The bold information would be placed in the bottom right-hand corner of the page. This element will guide the user to ‘call-for-action’. For example, a website may place a large clickable button on the site. Here the user is immediately drawn to this and the site’s objective is achieved. But a ‘Download now’ button in large fonts may just drive the user away. Being subtle and creating a harmony are the vital elements here.

Colour

A simple black and white choice is also a difficult decision when it comes to website design. Designers can create different layers of meaning using colours. It can be used as a tool to organize and also to provide a personality to the site. When you use bold and contrasting colours, that aspect will demand your attention; this is an example of organization. On the other hand, an example of personality would be using luxuriant colours to add an emotional touch to the site. Colours too have their own hierarchy in which black and red are on the highest level as they draw the most attention while colours like soft yellows and creams occupy the lowest level.

The hierarchy can be used according to your convenience by using contrast. The use of complementary colours (natural opposites) can draw equal attention to both.

Alignment

The aim of this is to arrange the elements in the right order. For example, between a ‘content column’ and a ‘sidebar column’. But in certain instances, their roles can be a bit more complex. For example, the top right-hand corner of a website will usually have information related profiles, accounts, and so on. It is the official part of the site.

The basic principle applied here is that when a single element breaks away from the overall alignment of the page, it draws immediate attention. For example, ‘a pull quote’.

Repetition

A designer can use this tool to provide relative meaning to the text. For example, basic information throughout the site may be given a grey colour. Whenever the user sees the colour, they make the connection, but if they come across a blue link or a black title, they know that it is different.

Proximity

Visual impact lies in effective spacing. Never commit the mistake of cluttering together a lot of pretty pictures because this just ruins the pretty. This is known as the concept of white space. The website when looked at as a white space or blank canvas should be treated with respect. The right amount of blank space is a necessity here without which the balance and order of flow are disrupted.

Another aspect to be noted in proximity is that the users assign similar meaning to those elements which are close together.

Style and texture

Web designing is not a practice which can be quantified. You cannot have a single way of doing things. The designers have the choice of using numerous tools like textures, graphics, imagery, and so on in order to create a personal style for the website.

Among these, texture is of the highest value. It can be placed on the same level as size and colour, but an added quality would be the addition of depth and atmosphere.

The use of graphics and imagery by the designer also provides its own advantages. For example, the use of rich photographs or icons presented in a clever fashion can immediately grab the users attention.

Equipped with these tools, a designer can create marvels, but if these tools are not used in a harmony with each other, the site will end up pushing users away.

Leave a Reply

*
*
*