Sunday, September 25, 2022
HomeTheory6 Design Principles of Visual Hierarchy

6 Design Principles of Visual Hierarchy

Hi Beautiful Temple peeps! this article call a your creative Mind 🙂 Paper and papyrus scrolls preceded stone tablets. Then came computers and tablets. It is the designer’s job to arrange the content clearly as the technology evolves. But which is best? Visual hierarchy. ok!

Visual hierarchy is defined as: Visual hierarchy is the order of importance of graphic elements in a design. The visual weight of an element in a design hierarchy informs the viewer’s eyes on what to focus on and in what order.

Responsive frameworks force designers to think about multiple pages at once. Faced with dense text and short attention spans, designers developed six principles to help readers focus.

Your end-user will enjoy reading your brochures and apps if you follow these 6 visual hierarchy principles.

01. Reading Guide

First, all cultures read from the top down, and most read left to right. The task of designing a web page is far more complex than that.

Recent research shows that people first scan a page to gauge interest before committing to read it. You can use the shape of scanning patterns (F or Z) in your design.

#1 F-Patterns

F-patterns affect text-heavy pages like articles or blogs. A reader scans the left side of the page, stopping and reading (to the right) when they find something interesting. An F (or E, or something with more horizontal bars; but the “F” term stuck).

How can you use it? Use short, bolded headlines, bullet points, and other attention-grabbers to break up paragraph blocks.

#2 Z-patterns

Z-patterns also apply to ads and websites where information is not presented in block paragraphs. The reader’s eye first scans across the top of the page, looking for important information, before shooting diagonally down to the opposite corner and scanning across the bottom of the page.

Web designers frequently design pages with important information in the corners and other information aligned along the top and bottom bars and connecting diagonal.

The logo (upper left), “register now” button (upper right), and speaker list (bottom) are all strategically placed at the sweet spots of the Z-pattern.

02. Size matters Simple: bigger things get read first.
yes! simple . ok!

03 Extra Tips

  • Choosing the right typeface is important for visual hierarchy. Weight (the width of the strokes that form the letters) and style (serif or sans serif) are important attributes of a typeface. Other tweaks like italicization can help.
  • Bright colors stand out from muted colors or grayscale, while lighter tints appear more “distant” and thus rank lower than richer, darker tints. It contrasts highlighter yellow and color illumination against a black-and-white grid
  • Traditionally, page layouts are designed with a grid of vertical and horizontal lines, both for convenience and legibility. In such a system, a new hierarchy emerges: the grid.

Thanks for reading & ask any questions about you have. 🙂
– Graphic Temple –



Please enter your comment!
Please enter your name here

- Advertisment -
- Advertisment -

Most Popular

- Advertisment -

Recent Comments