How to use this
Thirteen modules, each standing on its own. The numbers make a nice path, but start wherever pulls you: every module has a start here pick, and the ▶ links are videos, always the friendliest way in. Every reference carries a built-in lesson written just for you, links that go deeper when you're ready, and dotted words that explain themselves when you tap them. The rest you'll find by playing: tick things off, prove them, fight the bosses, and watch the grid up top fill in. Put your name on the character sheet, pick your own accent, and keep an eye out, the page hides a few secrets. The rhythm that works: pick one idea, read or watch it, write half a page in your own words, then try it once on real studio work. Using an idea is what makes it yours. A module a month is a great pace, and this is a document to grow up alongside.
The spine: communication theory
Everything we make is a message trying to survive the trip from one mind to another. Most of design is making sure it arrives alive. Start here and every later idea has somewhere to hang.
It's why the same joke kills in the group chat and dies in a speech at assembly. Different channel, different decoding.
Shannon & Weaver's model
Sender, message, channel, noise, receiver. Everything we ship is a little transmission, and most design work turns out to be noise reduction: helping the message arrive the way you meant it. Go deeper: signal and noise in 3 minutes · the model, explained · Shannon's 1948 paper (PDF)
The Mathematical Theory of Communication, 1949Semiotics
A sign is a form (the signifier) plus a concept (the signified), and brands work mostly by connotation, the extra meanings a colour, typeface or photo quietly brings along. Barthes' Mythologies is the fun way in. Go deeper: signs, explained in 4 minutes · Chandler's Semiotics for Beginners
Saussure / Peirce / Barthes, Mythologies, 1957Classical rhetoric
Ethos is credibility, pathos is feeling, logos is reason. Every landing page is making an argument; before you judge its layout, name which of the three it leans on and whether that suits the person reading it. Go deeper: TED-Ed: how to use rhetoric · Purdue's guide to ethos, pathos, logos
Aristotle, RhetoricThe medium is the message
The channel shapes the meaning before a word is read. The same offer behaves differently as a street poster, a search ad and an email, because each medium has trained its audience differently. Design with the grain of the medium and it carries you. Go deeper: McLuhan in 2 minutes · the famous first chapter (PDF)
McLuhan, Understanding Media, 1964Ways of Seeing start here
Images carry ideas of their own, and looking is a skill you can learn. Berger teaches you to see what a photograph or ad is doing, as well as what it shows. Episode one of the 1972 BBC series is on YouTube and takes half an hour. Go deeper: watch episode one
Berger, 1972 · book + seriesGestalt psychology
Proximity, similarity, closure, continuity, figure and ground. This is how eyes group marks into meaning before conscious reading starts, and it quietly sits behind nearly every layout rule you'll ever hear. Go deeper: Gestalt basics, drawn live · Smashing's Gestalt guide
Wertheimer et al., 1920sYour poster gets read at a glance from across the street. In Shannon & Weaver terms, you just…
Anything that helps the message arrive the way you meant it is noise reduction. Legibility is love.
A page leads with "4.9 stars from 2,000 reviews". Which lever is doing the work?
Reviews borrow other people's trust. That's credibility at work, which is ethos.
The same joke lands differently in a group chat, a wedding speech and on a billboard because…
That's the medium being the message: the channel shapes meaning before a word is read.
DareBet you can't send three texts today without noticing which one got decoded wrong.
Research: understanding people
Nobody reads your work the way you do. These frameworks are how you find out what people actually want and do, in their own words, before you build anything for them.
You've abandoned a signup form because it felt long. That was motivation losing to ability, which is Fogg's whole model, in one sigh.
Jobs to be Done start here
People hire products to make progress in a moment of their life. Interview for the struggle and the switching moment, and you'll often find the best copy is a straight quote from one of those conversations. Go deeper: the milkshake story (video) · the theory
Christensen / Moesta · Competing Against LuckMental models & affordances
People act on their inner picture of how a thing works. Good design brings that picture and the real mechanism into line, and Norman's book, the founding text of usability, shows you how. Go deeper: Vox: bad doors are everywhere · NN/g on mental models · Norman on signifiers
Norman, The Design of Everyday Things, 1988Dual-process thinking
System 1 is fast, associative and a little lazy; System 2 is slow and rare. Assume every visitor arrives in System 1: anchoring, framing, loss aversion and good defaults do more work than any paragraph of persuasion. Go deeper: Veritasium: the two systems · the two systems, explained
Kahneman, Thinking, Fast and Slow, 2011Influence & its limits
Reciprocity, social proof, scarcity, authority, consistency, liking. Learn them both to use and to recognise, and learn where the line sits: in regulated fields like health, some of these levers stay off the table, and knowing why will make you a sharper strategist. Go deeper: the six principles, animated · the principles, from Cialdini's own team
Cialdini, Influence, 1984Behaviour models
Behaviour happens when motivation, ability and a prompt meet (Fogg), or capability, opportunity and motivation (COM-B). When a funnel underperforms, work out which one's missing first; the fix is usually smaller than a redesign. Go deeper: the Fogg model, made practical
Fogg Behavior Model · COM-B, Michie et al.Ethnographic listening
Go where people already talk unprompted: forums, reviews, Reddit, support tickets. Their own words become your keyword research, your objection list and your headline bank, all at once. Go deeper: review mining, a how-to
Field method · practised weekly hereDiffusion of innovations
Innovators, early adopters, early majority, late majority, laggards. Each group needs different proof and different messaging, and the strongest launches speak first to whoever's ready right now. Go deeper: the dancing guy (3 min) · the adopter curve, explained
Rogers, Diffusion of Innovations, 1962In Jobs to be Done thinking, a commuter buys a 9am milkshake mostly because…
Products get hired to make progress in a moment of someone's life. The struggle is the story.
Most visitors arrive in System 1, so a page should…
Fast, lazy thinking responds to defaults, framing and anchors far more than to argument.
Someone finally books an appointment when three things line up:
Fogg's B=MAP. When a funnel underperforms, work out which of the three is missing first.
DareBet you can't scroll product reviews for ten minutes without finding a headline better than one we'd write.
Strategy: choosing the message
Strategy is choosing what to say, to whom, and what to leave out. Done well, it makes every later decision easier. Done late, it makes every later decision a fight.
You can picture the fries box from the colour alone. That's a distinctive asset doing its job inside your memory, rent-free.
Positioning start here
Positioning happens in the customer's mind, up against whatever's already in there. Own one clear word and look after it. A strong position tells you what to say yes and no to, and that's exactly what makes it useful. Go deeper: the book, in notes form
Ries & Trout, Positioning, 1981Mental & physical availability
Brands grow by being easy to think of and easy to buy, across the whole category. Distinctive assets, your colour, wordmark and voice, exist to make remembering effortless. It's grounded in decades of buyer data, which is why it settles so many arguments. Go deeper: why fast food logos are red · Sharp's laws, summarised
Sharp, How Brands Grow, 2010 · Ehrenberg-BassCategory entry points
Map the moments a buyer thinks of the category at all ("late night, can't sleep, phone in hand"), then attach the brand to as many of them as you credibly can. This is what a real messaging matrix is built from. Go deeper: category entry points, explained
Romaniuk, Better Brand Health, 2023The long and the short of it
Nike ads that never ask you to buy anything are one machine; "30% off ends tonight" is the other. One plants memories that pay off for years, one catches people already shopping today, and the evidence says the winners run both. Go deeper: the official IPA deck (PDF) · key findings in five minutes
Binet & Field, IPA, 2013Segmentation, targeting, positioning
The classic scaffold: divide the market by need, choose who to serve, decide how you want to be seen. It's the grammar every later framework assumes you already speak. Go deeper: Nintendo's blue ocean (video) · an STP walkthrough
Kotler · marketing canonService blueprinting
An experience is a whole system: frontstage actions, backstage processes, support systems, all on one timeline. Draw it and you'll spot where one small backstage fix lifts everything. Go deeper: NN/g's guide, with examples
Shostack, HBR, 1984 · This Is Service Design DoingBrand as behaviour
Identity is the whole pattern of what an organisation says, does, makes and charges, and the logo is one output of it. The design system flows from the behaviour system, and the strongest brands keep the two in step. Go deeper: Wally Olins in full flight (video)
Olins, The Brand Handbook · Johnson, Branding in Five and a Half StepsPsycho-logic
People are rational about more than economists measure: signalling, trust, story. The opposite of a good idea can be another good idea. Read it as permission to test the illogical. Go deeper: his TED talk
Sutherland, Alchemy, 2019How Brands Grow says brands mostly grow by…
Mental and physical availability: reach the whole category, and make remembering effortless.
Brand-building campaigns mainly work by…
That's the long of it; activation is the short. The evidence says you want both machines running.
A strong position earns its keep because it tells you…
Own one clear word in the customer's mind and every other decision gets easier.
DareBet you can't watch three ads tonight and name which are building the brand and which are chasing the click.
Concept: the inventive leap
Ideas feel like lightning. They're actually weather, and weather can be farmed. The concept is the leap that makes work feel new, and from the outside it looks like magic. Up close it's a craft, and you can absolutely practise it.
Every great meme is two unrelated frames colliding. You've been bisociating for years; now it has a name and a method.
The big idea
One idea, sayable in a sentence, that every execution serves. Bernbach's creative revolution put art and copy in the same room and showed that surprise earns attention honestly. A good test for any concept: could someone repeat it after hearing it once? Go deeper: Bernbach and the creative revolution
Bernbach, DDB, 1960s · Sullivan, Hey Whipple, Squeeze ThisA technique for producing ideas
Gather material, chew on it, step away, welcome the idea when it surfaces, then shape it against reality. An idea is a new combination of existing pieces, so the gathering stage is the one you control. The whole book takes about an hour, and it's a keeper. Go deeper: where good ideas come from · the five steps, summarised · a lovely walkthrough
James Webb Young, 1940Bisociation & lateral thinking
Creativity is connecting two frames that usually live apart: a goose and a quiet village, a bank and a game. Koestler named the move; de Bono built little tools for practising it, random entry, provocation, reversal. Use them and the connections start arriving faster. Go deeper: Koestler's bisociation · seven lateral thinking techniques
Koestler, The Act of Creation, 1964 · de BonoSteal like an artist start here
Keep a swipe file, trace the family tree of work you love, and remix from lots of sources at once. Influence, practised openly and widely, slowly turns into a style that's yours. Go deeper: his TEDx talk · the original 2011 essay
Kleon, 2012Constraint as fuel
Briefs, budgets, formats and rules are creative material. Write the proposition as one sentence before you open any tool; the tighter the box, the more inventive the route out of it. Go deeper: how to write a brief people love
Working principle · the creative briefIn James Webb Young's five steps, the stage you control most is…
Ideas are new combinations of existing pieces, so the best collectors have the most ideas.
Untitled Goose Game works as a concept because it…
A horrible goose and a gentle village: bisociation doing exactly what Koestler described.
The quickest test of a big idea:
If it travels by word of mouth intact, it's an idea. If it can't, it's an execution.
DareBet you can't mash two random nouns together tomorrow morning without finding one pairing worth keeping.
Story: scripts and worlds
Every film you love is the same shape underneath. Once you see it you can't unsee it, and then you can build with it. Games went further and buried whole mythologies for you to dig up. Learn both moves: the script that pulls people forward, and the world that rewards them for looking closer.
You've walked past a ruined temple in Zelda and felt that Hyrule kept going for ten thousand years before you woke up. That feeling was designed, and this module shows you how.
Writing the script
Aristotle to the beat sheet
Beginning, middle and end, with the middle doing the complicating. Aristotle's Poetics laid it out; Field's three acts and Snyder's fifteen beats turned it into the skeleton under nearly every blockbuster you've seen. Learn the beats well enough to feel them in a cinema, then feel free to bend them. Go deeper: three acts, via Jurassic Park · the 15 beats, explained · Poetics, full text
Aristotle, Poetics · Field, 1979 · Snyder, Save the Cat, 2005The character arc
Campbell's hero's journey, best read through Vogler's studio-memo version. The working heart of it: a character wants one thing and needs another, and the gap between them powers the story. It's why Luke, Elle Woods and Tony Stark all work, and customers are on arcs too. Go deeper: What makes a hero? (TED-Ed)
Campbell, 1949 · Vogler, The Writer's JourneyScenes turn on values
McKee's sharpest tool: every scene moves a value from one charge to its opposite, safe to in danger, lost to found, stranger to friend. If nothing changes, the scene can go. Watch any great film with this in hand and the machinery lights up. Go deeper: Do your scenes turn? (McKee's site)
McKee, Story, 1997Mamet's three questions
Who wants what? What happens if they don't get it? Why now? Mamet's famous memo to his TV writers insists every scene answer all three, and it's the fastest script-doctoring tool ever written. It's also free, short and gloriously grumpy. Go deeper: the memo in full
Mamet, memo to The Unit writers, 2005 · freeThe moral argument
Truby's deeper layer: a great story argues about how to live, the hero carries a flaw, and the best opponent is the person perfectly built to attack that flaw. This is the difference between a plot that moves and a story that means something. Go deeper: Truby in interview (video)
Truby, The Anatomy of Story, 2007The story spine & Pixar's rules start here
Kenn Adams' fill-in spine ("Once upon a time... and every day... until one day...") and Emma Coats' 22 rules of storytelling. Both are free, and both work on anything from a campaign to a game jam the same afternoon you learn them. Go deeper: Pixar's own free course · the spine, by Kenn Adams · the 22 rules
Adams, story spine · Coats, 2011 · freeBuilding the world
Sub-creation
Tolkien's term for building a secondary world with what he called the inner consistency of reality: deep time, languages, maps, and the sense that the world keeps going past the edge of the page. Every serious game world since, Elden Ring included, is downstream of this essay. Go deeper: TED-Ed: build a fictional world · the Tolkien Estate on the essay
Tolkien, On Fairy-Stories, 1947Fragmentary myth, the Elden Ring way
Write the mythology in full, then shatter it: item descriptions, ruins, half-remembered rumours, so the player digs the story up like an archaeologist. Martin wrote the age of gods; Miyazaki buried it and handed you a shovel. Mystery, designed on purpose, is what makes a world feel bottomless. Go deeper: VaatiVidya digs the lore (video) · Elden Ring's narrative design
Miyazaki & Martin, Elden Ring, 2022 · FromSoftwareUnreliable histories, the Elder Scrolls way
Oblivion and Morrowind fill their shelves with in-world books that contradict each other, because their histories are written by biased narrators. The world feels real precisely because it disagrees with itself. A lovely lesson for brand worlds: let different voices tell it differently. Go deeper: the Imperial Library · on TES's unreliable narrators
Bethesda, The Elder Scrolls · the in-game librariesNarrative architecture
Stories can live in space: clues embedded in the world, stories that emerge from play. Jenkins' essay names the idea, and it travels well: a website, a store and a level are all spaces where the visitor performs the story. Go deeper: GMTK: levels that tell stories · the full essay (MIT)
Jenkins, Game Design as Narrative Architecture, 2004 · free essayLudonarrative harmony
What the player does should agree with what the story says; Hocking coined the term for when they fall out. And kishōtenketsu, the four-beat structure Nintendo uses for levels, shows structure can be built from surprise rather than conflict. Go deeper: Hocking's original post · kishōtenketsu in Mario (video)
Hocking, 2007 · Hayashida, GDC 2012A blockbuster hero usually…
The gap between want and need powers the story. Close the gap and the film ends.
A scene has earned its place when…
McKee's rule: no turn, no scene. It works on emails and game levels too.
Elden Ring makes its world feel bottomless by…
Martin wrote the myth, Miyazaki shattered it, and you dig it up like an archaeologist.
DareBet you can't watch a Pixar film this week without spotting the story spine by minute ten.
Design: form carrying meaning
Why does one poster feel expensive and another feel like a school notice? Four crafts decide it: the grid, colour, type, and restraint. All four are learnable, and all four have histories worth knowing.
You can spot a fake designer label from ten metres. Your eye already reads type and spacing fluently; this module gives it the words.
The Swiss grid
International Typographic Style
Postwar Switzerland: clarity over ornament, asymmetric layouts, sans-serif type, photography, and the modular grid as an instrument of order. It's still the operating system of interface design; every 12-column CSS layout is its grandchild. Go deeper: Swiss design in 10 minutes · Swiss style, the crash course
Basel & Zürich schools, 1950sGrid Systems in Graphic Design
Müller-Brockmann's manual: columns, modules, baselines. His bigger argument is the part to keep: constraint gives you speed and coherence, and the grid is really an ethical stance, clarity as respect for your reader. Go deeper: why designers use grids · the Eye interview
Müller-Brockmann, 1981The precursors
Tschichold's The New Typography (1928) made asymmetry and sans-serifs a movement; Ruder's Typographie (1967) taught type as a system of relationships. Skim both and you'll see the grid wasn't invented so much as argued into existence. One for a little later in the journey. Go deeper: Tschichold in his own words · meet Emil Ruder
Tschichold, 1928 · Ruder, 1967Colour theory
Itten's seven contrasts
Hue, light and dark, cold and warm, complementary, simultaneous, saturation, proportion. Seven contrasts that give you words for why a palette works, so you can repair one instead of starting over. Go deeper: colour for design, the basics · the seven contrasts, with visuals
Itten, The Art of Color, 1961 · BauhausColour is relative
Albers showed the same colour reads differently against different grounds, so every colour choice is really a relationship choice. Judge palettes in context, and on both light and dark grounds. Go deeper: Interaction of Color, explained
Albers, Interaction of Color, 1963The practical layer
Think in HSL. Proportion rules like 60-30-10. Neutrals with a deliberate lean toward your accent. And WCAG contrast as the floor, 4.5:1 for body text, so the work stays readable for everyone. Go deeper: contrast in 4 minutes · WebAIM on contrast · try the checker
Working method · WCAG 2.2Type, and where it came from
The Helvetica lineage
Akzidenz-Grotesk (Berthold, 1898) begets Neue Haas Grotesk (Miedinger & Hoffmann, 1957), renamed Helvetica in 1960 to sell Swissness abroad, then rationalised as Neue Helvetica in 1983 with the numbered weight system borrowed from Frutiger's Univers (1957), the first family designed as a programme of 21 coordinated weights. So when you type "Helvetica Neue" you're picking up a century-long conversation about neutrality. Go deeper: Helvetica in 5 minutes · the Neue Haas Grotesk story · the full lineage
1898 → 1957 → 1960 → 1983Neutrality as ideology start here
Helvetica's claim to say nothing is itself a statement, and the postmodernists and grunge typographers pushed back on exactly that. Hustwit's documentary stages the whole debate in 80 minutes; watch it early, it's a treat. Go deeper: Vox: the Oscars typo disaster · the film's official page
Helvetica, dir. Hustwit, 2007Classification & anatomy
Grotesque, neo-grotesque, humanist, geometric; serifs from old-style to didone. Plus the anatomy words: x-height, aperture, counter, terminal. This vocabulary lets you brief, buy and pair type on purpose. Go deeper: letter anatomy in 3 minutes · Google's free type course
Vox-ATypI system · any specimen bookType in practice
Bringhurst for the classical rules, Lupton as the friendly first pass, Butterick free online for ruthless practicality. And Kris Sowersby's Klim essays show a working designer thinking through type history out loud; read them like a serial. Go deeper: Practical Typography, free · the Klim essays
Bringhurst · Lupton · Butterick · klim.co.nzThe canons of restraint
Rams' ten principles
"Good design is as little design as possible" and the nine before it. They make a fine review checklist: every element on the page should be able to say which principle it serves. Go deeper: the ten principles (video) · the ten principles, at Vitsoe
Dieter Rams, Braun, 1970sThe Vignelli Canon
Semantics, syntactics, pragmatics: what it means, how it's built, whether it works. A short, opinionated free PDF from the designer of the NYC subway map. You're allowed to disagree with it, just do it in writing. Go deeper: the subway map fight (video) · the Canon, free PDF
Vignelli, 2010 · free PDFHierarchy before decoration
Scale, weight and space solve most layout problems before a second colour or typeface is even needed. A page set in one family, structured by contrast alone, is the classic Swiss drill, and it's how this page is set too. Go deeper: NN/g on visual hierarchy
Working principleGame menus & HUDs
Every game you play is also a graphic design lesson: menus, health bars and maps are hierarchy, grids and contrast doing their jobs at speed. Train your eye on games and it sharpens for everything else. Go deeper: Good Design, Bad Design (video)
Design Doc · a 13-part seriesFor Müller-Brockmann, the grid was really…
An ethical stance: order helps the reader, and constraint speeds you up.
Put the same colour on two different grounds and…
Albers's big lesson: colour is relative, so every colour choice is a relationship choice.
Helvetica started life in 1957 under the name…
Renamed Helvetica in 1960 to sell Swissness abroad. Akzidenz is the 1898 ancestor, Univers the rival.
DareBet you can't make it to school tomorrow without silently redesigning at least one sign on the way.
Development: the web as material
Code is the medium our design ships in, and it has a grain, like timber. Learn to build with the grain and the web starts helping you instead of fighting you.
You've rage-closed a site that took six seconds to load. Latency is noise, and you've felt it in your thumbs.
The web's grain start here
The web is a fluid, edgeless material. Design with that fluidity and the medium does half the work for you. Chimero's essay says this better than anyone has since. Go deeper: responsive design, 10 basics · read the essay
Chimero, The Web's Grain, 2015 · free essayProgressive enhancement
Build the meaning in HTML, the presentation in CSS, the behaviour in JS, in that order, so the message survives whatever happens. It's Shannon & Weaver applied to the stack: resilience is noise reduction. Go deeper: the whole free book
Keith, Resilient Web Design · free onlineSemantics & accessibility
HTML structure is meaning: headings, landmarks and labels are the message as machines and screen readers receive it. Accessibility is clarity extended to every reader, and it comes standard in professional work. Go deeper: how a blind YouTuber browses · MDN's accessible HTML guide · WebAIM's intro
WCAG 2.2 · MDNDesign tokens & atomic design
Encode decisions once, colour, scale, spacing, and derive everything from them, composing interfaces from small parts up. It's how one person's system stays coherent across a website, an email, a dashboard and a deck. Go deeper: Figma: design systems intro · the free book
Frost, Atomic Design · free onlineFluid typography & scales
Design type as a scale that flexes with the viewport (clamp and friends) rather than fixed values per breakpoint. Utopia is the handy tool; the thinking behind it is the real prize. Go deeper: Utopia · fluid type scales, explained
utopia.fyi · Every Layout, Bell & PickeringPerformance as communication
Latency is noise; a fast page delivers its message intact. The biggest wins land with people on modest phones and connections, and a weight budget is as much an editorial decision as an engineering one. Go deeper: how a page actually loads · why speed matters
web.dev · Core Web VitalsMotion with intent
Duration, easing and choreography, borrowed from animation: motion earns its keep by explaining where things came from and where they went. And treat prefers-reduced-motion as a first-class design input. Go deeper: squash & stretch in games · the 12 principles (video) · motion in UX
Disney's 12 principles, applied to UI"The web has a grain" means…
Design with the medium's fluidity and it does half the work for you.
Progressive enhancement builds in this order:
So the message survives whatever happens. Resilience is noise reduction.
"Latency is noise" is another way of saying…
And the biggest wins land with people on modest phones and connections.
DareBet you can't find a site this week that still works with JavaScript switched off. When you do, study it.
Play: games and interactivity
A game is communication you can step inside: rules that produce feelings. Learn why games hold attention for hours and every interface you build afterwards gets more alive.
"The floor is lava" turned a living room into a game with five words. That's the magic circle, and brands build them too.
The magic circle
Play happens inside a boundary with its own rules, and people step in willingly. Huizinga named the circle; Caillois mapped four flavours of play: competition, chance, mimicry and vertigo. A brand world and a game are both invitations into a circle. Go deeper: the magic circle (video) · on Caillois (PDF)
Huizinga, Homo Ludens, 1938 · Caillois, 1958Mechanics, dynamics, aesthetics
You design mechanics, the mechanics generate dynamics, and players feel aesthetics. Design the feeling first, then work backwards to the rules that produce it. The MDA paper is short, free, and worth a reread every year. Go deeper: why Mario Kart helps last place · the paper (PDF)
Hunicke, LeBlanc & Zubek, 2004 · free paperA theory of fun start here
Fun is the feeling of learning a pattern, and a game stays interesting exactly as long as it keeps teaching. Half the book is cartoons, and it's just as true of onboarding flows as of games. Go deeper: Koster's GDC talk (video) · his ten-years-later talk (PDF)
Koster, A Theory of Fun, 2004The hundred lenses
Schell's method: walk around a design and look through lens after lens, curiosity, surprise, the toy, the story. A deck of questions that works on games, websites and services alike. Go deeper: the Deck of Lenses, free
Schell, The Art of Game Design, 2008Flow
Challenge matched to skill, clear goals, immediate feedback. It's the tuning target for a game level, a form flow and a checkout alike; when all three line up, time disappears for the player. Go deeper: Mario's invisible difficulty · his TED talk
Csikszentmihalyi, Flow, 1990Game feel & juice
The tactile layer: response time, easing, sound, screenshake, particles. Small feedbacks, layered generously, make an interaction feel alive in your hand. Watch the talk, then go juice something of ours. Go deeper: Juice It or Lose It (video) · GMTK: game feel secrets · Swink on game feel
Swink, Game Feel, 2008 · Juice It or Lose It, 2012How Zelda is built
Nintendo guides you across Hyrule with towers, landmarks and hidden triangles, and builds dungeons as lock-and-key puzzles. GMTK reverse-engineers both, using the games you already play as the textbook. Go deeper: how Hyrule pulls you around · Boss Keys: dungeon design
GMTK · Boss Keys · Nintendo's CEDEC talkFresh eyes
Watch someone who has never played games try one, and every hidden assumption designers make becomes visible. The gentlest usability lesson on YouTube, and it changes how you watch anyone use anything. Go deeper: games, seen by a non-gamer
Razbuten · Gaming for a Non-GamerIn A Theory of Fun, fun is…
A game stays interesting exactly as long as it keeps teaching. So does a good onboarding flow.
In MDA, you design mechanics, but players actually feel…
Mechanics generate dynamics generate feelings. Design the feeling first, then work backwards.
Flow shows up when…
The tuning target for levels, forms and checkouts alike. Line them up and time disappears.
DareBet you can't play anything tonight without catching the exact moment a level teaches you something new.
Evidence: closing the loop
Everyone has opinions about whether work works. Measurement is how you get to know. It keeps the work honest, and it settles arguments you'd otherwise lose to whoever talks loudest.
Your feed is an A/B test you're inside of, every single day. This module is how it works from the other side of the glass.
The hypothesis loop start here
Every artefact is a little bet: name the behaviour change you expect before shipping, measure it after, write down what you learned. The writing-down is the part that compounds. Go deeper: hypothesis-driven development
Working methodAttribution literacy
UTMs, referrers, why "Direct" traffic hides its real sources, and how thoughtful link design makes QR codes and offline media measurable. Work that can be measured earns its next budget. Go deeper: Plausible's UTM guide
Practised here weeklySearch as intent data
Queries are need-language, verbatim and at scale, which makes search the cheapest research tool there is. And its successor is already here: being retrievable and citable by AI answer engines is the new distribution game. Go deeper: Code.org: how search works · Google's SEO starter guide
SEO / GEO practiceExperimental humility
A/B logic, sample sizes, and the discipline of trusting a result exactly as far as the data supports it. On smaller sites that mostly means patience: let tests run, and let "too early to tell" be a perfectly good answer. Go deeper: TED-Ed: stats that mislead · How Not to Run an A/B Test · the calculators
Any intro stats text · Evan Miller's calculatorsQual completes quant
Dashboards tell you what happened; interviews and session recordings tell you why. Together they make the full picture, and when they agree you can move with real confidence. Go deeper: NN/g on triangulation
Mixed-methods practiceBefore shipping anything, the hypothesis loop asks you to…
Then measure it after, and write down what you learned. The writing-down is what compounds.
A QR code without a tagged link shows up in analytics as…
Thoughtful link design is how offline media gets to take credit for its own good work.
Your A/B test has 40 visitors so far. The honest call is…
Trust a result exactly as far as the data supports it. Patience is a real skill here.
DareBet you can't name the last thing you shared and say why it earned the share. That why is a hypothesis.
Studios to study
Independent studios doing all of the above in public, at the highest level. For each one, pick a project and reverse-engineer it: find the grid, name the palette relationships, spot the typefaces and the strategy underneath. That teardown is drill D-07.
Swiss discipline as a business model: standards manuals, systems thinking, restraint under pressure.
Motion as identity; how a brand behaves in time as well as space. Their DEMO festival is a masterclass feed.
Kinetic typography: the Swiss school run at 60 frames per second.
Editorial identity; art-world rigour applied to brand systems.
Swiss foundations at full play; grids that dance.
Participatory design and tools-as-outcomes; communication made together with its audience.
Kris Sowersby's essays are the best free type-history education anywhere. Start with the writing, then the fonts.
What contemporary type practice looks like: tooling, variable fonts, wit.
Modern Swiss faces with beautifully argued specimens; study how they present type as a product.
Design and engineering as one practice; calm, technical, deeply considered product work.
Web craft at award level: motion, performance and typography holding together under ambition.
Film, brand and web as one editorial voice; art direction leading technology.
Warmth in product design; systematic and human at the same time.
Commerce as brand experience; conversion thinking and craft in the same build.
The level design masters behind Mario and Zelda; study how a shrine teaches you without a single word.
Monument Valley: art direction, gentleness and one mechanic carried to perfection.
Games as graphic design; Sayonara Wild Hearts is a pop album you play.
Untitled Goose Game: one perfect comic idea, executed with total commitment. Local, too.
Software house turned publisher and console maker (Playdate); taste as a business strategy.
Browser experiences at game fidelity; WebGL as a brand medium.
Interactive weirdness with serious craft; the web treated as a playground.
Fragmentary myth at blockbuster scale; worlds that trust you to dig. Study how little they explain.
Joyful geometric identity work; ideas simple enough to draw from memory, which is the real test.
Strategy rigour made visible; read their case studies for how positioning becomes design.
Craft-forward brand and digital; detail obsession at boutique scale.
Australian digital product and web work competing globally on polish.
The shelf
Pick these up as you get to them; there's no rush. A surprising amount of the canon is free, so start there.
Drills
One a week, rotating, forever. Each drill welds an idea to your hands. Bring the results to crit; how you explain them matters as much as the thing itself.
Rebuild a Swiss poster
Pick a Müller-Brockmann or Musica Viva poster and rebuild it in HTML and CSS on a strict column grid. You'll learn more about layout in one evening than most tutorials teach in a month.
One family, full hierarchy
Set a full article in a single typeface, with hierarchy coming from size, weight and space alone. Add colour or rules only once the page already works without them.
Name the argument
Take a live landing page and write out its argument as ethos, pathos and logos before touching the layout. Then ask: is the design amplifying the argument, or just decorating it?
Three lenses on one number
Take one real funnel number that's underperforming and write three hypotheses through three different lenses, say Fogg, Jobs to be Done, and System 1. Notice how the lens changes the fix.
Blueprint a service
Map one of our services end to end on one page: frontstage, backstage, supporting systems. Mark the moments that decide how the customer feels; most of them sit backstage, and that's the lesson.
Type specimen
Choose one grotesque, write a page on its history and character, then set and kern a headline by eye. Compare your kerning with the built-in metrics afterwards, and enjoy how close you get.
Studio teardown
Pick one studio from module 11 and reverse-engineer a project: grid, palette relationships, type choices, and the strategy you can infer underneath. Write it up as design tokens.
Make one colour into two
The Albers exercise: place the same colour on two grounds until it reads as two different colours. Then use the effect on purpose in our own palettes.
One-verb game
Build a tiny browser game around a single verb: jump, grow, swap, stack. Ship it within a week; playable beats polished, and finishing is the skill you're training.
Juice pass
Take one plain interaction, a button, a card, a form, and layer in feel: timing, easing, sound, a little spring. Keep every addition explainable; you're aiming for alive, on purpose.
Paper prototype
Invent a game with paper and a pen in an hour, then playtest it with someone in the studio and change the rules live. It's the fastest concept training there is, and it costs nothing.
Run the story spine
Take a customer journey through one of our services and retell it with Kenn Adams' spine, customer as hero. Then check the website against it: does every page move their story forward?
Value-turn a scene
Pick one scene from a film you love and one level from a game, and name the value each turns (McKee style). Then find the value turn in a landing page, and if there isn't one, write it in.
Bury the lore
Write a one-page myth for a brand or a place, then express it only through fragments: five item descriptions, a ruin, a rumour. Show someone the fragments and see how much of the myth they can dig back up.