The
Art
of Media
Colour, typefaces, layout and sound all send messages, often before your brain catches up. Designers choose every one of them on purpose. This module shows you how those choices work, so you can read them, question them and make your own.
- 00First Principlesp.2
- 01Colourp.4
- 02Typographyp.5
- 03Layout & visual hierarchyp.6
- 04Sound design & musicp.7
- 05Style, mood & accessibilityp.8
- ✦Self-check · Make it · 5 Questions · Side Questp.9
You'll need: pencil, coloured pencils or markers, a phone with a camera, headphones, and a few household objects for a sound lab.
Principles
A first principle is a basic truth you can build on. Design can look like magic or "talent," but underneath it is a small set of building blocks anyone can learn. Three questions to start. Be honest; nobody's grading this.
What do I already know?
What is necessary?
Everything in this module is built from four design bricks. Rate yourself on each one, then check the example to see if your rating holds up.
What is the objective?
By the end, you'll be able to explain why a design feels the way it does, and make design choices on purpose.
- 01Build a colour palette and explain the mood it creates.
- 02Choose typefaces that match a message, and explain why.
- 03Use size, contrast and space to control what people see first.
- 04Explain how sound and music shape the feeling of a scene.
- 05Check a design for accessibility: contrast, captions and alt text.
- 06Design a poster or thumbnail with a clear style and mood.
The list on the left is ours. Now make it yours. What do you want out of this?
How much do you know about design in media right now? Shade the boxes in pencil. You'll come back at the end (p.9) and shade it again in pen.
Why start this way? When you know what you already have (1), what you need (2) and where you're going (3), you learn faster and you notice the gaps. Every module on the Media Path starts with these same three questions.
Colour talks first
Colour is often the first thing you notice. Designers use a colour wheel to pick colours that work together.
Complementary: opposite each other on the wheel. Maximum contrast; things pop.
Analogous: neighbours on the wheel. Calm and smooth together.
Warm colours (reds, oranges, yellows) tend to feel energetic and close. Cool colours (blues, greens, purples) tend to feel calm and distant.
Colour meanings aren't universal. In many Western traditions brides wear white, while in some East Asian traditions white is linked with mourning. In Chinese tradition, red often means luck and celebration. Who's your audience?
A palette for a (made-up) winter night festival poster
Navy and white set a cold, calm night. Orange is a warm accent that sits almost opposite blue on the wheel, so the bonfires and the event name jump out. The mood: cold outside, warm together.
Photograph five things you love. Pick three colours that keep showing up and colour them in. That's your personal palette.
Mood in 3 words:
The 60-30-10 rule
A common rule of thumb: 60% main colour, 30% second colour, 10% accent. A poster has 1,200 cm² of area. How many cm² should each colour get?
Light vs ink
Screens add light (red, green, blue: RGB), so mixing red and green light makes yellow. Printers layer ink (cyan, magenta, yellow, black: CMYK), which absorbs light. That's why a bright screen colour can look duller once printed.
Type has a voice
A typeface is a designed family of letters. The same words in a different typeface can sound like a whisper, a scream, a robot or a love letter.
Three spacing words designers use
Kerning: the space between two specific letters, like the gap in "AV".
Tracking: the spacing across a whole word or line. WIDE vs tight.
Leading (say "ledding"): the space between lines. It's named after the strips of lead that printers once slid between rows of metal letters.
Two typefaces is usually plenty: one for headlines, one for reading. More than that and a design starts to look like a ransom note.
"GAME OVER" three ways
Same two words. The typeface changes the tone of voice.
Hand-letter your name three times: spooky, sporty and fancy. What did you change each time (thickness, curves, spacing, slant)?
Legibility is how easily you can tell letters apart; readability is how comfortable a whole page is to read. You'll hear that serifs are better for print and sans serifs are better for screens. Designers still argue about it, and research hasn't found a clear winner. Compare a novel, a phone app and a road sign. What typeface choices did each make, and why?
Where does your eye go?
Visual hierarchy is the order your eye travels through a design. Good layouts decide that order on purpose, so the most important thing gets seen first.
Hierarchy tools
Size: bigger is seen first.
Contrast & colour: the odd one out wins.
Position: top-left is often read first in English.
White space: empty space makes things stand alone.
Grouping: related info sits together.
Designers often say simple posters are scanned in a Z shape. Eye-tracking studies by the Nielsen Norman Group found many people read text-heavy web pages in an F shape: across the top, then down the left side.
The "before" poster uses one size for everything, so nothing wins. The "after" poster makes the title huge (1), adds colour and an image (2), groups the when and where together (3), and shrinks the extra details. Same words, but now you'd understand it from across a hallway.
Find a poster, ad or video thumbnail. Squint until it's blurry. What still stands out? Number what you saw 1, 2, 3. Did the designer get the order right?
Many designers lay out pages on a 12-column grid. Why 12? List every way to split 12 columns into equal groups. Then look at a news site: how many columns can you spot?
Design you can hear
Sound is half of every video, and it's designed just as carefully as the pictures. Turn the sound off a horror trailer and it often stops being scary.
Diegetic: sound the characters can hear too. Dialogue, footsteps, a radio playing in the scene.
Non-diegetic: sound only the audience hears. The soundtrack, a narrator, a "whoosh" on a title.
Some of the best moments play with the line: a song seems to be the soundtrack, then a character turns it off.
Music sets the mood
Tempo is speed, measured in beats per minute (BPM). Fast tempos tend to feel exciting; slow ones feel calm or sad.
In a lot of Western music, major keys tend to sound bright and minor keys darker.
Silence is a choice too. Dropping all sound right before a big moment makes you lean in.
Foley is everyday sound effects recorded after filming. It's named after Jack Foley, who created sound effects at Universal Studios starting in the early days of sound film. Foley artists are famous for using surprising objects:
| On screen | Often made with |
|---|---|
| Horse hooves | Two coconut shell halves |
| Footsteps in snow | Squeezing a pouch of cornstarch |
| A crackling fire | Crinkling cellophane |
| A bone breaking | Snapping celery |
Watch a movie trailer with the sound off. Then watch it again with headphones on. What did the sound add? Write down three sounds and the feeling each one created.
Editors often cut on the beat. A song is 120 BPM. How many beats are in a 15-second clip? If you cut every 4 beats, how long is each shot, and how many full shots fit?
Make your own foley: record one sound using a household object, then play it to someone without showing them. What do they think it is?
Style, mood & access
Style is a set of choices you repeat: the same palette, typefaces, shapes, music and pacing. Repeat them, and people recognize your work before they see your name.
Pick a mood (cozy, eerie, hyped, dreamy…). Sketch or collect 6 things that feel like it: colours, textures, letters, sounds.
My mood:
Contrast: text needs to stand out from its background. Accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text.
Don't rely on colour alone: red-green colour vision deficiency affects about 1 in 12 males and 1 in 200 females of Northern European ancestry (rates are lower in most other groups). Add labels, patterns or icons.
Source: MedlinePlus Genetics, U.S. National Library of Medicine; National Eye Institute (U.S.).
Captions: they help Deaf and hard-of-hearing viewers, and anyone watching on mute.
Alt text: a short description of an image that screen readers read aloud.
No rapid flashing: flashing more than three times a second can trigger seizures in some people.
Pass or fail? Real contrast ratios from this book's own palette
Weak: "image of poster"
Strong: "Bake sale poster: big teal title 'Bake Sale!', a cartoon cookie, Saturday Oct 24, 10 am to 2 pm at the community hall."
Good alt text says what matters in the image, briefly, as if you were describing it over the phone.
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L is a colour's brightness from 0 (black) to 1 (white), lighter colour on top. Check: white on black = (1 + 0.05) ÷ (0 + 0.05) = 21:1. Now: does a grey with L = 0.2 pass on white?
Quick self-check
Six questions, covering every stop. Show your thinking. Answers are upside down at the bottom; no peeking till you're done.
1 · What do we call colours that sit right next to each other on the colour wheel?
2 · What's the difference between kerning and leading?
3 · Name three tools a designer can use to create visual hierarchy.
4 · A song plays on a car radio in the scene and the characters sing along. Diegetic or non-diegetic?
5 · A 1,000 cm² poster follows the 60-30-10 rule. How much area does the accent colour get?
6 · Why shouldn't a chart use colour alone to show which line is which?
Re-shade your knowledge meter
How much do you know about design in media now? Flip back to p.3 and shade the meter again in pen (or shade this one). Did any of the four bricks on p.2 move from "Not yet" to "Got it"?
Design the poster
Invent an event (a concert, a game night, a protest for more bike lanes, a pet show). Design its poster, or a video thumbnail for it, so someone gets the mood and the key info in three seconds.
The brief
Event:
Mood in 3 words:
My palette (60 / 30 / 10):
Headline typeface style:
Body typeface style:
Must-haves
- A clear 1-2-3 hierarchy (number it on your sketch)
- No more than two typefaces
- Passes the squint test
- Text is high contrast and readable from 3 metres
- Key info isn't shown by colour alone
- Alt text written below
Thumbnail version The same design squeezed into a 16:9 video thumbnail. What has to go?
Going digital? Any free design or drawing app works. If you use someone else's photos, music or fonts, check that you're allowed to, and give credit.
5 Questions
I Still Have
This module didn't answer everything. Good. Write 5 new questions it didn't answer, one of each type below. There are no wrong questions, only ones nobody's asked yet.
★ Star the one question you'd most like answered. You'll need it on the next page.
1What I'll find out
Break your big question into 2 or 3 smaller ones you could actually answer.
2Where I'll look
3How I'll share it
Who I'll share it with:
Done by: