Practical UX: Tools of the Trade
Apply user experience principles to every day practices
Together, with five experienced UX professionals, designers, and successful authors we’re going to share with you our favorite tools and habits for applying usability in everyday work. These folks know their stuff, and I’m sure you’ll learn a great deal following the work each of them does.
Many thanks to Ryan Singer (Felt Presence, Basecamp), Brad Colbow (Colbow Design, The Brads), Sarah Doody (The UX Notebook, UX Mentor), Jeff Gothelf (author Lean UX, Sense & Respond), and Josh Seiden (author Lean UX, Sense & Respond).
This is part three in the Practical UX series. Part one is Practical UX: The Perspective, how to apply UX principles every day. Part two is Practical UX: The Who and the Why, identifying your user and their problems.
Prototyping
If you’ve made it to this article, chances are you don’t need to be sold on the benefits of prototyping.
“Someone’s sitting in the shade today because someone planted a tree a long time ago.”
― Warren Buffett
Now that we’ve gotten our obligatory inspirational quote out of the way, let’s get to the good stuff! In no specific order, here are some of the highest rated (and perhaps under rated!) design tools for prototyping.
Sketch
Key Benefits: quick learning curve, collaborative, useful integrations, large community
Platform: MacOS
Trial Plan: FREE 30 day trial
Balsamiq Cloud
Key Benefits: low-fidelity, rapid wireframing
Platform: Web App
Trial Plan: FREE 30 day trial
Framer X
Key Benefits: React-based, reusable component-style design, interactive
Platform: MacOS
Trial Plan: FREE 14 day trial
Marvel
Key Benefits: a beginner’s prototyping tool; minimal technical skill required
Platform: Web App & Integrations
Price Model: FREE for 1 user; 1 project
Figma
Key Benefits: free, web-based prototyping tool, collaborative
Platform: MacOS, Windows, iOS mirror, Android mirror
Price Model: FREE for 2 members; 3 projects
UXPin
Key Benefits: automated code-based design system creation
Platform: MacOS, Windows, Web App
Price Model: FREE for 1 user; 1 prototype
Adobe XD
Key Benefits: great visuals
Platform: MacOS, Windows
Price Model: FREE for 1 user; 1 active shared prototype
Webflow
Key Benefits: includes hosting and prototyping capability
Platform: Web App
Price Model: FREE for 1 user; 2 projects
Visualization / Collaboration
Some of the most difficult areas of design to communicate are mental models of complex ideas. Whether it’s a user flow or the overall state of a project, the ability to effectively visualize a meta state is incredibly valuable.
In no particular order, here are some tools to help visualize and collaborate on your next project.
Whimsical
Key Benefits: flowcharts, sitemaps, etc.
Platform: Web App
Price Model: FREE for 1 user; 4 boards
Overflow
Key Benefits: upgraded flowcharts with screens
Platform: MacOS
Price Model: FREE (beta)
Notion
Key Benefits: flexible data visualization (Kanban, table, cards, etc.), unlimited content nesting, large catalog of content widgets
Platform: MacOS, Windows, Web App, Mobile App (iOS, Android)
Price Model: FREE for unlimited users; 1000 ‘block storage’, 5MB file upload limit
Trello
Key Benefits: project organization
Platform: MacOS, Windows, Web App, Mobile App (iOS, Android)
Price Model: FREE for 1 user; unlimited boards
InVision
Key Benefits: collaboration, workflow, prototyping, freehand drawing, integrations
Platform: Web App
Price Model: FREE for 1 user; 1 prototype, 3 boards, Freehand access, Inspect access
Design Systems / Consistency
Designing a great solution to a problem is only half the battle; you also need to ensure consistency so that your solution can scale and be easily maintained in the future. This is the power of design systems; a concept that encapsulates how things should look, feel, and behave in an application.
Here are just a couple that aim to tackle this challenge; each in their own way.
Frontify
Key Benefits: style guide, brand guidelines, pattern library
Platform: Web App
Price Model: FREE 14 day trial
Zeplin
Key Benefits: style guide with Sketch integration
Platform: Web App
Price Model: FREE for 1 user; 1 project
Workflow
We pick out hardware for the specs we need. We set up our work environments thinking about lighting, space, inspiration, concentration, and ergonomics. It’s natural for us to gravitate toward digital tools that promise efficiency.
Here are just a few examples of tools that can help save you time and mental energy so you can get back to doing all that great UX work!
Craft from InVision
Key Benefits: Sketch and Photoshop plugin suite for auto-populating avatars, names, dates, etc., sync control for design files
Platform: Plugin Library for Web and Desktop Apps
Price Model: FREE
Abstract
Key Benefits: version control for Sketch files
Platform: MacOS
Price Model: FREE 30 day trial
WeTransfer
Key Benefits: file sending service
Platform: Web App
Price Model: FREE
Bonus (part 1): Multi-discipline Tools
It seems like every few weeks there are more articles popping up begging the question of whether or not designers should code. Well, thankfully our industry is finally starting to shrug off that question and we’re seeing tools come up that enable designers to speak the language of the developers they work alongside while also focusing on the work they’re great at: designing.
Painting with Code
Key Benefits: write React components that render to Sketch documents
Hadron
Key Benefits: a development environment for designers and developers
Bonus (part 2): UX Inspiration
Where would we, as designers, be without the inspirations that drive us. Without taking the predictable path of scrolling through Dribbble (with its plethora of debatably unusable UI designs), where do we look for UX inspiration?
Here’s a personal favorite that highlights the beauty of applied usability principles.
Laws of UX
Key Benefits: design principles based on psychology laws
What do the pros use?
I asked the collaborators on the Practical UX project what they use on a regular basis, and if they had to only pick two which would they choose. Here’s what they had to say.
Brad Colbow’s daily tools and two favorites: Sketch and Microsoft Excel
Sketch and (I hate to say this) Excel. Sketch is self explanatory but I’ve been spending a lot of time lately organizing a lot of information. As boring as Excel is it is really really good for those tasks.
— Brad Colbow
Jeff Gothelf’s daily tools: Trello, Slack, Google Docs, Mural.co, Keynote
Jeff’s two favorites: Trello and Keynote
Trello — you can basically do everything in it and Keynote, again, super flexible.
— Jeff Gothelf
Ryan Singer’s daily tools and favorites: Basecamp, Notability on iPad Pro, TextEdit, Numbers, OmniGraffle
Basecamp, Notability on iPad Pro, TextEdit, Numbers, OmniGraffle. Two’s not enough!
— Ryan Singer
Josh Seiden’s daily (digital) tools: Sketch, Paper for iPad with Apple Pencil
Josh’s daily (analog) tools: Paper and Sharpies.
Josh’s two favorites: Paper and Pen
I’m probably not unique in saying that if I could only use two, it would be paper and pen.
— Josh Seiden
Sarah Doody’s tools for user flows, wireframes, and prototyping: Sketch and InVision
Sarah’s tools for online courses: ConvertKit, Teachable, Zapier
Sarah’s two favorites: Sketch and Zapier
Picking 2 is so hard because various parts of my business rely on different software. I guess if forced I’d keep using Sketch and Zapier because they save me so much time!
— Sarah Doody
Be sure to visit the other articles in the Practical UX series.
Show some love, get some inspiration, and follow the meanderings of the great folks who contributed their passion, knowledge, and experiences to help give this article some human life!
Ryan Singer (Medium), @rjs (Twitter)
Brad Colbow (Medium), @bradcolbow (Twitter)
Sarah Doody (Medium), @sarahdoody (Twitter)
Jeff Gothelf (Medium), @jboogie (Twitter)
Josh Seiden (Medium), @jseiden (Twitter)
