Behind the Design: The Brick Oven, Pt. 1

Fairly recently I undertook a semi-freebie client, The Brick Oven, for a variety of projects, including business cards, consulting, and a website design.

The great part about working with people like Tim & Stacy is that they afforded me a great amount of creative freedom. I was given free reign over the entire design, which not only helps boost my own ego, but also allows me to utilize my skills to the best of my ability without having to spend time convincing the client that they should pay because I know how to do my job; otherwise, I'm just a design monkey, used as a poorly-understood tool to create a product that may not be 100% beneficial to the client.

With this in mind, I started by deciding on the color scheme. Warm colors felt appropriate, as did white text on a dark background, so that's where I started. I also knew that I wanted a "textured" feel throughout most of the art design, and a little depth, so I planned to be trolling through my personal collection of stock photos (note: I'll be releasing a few soon on SXC, so keep an eye open) as well as searching various online sites such as Morguefile and SXC (since I'm on a zero budget, I won't be using any paid resources). For link colors I went with one of my favorite accent colors: cyan. It stands out without being obtrusive in the warmer color scheme.

When I have the time, I like to start by physically sketching out certain elements of the design. In this case, I wanted to design a header themed like a large, hanging sign, with vines and whatnot surrounding it. I did a few quick napkin sketches of both straight and arced signage, and then set to choose the header typeface.

Web typography is a strange beast. We have a number of options available if we are willing to use raster images or sIFR. As well, we've also got the CSS3 spec @font-face that will hopefully become well supported under major browsers. Those 3 options are fine regarding short spans of type, but the safest current option (which is what I went with) is raster images. Using a flash-based implementation can work well and fail gracefully, but can cause instability on alternative OSes. @font-face still needs to garner more support, plus you have to consider the distribution issues with typefaces, and the file size problem. Raster images will render on any platform, be relatively small in file size, and fail gracefully with just alt-text usage and alternate css specs for other media (such as mobile platforms or printing).

After browsing through my collection of fonts, I chose Sexsmith for the header as well as primary headings. Its a unique condensed serif typeface that is well suited to the theme in the overall design. Plus, its free. Can't beat that.

Once I settled on Sexsmith, I opened up Illustrator, and set the main heading type in a variety of fashions including arced and straight, and then printed it out on 8.5x11 paper for more sketching. This is where I finalized the design for the header signage and presented it to the client for approval. This was mostly just to ensure that they were sure they approved of my direction in the design. After getting approval for the arced version, I set to designing it in Photoshop. Also, for those of you who are curious, the sub-heading type under the signage is The King & Queen, and the body type is Trebuchet.

This process overall went exceptionally quick, given that I already did a fair amount of planning beforehand. In about 5 hours total time spent, I was done with the mockup for both the heading and content, and was ready to present to the client. Of course, the client approved, and I then got motivated to code the design itself.

I used to live on HTMLKit when under Windows, but was beginning to find its limitations frustrating, so I grabbed Geany (my favorite Linux based editor, which is also available under Windows) and got to work. I don't really feel like I need to go into the code aspect, since it is fairly basic, but if you are curious feel free to look through the source code and style sheet. I still have some style cleanup to do, so be gentle when criticizing my CSS.

Once I coded the template, I began chopping it up into separate files to be put together using PHP includes. This allowed me to separate the redundancy of the menu list, header, and footer, making updates to the site a lot simpler. If you don't currently use some sort of broken down file or database structure to manage your layout, I strongly recommend it, as it will make managing the overall layout much easier with larger sites. While multi-document find/replace and regex can speed up modifying redundant materials, you can save file space and reduce your dependency on specific tools by utilizing includes.

We're still working on the content, but what I've written thus far I've written to be SEO-friendly.

Part 2 will cover writing the content, SEO, and handling updates to the site, so stay tuned.