Finally decided web design and development is the path you want to take?  Now you may ask yourself, where do I start?  Based on my experience, I will give you a list of tools that I use for all of my works.  In addition, this list has alternatives for those that can afford the price or for those that need something quick and free.

So you already picked web design and development as something you want to do in the future, or maybe you just want to pick a hobby to pass your time away.  Either way, there’s always a few tools or resources that everyone needs to complete the job.  And in most cases it would be the same tools or just different versions of the tools that do the same thing.  When starting web design, the process ultimately comes down to 5 basic steps.

1.  Designing the Template
2.  Slicing the Template
3.  Coding the Template
4.  Filling the Content
5.  Final Clean-up

I will eventually go over those steps in future case studies and tutorials.

For now, we should concentrate on the tools that help us with those steps, and without further ado, here is the list of web design tools you should have in your arsenal.  If you have any other recommendations, feel free to comment below and share them.

Designing the Template

For designing a template, you need a graphics editing program. A program that can make gradients, boxes, shapes, etc… Here are the list of tools that I recommend.

1. Adobe Photoshop

Probably the most popular image editing program would be Adobe’s Photoshop line. The current version is Photoshop CS4, and may I add that it is quite expensive. However, the saying goes, you get what you paid for, and certainly after dishing out the money for a license gives you one of the world’s greatest editing program (sounds very exaggerated, but really, it’s that good). Photoshop is great not only for web design but for other fields and careers such as the art industry, photography, graphic design, print design, and pretty much anything that deals with pictures.

2. GIMP

So what if you don’t have Photoshop or the budget to afford it? GIMP is probably your next best bet. It has layers like photoshop, and a few other features. When I first tried GIMP when I was looking for other options since I couldn’t get my hands on Adobe Photoshop, I first thought the interface was really confusing (compared to Photoshop). However, lo and behold, someone has made a plug-in for GIMP that makes GIMP’s interface just like Photoshop which is very useful for those that may have to downgrade from Photoshop.

3. Need more options?

I recently stumbled over a post that I thought may be more helpful for others, and of course, I’m not into the whole copy and pasting other people’s hard written blog posts, so here are 19 more free image editors that you may like. Visit the site and see if there’s anything in there that may help you. There’s also more programs in that list that go beyond the tools needed for web design.

Also a reminder, you can slice your template with your graphic editor as well. No need to get a separate program for that.

Coding the Template

After you have your template designed whether it be a simple portfolio site or a complicated e-commerce site, it’s now time to code it. If you just want the most basic thing on the earth to code, then your computer already has it. Notepad. Since coding is just a language, all you need is a text editing program and you’re good to go. I would refrain from using editors that automatically format like Microsoft Word since they tend to add a lot of weird formatting that may conflict with your coding. Notepad, Wordpad, things like that is all you need. However, what if you would like some help with your programming or perhaps a more visual look to your code?

1. Notepad++

Notepad++ is a great editor for coding. It supports multiple languages and highlights certain syntax code words so it is easier to spot a mistake if you make one. It also has tabbing so you can open multiple files, and one of the good features I like about it is when you open it, it opens the last couple of files that you worked with on your last session. Very handy when you accidentally close it, or figuring out the next day on what you have to work on next. There is A LOT of features on Notepad++ that I don’t even use, but perhaps you will find a use for them sometime, or simply forget about them like me.

2. Scite

Scite is another text editor that I use a lot. I interchange with either programs. Honestly, there’s no difference except Scite doesn’t automatically open files in new tabs and it doesn’t save your last known session. However, it’s a lightweight program, that’s really nice to have.

3. Panic Coda

Since I’m also a Mac user, I can’t forget to give this program some credit. Panic Coda is probably one of the greatest code editors for the Mac right now. It is costly, starting at $99 but the price is worth it in my personal opinion. Although there’s a lot of alternatives, this is probably the most user friendly. You can connect to your files with your FTP information, upload, save files instantly, edit your files there, and even preview them. Very handy.

4. Mozilla Web Development Plug-ins and Add-Ons

Another method of editing code and seeing how it works would be using Mozilla Firefox’s plug-ins and add-ons. I’ve already listed some really good plugins for web developers in a previous post. Using those in combination with text editors to save to your ftp will result in faster coding. It may be quite obvious, but I’ll make sure I show you guys my process in editing code in a video cast later.

Other Useful Tools to have

There’s a lot of extra tools you might need to finish your development or make your design much more efficient. One important tool would be an FTP client. There are tons of FTP clients, and I’ve tried many of them and pretty much they all do what is needed for the most part. Some may have extra features or fancy interface, but all you need is a client that connects to your server or the client’s server, and you can upload and download from it. My favorite FTP programs would have to be either FireFTP which is an add-on for Firefox to use an FTP right in the browser or FileZilla which is a standalone client and supports multiple connections.

Here’s a link as well to even more web design tools you may or may not use, but personally here is my final list of web tools that are good for starters.

Since I use both Mac and PC, I’ll put what I use for both.

PC

1. Notepad++ (Text Editor)
2. Filezilla (FTP)
3. Mozilla Firefox Web Development Add-ons – Includes Firebug, Web Developer, etc..
4. Adobe Creative Suite CS4 (Photoshop, Flash, and Illustrator)

MAC

1. Panic Coda (Text Editor/FTP in one)
2. Filezilla (I use it sometimes for faster uploading)
3. Mozilla Firefox Web Development Add-ons – Includes Firebug, Web Developer, etc..
4. Adobe Creative Suite CS4 (Photoshop, Flash, and Illustrator)

Alright, so that’s definitely more than 10 and of course there may be better programs out there.  I wouldn’t waste my time with getting the advanced programs.  Wait until you’re comfortable with coding since the more you know, the more you’ll be able to use the extra features.  So don’t waste your time trying to research it all out. I’ve already done it for you. Come back for more case studies and resources for beginning web designers.

P.S I’d like to thank those that contributed to my comment and contribute for Haiti entry. A total of $5, but I’ll throw in another $5 to make it an even $10. I’ll do the transaction tonight and will post an update to that post later tonight. Thank you for your cooperation, and stay tuned for more ways to participate and even win some prizes.