An integral part of being a designer is the ability to communicate your designs to the user, stakeholders, and the development team effectively. Communication allows for an easy understanding of the story you are trying to pass across. The most effective ways for designers to communicate is through the use of Mood boards and Style guides.
In this article, I will highlight how designers use mood boards and style guides to communicate. I will also highlight tools/software uses to achieve this.
Moodboard
A mood board communicates a designer's concepts and visual ideas at the initial planning phase of a product. It is a physical or digital collage of various items, as snapshots, song lyrics, images, materials, text, and other design elements that lead to the final theme of the product. The purpose of a mood board is to help explore ideas and figure out the general style, mood, colors, and overall feel of a product. A mood board tells a story.
Creating a mood board helps;
establish communication and collaboration between the designer and everyone involved in the product development.
save the designer time and energy during the initial process.
clarify the vision.
Tools for creating Mood boards
There are several tools that can be used to create mood boards. Some are free, some work on just the web, and some will work on your PHONE!
Canva
This application works both on the web and on a mobile phone. It is also a FREE app that can be upgraded to fit your preference. Canva comes with tons of free templates that allow designers to create mood boards, fliers, logos, etc.
This is also a designer's favorite. It is also available on the web and mobile. Pinterest allows for commenting, collaboration and sharing. It features boards that can be private or public. It is a great place to find a mood board example for just about anything. It can also be used for free.
Invision
Invision is a design tool that offers a mood board function that is intuitive. It also allows for collaboration between teams. It also includes commenting, sharing, and downloading. It features different plans and pricing options but can be used for free too depending on your need.
Milanote
Milanote is an easy-to-use tool to organize your ideas and projects into visual boards. It can also be used as a collaboration and a project management tool. It is a free, easy-to-use application that can be used on both mobile and desktop.
Several others include Mural, Evernote, Adobe Creative Cloud apps.
Styleguide
A style guide is a collection of guidelines for document and material writing and design. In creating a style guide, designers are basically documenting their own thought process as they design a Web site, application, or system.
A style guide includes the following;
Color Palette - Color combinations need to be clearly defined. This includes listing the colors and HEX code. Color pairings should also be given.
Buttons - Buttons come in different shapes, sizes, colors, placement, spacing, and typographic elements. So designers need to take time to document them and make them as clear as possible.
Typography - Clear instructions should be given for Titles, Subtitles, Headings (H1, H2, H3), Body Text, and Captions.
Responsiveness - This should include spacing, padding, and placement measurements. It’s also helpful to show overlays of the product’s grid system in relation to different screen sizes.
Also note that there are several other style guide components that include Iconography, Tooltips and popovers, Tabs, Navigation menus, Toolbars, Dropdown menus, etc.
Style guide changes during the product development phase and must be updated accordingly for easy use and understanding by the developers and designers themselves.
Difference Between Mood boards and Style guides
The major difference between mood boards and style guides is that the mood board is a visual collage of inspiration - pictures, materials, text, etc while the style guide like that name implies is a set of guidelines that designers use to achieve a great design and the developers use to write beautiful frontend code.
Other Useful Resources
Find below other useful resources used in creating mood boards and style guides.
Images - Shutterstock, Unsplash
Font and Typography - Google fonts, Fonts.Com
Concluding, mood boards and style guides are used to make the design process easy to deal with. They are both great for communication between teams and do not necessarily affect the total design quality.
🦋