23

Best Design Tool for Prototypes + Responsive Design

2 years ago from , Product Designer / Hacker

Hello Designers,

I love Sketch App. I am over presenting static designs and although I know there are ways to add interaction using plugins and or Keynote animations, or Marvel App (and the list goes on); I'm willing to invest learning a new tool that is not only a great digital design tool, but makes it fairly easy to prototype and do responsive design in-app.

I am familiar with the wide array of digital design tools out there but I'm interested in hearing from the community - if you could pick one to use, to start anew with now - what would it be??

16 comments

  • Dustin Koop, almost 2 years ago

    I would suggest looking into Webflow. https://webflow.com/ this will save you weeks of redundant work by creating functional prototypes and actual clean code you can hand off.

    If you are looking for an all in one thatis a bit closer to Sketch and has functionality like Marvel, figma and Flinto I would suggest using "Invision Studio" this looks to be a powerhouse. Available in January 2018. https://goo.gl/g9PjLF

    13 points
  • Stevie EStevie E, almost 2 years ago

    Hi there,

    I'll second Webflow if you want to show true responsive prototypes, as you will be using actual css and html. The only slight negative is that you can't control the breakpoints, but they are conventional so shouldn't be an issue unless you're doing something highly bespoke.

    I've made a site that breaks down various prototype options here https://www.designerlynx.co/prototyping-tools

    Framer is also worth a look - you'll need a bit of coding knowledge but you can create pretty much anything with practice.

    Most other tools will have responsive behaviour in terms of constraints and fluid grids, but won't re-order layout at a breakpoint, so you'll still end up having to produce different designs to recreate behaviour at mobile / tablet / desktop.

    To me, Figma is the best at this and has basic prototyping build in.

    Hope that helps, good luck!

    3 points
  • John Sherwin, almost 2 years ago

    Highly recommend taking a look at Framer. Learning curve is a little higher than most tools but if you're looking to build design and prototypes that scale across devices seamlessly, it's got you covered. Also can be used for web stuff too.

    3 points
  • Jesse MartinJesse Martin, almost 2 years ago

    I would also suggest looking into Framer. It's fundamentally a code editor with a bonus GUI. It's got great documentation and basically, you can know for sure that if you get it to work in Framer, it's going to be executable in production.

    2 points
  • Marcel M., almost 2 years ago

    From what I experienced, there's no responsive design tool out yet (?) Although Figma has constraints, you can't view a "responsive click dummy" on your smartphone. The artboard dimensions are fixed and there's no "real interaction" (hover, live data etc.).

    Go check out Webflow.com

    One of the rare tools where you'll leave the (semi-)static screen world and go fully responsive and interactive. Only downside: It's time-consuming and you'll dive a little into the developer part of ui design. Some people are easily scared by this

    1 point
  • Stan Tan, almost 2 years ago

    Just want to add on to below comments - try out Framer :) Can build responsive designs + prototypes actually

    0 points
  • Sven LoskillSven Loskill, almost 2 years ago

    Subform is in private beta now, appears to be interesting: https://subformapp.com

    //

    For (even interactive) animation:

    Haiku will do away with Lottie needing After Effects and promises to work well with Sketch and other Design-Tools.

    Here’s a writeup: https://medium.com/haiku-blog/lottie-without-after-effects

    Here’s a sign-up link: https://haiku.ai/?r=XbBqt

    (Disclosure: if you sign-up using that link above it’ll put myself higher on the waiting list – if you don’t want that, go to https://haiku.ai)

    0 points
  • Rishabh Saxena, almost 2 years ago

    This is a pretty long compilation of the various prototyping tools out there: https://blog.zipboard.co/which-prototyping-tools-to-use-66d51a7927e

    Found this tool, HotGloo recently that looks interesting. Curious if others have tried it and how it compares to the others on this list?

    0 points
  • Aurooba Ahmed, almost 2 years ago

    We've been using Adobe XD, and it's working out really well. It's very fast and seems specifically designed to quickly whip up responsive design.

    0 points
  • Dan SimDan Sim, almost 2 years ago

    I'm getting a lot of use from Origami at the moment, for native iOS and Android especially. Designing with kind a hybrid pixels/math approach gets me a lot closer to the end product than working in a static environment like Sketch did. Of course Sketch is invaluable for providing assets into the prototypes/screens, and those assets are usually app-ready as a side effect. I just wish it wasn't dependant on the grace of some Facebook department for it's future

    0 points
  • Fabricio Rosa MarquesFabricio Rosa Marques, almost 2 years ago

    I think learning "just one" doesn't make a lot of sense.

    Most design tools these days are fairly similar to each other so there's no steep learning curve once you for example mastered Sketch (Most of the current design tools took heavy inspiration from Sketch).

    Additionally, you might need different tools to get the job done. Example: Most of the times I used Sketch + Principle if I needed to do prototyping. The other day I had to create a map-based prototype (mapbox), so I started getting into Framer since its code-based nature would allow you to use APIs and real methods provided by those APIs.

    Apart from that for me Figma is the strongest general design tool atm, esp. if you have others then yourself (stakeholders or designers) involved. Before Figma my team and me used Sketch, InVision, Abstract and a plethora of plugins. All gone now and unified in one tool (Ok, I do miss a few plugins, but unifying multiple tools outweighs that). The switch was really easy.

    Really looking forward to InVision Studio which will be released next Jan, but again, judging by the videos the UI doesn't seem to require a lot of learning or getting used to new paradigms.

    0 points
  • Mariusz OstrowskiMariusz Ostrowski, almost 2 years ago

    Try Kite Compositor, very powerful - https://kiteapp.co

    0 points
  • Jess Eddy, almost 2 years ago

    Thanks to everyone that commented in the thread! Giving me a lot to mull over; all really good feedback.

    0 points
  • Jess Eddy, almost 2 years ago

    I'm guessing recommendations will be Figma but I want to hear it from you!

    0 points