<- Product Newsletter /

#64 - Elements of the Visual Hierarchy

Author face
Article written by
Juan Jesús Millo

Writing of the week

When we talk about hierarchy, we talk about how the elements are distributed in our composition, so that we can create scannable patterns that our users/readers can follow.

The objective is to inform, persuade and structure their path to our target. The user acts in milliseconds when they enter our page and scanning (depending on whether they are Eastern or Western) the web, using F/F inverted or Z scanning patterns.

Taking these reading patterns as a reference (or breaking them to underline certain parts of the interface), we have different elements that help us to achieve this hierarchy:

  • Size: The larger, the more noticeable.
  • Color: Vibrant colors attract more attention than dull ones.
  • Contrast: The more contrast between colors and elements, the more eye-catching.
  • Alignment: If we start with the standard alignment of our website, this alignment will stand out from the rest.
  • Repetition and proximity: By the law of proximity, if these elements are close or follow a pattern, they will be related.
  • Air or white: The analogy of this white is the semicolon or the semicolon. Divide and segment, as well as reinforce your internal content.

Some words to augment your design vocabulary on hierarchy are:

  • Positives: perceptible, scannable, eye-catching, striking, noteworthy, emphasizes, salient, highlight, underline, reinforce.
  • Negatives: cover up, disguise, conceal, cover up, hide, mask, swallow.



Sharing research and insights is messy. Avrio is here to change that. Capture and share data analysis, user research, and learnings directly in context, with your team.


From Figma to HTML live site in just two clicks. Convert your Figma designs to live websites instantly. Export frames of different sizes and Quest automatically creates responsive pages.


Free Icons, Illustrations & Photos. Design freely with instant downloads and commercial licenses. No cost. No attribution. No worries.


Build Beautiful Websites Without Code! Flexible & easy-to-use nocode website builder with 130+ UI Components and beautiful templates. Save time and money on building your next website.

UI Checklist

101 UI Checklist items available as a FREE Notion template.

absurd illustrations 2

What about absurd illustrations for your projects? Take every user on an individual journey through their own imagination.

Articles & Ideas

Assessing Constraints: Making Products for all Users

At Spotify we aspire to make a great product for everyone in the world. When you think about it, that’s a lot of people! If everyone everywhere lived the exact same way, this would be a lot easier to achieve. Spotify Design

Design & Product Pitch Canvas

Need to pitch a product idea, design, or even present yourself in a job interview? If the answer is yes, this Pitch Canvas might provide you with a good starting point. Dan Nessler

Co-creating our Atlassian Design System values and principles

People tend to fill in blanks to perceive a complete object. jennie § yip

How to Ethically Boost Your Revenues

With all the news regarding privacy… ...we decided to try Signal, an encrypted messaging app! After few months of usage without paying a nickel... we looked at how they could boost their revenues. growth.design

30 updates: recent features and fixes in Figma

Last month, we launched 30 updates on everything from typography fixes to UX improvements, all to enhance your workflow in Figma. See the full list of changes in this file on the Figma Community and follow what’s new in Figma for weekly improvements and fixes. Jamie Mill

The User Research Persona Watch List

In most circumstances, research participants are pleasant, helpful, and easy to work with. However, there are a few types that can make moderating a session really challenging and put you at risk of not getting the best insights. Andrew Schall

Einstein Designer — AI-Powered, Personalized Design at Scale

Since the dawn of manufacturing, there’s been a hard limitation on how we develop products. This applies to traditional manufacturing as well as to software development, which is the focus here. The conventional wisdom is that either quality, time-to-market, or cost has to be compromised. Sönke Rohde

Remote Jobs

All remote jobs links have been removed, as the positions were fulfilled.