12 Tips For UX Designers Who Want to Learn Prototyping
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.
There are literally 1001 resources on the internet that will help you get going with HTML, CSS (SASS) and JavaScript. Don’t worry about frameworks, just learn the basics to get you going.
I’d recommend having a look at these for starters:
- https://www.smashingmagazine.com/
- http://alistapart.com/
- https://responsivedesign.is/
- https://teamtreehouse.com/
- https://www.codeschool.com/
- https://www.codecademy.com/
- https://www.udemy.com/
Sketch App
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.
Framer Studio
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
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.
Zeplin
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.
Lookback
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.
Google Analytics
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.
Hotjar
Similar to above, but allows you to view usage heatmaps, videos of where users have clicked, funnels, forms, surveys, polls and recruiters.
Additional Resources
If you want to continue your quest to search for the perfect tool, check out the links below.
Final Thoughts
I could (and maybe should) have listed a bunch of psychology and product design books, but others have done this already. Check out two good readings lists here and here.
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.
Disclaimer
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
