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.
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.
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.
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.
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.
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.
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.
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.
Like Unsplash, Pixabay is another great website and resource for free-to-use stock imagery for your web design projects.
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).
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).
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.
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).
Remembering your own passwords is difficult enough; try remembering the passwords of all your clients’ websites. Mission impossible! For this I use a free app called LastPass. It is a password management tool that makes it very easy to save and manage your passwords. What’s great is that LastPass is cloud-based, so you can log in and a retrieve your passwords from wherever, whenever.
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.
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.
