What Is a Moodboard? How to Set Visual Direction in Web Design

A moodboard makes the feel of a website visible before anyone designs a single screen. It brings color, typography, photography and texture onto one surface. In this guide, we walk through how to build a moodboard step by step, how to choose a direction with your client, and how to use reference sites without copying them.

Nielsen Norman Group describes the moodboard in its guide to mood boards in UX as a way to express the feelings and values a product should create. In practice, our experience in the field points the same way. When a client asks for something "modern," everyone pictures a different site. A moodboard turns that vague word into something concrete. As a result, the discussion moves from personal taste to shared goals.

In short, a moodboard is a decision tool. Above all, a good one shortens later design rounds. It also means you hear "that is not what I imagined" at the very start, when changes are still cheap, rather than at launch.

When should you create a moodboard in a web project?

You create the moodboard after the brief and before the first wireframe. The order matters. First, the brief tells you who you design for, why, and within which limits. The moodboard then translates that into a visual language. Without a brief, the board floats in the air, so we recommend you first write a website design brief.

For a brand new business, the moodboard covers a wider area. Also, the logo, colors and typefaces may not exist yet. A redesign works differently. In that case, the board shows how the existing identity will live online, and the brand guidelines set its limits.

That said, you can reopen the board in the middle of a project. For example, if a new product page needs its own personality, you can make a small sub-board. Still, changing the main direction often wears the team out. Giving the first board enough time saves weeks later. That is also why our web design projects treat this phase as a separate step.

How does a moodboard differ from a style guide and a wireframe?

In practice, people often mix up these three deliverables, yet each answers a different question. The moodboard answers "how should it feel?" The wireframe answers "what goes where?" The style guide answers "which rules do we follow?" The table below sums up the difference.

In practice, the moodboard is the loosest deliverable and the style guide is the strictest. You do not need exact hex codes on a moodboard. In a style guide, however, every value must be measurable. So reading a board like a rulebook sets the wrong expectations.

What inputs do you need before you start a moodboard?

Instead of starting with a blank canvas, put your existing material on the table. After all, the clearer the inputs, the more focused the board. So it pays to collect them first. When we start a project, we fill in the list below together with the client.

• Current logo, brand colors and any brand guidelines.
• A description of the audience: needs and expectations, not just age ranges.
• The main goal of the site: quote requests, sales, bookings or information.
• Three to five sites the client likes, and a few they dislike.
• The general visual tone of competitors and where the brand wants to stand apart.
• Whether photos already exist and whether a shoot is possible.
• Technical limits: platform, number of languages, accessibility target.

The "sites I dislike" question is especially useful. Because people describe what they do not want more clearly than what they want, this answer often sets clear limits. You also need to know the photo situation up front. If there will be no professional shoot, choosing a direction that stock images cannot deliver causes trouble later.

How do you choose mood words?

Mood words are the compass of a moodboard. The Nielsen Norman Group guide suggests picking four to five words. In other words, that number gives enough direction without crowding the board. The best moment to define them is right after the brief meeting, together with the client.

Avoid generic words. "Quality," "professional" and "modern" show up on almost every brand's list, so they do not set you apart. Instead, look for the fine difference between synonyms. For example, "calm" and "airy" lead to different images. Likewise, "trustworthy" and "corporate" are not the same thing.

1. Ask the client to write ten words that describe the brand.
2. Merge the ones that mean almost the same.
3. For each word, ask what its opposite would be.
4. Keep words whose opposite is also a reasonable brand description, because those force a real choice.
5. Cut and rank until you have four or five words.

The ranking in the last step matters too. Specifically, the first word becomes the dominant feeling of the board. The others are supporting tones. As a result, when two words clash, you already know which one wins.

How do you set the color direction on a moodboard?

On a moodboard, color should read as an atmosphere rather than a list of codes. Warm or cool, saturated or soft, light background or dark? A group of three to five colors that answers these questions works for most projects. You can leave the exact values for the style guide.

