An effective design is all about visual communication. A design should be able to clearly communicate its concept to the viewers or else lose its attention. People are inherently visual thinkers and not data processor. Therefore, careful control of visual hierarchy is one of the key aspects of the design decisions to be considered. The different imagery you include in a design including photos, buttons and other visual elements other than text has a major impact on the hierarchy and perception of your website.
Why visual hierarchy is important?
So when you design a website any imagery that you use will essentially help to set the tone of the site. If the visual elements integrated do not fit right within the design, they can break the impression you want to create. Crafting a visual hierarchy is a form of storytelling that direct the viewer’s where they should go, what they should do and what they can expect from a website. Visual elements enhance the user experience, reinforced your messages without breaking the course of the content. Icons, imageries, photos, content all help in creating visually exciting and creative ways of attracting user’s attention thereby allowing you to emphasis on the important areas of a design.
What helps visual hierarchy express its thoughts?
The four basic design principles work behind visual hierarchy to express its valuable information:
Contrasts play a vital role. Of course an h1 heading is bigger than an h2 is bigger than an h3 heading. Therefore, anything larger will grab the user attention an so come across as important
Proximity separates elements within the hierarchies and creates further sub-hierarchies. A web page has different elements from heading, image, descriptive paragraph and link. And these elements are on different hierarchical levels
Alignment helps to create order and allow you to connect elements across web pages and define both the start and end points
Repetition assigns meaning to any new elements and communicates that each elements are at the same level in the hierarchy.
How will you establish a strong visual hierarchy in a web design?
A few principles work behind creating impressive visual hierarchy in your design-
Sizing:
The right size of imageries is important. Whenever possible keep the imagery that works best with vertical rhythm that has been created earlier. This will help to keep the content moving and will not be difficult for the users to navigate through. The actual size of the images and visual elements used will affect the way content will be read. Do not create too drastic a contrast between the text and the size of the images as that will break the flow and will make it unreadable.
Size as a hierarchal tool is an effective way of directing a viewer’s eye to a specific part of a page.
Images:
Images set the right tone of the site. The quality of the images and photography convey the actual message to the visitors. You can use stock photographs or custom photographs but that depends on the style of the site and level of design. Customs photographs can offer excellent effects on your design and give a strong visual leverage to boost a design and to add visual contrasts.
When choosing images, faces usually attract attention. Our eyes are naturally drawn to the faces and other features of human being. So you can carefully place pictures of people to convey your messages across and set a mood to entice visitor’s attention to the key areas of a site.
Colours:
Colours are functional tool to separate one section of a site to other. Colours when used with contrasting elements make a perfect tone to grab attention to what is important in the design. Colours can be professional relaxing and fun. To eliminate the possibility of monotonous block of text, designer use several complimenting colour tones and contrasting to establish visual hierarchy. However, you should be careful about the context as well. For instance, if it is a print design you would obviously not use bright coloured text in the design.
Also when it comes to colour contrasts, changing from a light background colour to a dark background colour can easily separate the core content of a page.
Typefaces:
Different typefaces can be combined to generate interests and reinforce identity and support hierarchy. For creating an effective contrast it is best to combine one serif font with a sans-serif partner. However, the most beneficial would be the fonts with multiple weights. So typefaces are combined to reinforce visual identity.
Grids:
A grid is an essential organisational tool in every area of graphic design. Using grid can help to provide the structure and framework for combining type and images. Consistent grid offer cohesion enhances communication and improves legibility across multiple pages. However, designing a grid with flexibility is important. It has been noted that professional prefers working with grids that have an uneven number of columns and help to establish more stimulating asymmetry and dynamism.
Typography:
Fonts have a strong influence on the tone of your site. Fonts can be stylish, playful, loud or gentle. The larger and bold the fonts are, the quick they convey the key message of the design. Fonts are ideal for titles and headlines. Use easy to read fonts for larger block of text and vice-versa. Different types of fonts can also offer messages to the visitors- from information in italics to the power of capital and bold titles. However, do not choose too many fonts as that can overwhelm the users, confuse their eyes and detract from your messages.
For an effective visual hierarchy, you should know some typical pattern:
The Z layout:
The pattern starts from the top left, to the right, then diagonally to the left and again across to the right in the shape of a Z letter.
The golden selection:
Golden selection is a way of discovering the most crucial part of a design to place an element and how it can enhance visual weight to those areas. The golden selection is applied to place the main content in the larger portion of a design and secondary content in the smaller portion.
With regards to content and visuals, it is worth experimenting with the above mentioned principles to build the right visual hierarchy in your web design.
