Web designer's arsenal – 13 tools

Between a wedding and a really bad cold, I’ve decided to write this post. Don’t worry ladies, it wasn’t my wedding, although I will still remain unavailable. It is a simple list with the things a web designer should have in his agenda. These are valuable tools even for the most advanced web designers.

First I will start with a tutorials round for rookies and then inspiration source for more advanced web designers.

“The” best site for beginners is that one site that will be forever in everyone’s bookmarks list. Whether it is for XHTML, CSS or Javascript, W3School will always have “new” data for those who want to learn more.

For the artistic side, PSDTUTS is one of the most powerful Adobe Photoshop tutorials site. It is obvious that you don’t have to be all the time a Photoshop user to use this site. You can easily adapt it to any graphic application like GIMP or others.

It is natural that if you want to become a web designer, you should have at least one browser. I tend to recommend Opera in order for you to understand web coding with standards embedded. It is the browser with most standards implemented and it will show you how a website should look.

As an additional browser, Firefox is the most powerful of them all. And that power comes with the speed, standards and powerful plugins system. I highly recommend it, also because the next two items from the list are related to Firefox.

One of the reasons that Firefox is a name in the browsers war, is Firebug. This is the tool that no web designer should miss. It helps you debug and enhance the design, as well as observe different web design standards like DOM, Javascript, CSS or XHTML.

YSlow is a plugin for Firebug. Yes, with Firefox you can have plugins and plugins for plugins. I don’t know for sure if I said it right. YSlow analyze and helps you speed your designs. The important rule you don’t have to miss is that before you’ll have to optimize the backend, the frontend should be perfectly optimized.

I don’t have to detail too much this site. It is simply the most powerful free stock photos site around. You can search for everything and make sure to ask for permissions when you use the photos.

There are many sites related to fonts, but I recommend this one. It has free ones and also commercial ones. So it is a good deal if you want to look for something corporate or for home projects. In any cases, Urban Fonts is the website for you.

In the web design you can deal sometimes with colors. I’m kidding, web designers are always related to colors. So, when you want to test, or to choose a color scheme, Adobe Kuler is the free best choice for that.

Another tool, but this time for optimizing code is CSS Optimizer. Yes, it is used to optimize CSS code. So, if you want a full compressed CSS file, this is the place to be.

Images are about 50% from a site. So we really should consider to optimize these components as well. SmushIt is a tool that does that. It scans the site and tells you what images can be optimized.

NETTUTS is part of the Envato family. It is made by the same people behind PSDTUTS, only this time the site’s tutorials are backed by web developers. They have a wide range of tutorials, so this site is handy for everyone.

At last, but not least – UI Patterns. This site is somewhere in the advanced zone. Here you can find prototypes or standard user interface elements. It is the place to be, when you want to find a solution to a UI problem.

Now, back to my cold, and keep your surfing next to these sites for an upcoming great web designer.

One idea on “Web designer's arsenal – 13 tools

  1. admin

    This is a list that I consider to be valuable for a beginner and even for a skillful web designer.

    Combining the great knowledge that exists in these sites will give the reader enough experience in the web design area.
    I’m sure there are other sites as well, but this list has a good diversity that can keep a web designer occupied for a long time.