What is a mood board?
Mood board is a collection of textures and images, are used as a way to convey the feeling about a product you are about to make. They are used to get inspiration for colour palette, layout and shapes in the design you're working on.
Having a mood board is important so as to get the general idea of the design you’re working on. And working on a mood board with a client helps you as a designer to poke in the client’s mind and see what their vision is towards their design.
Style guide
This is a set of items that define a consistent aesthetic/theme for the entire design. It defines the visual branding of the design and serves as a reference for the project.
Having a style guide is important since it helps us keep a more consistent design across different mediums.
Style guides greater transparency and organization of elements, which are being used by the designer, and it also helps for other designers to pick up where you left off with the help of the style guide
Things to include in your style guide
Color palettes - (primary and secondary colors) to be applied to ui elements such as font, call to action buttons, links, active states of interactive elements
Iconography - the types of icons to be used and the styling of the icons
Typography - The font family to be used. Font sizes for page titles, various levels of subheadings, and paragraphs. Clearly distinguish these elements using font size, weight, and color.
Ui elements - showing the active, inactive or disabled states as well as their various sizes
Importance of creating a mood board before designing
They help to establish the basics. Mood boards help to establish all of the baselines that will eventually go into a style guide: color palettes, typography, layout, image treatments. Mood Boards also help a designer to organise their thoughts in a specific direction that the design is heading to.
What to include in your mood board?
Color schemes of the designEvery color has its own meaning that it conveys and the differences in tones and hues of the color can determine the emotions that a particular color can invoke. Including the color schemes in the mood boards shows the choice of color palettes that relate to the brand.
Imagery usedWhat types of imagery is to be used? Is it leaning towards illustrations or more towards photography based representations? How dense are the images? Are they filled with multiple subjects or is it a minimalist approach?
TypographyLike color, typography also has the ability to tell stories. What’s your client’s story? What message are they trying to convey? Is it fun? Is it classy? Is it professionalism? When presenting typography, be sure to present different variations of type — from thick to thin, serif to san serif.
Figma - this is a tool used by most designers. Figma is available to use in browsers and has a desktop application. As a designer you can import images and texts from various sources on a board to create a mood board for your design.
Canva - this is a design platform available online that has a collection of professionally made templates and media library for images, illustrations and more design elements. You can then start customizing the ones you like best to fit your project perfectly using easy drag and drop to create your mood board.
Behance - this is a . It has a collection of design and pictures that you can search and add to your mood board. Behance boards allows you to add images and even projects in your mood board and even add collaborators
Pinterest - this platform allows you to create a board where you can add all your inspiration. You can pin (bookmark) all the images related to a specific theme in one board
Difference between Mood board and Style guide
Style Guide is used as a reference point for the entire design so as to ensure consistency of the design elements. Mood board is used to organise the inspiration for the design and capture the mood or feel of what the design should look like.
The mood board is created before the style guide is created.
Hopefully you've understood more about mood boards and style guides. Feel free to comment on anything
References
https://www.uxmatters.com/mt/archives/2019/11/creating-a-ux-design-style-guide.php uxplanet.org/creating-better-moodboards-for..