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 —
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.
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 —
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 —
Using sounds in the interface is more common these days to add a little touch that also accentuates accessibility. Here’s a nice resource —
Don’t use grey empty avatars anymore. Here’s a nice place to get head-shots of real people to use in your designs —
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 —
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
- 1-page usability test plan
- Usability test of Product Hunt’s iOS app (case study)
- Full Story
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 —
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
A nice way to manage the icons (or icon-fonts) on your Mac is to get one of the apps from below —
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 —
- Material Design icons
- Evil Icons
- Feather icons
A few nice resources to convert icons to icon-fonts —
- 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
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 —
- Mockups on UI8
- Facebook’s diverse device hands
- Facebook’s device mockups
- Angle by DesignCode
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 —
- UX & Tollerei
- Designer News
- InVision blog
- Upgrade News
- Smashing Magazine
- FastCo Design
- A List Apart
- The Tiny Designer
- Sketch Monthly
- Sketch Tricks
Design blogs, writers & Medium publications —
App icon resources
Recommended reading while designing icons —
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 —