{"id":3479,"date":"2018-02-13T13:23:47","date_gmt":"2018-02-13T13:23:47","guid":{"rendered":"https:\/\/jamiebrightmore.com\/?p=3479"},"modified":"2020-04-02T11:36:39","modified_gmt":"2020-04-02T10:36:39","slug":"brand-website-refresh-2018","status":"publish","type":"post","link":"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/","title":{"rendered":"Brand and Website Refresh 2018"},"content":{"rendered":"<p>I&#8217;ve just completed some work to realign my brand <em>Jaybee Productions <\/em>and redesign areas of this website<em>.<\/em>\u00a0Here&#8217;s a few words on the thinking and process.<\/p>\n<h2>Brand Ident<\/h2>\n<p>Beginning with the ident, I&#8217;ve decided to remove the encasing pentagram, resulting in the solid white\u00a0<em>Jb\u2122<\/em> script mark.<\/p>\n<p>I&#8217;ve been using this script mark on photo watermarks for a while and feel the bolder appearance is more aesthetically pleasing.<\/p>\n<p>The addition of the trademark symbol (UK) and <em>Jaybee Productions<\/em> wordmark pairings, aims to strengthen my brand proposition which I am continuing to push forward with this year.<\/p>\n<ul class=\"blockgrid small-block-grid-3 medium-block-grid-3 large-block-grid-3 \">\n<li>\n<figure><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn.4muladesign.com\/clients\/jb\/assets\/uploads\/2018\/02\/brand-refresh-1.jpg\" alt=\"\" width=\"500\" height=\"500\" \/><figcaption>Previous mark<\/figcaption><\/figure>\n<\/li>\n<li>\n<figure><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn.4muladesign.com\/clients\/jb\/assets\/uploads\/2018\/02\/brand-refresh-2.jpg\" alt=\"\" width=\"500\" height=\"500\" \/><figcaption>Refreshed mark<\/figcaption><\/figure>\n<\/li>\n<li>\n<figure><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn.4muladesign.com\/clients\/jb\/assets\/uploads\/2018\/02\/brand-refresh-3.1.jpg\" alt=\"\" width=\"500\" height=\"500\" \/><figcaption>Wordmark pairing<\/figcaption><\/figure>\n<\/li>\n<\/ul>\n<h2>Website Homepage<\/h2>\n<p>I&#8217;ve redesigned this website&#8217;s\u00a0<a href=\"https:\/\/jamiebrightmore.com\/\">homepage<\/a>\u00a0with a single goal in mind: to quickly draw focus to my main service areas; Filmmaking, Aerial Photography, and Timelapse.<\/p>\n<p>The previous homepage cycled though these areas over around 10 seconds, each using; fullscreen photography, strap lines, and x2 call-to-action buttons. Ultimately this would result an undesirable outcome: for a user to potentially be forced to watch this cycle play out, then be faced with a choice of one x6 call-to-action buttons (when on-screen).<\/p>\n<p>Clearly this was too arbitrary, complex, haphazard, and clunky for a main landing page.<\/p>\n<p>So, the motivation behind this redesign was to remove this complexity and provide an easy-to-digest initial<strong>\u00a0<\/strong>outlook to my overall proposition, inviting a user to dig a little deeper.<\/p>\n<ul class=\"blockgrid small-block-grid-3 medium-block-grid-3 large-block-grid-3 \">\n<li>\n<figure><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn.4muladesign.com\/clients\/jb\/assets\/uploads\/2018\/02\/brand-refresh-4.jpg\" alt=\"\" width=\"500\" height=\"500\" \/><figcaption>Filmmaking<\/figcaption><\/figure>\n<\/li>\n<li>\n<figure><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn.4muladesign.com\/clients\/jb\/assets\/uploads\/2018\/02\/brand-refresh-5.jpg\" alt=\"\" width=\"500\" height=\"500\" \/><figcaption>Aerial<\/figcaption><\/figure>\n<\/li>\n<li>\n<figure><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn.4muladesign.com\/clients\/jb\/assets\/uploads\/2018\/02\/brand-refresh-6.jpg\" alt=\"\" width=\"500\" height=\"500\" \/><figcaption>Timelapse<\/figcaption><\/figure>\n<\/li>\n<\/ul>\n<p>I designed three simple little &#8216;worlds&#8217; to represent each of the core areas, opting to present these as uniformly shaped isolmetric&#8217;ish graphical plateaus. Each uses a three-way colour system and features an animated sprite element to draw attention.<\/p>\n<p>The graphics were designed in <em>Illustrator,<\/em>\u00a0animated in <em>After Effects,<\/em> then converted into GIFs. I experimented with\u00a0<em>APNG\u00a0<\/em>(animated PNG&#8217;s) for a while, but progress was halted by unstable iOS behaviour, resulting in page crashes.<\/p>\n<p>With some work, the differences between (the more desirable) APNGs and GIFs are only apparent if you zoom into the GIFs animations (mainly dithering artefacts on the sharp back edges).<\/p>\n<p>As previously, the large &#8216;contact&#8217; footer remains throughout the website, providing quick and easy\u00a0access for getting in touch.<\/p>\n<h2>Blog Lander<\/h2>\n<p>The <a href=\"https:\/\/jamiebrightmore.com\/blog\/\">blog landing page<\/a> needed work. Previously this was presented in a similar fashion to a post page (such as the one you are reading), i.e, on the desktop layout,\u00a0a long list of posts on the left coupled with an equally long sidebar (which was really designed just for use on post pages).<\/p>\n<p>The idea behind this section&#8217;s refresh was to provide a wider overview of posts, more of a dynamic &#8216;spread&#8217; as opposed to an uninspiring list.<\/p>\n<p>This new layout includes areas highlighting\u00a0<em>Featured<\/em> and <em>Roundup<\/em> posts and is arranged using a grid eliminating the sidebar. The mobile layout uses a new 2&#215;2 grid for these sections, a more compact arrangement to ease scrolling.<\/p>\n<p>Two useful sidebar items were retained for inclusion;\u00a0<em>Recent Work<\/em>; and <em>Signup<\/em>, with the addition of a new\u00a0<em>Micro Blog<\/em> area.<\/p>\n<p>Archive posts are available lower down the page in smaller units. These are hidden from the mobile layout, to reduce clutter and excess scrolling on smaller devices.<\/p>\n<h2>Other Bits<\/h2>\n<p>Aside from some minor UI tweaks, the <a href=\"https:\/\/jamiebrightmore.com\/filmmaking\/\">inner service pages<\/a> are pretty much untouched, as I feel these still serve the content well.<\/p>\n<p>I made numerous tweaks to the overall site, all documented <a href=\"https:\/\/jamiebrightmore.com\/changelog\/\">here<\/a> if interested. Dynamic websites constantly require iteration, no doubt I&#8217;ll be addressing other things going forward.<\/p>\n<p>Hope this was a useful insight for someone. I think it&#8217;s a good exercise to continually review your work and to describe the thinking behind design decisions.<\/p>\n","protected":false},"excerpt":{"rendered":"Some details on recent work to refresh my brand identity and\u00a0redesign the homepage and blog areas of this website.","protected":false},"author":1,"featured_media":3524,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[108,76,60,357,61,17,11,261,262,356],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Brand and Website Refresh 2018 - Jaybee Productions UK<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Brand and Website Refresh 2018 - Jaybee Productions UK\" \/>\n<meta property=\"og:description\" content=\"Some details on recent work to refresh my brand identity and\u00a0redesign the homepage and blog areas of this website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/\" \/>\n<meta property=\"og:site_name\" content=\"Jaybee Productions UK\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-13T13:23:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-02T10:36:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.4muladesign.com\/clients\/jb\/assets\/uploads\/2018\/02\/brand-refresh-hero.02.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2600\" \/>\n\t<meta property=\"og:image:height\" content=\"1105\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jaybee\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jaybee\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/\",\"url\":\"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/\",\"name\":\"Brand and Website Refresh 2018 - Jaybee Productions UK\",\"isPartOf\":{\"@id\":\"https:\/\/jamiebrightmore.com\/#website\"},\"datePublished\":\"2018-02-13T13:23:47+00:00\",\"dateModified\":\"2020-04-02T10:36:39+00:00\",\"author\":{\"@id\":\"https:\/\/jamiebrightmore.com\/#\/schema\/person\/231990d332b8549ce8d09f4bd1085aa0\"},\"breadcrumb\":{\"@id\":\"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jamiebrightmore.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Brand and Website Refresh 2018\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jamiebrightmore.com\/#website\",\"url\":\"https:\/\/jamiebrightmore.com\/\",\"name\":\"Jaybee Productions UK\",\"description\":\"Designer &amp; Filmmaker - Bristol\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jamiebrightmore.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/jamiebrightmore.com\/#\/schema\/person\/231990d332b8549ce8d09f4bd1085aa0\",\"name\":\"jaybee\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/jamiebrightmore.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/360ca2c40299db43f2204f71fb7529ff?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/360ca2c40299db43f2204f71fb7529ff?s=96&d=retro&r=g\",\"caption\":\"jaybee\"},\"url\":\"https:\/\/jamiebrightmore.com\/author\/jaybee\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Brand and Website Refresh 2018 - Jaybee Productions UK","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:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/","og_locale":"en_GB","og_type":"article","og_title":"Brand and Website Refresh 2018 - Jaybee Productions UK","og_description":"Some details on recent work to refresh my brand identity and\u00a0redesign the homepage and blog areas of this website.","og_url":"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/","og_site_name":"Jaybee Productions UK","article_published_time":"2018-02-13T13:23:47+00:00","article_modified_time":"2020-04-02T10:36:39+00:00","og_image":[{"width":2600,"height":1105,"url":"https:\/\/cdn.4muladesign.com\/clients\/jb\/assets\/uploads\/2018\/02\/brand-refresh-hero.02.jpg","type":"image\/jpeg"}],"author":"jaybee","twitter_card":"summary_large_image","twitter_misc":{"Written by":"jaybee","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/","url":"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/","name":"Brand and Website Refresh 2018 - Jaybee Productions UK","isPartOf":{"@id":"https:\/\/jamiebrightmore.com\/#website"},"datePublished":"2018-02-13T13:23:47+00:00","dateModified":"2020-04-02T10:36:39+00:00","author":{"@id":"https:\/\/jamiebrightmore.com\/#\/schema\/person\/231990d332b8549ce8d09f4bd1085aa0"},"breadcrumb":{"@id":"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jamiebrightmore.com\/graphic-design\/brand-website-refresh-2018\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jamiebrightmore.com\/"},{"@type":"ListItem","position":2,"name":"Brand and Website Refresh 2018"}]},{"@type":"WebSite","@id":"https:\/\/jamiebrightmore.com\/#website","url":"https:\/\/jamiebrightmore.com\/","name":"Jaybee Productions UK","description":"Designer &amp; Filmmaker - Bristol","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jamiebrightmore.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/jamiebrightmore.com\/#\/schema\/person\/231990d332b8549ce8d09f4bd1085aa0","name":"jaybee","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/jamiebrightmore.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/360ca2c40299db43f2204f71fb7529ff?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/360ca2c40299db43f2204f71fb7529ff?s=96&d=retro&r=g","caption":"jaybee"},"url":"https:\/\/jamiebrightmore.com\/author\/jaybee\/"}]}},"_links":{"self":[{"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/posts\/3479"}],"collection":[{"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/comments?post=3479"}],"version-history":[{"count":3,"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/posts\/3479\/revisions"}],"predecessor-version":[{"id":3541,"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/posts\/3479\/revisions\/3541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/media\/3524"}],"wp:attachment":[{"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/media?parent=3479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/categories?post=3479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamiebrightmore.com\/wp-json\/wp\/v2\/tags?post=3479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}