How to create a website mood board for your brand | Website Prep 4: Inspiration board in Pinterest

Do you judge a book by its cover? Whether we like it or not, the fact is that your website's fate will be decided almost instantly by the way that it looks. I'm here to help make sure that your website doesn't end up on a bad design list.

We're continuing our series about getting your small business ready to launch or refresh your website. We've gone through a lot of the branding work, and now we're going to move on to the visuals for your website, specifically by using an inspiration or a mood board. Now that you have an idea of the voice of your brand, you can start moving on to thinking about the imagery that you're going to use on your site. The best way to have this consistent throughout your entire site is to use an inspo board. Let's quickly talk about how important the visual aspect of your website really is.

It takes about 50 milliseconds, 0.05 seconds, for someone to form their very first initial impression of your website, whether they like it or not, whether they're going to stay or leave.

Do you think that's too fast? Take a look at these.

Which one of these do you think is more professional? Which one would you click on?

38% of people will stop engaging with a website if the layout or the content is unattractive.

Here's the big one: 75% of consumers admit to making judgements on a company's credibility based on its website design! Just like not having a website at all can give the false impression that you may be out of business, having a bad website design can tank your credibility.

Users spend an average of 5.94 seconds looking at the site's main image, so make it count. It should be consistent with your brand voice and tone and communicate the message of that page.

Now that you know how important visuals are to your website, we're going to head over to Pinterest and create our very own inspo board. You can do this type of thing in Canva or some other program just by using screenshots, but I really love doing this in Pinterest because it cuts out all the extra steps. You can keep all your visuals and pictures in one place, in addition to adding notes to every single pin. It just keeps you really clean and organized. Once you're ready to set up your final brand board for your business with actual logos, fonts, colors, and just a few select images, then I think something like Canva is a great choice and actually have a free template for that HERE. The main things we're going to be looking for on Pinterest to include in our inspo board, are: website layouts, general designs, icons, image styles... the visual elements that we want to incorporate into our website design.

You never want to directly copy another website design - unless you've paid for a specific template, of course - but you can absolutely draw inspiration from certain aspects of things like the style of their icons, the way the images are cropped color palettes, things like that.

*** NOTE: The rest of this post is the transcription of my tutorial video and won’t make as much sense without the video. I recommend following along with the video HERE. ***

All right, here we are on Pinterest. If you don't already, I recommend getting a business account. And that could be a whole separate video, but Pinterest is an amazingly underutilized marketing tool in my opinion. If you do already have a personal account and you don't use it very much, you can absolutely convert this to a business account, but if you have personal account that you're using a lot, or you have a bunch of pins on there that you don't want to lose, then you can just go ahead and set up a brand new business account.

You just want to make sure that you have your Pinterest account set up as a business account before you go through this process, because you're going to want to use that for marketing later on. Once you have your account set up, then you're going to want to go into it and make sure that you have a board set up to save these inspiration pins to. And obviously you can see, I have a whole bunch of boards here.

This is the one that we're going to use: Website design inspiration board. Call it whatever you want, keep it secret if you want. When you set up your board, you can go through and change any of the settings that you want. Keep it secret - here is that check box here and call it whatever you want. If you're keeping it secret, you don't really need to worry about any of these other board settings. These are more for public boards that you're going to be using for marketing.

If that is something that you would like another video on, let me know in the comments down below, and I can absolutely do a Pinterest marketing video at a later time. Basically these are just overall board settings and you can see that I have a ton of pins on here that I saved when I was working on my website redesign. One thing you can do is share this board. If you have other collaborators or colleagues or a web designer, if you are working with someone else (no idea who these people are, probably people that follow me on Pinterest, LOL) but you can either share via link via social, via email. There are all these ways that, even if it's a secret board, you can still share it and collaborate with other people. That's in your board settings.

The main way that you're going to want to find these images for inspiration is to go back to those adjectives that we figured out in your brand voice exercise.

If you didn't watch that video, you can do that HERE. But basically what this does is it's going to set the tone and the vibe for the board, and it's going to keep you on track and everyone on the same page. And you can actually go ahead and put those adjectives in the board description if you want, especially if you are sharing it. That could be something that you want to do. I didn't do that because it's just my own board, but I'd probably say "do as I say, not as I do." This right here in this description box is where you could go ahead and put those brand voice adjectives, and any other descriptions that can help keep everyone on the same page for your website design. And then it is a good place to refer to those as you're gathering your images.

