UNIT B1

Identical words. One of them you actually read.

You just skimmed a page you couldn't wait to leave. Every instruction on it is repeated below. Nothing changed except typeface, colour, spacing and hierarchy — and suddenly it's readable. That gap is the whole unit, and it is worth money to you.

What you are producing by the end of B1

Research is judgement, not screenshots

A pass-grade research file lists things. A distinction-grade research file explains why they work, in terms someone can act on. The difference is one question: "and what does that do?"

Analyse five logos

Pick five from real studios or developers — mix a big publisher, an indie studio, a solo dev, a tools company and one you think is genuinely bad. For each, answer all five columns. Do not write "it looks nice".

Analyse three showreels

Find three junior or graduate games reels (ArtStation, Vimeo, YouTube, university grad showcases). Watch each twice: once as a viewer, once with a stopwatch.

• First 10 seconds. What did they lead with? Did it make you keep watching, and why?
• Length and pacing. Total runtime. How long does the average shot hold? Do cuts land on the music?
• Attribution. Can you tell what they did on each shot, or is it a mystery? Where is that text placed and can you read it in motion?
• Identity. Is there a consistent title card, lower third and end card — or three different fonts and a stock template?
• The end card. Name, role, contact. Held for how long? Could you actually write it down?

Analyse three developer profiles

Two LinkedIn profiles of working games developers and one portfolio site or itch.io page. Look specifically at whether the banner, avatar, headline and featured work read as one identity or four unrelated tabs.

Hierarchy is the only thing the viewer asked for

Design isn't making things pretty. It's controlling the order someone perceives information in. If everything shouts, nothing is heard — which is precisely why the old site was unreadable.

The four that fix 80% of student work

Gestalt: why proximity works

Your visual system groups things before you consciously read them. You can exploit this or fight it — you can't switch it off.

Whitespace is not wasted space

Space is the cheapest tool you have and the one coders resist hardest, because an empty region looks like unused capacity. It isn't. Space is what creates grouping, tells the eye where to rest, and makes a thing look expensive. Cramming a slide to the edges makes your work look like a school project regardless of how good the work is.

Colour is three numbers, not a vibe

Hex codes hide what's actually happening. Think in hue (which colour), saturation (how pure) and lightness (how much white or black) — HSL — and palettes stop being guesswork.

Harmonies — recipes, not laws

The 60 / 30 / 10 split

Roughly 60% of a composition in your dominant colour (usually a near-neutral), 30% secondary, 10% accent. The accent is the one that gets to be loud — and because it's only 10%, it stays loud. Give a colour 50% of the frame and it stops being an accent and starts being a background.

Neutrals decide whether it looks professional

Beginners obsess over the accent and use #808080 for everything else. A grey with a few degrees of hue bias toward your accent reads as chosen; a pure mid-grey reads as default. Try hsl(220 12% 45%) next to hsl(0 0% 45%) and the difference is immediate.

Colour and the people who can't see yours

Around 8% of men and roughly 0.5% of women of Northern European descent have some form of red–green colour vision deficiency. In a class of 24, that's likely one or two people. In a Steam audience, it's hundreds of thousands.

• Never encode meaning in hue alone. Red bar / green bar with no label, icon or position difference is inaccessible. Add a shape, a word, a pattern — this site's own pass/fail chips carry the words AA and FAIL for exactly that reason.
• Red and green at the same lightness are the classic trap. If you must use both, separate them by value, not just hue.
• Simultaneous contrast: the same grey looks lighter on black and darker on white. Judge a colour on the background it will actually sit on, never in the swatch panel.

Your typeface is doing more talking than your logo

A wordmark is typography. A title card is typography. A CV is typography. If you learn one thing in B1 that pays you back forever, make it this.

Classification, briefly

Pairing: contrast in role, agreement in feel

Two typefaces that are similar look like a mistake. Two that are opposite in role but agree in mood look deliberate. A common professional pattern, and the one this site uses:

Set a scale and stay on it

Pick a ratio and generate your sizes from a base of 16px, then only ever use sizes from that list. A major third (1.25) gives 16 → 20 → 25 → 31 → 39 → 49. A perfect fourth (1.333) gives 16 → 21 → 28 → 38 → 50 and is punchier. Arbitrary sizes — 17px here, 23px there — are exactly what makes student work feel unresolved even when nothing is obviously wrong.

