How a project runs · Step 4 of 9

How does Marbl Codes build a moodboard for your website?

Your logo and real colours first, then your sector, then boards of references with every image linked to where it came from. Richard picks a direction in words before anything is drawn.

The moodboard is where the look of your site is decided in references before anyone draws a pixel. Your brand comes first and is fixed. Everything else is open until Richard names a direction in words.

What do we start with?

What exists. Your logo, in the best file you have. Your real colours, sampled from that file rather than guessed from a screen. Screenshots of your current site, so we know what people are used to. Any brand guidelines, however old.

This is the anchor. Brand means your logo and your colours, and those are fixed. Style means everything else, the type, the spacing, the photography, the tone of the layout, and that is what the board explores. We do not redesign your identity as a side effect of building your site.

Where does the rest come from?

Three places, in order. Sector context first: what your customers expect from a business like yours, and what everyone in your sector does that you could do better. Then patterns: well-made sites that solve the problems yours will have, a booking flow, a product filter, a trade account area, so the board carries solutions that have shipped, not only mood. Then a wider harvest of design references, with your own picks leading if you have them.

Every image on a board is linked to where it came from, so “like this” always points at something you can open. Reference is never stock. Nothing on a board gets copied into your site; it is there to agree on a feel and a structure.

What does the board look like?

A contact sheet: the references laid out together so they can be compared at a glance, grouped by what they are answering. Beside it, a short note in plain words naming the anchors, what we are leaving behind from the current site and why, the boards and what each one is testing, and our recommendation.

Who picks the direction?

Richard, with you wherever you care about it. He picks in words, before anything is drawn. “Warm, dense, editorial, your green as the accent, lots of your own photography” is a direction. A drawn mock is not, because it has already made a hundred decisions nobody agreed to.

We stop here until the direction is picked. The design system, the next step, is built from that sentence, and every later argument about the site can be settled by asking whether something matches it.

Questions at this step

What people ask us here

Please do. Sites you like, sites you hate, a competitor who looks better than they should. Your picks lead the board. We add sector context and patterns around them, but the starting point is what you already respond to.

Say so, here. Changing direction at the moodboard costs little. Changing it after the design system is built costs a rebuild of the kit, and after a mock it costs a redesign. This is the cheap place to disagree, which is why we stop and ask.

No. Your logo and your colours are the anchor, and they stay as they are unless you ask for something different. If the logo needs a tidier file or a version for dark backgrounds we will say so, but the mark and the name stay together.

Ready for step one?

No obligation, no jargon, no pressure

Tell us what you’re trying to do. We’ll tell you where to start.

Start a project

We plant trees with every client. Our forest grows on Ecologi.

Our ethos

Proud supporters of local WNNCC members.

Visit the Chamber

Free guide

What is a good website, really?

Last thing