User Experience + UX / UI

Favorite UX Resources for Prototyping

By:

Morgan Plappert
Morgan Plappert

on 2/24/2020

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!

Share to

Related Posts

Email
Email @ 50: The Art of Email Design
Email @ 50: The Art of Email Design

By:Morgan Plappert on 8/6/2021

I remember when I first started out as a designer (professionally), having to play Photoshop Tetris with cut up image blocks to piece together a full email layout. As a UX designer, we are taught that nothing is more important than usability and utility … and let’s just say, nothing puts those things to the test quite like Photoshop Tetris. Thankfully we have more sensible solutions now, but email design still comes with its added constraints and limitations. Luckily, I’ve had enough time and practice to be able to share a bit of knowledge, tips & tricks with you fine folks. So, let’s cut it up.

Read More »
The Dramatic Uptick in Shopping on Mobile is all about Comfort

By:Ben Wilson on 11/25/2019

The rise of mobile purchasing has changed the game for the long haul.

Read More »