Use size, contrast, and space to help people see what matters first.
What you will learn.
Name the important item, compare two isolated visual changes, and explain their likely effect on the same content.
Before you begin.
Start with Design fundamentals: Line up content with a grid and your C27 Academy file in Figma Design. The source material and any extra tool are named in Practice.
Learn the concept.
Make the important part stand out
Words to know.
Hierarchy
The order of importance shown by a design.
Clear levels of importance
Scale
How large one thing is compared with another.
Relative sizes
Negative space
The open areas around and between words, pictures, and shapes.
Look around and inside the letters. Those spaces separate shapes and can also form another shape. Empty space is part of the design.
Slide 13.
Negative space is the empty area
Balance
How the heavier-looking and lighter-looking parts are spread across a design.
Visual weight distributed
The idea in practice
See a worked example.
Describe what a person needs to do, such as find the event date or book a place.
For exampleA visitor may need to find the event date before booking.
Change one thing at a time to see its effect.
For exampleMove the date higher in one copy and compare the two versions.
Leave useful information available even after an action is finished when people may need to look back.
For exampleKeep the date visible after someone signs up so they can check it again.
Worked isolation. Start with the same course card. In A, enlarge only the heading; in B, return to Original and raise only the supporting action’s contrast. Comparing A and B against Original shows which item attracts attention under each single change. It predicts a likely effect, not a tested outcome.
