Creating a Mood Board with Milanote

Recently, I came across milanote.com which seemed to be a good tool for creating a mood board or style guide.

When planning a website, or other creative project, it can be really helpful to build a mood board so that you can visualise how certain colours, fonts, images etc might work together. A style guide can act as a useful reference to ensure that you, and others involved in the project, are consistent in your use of various design elements.

Many people use Pinterest for mood boards as it’s an easy way to gather together images and ideas. I have a number of Pinterest boards including one I’ve called “Pretty Bright Soft Colours“. In my head, I think of these as “ice cream colours” because that’s a term that was used in relation to fashions back in the 1980’s when I was young. (Although not all the colours in my board are accurate ice cream flavours…I’ve included peach, raspberry, mint, lemon and…erm..cyan and pastel blue). I’ve pinned a few 80’s fashion pictures, but also some with a 1950’s style as well as more modern examples.

A proper mood board should be more focused than this, but there’s no reason why Pinterest couldn’t be used for this purpose. However, I feel that an ideal mood board application would have a few more features, so I was keen to try out Milanote to see what it could do.

Adding Images

I downloaded some stock photos (mainly free ones from Pixabay) and was able to easily drag them onto my Milanote board and rearrange them however I liked. Images can be moved around, resized, aligned and duplicated.

As well as photos, I uploaded a logo and some images of fonts, taken from the google fonts website.

Links

There appear to be a couple of ways to add links to the board. One of the images I uploaded was taken from a free social media pack that I’d obtained from Pixelbuddha. Giving this image a caption and pasting in the link to Pixelbuddha’s item added a clickable hyperlink.

Alternatively, I could have dragged the box for a link onto the board and typed or pasted the url into it. Depending on the website being linked to, this could automatically add an image. I didn’t choose to do this for my final mood board, but I did experiment and found that it worked well for my Pixelbuddha link, for Pixabay (as an alternative to downloading and uploading images manually) and for colour palettes from Design Seeds and Canva Color Combinations.

Lines

As well as images and links, there are various other items that can be dragged onto the board, including notes, comments and lines.

I used a line to show the source of the font I’d chosen for the logo.

Colour Swatches

One feature that I really like is that if you type, or paste, the hex code for a colour into a note then it turns into a colour swatch when you hit enter. This can then be resized and dragged into place.

Because I often find myself looking for additional variations of colours, I added some links to color-hex.com at the side of my board, to act as shortcuts. I added a link for each of the four main colours and gave each link a background colour to make it obvious which was which. It would have been nice if I could have chosen the exact colour for the background, rather than just an approximate one, but this was good enough.

Collaboration and Pricing

Not only can the board be used as a planning tool by an individual, but it can also be shared with clients and colleagues or a team can work on a project together.

Milanote has a free plan, allowing you to add 100 notes, images or links, and a professional plan with unlimited storage for $9.99 per month. This seems a little pricey unless you are part of a business with multiple clients. The free plan is enough for an individual to make a few boards for their own use. My “Ice Cream Colours” mood board has 30 cards, so I’d be able to create three like this before I had to either pay or delete some cards to free up space.

If you feel like helping me out, by the way, then if you sign up to Milanote using this referral link then I get up to 100 more cards (20 per referral).

Exporting

Having created a mood board, you can share it, as I explained above, but you can also export it in several formats.

I exported the “Ice Cream Colours” board as a png and then converted it to a jpg in order to create the image used at the top of this blog post.

The pdf is particularly useful because it preserves all the links, so it could be sent to a client and they would be able to follow the links in it as well as viewing the images.

If you’d like to have a look at my example to see what I mean, then just click the link below to access the pdf.