{"id":3630,"date":"2015-10-20T15:55:20","date_gmt":"2015-10-20T13:55:20","guid":{"rendered":"http:\/\/www.bluehair.co\/?p=3630"},"modified":"2016-02-04T11:58:06","modified_gmt":"2016-02-04T10:58:06","slug":"easy-mobile-prototyping-with-pixate","status":"publish","type":"post","link":"https:\/\/www.bluehair.co\/corner\/2015\/10\/easy-mobile-prototyping-with-pixate\/","title":{"rendered":"Easy mobile prototyping with Pixate"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3632\" src=\"http:\/\/www.bluehair.co\/corner\/wp-content\/uploads\/2015\/10\/Pixate-header.png\" alt=\"\" width=\"630\" height=\"350\" srcset=\"https:\/\/www.bluehair.co\/corner\/wp-content\/uploads\/2015\/10\/Pixate-header.png 630w, https:\/\/www.bluehair.co\/corner\/wp-content\/uploads\/2015\/10\/Pixate-header-315x175.png 315w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/p>\n<p>I&#8217;ve been\u00a0looking recently\u00a0into playing a little bit more with\u00a0new\u00a0tools meant for digital designers like myself. Don&#8217;t get me wrong, I am perfectly happy with my <a href=\"http:\/\/www.bluehair.co\/2015\/09\/a-quick-guide-to-best-practices-for-user-interace-design-on-illustrator\/\" target=\"_blank\">Illustrator<\/a>\/Visio\/Flash combo for all my UI\/Workflows\/Prototyping needs, but I figured it&#8217;s always good to keep your eyes open for new toys. So long story short, while browsing through <a href=\"https:\/\/design.google.com\/\" target=\"_blank\">Google&#8217;s Design Blog<\/a> I came across <a href=\"http:\/\/www.pixate.com\/\" target=\"_blank\">Pixate<\/a> (since apparently they were recently acquired by Google) a fairly new prototyping tool for mobile (Android and iOS) which seemed worth a try.<\/p>\n<p><!--more--><\/p>\n<p>Pixate is a pretty simple tool that allows you to import graphical assets\u00a0(such as\u00a0screens, icons, and other\u00a0UI elements) and\u00a0then assign interactions and\/or animations to\u00a0them\u00a0(such as taps, swipes and scaling), to create transitions and flows between the different screens and states of your app. The beautiful thing about Pixate, is that you can test your prototype directly on you mobile device with very little effort, as if it was a native app.<\/p>\n<p>Google has\u00a0made Pixate Studio free of charge, which means you can create all the prototypes you want for your own internal testing. Awesome news! If you want the ability to share your prototypes online via a link or QR code, you will have to pay a subscription though.<\/p>\n<p>I figured the best way of giving the tool a try would be to\u00a0create a prototype of <a href=\"http:\/\/www.bluehair.co\/2010\/01\/pontual-design-of-an-amsterdam-ferry-catching-app\/\" target=\"_blank\">Pontual<\/a>,\u00a0a\u00a0ferry catching app\u00a0I worked on in the past, which meant I had all my assets ready to go. And I could then share my experience with it\u00a0here.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/143006239?byline=0&amp;portrait=0\" width=\"630\" height=\"354\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Starting off was a bit tricky though, as\u00a0Pixate&#8217;s interface\u00a0looks so simple, that you imagine you can just learn it by clicking around a little bit on one of the various samples that come with it. Unfortunately this was not the case, as you need to learn a bit of the principles behind it before you can make any real progress. Luckily for us, Pixate has created a nice library of <a href=\"http:\/\/help.pixate.com\/knowledgebase\/articles\/461798-1-introduction\" target=\"_blank\">tutorials<\/a> and <a href=\"http:\/\/www.pixate.com\/education\/video-tutorials\/\" target=\"_blank\">videos<\/a> that explain all the basics, and an array of <a href=\"http:\/\/www.pixate.com\/education\/demos\/\" target=\"_blank\">downloadable examples<\/a> for you to play around with and learn as you fiddle with them.<\/p>\n<p>Pixate doesn&#8217;t really offer the possibility to create assets of any kind within it, so if you need a text for example, you&#8217;re gonna need to create an image out of it and import it. Given that it&#8217;s such a &#8220;young&#8221; tool, it&#8217;s understandable that\u00a0some\u00a0features are not there yet, and the developers say that this kind of functionality is in the pipeline, which will be a welcome addition. Still, you will have to keep in mind that EVERYTHING you want in your prototype will have to be created somewhere else and imported into the stage.<\/p>\n<p>So you import assets, you place them on the stage and you start assigning interactions and\/or animations to them. For instance, if you want a button to trigger a menu sliding in from the side, you add a &#8220;tap&#8221; interaction to the button asset and you add an &#8220;animation&#8221; to the menu asset,\u00a0telling\u00a0it to slide in when the button is tapped. By assigning animations to other assets which are also triggered by tapping the same\u00a0button, you can create more advanced changes in your app&#8217;s state.<\/p>\n<p>Being used to prototyping in Flash, which has the possibility to add events and animations based on timelines, made it a bit tricky for me to better grasp the idea behind Pixate, which does not allow you to manage assets based on &#8220;current&#8221; and &#8220;desired&#8221; states by\u00a0placing both of these\u00a0in a timeline\u00a0and creating a &#8220;transition&#8221; between them. So for instance, if you want that menu to slide in as I mentioned, you need to place it in the original position, off screen, and in the &#8220;animation&#8221; event describe that it should slide to a certain position given by pixel coordinates. This of course, does not allow you to directly visualize the end state on the stage as you work, so you have to\u00a0know exactly your coordinates before starting. It is not a bad thing on it&#8217;s own, it just means that you have to know exactly\u00a0how your assets\u00a0should be positioned, for all states,\u00a0before hand.<\/p>\n<p><a href=\"https:\/\/app.pixate.com\/p3e0457531252\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3641 size-full\" src=\"http:\/\/www.bluehair.co\/corner\/wp-content\/uploads\/2015\/10\/Screen-Shot-2016-02-04-at-11.53.25.png\" alt=\"Pixate prototype\" width=\"416\" height=\"383\" \/><\/a><\/p>\n<p>Another unfortunate omission in the functionality (which I&#8217;m sure it&#8217;s in the highest priority of requested features) is\u00a0support for animated\u00a0assets (be it video,\u00a0multiple frames or\u00a0GIFs) which could\u00a0be very handy for things like animated loading icons.<\/p>\n<p>All in all, I was\u00a0kind of sceptical about\u00a0how\u00a0overly simplistic the options seemed to be, and whether or not I would be able to create a full high quality prototype with it, or would have to concentrate on separate\u00a0individual interactions and transitions. But\u00a0once I got the hang of the principles, Pixate turned out to be a very powerful tool that allows you to take advantage of a whole bunch of standard interactions and\u00a0animations out of the box, which if used and combined smartly, can actually produce quite elaborate prototypes that can be\u00a0tested DIRECTLY on your mobile device, and that is a great selling point for the tool. It even allows you to prototype and test directly on Android Wear and Apple Watch!<\/p>\n<p>For more advanced functionality\u00a0I will probably still stick to Flash, as it provides me with a more robust scripting environment in which I can basically just program a full application that can load data, play audio\/video on demand, and in general deal with more complex interactions and functionality. Yet, if we stick to the actual goal of using prototypes to quickly test your vision, flow and interactions without necessarily having all as working\u00a0functionality, then Pixate is a really\u00a0fantastic tool.<\/p>\n<h2>PROS:<\/h2>\n<ul>\n<li>Free!<\/li>\n<li>Simple and user friendly<\/li>\n<li>Changes you make become\u00a0IMMEDIATELY available on the connected\u00a0mobile device, so you can directly test anything as you make it<\/li>\n<li>All the basic interactions and animations expected from modern mobile OS&#8217;s are available (pinching, swiping, bouncing scrolls&#8230;) and very easy to implement<\/li>\n<li>Very easy sharing of your prototypes as online links<\/li>\n<li>Support for Android Wear and Apple Watch<\/li>\n<li>Great\u00a0online help from the developing team via their <a href=\"http:\/\/community.pixate.com\/\" target=\"_blank\">Community site<\/a><\/li>\n<\/ul>\n<h2>CONS:<\/h2>\n<ul>\n<li>More advanced prototypes are not impossible, but certainly tricky to manage, and my experience so far has shown that the more assets and functionality you add to them, the slower the performance. Some animations which were smooth at the beginning, became choppy as the prototype became more complex.<\/li>\n<li>Some basic functionality still lacking, such as zooming (for pixel perfect alignment and so you can work on smaller screens)<\/li>\n<li>No &#8220;Save&#8221; button, so if you want to explore new ideas without breaking up your stable prototype, you better make a copy of it before you start<\/li>\n<li>No support for video or animations<\/li>\n<li>Still a bit buggy on Windows. Some functionality does not work (e.g. undo with Ctrl+Z keyboard shortcut)<\/li>\n<\/ul>\n<p>For a nice and comprehensive review of different prototyping tools, I suggest you take a look at\u00a0<a href=\"http:\/\/cptv8.com\/post\/121276126300\/five-app-prototyping-tools-compared-form-framer\" target=\"_blank\">THIS<\/a> excellent article and this <a href=\"http:\/\/cptv8.com\/post\/129559875825\/three-more-prototyping-tools-compared-principle\" target=\"_blank\">FOLLOW-UP<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been\u00a0looking recently\u00a0into playing a little bit more with\u00a0new\u00a0tools meant for digital designers like myself. Don&#8217;t get me wrong, I am perfectly happy with my Illustrator\/Visio\/Flash combo for all my UI\/Workflows\/Prototyping needs, but I figured it&#8217;s always good to keep your eyes open for new toys. So long story short, while browsing through Google&#8217;s Design [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[10,4,5],"tags":[48,122,94,30,64,63],"class_list":["post-3630","post","type-post","status-publish","format-standard","hentry","category-bluehairing","category-designing","category-interaction","tag-prototyping","tag-tools","tag-usability","tag-user-experience","tag-user-interfaces","tag-videos"],"_links":{"self":[{"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/posts\/3630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/comments?post=3630"}],"version-history":[{"count":17,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/posts\/3630\/revisions"}],"predecessor-version":[{"id":3676,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/posts\/3630\/revisions\/3676"}],"wp:attachment":[{"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/media?parent=3630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/categories?post=3630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/tags?post=3630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}