{"id":2737,"date":"2016-01-24T15:09:00","date_gmt":"2016-01-24T15:09:00","guid":{"rendered":"https:\/\/frasersm.it\/h\/?p=2737"},"modified":"2021-03-01T18:22:02","modified_gmt":"2021-03-01T18:22:02","slug":"living-illustration","status":"publish","type":"post","link":"https:\/\/frasersm.it\/h\/living-illustration\/","title":{"rendered":"Living Illustration"},"content":{"rendered":"\n<iframe src=\"https:\/\/frasersm.it\/h\/pages\/engineerparallax\/hsEvCrop.html\" style=\"width:100vw; height: 48vw\"><\/iframe>\n\n\n\n<div class=\"is-layout-flow wp-block-group width_60\"><div class=\"wp-block-group__inner-container\">\n<p class=\"has-drop-cap\">This is a &#8216;Living Illustration&#8217; I produced for the Sky Q project. The idea of a &#8216;Living Illustration&#8217; is to bring a page to life by adding subtle movement. More than just a gif though, it incorporates a low-stakes interactive element, to involve the user as they navigate their mouse pointer around the page.<\/p>\n\n\n\n<p>The illustration is based on a heavily edited version of an existing photo. I sliced the photo into layers which move in parallax as the users mouse moves. Added to that, I took a video of the new Sky Q menus being navigated, altered the perspective to fit the image then overlaid it onto the screen in the illustration.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The idea of a &#8216;Living Illustration&#8217; is to bring a page to life by adding subtle interactive movement. <\/p>\n","protected":false},"author":1,"featured_media":3015,"comment_status":"closed","ping_status":"open","sticky":false,"template":"template-full-width-post.php","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[312,313,9,3],"tags":[],"jetpack_publicize_connections":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Living Illustration | Fraser Smith<\/title>\n<meta name=\"description\" content=\"The idea of a &#039;Living Illustration&#039; is to bring a page to life by adding subtle movement.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/frasersm.it\/h\/living-illustration\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Living Illustration | Fraser Smith\" \/>\n<meta property=\"og:description\" content=\"The idea of a &#039;Living Illustration&#039; is to bring a page to life by adding subtle movement.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/frasersm.it\/h\/living-illustration\/\" \/>\n<meta property=\"og:site_name\" content=\"Fraser Smith\" \/>\n<meta property=\"article:publisher\" content=\"fraserYT\" \/>\n<meta property=\"article:author\" content=\"fraserYT\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-24T15:09:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-01T18:22:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i2.wp.com\/frasersm.it\/h\/wp-content\/uploads\/2016\/01\/Screenshot-2021-03-01-at-13.jpg?fit=1884%2C1053&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1884\" \/>\n\t<meta property=\"og:image:height\" content=\"1053\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"fraser\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fraserYT\" \/>\n<meta name=\"twitter:site\" content=\"@fraserYT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"fraser\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/frasersm.it\/h\/living-illustration\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/frasersm.it\/h\/living-illustration\/\"},\"author\":{\"name\":\"fraser\",\"@id\":\"https:\/\/frasersm.it\/h\/#\/schema\/person\/748b94e28b500f919c05149e4d04c1fe\"},\"headline\":\"Living Illustration\",\"datePublished\":\"2016-01-24T15:09:00+00:00\",\"dateModified\":\"2021-03-01T18:22:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/frasersm.it\/h\/living-illustration\/\"},\"wordCount\":115,\"publisher\":{\"@id\":\"https:\/\/frasersm.it\/h\/#\/schema\/person\/748b94e28b500f919c05149e4d04c1fe\"},\"articleSection\":[\"Code\",\"Design\",\"Motion\",\"Visual\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/frasersm.it\/h\/living-illustration\/\",\"url\":\"https:\/\/frasersm.it\/h\/living-illustration\/\",\"name\":\"Living Illustration | Fraser Smith\",\"isPartOf\":{\"@id\":\"https:\/\/frasersm.it\/h\/#website\"},\"datePublished\":\"2016-01-24T15:09:00+00:00\",\"dateModified\":\"2021-03-01T18:22:02+00:00\",\"description\":\"The idea of a 'Living Illustration' is to bring a page to life by adding subtle movement.\",\"breadcrumb\":{\"@id\":\"https:\/\/frasersm.it\/h\/living-illustration\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/frasersm.it\/h\/living-illustration\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/frasersm.it\/h\/living-illustration\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/frasersm.it\/h\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Living Illustration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/frasersm.it\/h\/#website\",\"url\":\"https:\/\/frasersm.it\/h\/\",\"name\":\"Fraser Smith\",\"description\":\"Digital Design | Full Stack Creative\",\"publisher\":{\"@id\":\"https:\/\/frasersm.it\/h\/#\/schema\/person\/748b94e28b500f919c05149e4d04c1fe\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/frasersm.it\/h\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/frasersm.it\/h\/#\/schema\/person\/748b94e28b500f919c05149e4d04c1fe\",\"name\":\"fraser\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/frasersm.it\/h\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/i0.wp.com\/frasersm.it\/h\/wp-content\/uploads\/2021\/02\/logo2.png?fit=317%2C317&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/frasersm.it\/h\/wp-content\/uploads\/2021\/02\/logo2.png?fit=317%2C317&ssl=1\",\"width\":317,\"height\":317,\"caption\":\"fraser\"},\"logo\":{\"@id\":\"https:\/\/frasersm.it\/h\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/frasersm.it\/h\",\"fraserYT\",\"https:\/\/twitter.com\/fraserYT\"],\"url\":\"https:\/\/frasersm.it\/h\/author\/fraser\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Living Illustration | Fraser Smith","description":"The idea of a 'Living Illustration' is to bring a page to life by adding subtle movement.","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:\/\/frasersm.it\/h\/living-illustration\/","og_locale":"en_GB","og_type":"article","og_title":"Living Illustration | Fraser Smith","og_description":"The idea of a 'Living Illustration' is to bring a page to life by adding subtle movement.","og_url":"https:\/\/frasersm.it\/h\/living-illustration\/","og_site_name":"Fraser Smith","article_publisher":"fraserYT","article_author":"fraserYT","article_published_time":"2016-01-24T15:09:00+00:00","article_modified_time":"2021-03-01T18:22:02+00:00","og_image":[{"width":1884,"height":1053,"url":"https:\/\/i2.wp.com\/frasersm.it\/h\/wp-content\/uploads\/2016\/01\/Screenshot-2021-03-01-at-13.jpg?fit=1884%2C1053&ssl=1","type":"image\/jpeg"}],"author":"fraser","twitter_card":"summary_large_image","twitter_creator":"@fraserYT","twitter_site":"@fraserYT","twitter_misc":{"Written by":"fraser","Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/frasersm.it\/h\/living-illustration\/#article","isPartOf":{"@id":"https:\/\/frasersm.it\/h\/living-illustration\/"},"author":{"name":"fraser","@id":"https:\/\/frasersm.it\/h\/#\/schema\/person\/748b94e28b500f919c05149e4d04c1fe"},"headline":"Living Illustration","datePublished":"2016-01-24T15:09:00+00:00","dateModified":"2021-03-01T18:22:02+00:00","mainEntityOfPage":{"@id":"https:\/\/frasersm.it\/h\/living-illustration\/"},"wordCount":115,"publisher":{"@id":"https:\/\/frasersm.it\/h\/#\/schema\/person\/748b94e28b500f919c05149e4d04c1fe"},"articleSection":["Code","Design","Motion","Visual"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/frasersm.it\/h\/living-illustration\/","url":"https:\/\/frasersm.it\/h\/living-illustration\/","name":"Living Illustration | Fraser Smith","isPartOf":{"@id":"https:\/\/frasersm.it\/h\/#website"},"datePublished":"2016-01-24T15:09:00+00:00","dateModified":"2021-03-01T18:22:02+00:00","description":"The idea of a 'Living Illustration' is to bring a page to life by adding subtle movement.","breadcrumb":{"@id":"https:\/\/frasersm.it\/h\/living-illustration\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/frasersm.it\/h\/living-illustration\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/frasersm.it\/h\/living-illustration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/frasersm.it\/h\/"},{"@type":"ListItem","position":2,"name":"Living Illustration"}]},{"@type":"WebSite","@id":"https:\/\/frasersm.it\/h\/#website","url":"https:\/\/frasersm.it\/h\/","name":"Fraser Smith","description":"Digital Design | Full Stack Creative","publisher":{"@id":"https:\/\/frasersm.it\/h\/#\/schema\/person\/748b94e28b500f919c05149e4d04c1fe"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/frasersm.it\/h\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":["Person","Organization"],"@id":"https:\/\/frasersm.it\/h\/#\/schema\/person\/748b94e28b500f919c05149e4d04c1fe","name":"fraser","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/frasersm.it\/h\/#\/schema\/person\/image\/","url":"https:\/\/i0.wp.com\/frasersm.it\/h\/wp-content\/uploads\/2021\/02\/logo2.png?fit=317%2C317&ssl=1","contentUrl":"https:\/\/i0.wp.com\/frasersm.it\/h\/wp-content\/uploads\/2021\/02\/logo2.png?fit=317%2C317&ssl=1","width":317,"height":317,"caption":"fraser"},"logo":{"@id":"https:\/\/frasersm.it\/h\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/frasersm.it\/h","fraserYT","https:\/\/twitter.com\/fraserYT"],"url":"https:\/\/frasersm.it\/h\/author\/fraser\/"}]}},"author_meta":{"display_name":"fraser","author_link":"https:\/\/frasersm.it\/h\/author\/fraser\/"},"featured_img":"https:\/\/i0.wp.com\/frasersm.it\/h\/wp-content\/uploads\/2016\/01\/Screenshot-2021-03-01-at-13.jpg?fit=300%2C168&ssl=1","jetpack_featured_media_url":"https:\/\/i0.wp.com\/frasersm.it\/h\/wp-content\/uploads\/2016\/01\/Screenshot-2021-03-01-at-13.jpg?fit=1884%2C1053&ssl=1","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/frasersm.it\/h\/work\/code\/\" class=\"advgb-post-tax-term\">Code<\/a>","<a href=\"https:\/\/frasersm.it\/h\/work\/design\/\" class=\"advgb-post-tax-term\">Design<\/a>","<a href=\"https:\/\/frasersm.it\/h\/work\/motion\/\" class=\"advgb-post-tax-term\">Motion<\/a>","<a href=\"https:\/\/frasersm.it\/h\/work\/visual\/\" class=\"advgb-post-tax-term\">Visual<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Code<\/span>","<span class=\"advgb-post-tax-term\">Design<\/span>","<span class=\"advgb-post-tax-term\">Motion<\/span>","<span class=\"advgb-post-tax-term\">Visual<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 10 years ago","modified":"Updated 5 years ago"},"absolute_dates":{"created":"Posted on January 24, 2016","modified":"Updated on March 1, 2021"},"absolute_dates_time":{"created":"Posted on January 24, 2016 3:09 pm","modified":"Updated on March 1, 2021 6:22 pm"},"featured_img_caption":"","series_order":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pawKdL-I9","_links":{"self":[{"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/posts\/2737"}],"collection":[{"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/comments?post=2737"}],"version-history":[{"count":55,"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/posts\/2737\/revisions"}],"predecessor-version":[{"id":3019,"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/posts\/2737\/revisions\/3019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/media\/3015"}],"wp:attachment":[{"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/media?parent=2737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/categories?post=2737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frasersm.it\/h\/wp-json\/wp\/v2\/tags?post=2737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}