How To Create An Inspiration Board For Your Website

Tutorials, Web Design, Website Planning

If you’ve been following along these past few articles, then it’s safe to say that your online home is beginning to materialize as you now have a solid foundation to bring your vision to life.

But you still need to infuse YOU into your website and by that I don’t mean throwing up 20 selfies of you standing in front of different bathroom mirrors or pictures of you snuggling with your furry kids. I’m talking about gathering inspiration that reflects your style and gives your visitors the warm fuzzies. Yes, an inspiration board friends!

This is a crucial step in designing a website that new folk neglect and you might be tempted to jump right in and start creating logo’s and choosing colors and fonts but that is going to be a poor use of time.

I’ll tell you why in a minute but first, I’ve created some easy to use, mood board templates for you to use with this exercise.

 

DOWNLOAD THEM HERE

Inspiration Board Templates for your website
Inspiration Board Templates for your website

Why you need an inspiration board.

An inspiration board (aka. mood board, vision board) is a casual way to set your brand’s visual direction. Nothing is set in stone here, it’s simply a tool to visually inspire the design process and give you a broad view of your brand’s style.

You might be thinking you already know how you want your brand to look, but in a world where we’re subjected to hundreds of gorgeous visuals daily not to mention the fact that there are literally an unlimited amount of design options, it’s important to set your focus early or run the risk of forming your identity around other people’s brands. Don’t do that!

THE GOAL? To create a cohesive expression that illustrates the aesthetic and feeling you want for your brand that will give you a starting point from which to start the actual design process.

Now that we’re on the same page about the importance of an Inspiration Board, I’m going to show you exactly how to create one in 5 easy steps.

We’ll be using Pinterest to create the Inspiration Board so, if you don’t have an account yet (where have you been!) go here and sign up for one.

You might be thinking you already know how you want your brand to look, but in a world where we’re subjected to hundreds of gorgeous visuals daily not to mention the fact that there are literally an unlimited amount of design options, it’s important to set your focus early or run the risk of forming your identity around other people’s brands - Please, don’t do that!

Step One – Focus Save & Exit

Before you go out and start pinning like crazy it’s good to have some word swag up your sleeve to keep you focused on the task at hand because it can be quite hard to find a starting point when you get to step two. I call this list of words my “Vibes Guide” because that’s exactly what they do; they keep you focused on the vibe you want to maintain through the entire design process & beyond. Commit your vibe guides to memory and go so far as to incorporate them into your inspiration board (see example at Step Five).

I’m providing a list of words below for you to choose from but don’t feel limited to just this list. If none of these words feel right, then choose one and plug it into Thesaurus to find something similar that really floats your boat.

So get a pen and paper handy, grab your comfort drink of choice and answer these 2 questions.

From the list below, choose 3 words that sum up how you want your website to look.

Consistent Fresh Objective Organized Neutral
Editorial Structured Sleek Playful Uniform
Light Whimsical Bright Open Minimal
Intelligent Subtle Modern Clean Witty
Quirky Crisp Fun Earthy Glamorous
Organic Natural Lively Flashy Breezy
Festive Calm Rich Cool Vibrant
Mellow Strong Peaceful Bold Colorful
Graphic Curvy Energetic Electric Scattered
Contained Rigid Strong Friendly Inviting
Cheerful Welcoming Simple Warm Uneven
Faded Flat Plain Classy Photographic
Mysterious Nostalgic Typographic Dark Boxed
Artistic Rounded Contained  Clean  Vibrant

Now, choose 3 words that sum up how you want your users to feel when they visit your site.

Alive Excited Loved Driven Forgiven
Enthused Kind Lively Lucky Motivated
Relieved Satisfied Balanced Certain Valiant
Victorious Wise Zealous Natural Nurtured
Optimistic Outstanding Positive Powerful Proud
Realistic Relaxed Reliable Generous Grateful
Gratified Happy Heroic Honest Hopeful
Inquisitive Inspired Instinctive Intuitive Joyful
Appreciated Brilliant Awestruck Bold Cheerful
Comical Compassionate Content Creative Delighted
Elated  Positive  Fascinated  Brave  Challenged

It probably goes without saying, but just to be super clear, the words you settle on should align with each other for example; you wouldn’t pair “organized” with “scattered” or “electric” with “relaxed” or “faded” with “vibrant”. You see what I mean?

And finally, if you finish up with more than 6 words you need to get more focused and cut that list down. Trying to work with and embody too many words has the potential to dilute the overall style you’re going for.

Step Two – Gather

You can literally gather inspiration from anywhere ie; magazines, color chips from your local paint shop, textures from your craft box or out in nature – you can pretty much pull inspiration from all around you. However, for the sake of taking action, we’ll be looking to Pinterest for inspiration.

HERE’S HOW //

  • Log into your Pinterest account and create a new board.
  • Pin to your board relevant images that you feel are a true representation of your Vibes Guide.
  • Include any other graphics or images you feel naturally drawn to. They don’t all need to have a rhyme or reason. Just go with what you feel drawn to.
  • Plug your words into the Pinterest search bar and select a category from the suggestions that show up below the search bar.

Pinterest search by and category suggestions

PRO TIP //
The more images you pin, the better. Pinning lots of images is helpful as it helps you to see any significant themes that might otherwise go unnoticed.

HERE’S AN EXAMPLE OF HOW YOUR WORDS HELP TO GATHER INSPIRATION

One of my clients, Kristi, chose the words romantic, playful and classic. She pinned a total of 43 pins to express these words visually.

Follow Kristi’s board Website Inspiration. on Pinterest.

In this inspiration board the words motivated, positive, mellow, earthy, optimistic and artistic are being expressed

