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. :)
Free dotted paper in PDF format, ready to print.
Design job listings.
Find your color palette.
Freepik helps you to find free photos, illustrations, PSD and vectors for using in websites, banners, presentations, magazines and advertising.
A color palette blog for inspiration.
A grid bookmarklet for improving vertical rhythm.
Hex-based tool for creating color palettes.
Get the color palette from any website via URL.
A pretty complex tool to help you find your color scheme.
Instantly create masks, cutouts, and clipping paths online.
Makes it fast and productive to get feedback from your colleagues and clients.
Free online photo editor.
The best Photoshop actions for preparing designs
for iOS or optimized for Retina-display websites.
A collection of 100 pixelated camera illustrations for anybody to download and use in whatever way they see fit.
Icon pack in Illustrator (.ai) format.
A free plugin that integrates and connects the Dribbble design community into the design applications you love to build with everyday.
Apps, Tools, and Resources creative professionals use to improve Productivity & Creativity.
Carefully crafted creative assets.
Free (do whatever you want) hi-resolution photos. 10 new photos every 10 days.
Web font generator for Mac OSX.
A micro (200px wide), grid based wireframe PSD template for mocking up website and app layouts.
Discover the perfect typography for your website by entering your current font size and content width.
Open-source icon set for files in web applications, covering many popular file extensions.
A physical, interactive web design kit created to facilitate client conversation and brainstorming during the discovery and design phase.
Helps you to copy the colors from Flat UI.
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.
Create your online portfolio in minutes. No coding skills required.
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.
Project management, collaboration & version control for creatives.
Helps designers quickly gain an overview of the style guide of a site, including colours, fonts, sizing and spacing.
A web-font for creating multi-layered weather icons.
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.
A simple plugin that lets you use and customize (in real-time!) any fonts from Google Fonts on your existing WordPress site.
A type diff tool that visually contrasts the differences between two fonts.
Generate product screenshots in realistic environments.
Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them.
One click to wrap app screenshots in a device mockup.
Helps you to test web fonts on any web site on the fly.
Clutter-free presentation of your work.
Figure out what fonts are being used in a psd without trawling through badly labelled layers.
Amazingly simple graphic design. Fun, free, and simple to use.
Ideas can come from anywhere, and this tool helps those “ah-ha” moments to happen.
Easily create your own business cards in seconds, for free, using high quality professional designs.
Simply share one or more CSS colors.
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.
If you know of any another design tools or have built one yourself, feel free to add it in the comments.