Expand your prototyping knowledge

What are web prototypes good for?

Wireframes can be a good way to show how your website or mobile app is going to look. Sitemaps are used to show the navigation structure. But neither of these show how a website works.

The main focus of a prototype is not the appearance of the website, but the content, structure and functionality. Back in the ’90s, HTML didn’t allow for much more than visual presentation of text and static images with links. Nowadays, there are plenty of sites that work as software: interacting, adapting behavior and content according to user’s responses. This makes the functional part of a website the most important thing to be focused on, discussed and planned.

So, before building complex software or a website that’s more complicated than a printed leaflet, you should build a prototype model of it to understand how it’s going to work, and plan how you’re going to build it.

  • Structure: essentially naming and organizing elements of the pages, such as links and categories. It also involves the basic sizes and shapes of objects, but not in a way that hinders designers’ work. The low fidelity wireframes will suffice for this part of the project.

Categorization is normally done with card sorting and text files, but as projects get more and more complex, it’s becoming even more necessary to simulate them.

  • Content: great to have clients approve it before seeing the visuals. Many people feel overwhelmed by logos, colors and shapes, and prefer to think about these things when they analyze the texts, the information and the story being told. If you present a black and white prototype, it’s easier to get everyone focused on what’s written, and after that, move on to the design.
  • Functionality: cannot be visualized with old paper wireframes, or plain mockups. With rich interaction, you can simulate clicks, filling forms, voting, erroneous passwords, and other common experiences a user might have with real websites. In this way, it’s possible to prevent mistakes, such as asking for too much information in your login forms, or users being unable to click on determined objects when they want to.

It’s important to discuss and decide on the technical functions before you start coding, because most of software bugs come from changing plans during the coding stage. It also helps to reduce production time, as the rewriting normally takes longer than the actual coding!

Xavier Renom

About the Author

How to define, validate and review applications before starting to code are his thing. He is interested in everything related to web, mobile and desktop apps and how to prototype and simulate them before development starts. After hours he’s flexing his math muscles.


  1. Chris Butler Says :

    October 8, 2009 at 1:54 pm

    Hi Alex,

    Thanks for linking to our video! We’ve been prototyping using the grayscreen method since 2000 and it is still the most critical step in our development process.

    I wrote a blog post (http://www.newfangled.com/newfangleds_iterative_website_p…) back in April in response to watching a video of David Kelly, founder and CEO of IDEO Product Development, who said about prototyping that “You don’t find anything out until you start showing it to people.” One point that I emphasized was how important capturing feedback is. We have a commenting system built in to our prototyping tool that allows clients, project managers, designers and developers to contribute direction and feedback in context on a page by page basis. This is often essential for any one of our team members being able to properly interpret the prototype.

    You might also be interested in this article about prototyping from Boxes and Arrows (I mentioned the above blog post in my comment there, too), titled Integrating Prototyping into Your Design Process (http://boxesandarrows.com/view/integrating).

    All the best,

    Chris Butler, Vice President, Newfangled

    • alex

      October 8, 2009 at 3:58 pm

      Hello, Chris.

      I’m surely want to check out these videos you mentioned. I don’t know if it’s wordpress here sabotaging, but the links are broken. Can you send them again?



    • alex

      October 9, 2009 at 9:24 am

      Thanks, Chris.