15 Useful Tools & Websites for Web Designers

Like any profession, there are tools and resources available to make your life as a web designer easier. The more useful and time-saving your tools, the more time you can focus on important tasks such as coding and designing. As for me personally, any tools I come across that help me do my job quicker, better and more efficiently, I certainly save and refer back to. Here is a collection of 15 useful online tools and websites for web designers that I frequently use.

1. Adobe Color CC

Have a color you know you will be using in your web design project, maybe a color in the logo, but don’t know where to go from there in regards to creating the perfect color scheme for your project? Then Adobe Color CC is exactly the tool you are looking for. Adobe Color CC allows you to create and save various color schemes. Simply plugin a hex color code (for example, #0babc4) and then choose whether you would like the color scheme to be analogous, monochromatic, complementary, compound, etc etc. Extremely easy and useful.

2. Google Chrome DevTools

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. Its rapid debugging feature will help direct you to errors within your code, saving you tons of time when trying to figure out the location of a coding error. Another incredible feature is its ability to make quick style changes. Curious to see what a paragraph will look like in a different font? Wondering if you should add more padding to a module? Chrome DevTools makes it super fast and easy to see how these style changes will look. This tool is a must-have for anyone working in web development.

3. What's My Browser Size

As straightforward as it sounds, this Web app shows you the current size of your browser window. This can be useful in designing responsive websites.

4. Color by Hailpixel

Color by Hailpixel is the perfect tool for finding and exploring color combinations and color tones. Simply hover your mouse across your screen in order to see and admire the never-ending variations of colors. As soon as you come across the color you like, click on it and continue searching for the next color. The app provides you with all the hex color codes you selected, which is very convenient.

5. Brusheezy

Brusheezy is the go-to place for Photoshop resources. There you will find an infinite array of Photoshop brushes, patterns, textures, PSDs and much much more – basically anything and everything Photoshop-related. All of the resources on Brusheezy are free to download and, depending on the license, free to use in your projects.

6. Google Fonts

There are many font websites on the Web, but most of them you need to pay for the rights to use the fonts for commercial use. The wonderful thing about Google Fonts is that their entire catalog of fonts is free and open source, accessible to anyone for any project, both personal and commercial.

7. Unsplash

Unsplash offers free high-resolution stock images that you can use in your web design projects. What’s great is that all the photos on Unsplash are licensed under Creative Commons Zero, meaning you can copy, modify, distribute and use them for free (including for commercial purposes), without having to ask permission from or providing attribution to the photographer or Unsplash.

8. Pixabay

Like Unsplash, Pixabay is another great website and resource for free-to-use stock imagery for your web design projects.

9. Iconfinder

Based in Copenhagen, Denmark, Iconfinder works with a community of local and international icon designers. They are continuously expanding and adding to their very large collection of icons available for download. Some of their icons are free to use without permission. Others are free to use with attribution to the author, while others are for sale, but for very reasonable prices (usually $1 or $2).

10. Favicon.cc

This website/tool is very useful for it allows to you create a favicon from scratch using their online app, or by uploading an image of your own and transforming it into a favicon. Compared to other favicon generators, I find favicon.cc to be one of the best for the simple fact that it’s easy to use and the quality of the favicon is high (and not super-grainy like the favicons created by other favicon generators on the Web).

11. Font Identifier

Did you find an image with a beautiful font, but can’t figure out which font it is? Simply upload the image to Font Squirrel’s Font Identifier and their app will tell you the name of the font. Very easy and convenient.

12. Freepik

Freepik is a great source for illustrations and graphic design. I have personally used to it to create very beautiful and detailed infographics. What’s great about Freepik is that the content can be used in both personal and commercial projects (with a link to Freepik).

13. NordPass

Remembering your own passwords is difficult enough; try remembering the passwords of all your clients’ websites. Mission impossible! For this, I use NordPass. It is a password management tool that makes it very easy to save and manage your passwords. What’s great is that NordPass is cloud-based, so you can log in and a retrieve your passwords from wherever, whenever.

14. Awwwards

Need a little inspiration for your next project? Awwwards is a showcase of award-winning websites from the around the world. You can browse websites by award won (nominees, sites of the years, etc), by category (architecture, blog, ecommerce, fashion, etc), by color, and even by country.

15. Dribbble

Another great source for inspiration, Dribbble is a community of designers that share with each other, other fellow designers, what they are working on. The community consists of web designers, graphic designers, illustrators, logo designers, icon artists, typographers, and other creatives which share screenshots of whatever project(s) they’re working on, making it a great destination for attaining new ideas for your projects.