Visual Hierarchy
The Basic Idea
If you squint at a website, such as the one you’re viewing now, something interesting happens: As the details blur, the overall structure of the page becomes clearer. You can easily identify all the main elements of the design, from the navigation bar at the top to the prominent headers that separate each block of paragraph text. Viewing a website through this blurred lens allows the overall organization, or hierarchy, of the page to shine through.
Visual hierarchy is a design principle that involves arranging design elements to communicate their order of importance and guide the viewer's focus.
In graphic design, creating visual contrast between elements—by manipulating their size, shape, position, or other characteristics—causes some to stand out. Elements that stand out appear more important than others, and viewers direct their attention to these elements first.
Consider how your eyes move around an e-commerce website. You might be drawn to the logo and navigation menu, sitting at the very top of the page and attracting your initial attention. This is by design—it’s crucial to notice these elements first because they help you navigate the website. When you scroll down the page, you’ll find large headlines and bright buttons that help you find the information you need to browse and buy products.
Without a clear visual hierarchy, all elements on a webpage appear equally important (or unimportant). In the case of a disorganized website, our eyes bounce around without any clear direction or point of focus. Viewing these websites is overwhelming enough, now imagine trying to navigate to different pages and find specific information. Needless to say, crafting a strong visual hierarchy is vital to creating a smooth and enjoyable user experience.
“A good visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly.”
- Steve Krug, author of Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability
About the Author
Kira Warje
Kira holds a degree in Psychology with an extended minor in Anthropology. Fascinated by all things human, she has written extensively on cognition and mental health, often leveraging insights about the human mind to craft actionable marketing content for brands. She loves talking about human quirks and motivations, driven by the belief that behavioural science can help us all lead healthier, happier, and more sustainable lives. Occasionally, Kira dabbles in web development and enjoys learning about the synergy between psychology and UX design.
