We designer types are a finicky breed. Rarely is something just right and we don’t really like the words time and budget. Good work takes time, a lot of it. That being said, when I launched version 2.0 of eleven3.com I was really excited, I felt I had achieved good work. I’m not sure if it’s just me, or if other designers do this as well, but when I design something I like; I stare and stare and stare.

With any creative work, the longer you expose yourself to it, the more stale it becomes. That’s why, about three months ago, I got the itch to redesign my site.

So here we are, one year ago and change I launched version 2.0 of eleven3. Today I launch version 3.0 - and yes I am just as excited as my last redesign. There are a lot of reasons for my excitement, but mainly it’s just a new look, a new focus, and more flexibility. Gone is the rigid and closed-source Movable Type and arriving is the flexible, fluid, Wordpress.

Continue reading for the off chance of relating to the requirements of the relaunch, the design phase, the challenges of coding the front-end, and the use of Wordpress and a plethora of plugins that now make up the site. A lot of work went into it, my hopes are that it is well received.

Redesign Requirements

The Tools
There are many examples out there of great tools facilitating great work - but let’s not forget the old adage, “It’s a Poor Craftsman that blames his tools.” I had become the poor craftsmen. Movable Type was my tool and I had grown fully tired of it. It kept timing out when I created new entries and the comment spam kept getting worse and worse. Overall the system felt bloated and rusty. In the end - your tools can put you in a rut, the old adage is only half true.

The Focus
If version 2.0 had something to say to new visitors, it would have been, “Hey! Look at my portfolio.” My life has change considerably since then and the portfolio is no longer my focus. There are two main reasons for this change. After blogging for about a year I found out how much I really enjoyed it, and then I realized how secondary and unimportant my blog seemed in the context of the rest of the site.

Notice the hierarchy of the page and the prominence of the portfolio.

My content wasn’t really findable and old posts just seemed to die. My primary focus in the redesign has been to put the spotlight on the content I am generating, both old and new.

The other reason I have decided to place my portfolio as a secondary element is due to the fact I have started a creative shop called We The Media - this is where the main body of work will reside. I will discuss WTM and it’s goals in another entry.

Inspiration and Design

There were many steps and components to the project - but I would say one of the most important is the feedback I received from some really talented designers. Without them pushing me to explore further, I may have stopped short of what I feel has evolved into a solid site. While my name is on it, it was a group effort.

Sketches
As with any web design project, I started by sketching out a few ideas in my book. I will be the first to admit that my drawing skills directly straddle the line between almost mediocre and really really bad (ironically my webdesign skills were described the same way once).

This sketch was nowhere near my final design other than in layout, initially I wanted to do something more ornate.

Inspiration
Danielle, my fiancee, came home one afternoon with a pile of old magazines from the 40’s, 50’s, and 60’s. Immediately I discarded the vintage coolness factor and traded it in for the, “Where are we going to put all this crap,” attitude. As always, I was proven wrong and over time I grew to love these magazines. The ads were so rich and copy-driven, the pages so big, and the content had substance. So one night I started scanning them in and collaging them together in photoshop. This ended up being the foundation for the site.

My good friend Nicholas Galanin should write about why I chose to use those ads - he has a way of describing his work that gives it depth and artistic merit. Me? I just say things like, “I used those ads because I thought they looked cool.” Lame lame lame.

The Grid
After being exposed to Khoi Vinh’s gridding exercise from SXSW ‘07, I have applied it to everything I do. I usually opt for the 12 column grid and this project is no different. What a wonderful approach. For those Photoshop users out there, here is a great little plugin for setting up a quick grid, courtesy of Andrew Ingram. I’ve never heard an argument for not using a grid - but I am certainly open to it.

The Elements
Tape - My early comps had tape in them - it just wasn’t the masking tape. It was more like the transparent tape with lines in it and is really hard to tear. It also was really hard to make it work - which is why it was eventually ditched.

