Skip to Content

Use a Mood Board to Nail Your New WordPress Theme

This post may contain affiliate links which means I make a commission if you shop through my links. Disclosure Policy

I have changed my WordPress theme many times over the years (from Brunch Pro  to the Refined Theme by Restored316 to the Sprinkle Pro theme and a few others then full circle back to Brunch Pro – call me fickle 😉 ).

Anyone who has changed their theme on a WordPress blog knows that it is not a seamless process.

Especially when you do it live.

Typically, I jump in head first.

Without much planning, I hit the switch and then work like mad over the next 24 hours to get things just right.

It is my impulsive side.

More Blogging Tips You Might Like

But the last few times I decided to take a different approach.

After all, my goal is to become more intentional with my time – including changing my WordPress theme.

So, my first step was to create a mood board for my new WordPress design.

And, if you are thinking of changing your theme, or just sprucing up your current one then I think you should create a mood board, too.

This is why.

Why You Should Create a Mood Board for Your Website Redesign

Creating a mood board for your website redesign will allow you to

  • Get a feel for the overall look
  • Decide on your fonts and colors
  • Collect and create graphics to use throughout your site
  • Develop a brand around the look that you choose.

Intrigued?

How to Create a Mood Board for Your Website

Before I jump into the “why”, let's cover the basics of “how”.

I never created a mood board for my past projects because I would over think the process.

Maybe I was looking for just the right app or platform to use – I don't know.

But, all you really need is a place to collect a bunch of digital assets.

Some options include:

  • a Google doc (or Word doc, or Pages doc),
  • a photo album in Google Photos or Dropbox,
  • a secret board on Pinterest,
  • or just a plain old folder on your computer

Certainly, you can use an app on your iPad or iPhone like Morpholio but I usually have photos and color codes, etc on my laptop, so it makes more sense for me to create my mood board on my computer.

Recommended Blogging Resources

Add Things That You Can Use to Your Mood Board

In interior design, a mood board is about inspiration.

But for a website project – creating a board purely for inspiration seems a little impractical to me.

I would rather use the mood board to collect digital assets that I can actually use in my website project.

What this actually means is that I should have the rights to use the digital assets, or should be able to buy them at some point in the future (like stock photos, for example).

Places to Get Digital Assets for Your Website Project

Digital assets can come from all sorts of sources – but you need to acquire the licenses for anything you did not create yourself.

You can use photos that you take yourself, although you may need model and property releases (I am not a lawyer so I don't know the official rules on all of this).

I subscribe to stock photo services that offer generous licenses including

Next you can …

Use Your Mood Board to Design the Look of Your Website

In my browser, I opened up the demo site for the WordPress theme I am switching to.

Using my mood board, I opened some of the photos in Preview on my Mac and placed these windows over different parts of the theme demo.

This gave me an idea of which photos I might want to use in the different locations and how they all will look together.

It also helped me to plan the layout for my future homepage.

By this time,

You Will See a Color Scheme Emerge

By placing all the photos and patterns that you like on your mood board, you should start to see a color scheme begin to form.

The idea is to capture this color scheme to use throughout your website for links, accent colors, and graphics.

You can use a Mac App like ColorSnapper 2 to capture the colors and grab the hex color numbers from your favorite photo – or just use the Mac color picker that is already on your computer.

Then add the colors to your mood board and use a website color cheat sheet to have the hex numbers handy whenever you need them.

Don't Forget To Choose Your Fonts

To create a cohesive brand, you will also want to use some standard fonts when you create graphics for your website.

You can grab some beautiful handwriting fonts at Creative Market, or use a few from those available on sites like PicMonkey.

Add some words using these fonts to your mood board as well.

Add Some “Default” Graphics to Your Mood Board

I think that you will agree that not every post on your blog is pinworthy.

But, it is a good idea to have a pinnable image, regardless.

So, find a neutral background pattern in your colors and add it to your mood board.

You can this image as a fallback when you don't have a stock photo for a post.

Use Your Mood Board to Create Your Brand

As your color scheme, font style, and standard images start to gel – you can incorporate your color scheme throughout your website AND your social media profiles.

For example,

  • on food blogs, you might add dishes or linens to your recipe photos that sport your website colors.
  • you can take Instagram photos of things that are consistent with your brand – or add a color overlay
  • the profile photos for all your social media platforms can incorporate your colors
  • seriously, the possibilities are endless – if you know what to look for.

And that is what a mood board for your website does.

How Do You Plan for a WordPress Theme Change?

If you have ever changed your WordPress clothes, what did you do to plan for the switch? Share your tips in the comments below.

Find more WordPress tutorials here.

Pin this article to your favorite board on Pinterest to refer to later.

Use a mood board to inspire your website redesign project.

More WordPress Tips

Amazon Prime Student will save you money and offers a great value at any time of year. It is a perfect graduation gift for new high school grads.
Previous
Amazon Prime Student: Get 50% Off of Amazon Prime
This recipe for homemade strawberry yogurt popsicles is so easy to make. Your family will love this healthy and refreshing summer treat.
Next
Strawberry Yogurt Popsicles - A Healthy Summer Treat

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Janet Barclay

Monday 21st of August 2017

I created a secret Pinterest board to collect ideas. When I had a good idea of what I wanted, I used PicMonkey to create a style guide, consisting of my chosen background image, colors, and fonts. I sent that to my graphic designer so she could refer to it when creating my new logo.

Neena Nandagopal

Tuesday 22nd of August 2017

Hi Janet, That is such a great idea! Whether you work with a designer or create your own - a style guide or a template can definitely save time. Thanks for sharing. :-)

Bren Pace

Tuesday 16th of May 2017

Hey Neena! I've heard many great things about mood boards. I, personally, have never used one. I normally jump right in with install and setup and then tweak. However, I also have all these colors and fonts flowing through my head. At least, I have a mental vision of what I want.

I might have to try a mood board at some time in the future. Thanks for a great article on how to set up one!

B

Neena Nandagopal

Thursday 18th of May 2017

Hi Bren, I am with you on the jumping right in, which is what I usually do, too. But for this redesign, I am so happy that I used a mood board (in my case I used a folder filled with my digital assets and an Evernote note outlining my colors, fonts, website sections, and a few key photos). My goal was to make the switch time as minimal as possible (since I was changing themes live). It really worked like a charm. Things went quickly and smoothly and I must say that I am happy with the end result. I still have a few tweaks left to do - but the bulk of the work is done. :-)