There's a lot of content out there. You're reading some right now. Hi!

For the audience's purpose, it's important that the content is organized. Books have chapters, movies have scenes, and podcasts have episodes.

That same organization also needs to be applied to page layout, both digitally and on paper. This can be done by applying hierarchy to your design elements. Adhering to visual hierarchy is just a fancy way of saying information is being organized from most important to least important.

Visual hierarchy plays a large role in UI design. Think about what a good landing page looks like: logo of the company at the top, menu at the top or on the left, elements of little importance towards the bottom. These elements are placed with a purpose.

There's a lot of content out there. You're reading some right now. Hi!

For the audience's purpose, it's important that the content is organized. Books have chapters, movies have scenes, and podcasts have episodes.

That same organization also needs to be applied to page layout, both digitally and on paper. This can be done by applying hierarchy to your design elements. Adhering to visual hierarchy is just a fancy way of saying information is being organized from most important to least important.

The viewer defines what is most important to them; the designer just gives them some hints.

Whatever piece of information the viewer sees first is determined as most important, and therefore sits at the top of the hierarchy. The elements that gain the viewer's attention next are what rank lower on the visual hierarchy.

Understanding visual hierarchy
Visual hierarchy plays a large role in UI design. Think about what a good landing page looks like: logo of the company at the top, menu at the top or on the left, elements of little importance towards the bottom. These elements are placed with a purpose.

What is visual hierarchy?
Visual hierarchy is the arrangement of elements in a design by the order of importance in each element. The visual weight, or the visual contrast, that each element carries is what defines its importance in relation to other elements in the design.

The following principles should be seen as the golden rules of visual hierarchy. These guidelines help graphic designers produce results that draw attention to all of the right places, all while being nice to look at.