The Advantages of Website Prototyping

Published by frankbardon on Tagged Web Development, Productivity, Tips and Tricks

You have just finished what you consider the best design you could possibly create given the challenges and problems of your current project. Its scope and feature set is more than adequate and it even seems that you’d have a great time developing it. You triumphantly present this and several less competent (but still OK) concepts when it happens… The client says that your favorite design may be “too complex” for their target audience. They choose your least favorite design because of its simplicity. Little do they know that it has the same site navigation and procedure. If only you could make them understand…

For many years I developed flat comps of several of the main website pages. I always spent more time than necessary explaining how each little detail would work. Most of the time, I would have to direct them to previous work to ease their minds on how a particular piece would work. Why was I doing this? Wouldn’t it make more sense to just code it real fast and show them? Then their minds would be at ease, and the work for that functionality would already be done! Not to mention, if they didn’t like it, I just dodged one of those last minute wrenches that clients love to throw at you on launch day.

Enter Website Prototyping

Website prototyping is the act of creating several pages (probably the main navigation pages) to make a semi-functional version of your website. This prototype is created with just the HTML and CSS code that your website will be ultimately be built with.

Now I understand completely that this is more work on the front end. However, there are many, many advantages to having a functional preview both for you and your client.

  • A clickable, functional concept will be better understood by the client. If you’ve developed more than 2 websites for any client you’ll know that they are usually unhappy with the progress on any project until the very end. It’s hard for them to understand the process, and as geeks, many of us have a hard time explaining it. Just give them something they can click. They will have a tangible product, so they will feel they are getting their money’s worth right off the bat.
  • When the front end is designed first, the back end programming becomes 10x easier. This workflow provides a clean separation of HTML, CSS and business code, it promotes a more easily managed code base as well.
  • You already have the front end presentation code done when you enter the programming phase of your site! Most of your CSS should be in place, and your HTML templates will already be done. Additionally, if you took the time to bug test the preview for all browsers you should run into very little cross browser bugs.

Flat comps are for design direction only

By no means did I get rid of flat design comps all together. I use them in every project. They are still my preliminary first phase. The client is shown several design directions done up in photoshop. Of course, I have to explain to them that they are for direction only, and are by no means an exact representation of the final product. Basically, they show them the color scheme, basic layout, logo/navigation placement and art direction.

It’s worked for me

I’m sure many of you are already working this way. It may seem blatantly obvious to everyone, but if I made the mistake then I’m sure other people are as well. I have yet to find a disadvantage using this process. It may not be for everyone. In my experience with it so far, it has resulted in happier clients and a much happier me.

May 11th, 2007



Leave a Comment

You must be logged in to post a comment.