A Basic Guide to Web Design Tools

When it comes to web design, a lot of people understand the majority of the process but don't really know where to begin or what tools to use to get things going. This is a basic guide to understanding the various tools of web design, which web design tools to use and which to avoid and how to save a buck by using freeware and open source options.

Also, if you have another application you love and it's not mentioned here, let me know in the comments and I will try and get it added here.

FTP:
File Transfer Protocol, or FTP is a means of connecting to a web site's host to make changes to the static files the site uses to build the web content. It is the direct way to access your web site's server and make edits to it's files. While there are other means to edit files via a web browser, using FTP is much faster than swapping files over HTTP.

CuteFTP File Transfer Protocol ClientCuteFTP
CuteFTP is an FTP client that will cost you some cash to use but offers you a great deal of built in functionality that streamlines workflow. Notably, CuteFTP offers a built-in file editor so a user is able to make edits to files from directly in the client. Simply right click the file, select edit and the file's text is brought up and you are able to make edits. When finished, simply click save in the top left and the file is uploaded to the host and the change is made live.  When it comes to speed, this way of editing the files is the way to go.

Filezilla File Transfer Protocol ClientFilezilla
Filezilla is a free open-source, no frills FTP client. To manipulate files, you must use an external text editor and click back over to the client to upload the changed file. While being completely free, you may go nuts when you save a file in your text editor and refresh the changes on the site, only to not have them show up because you have forgotten to upload the changes. If you do happen to remember to upload everytime, you will still have to deal with two-three extra clicks before the file is uploaded. The simplicity of clicking one button and moving on is a feature Filezilla lacks, but the price is right.

Text Editor:
A text editor is used to make changes to your files and a decent one will color code the file so you are able to make quicker edits and a better overall sense of the design through the code by coloring different tags in different colors. So if you are looking for an image file, and it's colored red by the text editor, then you scroll through the code until you find red and then look to see if its the file you are looking for. Some more robust text editors will organize and minify the code to offer the most optimized code possible.

Notepad++ Text Editor ClientNotepad++
Notepad++ is an open source text editor that is completely free. It's amazingly straightforward and low profile which makes it very attractive as an application and offers myriad options to help you code faster such as color coding for just about every coding language under the sun. Here at Niteo Design, we use Notepad++ in conjunction with Filezilla to offer an open-source and completely free way for each designer to access and edit clients' web sites.

Image Editor:
An image editor is a type of graphics software is used to edit the graphics that are used on the web site. Because CSS3 can't replicate every design style, graphics are still and will continue to be an integral part of web design and a web design must be versed in image or photo-editing software to be able to manually create the graphics they need to develop the site the envisioned. An image editor can also be used to create mockups and wire frames.

Photoshop
This is the industry-leading image-editing software and it comes with an industry-leading price. If you are able to shoulder the costs, you definitely get what you pay for. Photoshop can literally create anything you can imagine as far as web-based graphics go and offer every sort of option you may want to manipulate for vector, raster-based and text-based graphics. If you decide to go with Photoshop, spring for the full application and avoid Photoshop Elements, it really offers a limited amount of options compared to the complete Photoshop, especially for the web-based graphic designer.

GIMP
GIMP is an open-source image-editing software that is completely free of charge. GIMP was created as an open-source alternative to Photoshop and offers many of the exact same features that Photoshop has. If you can't afford to go with Photoshop, go with this. Another great feature of GIMP is that it's available on every operating system so even if you're running Linux, you're covered. A web designer who is able to deftly use Photoshop will be able to use GIMP with the exact same results which makes the application an extremely exciting option available to web designers.

Paint Shop Pro
PSP is a shareware image editing option that costs about a third to a quarter of the cost of Photoshop. The application is fairly robust but lacks many of the deeper features available in Photoshop and GIMP.

Browser Add Ons:
There are several add ons that are offered through web browsers that help web designers and web developers to take an in-depth look at the data that's being parsed through the browser and seen by the users. This helps the developer to more readily identify the changes that need to be made to the code and graphics to produce the desired output.

Inspect Element
This feature is offered through most browsers and allows the user to take a look at the HTML, CSS and JSON that's being parsed to create the site. Unlike viewing the source code, right-clicking an element and inspecting it will show the element in the code and offers style and JSON context for the element as well. This allows developers to see exactly where changes need to be made to the code to get the look they're going for. Chrome and Opera offer this built-in and Firefox has a plug-in called FireBug that will allow for this.

MeasureIt
This is the main reason why I still haven't made the switch to Chrome for my main web development browser. Only offered on Firefox, MeasureIt allows the user to measure just about anything on the web. If you know you need to move something a certain distance but don't know the exact number of pixels, use this instead of guessing and correcting several times until it's just right. This takes out all of the guess work when trying to get that pixel perfect design.

Color Picker
Another reason to stick with Firefox, Color Picker is a Firefox add-on that lets you see the color information of any pixel on the webpage. This is ideal for color matching elements. Element inspection can yield some color info for html-based elements but if you need to color match a graphic, instead of downloading it and opening it in an image-editor, you can use the color picker to find out the color you need to identify.

YSlow
This is an add-on offered by Yahoo that tells you the reasons why your site may be lagging. It tells you things about the number of processes that's being called upon and whether any may be superfluous or redundant and what errors may be slowing things down as well. It also tells you the time it takes for certain portions of the page to load and the total load time. This is an awesome tool for fixing coding and parsing issues that might be causing laggy site performance.