Introduction
Welcome back! In our last lesson, we deconstructed the work of successful creators like Oliur to understand how a strategic visual aesthetic and a well-structured product ecosystem work together. You learned that a strong brand isn't accidental; it's the result of deliberate choices about style (aesthetic) and business (ecosystem).
Today, you'll take the first major step in building your own brand by defining its visual direction. The learning outcome for this lesson is to create a mood board in Figma or Pinterest to define the visual direction for your brand.
A mood board is a visual collage of images, colors, typography, and textures that captures the "feel" or "vibe" you want to create. For someone who prefers systematic frameworks, think of it as the crucial bridge between abstract ideas ("I want my brand to feel clean and modern") and concrete design work. It’s a visual compass that will guide every design decision you make, from your website to your product mockups.
1. What is a Mood Board?
Before we start building, let's solidify our understanding of what a mood board is and what it should accomplish. It’s more than just a collection of pretty pictures; it’s a strategic tool.
How To Create a Mood Board in 5 Steps
To get a clear, concise definition, let's start with this article from Figma's own resource library.
Read the section titled 'What is a mood board?' to understand its role in the creative process.
As the article notes, a mood board brings together various design elements to set a style or concept. Here are a couple of examples of what a finished mood board can look like within Figma. Notice how they combine imagery, color, and typography to create a cohesive feeling.
2. Step 1: Start with Feelings, Not Visuals
The most effective way to begin—especially if you feel you're "not a creative person"—is to start with words. By defining the feeling you want your brand to evoke, you create a logical filter for your visual research.
How to Use Pinterest for Branding (When You Can't Afford a Designer)
This article provides an excellent framework for this text-first approach. While it mentions Pinterest, the core strategy applies to any tool.
Read the sections 'Start With Feelings, Not Fonts' and 'Questions to Guide Your Choices'. These will give you a systematic way to define your brand's core emotions.
Your Action: Define Your Brand Keywords
Now it's your turn. Open your Course Learning Journal and create a new entry for this lesson.
Based on the article, answer the following questions to generate 5-7 brand "feeling" words.
- How do you want your brand to feel? (e.g., calm, energetic, sophisticated?)
- If your brand were a person, what would they be like? (e.g., a helpful guide, a cool minimalist, a tech expert?)
- What would your brand look like if it were a room or a workspace?
Example Keywords: Minimal, Tech-focused, Clean, Calm, Precise, Systematic, Subtle.
These keywords will be your guide for the next step. If a potential image or color doesn't align with these words, you can confidently discard it.
3. Step 2 & 3: Gather Inspiration and Build Your Board
With your keywords defined, you're ready to start collecting visual assets. You have two main options for this process:
- Pinterest: Excellent for broad exploration and discovery. Its algorithm is great at suggesting related images. You can create a private board and "pin" anything that aligns with your keywords.
- Figma: The ideal tool for curating your final mood board. It gives you full control over the layout and allows you to start building a tangible design asset.
A great workflow is to use Pinterest, Behance, or even just Google Images for initial, broad gathering, and then bring your curated selections into Figma to build the final board.
The following video is a complete walkthrough of how to build a mood board from scratch directly in Figma, using free plugins and tools that are perfect for your budget-conscious approach.
How to Create a Moodboard in Figma - Figma Tutorial from Beginner to Advance 2023
Watch this tutorial from Franz Escolastico to see a professional designer's workflow for creating a mood board in Figma.
Follow along with the video. You don't need to replicate his 'Love Vegan' project exactly; instead, apply his techniques to your own brand concept using the keywords you just defined. Pay close attention to these key techniques: Setup (0:00 - 7:01): See how he sets up a simple frame and adds placeholder text. You can add your brand keywords here. Color Palette (7:01 - 12:12): He uses Coolors.co to generate a palette. This is a fantastic free tool. You can start with one of your inspiration images and use it to generate a palette. Typography (12:12 - 21:32): He explores Google Fonts to find free, high-quality fonts. This directly aligns with your goal of avoiding expensive subscriptions. Imagery (21:32 - 25:00): He uses the Unsplash plugin directly in Figma. This is incredibly efficient. Install the plugin and use your keywords to search for images. Icons & Keywords (25:00 - 30:27): Notice how he adds extra elements like icons and text keywords to make the mood board more descriptive.
Your Action: Create Your Mood Board in Figma
It's time to build. Create a new file in Figma named My Brand - Mood Board.
- Create a Frame: Make a large frame (e.g., 1920x1080px) to serve as your canvas.
- Add Keywords: Add your 5-7 brand keywords as text elements on the board.
- Gather Images (15-20): Using the Unsplash plugin, Pinterest, or other sources (like screenshots of Oliur's or Bog's sites), gather images that align with your keywords. Look for:
- Photography style: High-contrast black and white? Soft and airy?
- UI/Web Layouts: Examples of websites or apps with a layout you admire.
- Textures/Patterns: Subtle noise, gradients, geometric shapes.
- Workspace/Product shots: The kind of tech and environment that fits your brand.
- Curate & Arrange (8-12): Drag your collected images onto the canvas. Now, be ruthless. Remove any that don't perfectly fit. Arrange the remaining images in a balanced grid. This is about creating a cohesive collection, not just a folder of images.
- Extract a Color Palette: Pick one or two "hero" images that best represent your desired mood. Use the eyedropper tool in Figma or a tool like Coolors.co to pull 4-6 primary colors. Create small squares or circles on your board to display this palette.
- Identify Typography Styles: Look at the text in your inspiration images. Is it mostly serif or sans-serif? Bold and heavy, or light and thin? You don't need to pick the exact fonts yet, but make a note (e.g., "Clean sans-serif for body, elegant serif for headlines").
- Review and Refine: Look at your completed board. Does it feel like a unified, cohesive vision? Does it match the keywords you started with?
This entire process should take you about 30-40 minutes.
Conclusion
Congratulations! You have just completed one of the most important foundational steps in creating a brand. You've translated abstract feelings into a concrete visual plan.
Key Takeaways:
- Systematic Creativity: The mood boarding process isn't about waiting for inspiration; it's a system that starts with words (keywords), moves to broad collection (gathering), and finishes with focused curation (arranging in Figma).
- Your Visual Compass: The mood board you created is now your single source of truth for your brand's aesthetic. Whenever you're unsure about a design choice—"Should this button be blue or grey?"—you can refer back to your mood board.
- Foundation for Design: The elements on your board—colors, font styles, image treatments—are not just for inspiration. They are the raw materials we will use to build your brand's official color palette and typography system.
In our next lesson, we will do exactly that. We'll take the typographic inspiration from your mood board and learn how to select complementary serif and sans-serif font pairings using free resources like Google Fonts. You'll be one step closer to a complete and professional brand identity.