Next, think in roles when you build the color group. A background color, a text color, a main brand color and an accent color form the basic skeleton. The accent usually goes to buttons and key links. Therefore, showing it in small areas on the board reflects how the site will really use it.

Also, color associations vary by culture and industry. We cover that topic in depth in our article on color psychology in web design. At the moodboard stage, your aim is to test colors against your mood words, not against memorized meanings.

Proportion matters as well. If every color appears at the same size, the board gives a false impression. Instead, the background should look large and the accent small. That way, the client pictures the real balance of the site from day one.

Why should you test color contrast at the moodboard stage?

Because even a beautiful color group can produce unreadable text, and finding that out after the design is finished is expensive. The W3C WCAG contrast criterion asks for a ratio of at least 4.5:1 for normal text and at least 3:1 for large text at level AA.

The moment you place a text color next to a background color on the board, you can check that ratio. Our color contrast checker does this in seconds. If the ratio falls short, darkening the tone a little usually solves it. Sometimes, though, you need to rethink the whole group.

Also, do not rely on color alone to carry meaning. The W3C use of color criterion asks that people who cannot tell colors apart get the same information through text, shape or pattern. For example, show error states with an icon and a short message, not only with red. For the wider framework, see our guide on web accessibility and WCAG standards.

How does typography show up on a moodboard?

Above all, typography sets the voice of a site. Two pages with the same colors feel completely different when one uses a serif and the other a geometric sans. So writing a font name on the board is not enough. Show headings and body text in a real sentence, close to their real size.

In practice, two type families cover most projects: one for headings and one for body copy. Sometimes a single family does the job. When you choose, check language support. If the site will run in several languages, test a sample sentence with accented characters, such as German umlauts.

Performance is part of the typography decision too. The web.dev typography guide reminds us that every extra font file adds to page load time. It also mentions 45 to 75 characters as a widely accepted line length. For a deeper look at font choices, read our guide on how to choose web typography.

How do you define the photography style on a moodboard?

Photography is the layer visitors notice first. Before they read a word, they register the light, tone and framing of an image. For that reason, you should pick moodboard photos by their shared traits, not at random.

We describe a photography style along these axes:

• Light: natural daylight, studio light, or dark and dramatic.
• Framing: wide spaces, close details, or people at the center.
• Color treatment: vivid or muted, warm or cool.
• People: faces looking at the camera, hands at work, or no people at all.
• Staging: candid moments or planned, polished scenes.

Write these axes onto the board. Then whoever shoots or picks stock images can keep the same language. For instance, a three-word note like "daylight, close detail, warm tone" makes it far easier to choose the right image among dozens.

Where do icons, illustrations and textures fit?

Icons and illustrations carry less weight than color and photography, yet inconsistency in them stands out at once. On the moodboard, a few samples that show stroke weight, corner radius and filled or outline style are enough. Still, this small decision later affects dozens of components.

Textures and patterns usually live in the background layer. A light paper grain, a fine grid or a soft gradient can change the character of a site. However, texture must never hurt readability. So it is safer to show texture in empty areas rather than behind text.

Likewise, corner shape is another decision people skip. Sharp corners feel more serious and structural, while rounded corners feel softer and friendlier. If you add button, card and form field samples to the board, the client sees the difference right away.

How do you show spacing and rhythm on a moodboard?

Spacing carries feeling as strongly as color, yet it is the layer people forget most often. Generous white space feels airy, refined and calm. Dense layouts feel energetic, busy and information rich. So which one fits depends on your mood words.

We use two ways to show spacing on the board. First, we draw a small sample card that presents the same content at two densities. Second, we add cropped references that quote only the spacing of another site. That way, the client sees a concrete difference instead of an abstract word.

Rhythm is about how sections follow each other. For example, a wide visual section, then a short text block, then another visual creates a steady breathing pattern. Showing that rhythm as a vertical strip on the moodboard leaves a strong hint for the wireframe stage. Still, leave the detailed layout to the wireframe and keep only the feeling on the board.

