So you’re developing this hot new website/app, and you’ve decided it’s time to convert those wireframes into a visual design. You have two choices – go with a design and color scheme that ‘feels’ right, or, link it back to what you think your brand stands for. This is where moodboards come in. I am a huge fan of moodboards as a way to link design and marketing. Here’s how they work, using the example of how my team used this technique with Wordcraft to create an integrated visual design.
Wordcraft is an app that lets kids develop their understanding of language by creating sentences and seeing immediate visual feedback. Our vision was to create an app that helped kids learn, as they had fun exploring different sentence combinations.
We started out by creating post-its with words that we felt best described the brand identity. Once we had a board full of words, we used the affinity diagramming method of combining them into themes and came up with our theme words – Vibrant, Discovery, Playful and Clear.
Now comes the fun part – finding images that are synonymous with these words. You could do this exercise by cutting out pictures from magazines, the internet or whatever else catches your interest. We chose to use a Pinterest-board to tag the images that we felt were the most descriptive. Here again, each team member picked images individually which also helped us talk about what the words meant to each of us. This is a good way to bring the team together in a shared understanding of what you want your brand to symbolize.
Each of us then picked our top images for the theme words. The exercise of talking about the images, and what they meant and how we saw them connect to our brand vision meant that there was a fair bit of overlap in these top images. Once we had the final moodboard ready, we used Adobe Kuler to distill colors from these images and create our brand colors. Ta-dah! In 1.5 hours, we had colors that were closest to what our team felt our brand represented. We used these across all our work – the app, the project website, our logo.
You can try this process out on any new app/website and see how it works for you. Personally, I love how it helps to bring a process to what could otherwise disintegrate into a very subjective conversation of, “I think our buttons should be blue, because my child likes blue.”
If you do try this out, let me know what you think!
Note: I put up a version of this post on Medium, as an experiment.