Resource Toolkit for a Product Designer

Hardik Pandya
Jan 28, 2016 · 9 min read

Having worked in the design field for a considerable period, I’ve developed my own toolkit that helps me work as a product designer.

Now, in isolation these resources are hard to find under one large title. So I created one. It was mostly just compiling all the information that lived in my folder-structured bookmarks, accessed pretty much daily.

These resources will hopefully help the beginners get started in the field of design and will help the seasoned fellows get their work done faster and better.

Before I dive in to tools specific to design, here’s one that’s useful no matter what domain you work in — convert any file format to its related file formats snappily —


Sketch is what I live and breathe in, everyday. I use a bunch of keyboard shortcuts that have become muscle memory for me. I’ve listed them here —

  • Cmd + Hover — Directly select a layer no matter how deep grouping it is in
  • Cmd + 1 — View whole canvas at once
  • Cmd + 2 — View selected element instantly
  • Cmd + 3 — Centre selected element
  • Cmd + Option + A — Select all child layers inside selected group (via this plugin)
  • Cmd + G — Group elements
  • Cmd + Shift + G — Ungroup elements
  • Cmd + . — Presentation mode (no distraction design display mode)
  • Cmd + Option + Up/Down — Move layers above/below
  • Tab — Select layer below
  • Shift + Tab — Select layer above
  • Cmd + Option + C/V — Copy paste layer styles to/from layers
  • Cmd + R (with layer selected) — Rename that layer directly
  • Cmd + Shift + H (with layer selected) — Toggle hide/unhide layer

Find a ton of useful Sketch shortcuts here —

There are 2 plugins that you should have installed from day 1 really —

These above plugins optimise every single export you make automatically, saving you the hassle of doing this separately later.

Sketch plugin directories

I’d be remiss if I forget the amazing data-generator and filler plugin by InVision —

Sketch plugins are really useful. I use a handful of them that save me time and energy everyday. Find them here —

Pen & paper

  • Sketchsheets — mockups of devices you can get printed on paper for some good old pen & paper wireframing
  • Inkinite reusable notes — the reusable notebooks are perfect for daily use

For diagramming, I recommend the ever popular Sakura Pigma Micron series.


Marketplace

We all designers buy goodies and stuff related to design from time to time. Below are some of the marketplaces that I usually keep going to —

Inspiration

These are sites that I go to when I want to explore some new ideas or get a creative release —

Kits for mobile design

When designing for mobile, stock UI components for the platforms’ respective design languages are very important.

Below are the UI kits for iOS 9, Material Design and for general inspirational purposes —

Sounds

Using sounds in the interface is more common these days to add a little touch that also accentuates accessibility. Here’s a nice resource —

Faces

Don’t use grey empty avatars anymore. Here’s a nice place to get head-shots of real people to use in your designs —

Names

Here’s a really nifty random (but real) name generator to use in your design mockups —


Prototyping is a very important element in product design process. There’re a lot of tools out there today that can help you here. My personal favourites are Marvel app (for creating flows) and Pixate (for designing interactions).

Here are a couple of articles that explain the key differences between all these apps —

Here’s a comprehensive list of useful prototyping tools —

User-testing & screen recording

We all mostly use retina devices to design products. All our users mostly use non-retina devices. We need to constantly test our designs on non-retina screens and a good way to do (when you don’t have such a device handy) is — get this app Blind Browser by Charlie Deets.

Presenting the designs


Typography is a very broad domain in itself. I as a designer love exploring new typefaces and keep collecting them in my own repo.

To read up more about web typography in greater conceptual detail, Butterick’s Practical Typography is the definitive resource —

It can quickly go out of hand to manage typefaces on your Mac. I use RightFont app to handle this —

In designing products for web or mobile, we need to work with type-scales and well-defined type sizes. Here’s a nice website to do just that using different ratios (e.g. the Golden Ratio, Augmented Fourth, Perfect Fifth & more) —

Fallback fonts are important to ensure accessibility on outdated browsers, slow connections etc. Here’s a nice utility to test your fallback fonts —

Identifying fonts on the web is really handy. Here’s the perfect tool for that that extracts the font-name from the CSS file —

Wordmark is a great in-browser typography tester

Other very useful typography resources & necessary reading

Typeface resources

Nice font foundries


There are 2 really helpful apps you need to have on your Mac to manage colours —

Some important & useful websites to convert colour formats, test new colours and generate colour palettes —

Also noteworthy is this new resource where you can quickly pick up palette-variables for different colour swatches for your UI


A nice way to manage the icons (or icon-fonts) on your Mac is to get one of the apps from below —

Icon resources

When looking for icons, below are my goto sources for finding almost any* icon there is (I highly recommend getting a paid subscription of either of those) —

Emoji icon-set available for free to developers —

Other quality icon-sets —

A few nice resources to convert icons to icon-fonts —

Thoughtbot as always has a nice vector drawings of laptop, phone and tablets and a ton of other real-life elements

Here’s an article on why you shouldn’t go with icon-fonts and use SVGs (I agree) instead — Seriously, Don’t Use Icon Fonts


Product demo mockup shots

If you’ve always wondered where or how to find those professional shots of digital devices showcasing app and web designs, here are the places you can get those cool mockup shots —

Stock photos


When you use images, it’s very easy to go overboard with them without keeping in mind the performance implications of them. Good quality images are large in size so it’s advisable to use algorithms to losslessly (sometimes even with loss) compress them and bring them to manageable sizes —

  • ImageOptim — Nice free Mac utility to compress images quickly
  • TingPNG — Lossy image compression for PNG and JPG images
  • Kraken — Freemium API-automated & web-based image compression tool

There’s a nice image breakpoint generator tool for having responsive images in your websites —


It’s very important to stay current in your professional domain. There’s so much written everyday about product design on the web. While it’s impossible to get any work done if you read everything, there’re some sources I follow closely to keep myself update with what’s happening in the industry.

Design news & updates —

Design blogs, writers & Medium publications —


App icon resources

Recommended reading while designing icons —

Device pixel-ratio

When you design for mobile, especially for Android, device-screen fragmentation can cause problems between you and the developers. In order to avoid complications, it’s important to understand the range of devices you are designing for.

Here’s a nice utility to identify any device’s pixel-ratio —

Here’re are incredibly detailed guides to device pixel-densities that are worth reading —

Quickly check resolution of any iOS device —


Thank you for reading. I love to share my learnings and experiences in product design here on Medium. Check out my other articles. You can also follow me on Twitter for more realtime updates.

Hardik Pandya

Written by

Designer @Google Search • Previously @GSuite

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade