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.

Comments are closed.