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.
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!
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.
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.
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.
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.
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.
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.
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!
Flickr – Creative Commons
Browse through millions of images filed under the different types of creative commons licenses.
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.
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.
This website has over 11,000 fonts available and also has some great links to font-related tools you may need.
More than 8,000 fonts nicely divided into categories.
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.
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.
More than 32,000 icons in different categories can be found here.
This website has been around since 2007 and was the first search engine focused on icons.
Find Icons is an icon search engine that helps you find free icons with sophisticated search filtering and result matching system.
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.
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.
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.
A website dedicated to creating and sharing color palettes from images.
Coding Related Tools And More
If you code, these are some great resources to help you out on that part.
W3C Markup Validation Service
Helps you check the markup validity of your web documents.
W3C CSS Validation Service
Same as above, but for html containing CSS and CSS only.
Online comparison of fonts for the screen.
Embed custom fonts in your web pages.
Easily add reflections to your images.
Easily create favicons for your websites.
Easy and quick way to create a simple HTML form.
Format and optimise your CSS.
A web based FTP client.
Web Developer Extension
Adds a menu and toolbar to your browser with various handy web developer tools.
Online HTML Editor
WYSIWYG editor with quick response time and the ability to upload files and save.
Realtime HTML Editor
Quite unique, simple and easy. No plugins needed.
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.
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.
Great for website and app mock-ups. Clean interface, drag and drop functions and many interface elements available. A favorite for many designers.
A great website to stop by if you want standard size specifications for anything from envelopes to web banners.
Great tool to check what your website will look like in different browsers.
Spoon Browser Sandbox
Run different browsers without any extra installation.
Are My Sites Up?
Monitor your websites easily and get notified if they're down, and find out why.
See your web design on any browser and operating system. Check scripts and more.
Free hosted website analytics solution. Who is your audience?
Best Free Templates
Some of the best CSS templates available for free download.
And finally here are a few other tools that you should consider for your toolbox.
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.
Great tool for text, web site captures and more. Sync easily between different devices and more. Easy yet powerful.
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!
Having these handy can mean saving hours of work and help you do better with both your programming and software.
Huge collection of cheat sheets.
Another great site with many sheets.
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.
Online Image Editors
Sometimes using an online editor for easy tasks can be an advantage. Here are a couple of the most popular ones.
Crop, resize and other useful features can be found here. You can also store a handful of your images here.
Another good one with a lot of useful tools available for you.
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?