Cameron FrancisJanuary 17,2014

Incorporating Visual Hierarchy In Web Designs

Category: Web Design

You should keep in mind that hierarchy does not only pertain to textual content. The imagery that is included in your designs, including graphics, icons, photos, and buttons, also has a large impact on the perception and hierarchy of your site. The imagery that is used when designing a site will set much of the tone of your site, along with typography and colour. If your imagery doesn’t complement your design well, it will frequently destroy the impression you are attempting to convey.

Generating an appealing visual hierarchy will involve a good understanding of ways to utilise imagery to enhance the experience of your visitors while avoiding breaking the content flow. Imagery is also another means of conveying the message of your site in order to show users where to go, what to do, and what to expect from your site. Imagery is a visual means of telling visitors your story.

The use of appealing visual elements like icons and images also helps to create a more visually attractive and attention getting web page, which allows you to highlight the important parts of the page that you would like to emphasise.

Creating Visual Hierarchy via Imagery

Let’s examine a few ways in which you can create your visual hierarchy.

Consider the Tone You Would Like To Set

Your design images set the tone of your site. If the tone you want to set is relaxed, casual, professional or another type of style, then your images should reflect that style. It’s important to utilise imagery to enhance your site, rather than to explain what actions your visitors should take. A site that has no imagery should still have the ability to convey the same message as if the images were present. Images are present to enhance your message, and render it more compelling. Nevertheless, images shouldn’t be an afterthought. Images should receive the same attention and care that you give to other parts of your design so they complement your content.

Use Care with Contrast and Sizing

Another consideration is the image size that you make use of. When you can, use imagery that fits in with the vertical rhythm that already exists. This will keep your content flowing well and make it easy to navigate through. As readers scan content from top to bottom and left to right, we want our content to maintain a visual rhythm that is consistent. This means that we create a user experience that is visually relaxing. This will give our visitors a familiar feel and make content more readable by getting rid of visual barriers.

Use Care with Contrast and Sizing

In addition be cognisant that the size of visual elements will have an effect upon the manner in which content is read. You shouldn’t create a contrast between image size and text that is too drastic or the flow will be broken and it won’t be readable. This rule can be broken at times when it is helpful to incorporate a large image into your design.

Don’t Use Images to Replace Text

Don’t make the assumption that it is easy to understand your images. It’s a good idea to have a sub-heading or caption to accompany your images to assist visitors in understanding your message and to connect the images with your text. This will also make your content understandable under conditions where images cannot be displayed.

Should You Use Custom or Stock Photos

This depends upon your site’s style and they type of design you want to create. Often times, stock photography can appear rather generic, and of course it may be replicated on numerous other sites. However, custom photos may also appear rather bland if they aren’t shot properly.

Custom photos, especially when taken by a professional photographer, often times have an awesome effect on designs, and it can provide you with the visual lift your design needs and also add some contrast to your site.

At times custom photography may be a necessity, for example, on e-commerce sites. In these cases it is important that your photography is commensurate with the style, look, and feel of your site’s design. Or else, you may have a well-designed site and great photography that don’t play well together.

Making Use of Colour

When you select particular colours, a primary reason will often be to separate part of a design from adjacent sections or to draw visitor’s attention to it.

Making Use of Colors

Making use of colour in this manner can be quite effective and it is an easy way to ensure that elements will receive the amount of visual weight that you desire. Colour can also be used with elements that are contrasting in order to draw visitor attention to that which is most important. Experiment with colours to determine how colours that are used in your icons, as an example, may alter the image and perception that a particular element portrays in a design.

Don’t Neglect Shape

Shape is a frequently forgotten and underrated aspect of visual elements. Don’t be hesitant to experiment with various shapes to add variety to your images. Even though circles are very popular in many modern designs, you should experiment with other shapes to see how they fit in with your design. Whether it is the way that an icon is shaped or how you mask photos, shape can have an effect upon the impact of your design.

Patterns of Visual Hierarchy

There are two layouts of visual composition that may be of assistance when attempting to create visual hierarchy. We will mention them briefly, as they can be helpful when considering visual hierarchy in your design.

Z Layout

Z layout is a commonly used compositional layout found in a lot of designs. It is a reference to the pattern in which the eyes are drawn over a web page. With a Z layout the eyes will scan the top left, then move to the right and are then drawn down diagonally toward the left and then again to the right in a ‘Z’ shape.

Z Layout

Golden Section

This layout is very well known in the design and print community. This refers to a mathematically calculated way to determine the most effective place in a design to put an element and how the element can add visual weight to that area of the design. The main portion of the content is normally put in the large part of a section and secondary content, with less importance, is put in the smaller part.

This can help when using visual elements. We can display the most important imagery in the large sections adjacent to the main content, and less important images in smaller sections.

Author: Cameron Francis Cameron Francis is the Director of eTraffic Group. He has been engaged in all aspects of online marketing for the past 8 years. He is actively involved in SEO, Paid Search, Social Media Optimisation, and Web Design.

Instant Website Analysis

We offer a FREE 20 page anaylsis of your website. This indicates areas that need improving or changed for a positive user experience and increase traffic volumes.

etraffic TV

<… name="allowfullscreen" value="true">

Join the etraffic community

Connect with us on the following social media platforms.


• Social Networks •

• Our Locations •

Click To View Our Contact Details

Level 1, 530 Little Collins Street, Melbourne VIC 3000, Australia | 1300 887 151

Level 2, 50 York Street, Sydney 2000 | 1300 788 679

Level 1, The Realm, 18 National Circuit, Barton Canberra ACT 2600 Australia | 1300 765 708

Level 1, 16 McDougall Street, Milton 4064 | 1300 765 709

220 Varsity Parade, Varsity Lakes QLD Australia 4227 | 1300 887 804

Level 1, Paspalis Centrepoint, 48-50 Smith Street, Darwin NT 0800 Australia | 1300 889 815

Level 18, Central Park. 152-158 St Georges Terrace Perth, WA 6000 Australia | 1300 550 753

Level 3, 97 Pirie Street, Adelaide 5000 | 1300 669 895

Level 6 Reserve Bank Building, 111 Macquarie Street, Hobart TAS 7000, Australia | 1300 885 870

We seek to create long-term relationships
Tell us about your business goals and we will contact you