Moodboard, vision board, inspiration board. You’ve probably heard one of these terms before, and perhaps also, that you “should” have one. In the context of web design, these terms all refer to the same thing.

So what the heck is a moodboard, why do you need one, and how exactly do you go about creating one?

In this post I’ll dive into all these questions to help you get started creating a moodboard for your website.

Still in the branding stage? Check out this post on creating a moodboard for your brand. After a bit of back and forth, I decided the process was different enough to warrant two separate posts.

5 steps how to create a website moodboard what do include

What is a website Moodboard?

In short, a moodboard helps to establish the style, and overall "mood" for your website. Every Squarespace website project I work on begins with defining your website goals, writing and gathering all of your content, and creating a moodboard with your goals, content, and ideal client in mind.

A good website moodboard contains things like other website layouts or elements, textures, colors, typography (fonts - use your own brand fonts whenever possible for consistency), iconography, and other imagery that relate to your brand and are chosen with your website in mind. The look and feel of your website should always follow the look and feel of your brand, but you may need some additional imagery or elements to bring your brand to life on the web.

While a brand moodboard should really show the direction of your brand “look,” a website moodboard will show more specific web design layouts and elements that can be used to display your content in a way that is consistent with your branding.

For example, you may choose to include a web layout with a lot of white (or negative space), if your brand also utilizes a lot of white space. Or you may choose to include an image of a web element that is used to divide one section from another.

Creating a moodboard isn’t just about creating a website you love, but one that your ideal client or customer will be drawn to as well. Knowing what kind of websites your ideal clients frequent can be very helpful in choosing web design styles that they will gravitate toward or be familiar with. This is not to say that you should seek to create a website that looks just like someone else's. Your unique content will dictate the overall look of your site, but it can be helpful to know your ideal clients’ preferences when looking for effective ways to display that content.

Your moodboard will become a guide during the web design phase. Make it a reference for how you’d like to display your content.

Why You Should Create a Moodboard Before Designing Your website

A moodboard helps you and your web designer see “eye-to-eye” on the desired aesthetic, and align the look and feel with your brand and your ideal clients or customers.

Creating a moodboard before beginning the design process is a good idea because it sets the tone for the entire project. Having examples of websites you like and specific layouts that you might like to see in your own website will help your web designer deliver visuals that are in line with your vision.

If you plan to design your website yourself, a moodboard can really help to get you inspired and give you more ideas on creative ways to display your content, and help you to keep your website on-brand.

How to Create Your website Moodboard

There are numerous methods to creating a moodboard and they are all valid. I ask my clients to create a private Pinterest board and share it with me. If you prefer to work in another program, or paste different elements together to create a sample page, I encourage you to follow your gut. Creating a moodboard should be a fun and creative process.

Here are the 5 Steps to Creating Your Website Moodboard:

1 Research

The purpose of your website is to attract your ideal clients and customers, and to keep them on your website as long as possible, so it makes sense that you would consider them first. Knowing who your ideal clients are, who they follow, what brands they buy from, and in general what appeals to them aesthetically will help you to create a moodboard that is relevant to them.

Assign 3-5 adjectives to guide the look and feel of your website moodboard. These words should apply to your ideal client or target audience. Write these words down somewhere. Put them down in a Google doc or in the description of your Pinterest board so you can refer to them when pulling your images together.

2 Gather

Whether you use Pinterest as the solo home for your moodboard or not, it is definitely a solid place to start. Create a new board devoted to pinning images, textures, typography, and other design elements that you like and that appeal to your ideal client or customer.

For each pin, edit the existing description or note text. Describe what aspect of the pinned image you like and what content it might be used for if applicable. If there are parts of the pinned image you do not like, make a note of this too.

While you can pin an entire web layout, it is important that you clarify in your notes what aspects you like. The goal is never to duplicate someone else’s website section by section.

For example, you might include an image of a web layout with a left-aligned logo and right-aligned primary navigation. The rest of the page may have no relevance to your website vision, so in this case you will just note the logo and main nav locations. Or you may include a web layout with some creative section divisions where the division appears diagonal instead of horizontal, but the rest of the page looks nothing like what you want. Again, just note the aspect that you like and you think could work on your site.

As far as web design goes, there are some tried and true ways of displaying content effectively and user best practices to consider. Web users are accustomed to certain functionality (like colored text being a link for example). For this reason it is advisable to keep your website functionality simple and easy to use.

It may seem that copy and pasting examples from other sites is a form of cheating. It’s not. You just have to learn how to “steal like an artist.”

“What to copy is a little bit trickier. Don’t just steal the style, steal the thinking behind the style. You don’t want to look like your heroes, you want to see like your heroes.”

Austin Kleon, Steal Like an Artist: 10 Things Nobody Told You About Being Creative

Don’t stop at only what comes up on Pinterest search. Virtually any image can be added to your moodboard, whether it lives on Pinterest, or another digital platform. If keeping your entire moodboard in Pinterest is important to you, you can create a new pin from the board overview and either add a link to another site, or upload your own images (like a screenshot of a web element you like).

3 Remove

Now it is time to pair down to the essentials. If you’ve got 5 web layouts on your board with left aligned logo and right aligned main navigation, you can safely eliminate 4 of them. Only keep what is necessary. It’s the bones of the web layouts and elements that matter most.

When you are done removing items from your moodboard, step back, zoom out, scroll, whatever you need to do, and make sure there is a cohesiveness to what remains. If anything sticks out, or appears to be a different style than the rest, this could translate to a non-cohesive look in your finished website.

For example, let's say you included an image of big bold icons for your homepage, but you also included some delicate, thinner type icons for your services page. Decide which is more in-line with your brand to keep and remove the other.

Your website moodboard should look somewhat cohesive even though you’re drawing inspiration from a variety of sources.

Go through the process of pairing down as many times as needed until you reach a completed board that has a consistent look and feel to your brand. Don’t just look at the colors, fonts, and textures. Go a level deeper and look at how content is presented to be sure it fits your brand. In some cases you may need to look at just the bones, and overlook the style that is applied.

4 Describe

If you haven’t already, go back through each item on your moodboard and make a few notes about it. Why did you include it? What do you like about it? Why might it appeal to your ideal client? Anything that you think might be relevant, make a note while it’s fresh in your mind.

5 Evaluate (Again)

Step back and get a big picture view of your moodboard. Take a look at the adjectives you started out with in step one and make sure that what you have fits those words.

If you are working with a designer, you’ll have the benefit of walking through the moodboard with them and clarifying anything if needed. For my clients, I create an additional refined moodboard to serve as inspiration during the design process. I represent this as a web layout that doesn’t apply to any specific page on their website, but includes enough design elements to give an overall idea of what a page might look like.

If you will be designing, you’ll perhaps want to take it a step further and create a sample web page layout that you can continue to refer to for inspiration throughout the website build process.

Have you created a moodboard for your website? I’d love to see it and hear about your process.

Need help creating your new online home? Reach out to schedule a free no-sales-pressure call or check out my Custom Squarespace Website packages and process.

Not quite ready for a custom site but you want to get crystal clear on your website goals and create intuitive and easy to use navigation in a snap?

Snag my Website Goals + Nav workbook for free! It is a step by step process for creating highly usable website navigation that is directly tied to your goals.