House Made of Web (part dos)
December 18, 2008

While I said I was done with the back story last time I lied. But this will be short. Wanna see an UGLY 1998 website: here's my old syllabus. Key word - OLD. Web.archive.org has loads of old gems. Scary stuff.

At any rate, I said I would discuss how a website is conceived and constructed today. This is obviously my process, although I'll also be talking about how other professionals work as well.

Generally, the conception starts out as the easy part. It gets a little more complex, but of course, they all start with something like: I want a site where I can show off my talents, career, thoughts, hobbies, whatever. I want to tell people something or I want to sell something. (Sometimes it's selling people what you want to say!)

I'll use one example to walk us through this process. I happen to go to church with an extremely talented musician, Sherry K. She recently decided that she wanted to completely revamp her online look. She wants a website similar to what she has in terms of content, but she wants something that will really reflect her personality and style of music. We sat down one day and discussed her needs in terms of what the website should be able to do, what her goals were for the site ... and what her level of computer and website skills were.

In Sherry's case, one of her goals is to be able to update the site herself - and not just in a "content management" kind of way, but she wants to be able to understand at least some HTML and CSS (the most common and basic "languages" that websites are written in) herself so she can apply that to MySpace as well as her website. Like many people who want to advertise themselves, she doesn't want to have to rely on others to fix every little thing or make every tiny adjustment.

Most graphic designers and web designers have a "creative brief" they use to understand the creative project - be it a website or a company logo. David Airey has a short form he uses on his site, which you can read here. A portion of it gives the designer the feel for the customer/company requesting the work - who their competitors are, what their company is about, project timeframe, colours, icons ... various little details that the customer might not have thought about beforehand.

In my case, Sherry had some distinct ideas about marketing and SEO (search engine optimization) ... and she knew a few sites that she liked their marketing techniques - but she hadn't given a lot of thought to the aesthetic component of the site. I took a couple of pages of notes during our discussion - and she sent me another few pages of marketing notes that would affect the design process in some way or another.

My first goal was to organize all of these notes. Sounds like studying for a test, doesn't it? A great deal of web design revolves around information systems. How do you organize your information to meet a certain goal?

Sherry has two major goals: sell her music and get people to book her for gigs.

After looking through the notes, I listened to her music again, looked over the design of her CDs and her MySpace, and studied the language of her current site and some of her email newsletters - all to gain a mental picture of who Sherry K the performer was.

Now, depending on the complexity of the site, a designer can do one of two things - build a wireframe or actually begin both the organizational building and the aesthetic design all at the same time.

A wireframe is essentially just a map of where different elements of the site will be and how everything fits together. On the e-commerce sites I've worked on, this was an absolutely crucial element of the design process. Different people in the company had distinct ideas of what information should be seen "above the fold" on an 800x600 sized monitor - although many sites now design as if 1024x768 is the smallest (and most common) size monitor. On an e-commece site you want the logo and tagline, search feature, the most important shopping buttons, the cart button and at least one "specials" or "ad" area to show within the top of the page so they're seen first.

When you have several people who need to approve the design, it's best to figure out this information puzzle before adding the complication of aesthetics to the issue. So a wireframe generally is a series of boxes - here's the area for our promotion, and it's going to be this size. Another box shows where the navigation will be, another the exact space for the logo and tag line. The barest of wireframes won't include colours or fuss over font - it's literally just a jigsaw puzzle map.

Once that wireframe has been approved (likely things have moved around and changed sizes during the approval process), then comes the thematic design.

Sherry's site was simpler than an e-commerce site and I had some pretty good ideas from her excellent organizational notes where things were going to need to go. So, I decided to work both the wireframe and the design all at once. I latched on to the line she uses in all of her newsletters and emails: Sherry K: piano with spirit, piano with soul, piano with a hint of lime and salt.

I had a pretty good idea what I wanted to do ...

... and I'll get into that next time.

Posted by Red Monkey at December 18, 2008 7:00 AM | Blog | Design | | StumbleUpon Toolbar Stumble |

Free Pixel Advertisement for your blog