Often (but not always), the first tool I reach for when I have a new website to develop is not on the computer at all, but is usually in the desk next to it.  You guessed it – the very low-tech pencil and paper.  I find it easier to quickly sketch out ideas on paper.  They don’t have to be good sketches!  You’re not going to be hanging these up in a gallery or anything.  Sketching out a layout, or writing down ideas or site structure helps me get an idea of what the site should be like.  As you write down more ideas and draw more sketches of layouts, you can get progressively more detailed and by the end, have a pretty clear idea of what the site will be like.

The next tool I pull out of the toolbox is almost always Adobe Photoshop.  Working from my sketches, I’ll basically just work in Photoshop until I have a complete mock-up of the site completed.  If I’m working with a client, of course there is some back-and-forth at this point with revisions and changes to the mock-up.  Photoshop is such a standard, that once you become familiar with it, it’s hard to use any other graphics program.  In a lot of ways, this is the most fun part of the process of creating a website for me.  It’s the point where the ideas and sketches which are very rough, come together into an actual design, which is the whole reason I do what I do.

Once the design mock-up is completed and ready to be converted into a real website, there are a few different software tools  I use.  One thing I will get into in the next post in this series is how I use WordPress to create the back-end of the site and write code.  For a lot of the coding the site, I simply do things through WordPress, however sometimes it’s necessary to edit a file locally.  When doing that, my plain-text editor of choice on the Mac is TextMate.  I used to regulary use TextWrangler, which I still think is a good text editor (plus it’s free, which helps), but I like TextMate’s minimalism, features, and overall elegance more.  On the Windows side, I usually use Notepad++ or Microsoft Sharepoint Designer, both of which work pretty well and are also free.

Since we’re talking about coding, I should probably mention some of the fantastic extensions I use in Firefox.  The main extension I use and love is Firebug, which makes working with CSS sooooo much easier.  Another very useful extension is the Web Developer toolbar, which has a lot of useful functions for CSS, validation, and many other tools.  I actually probably don’t use even half of the functionality that is built into it.  Some other handy extensions I use are ColorZilla (for finding color codes on a page), MeasureIt (which gives you an on-screen ruler for pixel measurements), and IE Tab (for quickly previewing the way a page looks in Internet Explorer, without having to leave Firefox).

Rounding out the software toolbox is FTP programs.  On the Mac, I am a big fan of Panic’s Transmit.  Whenever I try to use another FTP program, I always find myself comparing it to Transmit and wondering why it isn’t more like it.  On the Windows side, I use Core FTP LE, since it’s free and is kinda-sorta like Transmit.  It’s a Windows program, what do you expect?

So that’s the software tools I use when developing websites.  Software is amazingly important and can make such huge difference in your workflow and efficiency.  I’m sure there are certainly other good alternative programs out there, this is just what I’ve found works best for me.  If you have any good alternative programs to suggest, put it in the comments.

Next time, I’m going to explain the different plug-ins and other tools I use in WordPress.  Subscribe to the RSS feed and you’ll automatically get that article, when it comes out.

Enjoy experimenting and trying out new software.  You never know when something will surprise you.

I guess you could describe my hardware as a Low End Mac setup.  My main computing workhorse is a circa 1999 Apple Blue & White G3 Power Macintosh, running Mac OS X 10.4.11, Tiger (the latest it can run).  This guy has a Daystar/XLR8 600MHz G4 processor upgrade, 896MB of RAM (yes I know, that’s a bit unusual), and an PCI ATI Radeon 9200 graphics card.  The Blue & White also has a Sonnet Tempo ATA133 PCI card, two 120GB hard drives, and a Pioneer DVR-107D single-layer DVD burner.  I also have a Wacom Graphire3 tablet that I use once in a while.

I have a love/hate relationship with this machine.  While it gets the job done and runs surprisingly well for as old as it is, if definitely has some gremlins in it.  Over the years I’ve learned to understand and predict its sometimes quirky nature.

I’m definitely a Mac guy, although I would not appreciate being called a fanboy.  I do have a couple of PCs running Windows XP around the house, which I mostly use for Internet Explorer testing or running Apophysis occasionally.

I hope to soon get one of the new 2009 Mac minis, so I can at least be somewhat in the modern age.  I will also be able to do Internet Explorer testing right on the same machine, which will be mighty convenient.  Will I sell the Blue & White when the Mac mini comes along?  No – we understand each other too well.

Come back soon for part 2 (or better yet, subscribe to the RSS feed), and I will be discussing what software tools I use to create websites.