In the short 10+ years I’ve been working in design, it seems like UI/UX design, product design, and human-centered web thinking has exploded. And with it has come a million tools, books, tips, and tricks as the field has become more formal and researched.
So I decided to share my list of my go-to tools that I use for every project. From a tiny WordPress site to a large-scale data management system. They aren’t fancy or expensive or require a Master’s degree to use. I’ve found these are great for working with clients and non-designy people, to help create diverse teams of contributors.
What are your go-to tools? Let me know in the comments! Now on to the tools!
1. Mind Maps
I remember in high school, my English teacher made us map out Great Expectations as a mind map. We had to list all the major plot points and major characters of the story. And boy, did I hate it! All those little ovals and lines, creating a crazy web of random words. I thought it was unhelpful and so, so messy!
Fast forward 20 years and add the Internet on everyone’s pocket computer and what a different song I’m singing now. I could not do my job, or probably life, without mind maps. I use mind maps for nearly everything: website projects, design projects, book club books, vacation ideas: EVERYTHING.
Mind minds are a great way to visualize ideas and build relationships between whatever type of thing you’re examining. And the best part, you don’t have to create them by hand anymore! There are plenty of tools to create mind maps digitally, making them easy to create, revise, and share.
For UI/UX work, I use mind maps every time I need to do product evaluation, goal setting, user profiles, or create information architectures. I’m a big visual thinker, and mind maps help me to understand where things relate to other things, and breakdown complex ideas into understandable chunks.
My Fav Tool: MindMup
My go-to mind map creator is MindMup. MindMup is a free, online mindmapping tool that also integrates with Google Drive! You can easily edit your map, move things around, download image and PDF versions, and share online.
Some of my favorite features is the Notes and Links tools. With Notes, you can attach notes and documents directly to nodes. I use Notes for adding client feedback and future ideas. You can also add Links directly to nodes, making it site redesigns and revised information architectures easy-breezy.
Definitely checkout MindMup if you’re…
- Looking to share you maps with others online
- Need layers of documentation for your notes
- Use Google Drive to manage your life
Other Tools
Here are some other mind mapping tools you might want to check out. I haven’t really used much of these, but just to save you some googling?
- Lucid Chart
- Mural.co
- XMind I’ve actually used the free iPad app of this tool; it did the job.
- Microsoft Word, Excel, and Powerpoint all have some type of mind mapping/diagram tool
2. Storyboarding
Oh, if I could only put to song my love for index cards and sticky notes! Has anyone written a Bryan Adams-style 80’s ballad about color coded sticky notes?? SOMEONE GET ON THIS.
But enough about that, let’s talk about storyboarding. Storyboarding is a pretty broad term, but at its core, we’re talking process mapping. Similar to mind mapping, which is very more flexible and general, I use storyboarding for figuring out what someone is trying to do and what their actions look like.
When it comes to UI/UX design, you are not only trying to figure out the end product, but what a user is trying to accomplish in the environment you are creating. If UI design are the lines on the ground in a parking lot, UX design is everything from the landscaping to the fee booth at the entrance to how the environment makes a person feel. What about the lot makes them feel safe? Can we add more trees to keep their cars shady? Can we install one of those fancy tool things that scan your phone to pay? Those are the types of things we talk about with the UX side of design.
Storyboarding helps you understand their process and identify any pinch points, dead ends, or unexpected challenges. It allow you to get into the car and try to park in the lot. It helps you understand how each type of person experiences the environment, based on their specific background, experience, or expectations of the environment.
My Fav Tool: Index Cards & Sticky Notes
There are lots of different ways to create storyboards. Sometimes, I use video-style storyboard paper. But most of the time, I use a combination of index cards and sticky notes and the largest wall or floor space I can find. These are especially helpful when I facilitate storyboarding workshops for clients. They’re cheap, easy to find, disposable, and approachable. And if you want to get super fancy, color coded!
When I’m storyboarding, I use one color to indicate the audience or user type and another for tasks or actions that user will take. Then, I use my wall or floor space, and move the cards around to get a feel for the process. I then fill in any holes or details I may have missed and see the big picture for each type of user.
I can’t say enough how helpful this is with clients. There are plenty of times when creating new products that I don’t know everything there is to know about their users. By going through this process with clients, they can help you better understand what their users are expecting and challenges they may face.
Consider storyboarding with cards or sticky notes if…
- you’re workshopping with clients or non-designy people
- Need clarity for specific processes or goals
- Learn by doing or are a little crafty
Other Tools
If physical cards or notes aren’t your thing or if you’re looking for some options in our COVID-19 virtual world, here are some options I found you might want to check out.
3. Wireframing or Mockups
Every once and awhile, I remember back to the early days of ‘the Net’ when we were all doing our best designing sites with tables. And I always get a tiny ping of nostalgia. We were all so young and the Internet was still very much the wild west!
And how did we wireframe websites for client approval and idea testing? Well, I sure as heck DID NOT. It was never even a thing I thought about! What, spend forever in a bootleg copy of Photoshop CS2, creating a site, just to spend 12 hours slicing it and making giant ass tables to hold my terribly rendered JPEGS??? We certainly have come a long way.
Today, my go-to method of early design is wireframing. Wireframes can be anything from a line drawing of major elements to a high-fidelity design of your site. When I wireframe, it gives me quick and effortless place to test ideas, see how UI elements work in the real world, and see content working in a designed environment.
It’s also a great tool for seeing patterns for mobile and responsive design. I find this particularly great when working closely with clients. In just a few clicks, I can show clients how their sites will look on multiple screens.
My Process
Just like mind mapping and storyboarding, there are plenty of methods and tools for wireframing. Some people are strictly analog, using pen and paper. Others swear by digital only. Usually, my process is two-fold, using a combination of both.
First, I use thumbnail paper and a pencil to quickly (and messily) put my ideas on paper. These tiny thumbnails usually never see a client and are a great place to test ideas.
After I sketch out some ideas, I think use these to create more designed wireframes or mock-ups. Depending on the project and the turnaround, these wireframes may be simple line drawings at first and then move to more designed mock-ups after client feedback.
The greatest benefit to creating wireframes is the chance to test ideas before any real coding happens. Whether that coding is done by yourself or you pass off your work to a developer, wireframes create a sandbox-type environment to explore and test.
My Fav Tools: Sketch & InvisionApp
Available on Mac, Sketch is 100% my go-to app every. single. time for creating wireframes. Affordable, super easy to use, native to Mac OS, Sketch provides a flexible app without a lot of things you might not need. *Cough* Illustrator *Cough*.
One fantastic thing about Sketch is it provides a whole community of extension and plugin developers to help you do your job. You can get integrations with a ton of programs, support CSS stylesheets, create Automator-like tasks, and more!
Sketch also goes hand in hand with Invision, a powerhouse of prototyping I’ve used for years. Invision is an awesome tool for creating clickable, interactive prototypes to send directly to clients. You can create touchpoint notes, different layouts for screens, and add comments directly to your wireframes. I can’t speak highly enough of Invision.
Best of all, Invision supports Craft. Craft is an extension that basically does all the things. It provides dummy data to help your wireframes sing; allows syncing between apps like Sketch and your Invision projects online; helps you create design systems with CSS ready code, and more! I use Craft most often to sync to my online projects and help manage Ipsom data in my comps.
Test out Sketch and Invision if you are…
- a Mac native
- want to involve your clients in an interactive environment
- share design elements or design tasks with others
Other Tools
If Sketch and Invision aren’t your bag, here are some other tools to check out.
- Figma
- Adobe XD
- Omnigraffle I used to use Omnigraffle in the past for website comps and wireframing. I found it super easy to use.
- Balsamiq
- Adobe Illustrator I wouldn’t recommend Illustrator for wireframes, but if you don’t want to spend any more $$ or uncomfortable with learning a new app, it will do the job.
Wrapping Up
With any technology or design method, everyone has their own, unique way of doing your craft. With the long list of UI/UX tools, I think the most important thing is to find the tool that works for your workflow.
Only design a handful of screens? Have a whole team of super smart devs champing at the bit? Designing large scale projects for Fortune 500 companies? Each workflow will look different. And finding tools that work for you and help you do your job is always the best option.
What tools do you use in your UI/UX projects? Any tools I missed? Let me know in the comments!
P.S. All of these recommendations are just mine; no one paid or asked me to mention their tools or software. 😀