Product Hunt Year in Review for Web Designers: 20 Picks

Product Hunt recently released its giant list of the best featured products of 2019. It’s packed with plenty of neat tools and resources, for businesses, freelancers, designers and developers alike.

To help you find the best tools for working as a designer, we’ve narrowed down the list to the 20 best items for web designers (in no particular order).

We’re covering everything from colours and fonts, to CSS and grids. You’re bound to find a few incredibly helpful tools that you haven’t come across before!

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Design Resources

1. Cleanmock

best product hunt

Cleanmock is a tool for creating a mockup of pretty much anything. (Plus, it’s neater and more client-friendly than a sketch.) Starter templates help you with almost any device size and aspect ratio.

2. Charts Factory

best product hunt

Creating charts just got easier with a snazzy tool that takes some of the manual work (and math) out of it. Add data, pick a chart type and adjust colors and styles to match the rest of your design. The best part is you can switch chart types with a couple of clicks to get the best representation of your data.

3. Slides

best product hunt

Developing a pitch or presentation deck is more designer-friendly with this tool. Slides helps you design decks that have the design you want with customizations and tools that help you showcase work or projects with others. (Plus, online views are trackable.)


best product hunt

Upload an image of a font and get similar results – paid and free – from across the web with The font finder AI searches more than 550,000 fonts to help you find just what you’re looking for.

5. Accessible Brand Colors

best product hunt

Accessible Brand Colors shows how ADA compliant a color pair is. You can generate a chart to see how they can be used together for accessibility, and find similar colors that work better.

6. Checklist Design

best product hunt

Speed up your design and usability checks with Checklist Design, a collection of UX and UI best practices in a list format. Work through checklists and resources as you move through projects to enhance usability.

7. for Photoshop

best product hunt is a tool that removed the background of images in Adobe Photoshop with a click. You can use it for whole images, selections, and create layers and masks.

8. Fast

best product hunt

Fast is a tool that provides a one-click login and checkout for e-commerce websites. It’s quick and secure.

9. CSS Scan 2.0

best product hunt

Check, copy, and edit CSS with a click. This little tool saves a ton of time over slogging through the “Inspect Element” alternative. Plus, CSS Scan uses the same technology as Google and Github to quickly clean any CSS trash.

10. Sizzy

best product hunt

Sizzy calls itself the browser for developers and designers. It’s backed with little goodies that are designed to speed up your workflows, including sync for multiple device types, scroll to element, a page navigator, and hot reloading support.

11. Font Awesome Duotone

best product hunt

The Font Awesome icons you probably use already got an upgrade with duotone color options that you can customize. Match them to your brand and swap layer opacities to make icons fit your design perfectly.

12. Subcolor

best product hunt

Create better gradients and fades with Subcolor, which is a tool that generates the colors between a color pair. Pick a start color and a stop color and how many colors you want in between and the tool does the rest.

13. Free Illustrations

best product hunt

Free Illustrations is a collection of vector background illustrations that you can use for websites and landing pages. The collection includes a growing number of topics for illustrations and you can make requests.

14. FYI

FYI is a giant collection of free resources for freelancers, from tools to software to proposals and contracts. It’s a good starting point for design freelancers who need help with the business side of design.

15. CodersRank

best product hunt

CodersRank turns your skills and resume into a digital, 360-degree profile based on public and private data you hold on various coding sites. Use it to show off your credentials (or secretly compete with other developers).

16. Image to HTML

best product hunt

Image to HTML with Frontly helps you create a web page based on an image or screenshot that you provide. It turns the static design into clean HTML with lean source code. (Great if you have a design in mind, but aren’t sure about how to code or develop it.)

17. Gradienta

best product hunt

Gradienta is a collection of gradients that you can grab and use as pure CSS code, SVG or JPG images. It’s an open-source project and 100% free.

18. How Much Is My Side Project Worth?

best product hunt

Is your side hustle valuable? This nifty calculator will help you figure it out. All you have to do is enter a few numbers.

19. CSS Grid Generator

best product hunt

Set the number of columns and rows you need and this tool will create a CSS grid for you. It’s designed as a way to help you use CSS grid features quickly.

20. Sketch2Code

best product hunt

Sketch2Code is a tool that uses Microsoft AI to turn a hand-drawn design into HTML. (Pretty cool, right?)