The numbers that make text readable

Kerning vs tracking — you will be asked

Kerning is the space between two specific letters (the classic problem pairs: AV, To, Wa, LT). Tracking is uniform space applied across a whole run. When you build a wordmark you kern by hand, letter pair by letter pair, because retail typefaces are kerned for paragraphs, not for six letters at 200px.

Interface readability has actual numbers in it

Good news for programmers: this part is a spec. WCAG 2.2 gives you thresholds you can test, automate and argue with. Ignoring them is how games ship with subtitles nobody can read.

Contrast thresholds you must know

The ratio runs from 1:1 (identical) to 21:1 (pure black on pure white). It's computed from relative luminance — which is why two colours with wildly different hues but the same lightness can score about 1.2:1 and be genuinely unreadable together. The builder in Stage 08 calculates this live for every colour you pick.

Beyond contrast

• Text on imagery — a screenshot is not a background. Add a plate, a scrim gradient, or a solid bar. Your reel's lower thirds depend on this.
• Touch and click targets — aim for roughly 44×44px of interactive area, even if the visible icon is smaller. WCAG 2.2 sets a 24×24 minimum; 44 is the comfortable target.
• Focus visible — keyboard users must see where they are. Never outline:none without a replacement. Tab through this page and watch the ring.
• Don't rely on colour alone — pair it with text, an icon, a position or a pattern.
• Motion — respect prefers-reduced-motion. Vestibular disorders are real and parallax makes people ill.
• Line length in subtitles — around 32–42 characters per line, two lines maximum, is the broadcast convention. Games routinely get this wrong.

Why this belongs in a games portfolio

Accessibility is now a hiring topic. Platform holders require it, publishers ask about it, and a junior who can say "I checked our HUD contrast at 4.5:1 and added shape coding to the status icons" sounds like someone who has worked on a real team. It's also, conveniently, the part of visual design that has right answers — so it's the cheapest credibility you can buy.

A logo is an identification system under stress

Not a picture. Not an illustration. A mark that has to stay recognisable at 16 pixels, in one colour, upside down on a hoodie, and on top of a screenshot of your own game.

Seven types, and when each is right

The five tests it has to pass

The games-dev logo clichés

These appear in roughly one in three student identities, so using one guarantees you are not distinctive:

If your concept is on that list, you haven't had an idea yet — you've had a reference. Push for something specific to you: how you work, where you're from, what you actually build. Specific beats cool.

What the finished thing has to include

• Primary lockup — mark plus wordmark, the default.
• Secondary lockup — stacked or horizontal, whichever the primary isn't.
• Icon only — square-safe, for avatars and favicons.
• Mono positive and mono reverse — black-on-light, white-on-dark.
• Clear space rule — usually expressed as a measurement taken from the mark itself, e.g. "the height of the cap-height on all sides".
• Minimum size — in px for screen and mm for print.
• Misuse page — the "don't" grid: don't stretch, don't recolour, don't add a shadow, don't rotate, don't put it on a busy photo without the plate.
• Vector source — SVG or AI. A 400px PNG is not a logo, it's a screenshot of one.

Palette builder

Pick a base hue, choose a harmony, then tune every swatch by hand. Contrast ratios are calculated live against black and white — AA means it passes 4.5:1 for body text, AA·L means it only passes 3:1 for large text, FAIL means don't put text on it.

Your palette, doing its job

The same five colours, applied to the three surfaces you actually have to ship. If it looks wrong here, it is wrong — swatches always look fine in a row.

Logo test bench

Load your mark and watch it fail. Every panel below is a real place your logo has to survive. Do this with your Stage 0 logo first — the results are usually funny — then with each draft of your final one.

Your image stays in this browser tab and is not uploaded or saved anywhere. Reloading the page clears it.

On white
The CV, the invoice

On black
Steam, itch, the reel

Monochrome
Print, embroidery, etch

Reversed
Knockout version

Squint test
Is the silhouette distinct?

Busy background
Over a screenshot

32 px
Discord, Slack avatar

16 px
Favicon. The real test.

Score your own mark honestly

Theming the showreel

A themed reel isn't a reel with your logo stuck on the end. It's a reel where every frame of text was built from the same five colours, two typefaces and one grid — so a viewer who doesn't know why still feels that it's professional.

The structure that works for a junior reel

Where your identity actually appears