Should a moodboard capture motion and interaction?

Yes, but in moderation. A site's character is not only static. What happens when you hover a button, how elements appear while you scroll, and the speed of transitions all shape perception. Fast, sharp transitions feel dynamic. Slow, soft ones feel calm.

A short screen recording or a sequence of a few frames is enough to show motion on a moodboard. Here again, avoid copying a reference site as a whole. Instead, note only the tempo and character of the motion. A note like "soft, short, never distracting" gives developers a clear boundary.

Also keep the accessibility side of motion in mind. Some users turn on a reduced motion setting in their operating system. Therefore, your motion language should respect that preference. So a note on the board saying "meaning stays intact with reduced motion" is a useful reminder for later stages.

How do you use reference sites without copying them?

Reference sites are the riskiest material on a moodboard. Used well, they clarify direction fast. Used badly, they produce a faded copy of someone else's site. Nielsen Norman Group also warns that filling a board with screenshots shifts the focus from mood to features.

Our rule is simple: quote a reference site for one trait, never as a whole. Saying "we like how airy the white space feels here" is healthy. By contrast, saying "we want this site" then locks the design from the start. Next to every screenshot, add a short note on why it is there.

1. Crop the screenshot and keep only the relevant detail.
2. Add a note on what you take from it: spacing, type, rhythm or photo tone.
3. Remove logos, copy and other brand elements.
4. Show the same trait with at least two examples from different industries.
5. During design, look at the note, not at the reference.

Picking references from outside your industry works especially well. A museum's use of space can inspire an architecture firm's site. Instead of looking like your competitors, you stand apart with an idea from another field.

How does the moodboard approach change by industry?

Every industry has its own visual habits, and a moodboard either follows or breaks them on purpose. Which one you choose depends on the brand's position. If visitors look for trust, familiar signals help. If they look for something different, an unexpected direction gets attention.

Consider a few sample scenarios. For a manufacturer, the moodboard usually centers on solidity, order and technical skill. Specifically, real plant and product photos convince far more than stock images there. A boutique café calls for warmth, texture and friendliness. In a law or consulting office, calm and readability lead.

On the other hand, sticking too closely to industry patterns makes your site hard to tell apart from competitors. That is why we suggest that at least one element on the board come from outside the industry. As a result, you balance familiarity with originality, and visitors remember you.

How many moodboard directions should you prepare?

Two or three distinct directions are enough for most projects. A single board leaves the client no real choice and reduces the meeting to a yes or no. More than five boards cause decision fatigue and keep every direction shallow.

The directions must truly differ. For instance, three shades of the same palette do not count as three directions. For example, one calm and bright board, one dark and strong board, and one warm and handmade board offer a real choice. Each can still be a different reading of the same mood words.

Also, give each direction a short name and a one-paragraph rationale. A name like "Quiet Studio" instead of "Option A" makes the conversation easier. Nielsen Norman Group also recommends separate boards for distinct concepts rather than squeezing conflicting ideas onto one.

How do you run the direction meeting with your client?

The goal of the meeting is not a beauty contest but finding the direction that best serves the goal. So before you show any board, briefly restate the brief and the mood words. Then the client looks at each board asking "which one tells our story best?" instead of "which one is prettier?"

We usually run the meeting in this order:

1. Sum up the goal and mood words in two minutes.
2. Present each board with its name and rationale.
3. Ask the client for one strength and one weakness per board.
4. Note the elements people liked most across boards.
5. Pick one main direction and at most one or two elements to borrow from the others.

Be careful with the last step. Taking a piece from every board produces a mix with no character. The main direction must stay clear. On the other hand, small borrowings, such as the photo tone from another board, usually work fine.

How do you collect and interpret feedback?

Client feedback is often emotional and brief: "it feels a bit cold" or "make it more vivid." These comments are valuable, but you cannot apply them directly. Your job is to translate them into design language. To do that, ask open follow-up questions.

