11

How do you like to code prototypes?

6 months ago from , Interaction Designer

Hey folks! I'm moving into a new role, and one thing that my new team does that's. different from how I work now, is the designer prefers to code their prototypes to hand off to eng. I mostly use quick click-through methods like InVision, or sometimes ProtoPie for things like user testing.

So I was curious, for those who code their prototypes from scratch, what's your process like? What tools do you like to use? Tell me all your secrets.

16 comments

  • Marc EdwardsMarc Edwards, 5 months ago

    I like taking whatever the easiest and fastest path is to the goal for prototyping. That means using lots of different tools, unfortunately. I like prototypes to be small and disposable — I rarely build more than a couple of screens in the same prototype. It just gets unwieldy and you end up spending way too much time managing things.

    For HTML and CSS, I just write the production code. :)

    For figuring out and explaining animation for native apps, I typically use Principle. That will also give me the offsets and timing values, so I can let the developer know. We can then tweak the values once it’s in the running app.

    For complex single interactions and things that aren’t well suited to other tools, I’ve been writing Processing code. Processing can do pretty much anything, if you have the time, and it’s free. It’s OpenGL backed, so it’s really fast, too. I have a template I’ve created that has loads of helper functions for timing curves and other things, so bolting things together is a lot quicker than writing everything from scratch.

    6 points
  • gaspard •, 4 months ago

    Figma looks like being the most promising tool, it replaces the classic sketch > invision > abstract > zeplin toolchain

    I find this website very interesting about the trends in the industry: https://uxtools.co/

    1 point
  • adrian ioadrian io, 5 months ago

    If you don't want to code by hand, but need to have interactive forms, i.e. input fields you can actually type in, need to have control over flow logic then you might want to check out www.axure.com

    1 point
    • Steve O'ConnorSteve O'Connor, 5 months ago

      There are also export plugins for Adobe XD and Sketch which work pretty well for Axure. My last use of it was knocking up a multi-section, progressive reveal, interactive donation flow. Worked a treat and only took a couple of hours.

      1 point
      • adrian ioadrian io, 5 months ago

        Yes, Axure is pretty great for those scenarios.

        I don't understand why Axure isn't used more by designers who need to work on web apps. A few of my buddies who work in enterprise organisations (i.e. lots of data and forms) have to use Invision, which is totally unsuitable for prototyping enterprise apps.

        Axure can do both simple click through demos (like Invision etc) or more sophisticated prototypes. And another benefit - Axure is a desktop app (Win & Mac) and exports to HTML.

        Axure isn't really suitable if you want to prototype UI animations, like you can in Principle or Protopie.

        I'm looking forward to the web version of Framer X - which can do both, but requires some coding skills I think, if you want to create some custom components.

        1 point
  • Chinmay Kulkarni, 5 months ago

    Webflow or codepen. Once you start getting the hang of it you'll never look back. It might take a while to get the hang of it but it's certainly worth it.

    1 point
    • Max Paladii, 5 months ago

      Hey Chinmay. Could you please describe your process of prototyping in Webflow? Do you have components library or always start from scratch? Is prototype close to final UI or just a wireframe? Thanks!

      0 points
      • Chinmay Kulkarni, 5 months ago

        Depends what you're prototyping and how in depth you want to go. I've always started from scratch because I've often been testing small localised features (for example how animations will play according to the user's scroll position) — so I've never needed to go all out and use component libraries.

        In terms of process, Webflow was the step I'd take after I was confident with my design in Sketch/Figma. I used Webflow primarily to test interaction and to see if my concept would actually work on the web. So yeah it was also pretty close to the final UI.

        Once you start getting the hang of it, I'd try moving to Codepen since it's just a lot more quicker to achieve what you're after.

        Hope I answered your question!

        0 points
    • Taylor PalmerTaylor Palmer, 5 months ago

      +1 for codepen. No need to set up an index.html every time and gives you all the popular preprocessors on the market, plus hot reloading!

      1 point
      • Chinmay Kulkarni, 5 months ago

        Yeah 100%. AND no need to a bunch of local folders with all of your little experiments, especially if you want to test something as small as a button.

        AND its also well supported on iOS Safari, so I've actually gone and made adjustments to my Pens on my phone while on the train. Codepen is a godsend. Just wish it had more shortcuts like VS Code.

        0 points
  • Michael Andreuzza , 5 months ago

    Oh, absolutely. I love this method and is my daily approach. Sometimes it takes less time to do it.

    Edit:

    I actually use Bulma.io to do that because it goes really quick, and without writing css you can make a prototype...

    1 point
  • Ryan Hicks, 5 months ago

    Depending on your coding abilities brush up on using webflow in your free time. This could certainly be used to do those prototypes you're talking about.

    Otherwise, it's all traditional coding techniques with vanilla code or frameworks to speed the process up.

    1 point
  • Vince P.Vince P., 5 months ago

    Framer is also a good option.

    0 points