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

Freepik

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

Freepik

Hex Color Tool

Hex-based tool for creating color palettes.

Hex Color Tool

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

Fotor

Free online photo editor.

Fotor

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

UI8

Carefully crafted creative assets.

UI8

Unsplash

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

Unsplash

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

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

Dunked

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

Dunked

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

Canva

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

Canva

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

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