Fundamentals of hierarchy in user interface design (UI)

Concept, resources and its importance in design

Leonardo Moreno
Dec 23, 2019 · 7 min read
Website illustration with focus on hierarchy levels of the components
Website illustration with focus on hierarchy levels of the components
A big circle and an a small square representing the concept of hierarchy
A big circle and an a small square representing the concept of hierarchy
In this example, size, shape, and color resources are used to orient the view to a specific element.

Size

A screenshot of the Google Art App with two differences font sizes
A screenshot of the Google Art App with two differences font sizes
In this snapshot of the Google Arts & Culture application, the title “Pawtraits: Our Changing Relationship …” is much larger in size than the subtitle “How do we really feel …”. By separating these scores considerably, the reading order avoids any confusion.

Color

Screenshot of the Cabify app showing a line route in purple
Screenshot of the Cabify app showing a line route in purple
In this Cabify app screenshot, the use of purple color acts as the primary color. Both, the route of the trip and the “Continue” button are first hierarchy, followed by the map and the car in second hierarchy. The harmonic use of hue and saturation separates these elements from a more unsaturated and less important background.

Proximity

Screenshot of the Netflix website showing the hierarchy of the movies options
Screenshot of the Netflix website showing the hierarchy of the movies options
On the Netflix homepage, the first group contains the title and synopsis of the film; and the second group contain a list of six films at the bottom. The distance between these groups makes it easier for the view to pass from one group to another without visual noise. Likewise, each element in their respective group has its own paddings and margins.

Alignment

Screenshot of Airbnb website showing hierarchy by alignment
Screenshot of Airbnb website showing hierarchy by alignment
On the page of an Airbnb accommodation, the title, location and name host belong to one alignment, while the description of the apartment, accompanied by iconography, belong to another. This rupture of an invisible straight line creates hierarchy on two levels.

Repetition

Screenshot of Uber website showing hierarchy by repetition in their menu
Screenshot of Uber website showing hierarchy by repetition in their menu
In the white menu of the Uber website, an icon and a label are placed 8 times for their categories. This, balanced with a smaller size, places the menu second in the hierarchy, after the main title “Get in the driver’s seat …”. It is important to know that repetitions are very good for creating second or third level relevancies.

Negative space

Screenshot of Design Better website showing hierarchy by negative space
Screenshot of Design Better website showing hierarchy by negative space
In this example of the web Design Better, both the number “01” and the title “Motion’s purpose” are remarkably surrounded by negative space. Although the illustration has a greater hierarchical weight due to its variety of textures, the well applied negative space can make a balance that prevents the other elements from being relegated.

Texture

Screenshot of Masterclass app showing hierarchy by texture with photographs
Screenshot of Masterclass app showing hierarchy by texture with photographs
Photographs in UI design could be the best example of hierarchy by texture that exists. Their shapes, colors and gradient will always convey more sensations than flat elements. In the case of the Masterclass application, the photographs of the instructors are, without a doubt, first hierarchy, followed by their names in white, and the red color in the menu that indicates the location of the user.

The Startup

Medium's largest active publication, followed by +752K people. Follow to join our community.

Leonardo Moreno

Written by

Senior UI Designer @BCP. Writing about design. Based in Lima, Peru. Watch my work at www.leonardoxmoreno.com 🥽

The Startup

Medium's largest active publication, followed by +752K people. Follow to join our community.

Leonardo Moreno

Written by

Senior UI Designer @BCP. Writing about design. Based in Lima, Peru. Watch my work at www.leonardoxmoreno.com 🥽

The Startup

Medium's largest active publication, followed by +752K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store