Advertisement

Building Content Hierarchy Through Design

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

This post is part of a series called Design School for Developers.
An Introduction to Hierarchy
Building Visual Hierarchy into Your Designs

Way back at the beginning of this series, we talked a lot about content and the importance content has in any design work. It’s something that should obviously be looked at and sorted through before you start any project, but you only get to see the real results of this work once you begin designing.

When working with content at the beginning of the process, we should try to nail down a structure that works for the content. Also think back to the sketching and wireframing stages of the process. Here, we looked at the ideas we had for laying out our content in a way that worked well and had a good hierarchy to it. Now, we want to make that content hierarchy work visibly and visually through our designs.

The Fusion Ads homepage uses content to introduce the user to its product, whilst also showing the product in action.

The Fusion Ads homepage uses content to introduce the user to its product, whilst also showing the product in action.

So how do we do that? First up we need to decide what in our content is relevant to our users and why so - we need to be able to justify the decisions we make. We also need to look at what needs to be the focus in our content, the bit of information that we really want our users to pay attention to. Then, we need to start translating this into a more visual form.

We do this by laying out the content in a way that relates to our original desired content structure. This isn’t just about headings and paragraphs either, we need to think more about how the content reads once it’s on the page, and the emphasis that needs to be placed on all the different elements. Once we have some basic content in place, we can start to use different tools and aids to help focus our attention on making the certain bits that need to be emphasised stronger and stand out more.

At the bottom of the Fusion Ads homepage, they have a FAQ where all the information is balanced and easy to read, which is super important for those kinds of content.

At the bottom of the Fusion Ads homepage, they have a FAQ where all the information is balanced and easy to read, which is super important for those kinds of content.

Tools and Aids to Help You

Size & Contrast

The size can relate to both the size of the individual bits of content you have in your design as well as other elements, such as imagery, and how these play off against each other. For example, use size to draw attention to main headings. Ensuring that they are perhaps larger than the main content shows that they have a different level of importance and are something that the user needs to pay attention to.

Size is also good for breaking up the content on your page into smaller chunks and emphasising small parts of content that are important. You can also use size to take the emphasis away from certain elements or bits of content that you want to be less noticeable or aren’t as important as the rest. This also ties in heavily to contrast - creating a more visual content hierarchy that is quite contrasting adds to the visual impact in your design.

Font Weights & Font Styles

Using font weights and styles cleverly is a great way to add more subtle emphasis to parts of your content that might be interspersed and dotted around with the rest of the main content that you have. Using font weights that are heavier than the rest of your content (such as a bold version of a typeface you have in your design) or in a different font style (such as italic) can be great for adding emphasis to little bits of content you might want to pull out and give a bit more recognition, without overpowering the rest of the design.

Also use font weights and styles to add impact and strong emphasis to your designs. For example, if the design style permits, then using a ‘light’ weight of a typeface (which is often much thinner than standard font weights) can work well to add impact to large headings, like the example you can see below.

Although many of the A List Apart articles are extremely content-heavy, they still manage to display that content in a really balanced, digestible way - and their use of different font sizes and styles helps with this.

Although many of the A List Apart articles are extremely content-heavy, they still manage to display that content in a really balanced, digestible way. Their use of different font sizes and styles helps with this.

Colour

Varying colour is another effective with which you can divide and display content in your designs. This doesn’t mean you go splashing colour everywhere, instead use it to subtly add focus to areas of your design, either by blocking off areas of content or using it within your content to add emphasis to text that might require it.

Position & Alignment

How you position your content has a big impact on how it’s perceived by your users. Ensuring that you work to your grid system and align your content well is super important. Alignment also creates order in your design, helping to tell the story of your website and guide your users on a journey through your website.

Colour, alignment and grids play a large part in The Verge's website design. There's a lot of content to look at, but using colour they can make it easier to focus on what modules or bits of text are different to each other.

Colour, alignment and grids play a large part in The Verge's website design. There's a lot of content to look at, but using colour they can make it easier to focus on what modules or bits of text are different to each other.

Proximity & Whitespace

Looking at how close or far apart elements in your design are spaced is essential to building a visual content hierarchy that has impact and makes sense. If elements which are related are too far apart, it will break the flow for the user when they’re reading the page. However, the same can be said for elements that are spaced far too close together. Things which are too cramped are going to be difficult to understand in terms of what has the most importance or should have the most emphasis. As a user, it’s then going to be difficult to understand how to find your way around.

Gridset use a lot of whitespace on their homepage - along with different text styles and accompanying imagery - to highlight key features and examples.

Gridset use a lot of whitespace on their homepage - along with different text styles and accompanying imagery - to highlight key features and examples.

Assignments

Now you know about different ways you can add visual weight or emphasis to particular elements, I want you to put it into practice in your own design. Try to integrate one of each of the techniques displayed above to add more of a visual content hierarchy into your design.

Advertisement