Lesson 4: Design A Website
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)