When designing a website for oneself — or taking on any kind of creative personal project — it can sometimes seem like there is no end in sight. A minor tweak turns into a major overhaul, a small color modification turns into an entirely new color palette. Now its past midnight and everything look just weird…time for a cup of coffee.

Inspiration vs Determination

The art and science of following a detailed design brief is incredibly challenging and requires planning, analytical skills, and a great deal of patience. There is definitely a sense of fulfillment that comes from delivering exactly what a client was looking for. There is a less quantifiable side to the creative process though, a kind of freewheeling, improvisational environment. There is still a design goal that needs to be reached, but there is also a freedom to explore for as long as is needed. Working like this is part of what drew me into design in the first place.

My Process

Like most of the websites I build, I started out the design of my new website with a pen, paper, and some good music. There is no substitution for this part of the process for me. I write, brainstorm, draw, scribble, and stay open to lots of different possibilities and directions. The most important part of this step for me is that I really have fun allowing my mind to explore the design from a visual, analytical, and caffeinated perspective.

After sketching, I opened up Photoshop and got to work turning the layout I created into a detailed homepage design. I can’t tell you how many hours were spent coming up with different textures, color palettes, backgrounds, concepts for the flow of the site. The footer alone probably took an entire day of experimenting, brainstorming, and ultimately turning one of my photographs of a Costa Rican tree into a repeated, almost mosaic like background.

Progressive Enhancements (Geeking Out)

I am most definitely a typography tinkerer, so there was no question that I was going to use CSS2’s @font-face property to embed some unique fonts into the design. The League of Moveable Type is a type foundry that makes great fonts available for free for commercial projects, all in the name of enhancing the beauty of the web. I used their font League Gothic as my main heading, and went with the safer web-font Verdana for the sub-headings and body text. Even though Verdan is used throughout the site, I used some variances like small-caps to clarify the hierarchy of headings a little.

I also decided to leave Internet Explorer by the wayside to some degree and use CSS3 a good deal through the site. The great thing about CSS3 is that we can still use fall-backs that will work for older browsers, so no one is left hanging. Plus, when IE 9 is released it will seamlessly pick up the missing pieces very nicely, without having to make any changes to the code.

All of the rounded corners that you see on the form elements, background, and buttons use CSS3 only, no images. The fancy fade in and fade out on the links is also a CSS3 effect usually reserved for a more advanced jQuery script. With CSS3 it was easy (relatively speaking) to tweak all of these elements and get them looking and working the way I wanted.

Bring it All Together – XHTML/CSS to WordPress

I could probably call this step the “Coffee, Caffeine, and Code” stage. After spending a few days coding the site in XHTML/CSS (coffee mug in hand), it was time to convert my newly created offspring into a custom WordPress theme (Americano in hand). There aren’t really any shortcuts to take during the coding process — I’ve found that whenever I try and take shortcuts, I always end up costing myself more time in the long run. There’s justno substitution for writing clean code that makes sense and is well-organized.

This site was no exception. It took a good few days to wrangle the WordPress code into a site that was both easy to folllow for my visitors, and easy to update for me. I’m using widget areas for the sidebar and footer, and I took advantage of some of the features that WordPres 3.0 introduced like featured thumbnails. Publishing something on a site for the first time is always fun, even if no one is going to read what you wrote for a long time.