50 Free Tools Every Designer Will Love

Tools for Web Designers

Good designers know that using the right tools not only increases their efficiency but also improves the quality of their work. Good tools can help reduce repetition and allow you to focus on what matters – the design.

Today we’re going to see 50 of the best tools for web designers – these have all received high acclaim in the design community, and for good reason.

Typography

Every designer knows that typography is one of the most essential ingredients for an awesome design. These typographic tools will help you get inspiration, find the font you’re looking for, easily compare different typefaces, create your own fonts, and more. Take a look:

Type Set-
A super visual typography tool that enables you to enter text, adjust it, and then save the css.

Typechart-typechart
Another typography tool for easily browse and compare web typography. When you’re done, you can easily grab the css on this one, too!

CSSType -
A great visual css editor for typography, allowing you to format lots of attributes and then export the css.

CSS Text -
Still looking for another visual typographic CSS editor? CSS text is one more popular solution.

Typetester-typetester
The best part about Typetester is that it can test 3 different typographic sets at the same time. It’s another excellent tool you shouldn’t be without.

FontTester
A very similar alternative to Typetester, FontTester allows you to compare different fonts and has a lot of superb advanced options.

STC Font Browser -
Allows you to easily browse the active fonts on your computer.

CSS Text Wrap-
Check this out: a tool that allows you to use wrap text into circles, triangles, or whatever you want using css.

What the Font?whatthefont
This free service allows you to upload an image of a font and it tells you what the fontface is. Pretty cool.

Linotype FontIdentifier
This unique tool helps you identify font faces by asking you specific questions about the characters and then working by a process of elimination.

TypeNavigator
Most designers are visually oriented, so a tool that allows you to search a font library visually like TypeNavigator does is a very good idea.

FontBurnerfontburner
This makes custom fonts so easy – you pick the font (1000+ choices), they give you a chunk of code, and bam, you’re done. Could it be easier?

Wordle
A fun tool for generating fancy typographic text clouds.

FontStruct
This rocks: an online font-editing and sharing tool, allowing you to create your own beautiful typefaces.

BitfontMaker
Another font drawing tool, excellent for beginners.

Baseline Rythm Calculator
As any good designer knows, rythm is an essential part of typography. This tool makes it easy to calculate baseline rythms for different font sizes.

Flipping Typical
flippingtypical
A fun and inspirational destination on the web, Flipping Typical detects which fonts you have installed on your computer and allows you to browse through them.

PXtoEM
Translating pixels to ems is great for usability, and thankfully this tool makes it easy.

Em Calculator
Another handy tool for converting pixel measurements to ems.

HTML-Ipsum
If you’re looking for an easy way to get filler text with code, this is the place to go. They’ve got many choices – short and long paragrahs, tables, lots of different lists, and more.

Blind Text Generator
On the other hand, if you just want filler text without any markup, try this one. It’s also more flexible.

Further Reading

Color Tools

Color tools are the most fun to play around with, and the community hasn’t been stingy in giving us some really great free products. You could spend hours enjoying these:

Color Scheme Designer -csd
An awesome free web-based color scheme generator by Petr Stanicek.

Color Explorer
A complete online application for creating, browsing, editing, analyzing and saving color palettes. I can’t believe this is free.

Palette Grabber -
This incredible Firefox add-on enables you to quickly grab palettes off of any web page and export them to Photoshop, Paint Shop Pro, GIMP, Flash, or Fireworks. I don’t know how you could live without this!

Kuler
How could I leave out Kuler? It has long been considered a staple of the designer’s toolbox. You already know it, but it would be unthinkable not to include it on a list like this!

ColorMunkicolormunki
I’d put this one up there with Kuler in terms of functionality and usefulness. Definitely a must-use tool.

PaletteMan -
Feel like browsing palettes by mood? Palette Man is the way to do it!

4096 Color Wheel
Another great free palette tool. This one doesn’t try to coordinate the colors, it’s up to your good eye.

ColorBlender-
An awesome tool for blending colors, with easy exports to Photoshop or Illustrator.

ColorJackcolorjack
ColorJack is actually four tools in one, giving you several different impressive color planning interfaces.

ColorMixer
An alternative to ColorBlender, it is very much the same: creating schemes based on levels you set and allowing exports to .act and .ai files.

ColorHunter
This versatile tool produces palettes by hex code, tag or img url.