The masking tape was an evolution from that and I am quite happy with the outcome, for now at least.

Rounded Corners - The first version I did felt really boxy. It was one of those things you feel, but don’t necessarily have the courage to overcome till someone says something. I slowly migrated from the abrupt edges to the rounded corners. While it may not necessarily go with the look and feel of the ads in the background, it does separate the side bar in a way which gives it a “site within a site” feeling. A goal I wanted to accomplish with the new sliding sidebar approach I am trying.

The Side Panel - I’ve been using mootools for a few projects lately and as stated above, I am experimenting with a new solution to avoid the long scrolling sidebar. I’m not a fan of blogs that scroll forever, unless one updates the content more than once a day.

By creating a consistent look and feel, I was able to have continuity across the four panels and allow the user to access the information without leaving the page or having to scroll down. It also separates the content into groupings of information that become clearer by looking at the navigation. What’s worse? A click or a scroll? Who knows, but what has a fun factor?

The Carpet - It was around 2am when I came across an old advertisement in a vintage Esquire Magazine. For many reasons, it seemed like the perfect footer for the site. It was greeny, shaggy, and had the little up curl which had so much potential for customization. Eventually it became what is visible now.

I think it’s a carpet ad, but I am not totally certain.

Front-End Fun

Browser Compliance
Ask anyone who builds websites what the biggest thorn in their side is? I have no doubt the majority will likely name Internet Explorer 6.0. At the time of writing this post, IE6 has 36.6% browser share. I’m not sure what the breaking off point for IE6 users will be, but for my personal site - it was almost 36.6%. Eventually I caved under statistical pressure and rest assured the site is working just fine in Internet Explorer, but it did not get by without my nasty poem.

MooTools and (Slimbox)
I wrote code for the sliding panels not too long ago and used it for a few projects. Once I had the moo.fx implemented, I moved on to setting up lightbox - another favorite piece of JavaScript trickery. Unfortunatly, MooTools and Lightbox didn’t seem to be compatible, and that is when I stumbled upon Slimbox - a Lightbox clone. Once again I was happy having my fade to black photo slides.

Standards
I was so tempted to keep this site as “Transitional” and keep my target=”_blank” tag in some of my external links, yet I decided to go strict. Why? So I could shake my tail feathers just a little bit more. Seriously though, standards are very important and if I am going to sell clients on their importance, I have to walk the walk myself.

A splash of Wordpress

This was my first attempt at migrating a Movable Type blog from a Wordpress blog. It was surprisingly easy and it makes me very happy to be in the Wordpress camp. There are a few reasons for this.

Ease of Maintenance
I handle all Wordpress maintenance in Dreamweaver and do not have to rely on an internet connection to get between different templates. I know Movable Type had a way to do it - yet it seemed like an afterthought. Using a WYSIWYG editor to edit code is nonsense. I had gotten to a point where I hated logging into make any edits. Not to mention having to rebuild the entire site for things as simple as a date change.

MT4 has been released and I hear good things, but as I stated - it was too little too late for me.

Extensive Plugin Library
I am using several plugins to make this baby hum. The development community for Wordpress is huge and getting plugin to work is much easier than in Movable Type. Just about every little thing I had the, “I wish it did this,” thought for was actually floating around somewhere and just needed to be tracked down. Brilliant!

Putting it all together

After extensive testing, a migration to Media Temple, and a lot of little tweaking, eleven3 Version 3.0 is ready for all the scrutiny and praise it deserves. It will always be a work in progress, but at least now I feel liberated to make the progress. Now if only I could figure out a way to make the size of the document go from high to low without sacrificing aesthetics or functionality.

I decided to write this post because I always liked it when designers wrote out in detail their processes - it’s how I learned myself. For some people, this will be a big repeat of what they already know. But I am hoping that others will find it useful in discovering their way as a designer. It’s a great field and everyday I feel fortunate getting to do something I absolutely love.

Popularity: 73% [?]