By the end of this lesson you can
- Decide the priority order of content on a screen.
- Use a priority list to drive layout decisions.
- Design content-first rather than filling a layout.
The idea
Content hierarchy is the order of importance of content on a screen. Visual hierarchy (covered in Stage 1) is how you show it; content hierarchy is deciding it.
Priority lists
Before drawing a screen, write a priority list: every piece of content and action the screen needs, ranked from most to least important for the user's main task. For a recipe page that might be: recipe name, photo, time and servings, ingredients, steps, nutrition, reviews, related recipes.
The list drives layout. The top items go highest and get the most visual weight; the lowest items may move further down, into a secondary area, or off the screen altogether.
Content first
Designing content first means deciding what the screen says before deciding how it looks. Starting with a layout template and filling boxes leads to screens that look tidy but bury what matters.
One main job per screen
Most screens work best with one primary purpose and one primary action. If you cannot say what the main job of a screen is, the hierarchy will be muddy.
Why it matters in real projects
Every screen competes for limited attention, especially on mobile. Deciding priority explicitly stops important content being buried and makes layout discussions faster, because the team argues about priorities once rather than about every box. It also makes responsive design easier: on small screens you stack content in priority order.
A realistic example
A local council's bin collection page shows a news banner, a long introduction, recycling guidance and finally the next collection date at the bottom.
The designer interviews five residents and writes a priority list: next collection date and which bins; what to do if missed; what goes in which bin; holiday changes; everything else. The new page leads with "Your next collection: Tuesday 12 March, green and black bins" after entering a postcode. Calls asking about collection days fall.
Step by step
Define the main job
Write one sentence describing what the screen is for.
List everything
Write every content item and action the screen needs.
Rank it
Order the list by importance for the main job, using research.
Question the bottom
Decide whether low items belong on this screen at all.
Lay out in order
Wireframe with the highest priorities most prominent.
Check on mobile
Stack the content in priority order and see whether it still works.
Common mistakes
Mistake Filling a template layout without priorities.
Instead Write the priority list first.
Mistake Treating everything as equally important.
Instead Force a ranking; ties hide decisions.
Mistake Ranking by what the business wants to promote.
Instead Rank by what helps users complete their task, then find space for business needs.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 40 min
Priority list redesign
Pick a cluttered screen from a real website, such as a product page or news article.
Steps
- Write the main job of the screen.
- List and rank every content item and action.
- Wireframe a new version in priority order.
- Explain what you removed or moved down and why.
Deliverable
Priority list, before screenshot and new wireframe.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Content hierarchy decides what matters most.
- Priority lists drive layout.
- Design content first.
- Give each screen one main job.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.