50 Great Web Design Tools That Should Be In Your Toolbox

50 Great Web Design Tools That Should Be In Your Toolbox

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.

Comments

  1. / Reply

    Great list buddy.. I use almost half of them

  2. / Reply

    This is quite a comprehensive list!
    I am going to to go and checkout some of the sites I didn’t know about.
    Thanks for sharing these resources.

  3. / Reply

    For the colour section I also find http://0to255.com/ a useful site and tool to help find similar colours

  4. / Reply

    Hi, thanks for the list, you can add http://www.photoxpress.com in stock photos. For me it’s the best, you can download 10 hi-res pictures for free, everyday.

      • Steve,
      • December 28, 2010
      / Reply

      I’d love to know how you get 10 free hi-res pictures a day for free… their pricing starts at ONE per day, which costs $9.99 a month… NO mention of free downloads.

        • Wayne,
        • December 29, 2010
        / Reply

        Hey Steve,
        I have an account with PhotoXpress and there are 10 free downloads a day. It’s a great resource really. They have however recently redesigned their site (within the last 2 weeks) and yes, there is no more mention of any 10 free downloads a day.

        If I log in to my account only then will it show that I have 10 free downloads. When not logged in there is no mention of any free photos anywhere. I’m not sure if I was “grandfathered in” to continue getting my 10 free downloads since their change, or if you simply have to create an account to get the free downloads.

    • Nathan Nearing,
    • December 2, 2010
    / Reply

    Your “font” section needs work. Why do so many people recommend DaFont STILL?! FontSquirrel is a great tool for web designers, but DaFont? It’s not even a good tool for any sort of graphic designer.

    The rest of the list seems alright, but please give type the consideration it deserves.

    • walott,
    • December 2, 2010
    / Reply

    Too bad, various versions of Internet Explorer are not on spoon anymore, due to microsoft request (see http://www.spoon.net/Browsers/)… that was a great tool…

  5. / Reply

    A colour tool I’ve used quite a lot
    http://www.colorsontheweb.com/
    Its good

    • Luca,
    • December 2, 2010
    / Reply

    Great list. I use many of this every day, but there are a lot i didn’t know about. Good job

  6. / Reply

    When someone writes “50 great tools that should be in your toolbox,” I cringe.

    I am sure there are over a hundred individual tools in my garage, but I don’t think of each and every spanner as an individual tool, I think of my “rack of spanners in different sizes” as one tool, and choose the one appropriate for the job.

    As a UX designer, my work goes through different stages, and at each stage I pick out the toolkit appropriate for that role. Each toolkit has less than a dozen “tools” in it, and often only two or three: Pen & paper, or Photoshop & Illustrator, or even video recorder.

    Lists of more than 10 items don’t look like a collection of thoughtfully chosen and curated items to exhibit: they look like rummaging through one’s cache, looking for something with which to attract traffic.

    • Wayne,
    • December 3, 2010
    / Reply

    Very nice collection. I use the majority of them (I didn’t realize how many until you put them in a list) Another very useful tool is the 960 Grid System.

    http://960.gs/

  7. / Reply

    You’ve got some good stuff there! Very cool. That must have been a lot of work to put together.

  8. / Reply

    thats a very handy list, i m sure there r few more “must have” tools for designers but these are all very important.

    • Edison Leon,
    • December 3, 2010
    / Reply

    Thank you for the very handy list, bookmarked now

  9. / Reply

    Hi great article and nice work puttin them all together

    For my favorites, I would add fontsquirrel http://www.fontsquirrel.com/ (useful @font-face kits and generator) and for the online photo editing I use sometimes http://www.splashup.com/

  10. / Reply

    Many thanks for sharing the huge list of tools with us. Its really helpful. Good work.

  11. / Reply

    Thank a lot very usefull.

  12. / Reply

    http://www.dribbble.com

  13. / Reply

    Amazing resource, looks like I will have to clear a few hours to go through all of these!

  14. / Reply

    useful toolbox for designers. thanks for sharing

    • Kerry,
    • December 6, 2010
    / Reply

    Thanks for the list. A great collection for any designer.

    • Paul,
    • December 8, 2010
    / Reply

    I’ve gotta also chip in for FontSquirrel. First, the curated list of freely licensed fonts saves having to rummage through all the garbage fonts on the larger services, and the @font-face generator is *invaluable* for web design. FontSquirrel FTW!

    • El,
    • December 8, 2010
    / Reply

    Great article.
    The list is very useful

  15. / Reply

    I don’t think that to name any one of them as my favourite would not be right. It would have to be a combination of few of them.

    A great list.

    Added to my bookmark @ delicious for my reference and tweeted too. Cheers.

    • monik,
    • December 8, 2010
    / Reply

    thanks!!! awesome :D the cool hunter is great too!

    • Bryan,
    • December 8, 2010
    / Reply

    Really love this post! Thanks a lot! This is a huge help for me.

    • alan,
    • December 12, 2010
    / Reply

    Some very good info here. Thanks!

    • zaira,
    • December 21, 2010
    / Reply

    Great list!.. Amazing resource, looks like I will have to clear a few hours to go through all of these! Thank you for sharing..

    • Adam,
    • January 11, 2011
    / Reply

    Great collection and quite a few I didnt know about. Thaks for posting.

  16. / Reply

    A very in-depth list, some of these I haven’t even heard of but look very useful.

    Thanks

  17. / Reply

    Just get inspired and come up with your own work is the best tip. No point in copying that will not lead to anywhere.

  18. / Reply

    Great list. Most of these are new to me, maybe all. Add this to your list wix.com

  19. Nice blog and the choice of your subject is also nice. So keep up the good work.

    • Ali,
    • June 3, 2011
    / Reply

    You need to try http://webarti.com/best-CSS3-button-maker/ too. This is a new CSS3 tool that allows you to create stylish buttons, boxes etc. I think, it deserves to be listed in this collection.

    • Dexyne,
    • July 22, 2011
    / Reply

    For color : http://colorschemedesigner.com/ the best for find the good / best color :)

    • Doug,
    • September 20, 2011
    / Reply

    To Hilde the Norwegian girl,

    This list rocks girl, way to go. I’d also have to say thought that adding FontSquirrel to the list is a must as well as the code editing tool PSPad, (http://www.pspad.com/en/downloads.php). It supports multiple codes when editing (HTML, PHP, XHTML, Javascript, ASP, and more) for ease of coding. Excellent work…

    Cheers…

  20. / Reply

    I’m really liking the icon search engine, pretty cool.

  21. / Reply

    Thanks, Hilde, for what I consider to be a great list (no matter what that Sternberg guy says).

    I swear by MyFonts and WhatTheFont – they’ve saved my job many a time when my employer wanted me to match a font on printed pieces for which no digital files were available and no match could be found in our font book or server. I also like Evernote, but have only just started using it. I had not heard of many of the others and look forward to trying them out in my own work.

    I would only add one more essential designer’s resource: Brands of the World (www.brandsoftheworld.com), which offers free downloadable vector art files of logos from many of the best-known companies in the world, from Allianz to Zappos. It’s great for when your client wants a logo used but can’t provide you with a decent press-ready file – and many logos are represented by multiple versions. All you have to do is sign up for an account – it’s free of charge and quite secure (no spam ever!).

  22. / Reply

    Good post…I can add these?
    https://www.wetransfer.com/
    http://fontfabric.com/
    http://abduzeedo.com/
    Thanks…

  23. / Reply

    Informative Article, Its a brilliant list. All the tools are very useful. Without the tools web designers will never be able to deliver a good result. Thanks for the post.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Elegant Themes Coupon Code: 20% discount

While most other WordPress theme sites charge per theme, Elegant Themes is an amazing deal as you pay just once for access to 87 premium WordPress themes and a…

WrapPixel Coupon – 25% Discount

If you’re looking for an HTML or PSD template for your next website, checkout the selection of templates at WrapPixel made for web developers, designers, and agencies. You can…