I am a product designer and these are my tools

Posted by in Design on July 30, 2015

There are a lot of tools to get the job done when you’re a product designer, and finding the right ones all comes down to how you like to work. This is what I use to a day to day basis when I’m doing design work.

Note:  I’m always willing to try out new tools and improvements to my workflow. Feel free to suggest anything in the comments and I’ll be sure to try it out.

When I start a project, I’m in the crew that likes to leave the office and start sketching out ideas, whether it’s wireframes, app flows, cats, etc.

Paper

product-designer-tools-field-notes

What I’m writing on is the least of my concerns during this process. I typically like to grab some 8×14 out of the printer so I have a lot of space to work with, but I also generally have some trusty Field Notes in my bag to jot down ideas on the go. They are super cheap, come in different varieties to keep things interesting, and the fact that they are all the same size allows me to easily sort them when I have a bunch accumulated. It’s always fun to flip back in this to sketches and notes that were written 5 years ago. They come in a few different layouts, but I tend to stick to the dotted grid for UI sketches.


Writing

product designer pen

I switch between mechanical pencils and pens depending on what’s in front of me, but as of late, I haven’t been able to put this one down. I was in Tokyo last year and happened to stumble on a stationary shop with a mind numbing amount of pens. It’s called the Marks French Days ballpoint, and I’m pretty sure this thing was $10 but it felt better than a majority of the more expensive ones. It’s got a pretty fine tip, which allows for some small writing if needed.


Organization

We have an entire project management flow with a variety of tools, but I also like using Trello for myself to get an overview of everything of going on at once. I currently have it split into a basic to do list between the Android and iOS app I’m working on, as well as a general category that I can dump anything else into. I I even  use it in my personal life for restaurants to check out, movies to see, books to read – you get the idea.

Trello Product design

Try it out


Design

