The 5 Elements of Visual Hierarchy

Visual hierarchy refers to the way information appears on a page, and its purpose in user interface design is to simplify the process of understanding the information. Here are the 5 main elements of visual hierarchy and how they affect the viewer:?

1) Size?

It’s simple: people read bigger texts first. When composing a design that includes text, it’s important to think about what you want the main message of the piece to be and adjust the text accordingly. What do you want the viewer to read first? Many say ‘bigger is better’, but the argument that ‘less is more’ still does stand depending on your intentions.?

2) Patterns

Patterns refers to the way a viewer reads the page, whether it be images or text. Reading patterns are generally split into two types: F Patterns and Z Patterns. F patterns usually refer to text-heavy pages such as articles and magazines. The reader will scan the left hand side of the page, and then stop and read to the right when they find something interesting. Z patterns refer to other pages that include images and the text isn’t in block paragraphs, such as websites. The reader first scans across the top of the page, where important information will be, then will read down to the opposite corner at a diagonal and do the same thing across the lower part of the page in the shape of a Z.?

3) Typeface?

Typeface is the design of lettering that includes variations in size, width, slope and weight. Italics and bold can affect the typeface of the font too. Having all the fonts the same width, size and weight would make a design monotonous and not convey the message of the piece as effectively, nor attract the viewer in the first place.?

4) Colour?

Obviously, some colours stand out more than others depending on the background of the page. Warm colours lead on a dark background, whereas cool shades lead on a pale background. The hue, saturation and contrast of the colours you use will also have an effect on the visual hierarchy of the design too.?

5) Alignment?

Alignment is where each element of the design is placed. Alignment can create continuity between elements, and improve readability. Typically, pages of text are aligned to the left, as most cultures read from left to right. However, many visual designs are centred or justified; which means they are spread across the page to share left and right margins.?

Yellow Slate Design are experts in what makes a perfect piece. Combining all these elements of visual hierarchy, we can design and create compositions for your brand. Get in touch with us at https://www.yellowslatedesign.com/contact-us to see how we can help!?