Inside the Toolbox of a Product Designer

You had a lightbulb moment in your garage for a great app idea. It’s going to solve these bunch of problems and so much more. You have spoken to friends about it, maybe even pitched your idea in to some very important people with some very big dollars. Now you need a way to prototype your idea, play around with it in your hands, and test it out with a few people. Before investing in a good developer or designer, you want to first draw up some blueprints without writing any code.

Or that you’re a product designer too, in a tech company or startup space that is growing so fast things changed if you blinked. You might need to venture into a bit of serious prototyping, explore or visualise a particular micro-interaction you have in mind, or find better ways to test your designs on users remotely.

Or, you might just be on the lookout for different design tools to tinker with. I’ve tried and tested a whole yard of amazing tools I now love to use, but I also have a whole graveyard of them too. Here are some of the golden ones that have been integral to my workflow:

Wireframing and Prototyping

Balsamiq (low fidelity): Great for rapid prototyping. Easy to use, fast, and light. Their rough sketchy style encourages people to focus on the ideas and not get distracted by details.

Axure (high fidelity): The most complete prototyping tool I’ve seen in the market. Highly functional with dynamic content, this is one for the advance users with time to sand down the details.

Other recommended tools: Microsoft Powerpoint / Keynote, Proto.io, Omnigraffle, Invision (see below)

Designing

Sketch: Full vector control. Their flexibility, speed, and reinvention of complicated and cumbersome workflows into just a single click is delightful. Brilliant for UI (user interface) design in particular, Sketch makes the Adobe creative suite feel like the grumpy older brother.

Adobe Illustrator: Although I’m a Sketch fan, the Adobe suite is still the most powerful, versatile design software for creatives. I use Illustrator to create all my vector illustrations and artwork.

Other recommended tools: Adobe InDesign, Atomic (see next section), Canva (for those with no or low technical skills in design softwares but want to DIY).

Animation

Framer JS: Invent and experiment with endless and sometimes serendipitous ways of UI interaction. Build and experience it on both desktop and mobile using CoffeeScript. Check out Framer fan and fellow product designer Jacky Lee’s collection of open source framer snippets.

After Effects: For putting pieces of illustrations in motion. Lots of powerful options for creating basic to complex animation concepts.

Atomic (beta): Design in-browser, add interactivity, polish with transitions, all while being subconsciously drip-fed with inspiration by their sleek beautiful UI.

Other recommended tools: Quartz Composer

Sharing and collaborating

Relay: One of the most important thing of being in a team is sharing visibility on what you’re doing, early and often. With Relay it’s as easy as ⌘+C and ⌘+V, and your snapshots of work are automatically shared across the team through Slack and into Relay, effectively creating a design bank. Another similar app is Wake.

Dropbox: This app requires little introduction. Global and cross-device accessibility, version recovery, ability to operate both business and personal accounts on my desktop. Plus they have tons of quirky and fun illustrations over Google Drive!

Other recommended tools: Invision (see next section), WeTransfer (for sending large files up to 2GB).

Usability Testing

Invision: Invision provides an easy platform to transform your designs into clickable prototypes, and add teams into different projects to comment or liveshare. I love using it to do casual usability testing on both desktop and mobile.

Google Hangouts: For remote testing it’s easy to share an Invision prototype in a Hangouts session, have participants share their screen and see their reactions as they interact with our UI. It’s also a low setup barrier as participants don’t have to fumble through any software installation.

I’ve also came across tools built to harness cool data out of user testing sessions, like Silverback, UX Recorder, and Crazy Egg. Keen to hear from you guys out there if you have any experience using them in your day to day work.

Communication

Slack: The central nervous system for team communication. Group chats, file sharing, an attractive line-up of handy integrations. I like picking up delightful crumbs of humour in unnoticed corners of the clean UI along the way. It almost makes chatting fun.

Screencast: Record your screen in a quick video with voice overlays. Mostly a one-way communication each screencast, but great for presenting ideas remotely to different timezones.

Inspiration

With so much creative content out there, this list could be endless! Here are a couple of cool sites I like to visit to get my creative juices flowing.

Web design: HTML Inspiration, Awwwards, CSS Design Awards, One Page Love.

Mobile design: Capptivate, Pttrns, Mobile Patterns, Inspired UI.

Interaction design: UI Animation, Use your Interface, Hover States, CoDrops Playground, Framer on Facebook.

General design goodness to feast my eyes on: Niice, Designspiration, Wooilikeit, Ffffound, Dribbble.

Others

Github: Collaborate with developers.
Font Awesome: Awesome icon font library (it’s in their name).
Icomoon: Create your own custom icon font.
Confluence, Target Process, Trello: Team and project management.
Treehouse, Codeacademy, W3 Schools: Learn to code.

Phew, that’s a long list! I hope you find it useful. While that might feel overwhelming, it’s also a nod to how rich your creative toolbox can be. One thing I can say is be adventurous in learning new tools, but choose wisely as they each offer varying levels of functionality (and usability) that suit different workflows. The only way of finding out which one is right for you is to take advantage of trial downloads, or even start with free ones, and finding which fits in with the way you work.

If you know of any other tools out there that you love too, even ones that are only in Beta, let me know!