For UI related work, I made the switch to Sketch a year ago and haven’t looked back since. While it can be a little bit buggy at times, it sped up my workflow considerably, and exporting assets no longer makes me want to ‎(ノಥ益ಥノ┻━┻.

product design sketch workflow

Of course one of the best things about sketch is the support for 3rd party plugins. Don’t expect a stable time in Sketch with a million of these installed, but here is what I’m currently using. Let me know if I’m missing something that I should try out.

Sketch Toolbox – Download

This is a nifty little tool that allows me to download and install plugins in one central location.

Content generator – Download

My favorite plugin by far, hands down, forever and ever. Content generator lets me quickly add fillter photos, names and locations with one click.

Lorem Ipsum – Download

Nothing crazy here, but it saves me a trip to chrome.

Sketch Mirror Refresh – Download

Sketch Mirror is one of the few things that raises my blood pressure in Sketch. Sometimes I can’t it it to work over wifi, IP or tethered, and this little plugin gives it a little refresh which sometimes solves the problem.

Set Line Height – Download

Another really handy tool I can’t live without. ⌘L quickly opens a window which allows me to quickly enter a lineheight that is a multiple of the type size. I don’t like math, and this helps me avoid doing math. Awesome.

Zeplin Export

Read more on this below, but just know that this plugin allows me to export my artboards out of sketch, into Zeplin.

Sketch Preview – Download

Sketch mirror is great (sometimes) when you’re designing iOS apps, but sadly doesn’t have a counterpart app when designing on Android. With a combination of Skala preview, ⌘P sends what’s on my artboard to an Android device on the same network. It’ll do for now.


Since we’re exploring other options away from Adobe, I started to recently use Affinity Designer as well. It has opened some crazy large AI and PSD files with no trouble at all, and it’s shockingly fast when you compare it to photoshop. I’m still in that clunky phase where I’m trying to wipe my brain of all the photoshop and illustrator shortcuts (although a lot of them are still the same) and learn where all the tools are, but I’m really enjoying what I’m seeing so far. Stay tuned for a full update on Affinity once I get past the initial learning curve.

Affinity Designer

Download the trial


 

Specifications

product design redline workflow

You know what sucks? Redlines.

Sure, something like the above isn’t so bad. But when it’s required for massive projects, I kind of just want to curl up into a ball and die. Thanks to the fine folks at Zeplin, I can live another day.

product design tools zeplin

Zeplin allows me and my lovely developers to work better together by providing a specifications document that is automatically generated off my design in Sketch. With the Sketch plugin I mentioned above, all I do is press ⌘E and my design is automagically sent to zeplin in a pretty little package for the developers to poke around in.

Out of any of the tools I’ve used in the past year, Zeplin has by far saved me the most amount of time.

Try it out


Prototyping

In the last few years, one of the biggest things to bust out into the market for product designers are all these great prototyping tools. There are a lot to choose from these days, but I’ve gravitated to Invision and Quartz Composer with the Origami framework from the fine folks at Facebook. Why did I list two tools for this one job? Each one really excels at certain things.

If I need to map out large flows between sections in mobile apps or sites, Invision is a way better tool for the job. You can throw something to share with the entire team in minutes, and it gives everyone something to play with and give feedback on. What it doesn’t do is offer me the means to create micro transactions that I can discuss with my development team.

product design tool

Using Pixate was my first experience being really wowed with a prototype tool tailored to mobile apps. It’s really insane what you can do with it, but I found myself needing to use a ton of conditions for some of the custom things I needed to accomplish. I find myself pretty slow when writing code, so I went looking for something else a bit easier to get into.

Enter Quartz Composer and Origami. QC is a great alternative for those that are looking for a visual programming language to bring things to life, and I instantly fell in love with it after completing all the tutorials on the site. The other great thing is that you can export animation properties out of your prototype for iOS, Android and web, and everything will look and feel the same. If you can wrap your head around all of the patches, you can really create some crazy stuff.

product design tools origami

The main problem with QC and Origami is that there isn’t a ton of documentation out there, so you really do have to explore the app to get the most out of it. Whenever I’m stuck, I’ll post a question to the Origami Community on Facebook and someone (usually Facebook staff) will help you out within 20 minutes. Nothing is more satisfying that seeing your designs come alive. I’m really looking forward to what gets released in the next version.

Here is an example of a seemingly simple search transition that is way easier to build when our developers can dissect everything that is going on.

product design quartz composer workflow

Download Origami


That’s it for my primary tools I use during the design process. There is a whole separate suite of tools once the app gets out of the primary design phase which I’ll get to in part 2. Have a suggestion? Let me know in the comments or tweet at me. If you want to see what I’m working on, find me on dribbble.

  • Karl Tiedemann

    This was fantastic! Thank you for posting. I’m in the middle of redeveloping my own workflow, so it’s wonderful to see how others work. I had not heard of Zeplin and it’s blowing my mind.

    • http://www.takis.ca bryanmanio

      Thanks! It’ll definitely speed things up. You can even export assets from multiple resolutions out of it which I forgot to mention.

  • http://LukeEischen.com Luke Eischen

    Affinity Designer is great along with the New Affinity Photo. Thanks for the post.

    • http://www.takis.ca bryanmanio

      I haven’t tried photo yet actually. What I really want is a replacement for Lightroom, then I can get away from my CC subscription entirely.

      • Cristian Moisei

        Affinity Photo is actually kind of slow, even compared to PS. Adding effects, redrawing stuff – it all feels a bit clunky. I expected it to work better given how fast Affinity Designer is.

  • João Cunha

    Thank you very much for all the tools you shared. It’s a great help.

  • Seth

    Dude, you need to check out Marketch https://github.com/tudou527/marketch (find it on sketch toolbox) — Looks like it might be very similar to Zeplin.

    Basically it exports your sketch file into a perfect spec doc for your devs. No one really knows about it yet. I just found it the other day on accident.

    • http://www.takis.ca bryanmanio

      Oh nice! This looks pretty good too. Asset exports out of Zeplin are a huge thing for me though, it’s one less step that I have to worry about!

    • tungjacob

      thank you, it such a gem plugin

  • Zhihao Wang

    Choice of computer? I’m looking to upgrade from my MacBook Air, but not looking to spend that much. Should I switch to the Pro? Or should I get a windows desktop and have a couple of monitors to work with.

    • http://www.takis.ca bryanmanio

      The only issue with getting a PC is that you’re going to be unable to run most of this software, as it’s mac only 🙁

      I would go to the pro, Quartz Composer is a hog on the CPU so you’re going to want as much power as you can get.

  • Narek Khach

    Awesome writeup. Thanks for sharing this. I’m curious to try Origami and Pixate for prototyping as well, but I’m told its good for complex in-screen animation demos rather than full-app prototypes. Do you find this to be true? If so, what do you typically use for full-app prototyping? Cheers.

    • http://www.takis.ca bryanmanio

      Yes, it’s very much suited towards micro interactions inside of the app. If you’re looking for something simple to stitch a bunch of screens together with basic animations, use Invision.