Before a single color gets chosen. Before anyone opens a font library. Before the first wireframe or the first component — there's a question that most design processes skip entirely, or answer by accident, or let the client answer for them by pointing at a competitor's site and saying something like that.
The question is: what should it feel like to be here?
Not what should it look like. Not what should it say. What should it feel like — in the body, before the brain has had a chance to translate the visual input into language. That pre-verbal impression. That first half-second.
Atmosphere is the answer to that question. Aesthetics are the tools you use to build it. And doing them in the right order is the difference between a site that looks good and a site that works.
The order most designers get wrong
The standard creative process goes something like this: gather references, build a moodboard, extract a palette and a type pairing from what you've collected, apply them to the layout, and call the result a visual identity. It's taught this way. It's billed this way. It produces work that is often technically accomplished, visually cohesive, and completely interchangeable with a dozen other sites in the same industry.
The problem isn't the tools. Moodboards, palettes, type scales — these are useful. The problem is the sequence. When you start with references, you are implicitly starting with other people's answers to the atmosphere question. You are borrowing the feeling before you've defined what the feeling should be.
Define the atmosphere first — in words, in textures, in spatial metaphors, in verbs. Only then reach for visual tools. The aesthetic should be a translation of the atmosphere, not the other way around.
What I do instead starts with a brief that has nothing to do with visual design. No references, no palettes, no fonts. Just words. What does this brand feel like? What does a person feel when they're in the company of this business? What's the emotional register — reverent, irreverent, urgent, unhurried, austere, exuberant? What's the spatial metaphor — a workshop, a gallery, an old library, a busy kitchen, a clearing in a forest?
Those words become the atmosphere brief. The visual design happens inside that brief, in service of it, constrained by it. Every aesthetic decision is a translation problem: how do I render this feeling in color, type, motion, and space?
When you work in that order, the result isn't just visually distinct. It's coherent in a way that's hard to fake and impossible to template. It feels like somewhere.
What visitors actually experience
Here's what visitors don't notice: your color palette. Your type scale. The grid. The carefully chosen weight of your headings. The pixel-perfect spacing between your sections.
Here's what they do notice: whether this feels like a place that was made for them. Whether the experience of being here is consistent with what the business said it was. Whether something about it sticks — whether, three hours later, they remember not just what the site said but what it felt like to be on it.
Nobody leaves a site thinking about the typeface. They leave with a feeling. The typeface either contributed to that feeling or it didn't — and if it did, it was invisible.
On the invisibility of good designThis is the central paradox of atmosphere in design: it works when you can't see it. A site with a strong atmosphere doesn't announce itself as having one. The visitor doesn't think "this has a very cohesive feeling." They just feel it. The craft disappears into the experience.
A site where the aesthetics came first and the atmosphere was never defined announces itself differently. You can see the choices. You notice the font. You register the color scheme. The individual components are visible precisely because they aren't unified by anything deeper than visual consistency. They're a collection of well-executed decisions that don't add up to a place.
The test is simple: close your eyes and try to describe what it felt like to be on that site. Not what it looked like. What it felt like. If you can answer that question in one or two words — confident, quiet, alive, like a well-worn workshop, like a late night conversation — the atmosphere did its job. If the honest answer is "clean" or "professional," the aesthetics did their job and nothing more.
Aesthetics are the vocabulary. Atmosphere is the thing being said.
Studio principle · HandwiredThe problem with moodboards
Moodboards aren't wrong. They're just aimed at the wrong thing, used at the wrong stage, for the wrong reason.
The typical moodboard is a collection of other people's work that shares some visual property with what you're building. Similar palette, similar texture, similar overall vibe. It's a useful tool for client alignment — a way of asking "does this feel like the direction?" without having built anything yet.
The problem is that it answers the atmosphere question by pointing at existing atmospheres. It says: we want to feel like this site, or this photograph, or this book cover. Which means you are, from the first moment of the process, working in borrowed feeling.
Borrowed feeling produces pastiche. A site that feels like it's trying to feel like something else. The references are visible through the surface. A sophisticated visitor can see them — can sense that the aesthetic choices were made by looking outward rather than inward. It has the shape of an atmosphere without the substance of one.
References are useful after the atmosphere brief is written — as a technical resource, not a creative one. Not "we want to feel like this" but "this solves the same problem we're solving; let's understand how." The feeling comes from the brand. The references inform the execution.
The work I'm most proud of started with zero references. A children's art store: the brief was wonder, discovery, the feeling of finding something unexpected in a place you already knew. No references. Just that. The visual language — the hourly chime, the pendulum loader, the warm off-whites and that particular shade of dusty teal — came from the brief, not from a moodboard. The references came later, as technical inputs. The atmosphere came first, from the inside out.
That's the difference. And it's the reason that site feels the way it feels, rather than feeling like a well-executed version of a thing you've seen before.
The specific beats the beautiful
There's a hierarchy that almost nobody talks about: specific is more valuable than beautiful.
A beautiful site is one where the visual decisions are well-made — the proportions are right, the palette is harmonious, the type is elegant. Beautiful is an achievement. But beautiful doesn't distinguish. Beautiful, applied to a dozen different brands in the same industry, produces a dozen beautiful sites that feel identical.
Specific is something else. Specific means this particular brand, with this particular personality and this particular audience, has a site that could only ever belong to it. The visual decisions aren't just good; they're right for this thing and wrong for almost everything else. Specific is harder to achieve than beautiful — and it's worth more, because it creates the conditions for recognition.
Specificity comes from atmosphere work done before aesthetics. When you've defined what a brand feels like — at the level of sensation, not visual reference — the aesthetic decisions that follow have a constraint beyond "does this look good." They have to answer: does this serve the atmosphere? Does this add to the feeling or dilute it?
That constraint is generative. It eliminates the infinite option space of "what could we do here" and replaces it with a much smaller space of "what's right for this." The site that comes out of that process isn't just beautiful. It's specific. And specific is memorable in a way that beautiful, on its own, rarely is.
Building the atmosphere vocabulary
The first thing I build for every project isn't a wireframe. It's an atmosphere vocabulary — a short document that defines what this brand feels like, in language specific enough to make aesthetic decisions from.
The vocabulary is built from five categories:
When those five categories are filled in, the atmosphere is defined. A set of aesthetic decisions that emerges from that brief will produce a site that feels like the brand — not like a well-executed version of what similar brands are doing.
Here's what that looks like for a real project: a contractor site. Register: reliable, confident, unhurried — this is a business that doesn't need to shout because the work speaks. Spatial metaphor: a well-kept workshop, where everything is in its place and the craftsmanship is visible in the details. Material: solid, worn-smooth wood, good tools, weight and warmth. Time: slow enough to trust, not so slow it's pompous. Trust signal: competence before personality — show the work, let the character come through in the craft.
From that brief, the aesthetic decisions almost make themselves. Deep palette with warmth in the tones. Typography that's heavy without being aggressive. Animation that feels deliberate, not showy. Copy that understates rather than oversells. The purple and gold weren't chosen because they looked good together — they were chosen because they translated the brief. And the site feels the way the brief said it should.
What this looks like in a project
The atmosphere brief adds time to the front end of a project. Not a lot — a few focused conversations, a document that usually runs to a page or less. But it changes everything that comes after.
Aesthetic decisions stop being taste calls and become brief calls. The question isn't "do I like this typeface" but "does this typeface serve the atmosphere." Client feedback stops being "I'm not sure about that blue" and becomes "does that blue feel right for a business that's supposed to feel warm and established." The vocabulary gives both sides something to aim at that isn't personal preference.
It also changes what counts as done. A site is done when it works, yes — when the layout is solid and the code is clean and the thing loads fast. But it's also done, in a different sense, when it creates the atmosphere it was built to create. When someone arrives and feels the thing the brief said they should feel. That's a different bar than technical completion, and it's a more honest one.
Most of the sites I've built would have been fine without the atmosphere brief. They would have been well-designed, visually competent, and forgettable. The brief is what takes them from fine to felt. From sites that look like something to sites that feel like somewhere.
That's the argument for doing it first. And for doing it every time.