7 Most Useful Sites & Extensions for Product Designers
As of January 2020, there were over 1.7 billion websites and over 4 billion internet users across the world. Behind those 1.7 billion sites are thousands of talented designers who work to create simple and pleasing user experiences for the world’s 4 billion+ users. I’ve been working hard at creating those experiences for multiple years, and have discovered numerous different tools and sites that have made my job significantly easier.
These are, in no particular order, some of my favorite chrome extensions and sites that streamline my work as a Product Designer:
Extensions
1. WhatFont
Have you ever found a beautiful site that had the perfect font? Rather than opening the inspector and sifting through all of the CSS properties to find the font name, WhatFont allows you to easily see what that font is simply by hovering over it. It’s an incredibly simple to use tool that saves you a ton of time searching for the perfect font for your next big project.
2. CSSViewer
How many times have you started reviewing your dev site and realized that something was just a little off? Digging through the inspector in order to compile a list of the CSS properties that are wrong can often be time-consuming and cumbersome. CSSViewer was built to streamline that process. It allows you to easily see what each element is and the CSS properties that are applied to it by hovering over the element rather than digging through the inspector. No more wasting time trying to figure out what the border radius on that button is!
3. Productdesign.tips
Productdesign.tips is always on my list of recommendations to other designers. From articles and case studies to tools and events, Productdesign.tips provides you with tons of valuable information displayed in a way that’s easy on the eyes. I personally have it set as the default new tab on my browser, so any time I have a few minutes to spare I can just open a new tab and find some interesting design-related content. I like Productdesign.tips more than similar products because it has a wide variety of content and the categories change positions when you reopen it, ensuring I’m always exploring different articles and resources.
Websites
4. Sketch App Sources
Need iPhone mocks to display your designs on your portfolio? Looking for a template for a design you’re making? Sketch App Sources has tons of free Sketch resources you can use to make your design life a lot easier. You can download over 4,000 different resources for free!
5. Awesome Design Plugins
Using plugins for Sketch, Figma, and AdobeXD is one of the easiest ways to streamline your workflow. There are a multitude of existing plugins available for each tool, but discovering a new plugin for a specific problem you’re having can be difficult. Awesome Design Plugins aims to solve that issue. The site lists hundreds of different plugins organized by their function, such as data generation, resizing, and style management. They also have sections for UI kits and tools!
6. CopyPalette
Coming up with a color scheme for a design system takes a lot of time. If you have a primary color picked, CopyPalette can make it easy for you to create a monochromatic color scheme. The site allows you to adust the contrast and number of variations of your color, giving you the freedom to adust the palette to suit your needs. You can copy the palette as an SVG straight from the site and start using it immediately.
7. Undraw
Undraw is one of my favorite sites. It contains hundreds of pre-made SVG illustrations that you can download to use in presentations and in your designs. Undraw also gives you the ability to change the main color in the illustrations to ensure they fit whatever color scheme you have picked. Best of all, Undraw allows you to use these illustrations in any project, commercial or personal, for free!
What are some of your favorite design resources? Feel free to leave them in the comments below. Thank you for reading!
