image name

Hierarchy

Hierarchy is when an element appears more important in comparison to other elements in a design.

Size

An element will appear more hierarchical if it is larger than other elements in a design. We naturally look first at the largest element in a design. If there are five windows on the front of a building, and one is twice the size of the others, our attention will focus on the biggest window first.

An example of hierarchy by size is the article list in the Pocket app. The header article is featured at the top, with a larger picture. Due to it's size, it catches our attention first.

Shape

An element can also appear more hierarchical if it is different than other elements in a design. We naturally look first at the irregular shape in a design. If there are five of the same windows and one door on the front of a building, our attention will focus on the door first.

An example of hierarchy by shape is the profile page in the Instagram app . The circular profile picture is distinctly different than the square instagrams. We recognize the profile picture as something unique and more important.

Placement

Last but not least, we can place elements in more hierarchical positions. Within a circle, the center is the most hierarchical. The end of an axis is naturally more hierarchical than points along the line.

An example of hierarchy by placement is the timeline in the Path app. The avatar is the starting point of a long axis, and therefore has a higher level of importance than the avatars on the left in the stream.