50 Great Web Design Tools That Should Be In Your Toolbox

by in Toolkits on 2nd Dec 2010 · Comments

When you're a designer there's a whole world of possibilities for you out there. The Internet can provide us with everything we need, we just need to know where and how to find it. This article is meant as a help for you in your daily work.

50 Great Web Design Tools That Should Be In Your Toolbox

These are Tools You Shouldn't Have to Live Without

In this collection we've put together a great list of resources for you. Here is what you need for both inspiration and execution of your great design ideas. You'll find suggested websites for stocks, inspirational galleries, color tools, a lot of coding related resources and much more.

Get Inspiration And Show Your Own Work

Here are some great galleries and communities to check out for new ideas and also getting in touch with other professionals. These sources hold hundreds of hours of inspirational galleries. Here you can also upload your own art to share it with thousands across the globe. Just dive in and come out a better designer!

Behance
The Behance Network is a great online portfolio platform connecting creatives from all over the world. Multiple industries are included, from photography to fashion and Web Design. This is a great place to start when looking for creativity and inspiration. Here you can create your own portfolio, look for jobs and competitions, exchange tips with others or just browse.

Behance

DeviantART
deviantArt (dA) has been around for more than a decade now. It's a great and very active online community that has a lot of inspiration available. Here you'll find millions of user submitted art, from photography to digital art and even flash, texts and much more. You can also find quite a few good scripts to various software (like Photoshop actions), brushes and more to help you in your work. All in all a great place for creative input.

DeviantART

Ember
Ember is a great way for people to find new inspiration and to share with others. The categories represented are quite a few; graphic design, web design, user interface design, photography and interior design.

Ember

Creattica
As a great gallery and place to be inspired, Creattica should definitely be on your list! Browse the work of others and vote if you want. Of course you can also upload your own designs, and if you're lucky you'll be featured in the gallery that has thousands of daily viewers. A lot of categories available, also more specific ones like motion graphics, book covers and icon design.

Creattica

Web Design Galleries

Here are a few galleries that are specific to web design. There are many out there, these are just a few. They're updated often and have many good designs for you to browse through, regardless of what style you're looking for.

CSS Mania
CSS Mania

Best Web Gallery
Best Web Gallery

CSS Elite
CSS Elite

Stock Photo Resources

Designers occasionally need stock photos for their designs. These are a few examples of where you can find stock photos and illustrations. The list of places to look is long, so we've only included a few places this time.

Stock.xchng
This website has lots and lots of free-to-use images of all types, from illustrations to textures. The quality is a bit variable, but if you spend a few minutes looking, you'll be very likely to find something here. Definitely a lot of gems here!

Stock.xchng

Flickr – Creative Commons
Browse through millions of images filed under the different types of creative commons licenses.

Flickr – Creative Commons

