A list of 12 tips and tools for UX Designers looking to improve their prototyping skills and/or workflow.
Recently an ex-work colleague of mine contacted me for some friendly advice. He had been on a career break and was considering going back to contracting as an UX Designer.
As such, he wanted some insights into what the current ‘in-demand’ skills were and if my previous interest in prototyping was still relevant to the current marketplace.
Flattered to think that my advice held some value, I penned him a reply and wished him the best.
After replying, I thought I would expand on my thoughts and share them as a post, so as to benefit anyone in a similar situation who might be looking at getting into UX, or more specifically learning more about prototyping.
Read: Todd Zaki Warfel’s Prototyping: A Practitioner’s Guide
This is what got me into prototyping (and out of creating static artefacts such as wireframes). Read it, back-to-back, if you weren’t convinced that prototyping was the way to go, then reading this will change your mind.
Thirsty for more, then check out: https://blog.prototypr.io/
Learn to Code
Learning to code will give you a better understanding of the building blocks of the internet. This will allow you to appreciate its potential and limitations and, in turn, design and build better experiences.
Prototyping your ideas in code will also bring you closer to the end product and build empathy with developers.
I’d recommend having a look at these for starters:
Sketch is an awesome graphics application for the Mac. Its positioned at UI and UX Designers. Once you’ve used it, I guarantee you’ll probably ditch the likes of OmniGraffle, Illustrator or InDesign for your screen designs or layouts.
Flinto for Mac
I use Flinto for two purposes. Firstly when I want to quickly link together my static screens into a clickable and sharable prototypes. Secondly, once I’ve validated a concept, I use it to refine transitions and elements into a more polished version.
Principle for Mac
When I want to add that next level of fidelity, I turn to Principle as it has the addition of logic-based animations (using Drivers). These let you trigger an animation dependant on an user’s interaction, such as scrolling a screen and then shrinking a header.
I use Framer when I want to design with real data, share and test on device and basically prototype anything that I can’t achieve with Flinto or Principle. The only caveat is that you need to learn some basic CoffeeScript. But fear not, the docs on the Framer website are awesome.
Foundation is an amazing front-end, responsive framework. Its perfect for prototyping and testing on any web-enabled device. You can combine it with analytics packages so you can get quantitive feedback on how your prototype is being used.
This is a great tool for handing off designs to developers. It has free and paid-for plans, and can greatly improve the speed and accuracy of the hand off process.
A handy tool for capturing and collating user feedback when testing a prototype. You can record the screen of the device along with the user (video and audio). Currently it has a free plan.
A classic. GA lets you track user behaviour across your prototype (or website) and let’s you to turn your insights into actions to improve the user experience.
Similar to above, but allows you to view usage heatmaps, videos of where users have clicked, funnels, forms, surveys, polls and recruiters.
If you want to continue your quest to search for the perfect tool, check out the links below.
I hope this list will help any aspiring prototypers out there. Do give me a shout on @hungrybrowser if you want to add any further suggestions.
This list is not exhaustive, and focuses on the visual and interaction design aspects of UX, rather than the strategic and research side of things. It is aimed at those who have some digital experience, either in UI design or user experience design.
It is also based on what works best for me, in terms of my skills and background and might not necessarily work for everyone.
Lastly, there’s no affiliate links here, or kickbacks. I’m recommending these resources as I use them myself and think they are worth taking a look at.
Also published on Medium.
Share This Article
If you enjoyed this blog article, then let others know about it by sharing it.Tweet