{"id":45172,"date":"2023-06-05T11:10:49","date_gmt":"2023-06-05T18:10:49","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=45172"},"modified":"2023-06-05T11:12:42","modified_gmt":"2023-06-05T18:12:42","slug":"ui-mood-board","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/","title":{"rendered":"8 Tips for Shaping Product Aesthetics with UI Mood Boards"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min-1024x512.png\" alt=\"Creating Moodboards for Perfecting Product Aesthetics min\" class=\"wp-image-45173\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Mood boards are a compilation of illustrations, newspaper cutouts, images or pieces of text put together on a physical or digital board.  The purpose of a mood board is to make everyone agree on the creative direction of a project. You can use it for any creative endeavour, and it&#8217;s immensely useful in product design. Let&#8217;s see do&#8217;s and dont&#8217;s of UI moodboards.<\/p>\n\n\n\n<p>Keep everyone on the same page, collaborate easily, and make sure you&#8217;re meeting your design goals. Try UXPin for free and find out how it streamlines prototyping, user testing, and design handoff. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a 14-day free trial<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-mood-boards\">What are mood boards?<\/h2>\n\n\n\n<p>A mood board is a visual tool that designers use to capture ideas and communicate them to each other. They can \u2018pin\u2019 various visual scraps, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-language\/\">illustrations<\/a>, or fonts to see if they work with one another and help build a unique style for the product. Since they support conceptual work, designers usually create them before proceeding with later stages of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-user-interface\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI design<\/a>, such as <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-mockup-the-final-layer-of-ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">mockups<\/a>.\u00a0<\/p>\n\n\n\n<p>As a result, all <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stakeholder-analysis-for-product-teams\/\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a> can get a rough idea of how the product might look and feel.\u00a0<\/p>\n\n\n\n<p>Mood boards can either be physical or digital, depending on what tools designers prefers to use. However, most people today use the latter as they\u2019re more accessible, easy to work on collaboratively, and more affordable in the long run. We discuss this in further detail next.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-physical-vs-digital-mood-boards\">Physical vs digital mood boards<\/h3>\n\n\n\n<p>So, what do designers take into account while choosing between the two? It mostly comes down to their preferences and project goals. From a technical standpoint, how do these two mood board types differ?&nbsp;<\/p>\n\n\n\n<p>Physical mood boards involve the use of tangible materials. Such assets include pages from magazines, various types of paper, fabric swatches, and other \u2018tangible\u2019 elements.<\/p>\n\n\n\n<p>Some designers may prefer the tactile and immersive experience of physical mood boards. They can be particularly useful when collaborating in person, as well as when you need to feel the texture of what you&#8217;re designing.<\/p>\n\n\n\n<p>If the entire <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-team-structure\/\" target=\"_blank\" rel=\"noreferrer noopener\">design team<\/a> is based in-house, it\u2019s easy to use physical boards in on-site <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-thinking-workshop\/\" target=\"_blank\" rel=\"noreferrer noopener\">brainstorming sessions<\/a> and to apply real-time adjustments. The downside is that creating physical mood boards is more time-consuming. It can also be more costly, since they require printed materials.<\/p>\n\n\n\n<p>Digital mood boards, on the other hand, involve compiling several elements into a digital collage. One of the more distinct types are UI mood boards, which let designers work on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-product-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">digital product interfaces<\/a>.<\/p>\n\n\n\n<p>Among others, these online boards can feature <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/choose-color-pallete\/\" target=\"_blank\" rel=\"noreferrer noopener\">color<\/a> palettes, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/typography-in-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">typography<\/a> samples, and screenshots from inspiring websites or apps. They offer several benefits over physical ones. Two of them stand out the most \u2013 convenience and flexibility.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image.png\" alt=\"image\" class=\"wp-image-45175\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>To sum up, if you\u2019re working on a UI, digital mood boards will likely be the best option. They make it easy to share your concepts not only with fellow design team members, but also developers and other project stakeholders.<\/p>\n\n\n\n<p>When choosing between the two, consider all factors. These may include the size of the product development team, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/the-beginners-guide-to-capturing-ux-requirements\/\" target=\"_blank\" rel=\"noreferrer noopener\">project requirements<\/a>, budget, and whether you cooperate with others entirely on-site or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-practices-remote-teams-12-principles-guide-everyday-work\/\" target=\"_blank\" rel=\"noreferrer noopener\">remotely<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-integrate-mood-boards-in-your-design-process\">How to Integrate Mood Boards in Your Design Process<\/h2>\n\n\n\n<p>To make the most of your mood board, you have to effectively integrate it into your design process. Here is how you can use it for a couple of purposes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-for-exploratory-purposes-when-you-re-working-on-a-new-feature\">For exploratory purposes, when you\u2019re working on a new feature&nbsp;<\/h3>\n\n\n\n<p>When creating a product, mood boards can serve as a starting point for gathering inspiration and exploring different design directions. Irrespective whether you&#8217;re a solo designer or part of a team.<\/p>\n\n\n\n<p>By curating a collection of diverse visuals, color palettes, typography samples, videos, and other design elements, designers can ignite their creativity and explore various possibilities before deciding on a specific aesthetic. Better yet, mood boards can help you spot any potential issues, well before you work on your wireframes.&nbsp;<\/p>\n\n\n\n<p>For example, say that you\u2019re thinking of using a highly-decorative, serif font. After adding it onto your website mood board, you realize that it wouldn\u2019t be <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">consistent<\/a> with the remaining elements of the design. Or, that serif type could be challenging to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/mobile-app-vs-web-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">read on smaller screens<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-to-figure-out-product-branding\">To figure out product branding<\/h3>\n\n\n\n<p>You can use brand mood boards to ensure that your design ideas are on-brand. For instance, if you are <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-create-hi-fi-prototypes-for-mobile-commerce-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">creating a mobile app<\/a> for a fashion company, a mood board could include photos from the catwalk, vibrant color palettes, and sleek typography. You could experiment with layout from traditional fashion magazines to see if they would work for your project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image-1.png\" alt=\"image 1\" class=\"wp-image-45177\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image-1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Or, if you are working on a website for a meditation platform, you might want to create a UI mood board consisting of serene nature images, soft color palettes, and minimalistic font.<\/p>\n\n\n\n<p>As you can see, having those elements on the mood board can set the tone for the entire design. It ensures that it\u2019s appealing to the target audience and evokes the right emotions. In fact, studies show that <a href=\"https:\/\/medium.com\/swlh\/the-5-step-brand-strategy-sprint-e2e12a72a76e\" target=\"_blank\" rel=\"noreferrer noopener\">94% of consumers are likely to recommend a brand with which they are emotionally engaged<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-boosting-understanding-and-collaboration-across-the-product-design-team\">Boosting understanding and collaboration across the product design team<\/h3>\n\n\n\n<p>Though indirectly, mood boards serve as an effective communication tool. Particularly, if there are multiple stakeholders involved in the product ideation stage, including your clients.<\/p>\n\n\n\n<p>Sharing the mood board ahead of any brainstorming sessions lets everyone take note of how the current design direction makes them feel. If anyone on your team believes that part of your board doesn\u2019t fit the style, they can share their opinion, and come up with an alternative solution.<\/p>\n\n\n\n<p>Such feedback can influence the direction of the entire project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-maximizing-ui-mood-board-s-potential-do-s-don-ts\">Maximizing UI Mood Board&#8217;s Potential \u2013 Do\u2019s &amp; Don\u2019ts<\/h2>\n\n\n\n<p>As mentioned earlier, mood boards can be a great tool in the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a>, but you need to know how to use them to get the best results. Here are some do\u2019s and don\u2019ts that you can follow to make the most out of your mood boards.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-clearly-define-your-goals\">Clearly define your goals<\/h3>\n\n\n\n<p>Before adding any elements to your mood board, set clear goals and objectives for your design project.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Why are you designing the website or app?<\/li>\n\n\n\n<li>Who is your target audience and why would they use a product like yours?<\/li>\n\n\n\n<li>What message do you want to convey?<\/li>\n<\/ul>\n\n\n\n<p>You should also consider any project requirements or limitations you\u2019re aware of. Also worth noting? Having <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/6-goals-for-product-design-teams-sd\/\" target=\"_blank\" rel=\"noreferrer noopener\">clear objectives<\/a> will make it easier to choose the best UI mood board template for your project, if you don\u2019t want to start from scratch.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-diversify-your-sources-of-inspiration\">Diversify your sources of inspiration<\/h3>\n\n\n\n<p>Whether you\u2019re creating a digital or physical product, you don\u2019t have to reinvent the wheel. Seek inspiration from various sources, even those that don\u2019t seem to be connected to an industry like yours.<\/p>\n\n\n\n<p>Peruse various websites, magazines, art, and nature. Opening yourself up to more diverse sources means exceeding assumptions and boosting your creativity.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-continuously-reference-your-mood-board\">Continuously reference your mood board<\/h3>\n\n\n\n<p>The main goal of your app or website mood board is to inspire and remind your team of the core narrative, or their <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-team-vision-statement\/\" target=\"_blank\" rel=\"noreferrer noopener\">vision<\/a>, that they must consider when making certain <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-decisions\/\" target=\"_blank\" rel=\"noreferrer noopener\">design choices<\/a>.<\/p>\n\n\n\n<p>Encourage everyone on the team to refer back to the mood board when in doubt, as a guiding reference.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-don-t-get-attached-to-your-initial-concepts\">Don\u2019t get attached to your initial concepts<\/h3>\n\n\n\n<p>Despite being a source of inspiration and direction, mood boards are not meant to be static. You should look at your mood board as a living document<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image-2.png\" alt=\"image 2\" class=\"wp-image-45179\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image-2.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/image-2-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>It should evolve alongside your design and new information on your target audience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-don-t-overcrowd-the-mood-board\">Don&#8217;t overcrowd the mood board<\/h3>\n\n\n\n<p>Even though mood boards are meant to inspire and guide design teams, it is crucial to keep them simple and well-organized. So, you should resist the temptation to include every interesting piece of design you come across.<\/p>\n\n\n\n<p>Overcrowding the brand mood board can lead to visual clutter and confusion as to which elements take precedence over others. You should only include the most impactful and relevant design elements that align with your goals and convey your desired message.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ui-mood-boards-the-perfect-tool-for-design-ideation\">UI mood boards \u2013 the perfect tool for design ideation<\/h2>\n\n\n\n<p>As we\u2019ve demonstrated in this piece, UI mood boards enable designers to create digital products that are not only aesthetic, but also trigger the right emotional response. They\u2019re a true source of inspiration for designers, particularly in the first stages of the&nbsp; design process.&nbsp;<\/p>\n\n\n\n<p>Not to mention they create a common understanding between design and software teams, clients, and other project stakeholders, early on in the product development process.<\/p>\n\n\n\n<p>Increase transparency and understanding between designers and other people on the team. Use one of the most collaborative prototyping tools out there. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free UXPin trial<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mood boards are a compilation of illustrations, newspaper cutouts, images or pieces of text put together on a physical or digital board. The purpose of a mood board is to make everyone agree on the creative direction of a project. You can use it for any creative endeavour, and it&#8217;s immensely useful in product design.<\/p>\n","protected":false},"author":3,"featured_media":45173,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,172],"tags":[],"class_list":["post-45172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-product-design"],"yoast_title":"","yoast_metadesc":"Discover what UI moodboards are and learn how they can help you perfect product aesthetics. Get our do's and dont's of UI mood board.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>8 Tips for Shaping Product Aesthetics with UI Mood Boards | UXPin<\/title>\n<meta name=\"description\" content=\"Discover what UI moodboards are and learn how they can help you perfect product aesthetics. Get our do&#039;s and dont&#039;s of UI mood board.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"8 Tips for Shaping Product Aesthetics with UI Mood Boards\" \/>\n<meta property=\"og:description\" content=\"Discover what UI moodboards are and learn how they can help you perfect product aesthetics. Get our do&#039;s and dont&#039;s of UI mood board.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-05T18:10:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-05T18:12:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"8 Tips for Shaping Product Aesthetics with UI Mood Boards\",\"datePublished\":\"2023-06-05T18:10:49+00:00\",\"dateModified\":\"2023-06-05T18:12:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/\"},\"wordCount\":1478,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png\",\"articleSection\":[\"Blog\",\"Product Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/\",\"name\":\"8 Tips for Shaping Product Aesthetics with UI Mood Boards | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png\",\"datePublished\":\"2023-06-05T18:10:49+00:00\",\"dateModified\":\"2023-06-05T18:12:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Discover what UI moodboards are and learn how they can help you perfect product aesthetics. Get our do's and dont's of UI mood board.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png\",\"width\":1200,\"height\":600,\"caption\":\"Creating Moodboards for Perfecting Product Aesthetics min\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mood-board\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"8 Tips for Shaping Product Aesthetics with UI Mood Boards\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"8 Tips for Shaping Product Aesthetics with UI Mood Boards | UXPin","description":"Discover what UI moodboards are and learn how they can help you perfect product aesthetics. Get our do's and dont's of UI mood board.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/","og_locale":"en_US","og_type":"article","og_title":"8 Tips for Shaping Product Aesthetics with UI Mood Boards","og_description":"Discover what UI moodboards are and learn how they can help you perfect product aesthetics. Get our do's and dont's of UI mood board.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/","og_site_name":"Studio by UXPin","article_published_time":"2023-06-05T18:10:49+00:00","article_modified_time":"2023-06-05T18:12:42+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"8 Tips for Shaping Product Aesthetics with UI Mood Boards","datePublished":"2023-06-05T18:10:49+00:00","dateModified":"2023-06-05T18:12:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/"},"wordCount":1478,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png","articleSection":["Blog","Product Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/","name":"8 Tips for Shaping Product Aesthetics with UI Mood Boards | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png","datePublished":"2023-06-05T18:10:49+00:00","dateModified":"2023-06-05T18:12:42+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Discover what UI moodboards are and learn how they can help you perfect product aesthetics. Get our do's and dont's of UI mood board.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Creating-Moodboards-for-Perfecting-Product-Aesthetics-min.png","width":1200,"height":600,"caption":"Creating Moodboards for Perfecting Product Aesthetics min"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"8 Tips for Shaping Product Aesthetics with UI Mood Boards"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/45172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=45172"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/45172\/revisions"}],"predecessor-version":[{"id":45182,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/45172\/revisions\/45182"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/45173"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=45172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=45172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=45172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}