Imagine you’re building a house. The mood board is your inspiration, the style board defines the look and feel, and the reference board gathers existing solutions to learn from. If you mix them all together, you get chaos.
But if you separate them, your design becomes clear, stylish, and logical. Let’s break it down.
Mood Board – Emotions and Atmosphere
💡 When: At the very beginning, when you need to set the right vibe.
🎯 Why: It captures the feeling of the product—should it be energetic, calm, or futuristic?
🔹 What’s included: Photos, textures, colors, fonts, associations, even movie stills.
👉 Important! This is not UI design yet. It’s just pure inspiration.
🔮 AI tools:
- Midjourney, DALL·E – generate conceptual visuals.
- Pinterest, Milanote, PureRef – help collect references.
- ChatGPT – can generate a mood description based on keywords.
Style Board – Defining the Look
💡 When: After the mood board, before UI design starts.
🎯 Why: It defines the exact visual principles.
🔹 What’s included:
✅ Color palette
✅ UI elements
✅ Font combinations
✅ Icons, illustrations, patterns
✅ Animation principles
👉 Important! Unlike the mood board, this is about specific design choices.
🎨 AI tools:
- Khroma – generates color palettes.
- Fontjoy, Typescale – help with font pairings.
- Uizard, Galileo AI – create UI components from descriptions.
Reference Board – Learn from the Best
💡 When: During UX/UI development.
🎯 Why: To collect best practices for interfaces, interactions, and animations.
🔹 What’s included:
📌 Screenshots and links to successful UI solutions
📌 Competitor analysis
📌 Best practices for buttons, cards, and animations
👉 Important! This is not about copying—it’s about studying what works.
🛠 AI tools:
- UXDatabase, Mobbin, Pageflows – collections of real UI/UX solutions.
- Figma Community, Dribbble, Behance – sources for UI inspiration.
- Runway ML – AI-generated animations.
Why Separate These Boards?
🔹 Mood board sets the emotions.
🔹 Style board locks in the visuals.
🔹 Reference board shows proven solutions.
👉 If you mix them up, you’ll get a mess.
👉 If you separate them, you’ll have a structured, stylish, and logical design.
💡 Great UX/UI design is not just about pretty buttons. It’s about strategy, emotions, and understanding your audience.
Ready to level up your design? Go for it—your project is on the way to greatness! 🚀