User Interface

Visual Hierarchy

Visual hierarchy is the order in which the user process information by importance. The visual hierarchy may seem to be oriented only to the aesthetic aspects but it’s not like that.

Hierarchy

Visual hierarchy is the order in which the user process information by importance.

The visual hierarchy may seem to be oriented only to the aesthetic aspects but it’s not like that.

Z, F and Zig-Zag Pattern

While the F-Layout tends to be more appropriate for pages dense with content, the Z-Layout is primarily meant for pages with minimal copy. Essentially, the Z-Pattern is better suited for pages where simplicity is a priority and the main takeaway is the CTA.

01 Size

The larger the element, the more it will attract attention

02 Color

Bright Colors stand out more than muted tones.

Saturation

Saturated colors stand out more than grey colors.

Hue

Some colors stand out over the others

Brightness

Bright colors stand out more than dark ones and vice versa.

03 Proximity

Elements close to each other attract more attention than distant elements.

04 Repetition

Repeated styles give the impression that the elements are related.

05 Alignment

Any element that separates from the alignment of the others will attract attention.

06 Negative Space

The more space around the element, the more attention it generates.

07 Perspective

Perspective in graphic design refers to the three-dimensional effect given to a flat image as design composition and designers can use this technique to create an illusion of depth and in visual hierarchy objects closer to you drive more attention.

08 Texture

Varied and complex textures attract more attention than flat ones

Related Resources

Golden Ratio

‐
‐
The golden ratio, also known as the golden number, golden proportion or the divine proportion, is a ratio between two numbers that equals approximately 1.618. Usually written as the Greek letter phi, it is strongly associated with the Fibonacci sequence, a series of numbers wherein each number is added to the last.
Read more Golden Ratio