Architects, auto designers, industrial designers, and consumer product designers have enjoyed the advantages of prototyping for decades. Web application design and development is only catching up to these other industries now because the web has traditionally been dictated to by bandwidth and processing speeds. In the early days of the web, the lack of processing power forced developers to choose functionality over usability (or form). This function-over-form mentality has gradually been flipping over as more processing power and bandwidth have become available to developers and designers alike. Instead of adding the user interface as an afterthought, web application designers are using methodologies used by designers in auto design to get to a finished product.

Below is an example at how web application rapid prototyping compares to the design of a car.

Step 1: First you sketch out the basic layouts and place the essential functional elements in their ideal locations. In the web design studio, teams photograph these basic layouts that inform more detailed sketches on a large whiteboard. The photos are shared with the broader development team and the client to ensure the basics are right.

Step 2: If you like what you see, you start to render the design in ways that bring additional value to the layout and enhances the features. We are all familiar with car concept drawings like those of Chip Foose on the TLC television show "Overhaulin".

Step 3: Once the drawings or Photoshop designs are looking like the images you had in mind, the next step is to build a prototype. Car designers use clay to do this. Architects build paper and wood models. Web designers code their designs into HTML/CSS. Customers, partners, investors, and user experts can then get a sense of how this product will live in real space. By coding the design, you allow target users to take the website or web application for a test drive.

In the Web 2.0 environment, an explosion of small web companies wishes to remain small so they can keep costs low while scaling their web-based revenue. They represent a large demographic of small teams that can not afford the luxury of architects and senior engineers and are turning to their designers for answers. This back-to-front development process is allowing these companies to speed up the delivery and reduce the cost of development.

Engineers and designers are surprisingly happy with this role reversal, embracing the logical process. The architects and senior engineers are the most expensive part of any development team. The process of writing code is also expensive because the real output can only be measured once the tool or application is functional. Bugs and mistakes require constant quality assurance, regardless of the project size. Alternatively, design is a relatively short and inexpensive process that can be measured immediately. Photoshop files or HTML wireframes are easy to change and improve upon. Screenshots also cut across language barriers and subjective opinions.

In addition, the design of the user interface as a first step allows the UI team to determine the states that particular pages or functional elements might show up as. Here's a summary of how the application development works once you have the basic wire frames.

1. Complete the full version of the application first with a focus on giving the user the most thorough and comprehensive experience possible. Be sure to build the prototype files out in a separate directory with its own subfolders and keep all links and images relative to the HTML documents – not the site root. This way, when you make a copy of the directory to create a different account, you don’t have cross-account link problems.
2. Identify the features you are going to remove from the lower subscription levels. In this case, we created a quick document listing which features were to be removed from each section as a roadmap to the removal process.
3. Instead of simply going through the HTML pages and removing features of the application that are not accessible at that level, take screen captures of the features, gray them out in Photoshop, and replace the actual features in your HTML documents with these graphics. This way, the user understands precisely what it is they are missing at a lower account level and is tempted to upgrade their account. Having a direct hyperlink from the screen capture images to an Upgrade form is also vital.
4. Create a very easy-to-use upgrade form page that changes the account type to a higher level. This will be instrumental in taking the user from the screenshot view through the upgrade process.
5. Add documentation into the prototype to inform the developer or programmer that after users are successfully upgraded to a higher account level, they should be returned to the page they originally came from with the new features intact. This way users get the direct benefit of upgrading by gaining immediate access to the features they upgraded to.

There are other advantages to designing the product before writing any code. The wireframe, or prototype, of the product can be an effective sales or fund-raising tool. A print facilities management startup Archimedia Solutions Group, based in Beverly, MA, was able to close a deal with a key client based on an HTML prototype before it had to invest in months of programming. For Archimedia's CEO, Mark DiPasquale, it was an easy way to get customer buy-in before committing to a long-term development cycle.

Design will always been a core element of good business, and an effective user interface is crucial to the success of the application. Technical planning seems to be embracing design and rapid web prototyping, and its positive impact is seen in the number of early stage businesses using this technique.