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!
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
1. Cleanmock
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
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
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.)
4. WhatFontIs.com
Upload an image of a font and get similar results – paid and free – from across the web with WhatFontIs.com. The font finder AI searches more than 550,000 fonts to help you find just what you’re looking for.
5. Accessible Brand Colors
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
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. Remove.bg for Photoshop
Remove.bg 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
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
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
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
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
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
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
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
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
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?
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
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
Sketch2Code is a tool that uses Microsoft AI to turn a hand-drawn design into HTML. (Pretty cool, right?)