{"id":850,"date":"2016-09-02T13:58:15","date_gmt":"2016-09-02T13:58:15","guid":{"rendered":"http:\/\/grapnel.net\/blog\/?p=850"},"modified":"2016-09-02T14:47:42","modified_gmt":"2016-09-02T14:47:42","slug":"the-ideal-design-workflow","status":"publish","type":"post","link":"http:\/\/grapnel.net\/blog\/the-ideal-design-workflow\/","title":{"rendered":"Interactive Sarcasm"},"content":{"rendered":"<p>Surfing through various UX posts, I found this handy (and profane) tutorial on common UX tools. He&#8217;s pretty dismissive of the tools in an offhand way, but at least he leaves Fireworks alone. RIP Fireworks, my longtime go-to. For the record, I use paper, Fireworks, Axure, Flinto, Adobe XD and Sketch. Not in that order.<\/p>\n<p>&nbsp;<\/p>\n<h4>The Ideal Design\u00a0Workflow<\/h4>\n<header class=\"container u-maxWidth740\">\n<div class=\"postMetaHeader u-paddingBottom10 row\">\n<div class=\"col u-size12of12 js-postMetaLockup\">\n<div class=\"postMetaLockup postMetaLockup--authorWithBio u-flex js-postMetaLockup\">\n<div class=\"u-flex0\"><a class=\"link avatar u-baseColor--link\" dir=\"auto\" href=\"https:\/\/blog.prototypr.io\/@kh1211?source=post_header_lockup\" data-action=\"show-user-card\" data-action-source=\"post_header_lockup\" data-action-type=\"hover\" data-user-id=\"e46a1bba73bb\" data-collection-slug=\"front-end-dev\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"avatar-image avatar-image--small\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/fit\/c\/60\/60\/1%2A90hRTT3uEMOEMhUQTHl-3g.jpeg?w=625&#038;ssl=1\" alt=\"Go to the profile of Keaton Herzer\" \/><\/a><\/div>\n<div class=\"u-flex1 u-paddingLeft15 u-overflowHidden\">\n<p><a class=\"link link link--darken link--darker u-baseColor--link\" dir=\"auto\" href=\"https:\/\/blog.prototypr.io\/@kh1211?source=post_header_lockup\" data-action=\"show-user-card\" data-action-source=\"post_header_lockup\" data-action-type=\"hover\" data-user-id=\"e46a1bba73bb\" data-collection-slug=\"front-end-dev\">Keaton Herzer<\/a><span class=\"followState js-followState buttonSet-inner\" data-user-id=\"e46a1bba73bb\"><button class=\"button button--primary u-paddingLeft10 u-paddingRight10 u-height18 u-lineHeight16 u-verticalAlignMiddle u-fontSizeSmallest u-uiTextMedium u-noUserSelect button--withChrome u-accentColor--buttonNormal button--follow js-followButton u-marginLeft10 u-marginTopNegative2 u-xs-hide\" data-action=\"toggle-subscribe-user\" data-action-value=\"e46a1bba73bb\" data-action-source=\"post_header_lockup_follow\" data-subscribe-source=\"post_header_lockup\"><span class=\"button-label button-defaultState js-buttonLabel\">Follow<\/span><\/button><\/span><\/p>\n<div class=\"postMetaInline u-noWrapWithEllipsis u-xs-normalWrap u-xs-lineClamp2\"><em>Human. Product Designer @gophilosophie. Fan of tacos.<\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/header>\n<section class=\" section--body section--first\">\n<div class=\"section-content\">\n<div class=\"section-inner sectionLayout--fullWidth\">\n<section class=\" section--body section--first\">\n<div class=\"section-content\">\n<div class=\"section-inner layoutSingleColumn\">\n<p id=\"7ac4\" class=\"graf--p graf-after--figure graf--last\">As designers, we are constantly experimenting with tools and processes in an attempt to find the one that works best. After a great deal of experimentation, I\u2019ve discovered the perfect design workflow, and I\u2019m going to share it with you now. Design is a process and the process I\u2019m going to share is the one I\u2019ve used on all my projects to build habit-forming products that people love.<\/p>\n<\/div>\n<\/div>\n<\/section>\n<section class=\" section--body\">\n<div class=\"section-divider layoutSingleColumn\">\n<hr class=\"section-divider\" \/>\n<\/div>\n<div class=\"section-content\">\n<div class=\"section-inner layoutSingleColumn\">\n<p id=\"4b4f\" class=\"graf--p graf--leading\"><strong class=\"markup--strong markup--p-strong\">1.)<\/strong> Sketching (<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/en.wikipedia.org\/wiki\/Paper\" target=\"_blank\" data-href=\"https:\/\/en.wikipedia.org\/wiki\/Paper\">paper<\/a> and <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/en.wikipedia.org\/wiki\/Pen\" target=\"_blank\" data-href=\"https:\/\/en.wikipedia.org\/wiki\/Pen\">pen<\/a>)\u200a\u2014\u200aevery great design begins on paper. Get out that paper and pen and start drawing some shapes.<\/p>\n<figure id=\"dd47\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*KJ0HplGCIcUkzVJqWhujyg.jpeg\" data-width=\"525\" data-height=\"296\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"40\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AKJ0HplGCIcUkzVJqWhujyg.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*KJ0HplGCIcUkzVJqWhujyg.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">.&gt;Flawless.<\/figcaption><\/figure>\n<p id=\"0942\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">2.)<\/strong> Your next step is to take photos of your sketches on your smart phone and throw those babies into <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/popapp.in\/\" target=\"_blank\" data-href=\"https:\/\/popapp.in\/\">POP<\/a> so you can test your prototype.<\/p>\n<figure id=\"461c\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AK6rMhNwPzntbu7Vd0p9aMg.gif?w=625&#038;ssl=1\" data-image-id=\"1*K6rMhNwPzntbu7Vd0p9aMg.gif\" data-width=\"1075\" data-height=\"583\" data-action=\"zoom\" data-action-value=\"1*K6rMhNwPzntbu7Vd0p9aMg.gif\" \/><\/p>\n<\/div>\n<\/figure>\n<p id=\"1faf\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">3.)<\/strong> Your next step is to make wireframes. Having sketches is never enough. Wireframes are a must 100% of the time. There is simply no way around it. Go ahead and open <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.omnigroup.com\/omnigraffle\" target=\"_blank\" data-href=\"https:\/\/www.omnigroup.com\/omnigraffle\">Omnigraffle<\/a> and make your wires.<\/p>\n<figure id=\"8048\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*3v-HCiW7uZoej6s_F_q1Rw.png\" data-width=\"1165\" data-height=\"847\" data-action=\"zoom\" data-action-value=\"1*3v-HCiW7uZoej6s_F_q1Rw.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"52\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2A3v-HCiW7uZoej6s_F_q1Rw.png?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*3v-HCiW7uZoej6s_F_q1Rw.png\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"8626\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">4.)<\/strong> Now realize you need a dropdown menu so re-do those wires in<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/balsamiq.com\/\" target=\"_blank\" data-href=\"https:\/\/balsamiq.com\/\">Balsamiq<\/a>.<\/p>\n<figure id=\"b429\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*xJRjDTyhxjVZeQ0PG_woeA.jpeg\" data-width=\"500\" data-height=\"320\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"47\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AxJRjDTyhxjVZeQ0PG_woeA.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*xJRjDTyhxjVZeQ0PG_woeA.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Good when designing for 3rd\u00a0graders.<\/figcaption><\/figure>\n<p id=\"c4b8\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">5.)<\/strong> Next, realize you f***ing hate Balsamiq and redo them in <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.axure.com\/\" target=\"_blank\" data-href=\"http:\/\/www.axure.com\/\">Axure<\/a>.<\/p>\n<figure id=\"4f5a\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2APNBMvQPZlt_fM0b0sN3DNg.gif?w=625&#038;ssl=1\" data-image-id=\"1*PNBMvQPZlt_fM0b0sN3DNg.gif\" data-width=\"700\" data-height=\"461\" \/><\/p>\n<\/div>\n<\/figure>\n<p id=\"1d56\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">6.)<\/strong> Next, realize you f***ing hate Axure so switch over to <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.adobe.com\/products\/illustrator.html?sdid=KKQML&amp;mv=search&amp;s_kwcid=AL!3085!3!81143510076!e!!g!!illustrator&amp;ef_id=VhwgAgAABQ3p7PI3:20160601232231:s\" target=\"_blank\" data-href=\"http:\/\/www.adobe.com\/products\/illustrator.html?sdid=KKQML&amp;mv=search&amp;s_kwcid=AL!3085!3!81143510076!e!!g!!illustrator&amp;ef_id=VhwgAgAABQ3p7PI3:20160601232231:s\">Adobe Illustrator<\/a>and use that UI Wireframing kit you bought for $89.<\/p>\n<figure id=\"626c\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*KYIUa-tO8Iei52_uix3NGg.png\" data-width=\"1440\" data-height=\"900\" data-action=\"zoom\" data-action-value=\"1*KYIUa-tO8Iei52_uix3NGg.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"45\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AKYIUa-tO8Iei52_uix3NGg.png?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*KYIUa-tO8Iei52_uix3NGg.png\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"73b6\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">7.)<\/strong> Now export those wires to PNGs and import them into <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.invisionapp.com\/\" target=\"_blank\" data-href=\"https:\/\/www.invisionapp.com\/\">Invision<\/a> so you can share them with your team.<\/p>\n<figure id=\"4193\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*X5THTg-vfFJUQy9v1okOZw.png\" data-width=\"738\" data-height=\"461\" data-action=\"zoom\" data-action-value=\"1*X5THTg-vfFJUQy9v1okOZw.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"45\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AX5THTg-vfFJUQy9v1okOZw.png?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*X5THTg-vfFJUQy9v1okOZw.png\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"b93b\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">8.)<\/strong> Wake up the next morning and cry into your bowl of <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/postfoods.com\/our-brands\/honey-bunches-of-oats\" target=\"_blank\" data-href=\"http:\/\/postfoods.com\/our-brands\/honey-bunches-of-oats\">Honey Bunches of Oats <\/a>because of all the mean comments that Jonathan left on your Invision prototype.<\/p>\n<figure id=\"3bde\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*lxXx4IndAa23yi32Z-bEsA.jpeg\" data-width=\"500\" data-height=\"375\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"55\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AlxXx4IndAa23yi32Z-bEsA.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lxXx4IndAa23yi32Z-bEsA.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">This shit\u2019s delicious.<\/figcaption><\/figure>\n<p id=\"2779\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">9.)<\/strong> Agree to never use Invision again ever. Because f**k Jonathan.<\/p>\n<figure id=\"dd4f\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2Ad6VbGnkA_oldqOnS2B1x5Q.gif?w=625&#038;ssl=1\" data-image-id=\"1*d6VbGnkA_oldqOnS2B1x5Q.gif\" data-width=\"450\" data-height=\"253\" \/><\/p>\n<\/div>\n<\/figure>\n<p id=\"e60c\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">10.)<\/strong> Redo your prototype in <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/marvelapp.com\/\" target=\"_blank\" data-href=\"https:\/\/marvelapp.com\/\">Marvel<\/a> and hope that Jonathan can\u2019t figure out how to leave comments on Marvel.<\/p>\n<figure id=\"51a4\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*Aqs5vREj0YFnwANdS0YrCA.png\" data-width=\"866\" data-height=\"584\" data-action=\"zoom\" data-action-value=\"1*Aqs5vREj0YFnwANdS0YrCA.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"50\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AAqs5vREj0YFnwANdS0YrCA.png?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*Aqs5vREj0YFnwANdS0YrCA.png\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"1e40\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">11.)<\/strong> You succeeded. Wireframes are finally approved. No thanks to Jonathan. Time to start working on a higher fidelity prototype.<\/p>\n<figure id=\"5eeb\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2Aw0T8CIBpQnSNdbkflPEb7w.gif?w=625&#038;ssl=1\" data-image-id=\"1*w0T8CIBpQnSNdbkflPEb7w.gif\" data-width=\"600\" data-height=\"337\" \/><\/p>\n<\/div>\n<\/figure>\n<p id=\"ef4c\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">12.)<\/strong> Grab the same stock photos that everyone else uses and then use<a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.adobe.com\/products\/photoshop.html?sdid=KKQIN&amp;mv=search&amp;s_kwcid=AL!3085!3!111672144258!e!!g!!photoshop&amp;ef_id=VhwgAgAABQ3p7PI3:20160601232342:s\" target=\"_blank\" data-href=\"http:\/\/www.adobe.com\/products\/photoshop.html?sdid=KKQIN&amp;mv=search&amp;s_kwcid=AL!3085!3!111672144258!e!!g!!photoshop&amp;ef_id=VhwgAgAABQ3p7PI3:20160601232342:s\">Photoshop<\/a> to optimize them.<\/p>\n<figure id=\"64d0\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*12oS1uwG95V5Z3TBa5ifNg.jpeg\" data-width=\"1920\" data-height=\"1080\" data-action=\"zoom\" data-action-value=\"1*12oS1uwG95V5Z3TBa5ifNg.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"40\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2A12oS1uwG95V5Z3TBa5ifNg.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*12oS1uwG95V5Z3TBa5ifNg.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Looks pretty optimized.<\/figcaption><\/figure>\n<p id=\"0d31\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">13.)<\/strong> Now, open up <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.sketchapp.com\/\" target=\"_blank\" data-href=\"https:\/\/www.sketchapp.com\/\">Sketch<\/a> and start creating the UI for your app. It\u2019s starting to look like a real product now!<\/p>\n<figure id=\"920c\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*7ZDSs6XqzXnHwJQnN8jRZw.jpeg\" data-width=\"850\" data-height=\"614\" data-action=\"zoom\" data-action-value=\"1*7ZDSs6XqzXnHwJQnN8jRZw.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"52\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2A7ZDSs6XqzXnHwJQnN8jRZw.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*7ZDSs6XqzXnHwJQnN8jRZw.jpeg\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"b1b0\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">14.) <\/strong>Now export these as PNGs and import screens into <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.flinto.com\/lite\" target=\"_blank\" data-href=\"https:\/\/www.flinto.com\/lite\">Flinto Lite<\/a>.<\/p>\n<figure id=\"de3e\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*uZAWXo_fb4KaVq1YLym74g.jpeg\" data-width=\"782\" data-height=\"439\" data-action=\"zoom\" data-action-value=\"1*uZAWXo_fb4KaVq1YLym74g.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"40\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AuZAWXo_fb4KaVq1YLym74g.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*uZAWXo_fb4KaVq1YLym74g.jpeg\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"dfb8\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">15.)<\/strong> Realize you need gestures so pay $99 for <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.flinto.com\/mac\" target=\"_blank\" data-href=\"https:\/\/www.flinto.com\/mac\">Flinto for Mac<\/a> so you can add Gestures.<\/p>\n<figure id=\"6ee4\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*vH8AbklR0eHJlsNkZ8vS6A.jpeg\" data-width=\"259\" data-height=\"194\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"55\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AvH8AbklR0eHJlsNkZ8vS6A.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*vH8AbklR0eHJlsNkZ8vS6A.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">These are different people! Very important!<\/figcaption><\/figure>\n<p id=\"8a9a\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">16.)<\/strong> Your CEO\/Stakeholder\/Client \u201cdoesn\u2019t need another app on his phone\u201d and refuses to download the Flinto app for iphone.<\/p>\n<figure id=\"8466\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AF38J8FP2n4wHckLwQdId0Q.gif?w=625&#038;ssl=1\" data-image-id=\"1*F38J8FP2n4wHckLwQdId0Q.gif\" data-width=\"500\" data-height=\"282\" \/><\/p>\n<\/div>\n<\/figure>\n<p id=\"95bd\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">17.)<\/strong> Import your designs into <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/principleformac.com\/\" target=\"_blank\" data-href=\"http:\/\/principleformac.com\/\">Principle<\/a> and add the interactions.<\/p>\n<figure id=\"6803\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*fvRO0mzSuOtVzAtyGTpvhQ.jpeg\" data-width=\"1200\" data-height=\"675\" data-action=\"zoom\" data-action-value=\"1*fvRO0mzSuOtVzAtyGTpvhQ.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"40\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AfvRO0mzSuOtVzAtyGTpvhQ.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*fvRO0mzSuOtVzAtyGTpvhQ.jpeg\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"c5de\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">18.)<\/strong> Realize Principle exports as a f***ing video? and give up for a brief moment. It\u2019s going to be OK, right?<\/p>\n<figure id=\"b930\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AH2ods-ZJGxQf5mP25Rt8ng.gif?w=625&#038;ssl=1\" data-image-id=\"1*H2ods-ZJGxQf5mP25Rt8ng.gif\" data-width=\"250\" data-height=\"139\" \/><\/p>\n<\/div>\n<\/figure>\n<p id=\"583e\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">19.)<\/strong> Download <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.pixate.com\/\" target=\"_blank\" data-href=\"http:\/\/www.pixate.com\/\">Pixate<\/a> because its free and why not?<\/p>\n<figure id=\"5288\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*Dk7owAlIbAMHQMJHf98-lw.jpeg\" data-width=\"1320\" data-height=\"766\" data-action=\"zoom\" data-action-value=\"1*Dk7owAlIbAMHQMJHf98-lw.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"42\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2ADk7owAlIbAMHQMJHf98-lw.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*Dk7owAlIbAMHQMJHf98-lw.jpeg\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"09bf\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">20.)<\/strong> Try to learn how to use Pixate. (good luck with this one.)<\/p>\n<p id=\"fc2f\" class=\"graf--p graf-after--p\"><strong class=\"markup--strong markup--p-strong\">21.)<\/strong> What you\u2019re going to want to do is bash your computer. I would say, if you can, resist the urge to do this. It\u2019s all part of the creative process. You need to get knocked down before you get back up again. They\u2019re never going to keep you down.<\/p>\n<figure id=\"ca7a\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AiJFQBKDa1DKd3HTMbChHFA.gif?w=625&#038;ssl=1\" data-image-id=\"1*iJFQBKDa1DKd3HTMbChHFA.gif\" data-width=\"250\" data-height=\"198\" \/><\/p>\n<\/div>\n<\/figure>\n<p id=\"400f\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">22.)<\/strong> Once Pixate has driven you to the brink of insanity, switch gears and download the free trial for <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/framerjs.com\/\" target=\"_blank\" data-href=\"http:\/\/framerjs.com\/\">Framer<\/a>.<\/p>\n<figure id=\"9fac\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*Rr3ZTyNUqrWYmK6CA2qLKw.jpeg\" data-width=\"800\" data-height=\"500\" data-action=\"zoom\" data-action-value=\"1*Rr3ZTyNUqrWYmK6CA2qLKw.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"45\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2ARr3ZTyNUqrWYmK6CA2qLKw.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*Rr3ZTyNUqrWYmK6CA2qLKw.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Looks promising!<\/figcaption><\/figure>\n<p id=\"9180\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">23.)<\/strong> Now go get some lunch. You\u2019ve earned it.<\/p>\n<figure id=\"aec5\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*p2usKUKSMPVt8CMHHwkfmA.jpeg\" data-width=\"275\" data-height=\"183\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"47\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2Ap2usKUKSMPVt8CMHHwkfmA.jpeg?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*p2usKUKSMPVt8CMHHwkfmA.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Tacos sound\u00a0good.<\/figcaption><\/figure>\n<p id=\"aa6f\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">24.)<\/strong> Come back from lunch and realize your Framer trial has expired. (Seriously, they give you a 32 minute trial)<\/p>\n<figure id=\"374c\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AzB_2g9Sh57Qqqt1VHENUfQ.gif?w=625&#038;ssl=1\" data-image-id=\"1*zB_2g9Sh57Qqqt1VHENUfQ.gif\" data-width=\"250\" data-height=\"146\" \/><\/p>\n<\/div>\n<\/figure>\n<p id=\"bd49\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">25.)<\/strong> Rebuild your prototype in <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.justinmind.com\/\" target=\"_blank\" data-href=\"http:\/\/www.justinmind.com\/\">Justinmind<\/a>.<\/p>\n<figure id=\"d717\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*NTHeYjej-UBZVBCblLugWg.png\" data-width=\"1215\" data-height=\"674\" data-action=\"zoom\" data-action-value=\"1*NTHeYjej-UBZVBCblLugWg.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"40\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2ANTHeYjej-UBZVBCblLugWg.png?w=625&#038;ssl=1\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*NTHeYjej-UBZVBCblLugWg.png\" \/><\/div>\n<\/div>\n<\/figure>\n<p id=\"23d7\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">26.)<\/strong> Get roasted by your teammates for sending them a Justinmind file that no one can open because no one knows what the f*** Justinmind is.<\/p>\n<figure id=\"796b\" class=\"graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AtcUx7k8HmXuLVZn_ZKpNWw.gif?w=625&#038;ssl=1\" data-image-id=\"1*tcUx7k8HmXuLVZn_ZKpNWw.gif\" data-width=\"450\" data-height=\"253\" \/><\/p>\n<\/div>\n<\/figure>\n<p id=\"294f\" class=\"graf--p graf-after--figure\"><strong class=\"markup--strong markup--p-strong\">27.)<\/strong> Consider jumping off the building, but realize that it\u2019s ok because your friend tells you about a brand new awesome prototyping tool they heard about at that <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.meetup.com\/\" target=\"_blank\" data-href=\"http:\/\/www.meetup.com\/\">meetup<\/a>\/conference\/blog post\/<a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.ted.com\/\" target=\"_blank\" data-href=\"http:\/\/www.ted.com\/\">TED talk<\/a>\/P<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.producthunt.com\/\" target=\"_blank\" data-href=\"https:\/\/www.producthunt.com\/\">roduct Hunt<\/a>.<\/p>\n<figure id=\"95dd\" class=\"graf--figure graf-after--p graf--last\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2A_mzKLKMYTc1EIkIkaTI_fA.gif?w=625&#038;ssl=1\" data-image-id=\"1*_mzKLKMYTc1EIkIkaTI_fA.gif\" data-width=\"426\" data-height=\"214\" \/><\/p>\n<\/div><figcaption class=\"imageCaption\">That\u2019s\u00a0you.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/section>\n<section class=\" section--body section--last\">\n<div class=\"section-divider layoutSingleColumn\">\n<hr class=\"section-divider\" \/>\n<\/div>\n<div class=\"section-content\">\n<div class=\"section-inner layoutSingleColumn\">\n<p id=\"5079\" class=\"graf--p graf--leading\">Thanks for reading. I hope this helps my fellow designers out there.<\/p>\n<p id=\"011e\" class=\"graf--p graf-after--p graf--last\">Shoutout to <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/twitter.com\/krishenkotecha?lang=en\" target=\"_blank\" data-href=\"https:\/\/twitter.com\/krishenkotecha?lang=en\">Krishen Kotecha<\/a> for inspiring this post and putting up with my sarcasm in general.<\/p>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/section>\n\r\n\t<div style=\"\">\r\n\t\t<a href=\"http:\/\/twitter.com\/share\" class=\"twitter-share-button\" data-count=\"vertical\" data-text=\"Interactive Sarcasm\" data-url=\"http:\/\/grapnel.net\/blog\/the-ideal-design-workflow\/\" >Tweet<\/a>\r\n\t<\/div>\r\n\t<script type=\"text\/javascript\" src=\"http:\/\/platform.twitter.com\/widgets.js\"><\/script>","protected":false},"excerpt":{"rendered":"<p>Surfing through various UX posts, I found this handy (and profane) tutorial on common UX tools. He&#8217;s pretty dismissive of the tools in an offhand way, but at least he leaves Fireworks alone. RIP Fireworks, my longtime go-to. For the record, I use paper, Fireworks, Axure, Flinto, Adobe XD and Sketch. Not in that order. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[36],"tags":[],"class_list":["post-850","post","type-post","status-publish","format-standard","hentry","category-interaction-design"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2L8f5-dI","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/posts\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/comments?post=850"}],"version-history":[{"count":5,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/posts\/850\/revisions"}],"predecessor-version":[{"id":855,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/posts\/850\/revisions\/855"}],"wp:attachment":[{"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/media?parent=850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/categories?post=850"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/tags?post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}