{"id":90,"date":"2016-07-06T08:07:43","date_gmt":"2016-07-06T08:07:43","guid":{"rendered":"http:\/\/www.trevorwells.com\/wordpress\/?p=90"},"modified":"2016-07-10T13:37:17","modified_gmt":"2016-07-10T13:37:17","slug":"rocket-animation-ideation-sketch-sketch-sketch","status":"publish","type":"post","link":"https:\/\/www.trevorwells.com\/?p=90","title":{"rendered":"Animated rocket ideation: sketch, sketch, sketch!"},"content":{"rendered":"

The brief was to communicate the new company marketing strategy for its software workflow Author, Deploy, Manage<\/em>\u00a0via the website to coincide with a major release.<\/span><\/p>\n

This was to go on the homepage as the centre piece and incorporate the themes: 2D, 3D, games, apps, rapid deployment to multiple platforms, high performance, analytics and management.<\/span><\/p>\n

The three stages of the software workflow being; Author<\/em> which is the design and creation of a game or app, <\/span><\/p>\n

Deploy<\/em> being the use of the tool to target multiple platforms from a single codebase and Manage<\/em> whereupon Cloud based services can be used to produce analytics.<\/span><\/p>\n

I knew I wanted to use a rocket as a way of helping to communicate the themes and that it should be animated to catch people’s attention. \u00a0So I started to sketch ideas around rockets and mobile devices…<\/span><\/p>\n

\"Rocket<\/a><\/p>\n

…having decided on a few Author, Deploy, Manage<\/em> ideas\u00a0I continue on to what the sequence should be and how to\u00a0display it in browsers across devices. Some initial ideas included vertical movement…<\/p>\n

\"Animated<\/a><\/p>\n

…and others explored\u00a0horizontal movement showing\u00a0the rocket moving from\u00a0left to right while scrolling down.<\/p>\n

As the rocket passes, it’s jet and smoke reveal clouds and sky and\u00a0a message with a call to action.<\/p>\n

\"Animated<\/p>\n

Another horizontal idea shown below, displays the rocket moving whilst\u00a0simultaneously being reflected through various device screens showing\u00a0its different positions along its motion of\u00a0travel.<\/p>\n

\"Rocket<\/a><\/p>\n

I like the idea of the rocket transforming from a 2D image into a 3D image as it passes through\u00a0the screen.<\/p>\n

\"Animated<\/p>\n

A completely different idea also emerges that keeps the animation more contained playing within a collection of devices.<\/p>\n

\"A<\/p>\n

After discussions with stakeholders the final concept for the animation is worked up in more detail (shown below).<\/p>\n

\"Animated<\/p>\n

The animation is in three distinct sections. For Author<\/em> a rocket blueprint appears with a launchpad (1 -2), this represents the design development and launch of a game or app whether 2D or 3D. Deploy<\/em> is shown through the use of the rocket on multiple devices (3). \u00a0 Manage<\/em> is represented by analytical charts and diagrams (4).<\/p>\n

\"rocketsketch6RefineScroll\"<\/a><\/p>\n

Above (1) is a small sitemap for the desktop version of the animation and (2) a possible alternative to how it could work on mobile devices using vertical motion.<\/p>\n

See it working\u00a0here.<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

The brief was to communicate the new company marketing strategy for its software workflow Author, Deploy, Manage\u00a0via the website to coincide with a major release. This was to go on the homepage as the centre piece and incorporate the themes: 2D, 3D, games, apps, rapid deployment to multiple platforms, high performance, analytics and management. The … Continue reading Animated rocket ideation: sketch, sketch, sketch!<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,13],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-portfolio","category-rocketanimation"],"_links":{"self":[{"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=90"}],"version-history":[{"count":23,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":418,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=\/wp\/v2\/posts\/90\/revisions\/418"}],"wp:attachment":[{"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.trevorwells.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}