5 free must-have tools to upgrade your web design 🎨
Tags: webdev, design, frontend
Published: 2020-07-20 11:15:57

> No matter what you do, **your job is to tell your story**. - Gary Vee 

And one of the best ways to do it as a web developer is by embracing the power of the visual. Whether you are a frontend chic or an algorithms geek, **the ability to make your projects look great is a superpower** for anybody who wants to make a living on the internet. 

For those who love making their website pop out (and even those who find it a tedious chore), I have selected 5 tools that...
- will make your design workflow simpler, faster and more enjoyable
- have a near-to-`null` learning curve
- are completely free for you to start  

#1. A color palette generator 🎨

![Coolors interface with many palettes](https://dev-to-uploads.s3.amazonaws.com/i/svto7q4vsag9dsukmdfs.png)

Nailing **the perfect color combination has many more advantages than just making your website look good** - it also sets the tone of the project and makes your text easier to read. But, with more than 16 million colors, how do you pick the right one? 

One of my favourite ways to start my design workflow is looking at Coolors for palettes that match the tone of my project. 

🔗 [Coolors](https://coolors.co/)

Or, if I want to use a custom colour, I look for complementary or triadic colors on Canva's color wheel. 

🔗 [Canva Color wheel](https://www.canva.com/colors/color-wheel/)

![Canva Color Picker Interface](https://dev-to-uploads.s3.amazonaws.com/i/hpe900zm909ijwf4akz7.png)

The resulting color combination usually looks great. Finally, you can make the text color a bit darker, and lighten the background color so that your text is easy to read.

#2. A browser color picker 👩‍🎨

![ColorZilla color picker](https://dev-to-uploads.s3.amazonaws.com/i/fwmvg0brir664ipp01qb.jpg)

Have you ever fallen in love with the color combination of a website you have just discovered, and wished you could capture the HEX color name for later? 

ColorZilla and SitePalette are advanced color picker extensions that let you pick any color from a page, tweak it and use it in your projects.

###Links

🔗  [ColorZilla for Chrome](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)

🔗  [ColorZilla for Mozilla](https://addons.mozilla.org/en-US/firefox/addon/colorzilla/)

🔗  [SitePalette](https://chrome.google.com/webstore/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh)

#3. A browser font picker 🔤

![WhatFont color picker extension](https://dev-to-uploads.s3.amazonaws.com/i/b2x51ey7l7w4eifi7u1k.png)

WhatFont lets you pick any font from websites you visit, get all its data and even tweet it to show your appreciation! 

Honestly, I don't think there's anything else to explain about this wonderful extension, so I encourage you to start using it now to discover the DEV website font.


###Links

🔗 [WhatFont for Chrome](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)

🔗 [WhatFont for Mozilla](https://addons.mozilla.org/en-US/firefox/addon/zjm-whatfont/?src=search)

#4. A designy new tab to feed your inspiration ✨

Getting good at design is a habit, and there is no better way to develop a habit than to reinforce it every time you open a new tab. 

There are tons of browser extensions that showcase awesome palettes, projects and ideas to trigger your inspiration.

###Links

🔗 [Muz.li](https://muz.li/)

🔗 [Color Tab](https://chrome.google.com/webstore/detail/color-tab/hchlgfaicmddilenlflajnmomalehbom)

#5. Spice it up with free patterns and pictures! 🖼

The fifth element of our web design Swiss knife is a bank of royalty-free pictures and patterns that you can use to catch the user's attention. 

###Links

Pattern creators:

🔗  [Pattern Ninja](https://patterninja.com/)

🔗  [Patternico](https://patternico.com/)

Royalty-free images:

🔗  [Unsplash] (https://unsplash.com/s/photos/abstract)

🔗  [Pixabay] (https://pixabay.com/)


#One last thing... 👨🏻‍💻

An eye-catching design is a key factor to get an audience as a developer. Nowadays, thanks to the amount of quality design tools available for free, **there is no excuse to start learning how to make our projects stand out**.

🔖 Feel free to **bookmark or like this article so that you can save all the valuable links for later!**

Is there any design tool that I forgot to mention? Tell me in the comments.

<hr>

<span>Cover photo by <a href="https://unsplash.com/@alicegrace?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Alice Dietrich</a> on <a href="https://unsplash.com/s/photos/design?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>