For example, if you hear "cold," ask whether the colors, the photos or the spacing feel cold. Most of the time, the issue sits in one layer. So instead of throwing away the whole board, you warm up the photo tone and move on.

Keep feedback in writing. Add meeting notes next to the board and send the client a short summary. That summary prevents "but we agreed on this" debates a few weeks later. Also make sure every decision maker attends; a manager who joins late can send the whole process back to the start.

What are common moodboard mistakes?

The mistakes we see most often in the field are about process, not technique. The list below covers most of them.

• Starting the board without a brief.
• Choosing too many mood words and scattering the board.
• Pasting reference sites in whole.
• Picking a photo style the project cannot deliver.
• Approving the color group without checking contrast.
• Emailing the board with no explanation.
• Ignoring the mobile view entirely.

The last point matters a lot. Many visitors arrive on a phone. A wide landscape photo that looks striking on desktop can lose its meaning on a narrow screen. Therefore, adding at least one narrow screen sample to the board is a smart move. If you lean toward a clean, focused direction, our article on minimalist web design may also help.

What does a sample scenario with two directions look like?

This scenario is an example and does not describe a real client. A small architecture firm wants its new site to bring in quote requests. We set the mood words, in order, as "careful," "calm," "respectful of materials" and "approachable."

We named the first direction "Stone and Light." It uses an off-white background, dark charcoal text and a single sand-colored accent. We chose photos in natural light with close material details. For type, a thin serif heading pairs with a plain body font.

We called the second direction "Drawing Studio." This time, a fine grid texture sits on a white background, with icons that feel like technical drawings and a geometric typeface. The photos focus on hands and model details.

In the meeting, the firm chose the first direction but wanted to borrow the grid texture for the contact page. Next, we tested the sand accent as a text background. Because the contrast fell short, we decided to use the accent only on button borders.

What should your moodboard checklist include?

Before you send the board to the client, run it through the checklist below. If you cannot answer yes to an item, fill the gap first.

• Does the board carry a short note on the brief and the goal?
• Are four to five mood words written in ranked order?
• Is the color group split by role: background, text, main color, accent?
• Did you check text and background contrast?
• Do heading and body fonts appear in a real sentence?
• Does the board describe the photo style by light, framing and tone?
• Does every reference screenshot have a "what we take" note?
• Did you add at least one narrow screen sample?
• Does each direction have a name and a short rationale?

The list looks short, yet it answers most meeting questions in advance. Use it inside the team too. After the designer finishes the board, someone else should read the list item by item. Fresh eyes quickly catch gaps the author no longer sees. For example, a second person usually spots a missing photo note or an accent shown far too large.

Finally, keep the list in the project folder. Months after launch, when you add a new page, going back to the same list is the easiest way to keep the site consistent.

How do you turn the approved direction into a design system?

After approval, the moodboard has done its job and hands over to stricter deliverables. The first step turns the color group into exact codes and roles. Next, the second step sets the type scale, meaning heading and body sizes. The third step draws core components, such as buttons, cards and forms, in the chosen direction.

At this stage, most teams build a style library in a design tool such as Figma. We explain the process step by step in our Figma web design guide. Do not lose the board, though. It is the reference you return to whenever a design decision becomes contested.

Also show the client the first screen that combines the wireframe with the moodboard early. A single homepage section is enough. That way, you see how the direction holds up in a real layout and catch any big drift early.

How can you run the moodboard process with us?

At Talha Aslan and team, we start every web project with a brief and a moodboard phase. We define the mood words with you, prepare two or three distinct directions, and turn the chosen one into a style guide and then a working site. We build contrast, mobile and speed checks into the process from the start.

If you want to clarify and apply the visual direction of your site, we can set it up for you. To get a clear quote based on your scope, send a request through our web design services page. If you are redesigning an existing site, share your current brand material as well, so the quote reflects your real needs.