Building a Web Application: Prototyping

This page is outdated and some links no longer work. Sorry.

In creating your prototype, you gain insight on what the final product will actually look like. You can eliminate problems before you’ve gotten too deep into the programming to turn back or need to implement some kludgy fix.

In developing my application, there are three components to the prototype development that I’ll be using:

• Visual Design
• HTML Prototype
• Usability Testing

Visual Design

The visual design stage is where the fun is. You establish your layout, group elements together and really get a sense for how your application is going to work. I use a graphic design application such as Photoshop or Fireworks. You’ll be able to easily add new elements, resize, rotate and whatever you need to lay things out.

Take one of the pages from your application flow and start putting in all the elements that belong on the page. Don’t worry about where they need to be at first. Just make sure you don’t miss anything that needs to be on the page. Once everything is on the page, start grouping related elements together.

Give greater prominence to elements or tasks that are more important and minimize or hide elements that are less important. Prominence can be expressed in various ways such as size, colour, or positioning. More important elements could be larger and higher on the page whereas less important elements would be smaller and using more muted colours.

Take a look at the HTML prototype for an edit page of the CMS. Visually, elements have been divided into sections. The most prominent item, the task at hand, is in a larger font and appears at the top of the white box. Less relevant information to the task at hand appears outside the white box.

37signals (who developed Basecamp) has a great article that goes into some detail on the use of patterns in web design. It’s a more structured process than what I go through. In the end, it’s best to map things out as deeply as you need to get a greater understanding of the application and how it will best address the needs of your users.

HTML Prototype

Once you’ve developed the visual design for the application, it’s time to build the HTML prototype. Why not just jump into the coding at this point? An HTML implementation of your design will help point out possible problems with your interface design. For example, what happens when users resize their font or the size of their browser window? How will the design look across multiple browsers? You may find something that doesn’t quite work right and you’ll have to go back to the design stage to redo certain elements.

Usability Testing

On any sized project, it’s a good idea to do usability testing. It could be showing it to your co-worker, your team, your spouse or your friend. It doesn’t have to be a formal exercise with user groups and independent consultants. It’s also a good idea to show the prototype to the type of person you expect to use your application or people who have used applications like yours. Their input can be invaluable and can help determine if your design will work or not.

At what stage should you do usability testing? Always! Do it during the visual design, during the HTML prototyping and even during development. The feedback you receive can be indispensable.

Where am I now?

You can see the feature list that I talked about in the last article, some initial screenshots that I developed as part of my visual design stage and the current version of HTML prototypes.

You'll notice that the design changed from the visual design stage and the HTML prototype. There are two reasons for this. The first, a friend developed the logo for the application and therefore needed to integrate the new logo into the design. The second reason is from my informal usability process. The interface seemed overloaded with information. So, items were rearranged, simplified, or removed.

I have a ways to go yet on the prototyping phase of the application but I will continue to post on my progress and hopefully get your input as I move forward.

Check out the latest changes on the design and the program flow. Up next is Database Design.