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.

Published October 12, 2004 · Updated September 17, 2005
Short URL: https://snook.ca/s/246

Conversation

7 Comments · RSS feed
Richard@Home said on October 13, 2004

It's all looking very cool so far - I can't wait to see how things progress :-)

Miha said on October 13, 2004

Great article and very good work till now.
One question from me. Which technologies and programming skills are you using for this project?

Jonathan Snook said on October 13, 2004

Miha: I'll be delving into technologies and programming languages probably next week or the week after. Next up in the series will be database design. As well, I'll probably go into some further explanation of the design choices made in the HTML prototype.

At this very moment, I haven't made a decision which language and platform to develop in.

Jim said on October 16, 2004

I've found that the prototype is an excellent way to communicate with the client what it is you're going to build for them, and to get their input on how they think it could be better. People will not read functional specifications, but they'll interact with a prototype.

Our team builds the prototype in such a way that we can start building the app directly from the prototype, which we've tweaked after several interactive dog-and-pony shows with the client.

Harald said on January 08, 2005

If your doing any kind of web application prototyping you should look at Snapp MX (www.snappmx.com). Snapp MX gives you the ability to create complete web applications through your web browser.

John said on January 31, 2005

Here is an interesting excercise in usability : Task Management

Europe72 said on August 25, 2008

Regarding prototyping, I put together a tool that may prove useful for some of the folks interested in the topic of this post. The tool is called spinetail and is released under a BSD license at google code. Spinetail is a rapid web application prototyping tool written in JavaScript. It is not a complete framework, but rather a tool to help web developers bring a static concept into a useful, living breathing format before deciding on technologies, and without configuring a development environment. Runs entirely client side, and is easily distributable.

More info here: Spinetail

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.