I know, InVision is cool, but what other prototyping tools do you recommend? What about Pixate? or Form? ...Thanks!
http://codepen.io ..perfect for straight to code UI prototyping
If it's just showing intern what would be best practice I just sketch it on paper. But usually its UX pin for wireframes, Invision for displaying flow on screens and Principle for explaining developers what transitions to use.
Axure, UX Pin, inVision :)... and pencil + paper
Using a lot of tools for lots of different cases
- Framer JS for complex interactions
- Hype for quick interactive prototype (the timeline and the possibility to play with the animation curves helps a lot). Also it's quicker than framer
- After Effect for more complex animations
- Invision to explain app flows
- Flinto for a bit more advanced flows
- Principle for micro interaction
As Terry Douglas said, Paper+pencil if you are working by yourself or InVision if working with a team or want client's feedback.
Zurb's Foundation allows you to build prototypes as well.
- Marvel for simple non-linear screen flows
- Tumult Hype for animations
- Fully coded (Angular + jQuery w/ Flux-like structure) for advanced interactions and flows, data handling
- Wires (not yet released) for all of the above. It's an open-source prototyping tool I'm currently building. ;)
For bigger flows and complete prototypes for apps or websites I use Invision and for small interactions and animations, I use Principle. Really happy with Principle, compared to other programs it's really quick for small animations.
I'm surprised and also not surprised nobody said Quartz Composer + Origami. By far and large the most fun I've had prototyping. The fastest I've ever got up and running from comp to live prototype and good hand off to developers.
Totally agree with you. I like framer, but it takes too much time to create simple transitions. QC + Origami is so fast to create and test quick interactions. Definitely my favorite.
Depends what you hope to achieve by creating the prototype, and what part of a project you are fulfilling. As a UX design agency delivering fully resolved solutions for clients our process includes:
- Pen & paper
- Balsamiq mockups exported & connected in invision
- Photoshop UI designs connected in invision
- HTML/CSS prototypes, build bespoke
It depends on the objetives of the prototype
- Marvel or InVision for simple prototypes and just screen flows
- Flinto for more detailed interactions
I'm using Hype from tumult. If necessary InVision, Flinto and soon principle.
My process goes from Sketches in Paper, or recently Notes
Wireframes and clickable prototypes with Omnigraffle
Fast HTML prototypes with Pinegrow or Coda (I typically use bootstrap for prototyping, unless I need something more complicated)
Or if I'm doing some native app design, Pixate, or sometimes Hype.
Invision and Principle for me right now.
Axure, Pen & Paper
Procreate for sketches, Axure for prototypes.
Principle. It's best for micro-interactions, but you can still do basic navigations etc...
After trying to create a multi-screen prototype in Principle, I wholeheartedly agree with this statement. Paired with something like Invision Principle is really powerful, but not as an overall experience tool.
InVision for entire app design specifications. Principle when I want to hand over specific and sometimes unusual animations to devs.
uxpin and invision
Depends what level of fidelity you're going for and what you're attempting to evaluate and who you need feedback from. Pen & paper and I find HTML (JS, SASS) covers a lot of ground. The right tool at the right time... I wrote about it here: https://medium.com/@jessekorzan/the-right-tool-at-the-right-time-ae87516f22f1#.f9ohjng8d
Prototyping is overrated. I use wireframe annotations with clear explanations.
Isn't a wireframe a type of prototype? I don't think you can "overrate" prototyping, it's like saying testing is overrated. You can choose the wrong tool for the level of fidelity that's appropriate for the stage of design you're in (and what kind of feedback you need to move forward).
Prototype and wireframe are two different things. Prototypes have click interactivity, wireframes don't. The reason I say they are overrated is because of the numerous tools and conversations dedicated to finding the right tool for fancy animations and transitions when clear writing and explanations are the most important thing to communicate the value of a design.
After a lot of testing, I came to this conclusion:
If you're new to prototyping or are looking for quick results
If you're looking for something a bit more capable and want to capture nuances not possible in Flinto or Principle
If you're on Windows