A teaching resource for Unit B1 · Visual identity on BTEC Level 3 Creative Media Practice (Games Development) at Belfast Metropolitan College.
It argues — by demonstration rather than assertion — that visual design is not decoration applied on top of technical skill, but the interface to it. Then it gives students the theory, the tools and the checklist to build a professional identity of their own.
Live site: https://jamesbell2021.github.io/squint-test/
The site opens on a deliberately awful 1998 personal homepage: Comic Sans, marquee, spinning stars, a hit counter, WordArt, a construction GIF banner. Every instruction in the unit brief is on that page, including the Stage 0 task students must complete before going any further.
Nobody reads it. They scroll for the button.
Stage 01 then presents the identical words, designed properly, side by side with the original. The gap between the two is the entire argument for the unit, made on the students themselves in about eleven seconds — before a single principle has been taught.
Stage 0 also produces the unit's control sample: a logo made in 20 minutes with no research, no references and no AI, saved and dated. At the end of the unit students make a second one, and the distance between them is the evidence that they learned something.
| Artefact | Description |
|---|---|
| Two logos | The untrained Stage 0 mark and the final professional ident. The comparison is the evidence. |
| An identity spec | Palette with hex values and contrast ratios, type pairing, logo lockups, clear space, misuse rules. |
| A themed showreel | Title card, lower thirds and end card built from the identity, not from a template. |
| A themed LinkedIn | Banner, avatar, headline and featured section that visibly belong to the same system as the reel. |
| A research file | LO1. Analysis of real logos, reels and developer profiles — with judgements, not descriptions. |
| A reflection | LO2. What was wrong with the Stage 0 mark, in the vocabulary they didn't have when they drew it. |
Diagnose — 01 The brief · 02 Research (LO1)
Theory — 03 Seeing & hierarchy · 04 Colour · 05 Type · 06 Readability · 07 Logo craft
Build — 08 Palette builder · 09 Logo test bench · 10 Theming the reel · 11 LinkedIn & profiles
Prove it — 12 Design theory quiz · 13 Evidence checklist
Palette builder (Stage 08). Pick a base hue and a harmony — monochrome,
analogous, complementary, split complementary or triadic — then hand-tune all
five swatches. Every colour is scored live against black and white using the
WCAG relative-luminance formula, labelled AA, AA·L or FAIL. The palette is
applied instantly to three mock surfaces students actually have to ship: a
portfolio header, a showreel lower third and a LinkedIn banner at the correct
1584 × 396 aspect. A live check calls out the two pairings that matter most —
ink on paper, and accent on dominant.
Logo test bench (Stage 09). Students load their own mark and watch it fail in eight panels: on white, on black, monochrome, reversed, blurred for the squint test, over a busy background, at 32 px and at 16 px. The image is read locally via an object URL — it is never uploaded and does not survive a page reload. An eight-point honest self-assessment sits underneath.
Design theory quiz (Stage 12). Twenty questions on colour, type, layout and readability, two of them with rendered visual comparisons rather than prose. Every question carries a written explanation, shown whether the answer was right or wrong, because the explanation is the actual teaching. Personal best is kept.
Evidence checklist (Stage 13). Thirty items grouped by learning outcome and artefact, with a completion meter.
Export. Everything on the site — palette with hex values and computed contrast ratios, all written research and reflection, quiz score, and completed versus outstanding checklist items — exports as a single self-contained HTML file for upload to Canvas.
Nothing is sent anywhere. All work is held in localStorage under the student's
name, in that browser on that machine, and the export is generated client-side.
This is stated plainly on the page itself so students are not misled into
thinking it is a backup. They are told to export and upload when finished.
Single self-contained index.html — no build step, no dependencies, no
framework. Fonts come from Google Fonts; everything else is inline.
Content lives in JavaScript data structures near the bottom of the file, so it can be edited without touching markup:
Q— the twenty quiz questions, answers and explanationsCHECK— the thirty checklist items, groupedBENCH— the logo self-assessment pointsROLES— the five palette roles and their guidanceFIELDS— the ten written-response fields carried into the export
Colour maths (hslToHex, lum, ratio, grade, bestOn) is implemented from
the WCAG 2.2 definitions rather than pulled from a library, and is short enough
to read.
The site is built to the standards it asks students to meet, which makes it usable as a worked example in class:
- Light and dark themes, honouring the system setting with a manual override
- All text pairs meet WCAG AA; UI components and focus rings meet 3:1
- Pass and fail states carry words (
AA,FAIL), never colour alone - Visible focus rings throughout, and a skip link
prefers-reduced-motionrespected- Type is set on a documented scale with a 45–75 character measure
The Stage 0 gate only works once. Students must be sent to the URL cold, with no explanation and no preamble — the moment someone says "it's meant to look like that", the demonstration is spent. Let them scroll, let them click through, then open Stage 01 together.
The 20-minute Stage 0 logo is not optional and cannot be made up later. Collect evidence that it was made on the day.
- LinkedIn's banner dimensions (currently 1584 × 396) have changed before — check their help pages before each cohort
- Contrast thresholds are stated against WCAG 2.2
- The logo cliché list in Stage 07 should be refreshed as trends move
James Bell · Belfast Metropolitan College · Games Development