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.
Let’s examine a few ways in which you can create your visual hierarchy.
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.
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.
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 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.
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.
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 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.
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.
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 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.
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.