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. :)
Dotted Paper
Free dotted paper in PDF format, ready to print.
dsgnjbs
Design job listings.
PLTTS
Find your color palette.
Freepik
Freepik helps you to find free photos, illustrations, PSD and vectors for using in websites, banners, presentations, magazines and advertising.
Design Seeds®
A color palette blog for inspiration.
Gridwax
A grid bookmarklet for improving vertical rhythm.
Hex Color Tool
Hex-based tool for creating color palettes.
Web Colour Data
Get the color palette from any website via URL.
ColourCode
A pretty complex tool to help you find your color scheme.
Clipping Magic
Instantly create masks, cutouts, and clipping paths online.
Red Pen
Makes it fast and productive to get feedback from your colleagues and clients.
Fotor
Free online photo editor.
Retinize It
The best Photoshop actions for preparing designs
for iOS or optimized for Retina-display websites.
The Camera Collection
A collection of 100 pixelated camera illustrations for anybody to download and use in whatever way they see fit.
Cursors, Pointers, and Arrows
Icon pack in Illustrator (.ai) format.
Bounce
A free plugin that integrates and connects the Dribbble design community into the design applications you love to build with everyday.
Damn You Art School
Apps, Tools, and Resources creative professionals use to improve Productivity & Creativity.
UI8
Carefully crafted creative assets.
Unsplash
Free (do whatever you want) hi-resolution photos. 10 new photos every 10 days.
FontPrep
Web font generator for Mac OSX.
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.
File Type Icon Set
Open-source icon set for files in web applications, covering many popular file extensions.
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.
UX Apprentice
There’s a lot of art and science behind creating a lovable user interface. This site is designed to teach you the basics with an easy process to follow, and pointers for where to learn more.
Dunked
Create your online portfolio in minutes. No coding skills required.
Pantone Sample
A free photoshop tool for designers that makes pantone creation for your design easy as pie.
Choose your color and it will create 4 lighter and 4 darker tones automatically.
Concept inbox
Project management, collaboration & version control for creatives.
Stylify Me
Helps designers quickly gain an overview of the style guide of a site, including colours, fonts, sizing and spacing.
Forecast Font
A web-font for creating multi-layered weather icons.
Ember
Makes it incredibly easy to collect photos and other images that inspire you, curate and organise them, and sync them across all your favourite Apple devices.
Google Typography
A simple plugin that lets you use and customize (in real-time!) any fonts from Google Fonts on your existing WordPress site.
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.
TypeWonder
Helps you to test web fonts on any web site on the fly.
Delivery
Clutter-free presentation of your work.
.psd fonts
Figure out what fonts are being used in a psd without trawling through badly labelled layers.
Canva
Amazingly simple graphic design. Fun, free, and simple to use.
Reform
Ideas can come from anywhere, and this tool helps those “ah-ha” moments to happen.
Business Card Maker
Easily create your own business cards in seconds, for free, using high quality professional designs.
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.
Grumpicon
Makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility.
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!