#64 - Elements of the Visual Hierarchy
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.
Products
Avrio
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.
Quest.ai
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.
Reshot
Free Icons, Illustrations & Photos. Design freely with instant downloads and commercial licenses. No cost. No attribution. No worries.
dorik
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.
