This web site has taken me two years to complete, from start to finish. That includes a bunch of re-designs, re-codes and re-everythings. The final result is brilliant, but it was a long process, a difficult process and sometimes an ugly process.
Reasons for Updating
Obviously it was because I wanted to. But we all know that isn’t the best reason. It was a professional decision, my old web site was out-of-date and didn’t effectively communicate my abilities or personality any more.
The old site had one specific purpose: get me a job. I launched the web site about a week after completing school in 2006 (fast, eh?). It was a great little site with only enough info to get me a job and it fulfilled its mission. I neglected the site and it became stale and old, but now that I am a freelancer it is a critical part of my business presence.
I wanted to create a site that showcased my personality, have strong branding and demonstrate technical skills through its own design, code and content. And I believe I totally accomplished this goal.
Evolution of the Design
I absolutely loved the old design and it was mentioned to me many times by a certain someone that I should just update it and re-use the design. But I felt otherwise, I wanted something fresh, modern and more professional.
So I began the long arduous task of designing something for myself. There was a lot of swearing and cursing my design skills and nothing was ever perfect enough for my standards. But there was one aspect of the old web site I didn’t want to abandon: the pink retro rocket.
The Old Design
Just in case you forgot what the site looked like last week, here is a quick refresher.
It was a simple centred layout with a Flash header. The header and background were time-sensitive and would change depending on the time of day. By clicking the pink star you could trigger a stylesheet switcher from inside Flash and time warp the design. I used my mad–2006-skills to make that happen and to this day love the effect—too bad it just didn’t work in the new design.
Likes:
- The retro feel and the pink rocket
- The time-warp functionality and time-sensitive stylesheets
Dislikes:
- Too small
- Flash navigation
- Very little information
- It’s not obvious who I am or what I do (can you find my name?)
The White Design
The goal of my first re-design was to modernize the retro feel and provide a flexible blog post area. At the time I was inspired by A Brief Message because flexible blog post areas weren’t all the rage yet.
When I created this design I still worked at gordongroup, we were encouraged to bring in personal design/web projects to meetings and talk about them. This design didn’t get the best reception and after some time I tossed it.
Likes:
- The flexible blog post area
- The direction the branding was going: simple and white
Dislikes:
- The design was bland
- It didn’t effectively portray my personality
The Brown Design
For the brown design I was inspired by the pattern on the inside of my messenger bag, but lets not talk any more about this failure.
On a positive note, this design did kick-start the new branding—it features a near final version of the word mark and a slightly older logo. With this design you can also see the the start of the hanging rocket trend, which has continued throughout the rest of the designs.
Likes:
- The word mark and the hanging rocket
Dislikes:
- Everything
The Purple Design
The purple design was the most successful, lasting over a year—it actually made it into production with all the browser compatible HTML and CSS created and a few pages designed.
The final design is a direct evolution of the purple design: they share the same colour palette, similar navigation, almost identical about pages and similar features. The hanging rocket logo is present in this design but is a refined retro rocket instead of the sharp futurist rocket seen in the brown design.
My major concerns with the purple design were the massive weight of the purple column and how constricted the design felt. I spent time trying to modify the layout and make it flexible but the design still felt cramped by the right column. I wanted something big and airy and that is what ultimately defeated this design.
Wilson Miner’s previous site design was a huge inspiration for the purple design.
Likes:
- Almost every aspect: the hanging rocket, the colour palette, the architecture, the simplicity, etc.
Dislikes:
- The design was crampin’
The Final Result
So we get to the final result, the one that went live. The similarities with the purple design are great, but at the same time the two designs are distinctly different. The final design is gigantic (just the way I like it) and frackin’ amaze-a-zing, if I do say so myself!
One of the major things I realized as I was designing the final version was that I am now a business. What does that mean? Well it means I have to market myself. So, now the site has two purposes: portray my personality and skills and get me work. So I channeled a colleague, Bruce Spurr, and tried to add some marketing micro-text to my site. Was it successful? Hopefully—it sure sounds awesome—but it’s too soon to tell.
About the Final Design, Technically
The layout is of course grid based, but not just any grid, a flexible grid. The flexibility of the grid was inspired by Clearleft’s site. If you had to classify the layout it would be halfway between an em-based layout and a flexible layout. It is flexible up to a specific width then becomes em-based. Mmm min-width and max-width.
I couldn’t get my wonderful flexible stuff to reliably work in the two evils so they get a fixed-width site—their loss.
I figured it was time to convert to HTML5 and that’s what I did, but to maintain compatibility I decided to forgo the new elements and stick to HTML4 elements primarily.
You may have also noticed the typeface you are reading. Yes, that’s right, I used @font-face. If your browser supports it, the type is primarily set in the beautiful Museo and Museo Sans by Jos Buivenga.
Things That Could Use Improvement
Well you may have noticed the web site isn’t complete, that could sure use improvement and I’m feverishly working on it. There are also, inevitably, bugs everywhere.
I’m a little disappointed in the div-itis I have going on but to technically achieve my flexible grid it was a necessary flu.
And So it’s Live…
This site was a huge undertaking that took me over two years of on and off development to complete. Two years of personal inadequacy. Two years of re-designing. Two years of cursing and swearing. I am so excited it is finally launched!
Updates
This site has been redesigned again, so this information may be out of date. Check back soon for another post about the new design.