Mood Boards

Design a Mood Board

After you’ve decided what type of website you’d like to design, practice creating a mood board or style tile to start developing the visual identity for your website.

The Figma file includes a template that you can work off of. Feel free to adjust the layout of the images. Mood boards are flexible; you can rearrange the template as you wish.

A mood board can include elements such as:

• Images (think: tone of images, editing styles, etc.)
• Colors
• Fonts
• Graphics (think: illustrations and icons AND what style etc.)
• Patterns & Textures

A style tile can include all of the elements above but will go more into depth on the details and how the visual will actually be applied into the web design – whereas mood boards look more like collages. They may include typography, button styles, or a complete color palette.

Read more about style tiles here.

Style Tile Examples

Source: Dribbble – Jen Bancino (Style Tile)

Source: Dribbble – Laura Merriman (Style Tile)

Mood Board Examples

Source: Dribbble – Chris May Sikora (Mood Board)

Source: Dribbble – Chris May Sikora (Mood Board)

Tip: Start with the desired style/tone of your website

Before diving into the visuals, it might help to begin with some adjectives to describe the desired style or tone of your website. You can write these down on your mood board, and keep them in mind as you search for visual inspiration.

Source: UX Design – Paola Ascanio

Source: Medium – Rashida Haji

Helpful Links

• How to Make a Moodboard for a Website (Video)
• Placing Images in Figma (Video)