curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md
NOTE: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work.
Visual hierarchy refers to the way you layout and display the content of your page to guide the viewer's attention.
A strong hierarchy can provide a clear path for the eye to follow, ensuring that the information you convey is consumed in the order that you intended.
Let's consider a basic page layout in which the HTML for the page is semantically correct, but the styling applied does not create a strong visual hierarchy.
:::interactive_editor
<style>
body {
font-family: sans-serif;
color: #333;
background-color: #fff;
}
header, nav, main, section, footer {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
h1, h2, h3 {
font-weight: normal;
font-size: 16px;
margin: 5px 0;
}
nav a {
text-decoration: none;
color: #333;
margin-right: 10px;
font-size: 14px;
}
p {
font-size: 14px;
margin: 5px 0;
}
</style>
<header>
<h1>My Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<main>
<section>
<h2>Welcome</h2>
<p>This is the welcome section of the homepage.</p>
</section>
<section>
<h2>Our Services</h2>
<p>Here we describe what we offer.</p>
</section>
<section>
<h2>Get in Touch</h2>
<p>Contact us for more information.</p>
</section>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
:::
If the font size isn't distinct, there is no visible indication of the document flow, although things are separated by headings.
To create a visual hierarchy, you should apply different font sizes to the heading tiers. You could also use something like a "callout box" to highlight a specific section.
:::interactive_editor
<style>
body {
font-family: sans-serif;
line-height: 1.6;
padding: 20px;
background: #f9f9f9;
color: #333;
}
h1 {
font-size: 32px;
margin-bottom: 10px;
}
h2 {
font-size: 24px;
margin-top: 20px;
margin-bottom: 8px;
}
h3 {
font-size: 18px;
margin-top: 15px;
margin-bottom: 6px;
}
p {
font-size: 16px;
margin-bottom: 12px;
}
.callout {
background-color: #fff3cd;
border-left: 5px solid #ffc107;
padding: 15px;
margin: 20px 0;
}
</style>
<h1>Understanding Visual Hierarchy</h1>
<p>Visual hierarchy helps users navigate and understand content by guiding their attention.</p>
<h2>Heading Tiers</h2>
<p>Using different font sizes for headings creates structure and makes content scannable.</p>
<h3>Level 3 Heading</h3>
<p>This smaller heading further breaks down the section without overpowering it.</p>
<div class="callout">
<strong>Tip:</strong> Use a callout box like this to highlight important notes or key takeaways.
</div>
:::
Visual hierarchy can also help increase your user conversion. For example, you can take advantage of the callout box to further draw attention to a Call to Action (CTA) button.
:::interactive_editor
<style>
body {
font-family: sans-serif;
padding: 20px;
background-color: #f4f4f4;
color: #333;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
margin-bottom: 15px;
}
.callout {
background-color: #e0f7fa;
border-left: 5px solid #00acc1;
padding: 20px;
margin-top: 20px;
text-align: center;
}
.cta-button {
display: inline-block;
background-color: #00acc1;
color: white;
padding: 12px 20px;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
margin-top: 10px;
}
.cta-button:hover {
background-color: #008b9a;
}
</style>
<h2>Ready to Boost Your Productivity?</h2>
<p>Join thousands of users who are getting more done with our simple and effective tools.</p>
<div class="callout">
<strong>Don’t wait!</strong> Start your free trial today and see the difference.
<a href="#" class="cta-button">Start Free Trial</a>
</div>
:::
Finally, your visual hierarchy can be important for conveying other components, like a navigation bar or a footer.
This makes it easier for your users to find the essential information that they may be looking for.
What is the primary purpose of visual hierarchy in web design?
To make the website more colorful.
Think about how visual hierarchy affects the way users consume information on a webpage.
To guide the viewer's attention in a specific order.
To reduce the amount of content on a page.
Think about how visual hierarchy affects the way users consume information on a webpage.
To increase the loading speed of a website.
Think about how visual hierarchy affects the way users consume information on a webpage.
2
Which of the following is NOT mentioned as a technique for creating visual hierarchy in the article?
Using different font sizes for headings.
Recall the specific examples provided in the article for improving visual hierarchy.
Implementing a callout box for important information.
Recall the specific examples provided in the article for improving visual hierarchy.
Applying animation effects to elements.
Creating distinct sections for navigation and footer.
Recall the specific examples provided in the article for improving visual hierarchy.
3
How can a strong visual hierarchy potentially impact user conversion?
By making the website more aesthetically pleasing.
Remember the example with the CTA button and its relationship to the work history section.
By reducing the number of clicks required to navigate the site.
Remember the example with the CTA button and its relationship to the work history section.
By drawing attention to important information and Call-to-Action (CTA) buttons.
By increasing the website's search engine ranking.
Remember the example with the CTA button and its relationship to the work history section.
3