Visual hierarchy in content design

Special note* You can support designers in Ukraine by purchasing their digital products or hiring any of the people on this curated list from Creative Market.

Form always follows function

Chip Kidd quote on design
Infographic by Addie Kugler-Lunt. Chip Kidd illustration by J.D. Lunt

What are you trying to say? What are you trying to do? What’s the purpose of your content? With an understanding of visual hierarchy and some visual hierarchy examples in your pocket, you’ll be on your way to achieving your communication goals. Read on…

Purpose of visual hierarchy

Visual hierarchy, at the most basic level, guides a person through the content presented. It signals to them which content is the most important, how that content is organized into related sections or categories, and which content they should focus on first. This is true whether the content is text, images, video, or something else.

Cameron Chapman

How do you show hierarchy?

While knowing the concepts that create information and visual hierarchy is the first step, combining them is what really makes your content sing in-tune. When you show visual hierarchy through design, the path your reader or user takes through the experience is smooth and pleasant. When that happens, your content has done its job!

Throughout this article, I’ll show examples of visual hierarchy in action so you can incorporate it more easily as you design all kinds of content. I’m also including an overview infographic at the end of this article which demonstrates how each element of design works individually when creating content design hierarchy. We’ll begin by focusing on some key areas of visual hierarchy. Let’s get into it…

Elements of design – the highlights

Chip Kidd quote graphic design
Illustration by J.D. Lunt. Infographic by Addie Kugler-Lunt

As seen above, I reference Chip Kidd a few times in this article because he’s one of the foremost graphic designers of our time. He designed the book cover for Jurassic Park, among over 1,000 other iconic book cover designs. Kidd is also the author of several books and comics, including a guide to graphic design, accessible for children and adults alike, titled, A Kidd’s Guide to Graphic Design.

Visual hierarchy in typography

Start with these key components when creating content and you’ll be on your way to clearly communicating your message.

For example, using two different complimentary fonts/typefaces creates a visual dynamic and helps guide the hierarchy of your readers from headers to supporting copy.

It’s common to use a mixture of font styles such as a serif with a sans serif, or a slab serif with a sans serif, or two similar sans serifs in ultra-bold and regular styles. This article by Moeller Printing gives brief definitions of the five main font types and when to use them. Typeface choices reinforce the way the eye travels across the page or screen. There’s more about eye-tracking later in this article. 

Another example of visual hierarchy in typography has to do with directing focus: if you have two words next to each other in the same font but different colors, it’s impossible for the reader to know which one is more important. But if you change one of them so it’s displayed in bold, it becomes obvious which is the more important word – that’s hierarchy! 

And in case you mistakenly had the notion that typefaces and font styles are only a matter of passing trends – Claude Garamond opened the first type foundry, a workshop devoted to developing and selling fonts to printers, in 1530. Garamond is still one of the most popular fonts used today. I used a form of Garamond for the type in the infographics, illustrating the Chip Kidd quotes, for this article.

It goes to show that when something becomes a classic it endures far longer than changes in seasonal trends. Can you imagine creating something today that will last for the next 500 years?

Using size and scale

size and scale create drama with three elephants of increasing size
Infographic by Addie Kugler-Lunt

What’s true at the circus is also true in design: A dozen clowns strolling out of a school bus isn’t nearly as impressive as them popping out of a two-door mini, right? 

Why does a long line of elephants impress us?

Because they are giant creatures who walk so lightly and quietly for their size. We look up at them and feel small: this uncommon change in perspective creates a dramatic effect.

Use intentional pairings of extra large with much smaller sizes of type – and graphics – to create dynamics and denote visual hierarchy in your content design. Using the title of this article as an example in the infographic below, I show how pairing different sizes and scales of typography together create different effects. 

visual hierarchy in content design text examples
Infographic by Addie Kugler-Lunt

Color’s role in hierarchy

Color choices are a key component of UI design as they influence the way your content is perceived on an unconscious level. The way users react to your content are highly influenced by not only the colors themselves, but by how you use them.

This article on Dribble’s blog goes into detail on choosing appropriate ratios for your main, secondary, and accent colors, palette application, and more.

If you want to brush up on the basics of color, or learn about color pairings, bookmark the pair of articles I wrote last year on color terms and on how to choose a color palette for your app. 

color palettes examples smaller
Infographic by Addie Kugler-Lunt

Let’s not forget about the role of the pure neutrals black and white — and their combination, gray. Neutrals provide breathing room, clarity in text, and balance out a colorful page. Also, as shown in the infographic below, adding a hint of a hue to pure neutrals will make them appear friendlier — as well as tie together your overall palette.

