Resource Toolkit for a Product Designer

9 min readJan 28, 2016

--

I update this list regularly.

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 —

CloudConvert

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 —

Craft 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 —

UIfaces

Names

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

UInames

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 —

Use all of these once and decide which ones you’re comfortable with. You only need 1 or 2 to work for you.

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 —

Butterick’s Practical Typography

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

RightFont

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) —

Type-scale

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

Ffffallback

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

WhatFont extension

Wordmark is a great in-browser typography tester —

Wordmark

Other very useful typography resources & necessary reading —

Typeface resources

Nice font foundries

Hoefler & Co. (Gotham, Ideal Sans, Whitney etc)
FontFont (Clan, Din, Kievit, Zwo etc)
Mark Simonson (Proxima Nova, Grad, Mostra Nuova etc)
PSType (Ratio, Quatro Sans etc)
Just Another Foundry (Bernino Sans, Bernina Sans, Facit Web etc)
Klim Type Foundry (Tiempos Text, Domaine Sans etc)
OkayType (Alright Sans, Harriet Text etc)
OurType (Fakt Pro, Meret, Alto Pro etc)

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

Yeun’s open colour

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 —

EmojiOne

Other quality icon-sets —

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

Fontastic
IcoMoon
Fontello
Recommended reading on creating accessible and bulletproof icon-fonts that work like a charm — Filament Group’s Tutorial

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

Thoughtbot Foundry

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

Should you decide to use icon-fonts on your website, do proper reading and study on why you are making that choice and how you plan to maintain the fonts going forward. It’s not as trivial as it sounds.

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 —

Responsive Breakpoints

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 —

Bjango’s icon design workflow

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.

When you design for mobile devices, for iOS, design in points (pt) and for Android, design in density-independent pixels (dp).
This way, these designs can scale for whatever devices you want them to.

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

Bjango’s device pixel-ratio tester (simply open this page on the device you want to know the details of)

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

Quickly check resolution of any iOS device —

iOSRes

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.