{"id":1814,"date":"2015-03-16T10:44:59","date_gmt":"2015-03-16T10:44:59","guid":{"rendered":"https:\/\/blogs.kent.ac.uk\/webdev\/?p=1814"},"modified":"2015-08-05T15:54:32","modified_gmt":"2015-08-05T14:54:32","slug":"building-mood-boards","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2015\/03\/16\/building-mood-boards\/","title":{"rendered":"Building mood boards"},"content":{"rendered":"<p>We recently finished the discovery phase of the\u00a0project to update our website.<\/p>\n<p>The discovery phase helped us build up a much clearer idea of the many business needs. We now have a good feel for\u00a0our users&#8217; needs too.<\/p>\n<p>As a way of wrapping up the discovery phase and starting our alpha phase we decided to have a mood board workshop.<\/p>\n<h2>So what is a mood board?<\/h2>\n<p>Mood boards have long been used in design as a way to communicate the overall, well\u2026 mood\u2026 of the thing to be designed.<\/p>\n<p>They are as useful in web design as they are in interior design or\u00a0product design.<\/p>\n<p>Mood boards are great for rebranding exercises because they can help show stakeholders what the brand will feel like before it becomes a real thing.<\/p>\n<p>They are also useful as a tool for designers to help them think about and implement a brand.<\/p>\n<p>We found ourselves in this situation during our website theme discovery project. We have a University brand, but how exactly do we turn that into something real? How does that become a fresh and engaging new website?<\/p>\n<h2>What we did?<\/h2>\n<p>We gathered a group of 7 people from across the University\u2019s corporate communications, recruitment, web and user experience teams.<\/p>\n<p>Then we\u00a0printed out screenshots from a bunch of interesting websites, got a stack of web and design magazines, cut the whole lot up, and stuck the cutouts onto a series of boards.<\/p>\n<p>We also took the key themes of the brand and added them to the boards to remind us what we were trying to capture. These were things like: innovation, confident, intelligent, vibrant locations, passionate, engaging&#8230;<\/p>\n<p>The process of doing this was fun (therapeutic?!). It also helped us think about our corporate brand, and how that might or might not work in terms of meeting corporate objectives and user needs.<\/p>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-1' class='gallery galleryid-1814 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1902.jpg'><img width=\"1024\" height=\"769\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1902-1024x769.jpg\" class=\"attachment-large size-large\" alt=\"mood board #2\" loading=\"lazy\" aria-describedby=\"gallery-1-1816\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1902-1024x769.jpg 1024w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1902-300x225.jpg 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1902-1920x1441.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-1816'>\n\t\t\t\tConfidence, boldness, clarity.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1903.jpg'><img width=\"1024\" height=\"769\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1903-1024x769.jpg\" class=\"attachment-large size-large\" alt=\"mood board #1\" loading=\"lazy\" aria-describedby=\"gallery-1-1818\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1903-1024x769.jpg 1024w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1903-300x225.jpg 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1903-1920x1441.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-1818'>\n\t\t\t\tAllow freedom for more imaginative content in the right context.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1901.jpg'><img width=\"1024\" height=\"768\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1901-1024x768.jpg\" class=\"attachment-large size-large\" alt=\"mood board #2\" loading=\"lazy\" aria-describedby=\"gallery-1-1817\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1901-1024x768.jpg 1024w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1901-300x225.jpg 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2015\/03\/IMG_1901-1920x1441.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-1817'>\n\t\t\t\tThere is a Third Way between happy jumping people and dull studiousness.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2>Conclusions from our\u00a0workshop<\/h2>\n<p>Overall our workshop was a great way to highlight how we felt the existing brand could be delivered.<\/p>\n<p>It highlighted how some of the details of the brand will need to be tweaked if we&#8217;re going to meet the key themes.<\/p>\n<p>Below are some of the issues we discussed during the workshop.<\/p>\n<ul>\n<li>Content is king.<\/li>\n<li>Confident. Vibrant. Positive. <em>Confident<\/em>\u00a0is one of the key words in our brand. So why don&#8217;t we represent that anywhere on our website?<\/li>\n<li>A\u00a0more of a personal angle.<\/li>\n<li>Ensure the prospective students can visualise themselves here. Do they identify with the people in the photos?<\/li>\n<li>We need a strong focus on imagery. Imagery creates atmosphere, personality and distinctiveness.<\/li>\n<li>Current brand imagery doesn\u2019t really do justice for online imagery. It can feel a bit like stock photography. Imagery can feel dull, bland, weak, impersonal, distant &#8211; where is the energy?<\/li>\n<li>Some images and types of content are appropriate for some contexts. Someone staring confidently at the camera might be ok for a profile story but not for creating a lighter atmosphere.<\/li>\n<li>Whitespace.<\/li>\n<li>Simplicity.<\/li>\n<li>How can colours be used?<\/li>\n<li>Simple, clear information through\u00a0infographics. We need clear guidelines and patterns for infographics.<\/li>\n<li>Build so that themes can adapt and look fresh over time as trends change.<\/li>\n<li>How do we represent functional information vs marketing information.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We recently finished the discovery phase of the\u00a0project to update our website. The discovery phase helped us build up a much clearer idea of the &hellip; <a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/2015\/03\/16\/building-mood-boards\/\">Read&nbsp;more<\/a><\/p>\n","protected":false},"author":2,"featured_media":1825,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79410,79443,79395],"tags":[79442,79463,23153,79392],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1814"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=1814"}],"version-history":[{"count":7,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1814\/revisions"}],"predecessor-version":[{"id":1826,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1814\/revisions\/1826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media\/1825"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=1814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=1814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=1814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}