Using A Mood Board To Style Your Website
When you’re building your website it’s really tempting to dive right in and start by making it pretty. Colors! Fonts! More colors! But your site will start looking chaotic really quickly if you’re not careful with your web design style. In my experience, the styling is the most fun part and also the most overwhelming part of building a new website.
That’s why I make a Mood Board for every website I design. After I identify what content needs to go on the site, I start looking for visual inspiration, let my creative juices flow, and collage everything together onto the Mood Board.
The Mood Board creation process keeps you true to your visual inspiration. It’s a tool to ground your site’s visuals and streamline your web styling process. Here’s the steps I follow to create my Mood Boards:
1. Gather photos to inform your vibe.
Of course the dream scenario here is beautiful, high res, on-brand photos that a photographer captured for your business website… But that is rarely the reality for many new businesses!
If you have your own professional photos, pull them onto your Mood Board. If you don’t, you could pull a few photos from your phone or browse a stock photo site like Unsplash. I start almost all of my Mood Boards by creating a Collection on Unsplash to help me whittle down exactly what style I want for the new site.
Regardless of where you find photos, make sure they are licensed for use on your website or that you purchase the rights to photos that aren't licensed for reuse.
To get started on your Mood Board, pick about 6 photos that would look nice together when added to your site. (You’ll come back to these photos later when you’re ready to start building!)
2. Choose 1-2 fonts to match your vibe.
There are an insane number of fonts that you can choose to use on your site. And there are a head-spinning number of factors to consider when choosing a font for your website. To keep things simple, I turn to a site like Google Fonts and identify a san-serif font for my website’s body copy. Sometimes, I choose a different font, a secondary option, to use as the headline copy on my website. It’s important to limit yourself to 2 fonts, otherwise your site will look chaotic and unprofessional.
I like Google Fonts because they are supported on Squarespace, and on a lot of email marketing platforms. This means you’ll be able to have brand consistency throughout your communication channels - another trick to looking professional online!
Although it may seem obvious, it is important to note that your fonts need to be easy for web users to read on a screen. You want to make sure they are legible when they’re small and large, on phones or laptops, and always with high contrast between the font color and the background color on which it is displayed.
3. Identify your “logo”
Let me just start by saying that I’m using the word “logo” loosely. Technically, a logo is a unique icon, created specifically for your business by a brand designer who researches your audience, your offerings, and your values before creating a completely new graphic concept to help identify your business. This is another example of a dream scenario that is not always feasible for a new business... And luckily, I’ve found 2 easy ways to launch your website with something that still looks good!
Either pay for an icon that fits your vibe using a platform like Noun Project, or create a typographic logo by typing the full title or initials of your business using the fonts you choose in the previous step. Either option will allow you to move forward with launching your site, and you can always iterate later!
4. Choose your website color palette
Squarespace allows you to upload 5 custom colors and it does a lot of the back-end configuration to display those colors throughout your website. Squarespace labels their 5 custom colors lightest, light, bright, dark, darkest. The best way to not get overwhelmed in this step is to stick to 5 colors, make sure they look nice together, and make sure you’re varying the intensity of the colors so that the “lightest” color would be able to be clearly visible on the “darkest” color background.
And I find it easiest to use hex codes for these colors, since hex codes can be pasted directly into most web building platforms. Hex codes are a 6-digit string of numbers followed by the pound/hashtag sign. Identify your colors, pull out the hex codes, and pop them onto your Mood Board so you can see it all come together.
Once you pull all those pieces onto your Mood Board, the “vibe” for your site will start to solidify. Now that you’ve got a completed Mood Board, you can refer back to as you begin building the site to ensure your site style stays clean and professional.
Identify the “vibe” for your site before you start building it.
Enter your email below and I’ll send you my Mood Board template!