If you're ready to go ahead and start grabbing these images, you're just going to come up here in the top-right into this search bar. You're going to start typing something like "website design", and you can use plus, or you can just type whatever you want, put your adjectives to pick one of your brand adjectives, like 'modern', for example. And then when you search for that, then what you want to do, see how it doesn't have any results here? That's because it's searching in "My Pins" right here. So you want to change this to "All Pins", and then you're going to start to see all of these results and you can scroll through and see which ones make sense for the look and feel that you want for your website. What I like to do is, right-click on one that I like, and this is going to open it in a new tab.

Say you like something about this image right here. I'm going to right-click on it, open it in a new tab and then I can see just this pin. What this does is it makes that make sure that Pinterest is not reloading this whole page every time if you hit the back button, so you don't lose the spot that you're scrolling through. When you are looking at one of these pins that you're interested in, if this is something that you like and you say, oh, that's something that I might like to do on my website. Make sure that you have the correct board checked here. It should default to the one that you were on most previously, but just double check that. And then you can go ahead and click "Save" to put it on that board.

Now what I'm going to go ahead and do is, and I should have done this earlier, but I'm going to make sure that I actually have this board, my website design inspiration board, open in another tab. Yes, I am super organized and I love to have so many tabs open! See here's that pin that we just had. And if I'd had this, this board open in another tab, I could have just hit the refresh button and that new pin would show up. The reason we're going to do this is right after you save this you're going to want to actually go in and open that pin. And now here's where you can add notes. This is going to be super key, especially if you're working with a team, but also for yourself, you're going to want to go in here and add a note as to what specifically you like or dislike about this image, because remember you can also put pictures or pins in here, things that you specifically do not want to use in your website.

So we're going to take a look at this pin and say, I really like the layout of this. I think it flows really well and that's something that I want to incorporate into my website. I'm going to add a note in here that says, "I like the layout and flow of this website design" done. Now you have a note in here, so when you go back later and you're looking at this pin, you're saying, why did I save this? I can't quite remember. Now you have a note. Then you can just hit this back button here in the top left and you have your board. I would keep your board as well in a separate tab. And then you're just going to continue this process.

As far as search terms that you're going to put up top here, "website design +", whatever your brand adjectives are, is really good. You can also try "typography +" your brand adjectives. And these are some really great ways to get inspiration. They're not specific to website design, but they will give you a good feel for what you like. And especially what you don't like as far as typography. These are some great ways to find things that you want to use or not use on your website. Another one that you can use is "icons +" the brand adjective. These can be very helpful when you're looking through something like Canva or any place else that you're going to make to get some icons for your website, looking at the style that you liked. Do you want them on a circle? Do you want them outlined? Do you like them colored in? All of those different types of things. Pinterest being a visual search engine is going to give you a great feel really quickly for what you like and what you don't like. You could try adding "graphic" before this, "graphic pattern +" the brand adjective that may give you a little more that's not actual fabric. So you can see how just trying a few of these.

If you have three to five brand adjectives here, say we're trying "vintage", you're going to get a much different look and feel. And again, if you wanted to try "website design + vintage", These are going to look much different than the modern websites.

It's really important that you have gone through the process step by step. You found your brand voice and you know what those adjectives are so that, you know, when you're going through this visual search process, you know what to type in up here in the search bar, so that you get the type of results that match the look and feel that your of your brand, that you're trying to bring to your website.

When you are on your board here, you can, depending on how many pins you have, you can actually even sort them and organize them. I only have 39 pins here, but if I wanted to, you can go through and click this organize button right here. Website design, Logo design. If I wanted to add a typography section, I can do that. So you can just come over here to add section type in website typography. click add.

Now I have a new section: Website typography. Now you can select which pins are going to go in here. So this is probably a typography one. This is the topography one. You can see how you can really quickly organize the look and feel of what you want to do. And then once these are ready to go in, click here to, move the pins here. And they are moved to website typography section, but they're still in this board. So see, I have a new section right here, website topography.

Take your time and enjoy this process. Creating your inspo board does not have to be a one-time thing. You can take your time, add to it, collaborate with others if you want, just make sure you have some fun with it. Be sure to come back next week for part five of this series, where we're going to get #allthethings organized for your website. If you'd like to get a jumpstart on getting your website launched, be sure to grab my free website prep checklist HERE.

Let me know in the comments, have you created your own website mood board?