How to Create a Moodboard From Competitor Websites

A moodboard collects visual references in one place so a team can agree on a direction before designing. Building one from competitors' websites shows what's normal in your market, where everyone looks the same, and where you could stand out.

1. Choose your sites

• Direct competitors: four to six, including the market leader.
• Aspirational brands: companies, often in other industries, with the feel you want.
• Different approaches: include at least one site that does things very differently.

2. Capture what matters

• Full-page screenshots: in Chrome DevTools, press Ctrl + Shift + P and run "Capture full size screenshot".
• Details: crops of headers, buttons, product cards, footers.
• Type: Font Detector shows the font, size, weight and line height of any text you click. Note heading and body pairings. See building a typography moodboard.
• Color: Color Palette Extractor lists each site's most-used colors so you can add accurate swatches.
• Imagery: photo style, illustration, icons.
• Tone: a few headlines and button labels that show how each brand speaks.

3. Pick a tool

• Figma or FigJam: free plans, good for teams.
• Milanote or Miro: boards designed for collecting references.
• A secret Pinterest board: quick for gathering images.
• A shared slide deck works too.

4. Organize it

Group references by theme rather than by site: typography, color, layout, photography, components, voice. Patterns appear when you see five headers side by side.

5. Annotate

Add a short note to each reference: what works, what doesn't and why. "Clear price under the title" is more useful than an unexplained screenshot.

6. Find the gaps

• What does every competitor do? That's the baseline customers expect.
• Where do they all look alike? That's where you can be different.
• What do your aspirational sites do that no competitor does?

7. Turn it into direction

Finish with a short summary: three to five principles for your design, such as "bold type, lots of white space, real customer photos". That's what designers will work from.

Use references fairly

A moodboard is for inspiration and analysis. Keep it internal, and don't copy layouts, images or text directly. See borrowing a visual style legally and reverse-engineering a design system.