Designers use hierarchy to express relationships in the same way royalty does.
Just like a king is higher-ranking than a prince, an H1 section should look higher-ranking than an H2 or H3 section. Of course, you’ll need to edit elements like font sizes and styles — but white space can also help forge a bond between different headers or paragraph text.
Hierarchy is what makes content easier to understand.
In this piece, we’ll explore the relationship between distance and attention, and explain how to use it to create an aesthetic design.
Larger Distance Forces Attention
When you place more distance between page elements, you remove “stuff” that gets in the way. You can always use space to your advantage because it’s not directly noticeable to most visitors. What stands out most is the content, so if you leave space between content, then only the content will draw attention.
When in doubt, it’s often best to add more white space rather than less. Many websites suffer from cramming too much information together without enough breathing room. But this is just a general rule and shouldn’t be taken as gospel. Like we described in Interaction Design Best Practices, excessive white space weakens your hierarchy by dissolving the relationships between elements.
Correct spatial proportions are only correct in context. What looks good on one layout may not look great on another. As recommended in the free guide Web UI Best Practices, a delicate balance of space must be learned through practice and the study of existing website layouts.
Take a look at the Apple iMac website. Many designers swoon over Apple’s trademark simplicity expressed through all their products (including the human interface philosophies behind iOS and OS X). There’s no doubt that Apple’s main website also uses simplicity and white space to emphasize what’s most important: the content!
Heading text and graphics are supersized to occupy a vast majority of the page. As you scroll down, take note that other areas of the page use smaller blocks of text which are still clearly readable from a distance. The use of more space between lines of text makes it easier to skim content and keep scrolling without taking 2-3 minutes to read each section.
If you quickly scroll down the page you’ll notice a continual pattern. Each section uses an image and a block of text floating next to each other. But this pattern alternates with images on the right, then the left, and back to the right again. It’s a pattern of symmetry that makes the space feel more inviting and relaxed.
You can find another example on the homepage for Wunderlist. Some of the content is spaced towards the center while other areas use a floating effect.
The Wunderlist top navigation is actually very small compared to most of the page content. Links are squeezed up into the top navigation bar while content sections are given wide open pastures of white space. This type of hierarchical design structure provides visual clues as to which areas of the page should draw attention.
At the very bottom of the page, Wunderlist places a series of 12 basic icons located above small blocks of text describing product features. The contrast created by dark text and white background draws your eyes to the content. Once you focus on the content, the symmetrical spacing between all 12 “blocks” creates a sense of unity. As a result, the whole section feels like one big connected area.
However, if you look internally, you’ll also notice that each icon & block of text still feels like one individual “item.” Everything remains connected thanks to symmetrical spacing while the icons add individual appeal to each “item.” The reduced spacing between icons and bolded text (like the mailbox and “Mail to Wunderlist”) strengthens the content with visual metaphors. As a result, visitors only need to skim these features to understand the gist of the whole section.
The Beauty of White Space
Although white space is often considered a technique for improving UX and usability, it can also be used for aesthetic purposes. Many websites incorporate white space as part of the design style because it flows well and reflects the brand accurately.
Most layouts that benefit from aesthetic white space are designed to focus solely on content without any distractions. Content may be concise as with minimalist layouts, or it could be lengthy and detailed. Eccentric use of white space as a design feature creates a lofty, spacious atmosphere that resonates over the entire website.
Source: Marie Laurent
Take a look at the portfolio website of Marie Laurent. Her homepage uses a minimalist design style with flat colors, generic typography, and plenty of white space. The layout is built around content sections that draw your attention almost immediately.
Notice how most of the homepage is taken up by her design work. The actual portfolio examples are the most vital component and therefore should draw the most attention. In the content areas, white space separates text, buttons, and navigation links.
Source: Grace Coote
Aesthetic white space also plays a strong role in single-page layouts. Websites like Grace Coote use excessive white space to balance content sections. All of the website’s content can be found on the homepage, so the design uses extra white space to cultivate distance.
Extra space alleviates the amount of content displayed onscreen at any given moment. Since users won’t be navigating to other pages (it is a single page design, after all), there is no harm in using a slightly longer scrollbar. The best part about Grace Coote’s layout is the overall balance. Even though it’s only a single page, it feels very modern and easy to use without lacking content or design features.
Source: peeq App
The landing page for peeq App is another single-page layout with minimalist design qualities. Everything about this design screams white space. Typography, imagery, and buttons stand out against the barren background design.
However, the site feels anything but empty.
Instead, the content takes center stage and feels easily accessible. In this sense, enhancing the aesthetics also improves the usability since the principles of emotional design state that attractive things feel like they work better. The site design highlights the bright colors without distracting from the clear headline or “Get peeq App” call to action.
Content hierarchy is not solely built on negative space. Space is a vital piece of the puzzle, but other design fundamentals are required to truly incorporate a visual hierarchy. These fundamentals include colors, font choices and typography, similarity and contrast, and graphics placed within the content.
The space found between everything is what dictates relationships and balance. When first creating a new mockup, you will probably struggle for a little while unless you’re already an experienced designer.
Truly internalizing how much white space should be used to create a visual hierarchy requires practice, which means it requires failure. Messing up is a big part of the learning process and the more you design, the more you’ll learn.
You can learn more actionable design techniques in the free Web Design Trends 2016 ebook. The 185-page guide explains 10 best practices in great detail. You’ll find 165 analyzed examples from today’s top companies.