The right tool is the one that works! Credit: Caryn Farvour

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. Take a look at part one, Practical UX: The Perspective, and part two, Practical UX: The Who and the Why.

Prototyping

If you’ve made it to this article, chances are you don’t need to be sold on the benefits of prototyping.

Download your own copy here: http://bit.ly/practicalUX-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.

Download your own copy here: http://bit.ly/practicalUX-visualization

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.

Download your own copy here: http://bit.ly/practicalUX-design-systems

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.

Download your own copy here: http://bit.ly/practicalUX-workflow

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

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)