To mark the launch of my latest project (head over to the portfolio area to see screenshots, go ahead, I’ll wait), I tought I’d give a short overview of the tools I used to do it (in no particular order).

Blueprint CSS
Blueprint is a CSS library that resets the basic styles, provides a grid for horizontal spacing, as well as a baseline for vertical spacing. It also comes with a few other nifty typographical settings, and in the next versions might even include default form styling. I used Blueprint for this very website too, but this was my first time using it for a “real” project.

After using it once, I knew what to expect, and designed everything with Blueprint’s baseline grid in mind. I kept the default grid based of a 12px font size, which means that each line is 18px (or 1.5em) high. Since I knew this before even starting designing, I made sure all my elements’s heights were multiple of 18 to ensure consistent vertical spacing.

Blueprint Grid CSS Generator
The default Blueprint grid has 24 columns, but you might not need that many. In order to simplify things a bit, I used this great script to generate a 12 columns layout.

Syncotype
Going hand in hand with Blueprint is Syncotype, a great little bookmarklet that superimposes lines over any webpage.

Firebug
You probably already know about Firebug, but just in case, here it is again. It’s particularly useful to tweak margins and padding until everything fits nicely on the grid.

Gridmaker
Another great tool if you use Photoshop and use grid based design. It lets you start a new documents with guides already arranged according to a grid you set. Obviously you’ll want to use the same grid as the one you generated for Blueprint. One downside of this tool is that you can’t modify a grid once you’ve created a new document. But here’s how I do it: just put all your layers in a folder, and duplicate it into the new grid you’ve created.
Don’t hesitate to use this script multiple times with different values, as it might take a few tries until you find the grid that perfectly matches your needs.

Photoshop
Well, this one needs no introduction. Sometimes I wonder why so many webdesigner use Photoshop, which was not conceived with webdesign in mind at all. Personally, I know I use it because I’m familiar with it. Oh, and sometimes when no one is looking I’ll add some difference clouds and lens flares to my designs…

Textpattern
This was my first time using Textpattern CMS. I knew I only needed basic CMS features, so it restricted the field a bit, but I still considered a few options. I didn’t pick Joomla, because, as stated above, I wanted something simple and lightweight. I considered WordPress, but since the site requirements didn’t include a blog at all, it wasn’t a good fit either. Finally I settled on Expression Engine, but then discovered the extension I needed (the Pages module) was only avaible if you bought a license. Since I had heard good things about Textpattern, I installed it to check it out, and after a short learning curve was pleasantly surprised by how fast and straightforward it was.

One thing I didn’t like was having to edit templates directly from the browser (all of TextPattern’s content, even templates, are written in the database) instead of editing physical files with tags in them like in WordPress. But in the end I got used to it, and Textpattern’s include system makes it so you’re never editing too big of a chunk of code at a time.

It also takes some time getting used to the interface, which is very functional but a little ugly compared to Joomla or Expression Engine. The naming conventions are also very odd, as templates are named “pages”, and includes are “forms”.

These littles flaws aside, I enjoyed using Textpattern. Of all the CMS I’ve tried so far, I’ve got to say it’s probably my favorite (tied with WordPress).