Favorite UX Resources for Prototyping

Let’s run through some go-to UX resources and prototyping tools to improve your workflow:

1) Invision: Ever have a client that just can’t quite grasp the concept of a static wireframe? “How in the world does this translate into what I am envisioning (no pun intended)? Cue one of the more popular prototyping resources amongst designers – Invision.

PROS

• Collaboration: Ability to leave feedback, comment or even draw directly on others designs.
• Advanced transitions to create robust, interactive design interfaces.
• Easy to send shareable link to a client. No need for any design applications.
• Seamless integration with Sketch and Photoshop through it’s Craft plugin. Prototype directly in your design files, one click sync your artboards to Invision.

CONS

• You are uploading static images and making them clickable. No design capabilities within Invision’s interface.
• There is a learning curve
• Not ideal for wireframe creation or tweaking specific elements. Caters to readymade designs.

2) UXPin: Where Invision caters more to static designs, UXPin has a robust design platform within itself. Equipped with ready to use UI libraries, custom and pre-built transitions, CSS styling and more.

PROS

• Responsive design. Ability to set breakpoints.
• User interactions, animations and transitions built in. Not just screen linking.
• Functional elements generated from production code.
• Built-in UI libraries.

CONS

• Complex. Steep learning curve
• Lack of integrations with design apps such as Sketch and Photoshop. If you wireframe in UXPin, the only export options are static.
• $20 a month. Not bad. But not free.

3) AdobeXD: A relatively new offering in the Adobe portfolio that was created to rival Sketch. Includes out of the box prototyping capabilities. XD hold it’s own.

PROS

• All in one platform – Wireframing, designing, low fidelity prototyping, high fidelity prototyping, user flows and collaboration.
• Easy integration with other Adobe products.
• Real-time viewing, commenting and sharing capabilities.
• Offers CSS and HTML for your designs, so you can borrow code directly inside the interface.

CONS

• Does not include UI element libraries.
• No plugin capabilities. What you get is what you get.
• Absence of styles and symbols.
• No Sketch integration.

4) Sketch: In Sketch 49 update came the long awaited ability to turn static designs into living, breathing prototypes. Design, link, prototype, preview and share all without ever leaving Sketch.

PROS

• A preferred design resource for many web designers and people working on user interfaces. Now you don’t have to leave it. Everything is in one place <3
• Sketch Cloud – Allows anyone on the team to share, download, and comment directly in Sketch.
• The Sketch mirror app lets you preview your prototypes directly on your IOS device so you can see how things will actually look and function once developed.
• Plugins. If you think “Man, I wish I could do [fill in the blank] in Sketch.” There is likely already a plugin for it – Search github.

CONS

• MacOS exclusive tool.
• Limited selection of transition effects.
• Ideal for fast prototyping but not as robust as other alternatives.

In conclusion: Like I said before, each prototyping resource offers a different set of unique advantages that cater to different needs. We’ve come a long way from presenting pen and paper sketches to show the client how their website will lay out/work. Things can now move, bounce, react, link, and transition waaaay before anything ever touches the hands of development. It makes designers lives easier, it makes the clients understanding stronger, and it creates a more seamless development/design collaboration. So go out there and get your hands dirty, figure out what works best in your workflow and get to buildin’. Happy prototyping!