Prototyping - look before you leap
Creating prototypes allows you to see what your final website or web-based application will look like – before you build it. It’s especially important when designing web applications and software. By working out (in various levels of detail) the processes and interactions of the system you can eliminate problems or oversights before you’ve gone too far. This clarifies how the system will work before a single line of code is written. The benefits of prototyping are:
- Project owners see features and functionality mocked up This means (inevitable) changes can be made early on in the project. This saves time and money and reduces the amount of bugs and errors that are built into the system because of scope creep or "kitchen sink syndrome".
- Developers get an easy to interpret walkthrough of the system before developing it. This speeds development because developers don't waste time misinterpreting the project owners ideas.
Prototypes can consist of almost anything. They can be paper prototypes, wireframe diagrams or 'functional' HTML prototypes that look and feel how the final application will work – allowing you to ‘walkthrough’ the system before you build it.
We offer a several prototyping services.
Paper Prototyping
Paper prototypes are a cost-effective way to prototype. With paper prototyping, interface elements such as the layout of menus, windows, dialogues and icons can be sketched on paper or created in advance using card. This may sound like Blue Peter, but it’s fast and actually fun.
Each ‘screen’ is represented on something resembling an A4 sheet of paper. During the walkthrough, menus are accessed or options selected and each new screen or action is represented by a new sheet.
Wireframe Prototyping
Wireframe prototypes are similar to paper prototypes, with the important exception that wireframe prototypes can be linked together. A wireframe diagram is drawn using an application like Visio or Inspiration (you can see what a wireframe looks like here). We link a series of these diagrams together to give you a walkthrough of the prototype before it is built.
Wireframe prototypes certainly require less imagination than paper prototypes. Wireframe walkthroughs can be built prior to any visual design. It’s not quite as fast as paper prototyping but many of our customers find it easier to relate to something on screen that can be clicked on. When you combine visual design and wireframe prototypes, you can create HTML prototypes.
HTML Prototypes
HTML prototypes are the most sophisticated form of prototype. A HTML prototype can be indistinguishable from the final application. We use various kinds of JavaScript trickery to simulate the interactive feel of web based applications.
Many of our customers use detailed HTML prototypes as a final blueprint for developers (in tandem with Use Case Documentation). It makes development far easier when a programmer or developer can see how the application will work without having to try and interpret a use case document.
Check out our case study for Reach Services to see how we helped prototype the Public Service Broker.
Use Case Design and Documentation
If you are still at the drawing board (or contemplating your plan for world domination) you may be ready to document how your application is going to actually work. Open Interface can help focus your thoughts on the interaction processes that would ensure optimal usability and result in a positive user experience.
We know how much developers hate to read, so our use case documentation is thorough, clear, concise and, most importantly, complete: every interaction avenue (essentially every path the user can go down) is explored.