Lately I’ve been working hard on my weekly newsletter Web Tools Weekly, which focuses on tools for front-end developers. The newsletter was originally supposed to include design tools on occasion, then I changed my mind and kept it mostly developer focused. Unfortunately, this left me with a huge list of useful design, color, and typography related tools that I’ve compiled over the last 6 months or so.
So here is everything I’ve compiled, dumped into one big superficial post for your artificial browsing pleasure. :)
Freepik
Freepik helps you to find free photos, illustrations, PSD and vectors for using in websites, banners, presentations, magazines and advertising.
Hex Color Tool
Hex-based tool for creating color palettes.
ColourCode
A pretty complex tool to help you find your color scheme.
Clipping Magic
Instantly create masks, cutouts, and clipping paths online.
Fotor
Free online photo editor.
The Camera Collection
A collection of 100 pixelated camera illustrations for anybody to download and use in whatever way they see fit.
UI8
Carefully crafted creative assets.
Unsplash
Free (do whatever you want) hi-resolution photos. 10 new photos every 10 days.
Microframe
A micro (200px wide), grid based wireframe PSD template for mocking up website and app layouts.
Golden Ratio Typography Calculator
Discover the perfect typography for your website by entering your current font size and content width.
Tactile Design Kit
A physical, interactive web design kit created to facilitate client conversation and brainstorming during the discovery and design phase.
Flat UI Colors
Helps you to copy the colors from Flat UI.
Dunked
Create your online portfolio in minutes. No coding skills required.
Tiff
A type diff tool that visually contrasts the differences between two fonts.
Placeit
Generate product screenshots in realistic environments.
Twenty Twenty
Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them.
MockUPhone
One click to wrap app screenshots in a device mockup.
Canva
Amazingly simple graphic design. Fun, free, and simple to use.
Color Peek
Simply share one or more CSS colors.
Color Thief
A script for grabbing the color palette from an image. Uses JavaScript and the canvas tag to make it happen.
Any Others?
If you know of any another design tools or have built one yourself, feel free to add it in the comments.
Awesome collection!
Thanks!
Wow, thx for collecting and sharing!
Great stuff!
Thanks for a great list, Stylify Me is awesome! Also, I would add ColorSchemeDesigner.com to the list.
Wow…so many here I’ve never heard of. Thanks!!!
Thanks for sharing this nice information. I am also from designing field hope this will work for me….
Awesome list, thanks for sharing! Will be using ‘The camera collection’ at some point ;)
Tom
Wow this list is amazing. I’ll definitely bookmark this for future use. After all, you can never have too many design resources. Thank you for your effort of putting this up.
We also develop have some FREE apps for designers, and some of our apps had been featured on official Adobe Exchange Marketplace.
You can have a look at our apps here: Free Adobe Plugins & Extensions
Nice list. You could add some more free photo editors, as I found the Fotor very useful, along with the colour tools and the business card maker. Once again, good resources!
Great list! I didn’t know about the Google Typography for WordPress, that will be very useful! And Canva is amazing, there’s so many uses for all of the designs they have. I’ve never used Freepik, but I’ve used lots of different free image gallery sites, and it looks like a good one, I’m definitely going to try it out soon.
Thanks for sharing. I’ve used Fotor, its amazing.
You do know that for a post as big as this, people would grow white beard as they come to the end. But seriously, This is one hell of a list.
Really amazing! Very good collection. Thanks a lot!
Really good list, already bookmarked it!
But I would certainly add Coleure, a simple and fun curated color picker, you can check out the website here: https://www.coleure.com/
Awesome, great list!
Nice list. You could add some more free picture editors, as I found the Fotor useful, along with the colour tools & the business card maker. One time again, nice resources!
A ridiculously amazing list, thanks a lot this is very helpful.
Hex color tool is a great tool, I use it all the time when I am designing
Nice list, thank you. I’ve used.
What an excellent collection it is! Though it was a really very big list indeed, but so much helpful. I’m going to bookmark this page for further use of course. Guided with pictures has made easy to understand. There are so many tools for designing that I have not used yet. Now I will try all these. Thanks for sharing this fantastic informative content.
really informative article! i will save it on my PC! It is really big list! i dont know the use of many of these! you nicely provide! you nicely discuss with images it Will help me for my work!