Tim Berners-Lee created the first website in August 1991. Only a year later the first image came to the web. And it took another three years for Donald Norman, a computer scientist at Apple to think of the concept of ‘user experience’ while discussing human-computer interaction. In fact, it wasn’t until 1999 that Adobe Photoshop 5.5 was launched — it had the ‘save for web’ option and functionality to work with web graphics! While Photoshop continues to be a favourite among graphic designers, UI UX design tools have come a long way. Today, there are hundreds of UI UX design tools, specialised ones for complex tasks as well as full-stack tools that allow you to do everything you need. Each of them has its pros and cons. In this blog post, let’s explore some tools that a UI/UX designer needs in their toolkit.
UI UX Design Tools: Everything you Need for a Successful UI/UX Design Career
In a recent blog post, we had divided UI/UX designer skills into three groups:
- Soft skills
Let’s follow a similar structure for tools as well. However, we’ll not go over every single skill or skills that use generic tools. For instance, as a UX researcher, you might need to use surveys or forms. In this blog post, we won’t discuss those. We will, however, include those tools that are exclusive to a UI/UX design career and those that you must have to be a good UI/UX designer.
UI UX Design Tools: Research
UX research tools can be typically categorised into two key varieties: Analytics and usability testing. Some commonly used research tools are:
- Google Analytics: This is one of the most commonly used analytics tools for websites around the world. UX researchers use it for understanding user journey, on-site behaviour, etc.
- Hotjar: UX researchers use Hotjar to see heatmaps, session recordings and conduct surveys on the site.
- CrazyEgg: CrazyEgg is used for heatmaps and A/B testing of different interfaces.
- Optimizely: In addition to heatmaps and A/B testing, optimizely also offers multi-variate testing and personalisation capabilities.
- UserZoom: For qualitative as well as quantitative user research, including participant recruitment, UserZoom offers end to end solutions.
UI UX Design Tools: Design
This is the largest part of a UX designer’s job and there are hundreds of tools that offer myriad combinations of functionalities. Let’s look at a few top ones.
1. Sketch for end-to-end UX design
Sketch is a do-it-all kind of tool for UX design. From basic icon/logo design to complex prototyping and developer handoff, Sketch can handle it all. With libraries, plugins and extensions, Sketch is a necessary tool in the UI/UX designer toolkit. In fact, General Motors senior project designer, speaker and author Jon Yablonski swears by this tool.
He used Sketch to create ‘Humane by Design’, a website that offers resources on ethically humane digital products. He used Sketch to:
- Explore concepts and bring ideas to a digital canvas
- Make iterations for design aesthetic
- Design screens
- Create graphics
You can read about his experience here. Sketch is a Mac only application, which might not be accessible to everyone. If you’re on Windows or other environments, consider other apps mentioned in this blog post.
2. Balsamiq for wireframing
Balsamiq is a widely used low-fidelity wireframing tool, available on the cloud as well as for desktops. It has a great widget library for advanced functions. It is known for its speed and ease of use, making it attractive to aspiring designers as well as non-designers.
From Apple, Tesla, EA, and Cisco, both experts and citizen designers use Balsamiq. Take, for example, the case of Joel Klettke, a copywriter, who swears by Balsamiq to present his content. He believes that wireframes help show words along with context, which gives a clearer picture to the client. You can watch his video on using Balsamiq for copywriting here.
I3. InVision for product design
InVision is a product design suite, offering a range of connected products, for screen design, prototyping and animation capabilities. It also syncs seamlessly with other tools like Sketch, Photoshop, etc. and enables seamless design-to-development handoff.
This is one of the reasons why popular brands like Twitter and LinkedIn use InVision. It has integrations with Jira and Slack, which means the developers can easily access the wireframes along with their respective user stories. But the killer feature of Invision is its collaboration capability that lets you work harmoniously with other team members and clients on the same project.
72andSunny, a full-service advertising agency utilised this feature to its capacity and grew rapidly. InVision allowed them to build interactive prototypes, have version control, create a seamless workflow, etc. But the best part was that they could set user permissions, and add clients to the platform who can give feedback by simply commenting on any design!
4. Adobe XD for Adobe natives
If you’re already a pro at Adobe’s suite of tools like Photoshop or Illustrator, you’ll feel at home with Adobe XD. You can use the product for interactive prototyping, wireframing, creating mockups and artboards. The tool runs on the web, Windows, Android, and iOS!
MullenLowe Profero used Adobe XD extensively to create high-fidelity mockups to demonstrate their vision for any product’s UX. As avid users of Photoshop and After Effects, they found Adobe XD to gel well with their system, and the cross-platform support was quite useful during the project. The project required heavy video editing along with the prototyping and they could effortlessly export from XD to After Effects in just a few clicks. In fact, they moved from Sketch to Adobe XD, which became the new standard in their agency. You can read the entire story here.
5. Figma for interface design
Figma is a highly sought-after tool among UI designers for high-fidelity mockups and animated prototypes. It allows UI design teams to collaborate, work on any design at the same time, and also seamlessly collect feedback from clients. Reusable blocks, auto-layouts, plugins and libraries make Figma a dream to use.
Airbnb, Uber, Github and even Microsoft use Figma for their interface design. Legend is that Ivan Zhao, one of the founders of Notion, the note-taking and productivity app, spent over 18 hours a day building the user experience for his product on Figma. Tag-teaming design challenges, brainstorming endless permutations of user flow and real-time collaboration helped save Notion from failing. Read their fascinating story of user experience innovation here.
UI UX Soft Skills
Storytelling, presentation, developer collaboration, etc. are very important parts of a UX designer’s job. It helps to be comfortable with presentation tools such as PowerPoint, Keynote, Canva or Prezi. It also helps to be able to write a case study to demonstrate the UX design work.
Choosing the right UI UX design tools needs careful consideration — one tool might be more effective than the other for a particular task, but not so good for collaboration, etc. But tools don’t make the designer, skills do. Gaining those skills need more than just material. To build a career in UI UX design, you need a job-ready curriculum, thoughtful mentorship, and career coaching, all of which is offered by Springboard’s UI/UX Design Career Track. And it also offers a job guarantee. Apply Now!