Renee Fleck quote about using grey and black in design
Infographic by Addie Kugler-Lunt

Accessibility and contrast

Before we leave this topic, let’s also touch on the importance of designing with inclusivity and accessibility in mind. As explained by WebAIM.org, contrast for reading on the web is of critical importance. A good place to start is with contrast ratios: “a measure of the difference in perceived “luminance” or brightness between two colors.”  There are many tools for checking contrast ratios.  Luckily for us, the clever people at Dribble share five useful and easy tools to check your content for visual contrast and accessible viewing. Employ these tools so your message can reach the largest audience possible.

Page tracking and eye movement

Eye tracking is another key concept in creating visual hierarchy. To engage your user as they scan a page, use “Z” and/or “F” patterns to orient the text and graphics in a pleasing way.

Wordstream’s blog talks about the importance of visual hierarchy as it relates to natural eye tracking.

The key thing to remember here is that the user’s eye movement starts in the top left and moves across the page before scanning down the page to search for an element they find engaging. For elements you want visitors to notice on a text-heavy page (like an image), placing them in the F pattern ensures the elements are seen.” Z “The Z-pattern layout is typically used on pages that are not content heavy. Its design mimics the route the human eye travels when it reads — left to right, zigzagging top to bottom.

Spacing

Negative space plays a critical role in influencing eye movement –  it literally creates resting moments, experienced as space, as your eyes scan the page. Negative, or blank, space allows the viewer time to process the information you’re presenting. For example, too little negative space interferes with the needed processing time and promotes anxiety and confusion. While too much negative space can cause your user to lose interest and leave entirely, yikes! 

Spacing is one of the basic elements of design: many different examples of how to use spacing are shown in the blue infographic at the end of this article. Use of spacing applies to every single section of text to images to design elements, etc., as well as the whole page or screen.

Overview of visual hierarchy

The infographic below shows how each element of hierarchy plays a role in content design. While you can’t possibly use every design concept in EVERY design you create, using design strategically and intentionally will ensure you deliver the message you intend, with impact. 

InfographicInfographic by Toptal

In conclusion, the concepts demonstrated in this article along with the visual hierarchy examples given, will guide you on your journey of content creation. The more you put these guidelines into practice, the stronger your content will grow. If you found this article helpful or have any questions that could prompt a future article around content creation and design, please contact us with your comments or suggestions.

LimeTech is a creative tech company with a focus on app development. We help brands grow their impact by building digital products that please customers and solve business challenges. Our work includes strategy, design, content, and tech planning. Check out our portfolio or reach out to start a conversation about your project.

content    content design    design    design examples    digital content    infographics    information hierarchy    visual hierarchy    

5 ways to gain trust with your e-commerce store

5 ways to gain trust with your e-commerce store

Customers who visit your new e-commerce store aren't confident yet. Gain trust with your e-commerce store using these five methods.

Read more
The role of empathy in product design

The role of empathy in product design

To begin and end with our own experiences is to limit our outcomes. Let's talk about the role of empathy in product design, and how it helps us create products with purpose.

Read more
Introducing UI/UX design services

Introducing UI/UX design services

Let's talk about how LimeTech UI/UX design services can help you build a more user-friendly product or website. Our design process is key.

Read more
What is a minimum viable product? [updated]

What is a minimum viable product? [updated]

We explore the questions, "What is a minimum viable product?" and "How does it help you save money and lower your risk profile when building a mobile app?"

Read more
User problems are business problems

User problems are business problems

Every startup hits some bumps along the road. You know this, of course. Funding problems, new competitive factors, flaws in the current business model…your local bookstore has two shelves on these topics. 

Read more
Pleasing products start with great UI/UX

Pleasing products start with great UI/UX

New in 2022, LimeTech is now offering UI/UX design services. Let's talk about what makes great UI/UX, and why you need it. Read on to learn more....

Read more
LimeTech content creation: how we work

LimeTech content creation: how we work

Here at LimeTech, we’ve developed a clear process for ensuring you get consistent, high-quality work. Learn about our content creation process...

Read more
Introducing content creation services

Introducing content creation services

Content helps you gain trust, educate customers, cultivate leads, and spread brand awareness. LimeTech now offers content creation services for businesses everywhere.

Read more
FRESH TECH: December 2021

FRESH TECH: December 2021

