How to Make a Moodboard in 7 Easy Steps
Posted: Sat Dec 07, 2024 4:45 am
A moodboard is a collection of references and other data that sets a certain style for your project. Designers, illustrators, photographers create moodboards to collect the concept of an idea in one place.
For example, a web designer needs to create a website for an online flower shop. He starts collecting examples of competitors' websites, selecting the design of similar projects. After choosing the best options, the designer goes deeper into the idea and selects: website color schemes, typography, and website elements. Only after that does he start working on creating a prototype.
How moodboards help when developing a website:
Set the style of the site
Speed up website creation with references
If you make custom websites, this will protect you from misunderstandings with the customer.
Content
Where to create a moodboard
You can create a mood board in Word, but it is better to use special services that solve this problem. Services are more convenient: they have built-in libraries of images and fonts.
Milanote
Miro
DesignFiles
Nice
Sampleboard
Moodboard
Choose the service you will work with and let's move on to the first step.
1. Determine the direction of your project
Mood boards can be literal and practical (with fonts, color schemes, and images) or they can be an exploration of tone and mood.
These two types can be done in parallel. On one board you indicate what colors, patterns and images you will use. And on the second - in what style the site will be created.
2. Gather existing material
Now that you have a direction for your mood board, add your brand values, positioning, any logos, design elements, and photos. These may not make it into the final mood board, but they will help you get started.
3. Add images
The images you choose to include in your mood board can have a big impact on the look of your site. They'll help determine things like tone, framing, style, and color scheme.
If you can't think of any sites that you liked, you can find examples on Dribbble , Behance and Designspiration . Here, different designers share their work, which can be sorted by project type, color scheme and other important parameters.
Website for selecting references for web design
The popular Behance website, where we found examples of web design. The advantage of using such sites for references is that designers publish their work there, where they use the latest trends. This means that your site will be relevant for a long time.
Don't worry if your board is a mess, we'll fix that later, but for now, add as many ideas as you can.
4. Add animation examples
Animation on websites can be completely different: from the simplest, which is practically invisible to the user, to complex with a wow effect, such as parallax.
This will broaden your understanding of what kind of animations a website needs, and you will then adjust the design to them.
5. Add colors and fonts
Color can be a great way to express certain ivory coast phone number library feelings and personality. For example, a drugstore website might be better designed in light colors, while a nightclub page might be designed in dark and bright colors. But for each of these sites, there will be one or two colors that will show the individuality of the particular site.
The Kuler service will help you find colors that complement your brand. Another life hack: if such a color is already on your moodboard, analyze the references you added and find a suitable color.
Selecting a color scheme for a website
And for font selection, use the design site Typewolf . It's a great way to explore different font combinations and how they interact with each other.
Selecting fonts for a website
6. Time to tidy up
Once you have collected all your ideas in one place, the next step is to arrange them to create the perfect composition.
This process can take some time, and it can often feel like you have no idea what the mood board will look like. You'll likely have more material than you need, and it may look disjointed. That's okay!
Start by examining composition and introducing hierarchy. Place a key element, such as a logo, to anchor your board, and vary the size and position of other elements to show their importance and relationship to each other.
7. Describe your thoughts
If you're a visual thinker, a mood board is an invaluable tool for conveying the look and feel of your project in a way that words sometimes can't. But for a client or their designers, it's important to include a description of your thoughts. This will help explain your ideas and keep everything in context. You don't have to go into detail - just write down in a few words what you wanted to convey with a particular image.
And it's done!
Moodboard for website creation
The moodboard above was created using Milanote. This is roughly what your board should look like.
Now that your reference board is ready and you have a visual idea of what the design will look like, it's time to start creating your website.
For example, a web designer needs to create a website for an online flower shop. He starts collecting examples of competitors' websites, selecting the design of similar projects. After choosing the best options, the designer goes deeper into the idea and selects: website color schemes, typography, and website elements. Only after that does he start working on creating a prototype.
How moodboards help when developing a website:
Set the style of the site
Speed up website creation with references
If you make custom websites, this will protect you from misunderstandings with the customer.
Content
Where to create a moodboard
You can create a mood board in Word, but it is better to use special services that solve this problem. Services are more convenient: they have built-in libraries of images and fonts.
Milanote
Miro
DesignFiles
Nice
Sampleboard
Moodboard
Choose the service you will work with and let's move on to the first step.
1. Determine the direction of your project
Mood boards can be literal and practical (with fonts, color schemes, and images) or they can be an exploration of tone and mood.
These two types can be done in parallel. On one board you indicate what colors, patterns and images you will use. And on the second - in what style the site will be created.
2. Gather existing material
Now that you have a direction for your mood board, add your brand values, positioning, any logos, design elements, and photos. These may not make it into the final mood board, but they will help you get started.
3. Add images
The images you choose to include in your mood board can have a big impact on the look of your site. They'll help determine things like tone, framing, style, and color scheme.
If you can't think of any sites that you liked, you can find examples on Dribbble , Behance and Designspiration . Here, different designers share their work, which can be sorted by project type, color scheme and other important parameters.
Website for selecting references for web design
The popular Behance website, where we found examples of web design. The advantage of using such sites for references is that designers publish their work there, where they use the latest trends. This means that your site will be relevant for a long time.
Don't worry if your board is a mess, we'll fix that later, but for now, add as many ideas as you can.
4. Add animation examples
Animation on websites can be completely different: from the simplest, which is practically invisible to the user, to complex with a wow effect, such as parallax.
This will broaden your understanding of what kind of animations a website needs, and you will then adjust the design to them.
5. Add colors and fonts
Color can be a great way to express certain ivory coast phone number library feelings and personality. For example, a drugstore website might be better designed in light colors, while a nightclub page might be designed in dark and bright colors. But for each of these sites, there will be one or two colors that will show the individuality of the particular site.
The Kuler service will help you find colors that complement your brand. Another life hack: if such a color is already on your moodboard, analyze the references you added and find a suitable color.
Selecting a color scheme for a website
And for font selection, use the design site Typewolf . It's a great way to explore different font combinations and how they interact with each other.
Selecting fonts for a website
6. Time to tidy up
Once you have collected all your ideas in one place, the next step is to arrange them to create the perfect composition.
This process can take some time, and it can often feel like you have no idea what the mood board will look like. You'll likely have more material than you need, and it may look disjointed. That's okay!
Start by examining composition and introducing hierarchy. Place a key element, such as a logo, to anchor your board, and vary the size and position of other elements to show their importance and relationship to each other.
7. Describe your thoughts
If you're a visual thinker, a mood board is an invaluable tool for conveying the look and feel of your project in a way that words sometimes can't. But for a client or their designers, it's important to include a description of your thoughts. This will help explain your ideas and keep everything in context. You don't have to go into detail - just write down in a few words what you wanted to convey with a particular image.
And it's done!
Moodboard for website creation
The moodboard above was created using Milanote. This is roughly what your board should look like.
Now that your reference board is ready and you have a visual idea of what the design will look like, it's time to start creating your website.