The Product Designers Toolbox
16 tools that will help enhance your design workflow.
Any designers know that the product design process can be messy and time-consuming. It’s easy to lose track of research materials, icons and fonts you plan to use, or that one-cool-app-screen inspiration you accidentally scrolled away and can’t find again.
Accidents (unfortunately) happen, but some of them can be avoided! In this article, we are sharing some tool recommendations from our Product Designers, Gloria Jonathan & Isabela Lucia Beatrix that will smoothen your workflow!
The recommendation will cover a designer’s process cycle:
- Inspiration & Research
- Flowcharts & Wireframing
- Whiteboarding
- UI Design
- Protoyping
- Usability Testing
- Developer Deliverables
- Resources
Without further ado, let’s check out the list!
Inspiration & Research
Yay: A treasure trove for UI inspiration, since many designers are showcasing their portfolios here. You can browse references for animation, typography, sketches, and many others here.
Nay: It only displays the end results without details of the designer’s thought process. Furthermore, everyone can upload their works without curation, so it’s hard to separate and distinguish between good and bad works.
Yay: Dribbble-like, but more detailed. Aside from the end result, Behance also provides details such as tools and the process behind it, quite similar to a case study. Works showcased on Behance are also curated, so the quality is sort of proven.
Nay: The caveat is that the curation process is unclear, so take it with a grain of salt.
While you can scour inspirations on Behance and Dribbble for free, if you have the budget, try Mobbin!
Yay: It’s a library of searchable screenshots from released mobile apps, so the design effectiveness & quality are already proven. What’s great about this platform is its search feature, we can narrow down our results based on app category, design pattern, design features, and other criteria.
Nay: However, only premium users can get access to the advanced filter feature. But the cost is justified!
Yay: Similar to Mobbin but with a specific demographic since it showcases apps in the Asian market (many are made in Indonesia!).
Nay: The selection is not as varied as Mobbin's yet because of the platform’s relatively young age.
Yay: Are you in need of a harmonious color palette for your design? This generator will help you create one! You can make a palette by choosing a base color and then let the platform’s AI find and select other colors that complement it.
Flowcharts & Wireframing
Yay: Many designers opt to sketch their low-fidelity design, but the process can be much easier with online tools like Whimsical.
Aside from creating wireframes, Whimsical can assist in mapping the Information Architecture of our product. You can visualize the screen hierarchy, including the items (buttons, fonts, icons) on each screen, with ease.
Whiteboarding
Yay: In this era of collaboration, whiteboarding tool is a blessing. Figma, the popular UI/UX design platform, is entering the field with FigJam. It facilitates seamless collaboration for everyone in the team from drafting concepts to the actual design without switching between apps.
Aside from basic functions such as sticky notes and drawing, the platform provides interactive features such as chat, “huddle”, high five, put reaction, and stickers!
UI Design
Yay: Currently popular among designers, Figma is a robust design tool that also provides simple prototyping features and code handover. One most-liked feature is its Auto Layout feature that mimics how front-end development works; with padding, margin, and spacing between items. The smart animation feature is also quite rich and more than enough to make fluid micro-interactions. Figma also has many (TONS!) plugins that can help your workflow become easier and seamless.
Nay: Due to its vast feature set, Figma may seem difficult to use. But don’t worry, many educational resources are available on YouTube. You can also try learning by doing with other Figma Community users.
Yay: The good thing about Adobe XD is that it has Adobe family integration, making switching between Adobe Photoshop, Illustrator, and XD much more seamless compared to the others. Not only that, it also has a 3D function that will be useful for designing Augmented Reality UI. In a time when virtual reality gains more prevalence, you can rely on Adobe XD to design its UI.
Yay: Although they meet tough competition nowadays, Sketch is the ‘OG’ UI/UX design tool. Some organizations still use Sketch because it allows more privacy and is a bit cheaper for collaboration, compared to its competitors.
Prototyping
Yay: Framer is an intuitive prototyping tool that is easy to learn and has many tutorials to make fluid micro-interaction. Once you have mastered working in Framer, the end result can even look like a real website/application.
Yay: A very advanced interaction designer, Webflow is a robust no code website design platform. A good understanding of HTML / CSS will help a lot, but even if you’ve never learned it, you can browse the tutorials provided by Webflow and or from fellow users on the internet. It’s very easy to learn and will help you create a professional website in a short time.
Usability Testing
If you use Figma and want to avoid the hassle of switching apps during usability testing, this is the tool for you.
Yay: Maze is a good unmoderated usability testing software. The interface looks neat and nice, it’s also easy to understand for first-time users. You can integrate your prototype to Maze to be tested by the interviewee.
We can create our own test scenario, determine the happy flow, and other possible test paths. We can also give additional questions or statements to participants during the testing session. After the participants have completed the test, we can review the success rate, completion time, eye movement, and all the paths they have gone through. The result overview is scannable and you even can see the tester’s touchpoints inside the details.
It’s a great software to validate the UI/UX solution for small-scale projects.
Developer Deliverables
Yay: Zeplin is specifically for code handover, and it’s really the best at that. It has clear measurements, and developers can switch between HTML / CSS, iOS, and Android code. It’s also better at recognizing grouping and exporting assets.
Resources
Yay: Storyset is a great go-to website for beautiful free illustrations. It has a plugin for Figma and you can customize the illustration before downloading it. The platform caters for the needs of usual UI/UX assets and you can choose between 4 different styles.
Yay: Iconify compiles various free icon sets into one simple plugin. You can just open the plugin, input the keyword, and then you can choose any icon style that fits your project seamlessly.
