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 Axure, 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.
Other Blog Articles
- Gym Class Booking Experience Design: A How Not To Guide
- My UX Design Tools
- 24 Sketch Plugins to Improve Your Design Workflow & Productivity
- Remote User Testing Framer Prototypes With Hotjar Analytics
- Connecting Two Prototypes Using Framer Studio & Firebase
- Principle Prototype to Improve Runkeeper’s Manual Activity Logging
- User Experience & Luxury Fashion Brands: A UX Designer’s Perspective
- 12 Tips For UX Designers Who Want to Learn Prototyping
- Prototyping with Framer Studio
- iPhone 6 UX prototyping with Sketch & Framer Studio
- Improving the UX workflow for responsive design
- UX Faux Pas: Image Optimisation
- Prototyping responsive user experiences with Foundation
- Prototyping for UX Presentation
- DPD Poor Customer Experience (CX)