A Ridiculously Big List of Design Tools and Resources

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-related 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 cheesy post for your artificial browsing pleasure. :)

Dotted Paper

Free dotted paper in PDF format, ready to print.

Dotted Paper

dsgnjbs

Design job listings.

dsgnjbs

PLTTS

Find your color palette.

PLTTS

Freepik

Freepik helps you to find free photos, illustrations, PSD and vectors for using in websites, banners, presentations, magazines and advertising.

Freepik

Design Seeds®

A color palette blog for inspiration.

Design Seeds®

Gridwax

A grid bookmarklet for improving vertical rhythm.

Gridwax

Hex Color Tool

Hex-based tool for creating color palettes.

Hex Color Tool

Web Colour Data

Get the color palette from any website via URL.

Web Colour Data

colourcode

A pretty complex tool to help you find your color scheme.

colourcode

Clipping Magic

Instantly create masks, cutouts, and clipping paths online.

Clipping Magic

Red Pen

Makes it fast and productive to get feedback from your colleagues and clients.

Red Pen

Fotor

Free online photo editor.

Fotor

Retinize It

The best Photoshop actions for preparing designs
for iOS or optimized for Retina-display websites.

Retinize It

The Camera Collection

A collection of 100 pixelated camera illustrations for anybody to download and use in whatever way they see fit.

The Camera Collection

Cursors, Pointers, and Arrows

Icon pack in Illustrator (.ai) format.

Cursors, Pointers, and Arrows

Bounce

A free plugin that integrates and connects the Dribbble design community into the design applications you love to build with everyday.

Bounce

Damn You Art School

Apps, Tools, and Resources creative professionals use to improve Productivity & Creativity.

Damn You Art School

UI8

Carefully crafted creative assets.

UI8

Unsplash

Free (do whatever you want) hi-resolution photos. 10 new photos every 10 days.

Unsplash

FontPrep

Web font generator for Mac OSX.

FontPrep

Microframe

A micro (200px wide), grid based wireframe PSD template for mocking up website and app layouts.

Microframe

Golden Ratio Typography Calculator

Discover the perfect typography for your website by entering your current font size and content width.

Golden Ratio Typography Calculator

File Type Icon Set

Open-source icon set for files in web applications, covering many popular file extensions.

File Type Icon Set

Tactile Design Kit

A physical, interactive web design kit created to facilitate client conversation and brainstorming during the discovery and design phase.

Tactile Design Kit

Flat UI Colors

Helps you to copy the colors from Flat UI.

Flat UI Colors

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.

UX Apprentice

Dunked

Create your online portfolio in minutes. No coding skills required.

Dunked

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.

Pantone Sample

Concept inbox

Project management, collaboration & version control for creatives.

Concept inbox

Stylify Me

Helps designers quickly gain an overview of the style guide of a site, including colours, fonts, sizing and spacing.

Stylify Me

Forecast Font

A web-font for creating multi-layered weather icons.

Forecast Font

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.

Ember

Google Typography

A simple plugin that lets you use and customize (in real-time!) any fonts from Google Fonts on your existing WordPress site.

Google Typography

Tiff

A type diff tool that visually contrasts the differences between two fonts.

Tiff

Placeit

Generate product screenshots in realistic environments.

Placeit

Twenty Twenty

Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them.

Twenty Twenty

MockUPhone

One click to wrap app screenshots in a device mockup.

MockUPhone

TypeWonder

Helps you to test web fonts on any web site on the fly.

TypeWonder

Delivery

Clutter-free presentation of your work.

Delivery

.psd fonts

Figure out what fonts are being used in a psd without trawling through badly labelled layers.

.psd fonts

Canva

Amazingly simple graphic design. Fun, free, and simple to use.

Canva

Reform

Ideas can come from anywhere, and this tool helps those “ah-ha” moments to happen.

Reform

Business Card Maker

Easily create your own business cards in seconds, for free, using high quality professional designs.

Business Card Maker

Color Peek

Simply share one or more CSS colors.

Color Peek

Color Thief

A script for grabbing the color palette from an image. Uses JavaScript and the canvas tag to make it happen.

Color Thief

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.

Grumpicon

Moar??

Add your own to the comments.

Advertise Here

14 Responses

  1. Yannis Steriotis:

    Awesome collection!
    Thanks!

  2. Wow, thx for collecting and sharing!
    Great stuff!

  3. Thanks for a great list, Stylify Me is awesome! Also, I would add ColorSchemeDesigner.com to the list.

  4. JT:

    Wow…so many here I’ve never heard of. Thanks!!!

  5. Thanks for sharing this nice information. I am also from designing field hope this will work for me….

  6. Awesome list, thanks for sharing! Will be using ‘The camera collection’ at some point ;)

    Tom

  7. Josh:

    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.

  8. Mark:

    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

  9. 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!

  10. 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.

  11. Thanks for sharing. I’ve used Fotor, its amazing.

  12. 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.

  13. Raquib Mahboob:

    Really amazing! Very good collection. Thanks a lot!

  14. Lucía Hraunfjord:

    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/

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.