My UX Design Toolbox
Just like carpenters rely on different tools for different tasks, so do UX designers. Start adding some tools to your digital toolbox and explore a few of the most popular programs that you might use as an entry-level UX designer.
Early in your UX design career, you’ll likely spend a lot of time creating wireframes and prototypes.
- A wireframe is an outline or a sketch of a product or a screen. Wireframes help designers figure out how a page is arranged, where each piece of a product fits in with the others, and how users will likely interact with the product.
- A prototype is an early model of a product that demonstrates functionality.
You’ll learn much more about wireframes and prototypes, and create your own, as you progress through this certificate program.
There are tons of digital tools available to help you design wireframes and prototypes. The most popular tools among them are Figma and Adobe XD due to their availability:
- Figma is a widely used, all-in-one wireframing and prototyping tool that allows for real-time collaboration among multiple team members. This makes Figma ideal for designers working remotely and for teams with members in different locations. Figma is versatile and customizable, with plenty of features to speed up the design process. The greatest thing about Figma is its availability. Being a web app, Figma is capable of running on pretty much every computer in existence, regardless of its operating systems (even Linuxes), as long as it is capable of running a modern browser.
- Adobe XD is great for editing graphics, building prototypes, and collaborating with other people on your team. It has particularly robust features for tasks that happen during the later stages of UX design, as you get into what we call high-fidelity designs. Unlike Figma which was built on web technologies, Adobe XD is still a traditional desktop application which mean you will need to be running the latest version of either OS X or Windows to be able to use it.
- Sketch was formerly an extremely popular wireframing and prototyping tool in the UX community. However Sketch can only run on Mac OS X, which means most UX designers will not be able to use it even if they want to (although they recently added a web version to alleviate that somewhat). This couples with the fact that Sketch does not have a free version like Figma or Adobe XD has caused Sketch’s popularity to crumble in recent years. This was a situation similarly faced by Framer, arguably one of the most advanced UX design tools. Framer used to be a paid-only Mac application just like Sketch, but their development team quickly realized such high barrier to entry will severely limit their user base and eventually fade from existence like Sketch. Today Framer is available on both Mac (even the new M1 variant) and Windows, with a free tier similar to Figma.
And of course, there are other tools like UXPin, InVision, MarvelApp that you can discover on your own
Keep in mind that the UX design industry changes often, and so do design tools. Many of the skills we’ll explore as part of this program are transferable, meaning once you know the basics in one tool, like Figma or Adobe XD, that knowledge will transfer to other design tools that look and feel quite similar.
During the early, conceptual phases of the design process, you don’t always need to use tools that were specifically made for UX design. In fact, some designers prefer working within the relative simplicity of presentation programs, especially when they’re creating wireframes. Most presentation tools also have live collaboration features, so team members can interact with each other and collaborate on the designs. Here are three of the most popular presentation tools from Google, Microsoft, and Apple:
- Slides.com (or slid.es) is my top choice. It’s dead simple. It’s available everywhere. Use it.
- Google Slides is a web-based presentation program included in Google Workspace, Google’s suite of productivity software. Google Slides is free, and anyone with a Google account can create or edit Slides presentations.
- Microsoft PowerPoint was one of the first presentation programs created, and it’s still very widely used. PowerPoint is part of the Microsoft 365 program package and comes in both offline and online versions. Although anyone can view a PowerPoint presentation online, you have to own the product to create or edit a presentation.
- Keynote is Apple’s presentation program, and a lot of people consider its templates to be the most visually appealing. It’s also available both online and offline. Although Keynote was created for Apple devices like Macs and iPads, it can be used on a PC, as well. Similar to PowerPoint, you have to own the product to make edits or create new presentations in Keynote.
In many instances, presentation tools are a matter of preference. Feel free to try out many of them, and pick whichever you feel most comfortable working with!
As you develop your designs, you might need to use tools to create, manipulate, and integrate images and illustrations. Here are two of the most popular image creation and manipulation tools:
- Affinity Designer is primarily used for drawing vector images. Vector images (or SVGs) are images created using points, curves, lines, and shapes to produce perfectly smooth lines. This makes it easy to edit and resize images in Illustrator. As an entry-level UX designer, you can use Adobe Illustrator to draw prototypes and illustrations for your designs.
- Affinity Photo works primarily with photos, known as raster images. These images are composed of thousands, or even millions, of pixels, the smallest unit of display on a computer screen. While its cousin Illustrator is a better tool for creating an image from scratch, Photoshop has more uses, including image manipulation across file types, saving images for digital publishing, and even presentations.
Now you might be confused with those familiar names. Normally you’d expect to see Adobe Illustrator and Adobe Photoshop filling those slots, and for good reasons. They are decidedly better tools. However Adobe’s decision to put them in a subscription model had effectively killed them for the smaller independent designers like myself. I’m not sponsored by them or anything, it’s just that compare to Adobe, I like Affinity’s perpetual pricing model MUCH better.
There’s also Gravit Design which was a great project back in the day. It works with both vector and raster images, and it runs on the web! Just like Figma, it can be configured to be used as a desktop application with Electron. Unfortunately it was bought out by Corel, which means it will eventually meet the same fate as Ulead PhotoImpact or JASC Paint Shop Pro. It was a shame really, seeing how it could’ve overtaken GIMP and Krita as the de facto image editor on Linux.
In all honesty though, most basic image manipulation can already be done in your screen design tool. Figma can handle both SVG Vector and raster images just fine. It can cut, crop, resize, even do basic color correction there. Only use AI and PS if you want to create something more hardcore, because let’s face it, they are massive resource hogs.
Creating animations can be a great way to showcase the more interactive elements of your designs. For example, you could create a Graphics Interchange Format (GIF) to demonstrate how a user might interact with the homepage of an app you’re designing. There are many programs that UX designers can use to create animations, but here are a couple to highlight:
- Lottie is a tool that helps you edit and ship your animations in just a few clicks. Animation files formatted in Lottie, also known as LottieFiles, use less file space on your hard drive since they are code-based. On Lottie, you can also explore animations created by other designers for inspiration or use.
- Adobe After Effects is often used to add motion graphics and visual effects to designs. For example, UX designers might utilize Adobe After Effects to make text move across the screen or create transitions between pages.
- Rive.app is a spanking new entry into the market. It is used to create smooth animations. Especially popular among those who’s looking into developing Flutter applications