Lesson 1 of 7 · 7 min
Make something in two minutes
Goal:Design a poster before you learn a single rule, then learn the rules you just used.
YOUR FIRST CREATIVE ACT
uxuiopen.comStudio 4 needs a poster for its Design Night. Make it. Change anything, and watch the checks below the poster.
Your brief: help someone deciding how to spend Friday evening notice Design Night, find the time and place, and know to RSVP. Success means they can answer: what is it, when is it, and what do I do next?
Your first two minutes
Try these three small moves. Tick marks track what you explored, not how good your design is.
- To try: Move the headline size slider. Notice what gets your attention first.
- To try: Try a different color set. Read the contrast check below the controls.
- To try: Turn on Squint. Is the headline still the first thing you notice?
0 of 3 experiments tried
Design Night
Friday · 7pm · Studio 4
Free evening workshop. Bring a laptop.
RSVP- ✓The headline leads
- ✓Text is readable (6.2:1)
- Bigger and bolder gets read first. That's hierarchy.
- Squint at it. If nothing stands out, nothing leads.
- Text needs contrast with its background to be readable.
What you just did has names
Every poster, app screen and website is made of the same few parts. Once you can name them, you can talk about design, brief AI precisely and spot what's wrong.
Design Night
Fri · 7pm · Studio 4
RSVP123456- 1Headline: the one thing people must read. Biggest, boldest, first.
- 2Supporting info: when, where, what. Easy to find, never competing with the headline.
- 3Image or shape: sets the mood and catches the eye from across the room.
- 4Call to action: what you want people to do next. Placed where the eye ends up.
- 5White space: empty space is not wasted. It separates groups and lets things breathe.
- 6Margins: a safe edge on every side, so nothing feels cramped or cut off.
Designers call the reading order hierarchy. A good poster decides what you read first, second and third, so nobody has to work it out. Here's the path your eye takes on one that works:
Design Night
Friday · 7pm · Studio 4
Free evening workshop. Bring a laptop.
RSVP- What is it? The headline is biggest, so it's read first.
- When and where? Bold and bright, so it's found next.
- What do I do? The button is last, where the eye lands.
- Everything else is quieter on purpose.
Size isn't the only lever. Weight (bold or light), color and space around something all pull the eye. Use one or two of them on purpose, not all of them at once.
Words to know
- Hierarchy
- The order in which people notice and read things. You control it with size, weight, color and position.
- Contrast
- The difference between two things: dark on light, big next to small. Contrast makes things readable and makes them stand out.
- White space
- The empty space around and between elements. It groups what belongs together and gives the eye a rest.
- Alignment
- Lining things up along a shared edge or center. Aligned layouts look calm and intentional.
- Call to action (CTA)
- The button or line that tells people what to do next: RSVP, Buy, Sign up.
Now train your eye. Which of these three gets read in the right order? Turn on Squint to blur them, the way you'd see a poster from across the room.
Which poster gets read in the right order?
Three tests you can run on any design
The squint test
Half-close your eyes or step back. The thing that still stands out is what leads. If it isn't the most important thing, make it bigger, bolder or brighter.
The five-second test
Show the design to someone for five seconds, then hide it. Ask what it was for and what they should do. If they can't say, the hierarchy isn't working yet.
The phone test
Shrink it to the size of a phone screen. Can you still read the headline and the date? Most people will see your work on a phone first.
See it on real websites
Open these in a new tab and squint. Each one has a clear first, second and third thing to look at.
GOV.UK
What to notice
- Plain words and big headings. Very few things compete for you.
- One column, lots of space. Hierarchy comes from size and weight, not decoration.
- A good reminder that clear beats clever.
Stripe
What to notice
- One headline that says what the product does.
- One button is louder than everything else around it.
- Colour is saved for the things that matter most.
Make a second poster, for a different event
Go back to the poster above and redesign it for "Coffee & Critique, Saturday 10am". Change the headline, then try at least two layouts and two color sets before you pick one.
- 1Type the new headline in the poster maker.
- 2Try every layout. Keep the one where the headline still leads when you squint.
- 3Pick colors that pass the contrast check.
- 4Run the three tests on your favorite version.
- 5Share what you chose, and why, in the discussion.
On your poster, the date and the headline are the same size. What happens?
Light gray text on a white background looks elegant to you. What should you check?
Read next