Creating a mood board is essential for setting the tone and direction of any design project. For UX and product design, it becomes a collaborative guide that aligns both the designer and stakeholders on a shared vision while staying focused on user needs and problem-solving. Here’s a step-by-step guide to building an effective mood board that centers on users and the project’s artistic direction.
Step 1: Conduct User Research
Before creating a mood board, ensure you understand the users thoroughly. Define personas based on research insights to shape an informed foundation for your design.
Step 2: Engage with Stakeholders
Gather input from stakeholders about brand expectations, style preferences, and emotional tone. Look out for key terms like “clean” or “professional,” which give clues about their design expectations.
Step 3: Competitive Analysis
Analyze competitors’ design elements, including colors, typography, and layout, to identify what works well and what doesn’t. This step helps you align your design with market standards while identifying unique opportunities.
Mood Board Creation Steps
Step 4: Define Mood Statements
Developing mood statements helps clarify how each user persona should feel when interacting with the design. Follow this simple structure for each persona:
- Noun (persona)
- Adjective (emotion)
- Verb (interaction trigger)
- Product/Service (the specific feature causing this reaction)
For instance, a mood statement for a shopping app might be: “Shopper (noun) feels delighted (adjective) as they discover (verb) new products in the Recommendations section (product/service).”
Step 5: Set the Mood
List the emotions that should resonate in the design based on your mood statements. The emotions from these statements should guide the overall feel of the mood board, ensuring alignment with user expectations.
Step 6: Determine the Style
Create a style guide by brainstorming a set of descriptive adjectives that capture the look and feel you’re aiming for. Refine this list to about four keywords that complement each other. These might include terms like “minimalist,” “vibrant,” or “sleek.”
Step 7: Establish Voice and Tone
Define the “personality” of your mood. Choose four adjectives that align with the emotions and style you’re aiming for. For instance, a style described as “fresh, friendly, and inviting” might have a tone that feels “approachable, casual, and optimistic.”
Step 8: Set the Design Direction
Use Simon Sinek’s “Golden Circle” framework (Why, How, What) to guide your design’s direction:
- Why: What’s the purpose and relevance of this design? Why are you passionate about it?
- How: How will you make the purpose come to life? Consider frameworks, styles, or design systems.
- What: What problem are you solving for the user and the business?
Combine these answers into a single sentence to clarify your direction.
Step 9: Define Language
Choose how to visually communicate the design:
- Photographic: Uses striking images to convey emotions.
- Illustrative: Applies artistic illustrations to create an emotional connection.
- Interactive: Involves engaging motion graphics to draw users in.
Building the Board
Tools
Use platforms like InVision for creating digital mood boards, which allow collaboration and easy organization of visual elements. Other options include Sketch, Photoshop, or even Pinterest for brainstorming.
Essential Elements to Include
- Fonts: Pick typefaces that align with the chosen style and mood.
- Colors: Select a color palette with specific emotions in mind.
- Interactions: Include interaction examples from sources like Dribbble, and collaborate with developers on feasible designs.
- Key States: Define how elements like buttons should look in various states (e.g., active, inactive, pressed).
- Icons: Find or design icons that match your overall theme.
- Photography/Illustration: Select visuals that align with the mood and style.
- Notes: Include your style keywords, tone, and voice to keep the board focused.
Inspiration Sources
Look beyond Google and Pinterest to maintain a current aesthetic. Use design-curated sites like Dribbble, Behance, Muzli, and Designspiration to find fresh and innovative ideas.
Final Thoughts
Keep your style keywords in view as you gather inspiration. Let these keywords guide your decisions rather than personal preferences alone. By grounding your design elements in research and stakeholder needs, you create a mood board that doesn’t just look good but also functions well and resonates with users.