• Title card — display face, your accent colour, your logo. This sets the visual contract for everything after it.
• Lower thirds — project name in the display face, your role and the tech in the mono face. Same position, same plate, same padding on every single shot. This repetition is the identity.
• Section dividers — if you separate Programming / Level design / Tools, the divider uses the same system.
• End card — the fullest expression: logo lockup, name, role, contact, all on your dominant colour.

Attribution: the thing juniors always get wrong

On every shot, state what you did. "Team project — I wrote the enemy AI and the save system" is worth more than a beautiful shot with no attribution, because an unattributed shot is assumed to be someone else's. Put it in the lower third, in the mono face, small, consistent.

Readability in motion

• Text over gameplay needs a plate or scrim — a solid rounded rectangle or a gradient wash from the bottom. Check contrast against the brightest frame the text sits over, not the average.
• Keep text inside the title-safe area, roughly the middle 90% of the frame, so nothing is cropped by a player or a platform.
• Hold time: allow about 1 second per 2–3 words, minimum 2 seconds. If you can't read it aloud twice, it's too fast.
• Compression hates thin type. Hairline serifs and 1px strokes disintegrate in a YouTube re-encode. Use weights of 500+ for anything small.
• Cut on the beat. Find the tempo, put your markers on it, and edit to them. This one trick makes an amateur reel feel professional more than any effect.
• Audio: licence the music properly (a royalty-free library is fine, credit it), and assume it will be muted. The reel must work silent — which means the text has to carry it.

The profile a recruiter actually opens

LinkedIn is where your ident does its most boring and most valuable work. It's also, for most of you, the first professional page with your name on it that a stranger will ever look at.

The banner

Currently 1584 × 396 px (check LinkedIn's own help pages before you export — they have changed it before). Two things nobody tells you:

• Your avatar covers the bottom-left corner on desktop, and the crop is different on mobile. Keep the left third empty and put your content right of centre, vertically centred.
• It is not a place for a screenshot of your game unless the screenshot has been treated — darkened, scrimmed, with your wordmark placed on it to your clear-space rule. A raw screenshot with the UI still in it reads as a wallpaper.

The safest strong banner: your dominant colour as a flat ground, your wordmark left-aligned in the safe zone, and a single line of mono-face text stating what you do. That's it. It will look better than 90% of the profiles around you.

The avatar

• Use a photo of your face, not your logo — LinkedIn is a person-to-person network and a logo avatar on a personal profile reads as a bot. Save the icon-only lockup for GitHub, Discord and itch.
• Face fills most of the frame, eyes roughly a third from the top, plain uncluttered background, even light. A phone in portrait mode near a window beats a webcam every time.
• Tie it to your identity through the background colour — shoot against, or cleanly mask onto, one of your palette's neutrals. That's what makes the avatar and banner look like one system.

The headline

The default is your job title, which is useless when you don't have one yet. Write the three things a recruiter searches for: role · technology · status.

The rest of the page

• Featured section — pin the reel first, then your best project. This is the only part of the profile that shows visual work above the fold.
• About — 3–4 short paragraphs, first person, no third-person "James is a passionate…". Name the engines, languages and tools explicitly; those are the search terms.
• Projects — one entry per shipped or completed thing, with your specific contribution stated, and a link.
• Custom URL — claim linkedin.com/in/yourname. It goes on your CV and your reel's end card, so it can't be a string of digits.
• Consistency check — open your reel end card and your LinkedIn banner side by side. Same colours? Same typefaces? Same logo lockup? If a stranger couldn't tell they belong to the same person, you don't have an identity yet, you have two files.

Design theory quiz

Twenty questions on colour, type, layout and readability. Every answer comes with an explanation — the explanation is the point, so read the ones you got right too. Your best score is saved.

Evidence checklist

Everything that has to exist in your submission folder. Tick as you go — it saves against your name, so you can pick it up on any machine.

Reflection

The final piece of evidence. Compare your Stage 0 logo with your final ident and explain what was wrong with the first one — using the words from Stages 3 to 7. "It was rubbish" is not an analysis. "It had four colours with almost identical lightness values, so it had no value contrast and disappeared at 16px" is.

Take it with you

Export everything on this site — palette with hex values and contrast ratios, all your research notes, your quiz score and your checklist — as a single file. Upload it to the Canvas assignment alongside your logo files and reel.