Color Match
This tool will generate a harmonious palette based on the levels you set. It doesn’t give you as much control as some of these other tools, but it’s a quick, easy solution.

Multicolr Search Labmulticolr
A super flickr app that searches flickr by color scheme of the photo.

ColorCombos
Get inspiration from lots of community submitted palettes, or submit your own. You can even download the whole palette library in a pdf.

ColourLovers- colourlovers
Every designer should know ColourLovers. It is a treasure trove of constantly improving patterns, palettes and designer camaraderie.

ColorSchemer -
Looking for even more palette inspiration? This is another stop to find or create striking color combos!

GenoPal -
This pallet-from-image tool is perfect for generating a pleasing color scheme from a photo.

Degraeve Color Palette
Another tool for creating palettes based on images, although it is a little less flexible.

Colr- colr
Yet another tool designed to let you create a palette based on an image. This one even has a cool feature where you can get a palette from a random Flickr image – great inspiration if you’re kind of stuck.

Color Palette Generator
This tool takes an image and, you guessed it, produces a palette based on colors in the image.

Pictaculous
Pictaculous only accepts uploaded images, not url’s, but it’s still a useful tool.

Further Reading:

Graphics Generators & Editors

Pixlr -pixlr
An advanced photoshop-inspired online image editor. Photoshop will always be better, but this could certainly come in handy.

PSDtoCSS Online
This tool automatically converts an uploaded psd file to css – for free! I haven’t used it, so I’m not sure about the quality, but it sounds great.

Phoenix
A sweet desktop-quality online image editor. It’s producer, Aviary, has a whole collection of other amazing design tools. You should definitely check them out, too.

BGPatternbgpatterns
BG Patterns is a tileable background generator – and it’s a lot of fun. You can browse others users’ patterns and create your own.

Dabbleboard
A collaborative tool for designers, allowing easy freehand drawing, interface design and more.

Stripe Generator
A tool for easily generating striped backgrounds.

Tartan Makertartan
Plaid patterns can be tricky to make, but this tool makes them easy!

Dotted Background Creator -
Easily create dynamic dotted backgrounds with this tool. A big time-saver if you’re going for this look.

Further Reading:

Wrapping Up

With a good set of tools at your side, it’s much easier to let your design skills really shine. I encourage you to take advantage of all these great free contributions – and maybe think about donating to one or two of them.

Anyways, enjoy the collection and make sure you leave a comment if I’ve left something out!

Written By Nick Parsons

Nick is the editor of Webitect and a developer + designer from Houston TX.

8 Comments

  1. Susan Newton "The Shower Diva"

    January 25th, 2010 at 07:06 pm

    Hi! Thanks so much for compiling these — I haven’t read them all, but briefly glanced at your organized list and am grateful that you have made this available.

    When I was just starting out at ArtCenter back in the 80s there was so much ugly graphic design and my wish was that someday there would be a world in which we lived in where the common person could appreciate GOOD DESIGN.

    My thought before even going in depth is that you’ve helped bring this one step closer. So, thank you so much!!! Can’t wait to follow you and retweet!

    Susan “The Shower Diva”
    Where Fun Reigns!
    TheShowerDiva.com
    plan | prepare | party!

  2. Brett

    January 26th, 2010 at 11:03 am

    This a great list. I’ve added a lot of these sites to my bookmarks. Looking forward to more design posts this week.

  3. printing samples

    January 26th, 2010 at 04:34 pm

    Thanks for the list…I wasn’t aware of colormunki! :)

    FreePrintingSamples.com

  4. Alex Flueras

    February 3rd, 2010 at 12:37 am

    Very useful list, I have seen some sites that I wasn’t aware of. Thanks.

  5. Jeff Woodruff

    February 23rd, 2010 at 04:32 am

    Some very useful tools but I tend to stick to my Firefox plugins for webdev. When it comes to trying to find a font that I’ve never seen before by using a web based tool, I couldn’t find a single tool that did the job. Then again I haven’t tried all the tools mentioned above. We’ll see what transpires.

  6. Marianela Seyal

    December 11th, 2010 at 03:46 pm

    You completed a few nice points there. I did a search on the subject matter and found the majority of people will go along with with your blog.

  7. poornima

    February 18th, 2011 at 03:52 am

    Hi! Thanks so much for above the list… as a media student i liked and learn more about design..

  8. Chantelle

    August 21st, 2011 at 10:39 pm

    Some more great tools listed here http://browsingideas.com/category/web-design-tools/

What Do You Think?