Website Prototypes 101

website prototype

The more websites I create and the more clients I work with, the more important I find the planning stages of web design to be. So often, clients are confused with the process of building a web site and they think the entire process is a matter of pushing a few buttons or waving a digital magic wand. How far they are from the truth! One of the largest jobs in any web project is properly evaluating and planning the layout and structure of the content and functionality of the website. Without properly formatting the information, a website is nothing more than a string of pretty graphics and imagery.

Think of a website prototype as the blueprints for a house. Would a builder walk onto a property and just start digging a foundation and framing the structure without any plans in place? Of course not. A website works the same way. Often in web design, the project is a collaboration between several individuals. There may be a designer, programmer, javascript specialist, copywriter, etc involved in the project and it helps if there is a clear, concise plan that all members of the team can have access to. A website prototype is also an excellent tool for communicating your plans to the client. It allows for all parties to have a strong understanding of the project at hand and prevents time from being wasted; which is always an issue as most clients want the project done yesterday!

Many web developers will provide paper-based wireframes or sitemaps to their client only to find that they are not truly effective alone in conveying the subtleties important to the site. It is possible to provide a general idea of the structure of the site in this manner, even to show a good example of the content that can be expected to grace the pages, but functionality? Hardly. A good website plan includes a paper as well as a HTML or online mock-up.


Paper Mock-Ups

A paper prototype should be built just after you complete the design document for the site. Drawing the site out can help you to visualize the overall package, from there you can begin to fill in the important blanks. Many layout, content, navigations and programming issues can be corrected in this early mock-up, long before they ever become a source of wasted time and resources.

When a paper mock-up is complete, you should present them to your team and get down to details from all who will be contributing their skills to the project. This can help to spark creativity, enthusiasm and energy for the website, but can also take a bit of time. Patience here will save you from possible issues later.

Make sure the team gets to view and discourse on the final version. Ask pointed questions about which part of the paper prototype really draws their attention. Ask them to locate different aspects or objects of the site. Troubleshoot as much as possible while still on paper.


Creating an Online Prototype

In the creation of the online prototype you will only want to include the formatting and overall necessities that will show the possibilities for a completed version, but there is no need to add all of the bells and whistles.

When you meet with the decision makers you will want to be sure that you do provide  enough information so that they can make well informed decisions, or provide you with desired changes. You will need to include:

  • Graphics
  • Colors
  • Working Main Page and at least Two Other Links for Click-Throughs
  • Company Information and Logos

There are even some pretty helpful sites now such as GUI Prototyping Tools that can help with drawing screen mock-ups, or Protoshare, that you can share among your team members, no matter where they are in the world.


Why Create Website Prototypes?

  • Simple. Because smart people know the benefits that doing so provides.
  • Website prototypes allow every team member including the producer, graphic designer, HTML author, server specialist, and content editor, to get fully involved in the process of structural building.
  • Web designers save time, while business owners save money, by troubleshooting issues or problematic elements of a site in its initial phases when corrections take a matter of minutes, not days.
  • Early errors can be hammered out long before they make it to the final versions of the product.
  • It is a great way to provide your own management a baseline to approve a ‘live’ model.
  • It is an ideal application that will allow user testing to help ensure the website’s success.




GUI Prototyping Tools


The Role of Design in Website Prototyping

Photo credit: WebDesigner Depot




  1. John,
    I really enjoyed your blog post on web design. As a former (mostly) web designer myself, I became aware fairly early on about the things that you have discussed and the importance of starting at the beginning. One of the course I took essential put it this way, the site is actually a visual representation of the company itself, its mission, its goals, products & services and even more now as the technology keeps skyrocketing.

    I am also a passionate advocate for the need of both designer and programmer as well as the others you have indicated. It seems that the education that is being given to web designers these days excludes and reference to the cardinal rules of good design. Of course, when I studied and was most active as a graphic designer was pre-web so there was no such thing as html coding.

    A good workable site is indeed a group project at best. In a way, it is similar to our Digital Brand Marketing Education blog ‘project’. We each bring a different perspective to this vital topic thus weaving a cohesive cloth of information to educate others about Digital-Brands-Marketing. It is very exciting and useful. Looking forward to continue to weave that cloth together.

  2. Athena Bright says:

    I agree with making paper mock-ups. They are really important in making a website prototype. Little drawings and sketches wouldn’t hurt. This works well with our artists in the company. Sometimes they could just conceptualize more with a paper and pen than already making an actual graphics for the website.

  3. Jen Belleza says:

    Creating a beta or a prototype would test how good your website is running. There are just some websites who go live and still contains lots of bugs. The layout of the website must not be the only concern. It’s not just the aesthetics that entice visitors, it’s the speed and how the website is working.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: