Creating a website mood board helps keep any site build on track. Whether you are building your own website or have the help of a designer, a mood board is a great first step and will start your journey to creating a site that you’re in love with!
Designing a website or brand starts with you. Yes, your brand needs to resonate with your ideal clients but YOU need to love it in order to shout loud about your business. I think we’ve all suffered from website shame at some point! If you have that sinking feeling every time someone asks for your website address or you hesitate to reply to a job posting on social media then I’m talking to you.
Frankly, anyone can suffer from website shame, even designers! Many people dive in and just start creating something, a logo, a website, social media graphics, whatever…but without a visual direction to keep everything together, things can often fall apart at the seams.
This is why I always recommend a mood board for my clients and why you should build one even if you’re working on the website yourself.
So, let’s get to it. Follow my step by step guide on creating a brand or website mood board below.
Step 1 – Understand the types of design you love
To design a website that you love, you need to understand the types of design that you like. Will your brand be bold or softer and more feminine? Maybe your brand should be clean and highly professional, maybe it will be friendly or modern and chic. If you’re not sure then a good place to start is with words – check out our recent blog on choosing tone words to help you define your brand and website style. Once you have 5 or 6 adjectives to describe your brand and how your dream clients should feel when they come across it then you can start with translating that to something visual.
Start by asking yourself a few questions:
- What patterns are you drawn to? Do you love the softness of watercolour or do you find it wishy-washy? Do you love geometric patterns or do you find them too corporate?
- What colours are you drawn to? Are they summery soft and cool tones or warm bold autumn tones?
- What are your font preferences? Do you like traditional serif fonts, decorative, quirkey or modern clean fonts? (a combination is great for creating contrast)
Step 2 – Research for your brand mood board
Now that you’ve had a think about what you like and are drawn to, head on over to Google and search for some brands. Make a list of at least 5 websites for brands you connect with. Ask yourself:
- What do you love about them?
- What do you not like about them?
- What do they have in common?
- What stands out to you about the design (font combinations, colours and images)?
- How do they make you feel?
- Does this align with how you want your clients to feel about your brand?
Did you pick some brand tone words in step one? Look back at what you picked, would you change anything?
Step 3 – Finding images for your website mood board
Now we’re going to get clear on our visual brand by identifying images, styles, colours and fonts you love.
Pinterest is an amazing resource for this but it can be a bit overwhelming and it’s easy to get distracted. To stop you spending all day clicking around on Pinterest remember to stay focused on the task. Have your brand tone words in front of you and remember to think about your ideal client – it’s not the time to be pinning cookie recipes and cool things you can make!
1. Create a Pinterest account or log in
2. Click on ‘My Profile’
3. Click on ‘Boards’ and create a new secret board by clicking the red plus icon in the top left
4. Name your board with your tone words – this helps keep them at the top of your mind
5. Make sure to click Yes to make the board secret
6. Write a short description of what you do, who for and how it benefits them
7. You’re ready to start pinning!!!!
Here we’re going to pin everything and anything that resonates with your style and your tone words.
The aim is to get a big selection of images and graphics that we can whittle down afterwards. Once you’ve pinned all these images and can view them all together it’ll be more obvious which ones are true to your brand and which ones aren’t.
Let’s begin!
Start searching using combinations of your brand tone words and words that will bring you great visuals, things like ‘design’, ‘branding’, ‘décor’ and ‘style’. So you might search for ‘approachable branding’ or ‘sophisticated branding’, ‘bold brands’. You may also want to identify places or activities that match your tone words, ‘outdoorsy style’, ‘wilderness adventure’, ‘modern office spaces’.
Pin anything that resonates with you. This should include images, logos, graphics including fonts, patterns or icons.
If you find pins that are just perfect you can click on them and you’ll find related pins further down the page. This can be a great way to find more images that really resonate.
Step 4 – Refining your Mood Board Image Selection
Once you have at least 30 pins you’re ready to take a look at the board and begin stripping out anything that doesn’t work.
Make sure each image on your board relates to one of your tone words, remove any that don’t match or don’t feel right.
Are there any tone words not represented by your images? Go back and do a little more pinning to get this covered. If you can’t find images on Pinterest for any of your words then you can look elsewhere to find some.
Here are some stock image sites you can use to find more:
You can download these images and upload them as pins on your board.
Once you’ve completed these steps you should have around 20 images on your board and each of your tone words should be represented.
Step 5 – Create your mood board
Now you’re armed with everything you need to create a mood board for your website or brand. Your mood board will include colours, fonts and images that represent how people should feel when they encounter you. You may also include textures or patterns.
Here are a couple of website mood board examples:
These boards are created using grids in Canva, there are loads of grids to choose from so you can pick one or combine a couple to get a layout that you like. You may also create a collage of elements without a grid – there are no rules here!
Pick 5-6 images and patterns that really sum up the feel of your website and save them so you can import them into Canva. Once they’re uploaded you’ll be able to add them to your grid or layout. If you have a logo already then include that too.
You can also add shapes to place your colours on the board. Using the Canva colour picker will give you the option to pick colours from your images but if that’s a bit too limited you’ll get more control by using a tool like color.adobe.com.
Once you have your website mood board ready you can start creating a website with a cohesive feel that you (and your ideal clients) love! Thanks for reading and we hope this post will help you create better websites that engage your perfect people! Interested in working together? Find out about our Website Design Experiences and One Day Website packages and then just get in touch to chat with us about your project