Follow Indie Pixel House’s board Anti Chaos Chronicles on Pinterest.

Step Three – Exclude

By this stage you should be starting to see some common themes and similarities in your board. For example, you may have pinned lots of script fonts, bold colors, shapes, sharp edges, nature pics, sparkly stuff, pastels etc…

Pay attention to these and decide whether these themes are a true reflection of the words you’ve chosen for your site because now it’s time to hone in on your style and pare it down – significantly.

Ideally, you want between 5-7 images remaining.

The key with the remaining images is not that they will actually be used in the final design (read: copyright) but simply to illustrate the feeling and aesthetic you’ve chosen for your brand. Make sure you love each one!

HERE’S SOME TIPS TO HELP YOU CULL YOUR INSPIRATION BOARD//

  • Remove any irrelevant pins (those you instantly know don’t fit the scope)
  • Remove duplicate or similar images for example; you might have a few quotes that you’ve pinned for their typographic design or lounge room settings you’ve pinned for their perceived mood – choose the most fitting and get rid of everything else.

When you’re done ask yourself, “does this board represent the look and feel I want for my business?” If you’re still unsure, ask someone else for their opinion. It often helps to get a fresh perspective.

Step Four – Arrange

You’ll need an image editor for this step. Canva has some great templates that can be adjusted for mood boards or if you’re a whiz in Photoshop… you know the drill. The goal is to arrange them in such a way that they make you smile and say “YES! This is me.”

FYI // There are no rules when it comes to arranging your images but here are some of my preferences.

  • Use a combination of portrait and landscape to create some visual interest.
  • Give each image some breathing space (padding) so overall, it’s easy on the eye.
  • The background color of your image is just as important as the subject as it can dramatically change the overall mood. If you find that an image’s background is disrupting the mood, try cropping it out or scaling (increase/decrease the size of the image) so none/less of the background is visible.
  • You can switch things up by using shaped images ie; triangles, circles, polygons etc.. I would only do this though if those shapes held some significance or were going to feature in my brand.
  • Add the words from your vibes guide to your Inspiration Board

Step 5 – Pick!

Once you’ve laid out your images you can start sampling colors from your board to create a unique color palette to complete your inspiration board. In this step we’ll choose //

  • A primary color – this will be the most dominant color in your design
  • Up to 3 secondary colors – to compliment your primary choice
  • And an accent color – this color is used sparingly to draw attention to important things like buttons on your website.

HERE’S HOW TO SELECT YOUR COLOR PALETTE //

  1. Install Colorzilla for Firefox or Chrome
  2. Once it’s installed, click the eyedropper tool in your browser’s toolbar – the mouse icon will then change to an eyedropper.
    Color Picker for Firefox and Chrome
  3. Now when you hover over your images you’ll notice that the sample chip changes as you move your mouse around. Keep moving your mouse around until you find a shade you like then click to select it. The hex code will be copied to your clipboard for pasting.
  4. When you’ve chosen your color, select a shape from the “elements” category (if you’re using Canva) so we can create some unique paint chips from your samples. Click on the colour wheel and paste the hex code into the highlighted section.
    Color Wheel
  5. Continue this process until you have a primary color, up to 3 secondary colors and an accent color.

PRO TIP FOR CHOOSING COLORS FOR YOUR WEBSITE //

There’s a great quote by Marc Chagall that refers to the color wheel, and is perfect to ensure that you choose a color palette that’s cohesive,

“All colors are the friends of their neighbors and the lovers of their opposites”

When choosing a color palette remeber, “All colors are the friends of their neighbors and the lovers of their opposites” - Marc Chagall

IDEAS ON HOW TO ARRANGE YOUR PAINT CHIPS //

  1. Make them all identical in size and add them either stacked or side by side along the edge of your board.
    How To Create An Inspiration Board For Your Website

    Example of stacking and side-by-side arrangement of paint chips

  2. Use shapes to display your paint chips.
    How To Create An Inspiration Board For Your Website

    Example of using shapes for paint chips

    3. Place your paint chips alongside the image they were taken from (as shown in the boards below). This is my personal favorite because if the colors I’ve chosen are hitting the mark, they’ll blend beautifully with their surroundings. I find it’s easier this way than any other to tell if any of the colors aren’t working.

When you’re done, you should be left with an inspiration board that answers the 2 questions we started with //

  1. How do you want your website to look?
  2. How do you want your visitors to feel when they visit your site?

HERE’S SOME REAL LIFE EXAMPLES OF FINISHED INSPIRATION BOARDS //

How To Create An Inspiration Board For Your Website - This is the most crucial step in designing a website that new folk neglect and you might be tempted to jump right in and start creating logo’s and choosing colors and fonts but that is going to be a poor use of time. Let me tell you why…

Romance | Playful | Classic

How To Create An Inspiration Board For Your Website - This is the most crucial step in designing a website that new folk neglect and you might be tempted to jump right in and start creating logo’s and choosing colors and fonts but that is going to be a poor use of time. Let me tell you why…

Artistic | Optimistic | Positive | Earthy | Motivated

Don’t forget to download your Inspiration Board Templates!

I’ve created these in Canva so they’re very easy to use and edit. Click the button below to download them!

DOWNLOAD THEM HERE

 

Inspiration Board Templates for your website
Inspiration Board Templates for your website

 

 

 

 

 

 

 

The Website Planning Checklist

Have you downloaded The Essential Website Planning Checklist yet?

I invite you to go ahead and do that now. Anyone with a little know how can build a website but few people are aware of the planning and strategy involved in building a website that actually works to meet your goals.

 

GET THE CHECKLIST!

Pin It on Pinterest

Friends don't let friends miss great content.

If you think your friends will enjoy this post, I'd love you to share it. Thank you!

Shares