Press Enter / Return to begin your search.

I am a product designer and these are my tools

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.

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

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

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.

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 ‎(ノಥ益ಥノ┻━┻.

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.

DOWNLOAD THE TRIAL


Specifications

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.

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.

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.

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.

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.

 

  • As a tried and true watch nerd, I can barely contain my excitement for this @nomos_glashuette Metro to arrive next week. Design by @studio.mark.braun
•
•
•
•
#unlimitedminimal #modernoffice #scandistyle #minimalliving #minimalism #productdesign #mindtheminimal #rsa_minimal #simplicity #moderninterior #minimalmood #modernhomedecor #minimalistdesign #industrialdesigner #minimalgoodsco
  • I love everything about this Lancetta bathtub design, especially that tap. Produced by @falperdesign. 
Found on @designhunter.official
•
•
•
•
#minimalliving #apartmentgoals #unlimitedminimal #mindtheminimal #interiordesigninspiration #minimalmood #moderninterior #rsa_minimal #minimalistdesign #minimalistic #modernhome #industrialdesigner #modernoffice #interior_design #minimalgoodsco
  • The Atmosphere collection designed by @ceciliemanz for @glosterfurniture. What color is your favorite?
•
•
•
•
#minimalistic #mindtheminimal #minimalliving #productdesigner #minimalobsession #modernhomedecor #minimalist #industrialdesigner #modernhome #apartmentgoals #interior_design #minimalistdesign #killerminimal #minimalisma #minimalgoodsco
  • Soft curves on The Dansk collection designed by @glosterfurniture.
•
•
•
•
#modernhomedecor #minimalism #modernhomedesign #killerminimal #unlimitedminimal #apartmentgoals #modernhome #danishdesign #productdesign #minimalobsession #mindtheminimal #minimalisma #interiordesigninspiration #moderninterior #minimalgoodsco
  • The slim and light 7 Collection system in powder coated steel. Designed by @lauravre
•
•
•
•
#simplicity #minimalist #minimalmood #modernhome #interiorismo #danishdesign #rsa_minimal #minimalliving #scandistyle #modernoffice #killerminimal #productdesign #minimalobsession #mindtheminimal #minimalgoodsco
  • The Atmosphere collection designed by @ceciliemanz for @glosterfurniture
•
•
•
•
#killerminimal #interiorismo #industrialdesigner #danishdesign #modernhomedesign #minimalmood #apartmentgoals #unlimitedminimal #productdesigner #minimalistdesign #minimalist #simplicity #minimalgoodsco

minimalgoodsco @ Instagram