19

Ask DN: What’s your interaction design process, from pencil to prototype ?

5 years ago from , UI developer @subitoLabs, Aix en provence, France

Me & my team are trying to modernise our design process, integrating animation and prototyping in it.

The designers in our team aren’t comfortable with code at all, so i’m excluding framerjs, although it’s absolutely great.

I’d like to know which process you - or your team - use to produce hi-fi prototypes from the ground up. And if you start with pencils, have you set any kind of visual system to translate complex motions etc…

Just for you to know, we’re mainly producing websites and a few mobile apps.

Thanks !

27 comments

  • Bart Claeys, 5 years ago

    At Ratio we start off witch a whiteboard session, followed by the creation of wireframes and high fidelity comps. We often skip the wire-framing phase and go straight into high fidelity design. To illustrate animation we're using Adobe After Effects. We pull in parts of the high fidelity comps and animate a few scenarios. Sometimes the result acts as a prototype. As an alternative to Adobe After Effects I'm warming up my team to use Quartz Composer, but it's a hard sell, because it's a little bit daunting.

    The question is, what are you trying to achieve with a prototype? Is it for client presentation? Is it to inform development? Or maybe for usability testing?

    4 points
    • Brendan GramerBrendan Gramer, 5 years ago

      Great questions there! These should definitely be asked at the start of every project.

      1 point
    • Benjamin Réthoré, 5 years ago

      We develop our own product, so the prototypes mainly aims for the client's (Product managers, CEO) validation. And quartz composer is indeed a hard sell, in my case, because our designers cannot code at all :( I guess after effects is a good choice here. How many designers do you involve in the whiteboard sessions ?

      0 points
      • Bart Claeys, 5 years ago

        Quartz Composer is not really coding, it's connecting logical blocks, almost like Legos. It's not as hard as it looks, but yes, there definitely is a learning phase.

        In a whiteboard session there is at minimum one designer, sometimes paired up with a product strategist. We don't often do whiteboard sessions with more than two designers, but that's because we run an agency model and don't want to burn hours on the expense of our clients if not necessary. In another model more than two designers may work.

        1 point
      • barry saundersbarry saunders, 5 years ago

        Have you tried Invision? It's a good option, less complex than After Effects or Quartz Composer. Otherwise Flux is pretty good, simple.

        1 point
        • Benjamin RéthoréBenjamin Réthoré, 5 years ago

          Yes, we already use invision, but the problem is we cannot prototype animations with it. Btw it's a really great tool we'll definitely keep it in our Belt.

          0 points
  • Bryan ClarkBryan Clark, 5 years ago

    We go from whiteboard discussions into visual comps, then into a variety of prototyping depending on the situation - then into full-on code.

    From there, some of us like to dive into AfterEffects to come up with videos, though oftentimes the output is very difficult to translate into actual easing curves and values that an engineer can use.

    I prefer to either do (a) a "static" prototype in Flinto, where you've got basic scrolling and push/pop/modal transitions included for free, or (b) export images from our visual comps into a lightweight Xcode prototype.

    Whatever you do: sketch out the structure of an animation or transition, and then code that. The exact timings and easing curves should all be hooked up to a framework like Facebook's "Tweaks", which allow you to fine-tune the "feel" of your animation on-device.

    What I've generally learned, though: everybody has a different approach, and it's important to let the smart folks on your team work in the way they find best. Some of us can't code, others (like me) don't know a lick of AfterEffects, but as long as we can all communicate the "structure" and "feel" of the things we're making, that's what matters. People over process! :)

    2 points
    • Eytan DavidovitsEytan Davidovits, 5 years ago

      I was wondering if you ever felt like that not knowing After Effects was a roadblock for you? I've prototyped using Keynote, Marvel, Flinto, and Pixate and they seem to accomplish the job. I'm just starting out, so I'm curious if you think it's worth it to learn After Effects or if there are other programs that are taking it's place.

      0 points
    • Benjamin Réthoré, 5 years ago

      Very wise thought, "People over process" ! I guess you're right, ideally everyone should be encouraged to bring on their own skills... In our case, animation is kind new for all of us, so we'll enjoy learning any new tool. I'm more confident with the choice of after effects, but as you say, i fear that the video results will be very hard to implement in production code.

      0 points
  • Tobin HarrisTobin Harris, 5 years ago

    At Pocketworks we tend start with a client meeting to collect a list of features, personas and general product vision.

    Lo-Fi wireframes in Sketch

    We then produce lo-fi black and white wireframes in Sketch to establish the scope and and rough user flows / use cases.

    Each "screen" contains buttons, labels and text, nothing fancy. An entire app is put together in a day or two this way. These lo-fi wireframes are lacking detail and proper navigation, so we keep them away from customers. They're an internal too really, and we like them because they're easy and fast to create, and help us find gaps in our understanding.

    Medium-fi "throwaway" wireframes

    Once we've asked more questions with the client, and we're confident about scope and understanding, we add colour and navigation to our lo-fi Sketch wireframes so they start to look more like an app. We can then show these to a customer.

    Export user flows to DropBox and try on phone

    To demo to customer, we export the medium-fidelity wireframes to .png files on DropBox so we can open them on a phone and slide through each user flow as if we were using the app.

    In many cases, this makes quite a convincing "interactive prototype" even though it's just static screens.

    We present, get feedback, rince and repeat.

    Some Animations in After Effects

    Static screens are suboptimal really. Most interactions need animation to get the point across well. Since animation is expensive, we tend to use them sparingly in places. So that's when we turn to After Effects to do animation where it's crucial to user understanding.

    Doing all this tends to get pretty good results. Ideally we'd create true interactive prototypes from the start. But like other's say it's going to take investment and commitment to learn to Framer, XCode or Quartz.

    Our next experiment is to teach our designer to use XCode, and see how that works out :)

    2 points
  • Loren Morris, 5 years ago

    We try to customize the process depending on the needs of the client... That being said, we recently took a page out of Google Ventures design book and did a design sprint. Started the week with ideas, those ideas turned into sketches (on sticky notes), and by Friday we had a low-fi prototype on Flinto.

    Overall great experience and client buy-in was a lot easier.

    http://www.gv.com/lib/the-product-design-sprint-a-five-day-recipe-for-startups

    2 points
  • Antonio Felaco, 5 years ago

    Like @BrendanGramer said, it depends from the project itself.

    I create videogames and interactive installations from some years now and I've experienced different methods that all works if you know these things: 1. The target audience. It has an huge impact on the way you show how your idea works. The non-tech guys will always have a different point of view from yours. 2. Time and budget. Usually we all have limited resources so be very smart on picking the right tools at the right time.

    That said, this is what I usually do.

    I choose After effects if I think that transitions and animations does make a difference, or if I have time and pleasure to make a nice presentation.

    Second option: I do a static presentation (Keynote, PowerPoint or ordered PNGs) with high quality graphics.

    Third option: I do wireframes in digital or on paper if I am talking with colleagues that I know very well and if I can explain it in verbally.

    2 points
  • Nelson Abalos JrNelson Abalos Jr, 5 years ago
    1. Whiteboard wireframing
    2. Create interactive mocks with animations in webflow
    3. Export the code

    I kid you not on this process.

    1 point
  • Ed ChaoEd Chao, 5 years ago (edited 5 years ago )
    • Visual Design - Sketch App
    • Interaction Design - Framer (I don't enjoy Quartz Composer because it looks like spaghetti noodles and opaque meatballs, reading other people's projects is cray)
    • Quick flow prototype - InVision

    Concerning process: Even though you can technically divide your design process into phases (pencil to prototype), it's never really that clean cut for me. Though I do generally walk through the standard rough sketches > wireframes > mocks > code, being able to move back and forth between phases or even overlapping them, (like thinking of the visuals, while thinking of the flow or sketching a rough diagram while working on an interaction) just feels more natural. For me, each phase in design informs and inspires another.

    1 point
  • Josh LeeJosh Lee, 5 years ago

    At DoubleDutch we generally start in Balsamiq, getting a rough idea of how we want to solve the problem and then we export those designs and use Flinto to test them.

    From there we iterate on it, applying the visual styling at the end.

    I have tried Framer, Sketch, POP, Invision and a host of other stuff. They all were either too complicated (Framer) or not as sharable (POP) that I think we found a sweet spot with where we are now.

    1 point
  • Vinay ChilukuriVinay Chilukuri, 5 years ago

    KEYNOTE. It is absolutely amazing. I've never used it until very recently, even to create presentations, but now I'm prototyping in it like a pro. The usability is absolutely amazing!

    Though you cannot have your own animations in Keynote, unlike Framer, I feel that you really have bunch of cool animations built into it. And, I honestly feel that they are more than enough for a prototype stage.

    I tried the route of designing in Sketch and then exporting it to Framer and trying to write code, to generate some animations.. I got mainly frustrated with how often the framer generator for Sketch crashes on me and chucked Framer altogether for that one reason.

    This whole design process at Google Ventures got me kickstarted into prototyping with Keynote: http://www.gv.com/lib/the-product-design-sprint-prototypeday4

    1 point
    • Benjamin Réthoré, 5 years ago

      I definitely need to try Keynote. Sketch exportation to framer never worked well for me, but the assets exporting is so rad that it makes you save a ton of time anyway.

      0 points
  • Diego LafuenteDiego Lafuente, 5 years ago

    Fuck pencil and paper. XCode directly.

    0 points
  • Karthik KKarthik K, 5 years ago (edited 5 years ago )

    We have been working with Google for a while, and we fell in love with their Design Sprint process. The process made us super damn efficient and helps us put out our ideas right on the table, with the complexity quotient and with the users in mind.

    Otherwise, we follow different processes for different clients, with just quality and getting things done on time in mind.

    0 points
    • Benjamin Réthoré, 5 years ago

      I took some time to read about this process that you and @LorenMorris mentioned and it is very appealing. In companies like mine it would require to change a lot of habits... but it seems totally worth it. Thanks.

      0 points
      • Karthik KKarthik K, 5 years ago (edited 5 years ago )

        @Benjamin R. You're welcome. Feel free to reach out to us if you need some help! Would love to help you out! :)

        On another note, my Co-founder extensively uses Keynote to prototype, while I use Sketch app. Whatever it is, just stay comfortable with whatever tool you love using. That will help getting the products out with ease.

        1 point