Humans have been familiar with visual design settings for a long time. It started from a simple formula that only consisted of text. At a later time, images were added to the design. The recent design even has a more complex formula with various complementary elements. The media used has also changed over time until we have digital media. One thing in common that makes designs in all these media easy to understand is because of a visual hierarchy.
However, not everyone understands how to apply this rule. It can happen because not everyone knows the principles in this hierarchical arrangement, even if that person is involved in the graphic design industry. Therefore, to produce a fine visual design product that can convey a message, you must learn them.
What is Visual Hierarchy?
Visual hierarchy is a rule, method, and principle in organizing elements in graphic or visual design to show their importance level. It helps a designer to guide the viewers’ eyes on what to focus on and in what order then to lead them to take the action that the designer desires. That is also the reason why this rule can help in advertising and brand communication.
Gestalt principle has inspired this method. It states how the human mind tends to simplify complex images with many elements into an organized system as a whole. So, in this theory, the human perception will follow the similarity, continuation, closure, proximity, figure, ground, symmetry & order. How about the hierarchy of visuals?
Principles of Visual Hierarchy
Visual hierarchy principles have some similarities yet, at the same time, more details principles than Gestalt theory. So, as we know today, this hierarchy has these below principles.
Size & Scale
The bigger size can easily attract people’s attention. It also can help emphasize the main point or headline on the page. Now you know why the title of a book, presentation, or headline in a newspaper uses larger fonts than the body text. This concept also applies to other elements, like images. It is not only to be noticeable but also conveys a stronger message to the audience.
Even so, you also have to pay attention to the scale of each element used. Generalizing all design elements with one size will only eliminate the purpose of emphasizing or highlighting the information. Make sure each design element has a proper scale according to the needs and suitability of the concept. Especially if you use the living things or objects that exist in the real world, each of which has a different size ratio, to not cause an anomaly.
Color & Contrast
As a bigger size and proper element scale can hook the audience to your design, brighter colors also have the same role in this visual hierarchy as muted or duller colors. Bright colors can grab people’s attention in an instant. However, the contrast, especially in color, makes people focus on the information you emphasize. To create unity, harmony, and balance in a design, you must be able to play with the color combination to create contrast well.
Typographic Hierarchy
We often find several different font sizes in a traditional or simple design. This typographic hierarchy is intended to show the order of importance of information. Headlines or titles always have a larger size or bolder style than the subtitles, body, or other details. Besides size and style, you can create this hierarchy by alternating the spacing, weight, or different typeface.
Spacing & Texture
As much as you want to present an informative and attractive design, you still have to give your viewers room to breathe. Leaving out some space empty creates a negative space, more known as white space, that provides time for the viewers to digest. This white space also helps them to identify your design, whether all the elements include or their order of importance.
If the spacing is about providing some space or room in your design, the texture is about giving your design a variety of elements. It can draw attention to design features that are not too big or too bright and even offer a dynamic impression on a flat or still design.
These two visual hierarchy principles are closely related to reading patterns based on eye movements and support an overall understanding of design elements. When you apply them strategically, your audience’s eyes will naturally follow them in the intended sequence.
F-Pattern
The most common reading pattern that almost all people do is the F-pattern. It is how we usually read a text, whether in a book, letter, or web page, excluding those in the region who write and read from right to left. You have to consider this custom when you create designs for global audiences, although the basic pattern is the same. Thus, most designers make this pattern the basis for their design work, especially if the main focus is on text.
Z-Pattern
For the image-oriented design, the Z pattern is the basis you must take. The human brain processes information from images faster than text. It allows the reader to quick-read from the top (left to right or right to left), going diagonally down, and then completing the scanning or reading. You can apply this concept to short-page designs, such as ads or web designs.
Proximity
To show your design as a whole, you must place the related elements close together. Meanwhile, the less-related elements can be placed further away. That’s what proximity means in the visual hierarchy. By bringing related features closer together, you can provide a deeper understanding, not just by its written message.
Alignment
Setting the composition of the design is not much different from adjusting the position of the text in an article, whether it aligns to the left, right, center, or justified. Again, people reading patterns are the basis for determining the design alignment. From this point, we know that no design elements are positioned arbitrarily since arbitrary composition can confuse viewers and decrease the design value.
Repetition
Among the visual hierarchy principles, repetition creates unity, especially when you design more than one page or present it in a different format. There should be one, two, or three elements used repeatedly to show that your design is a unified whole; has the same theme and vibe. You can use color, type of font used in the title or body, or other decorative elements as your repetition.
Apply Visual Hierarchy Principles, Get A More Appealing & Understandable Design
The principles of the visual hierarchy are there to help you make better designs, not to complicate your work. By understanding this basic concept, you can better understand the important elements you should focus on and produce the best you can design.