What’s In Your
Design Toolkit?
6 Design Tools You Need To Try
Every product designer has a different workflow and tools that they use to help them do their job. The Toronto design team at Pivotal Labs wanted to share our go-to list of both analogue and digital tools that we use throughout all stages of designing a product.
Analogue Tools
The Good Ol’ Sticky Note
When it comes to brainstorming, we rely on the good ol’ Sticky Note to help us capture our ideas. An ideal 3” by 3” wide, the Sticky Note is the perfect size for one idea (whether good or bad), forcing us to be concise and succinct. This allows for rapid idea generation which allows participants regardless of discipline to participate. With these Sticky Notes, we can quickly group, sort, and prioritize ideas to help form the foundation for the next step in the project.
The Great Wall of Whiteboards
The whiteboard gives us space to piece together the ideas generated from brainstorming sessions. From here, we create high-level information architecture that gives form to rudimentary wireframes. It encourages an iterative process that engages people to participate and is a great way for people to visually digest the information.
UI Paper Templates
Device-specific templates are great for capturing the basic content structure of a screen. These low-fidelity wireframes garner feedback that is more centered around the flow of the screens; the details of the visual elements are less important at this stage. Paper templates form the foundation for either jumping into interactive prototypes or digital wireframes.
Digital Tools
Sketch
Sketch is our favourite digital tool that combines the best features from InDesign, Illustrator, and Photoshop without all of the bloat. Countless plugins and exporting tools automate a lot of the more tedious processes associated with mobile app design, (i.e., asset cutting or PNG creation). This supports a workflow that allows us to easily and quickly design wireframes or high fidelity mockups.
Skala Preview
When designing for high-pixel-density screens, it’s easy to forget that the end device is a fraction of the artboard size. By using Skala Preview, we can mirror our designs to phones/tablets and get an accurate representation of how it will look and feel. In addition, it’s great for checking colours, legibility of fonts, touch states and also colour accessibility for the most common types of colour blindness.
Invision
Depending on the complexity of the product, presenting all your mock ups to a client can be overwhelming and confusing for both sides. Functions, interaction and context can become difficult to digest and hinder the understanding of the design. Invision is a web-based application that we use for prototyping that allows you to link areas in your mock-up to other static screens. This lets you to present one flow at a time and illustrate what happens when interacting with different elements on the screen. In some cases, we’ve even used an Invision prototype to perform user testing early into our development phase. We’ve found this tool to be extremely helpful and encourage you to try it.
These are just some of the tools that we use everyday to help us ideate, gather and create.
We hope this list was useful and many of you may already be using these tools in your current workflow. We’re always interested to hear from you so feel free to drop us a line and let us know what works for you!
Tweet us @tor_labs_design and tell us what’s in your design tool kit!
Thanks to Jackie Chow, Su Um and Vickie Fu
