Unit 05
Type, Colour, and Image
By the end of this unit your site looks like a decision rather than a default — a type pairing, a palette built from a mood you chose, images you are allowed to use and have credited, and a second draft you can say is better than the first.
Unit 3 gave you eight ready-made moods and let you try them on. That was the demonstration. This unit is where you stop picking from a menu and start making the decisions yourself — and, more importantly, where you learn to say why.
Design is not decoration. Every choice here is a choice about a reader: whether they can read it, whether they trust it, whether they can tell what it is.
Type
Two families of letterform, and the difference is one detail:
| Serif | Sans serif | |
|---|---|---|
| The detail | Small strokes finishing each letter | No finishing strokes ("sans" is French for without) |
| Where it came from | Stamping ink onto a page | Signage and industry — legibility at a distance |
| Reads as | Established, considered, printed | Current, plain, engineered |
| Common job | Long body text; editorial headlines | Interfaces; anything small |
The old rule was “serif for print, sans for screen,” and it is no longer true — screens got sharp enough that a serif body face reads perfectly well. Treat it as history, not as guidance.
Pairing
A page normally uses two faces: a display face for headings, chosen for tone, and a body face for paragraphs, chosen for readability at small sizes.
Two is the number for a reason. One face is fine but says little. Three or more starts to look like a ransom note unless you really know what you are doing.
Add this question to
Loading your meetings…
You have picked a tall, condensed, all-caps face that looks fantastic in your headline. Where else should it go?
The display face is picked for tone; the body face is picked for readability at small sizes. A face that is thrilling at 60px is often unreadable at 16px, and that is not a flaw in it.
Colour
Now the palette — and this is where the semantic slots from Unit 3 pay off.
Your theme does not name colours. It names jobs: primary is the colour of
the main action, base-100 is the page ground, base-content is text on that
ground. Change what primary points at, and every button, badge and link that
asked for primary follows. That is one edit instead of forty.
Below is the same page again, with the type and palette rails turned on. Pick a mood, then a pairing, and watch the readout under the preview — it is measuring the real contrast between the body text and the page ground, live.
Remix it · one page, every mood
Nothing here is a picture — it is the real page, restyling
Build a mood, then justify it.
Theme
Type
Palette
One person's opinion
The six best breakfasts in Cleveland
Ranked by someone who has eaten all of them more than once, which is the only credential this list claims.
Start at number sixThe diner on Detroit
Hash browns with actual edges. Coffee that tastes like a decision.
The bakery counter
Four tables, no menu, and a kolache worth the parking.
The place with no sign
You have driven past it a hundred times. Stop this time.
The one in the market
Standing room only, and the eggs come out in ninety seconds.
The corner spot
Cash only, which is either charming or a problem, depending.
<html data-theme="retro">
Every combination here is legal and most of them are wrong for any given subject. That is the point of the exercise: 'it looks nice' is not a reason, because several of these look nice. The reason has to come from what the page is FOR.
Recording the palette
A palette that lives only in your head is not a palette. Write it down, at the top of your stylesheet, in a comment block:
/* PALETTE — "late shift"
* A diner at 11pm: warm light, dark room, one neon sign.
* primary #E8624A the neon; buttons and links
* base-100 #1A1714 the room
* base-200 #241F1B cards, one step up from the room
* accent #E8B54A the warm bulb over the counter
*/The mood sentence at the top is not decoration either. It is the thing you check new decisions against — when you are wondering whether a colour belongs, “does this fit a diner at 11pm” is answerable, and “does this look good” is not.
Submit for review · text
Read by a human · you can resubmit
Write the palette comment block for YOUR Top 6 site. Name the mood in a sentence that describes a place or a moment, then list your colours with hex values and say what job each one does.
What earns points5 pts
- 2 Names a specific mood, concretely rather than as an adjective
- 1 Lists real hex values
- 2 Says what job each colour does, not just what colour it is
You will make a hundred small colour decisions on this project. The mood sentence is what you check them against, and it is the reason the hundredth decision still matches the first.
Overriding a theme
You do not have to abandon a theme to change it. Redeclare the slot, and everything downstream follows.
Write it · html
Renders as you type · nothing leaves your browser
One declaration, every component.
Tab indents. Press Esc first to tab out of the box.
Result
- You redeclared the primary slot --color-primary: #yourhex; inside the block.
- And the content colour that sits on it Text ON primary needs to change too, or it stops being readable.
Three components, one edit, and you never touched the markup. The second goal is the one people forget: if you darken primary and leave primary-content alone, the label on your own button quietly becomes unreadable.
Images
| Raster | Vector | |
|---|---|---|
| What it stores | A fixed grid of pixels | Shapes, as instructions |
| Scaling up | Goes soft and blocky | Stays sharp at any size |
| Formats | JPG, PNG, WebP, AVIF | SVG |
| Right for | Photographs | Logos, icons, diagrams |
A photograph must be raster — there is no shape description of a plate of eggs. A logo should be vector, because it has to work on a business card and on a banner.
What an image costs
Every image is bytes someone downloads, often on a phone, sometimes on a plan that charges for them.
The most common mistake is solving a sharpness problem by exporting bigger. A 4000px-wide photo displayed in a 600px slot is not sharper — the browser throws away three quarters of it — it is just slower. Export at roughly the size it will be displayed, at twice that for high-density screens, and no more.
Add this question to
Loading your meetings…
Your Top 6 needs a logo in the navbar. It has to look sharp on a phone, on a laptop, and on the projector in class. Which format?
Vector for shapes, raster for photographs. The question to ask of any slot is what the image IS, then how big it needs to get, then what it will cost to load.
Logo and brand
A logo is not a picture of what you do. It is a mark that identifies you at sizes where nothing else is legible — a favicon is 16 pixels across, and at 16 pixels a detailed illustration is a smudge.
A delivered logo package is not one file. It is:
- the vector master (
.aior.svg), which is the thing you edit; - a full-colour version and a single-colour version, because it will end up on a dark background eventually;
- raster exports at the sizes your site actually uses;
- a favicon, which is the one everybody forgets and the one that shows up in every browser tab.
Where images come from, and what you are allowed to do with them
This is not a formality and it is not a lecture about rules. Somebody made the photograph you are about to use.
Three things have to be true of every image on your site: you found it under a licence that permits your use, you have recorded that licence, and you have credited whoever made it.
Add this question to
Loading your meetings…
You find a perfect hero photo through an image search. The page it is on has no licence information at all. What can you conclude?
Copyright is automatic; a licence is what grants permission. So the absence of a licence is the absence of permission. Use sources that state their terms — Unsplash, Pexels, Wikimedia Commons with the licence read, or your own camera.
Submit for review · text
Read by a human · you can resubmit
Pick one image you intend to use on your Top 6. Write its credit line: what it is, who made it, where you got it, and under what licence.
What earns points5 pts
- 1 Names the creator
- 2 Gives the source, specifically enough to find it again
- 2 Names the actual licence, not just "free"
If you cannot write this line, you do not yet know whether you are allowed to use the image. Writing it is the check, not the paperwork after the check.
The five mistakes, and the second draft
Almost every page that feels wrong is making at least one of these:
- Navigation that is not simple, logical and explanatory. A reader should never wonder where they are or how to get back.
- No clear call to action. Unit 3’s lesson, again: what do you want them to do?
- Insufficient contrast, or clashing colours. The readout in the lab above measures the first half. The second half is judgement.
- Jumbled or unorganised content. Related things are not near each other; unrelated things are.
- Clutter. Everything is emphasised, so nothing is.
Add this question to
Loading your meetings…
A page has a headline in bold red, a subhead in bold blue, three bold links, a bold pull-quote, and a bold button. Which mistake is it making?
Emphasis only works by comparison. The fix is almost always subtraction: pick the one thing that matters, and let everything else be quieter.
Parallelism
Related things should be built the same way. Six cards where five have an image and one does not, or five say “6.” and one says “Number six”, reads as a mistake even to someone who could not name what is wrong.
Scan your own Top 6 for it. It is the cheapest improvement available and it is almost always sitting there.
Two drafts
WD5.6.C asks for something specific: iterate across at least two drafts, and
say what changed and why.
Not “I made it better.” A list: this was the problem, this is what I changed, this is how I know it is better now. A designer who can do this improves. One who cannot is just moving things around and hoping.
Submit for review · text
Read by a human · you can resubmit
Look at your Top 6 as it stands. Find one of the five mistakes in it — genuinely, not politely — and describe the fix as a before and after: what was wrong, what you changed, and how you can tell it is better.
What earns points5 pts
- 2 Identifies a real, specific problem in their own page
- 2 Describes a concrete change, not an intention
- 1 Says how they know it improved
'What changed between draft one and draft two, and how do you know' is the question that separates iterating from fiddling. It is also, later, the entire content of a design review.
That is the unit: two faces with two different jobs (WD5.1); a palette built
from a mood and implemented through slots (WD5.2); images in the right format
at the right size (WD5.3); a logo that survives being small (WD5.4); sources
you are allowed to use and have credited (WD5.5); and a second draft you can
defend (WD5.6).
Your Top 6 should now look like something a person decided. Unit 6 asks the question underneath all of it: who can actually use it?
Where you are
Not startedAnswer the checks above whenever you like. They're not graded, and you can retry any of them.
Kept in this browser only, unless you sign in.
Signing in carries this — and everything else you've done here — onto any device, and keeps it if you clear this browser.
Intro to Web Design · members' unit
Type, Colour, and Image is behind a locked door
Units in Intro to Web Design are for people taking the course. Getting in takes a link or a key — signing in on its own doesn't do it.
What's in this unit · 9 min read
- Type
- Colour
- Images
- Logo and brand
- Where images come from, and what you are allowed to do with them
- The five mistakes, and the second draft
4 quick checkslive HTML/CSS sandboxcode exercises
1 Sign in
With your school Google account. This is how your work reaches the gradebook — it doesn't open the unit by itself.
A key unlocks this browser and keeps your progress here; signing in keeps it with you across devices. Either way the key itself is only ever checked as a hash. Manage all of this on your account, read what signing in stores, or go back to Intro to Web Design.
Sources
- Gilmour Academy — Intro to Web Design
- Pouya Saadeghi — daisyUI (MIT)