Before we get into designing our user interface, a good practice is to set a moodboard for our visual design idea. This is a way to keep consistency as well as speeding our process into designing our screens. A moodboard can simply be created with a Photoshop document and the way in which you create it is entirely up to you.
A good building block would be to set up your swatches, fonts, icons and buttons. Find references on other apps and pick up ideas you find suited to your app design. Once you have put all the pieces together, save it and refer it as you design your screens.
Here I have created a simple example of an Airbnb moodboard. What I did was:
- Find the App Design in Inspired UI
- Use a Firefox plugin – ColorZilla to find out the colors.
- Added the colors as swatches in Photoshop.
- Find the font by experimenting. (You can use Font Matcherator)
- Screenshot the icons.
- Created the buttons on Photoshop and finding the icons at Iconfinder
- Finding photos on Flickr
- Screenshots of Airbnb app screen.
Creating moodboards like this can be saved for references and case studies. It’s quite a useful activity as well for the designer because you will understand how other UI designers create their designs for a specific app.
If you would like to get a PSD copy of this moodboard, you can do so by clicking this link! –> Airbnb-Moodboard.psd
What are your methods in designing a moodboard and how do you use them? Leave a comment below and share your views!