{"id":7798,"date":"2023-01-24T15:07:11","date_gmt":"2023-01-24T15:07:11","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=7798"},"modified":"2023-11-13T22:50:07","modified_gmt":"2023-11-13T22:50:07","slug":"mood-boards-for-ui-designers","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/mood-boards-for-ui-designers\/","title":{"rendered":"The ultimate guide to mood boards for UI Designers (and how to create your own)"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">As a designer, being able to effectively communicate your ideas is crucial. Whether it\u2019s sharing your creative vision with clients or presenting concepts to internal stakeholders\u2014it\u2019s essential to translate abstract ideas into something tangible.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is where mood boards come in. A mood board can help you to organise your thoughts, define a clear creative direction for a given project, and ultimately make sure that your designs will evoke the desired emotions in your end users.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re new to mood boards, look no further than this guide. We\u2019ll show you everything you need to know about this wonderful design tool\u2014including step by step instructions for how to create your own.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-is-a-mood-board\"><span style=\"font-weight: 400;\">What is a mood board?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-are-mood-boards-used-for\"><span style=\"font-weight: 400;\">What are mood boards used for?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#physical-vs.-digital-moodboards\"><span style=\"font-weight: 400;\">Physical vs. digital moodboards: Which is best?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-should-you-include-in-your-mood-board\"><span style=\"font-weight: 400;\">What should you include in your mood board?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#gathering-inspiration-for-your-mood-board\"><span style=\"font-weight: 400;\">Gathering inspiration for your mood board<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#how-to-create-a-mood-board\"><span style=\"font-weight: 400;\">How to create a mood board: Step-by-step<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#the-best-mood-board-tools-and-software\"><span style=\"font-weight: 400;\">The best mood board tools and software\u00a0<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#the-takeaway\"><span style=\"font-weight: 400;\">The takeaway<\/span><\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">First up: Defining the term \u2018mood board\u2019.\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-ui-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design?utm_source=blog&utm_medium=blog_panel_text&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UI DESIGN]<\/p>\n                    <span>Take our Professional Certificate in UI Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2 id=\"what-is-a-mood-board\"><strong>What is a mood board?<\/strong><\/h2>\n<p><b>A mood board is a visual tool used to capture and communicate the creative direction a project should take<\/b><span style=\"font-weight: 400;\">. It\u2019s a collection of different visual elements which, in combination, evoke a particular look, style, and feel.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mood boards are typically created in the early stages of a creative project. They represent the designer\u2019s initial ideas and concepts which will later go on to shape the look and feel of the end product.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here is an example of a mood board for an interior design project, conveying a \u2018modern boho bedroom\u2019 vibe:\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7799\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-20-at-11.44.47.png\" alt=\"emerson &amp; fifteenth mood board\" width=\"1164\" height=\"1146\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.emmersonandfifteenth.com\/2020\/10\/orc-week-1-2-master-bedroom-plans\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Emmerson &amp; Fifteenth<\/span><\/a><\/p>\n<h2 id=\"what-are-mood-boards-used-for\"><strong>What are mood boards used for?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Mood boards are used to turn unorganised or unarticulated ideas into a single, coherent vision. They help to turn abstract concepts into something visual and concrete\u2014enabling you to share and communicate your ideas. They\u2019re also a great tool for organising your design research and inspiration.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As a designer, you might create a mood board to:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Organise your own thoughts and ideas and bring focus to your vision<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Document your research for a particular project<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Share your creative vision with clients or other key stakeholders, allowing you to gather feedback and make sure everybody is aligned before proceeding to <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-wireframing\/\"><span style=\"font-weight: 400;\">wireframes<\/span><\/a><span style=\"font-weight: 400;\"> and prototypes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use as a point of visual reference throughout a design project, continuously reminding you of the vision you are working towards<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Digital designers aren\u2019t the only ones who use mood boards. Mood boards can be used for almost any kind of project\u2014be it interior design, planning a party or a wedding, or visualising your personal goals and aspirations.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">No matter the context, mood boards are used to present a clear creative vision which depicts how the end result should look and feel.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7800\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-20-at-11.45.32.png\" alt=\"coolvector mood board\" width=\"1296\" height=\"858\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\"><br \/>\n<\/span><a href=\"https:\/\/www.freepik.com\/free-vector\/creative-mood-board-pastel-colors_6155033.htm#query=moodboard&amp;position=3&amp;from_view=keyword%22\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Image by coolvector<\/span><\/a><span style=\"font-weight: 400;\"> on Freepik<\/span><\/p>\n<h2 id=\"physical-vs.-digital-moodboards\"><strong>Physical vs. digital mood boards: Which is best?<\/strong><\/h2>\n<p><b>Physical mood boards are made by arranging different elements and artefacts on a physical board<\/b><span style=\"font-weight: 400;\">. They can include anything from magazine cutouts and textured fabrics to photographs and colour swatches.\u00a0<\/span><\/p>\n<p><b>Digital mood boards are created using computer software<\/b><span style=\"font-weight: 400;\">. They can incorporate (almost) any kind of digital media, including images, video, GIFs, animations, colour palettes, and fonts.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The format of your mood board will depend on the nature of your project. While physical mood boards are great for interior design projects (as they enable you to convey different textures and fabrics), digital mood boards typically make the most sense for UX and UI design projects. As you\u2019re moodboarding for websites and apps, you\u2019ll want to base your vision mostly on digital assets, and this will be much easier with a digital mood board.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, don\u2019t let this limit you when it comes to gathering inspiration for your mood board. You can easily incorporate inspiration from the physical world by taking photos or videos and uploading them to your digital board.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Another big advantage of digital mood boards is that they are better suited for sharing and collaboration. This is especially important if you\u2019re working remotely, or with external clients.\u00a0<\/span><\/p>\n<h2 id=\"what-should-you-include-in-your-mood-board\"><strong>What to include in a mood board<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">If you\u2019re creating a mood board for a UX\/UI design project, you can include any digital assets which help to convey your vision. Some common elements of a digital mood board include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Photos (this can include photos of physical artefacts)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Illustrations<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Stock images<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">GIFs and animations<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Video<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sound<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Icons<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Typography<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Colour palettes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Text<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">We\u2019ll show you where to find inspiration for your mood board in the next section.\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&amp;utm_medium=blog_panel_pdux&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2 id=\"gathering-inspiration-for-your-mood-board\"><strong>Gathering inspiration for your mood board<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Before you start creating your mood board, you\u2019ll want to have a pool of inspiration at the ready. Fortunately, inspiration can take many different shapes and forms, and it can be found almost anywhere.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are some valuable sources of mood board inspiration to help you in your search:<\/span><\/p>\n<ul>\n<li><b>Competitor products.<\/b><span style=\"font-weight: 400;\"> If you\u2019re designing an app or a website, take a look at what other brands in the same space have done. You can borrow certain elements to inspire your own designs without copying. <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b><\/b><\/li>\n<li><b>Google images.<\/b><span style=\"font-weight: 400;\"> Try typing certain keywords into the Google image search and see what comes up. For example, you might search words like \u201ctropical\u201d or \u201cretro\u201d to see what kinds of imagery and colours are typically associated with these themes.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li aria-level=\"1\"><b>Magazines and other print media. <\/b><span style=\"font-weight: 400;\">Magazines can be a great source of visual inspiration, even if they\u2019re not directly related to the product you\u2019re designing. You might take inspiration from recipe magazines and books if you\u2019re designing a food-related app, for example.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Physical spaces such as department stores, showrooms, and museums. <\/b><span style=\"font-weight: 400;\">Extend your search beyond the digital realm, even if you\u2019re designing a digital product. If you\u2019re designing a website for a luxury cosmetics brand, you might go into a department store to browse their visual displays for inspiration. If you\u2019re designing a science app, you might take a trip to a science museum to fuel your creative vision. Think outside the box!<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Browse social media (especially Instagram and Pinterest). <\/b><span style=\"font-weight: 400;\">Similar to Google image search, you\u2019ll find endless mood board inspiration on sites like Instagram and Pinterest.\u00a0<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7801\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-20-at-11.47.08.png\" alt=\"mood board example\" width=\"1278\" height=\"1052\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Wherever you go for inspiration, remember to always focus on your end goal. Keep in mind the brand, the product, your target users, and\u2014most importantly\u2014the emotion or mood you want to evoke.\u00a0<\/span><\/p>\n<h2 id=\"how-to-create-a-mood-board\"><strong>How to create a mood board: Step-by-step<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">You can start creating a mood board once you\u2019ve conducted <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-user-research\/\"><span style=\"font-weight: 400;\">user research<\/span><\/a><span style=\"font-weight: 400;\">, defined <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-are-ux-personas\/\"><span style=\"font-weight: 400;\">user personas<\/span><\/a><span style=\"font-weight: 400;\">, and have a good idea of the user problem your end product should solve.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ready to create a mood board for your next design project? Follow these 5 steps:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Define the mood<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Define a style<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Choose your mood board elements<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Compile your mood board<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Share your mood board and gather feedback<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Let\u2019s go through each step in more detail.\u00a0<\/span><\/p>\n<h3><strong>1. Define the mood for your mood board<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">The clue is in the name: your mood board should conjure up a certain mood when you look at it. So, the first step is to define exactly what kind of mood and emotions your mood board should evoke.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ask yourself: <\/span><b>How should the end user feel when they look at and interact with the product I\u2019m designing?\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">This is what your mood board should capture. Brainstorm as many different emotion\/mood-related descriptors as you can, then go back through and pick out three that best convey the direction your mood board should take.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are some examples:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">When designing a dating app, you might want your end users to feel excited, curious, and optimistic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">When designing a meditation app, you might want your end users to feel calm, comfortable, and relaxed<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">When designing an e-learning platform, you might want your end users to feel confident, courageous, and enthusiastic\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Browse through this <\/span><a href=\"https:\/\/www.berkeleywellbeing.com\/list-of-emotions.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">comprehensive list of human emotions<\/span><\/a><span style=\"font-weight: 400;\"> for inspiration.\u00a0<\/span><\/p>\n<h3><strong>2. Define a style for your mood board<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">You\u2019ve identified the mood for your mood board. Now you want to define the style and tone that will help to evoke this mood.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ask yourself: <\/span><b>If my mood board were a person, how would they dress [style] and what would their personality be like [tone]?\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Again, a brainstorming exercise can help here. Some words to describe style include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Simple<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Elegant<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Modern<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Colourful<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Minimalistic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vintage<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Retro<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Rustic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Industrial<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Chic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Smart<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Classic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Pragmatic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Professional<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Serious<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dramatic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bold<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ethereal<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Earthy<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Urban<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Adventurous<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Organic\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Some words to describe tone include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Playful\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Outgoing<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cheeky<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Authoritative<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Assertive<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bold<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Celebratory<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Direct<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Empathetic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gentle<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Joyful<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lighthearted<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vibrant<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Whimsical<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tranquil<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7802\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-20-at-11.48.28.png\" alt=\"agile meeting toolbox\" width=\"1296\" height=\"860\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Photo by <a href=\"https:\/\/www.parabol.co\/\" target=\"_blank\" rel=\"noopener\">Parabol<\/a> |\u00a0<\/span><a href=\"https:\/\/unsplash.com\/@parabol?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">The Agile Meeting Toolbox<\/span><\/a><span style=\"font-weight: 400;\"> on<\/span><a href=\"https:\/\/unsplash.com\/photos\/jNKfJ6u78nw?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\"> <span style=\"font-weight: 400;\">Unsplash<\/span><\/a><\/p>\n<h3><strong>3. Choose which elements and assets you\u2019ll add to your mood board<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">With your mood, style, and tone defined, your creative vision is starting to take shape. The next step is to sift through your pool of inspiration and carefully select which elements you\u2019ll add to your mood board.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019ve gathered lots of different assets, it may help to group them into categories first. For example, you could have one category for colour inspiration, another for imagery, another for typography, and so on. From there, you can pick a few elements from each category which best represent your desired mood and style.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keep in mind that, while your moodboard doesn\u2019t have to be perfectly uniform, you are striving for a consistent, cohesive visual narrative. All of the individual elements you choose should work together in harmony to accurately convey the right mood.\u00a0<\/span><\/p>\n<h3><strong>4. Create your mood board (following the rules of visual hierarchy)<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">You\u2019ve chosen the elements and assets which best convey your vision. Now it\u2019s time to bring your vision to life and actually create your mood board.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re creating a digital mood board, open up your chosen tool (we list some of the best tools for creating mood boards in the next section) and either select a mood board template or start with a blank canvas.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Upload\/add each of your chosen mood board elements, experimenting with different layouts and compositions as you go. When creating your mood board, follow the <\/span><a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/visual-hierarchy\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">rules of visual hierarchy<\/span><\/a><span style=\"font-weight: 400;\">, using size and position to convey prominence or importance of certain elements. If needed, you can also include text to provide (brief) descriptions of individual elements.\u00a0<\/span><\/p>\n<h3><strong>5. Share your mood board with relevant stakeholders and gather feedback<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Once you\u2019re happy with your mood board, you can share it with relevant stakeholders\u2014be it the client you\u2019re designing for or fellow designers on your team.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Before you share it, you may want to do a round of user testing (with people who are not directly involved in the project). For example, you could share your mood board with friends or colleagues from other departments and ask them to describe how the mood board makes them feel. This will give you good insight as to whether you\u2019ve accurately captured and conveyed the right tone with your mood board.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Based on client or stakeholder feedback, you can refine your mood board. Then, as you progress through to <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/prototyping-guide\/\"><span style=\"font-weight: 400;\">prototyping<\/span><\/a><span style=\"font-weight: 400;\">, use your mood board to guide you and remind you of the creative direction you should follow.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7803\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-20-at-11.49.28.png\" alt=\"canva mood board example\" width=\"844\" height=\"662\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.canva.com\/p\/templates\/EAFDCf5W7fU-pink-yellow-colorful-modern-home-decor-mood-board-photo-collage\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Canva<\/span><\/a><\/p>\n<h2 id=\"the-best-mood-board-tools-and-software\"><strong>The best mood board tools and software<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">There are plenty of tools out there to help you create a digital mood board. Among the most popular are:<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/www.canva.com\/create\/mood-boards\/\" target=\"_blank\" rel=\"noopener\"><b>Canva<\/b><\/a><span style=\"font-weight: 400;\">, a free mood boarding tool which comes with an easy drag-and-drop editor and an expansive <\/span><a href=\"https:\/\/www.canva.com\/templates\/?query=mood-board\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">library of mood board templates<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/www.pinterest.co.uk\/\" target=\"_blank\" rel=\"noopener\"><b>Pinterest<\/b><\/a><span style=\"font-weight: 400;\">, a much-loved online collage tool used to \u2018pin\u2019 images, GIFs, and videos onto a virtual pinboard.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><a href=\"http:\/\/www.gomoodboard.com\/\" target=\"_blank\" rel=\"noopener\"><b>Moodboard<\/b><\/a><span style=\"font-weight: 400;\">, a free, basic tool ideal for creating simple, shareable mood boards. You can start with a blank board or pick from a (small) selection of starter boards.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/milanote.com\/\" target=\"_blank\" rel=\"noopener\"><b>Milanote<\/b><\/a><span style=\"font-weight: 400;\">, another free tool described as \u201cThe Evernote for creatives\u201d. You can use Milanote to organise your ideas into visual boards, write notes and to-do lists, and even as a digital whiteboard tool for collaboration.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/miro.com\/\" target=\"_blank\" rel=\"noopener\"><b>Miro<\/b><\/a> <span style=\"font-weight: 400;\">is one of the most popular and versatile <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ui-ux-design-tools\/\"><span style=\"font-weight: 400;\">tools used by UX and UI designers<\/span><\/a><span style=\"font-weight: 400;\">, so it\u2019ll come as no surprise that you can also use it to create mood boards. Learn more about <\/span><a href=\"https:\/\/miro.com\/moodboard\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">how to create a mood board with miro here<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/li>\n<\/ul>\n<h2 id=\"the-takeaway\"><strong>The takeaway<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Ultimately, a mood board is an excellent tool for organising your ideas, defining a creative direction, and turning your vision into something concrete. This is essential for getting everybody aligned on how the final product should look and feel\u2014before you embark on the more time-consuming process of creating prototypes and individual design assets.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Besides the obvious benefits, creating mood boards is a fun task. Don\u2019t be afraid to think outside the box, experiment with different combinations, and draw inspiration from unlikely sources. Anything that helps to evoke the desired mood and communicate your concept can be included.\u00a0<\/span><\/p>\n<h3><strong>Want to learn more about design?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Mood boards are just one of the many tasks a designer may take on. You can learn more about <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/day-in-the-life-of-a-ui-designer\/\"><span style=\"font-weight: 400;\">a typical day in the life of a UI designer here<\/span><\/a><span style=\"font-weight: 400;\">, expand your design vocabulary with this <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ui-glossary\/\"><span style=\"font-weight: 400;\">UI design glossary of 100 terms all designers should know<\/span><\/a><span style=\"font-weight: 400;\">, or discover <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/become-a-better-ui-designer\/\"><span style=\"font-weight: 400;\">9 expert tips on how to level up your craft and become a better UI designer<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">New to the world of design? Learn all the fundamental theory, techniques, and tools you\u2019ll need to succeed in the field with a professional course. Explore the UX Design Institute\u2019s university credit-rated <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design\"><span style=\"font-weight: 400;\">UI design certification<\/span><\/a><span style=\"font-weight: 400;\">, or weigh up your options with the help of this <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/best-ui-design-courses\/\"><span style=\"font-weight: 400;\">UI design course comparison guide<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is a mood board and what are they used for? Learn everything you need to know in this guide for UI designers, including how to create your own.<\/p>\n","protected":false},"author":22,"featured_media":7819,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278,279],"tags":[344,300],"class_list":["post-7798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-ux-explained","tag-mood-board","tag-ui-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7798"}],"version-history":[{"count":9,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7798\/revisions"}],"predecessor-version":[{"id":9372,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7798\/revisions\/9372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7819"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}