universetoday - 12:48 am on Apr 14, 2004 (gmt 0)

This is a great way to attack the development of a website. Any developer knows that the client wants to see what the website is going to look like, but that's putting the cart before the horse. If you develop the look and feel before creating the IA, you're looking at multiple redesigns as the content gets built up, and your website needs to change to accommodate the content. Hours and hours of copy-paste, copy-paste, copy-paste.... yeesh.

Here's the process that I go through:

1. Explain the process to your client. It's going to freak them out, so you need to make sure they're comfortable with the methodology. If not, they're going to be nagging you for a day they can see what the site is going to look like, and that's wasting your time (and their money).

2. Develop the information architecture of the site. Start with the high end "chunks" of information that you want to have in your site and then drill down until you've got a really useful outline of the website. Think about your website from the visitor's point of view. Why did they type in your URL? What information are most people looking for? Put that on the homepage, or make it easily accessible. It's also important to consider how the website is going to change over time. Is the homepage going to update once a day? How will material flow around on your site to handle that?

3. Create a paper prototype. I create a mockup in Microsoft Word using the tables. Remember that this is just a way to organize the information so you and your client can test out the website to see if everything's there. Each piece of paper should contain the overall contents of a webpage. So, the homepage would be one piece, and then the sub-navigation pages are separate pieces of paper. You are the webserver and your client is the webbrowser. They say what they click on, and then you present new pieces of paper that demonstrate the different subsections of the website. You'll immediately see places where your outline is incomplete.

4. Create an HTML prototype. Make something that allows someone to fully navigate your website, but doesn't contain any "look and feel". The more basic you can make this the better. You want to be able to click every navigation link that will exist in the website. Once again, consider what you've built from the point of view of your visitor. Is this easy? Is it the fastest way to drill down to the bottom of the content? Make changes now while they're easy to do.

5. Write every single word of content that's going to exist on your website. Every button title, every section-head, every callout, all the text... everything. Sounds hard? Well, you'll need to do it eventually anyway, you might as well get it done now. Clients typically overestimate their ability to write or prepare content. Every single word.

6. Put all the content into your HTML prototype and continue testing it to make sure that the text works in your site. Edit it down to make it shorter. Give lots of people a chance to try out your "site" from the mindset of your customer. If you've got budget, so some focus group testing with real customers/visitors to see if what you've put together wows them. Once again, the point here is to make edits when they're easy to make. Once you're done with this step, you should have a fully navigable website that is utterly lacking any look and feel.

7. At this point the client is probably begging and pleading to know what their website is going to look like. Okay, now's the time to design. Mockup the site in photoshop with the usual three choices. Let the client pick the direction they like and then turn this into HTML templates. Get their approval of the templates and then implement them to build the website. You want to throw away the HTML you developed for the prototype and incorporate the content into the new templates you created. The reason you do this at the very end is so that you only have to do this once. Chances are the client is so comfortable with all other aspects of the website that they'll have nothing else to change. You won't have to go broke while you develop their site.

Hope that helps!