What is Visual Hierarchy?
Visual hierarchy is the arrangement of graphic elements in a design according to the value of each element. Visual weight determines the value of the feature in the design hierarchy, which communicates to the audience what to focus on and in what order.
Yes, Bigger is better. Simply, larger elements attract more attention than smaller ones. This is exactly why newspaper headlines appear in larger fonts, and major articles frequently have much larger headlines than the rest of the contents. In any design, larger elements—whether words or images—will not only be most visible but will often hold the strongest message.
Another essential idea associated with this principle is scale, which is the size of an object in comparison to another. A single object, no matter how large or small, has no size unless it is compared to another object. It helps us to establish balance in the design and to concentrate on the dominant elements. The higher the scale, the greater the emphasis.
Much as larger elements are viewed as more significant than smaller ones, bright colours typically attract more attention than duller colours. For example, if a single sentence in a text block is highlighted with a bright colour, it instantly attracts the reader’s attention.
Colour is often seeded with meaning and emotion that can relay explicit knowledge to the subconscious audience. In branding, a lot of psychological research has been done on colour because it induces a visceral reaction in customers before they have any substantive contact with a brand. For example, blues are often viewed as reliable, stable, and relaxing, whereas reds are stimulating and are known to increase people’s heart rate. However, depending on the culture, colours can have a different meaning.
Dramatically contrasting colours may also highlight particular elements rather than the spectrum on a more gentle scale. Placing a red object against a green or black background can attract more attention than the same red object against an orange or purple background. The colour patterns used in the design and how they relate to each other are known as the colour scheme. The choice of the colour scheme of a designer can create unity, harmony, rhythm and balance within a development, but it can also create contrast and focus.
A design that uses too many contrasting colours would always look unorganised and incoherent. The same can also be said of designs that use a colour scheme that does not comply with colour theory. But selecting the right palette requires far more than randomly choosing a monochromatic, complementary or tetradic mix. Successful colour combinations depend not only on the location of each hue on the colour wheel but also on its warmth and contrast with the surrounding colours.
Proximity, or where the elements appear with each other, is one of the most fundamental elements of the composition. Simply speaking, bringing the related elements close together implies to viewers that they are, in fact, related. Placing the elements close together will send other messages, too.
For example, placing elements on a map at certain locations will provide viewers with an understanding of distance, whether near or far. Of course, this all depends on the scale and size of the map. An inch isn’t always a mile away. Added images and messages can be generated by putting items in particular proximity to each other. Think about how much you see three circles and a line placed in a way that indicates the form of a happy or sad face? The suggested picture sometimes draws more interest than its individual elements. Do you see a smiling face, or do you see a line and three circles?
The alignment is part of the mechanism by which the elements are positioned in the design. It dictates that visual elements, be the text or pictures, are not arbitrarily placed in the composition. For example, a standard text page is aligned to the left, so that the objects share the left margin. Many visual designs are centred or justified, which means that they are spread around a page so that they share both the left and the right margins. If words were spread randomly around a page in every direction, they would produce a very confusing scenario.
Simple visual designs most frequently align in the centre of the frame, a format that provides balance and harmony, and is also aesthetically-pleasing.
Many Western readers are used to reading from the left to the right side of a page. Therefore, text-based templates are also matched to the left margin in the same way. Right alignments are also used to offset the overall design that could be more visually heavy on the left side. Likewise, left alignments may have the same impact in the reverse case
Visual hierarchy is a basic idea, and understanding the theory is actually simpler than the designer’s realistic ability to perform a well-structured composition. However, it is difficult to be creative in a new medium when maintaining a good design.
New mediums emerge all the time, and difficult circumstances do not diminish—quite the contrary. There are over 200 different screen sizes in use today. And those are all two-dimensional ones. First, it was internet, web browsers, then mobiles and tablets, and now we’re moving into new territory with innovations such as interactive TV, IoT, wearables, virtual, and augmented reality.
Design that really challenges the limits of digital media is still in its infancy. Let us hope that the concepts of visual hierarchy and good design will keep up with the rapid development of technology so that our experience of digital media remains full of meaning and pleasure.