Istockphoto
If you want access to some of the best stock photos available and can afford to pay for it (it really isn't that expensive), iStockphoto is the place to go. Here are not only photos, but also illustrations, videos and sound.

Istockphoto

Fonts

Sometimes the fonts already installed on your system aren’t enough, or maybe you want to know which font is used in a specific design/mock-up? With a lot of fonts around, it can be tricky to know where to go. Here are some websites that will get you started.

Dafont
This website has over 11,000 fonts available and also has some great links to font-related tools you may need.

Dafont

Urbanfonts
More than 8,000 fonts nicely divided into categories.

Urbanfonts

What the Font?
Upload an image of a font, get it analyzed and matched quickly. Use your cellphone to take a picture of a design you see and get inspired by, - or upload a screenshot of something to get it analyzed.

What the Font?

Icons

There are many great icon sets being released on different design related websites all the time, so if you're looking for that it's a good tip to just go to Google. If you want a couple of specific websites to browse to find something to use or get inspired to make your own ones, here are some.

IconArchive
More than 32,000 icons in different categories can be found here.

IconArchive

IconFinder
This website has been around since 2007 and was the first search engine focused on icons.

IconFinder

Find Icons
Find Icons is an icon search engine that helps you find free icons with sophisticated search filtering and result matching system.

Find Icons

Color Tools

Finding and using the right color combinations can be very important for your designs. A lot of good palettes are already out there, along with some great tools related to colors.

Kuler
I have to say I believe that this is one of the more underestimated tools provided by Adobe. Browse, create and share color themes in an easy way. Use the web-based version, download the desktop app – or access it from your favorite Creative Suite program.

Kuler

Colourlovers
A great creative community website where you can create and share colors, patterns and pallettes. Also lets you discuss current trends with others, and even shop from the store.

Colourlovers

Color Hunter
A website dedicated to creating and sharing color palettes from images.

Color Hunter

Coding Related Tools And More

If you code, these are some great resources to help you out on that part.

Firebug
This tool integrates with Firefox. It lets you edit, debug and monitor CSS, Html, and JavaScript live. One of the most popular tools of it's kind out there.

Firebug

W3C Markup Validation Service
Helps you check the markup validity of your web documents.

W3C Markup Validation Service

W3C CSS Validation Service
Same as above, but for html containing CSS and CSS only.

W3C CSS Validation Service

Typetester
Online comparison of fonts for the screen.

Typetester

Typeface.js
Embed custom fonts in your web pages.

Typeface.js

Reflection.js
Easily add reflections to your images.

Reflection.js

FavIcon Generator
Easily create favicons for your websites.

FavIcon Generator

pForm
Easy and quick way to create a simple HTML form.

pForm

Clean CSS
Format and optimise your CSS.

Clean CSS

Net2ftp
A web based FTP client.

Net2ftp

Web Developer Extension
Adds a menu and toolbar to your browser with various handy web developer tools.

Web Developer Extension

Online HTML Editor
WYSIWYG editor with quick response time and the ability to upload files and save.

Online HTML Editor

Realtime HTML Editor
Quite unique, simple and easy. No plugins needed.

Realtime HTML Editor

Pencil Project
Sketching and prototyping. Great for creating all sorts of wireframes and UIs. Many built-in stencils, great export options and a lot more. Firefox extension, also available as standalone with windows/GNU linux. This is a must in your toolbox.

Pencil Project

Cacoo
Very user friendly online drawing tool. Great for all of your diagram needs, from wireframes to any chart you need to make. Good options for collaborations and sharing.

Cacoo

Mockingbird
Great for website and app mock-ups. Clean interface, drag and drop functions and many interface elements available. A favorite for many designers.

Mockingbird

Designers Toolbox
A great website to stop by if you want standard size specifications for anything from envelopes to web banners.

Designers Toolbox

Browsershots
Great tool to check what your website will look like in different browsers.

Browsershots

Spoon Browser Sandbox
Run different browsers without any extra installation.

Spoon Browser Sandbox

Are My Sites Up?
Monitor your websites easily and get notified if they're down, and find out why.

Are My Sites Up?

Browsercam
See your web design on any browser and operating system. Check scripts and more.

Browsercam

W3counter
Free hosted website analytics solution. Who is your audience?

W3counter

Best Free Templates
Some of the best CSS templates available for free download.

Best Free Templates

Files, Notes

And finally here are a few other tools that you should consider for your toolbox.

Dropbox
One of my own favorite tools. With dropbox you get online backups and can easily sync between different computers. Sharing folders with other users is also a great feature, along with the possibility to access your files online from anywhere.

Dropbox

Evernote
Great tool for text, web site captures and more. Sync easily between different devices and more. Easy yet powerful.

Evernote

Google docs
Create and share online. Text documents, spreadsheets, presentations, drawings and forms. Underestimated by many, but definitely a powerful tool that you should have a look at!

Google docs

Cheat Sheets

Having these handy can mean saving hours of work and help you do better with both your programming and software.

Quickly Code
Huge collection of cheat sheets.

Cheat Sheets

DevCheatSheet
Another great site with many sheets.

DevCheatSheet

Mega Collection of Cheatsheets for Designers and Developers
After I made this collection of more than 100 cheatsheets for Spyre Studios I got a lot of positive feedback. A very popular article that I hope can help you out! Software shortcuts and more is also added.

Mega Collection of Cheatsheets for Designers and Developers

Online Image Editors

Sometimes using an online editor for easy tasks can be an advantage. Here are a couple of the most popular ones.

Photoshop.com
Crop, resize and other useful features can be found here. You can also store a handful of your images here.

Photoshop.com

Pixlr
Another good one with a lot of useful tools available for you.

Pixlr

Those were our 50 picks for what we think should be in your designer toolbox. As you'll see a lot of work can be done without necessarily being on your own computer at all times and without having to spend a pile of money.

Which Are Your Favorites?

As usual we'd love to hear your feedback and your additions. There are hundreds of great tools out there, so we're aware that different designers prefer different ways of doing things. Still we hope this collection is useful to you.

Why don't you leave us a comment telling us which is your favorite and mention which online tools you're using that are not on our list?

Hilde is a Norwegian girl with a great passion for everything related to design, freelancing, PhotoShop, photography, Illustrator and more. Running her own website and work with mainly Graphic Design and Business Consulting besides article writing.