Our monthly series — Fresh Tech — a collection of fun things on the web that sparked our interest with their fresh takes on tech.  Monthly theme: Fresh design and tips....

Read more
Sneak peek: a mobile app for customized denim

Sneak peek: a mobile app for customized denim

This week we're offering an inside glimpse of one of our design projects. Here you can see the user interface for an e-commerce mobile app we're developing for the SHAABI Denim brand.

Read more
Fresh Tech: October 2021

Fresh Tech: October 2021

Our monthly series — Fresh Tech — a collection of fun things on the web that sparked our interest with their fresh takes on tech.  Monthly theme: reimagine with intention.....

Read more
Nice to meet you, color! Color terminology explained.

Nice to meet you, color! Color terminology explained.

Nice to meet you, color! Color terminology explained. Building on our article “Hello, Color!”, published last week, we cover some common color terminology. This will help you have conversations with....

Read more
Hello, color! How to choose colors for your app.

Hello, color! How to choose colors for your app.

Hello, color! How to choose the right colors for your app. So, you’re building an app and you’re starting to think about your product’s look and feel. This process usually....

Read more
The LimeTech approach

The LimeTech approach

The LimeTech approach The LimeTech approach involves business savvy, big-picture thinking, and total transparency. We understand the challenges of running a business in a fast-changing world. Find out how LimeTech....

Read more
LimeTech favorites

LimeTech favorites

LimeTech’s favorite stuff (tools and fun things) Here’s a peek under the hood at LimeTech. Check out some of the tools we love and the places we hang out.  ....

Read more
The 4 stages of app prototyping

The 4 stages of app prototyping

The 4 stages of app prototyping There are lots of good reasons to start your app project with a prototype. Savvy entrepreneurs choose this method to save money, conduct early....

Read more
5 reasons to start your app project with a prototype

5 reasons to start your app project with a prototype

5 reasons to start your app project with a prototype You’re a savvy entrepreneur, right? So starting your app project with a low-stakes prototype just makes sense. Prototyping is the....

Read more
Validating and mapping your app idea

Validating and mapping your app idea

Validating and mapping your app idea Got a great idea for a mobile app? Before you start building and coding, you’ll want to validate your idea and make sure it’s....

Read more
Thoughts on Persistence

Thoughts on Persistence

We’ve all been inspired this week by the story of Diana Nyad’s successful swim from Cuba to Florida. Not only was this an extraordinary achievement in terms of distance covered—110....

Read more
DIY Laptop Repair Resources

DIY Laptop Repair Resources

Ready to Try Your Hand at DIY Laptop Repair? When DIY laptop repair is your only option, try doing a little research before you take things into your own hands.....

Read more
What to Do If You Spill Water on Your Laptop

What to Do If You Spill Water on Your Laptop

What to Do If You Spill Water on Your Laptop If you are like us, you never thought seriously about what to do when you spill water on your laptop…until....

Read more

How To Open Up Your Laptop

Ever wondered how to open up your laptop? Not everyone is brave enough for the task. In fact, some would say don’t even try this at home. However, here’s a....

Read more

Donate Your Used Computer Locally

Where to donate used computers and electronics in the Bay Area Seeing as we’re in the Bay Area, you’ve got no excuse not to dispose of your electronics the right....

Read more

Join the Fight Against SOPA/PIPA

Looking for a way to participate in the fight against SOPA/PIPA without actually taking your site down? Local San Francisco startup CloudFlare has created an Anti-Censorship App that will enable....

Read more

For Startups on the Move

We recently had an engaging conversation with David Bergeron of T3 Advisors. They are doing some really innovative work in the real estate sector, with a special focus on helping....

Read more

Jazz Hands, P2P and Direct Democracy

Occupy Wall Street Goes Tech Much of the discussion around Occupy Wall Street has weighed in heavily on the nature, character and origin of the protestors and whether they’ll ever....

Read more

5 Ways to Save for Your Business

Unbeatable Savings for Your Biz Whether you’re saving for a rainy day or just saving, sometimes it’s a tough job to find great deals for your business. However, in the....

Read more

Great Resources for Free Stuff Online

  The best things in life aren’t always free, but it sure is nice to get stuff without paying. If you’re shopping on a dime and got no time to....

Read more

What To Do When You Lose Your iPhone?

First, you’ll deny, rage, bargain, and quickly pass through all 7 stages of grief. You’ll probably try to retrace your footsteps and send a few pleading texts to your phone.....

Read more

Contact us

Type of project
*Don’t worry – we won’t share your email.
*Don’t worry – we won’t share your email.