Posted by on | 2 Comments

As a seasoned web designer or an aspiring designer. These tools listed will help you with planning, designing, production, and keeping ideas fresh. These are by no means you need to have or you will fail. They just make your life easier and can make your work much more appealing if used correctly.

1. TypeTester

TypeTester lets you design your contents font style and supplies you with the CSS code after you are finished. Typetester lets you specify the font, size, spacing, leading, tracking, word spacing, color, and decoration. You can view 3 columns to let you compare different design ideas. Fast and efficient.



2. Color Scheme Designer and Color Contrast Checker

No time to read up and keep fresh on color theory. The color scheme Designer has very easy to use interface with a color wheel. Point and click and get the a scheme made up. You even have the option to see that scheme used on a sample website without leaving the page. The Color Contrast Checker checks to make sure there is enough contrast in a foreground and background color for people with vision deficits or if the site is viewed on a black and white screen.

3. sIFR – Scalable Inman Flash Replacement

Have you ever wished you could use any font other then the system fonts. sIFR lets you do just that. You can use helvetica, futura, and any other custom font you like for text. Seems in the beginning alittle complicated but after the 1st time you get it working. It will take you no time to repeat the process. If you are using WordPress there is a plugin that takes all the tech work out of setting it up.

If you do not own Adobe Flash Professional this is how you would use sIFR:

Grab your TrueTypeFont (.ttf) and head over to the sIFR Generator. Take that file and place it in your sIFR flash file in your web directory. update your config file to use the flash file and your done. I would highly suggest getting sIFR setup and working before creating new flash files. The hard part is getting it working. After its setup you can play away.

4. DaFont, Veer, and iStockPhoto

Fonts, photos, illustrations, video, audio, and everything else you would need for your design projects. Some things in life are free some things are expensive, same principle apply’s here. Dafont has all user submitted fonts free of charge for download. Veer’s fonts are professionally designed and can have a price tag of hundreds of dollars. iStockPhoto has all the graphic design elements you will need. I buy all my stock photography from these guys.

5. Reset Reloaded

Reset Reloaded is nothing more then a CSS file you use to reset all the elements and formatting done by default in any browser. This will help you simplify the process of cross browser HTML rendering. The way I use this; I create a file called "Reset.css" and paste the reset reloaded css code into it. I then import that into my style sheet for the site I am creating. Reset.css rarely changes from site to site. However, I use this file to include CSS I use across all my sites. I use the Clearfix from Position Everything, that goes in there plus anything else that is very common. start using this and you will stop saying "Omg why does IE add this space and not firefox! grrr" ok maybe you won’t but you will hear it much less.

6. Golden Ratio Calculator

The golden ratio is also known as divine proportion. Theory suggests that different size proportions are more aesthetically pleasing to the eye. Basically take your total size and split it into 2 columns (content + right nav) and divide the golden ratio (1.61803399) find the best size for the largest column.

Take a width of 1000px. what’s the golden ratio of that?

1000 / 1.61803399 = 618px | 1000 - 618 = 382px

One column would be 618px and the other would be 382px. that’s is the golden ratio in a nutshell for you to use.

Quote from Wikipedia: "Beginning in the Renaissance, a body of literature on the aesthetics of the golden ratio has developed. As a result, architects, artists, book designers, and others have been encouraged to use the golden ratio in the dimensional relationships of their works."

7. Diagnostic Styling

These tools are complete web standards checklists for links, depreciated tags, and images. By checklist I mean CSS. what it does is make sure the beautiful site you created is not compromised with bad images, links and depreciated coding after your work is done.

8. FavIcon Generator

Sometimes the small things are so big for clients. I have received this question more then anything from clients "How do we get that small logo in the address bar". Well this online tool does it for you in a matter of seconds. You upload a small image and it will convert the file type for you. there are extensions for Photoshop and other design software for this. But if your not at the office and someone forgot to do this or last second request to make the client happy. you need not look anywhere else but the FavIcon Generator. This is all the code that is required to tell the browser to use your ico file.

<link rel="shortcut icon" href="/favicon.ico">


FavIcon Generator

9. The Freelancer’s Toolset

The Freelancer’s Toolset is nothing more then a giant list of business resources for web entrepreneurs. anything to get you organized or perform office tasks is here.

Being organized is one of the top characteristics of a professional. Often this can make or break deals. always remember the 7 P’s, Proper Prior Planning Prevent Painfully Poor Performance. Every client meeting you should have a copy of all your forms, creative strategy document, project timeline gant chart, estimated costs baseline. Maybe if your doing very small business projects this could be out of your league. I do not believe that, the impressions you leave with your clients will be with you forever. To you there business could be a small weekend warrior job but to them its a big deal. Do not under estimate them, if anything over estimate.

10. Firefox, Firebug, and the Web Developer Toolbar

This is the platform you want to start your HTML and CSS coding with. Why? Easy. because if it looks perfect in Firefox and will be very close in IE if not perfect. Any changes can then be fixed for IE. IE6 on the other hand can be less forgiving especially if your using new coding techniques in the latest version of CSS. Remember if you can get the code to validate you’ve won half the battle of having a perfect page across all browser platforms.

Firebug is the best thing to happen to web designers and developers. Firebug a tool that lets you see the way code effects your pages with clicks of the mouse.

Web Developer Toolbar is a very handle utility, very similar to Firebug with a lot of features to help you visually see the elements of your page. So many different functions. I really do not know what the best part of this tools is because I use so much of it for different things. The most used used feature for me is Display Element Information (CTRL – Shift – F). This handy tools lets you click on elements, basically anything on the page, and see its properties. It is very detailed. you want see the font being used, what size it is, parent tags of this element, position, child elements, and attributes. that should be enough to let you know what’s going on with and element. A good deal of its features overlap Firebug but in some cases one will work better then the other.