UX / UI Prototyping Tools: How to get started and what you need to know

Sketch, InVision, Marvel, Adobe XD, Proto.io, Omnigraffle, Flinto, Principle…oh my!

If you’ve ever wondered if that app idea in your head is as simple as it seems — it’s now easier than ever tofind out. The tools today are low-cost or free to get started and easy enough for beginners and creative dabblers to wrap there heads and hands around.

Overview: How to Get Started Prototyping

1. Write down and clarify your idea, concept or requirements for your new business app or website.
2. Draw or design in your method of choice – pen/pencil and paper, Sketch, Photoshop, Adobe Experience Design (XD), Illustrator, etc. Rough out a flow of 8-12 screens and what you think must be on each screen. Keep it simple. If you don’t have an existing brand identity for your app, don’t get wrapped up in that at this stage. Just keep the color palette and design neutral. Function can come first in this case and a good designer will be able to polish up your tu… er, uh… terrific looking sketches.
3. Flow screens into a prototype app – use Adobe XD, Marvel, Invision, etc. (more on that below) to get a feel for your transitions and screens. I recommend starting with one of these 3 tools since it is faster to build a basic interaction prototype with static screens and non-granular animation.
4. Test and review on yourself and anyone willing to give you a few minutes of their time.
5. Consider your next steps, available time and funding to build a rich prototype (Proto.io, Principle) or jump right into Xcode.

The above is a simplified, but solid path for all digital projects. If your idea is fairly simple and you have enough chops, you should be able to hammer out Steps 1-4 in a day or two.

Keys to Choosing the Right Prototyping Tool

With so many options the subtle differences will help you choose your starting point.

• Are you an Adobe Creative Cloud member? If so, unless the job requires it, you may not need to add Sketch to your arsenal. Also, the features of Adobe XD (more below) may be enough for your prototype.
• How experienced are you with Photoshop / Illustrator? If you’ve been working with these tools for years, chances are you’ll be a faster designer in them.
• Do you need gesture support for your prototype? This feature is not available in Adobe XD, yet.
• Do you need detailed, or granular, UI animations? E.g. separate moving elements, not just screens moving. If so, Proto.io, Flinto and Principle offer this. If you are building an app for a highly competitive space, you may want to spend the time upfront to nail down all of the rich UI animations and transitions right from the start.
• Are you on Windows? If so, Flinto and Principle are Mac only (with the exception of cloud based Flinto Lite)

Prototype tools breakdown

• Design Only (no prototyping in the app): Sketch, Photoshop
• Prototype Only: InVision (static screens*), Flinto, Principle
• Design & Prototype: Adobe XD (but is limited / still in beta), Marvel, Proto.io
• Web Based UI for Design and Prototype: Marvel, Proto.io
• Granular UI animations: Flinto, Proto.io, Principle
• Fully interactive (text fields, data capture, etc.) with granular animations: Proto.io or dive into Xcode. (Note: Proto.io free version is limited to 1 project and 5 screens)

* Static vs. animated screens is worth consideration. Unless you know you will definitely be making the app, animated screens aren’t totally necessary. You can move faster and get a good idea of app behavior and transitions through static screens. InVision has a great free plan and they’ve built an awesome designer toolkit with extras the others don’t focus on (like their Board layouts for creating brand guidelines and presenting mood boards).

For my last prototype, I decided to work in Photoshop and InVision. Here’s why:

• Photoshop Artboards (CC 2017) work great to layout app screens and was faster (for me) than Sketch
• The lack of gesture support ruled out Adobe XD as my Prototype tool
• I wanted to wait until a later phase (likely funding) to build out an animated prototype in Proto.io and/or Flinto
• InVision had everything I needed for a static screen prototype that we could quickly produce and get a good idea of the app behavior and transitions.
• Note: If I didn’t already have an Adobe CC and InVision account, I probably would have taken Marvel for a spin. Marvel has some great features and you can design directly in it, or take photos of your sketches, upload them and add interactivity. This seems like a great tool to rough out a new concept very quickly.

An opinion on Sketch…coming from a Photoshop & Illustrator background:
There’s no shortage of excellent and intuitively designed tools at this dance and while Sketch may be the darling of the ball, it’s not all you’ll need and may not be the right choice for everyone. As an alternative to Photoshop, it’s an awesome one – tons of features at a great price (about the cost of 2 months of Adobe CC subscription). Sketch is for design only, but has plugins for Marvel, InVision and more. Symbols and repeating elements are really nice in Sketch, however, if you’re coming from a long history with Adobe, you’ll probably be a faster designer in Photoshop and Illustrator. In Sketch:

• Layers / layer sets are different
• Masking is a touch awkward, but easy enough to get used to
• Photoshop is needed for raster and Illustrator drawing will probably feel more natural to those already familiar with it

Adobe Experience Design (XD) May be the Future

XD is likely to be the right option for Creative Cloud users in the near future. For now, the lack of gesture interaction puts it rather far behind the competition, but XD has a clean UI with tons of potential and I would expect Adobe will be adding great features in the near future.

In conclusion

Maybe you’ve been holding on to that awesome app idea for a long time and keep coming back to it. Now you can get a great idea of how your app might look and feel with a minimal amount of time and investment if you’re willing to DIY. Hopefully the above will help narrow down the field of options and get you started. Happy prototyping!