Before We Start
I built my first websites in sixth grade, with my sister: plain HTML and CSS, and glitter animations, which is how I ended up learning Photoshop. By seventeen I was making flyers and billboards for institutes in my hometown, and by eighteen I was charging for it. At nineteen I went to study graphic design, and the lecturer who taught my fourth semester gave me my first real job, where for the first time what I designed was something people would use, not just look at. That's where I learned the trade. Since then it's been hackathons, working with ed-tech founders building tools for classrooms and testing them with the teachers and kids who'd use them, theaters, and now the software I build for a printhouse and for businesses that talk to their customers on WhatsApp.
<figure style="margin:1.2rem 0 .6rem;text-align:center"><svg width="300" height="219" viewBox="0 0 400 292" role="img" aria-label="a pink homepage from the glitter years, redrawn: a rainbow banner, a menu, an updates box, an under-construction sign and a hit counter"><defs><linearGradient id="ttl" x1="0" x2="1"><stop offset="0" stop-color="#0a246a"/><stop offset="1" stop-color="#a6caf0"/></linearGradient><pattern id="rb" width="36" height="10" patternUnits="userSpaceOnUse"><rect width="6" height="10" fill="#ffd1ec"/><rect x="6" width="6" height="10" fill="#fff3b0"/><rect x="12" width="6" height="10" fill="#c9f2d0"/><rect x="18" width="6" height="10" fill="#c8e4ff"/><rect x="24" width="6" height="10" fill="#e3d1ff"/><rect x="30" width="6" height="10" fill="#ffc9d6"/></pattern><pattern id="pk" width="18" height="18" patternUnits="userSpaceOnUse"><rect width="18" height="18" fill="#ff9fd6"/><path d="M4 2 L5 4 L7 5 L5 6 L4 8 L3 6 L1 5 L3 4Z" fill="#ffe3f4"/><circle cx="13" cy="13" r=".9" fill="#fff"/></pattern><pattern id="sky" width="22" height="22" patternUnits="userSpaceOnUse"><rect width="22" height="22" fill="#05052e"/><circle cx="3" cy="4" r=".7" fill="#fff"/><circle cx="15" cy="11" r=".5" fill="#cfe"/><circle cx="9" cy="18" r=".6" fill="#ffd"/></pattern><linearGradient id="neon" x1="0" x2="1"><stop offset="0" stop-color="#ff4fd8"/><stop offset=".5" stop-color="#9b6bff"/><stop offset="1" stop-color="#3ff0ff"/></linearGradient><linearGradient id="gl" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff"/><stop offset=".5" stop-color="#ffd6f5"/><stop offset="1" stop-color="#c7a6ff"/></linearGradient></defs><rect x="0" y="0" width="400" height="292" fill="#d4d0c8" stroke="#6f6f6f"/><rect x="2" y="2" width="396" height="13" fill="url(#ttl)"/><text x="6" y="11.5" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="7.5" font-weight="700" fill="#fff" text-anchor="start">Star Sisters ~~ Home</text><rect x="360" y="4" width="10" height="9" fill="#d4d0c8" stroke="#555" stroke-width=".6"/><rect x="372" y="4" width="10" height="9" fill="#d4d0c8" stroke="#555" stroke-width=".6"/><rect x="384" y="4" width="10" height="9" fill="#d4d0c8" stroke="#555" stroke-width=".6"/><text x="386" y="11.5" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="8" font-weight="700" fill="#000" text-anchor="middle">×</text><text x="6" y="24" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="6.5" font-weight="400" fill="#000" text-anchor="start">File Edit View Favorites Tools Help</text><line x1="2" y1="27" x2="398" y2="27" stroke="#a0a0a0"/><text x="6" y="37" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="6.5" font-weight="400" fill="#444" text-anchor="start">Address</text><rect x="34" y="30" width="338" height="10" fill="#fff" stroke="#7a7a7a" stroke-width=".7"/><text x="37" y="37.5" font-family="'JetBrains Mono', ui-monospace, monospace" font-size="6" font-weight="400" fill="#000" text-anchor="start">http://members.webspace.net/~starsisters/index.html</text><rect x="375" y="30" width="21" height="10" fill="#d4d0c8" stroke="#7a7a7a" stroke-width=".7"/><text x="385.5" y="37.5" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="6" font-weight="400" fill="#000" text-anchor="middle">Go</text><rect x="389" y="43" width="9" height="236" fill="#e8e6e0" stroke="#a0a0a0" stroke-width=".5"/><rect x="390" y="55" width="7" height="40" fill="#d4d0c8" stroke="#808080" stroke-width=".5"/><rect x="2" y="281" width="396" height="9" fill="#d4d0c8" stroke="#a0a0a0" stroke-width=".5"/><text x="6" y="287.8" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="6" font-weight="400" fill="#000" text-anchor="start">Done</text><rect x="2" y="43" width="387" height="236" fill="url(#pk)"/><rect x="10" y="50" width="371" height="48" fill="url(#rb)" stroke="#ff5cbc" stroke-width="2"/><text x="196" y="85" font-family="'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive" font-size="30" font-weight="700" fill="#ff1493" text-anchor="middle" stroke="#fff" stroke-width="3.5" paint-order="stroke">Star Sisters</text><path d="M40 56 L41.68 60.32 L46 62 L41.68 63.68 L40 68 L38.32 63.68 L34 62 L38.32 60.32 Z" fill="#fff"/><path d="M62 82 L63.12 84.88 L66 86 L63.12 87.12 L62 90 L60.88 87.12 L58 86 L60.88 84.88 Z" fill="#fff"/><path d="M318 55 L319.4 58.6 L323 60 L319.4 61.4 L318 65 L316.6 61.4 L313 60 L316.6 58.6 Z" fill="#fff"/><path d="M352 77 L353.96 82.04 L359 84 L353.96 85.96 L352 91 L350.04 85.96 L345 84 L350.04 82.04 Z" fill="#fff"/><path d="M290 87 L290.84 89.16 L293 90 L290.84 90.84 L290 93 L289.16 90.84 L287 90 L289.16 89.16 Z" fill="#fff"/><path d="M110 55 L110.84 57.16 L113 58 L110.84 58.84 L110 61 L109.16 58.84 L107 58 L109.16 57.16 Z" fill="#fff"/><text x="196" y="111" font-family="'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive" font-size="10" font-weight="700" fill="#8a00c2" text-anchor="middle">~~ Welcome 2 our page!!! ~*~</text><path d="M110 103 L111.12 105.88 L114 107 L111.12 108.12 L110 111 L108.88 108.12 L106 107 L108.88 105.88 Z" fill="#fff"/><path d="M282 103 L283.12 105.88 L286 107 L283.12 108.12 L282 111 L280.88 108.12 L278 107 L280.88 105.88 Z" fill="#fff"/><rect x="10" y="118" width="88" height="94" fill="#fff" stroke="#ff5cbc" stroke-width="2"/><rect x="10" y="118" width="88" height="15" fill="#ff5cbc"/><text x="54" y="129.5" font-family="'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive" font-size="10" font-weight="700" fill="#fff" text-anchor="middle">MeNu</text><text x="18" y="145" font-family="'Times New Roman', Times, serif" font-size="8" font-weight="400" fill="#0000ee" text-anchor="start" text-decoration="underline">» Home</text><text x="18" y="156" font-family="'Times New Roman', Times, serif" font-size="8" font-weight="400" fill="#0000ee" text-anchor="start" text-decoration="underline">» About Us</text><text x="18" y="167" font-family="'Times New Roman', Times, serif" font-size="8" font-weight="400" fill="#0000ee" text-anchor="start" text-decoration="underline">» Our Pets</text><text x="18" y="178" font-family="'Times New Roman', Times, serif" font-size="8" font-weight="400" fill="#0000ee" text-anchor="start" text-decoration="underline">» Gallery</text><text x="18" y="189" font-family="'Times New Roman', Times, serif" font-size="8" font-weight="400" fill="#0000ee" text-anchor="start" text-decoration="underline">» Guestbook</text><text x="18" y="200" font-family="'Times New Roman', Times, serif" font-size="8" font-weight="400" fill="#0000ee" text-anchor="start" text-decoration="underline">» Links</text><rect x="10" y="218" width="88" height="30" fill="#fff6a8" stroke="#ff5cbc" stroke-width="1.5"/><text x="54" y="230" font-family="'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive" font-size="8" font-weight="700" fill="#cc0066" text-anchor="middle">Sign our</text><text x="54" y="241" font-family="'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive" font-size="8" font-weight="700" fill="#cc0066" text-anchor="middle">guestbook!!</text><rect x="16" y="254" width="76" height="13" fill="#000"/><text x="54" y="264" font-family="'JetBrains Mono', ui-monospace, monospace" font-size="8.5" font-weight="700" fill="#39ff14" text-anchor="middle">0 0 0 3 4 7</text><text x="54" y="275" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="6.5" font-weight="400" fill="#7a0050" text-anchor="middle">visitors!!</text><rect x="106" y="118" width="283" height="132" fill="#fff" stroke="#ff5cbc" stroke-width="2"/><text x="247.5" y="133" font-family="'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive" font-size="10" font-weight="700" fill="#8a00c2" text-anchor="middle">~Updates~</text><text x="114" y="149" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="7" font-weight="400" fill="#cc0066" text-anchor="start">Hiii!! Welcome to our site!! We made it ALL by</text><text x="114" y="160" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="7" font-weight="400" fill="#cc0066" text-anchor="start">ourselves :) Here u can find pics of our pets, cool</text><text x="114" y="171" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="7" font-weight="400" fill="#cc0066" text-anchor="start">glitters and backgrounds and lots more!!! Dont</text><text x="114" y="182" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="7" font-weight="400" fill="#cc0066" text-anchor="start">forget to sign our guestbook before u leave <3</text><rect x="114" y="194" width="26" height="11" fill="#ff0000"/><text x="127" y="202.5" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="7" font-weight="700" fill="#ffff00" text-anchor="middle">NEW!</text><text x="146" y="202.5" font-family="'Times New Roman', Times, serif" font-size="7" font-weight="400" fill="#0000ee" text-anchor="start" text-decoration="underline">glitter graphics added!! take 1 if u want :)</text><rect x="114" y="216" width="267" height="24" fill="#ffd400" stroke="#000" stroke-width="1"/><path d="M114 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M128 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M142 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M156 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M170 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M184 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M198 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M212 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M226 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M240 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M254 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M268 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M282 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M296 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M310 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M324 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M338 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M352 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M366 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M380 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><path d="M394 216 l7 0 l-10 24 l-7 0 Z" fill="#000" opacity=".85" clip-path="url(#uc)"/><clipPath id="uc"><rect x="114" y="216" width="267" height="24"/></clipPath><rect x="144" y="221" width="207" height="14" fill="#ffd400"/><text x="247.5" y="231.5" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="7.5" font-weight="700" fill="#000" text-anchor="middle">this page is UNDER CONSTRUCTION!!</text><text x="247.5" y="268" font-family="Verdana, Tahoma, Geneva, sans-serif" font-size="6.5" font-weight="400" fill="#7a0050" text-anchor="middle" font-style="italic">best viewed in 800x600</text><path d="M366 122 L367.12 124.88 L370 126 L367.12 127.12 L366 130 L364.88 127.12 L362 126 L364.88 124.88 Z" fill="#fff"/><path d="M120 259 L120.84 261.16 L123 262 L120.84 262.84 L120 265 L119.16 262.84 L117 262 L119.16 261.16 Z" fill="#fff"/><path d="M372 257 L373.4 260.6 L377 262 L373.4 263.4 L372 267 L370.6 263.4 L367 262 L370.6 260.6 Z" fill="#fff"/></svg><figcaption style="font-size:.8rem;color:#a8a298;font-style:italic;margin-top:.4rem">The glitter years. A homepage of the kind we made, redrawn for this book.</figcaption></figure>
How many years is that? Depends how you count. Fifteen, if you start from the first thing somebody paid for. Ten, if you start from the first interface. Twenty, if the glitter counts. I think the glitter counts.
This book is what I've come to think, across those years, about how a made thing should feel to the person using it. It isn't a textbook and it isn't a method. It's a set of thoughts, with the examples that produced them, and the questions I now ask because of them. You're free to disagree with any of it. I'd rather you argued with a page than nodded at it.
Most of what follows is about systems: products people work in and come back to. The order screen, the dashboard, the inbox, the tool with forty rows that someone uses all day. Not the marketing site or the landing page, which a person meets once, in passing, and which is judged by whether they stayed, and whether they converted: signed up, bought, booked the call. Those are designed under different pressures, and some of this book doesn't apply to them. A lot of it does: what a thing means before it's read, what goes with what, what comes first, the medium the person is holding. You'll recognize which.
For this book, I've put my thoughts in the order I've come to see them: a climb, where each step stands on the one before. I'm not the first to draw it. Aarron Walter drew nearly the same one in Designing for Emotion, out of Maslow: functional, reliable, usable, pleasurable. I got there from the other side, from what happens between a thing and a person.
It starts with meaning, because nothing can start anywhere else. Every element on a screen already means something to the person before they've read a word: a raised rectangle presses, a row is one of many, a gap is a boundary. Those meanings aren't ours. They're contracts the person brings with them from every other product they've used, and the first job is knowing which ones we're riding on and which ones we're making new.
Meaning leads to a relationship, because once something means something, it owes the person who read it. The raised rectangle has promised to press just by being read, and now the person expects it to. That expectation is where a relationship starts, between a person and a system as much as between two people: a set of promises that mostly never get said out loud. I'll be here. I'll do what I look like I do. I'll answer.
A relationship leads to trust, because a promise is only real once it's kept. Keep it again, and again, and the person stops checking. That not-checking is trust, and it's something a product earns rather than has.
Trust lets character show, because once the person has stopped watching the product, something larger can show through all the kept promises: not what it does, but who it is. Its quirks, what it never says, how it behaves in the corners where nobody's looking. You can't see a self in something you're still bracing against. Trust doesn't make the someone. It only lets you see the one that's there.
And then humanity, which isn't the next step. It's what the whole climb was for. A product can mean clearly, relate well, keep every promise and have a self, and still nobody has asked who it was for. The wanting was never in the thing. It was in the person on the other end, holding the screen, with their own Tuesday and their own five minutes. The chain is how we build; the person is why.