If you’ve ever started a home improvement project and looked at magazines or Pinterest for inspiration, then the concept of a moodboard is more familiar to you than you may realize. A moodboard is a collection of inspiration and custom design elements that designers present to clients in order to give them an idea of the design direction for their web design project. It’s definitely more complex than just an inspiration board, but it’s a great jumping off point for designers to cast their vision for the client and get a better understanding of the client’s needs.
Everything we do around here we do with a lot of intention and heart, including the moodboard itself. Our team put together a list of the common questions we get asked about moodboards and I did my best to tackle each of them from my perspective as a designer.
What are the sections/components within a moodboard?
Every moodboard is different because every client and every client’s needs are different; however, the basic structure of a moodboard tends to remain the same. There are four main sections of a moodboard:
The Foundation
- Logo
- Brand colors
- Accent colors
- Font choices
- Type hierarchy
- Button styles with hovers
- Sometimes patterns
The Framework
The Design Direction
- Custom icon ideas if needed
- Custom areas of the site
- Custom pieces of mobile ideas
Inspiration Pieces
- Example sites, styles and elements
- Examples of specific sections and industry trends
What’s your process for putting together a moodboard?
When I create a moodboard I like to start with what I know and get more in depth as I get farther down the line. I start with the logo the client gives us. Next, I pull in their established colors and expand to accent colors if needed. Next, I get the font choices and type hierarchy together as a good creative starting point.
Once I’ve landed on font combinations I like, I dive into the sitemap and content that our brand strategist has outlined. With all that information in mind, I start looking for inspiration, taking into account the client’s industry, client’s personality and the personality of their business. Once I’ve found some inspiration, I then work on the user journey and wireframe. The user journey is largely a collaboration between the designer and the brand strategist, which always makes for an awesome end product.
Next, I tackle the wireframe. The wireframe is based on the structure the brand strategists and the client come up with. I take that structure and add design and flow through the final product of a wireframe.
The custom elements are a much less structured process for me. I usually come up with ideas for design direction more organically and less organized. When an idea comes to mind while working through the wireframe, I run with it. The design elements influence the wireframe and the wireframe influences the design elements. Within the design direction, I pull in elements such as custom button styles and hover states, custom icons, illustrations, and/or patterns if applicable, custom banner area and H1 section, and custom mobile elements such as the hamburger navigation and mobile interactions.
After ironing out the custom pieces, I work on pulling together the elements I gained inspiration from and include those in the moodboard for the inspiration section. These inspiration pieces show example sites, styles, elements, and examples of specific sections and industry trends related to the client. This helps visually show why I made the decisions I did for the design direction.
Where does your inspiration come from?
I always begin with asking the client what sites and style they like. The styles I am drawn to may not be what the client likes or what they feel speaks to their business or organization. It’s always fun to hear the client’s thoughts on this. It makes for a great opportunity for more exploratory questions about what they want or need. Other than the client’s feedback, I browse places on the internet. For websites and branding, dribbble.com is an awesome place for inspiration. There are so many talented designers on there sharing their work.
Do you ever have more than one option for a custom piece? If so, how do you decide which one you’ll show to the client?
All the time! I usually have more than two options that I grapple with. Ultimately, I pick the one that has more design versatility and that I feel I can expand upon more for other design elements.
How do you decide which designed elements you’ll show on a moodboard?
We typically start with the homepage banner area and the H1 area. Those are the first things a user sees on a site and good starting places for design. I think of any homepage as telling a story for the client’s organization or business. When you tell a story you start in the beginning, not the middle or end. So, I always start with the banner and H1. There have been a handful of cases where I’ve designed different areas to show in the moodboard that the client was really focused on but that’s pretty rare.
How do you consider client input but also make sure your expertise as the designer shines through?
This is always a tricky one. You want to give the client the best possible product, but you also need to respect their opinions and feedback. Many times when a client has had input that isn’t the best practice, we will talk them through it and try to build upon that initial input to something that is good practice but still utilizes the input form the client. In some cases where clients are very adamant about their input, we will go ahead and show them what they asked for, but also show them what we suggest too. Then the choice is theirs as to which direction they want to go. Many people just need to be shown their idea/input fleshed out in a design to fully understand what the outcome and long-term effect of that idea will be. As a designer, I’m able to visualize so much before we design and have to remind myself that not all people are like that. Similarly, our brand strategist and SEO specialists are always working to guide the clients towards decision that will lead towards optimal results.
What happens when a client doesn’t love what you’ve shown them? How do you handle input?
As a designer you develop a thick skin. A large part of your job is to take constructive criticism. Receiving feedback not only makes you a better designer, but also allows you to give your clients the best possible product you can. Clients can have great ideas, you just have to be open to hearing them. It’s easy for designers to get caught up in trends in design; that is why it is important to be open to hearing what the client has to say about what you have created for them. At the end of the day, you may have created a great design, but it may not be what the client needs, and that's okay. All of the designers at Speak definitely have the attitude that meeting the client’s goal is our ultimate goal.
What would you say is the biggest advantage to utilizing a moodboard as part of the design process?
The biggest advantage to a moodboard is that it helps clients visual ideas and structure for their website. It also helps the designer ensure they haven’t missed the mark on the design direction before spending too much time on a full design. Ultimately it allows the designer to use the client’s time more wisely.
Let's Chat Web Design
Feeling inspired? Or are you realizing there is a lot more to web design than you thought? Either way, we want to help. Our expert designers will come alongside you to thoughtfully craft each part of your site. Let's build something amazing together.
Let's chat.