CodeinWP CodeinWP

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

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

Any Others?

If you know of any another design tools or have built one yourself, feel free to add it in the comments.

21 Responses

  1. Yannis Steriotis says:

    Awesome collection!
    Thanks!

  2. Brand says:

    Wow, thx for collecting and sharing!
    Great stuff!

  3. Houdas says:

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

  4. JT says:

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

  5. mary jhon says:

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

  6. Tom Durkin says:

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

    Tom

  7. Josh says:

    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 says:

    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. Ray John says:

    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. Lizzy says:

    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. David says:

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

  12. Mohit Jain says:

    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 says:

    Really amazing! Very good collection. Thanks a lot!

  14. Lucía Hraunfjord says:

    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/

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

  16. Nashwa says:

    A ridiculously amazing list, thanks a lot this is very helpful.

  17. 21coders says:

    Hex color tool is a great tool, I use it all the time when I am designing

  18. Nice list, thank you. I’ve used.

  19. annie says:

    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.

  20. Adam says:

    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!

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).