House Made of Web (chapter tres)
December 19, 2008

I've spent the last two posts getting into the backstory of my history in web design ... and then the beginnings of design process - the information organization. In order to walk you through the process of site design, I'm taking you through the re-conception of Sherry K's website.

I really like the kind of lengthy tag line she uses in her emails and newsletters: Sherry K: piano with spirit, piano with soul, piano with a hint of lime and salt. Since she originally had no direction to give me in terms of iconography, colours or the like, I actually had a bit of a harder time coming up with a concept. I knew I liked the lime and salt piece and wanted to use it. I spent a lot of time thinking through where I wanted various pieces of the site to go ...

She's got three CDs for sale, each with a CDBaby and iTunes option for purchasing. I wanted to have some kind of promo area to advertise her availability for booking. She has a paragraph she's fine-tuning to let people know who she is - and for SEO purposes. Then of course, there's the navigation which took a little tweaking to make manageable ... an MP3 player and she wanted her email list sign-up to be very prominent.

A bit of terminology before I explain the next step I took. A mockup is an image of a website. For me, I'll open up Photoshop and begin building pieces of the site in the places I want them to be. I'll mess with the font (staying within the realm of the "web-safe" fonts) and sizing and begin choosing colours, images and different effects to get close to the look I want. This gets saved as a plain image ... just to give an idea what the site can look like.

So as I began working on the first mockup, I did what I always do - spent too much time perfecting the layout of the first design. The aesthetics of the first mockup I forced myself to not spend too much time making exactly perfect. The whole idea of a mockup is that it WILL change. It's an approximation and both you and the client (and if you're working with company, chances are there are several people who need to approve the mockup) - you're all going to change bits of it. Spending time making it exactly perfect is mostly a waste of time.

On the other hand, you want it to look good enough that with minor tweaking, you could publish it as is and be happy. It's not an easy balance and I know a lot of designers who pour their heart and soul into a single design ...

... and then don't want to change a single pixel. (Which always reminds me of the Cyrano deBergerac quote: "my blood runs cold,/ To think of changing even one small comma.")

In most cases, you want to present a client with two or three designs to choose from - different takes on their needs. Then, either one design can be tweaked, or some mixing and matching can go on. (Or, you've completely missed the mark and have to start over completely.)

My first take on Sherry's new site was one I really liked the layout ... but I was still wavering on the execution of the aesthetics. My hesitation was over a very simple matter ... I seized on the "lime and salt" and wanted to work that into the design. I love green. I also love virulent lime green. Most people ... not so much.

So, I wound up with this for the first mockup: (click to bigify)

Design 1

I was trying not to make the site overwhelmingly green - after all the tag line is a "hint" of lime and salt, not a nuclear explosion of neon green. My love of green led to a fear of overdoing what I liked instead of what the client wanted. Because I was fearful of overdoing it ... the colours here were, frankly, just all wrong. I did like the use of Kirby (the dog in her Kirby Lu Productions logo - designed by Cary Zartman at Z Factory).

And, of course, I overdid it on the layout. This, I was sure, was darn near the perfect layout for her site. So, when I went to do the second mockup ... I was stumped for a bit.

And then I decided I was really tired of the boxy look so many websites have. Sherry's music kind of bursts some boundaries ... maybe her website design should as well. Also, while the white with hints of lime was a nice look, I wasn't happy - Sherry's a colourful person and that design just didn't fully encompass that.

So this was mockup number two:

Design 2

I liked some aspects of this ... but the layout just wasn't as good. The whole design was just not very coherent, although I did kind of like the border of the top banner being broken open by Sherry's music. I had a LOT of tweaking to do on those lime eighth notes ... but I was pretty sure this design was not going to cut it, so I forced myself to not waste time perfecting it.

What I did really like was the navigation bar. Several ideas suddenly popped into place there.

I wrote up an explanation of each design and sent that text plus the two designs over to Sherry, explaining positives and negatives of each design, different aspects of the layout, difficulties we might have in the coding process and so on. Then I invited Sherry to spend at least a day or two thinking about the designs and my explanations before getting back to me.

Some of the issues I pointed out included critiquing the use of gradients on the first image (the green fading into white at the top & bottom of the various boxes). I wasn't convinced of that shade of green ... and I didn't think the promo area was quite right yet. I pointed out the colour flaws in the first mockup and felt that the second one could be made MUCH less boxy (particularly since the original idea had been to disrupt boxiness) if that was a feel or look that she liked overall.

Next time I'll go into the changes we discussed ... which design was picked, tweaked ... and where the project stands now.

Posted by Red Monkey at December 19, 2008 6:43 AM | Blog | Design | | StumbleUpon Toolbar Stumble |

Free Pixel Advertisement for your blog