How to create a GUI prototype from scratch.

WHAT ARE GUI PROTOTYPES?

“A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. It is a term used in a variety of contexts, including semantics, design, electronics, and software programming. A prototype is generally used to evaluate a new design to enhance precision by system analysts and users. Prototyping serves to provide specifications for a real, working system rather than a theoretical one.” (Source: Wikipedia)

In software development, a prototype is a rudimentary working model of a product or information system, usually built for demonstration purposes or as part of the development process. In the systems development life cycle (SDLC) Prototyping Model, a basic version of the system is built, tested, and then reworked as necessary until an acceptable prototype is finally achieved from which the complete system or product can now be developed.

HOW TO BUILD GUI PROTOTYPES?

First and foremost there is no right or wrong. Everybody prototypes differently. Yet there are some considerations you might want to take into account when starting off with your first prototype: Think about the most important aspects you want to illustrate and make sure to include enough information. Think about the most important user interface elements: header, footer, sidebar, content.

Once you have that think about additional elements your specific projects will feature: search bars, navigation, images, tabs, interactive elements. The level of detail is dependent on the project and the purpose of the prototype. Do you need your prototype as a guiding document for your own reference then you probably don’t need to dive into details. If you have a whole team working on a project and you need the prototype as a reference and for communicating with your team (e.g. set up further specifications for designers or developers) you might want to prototype in a higher-fidelity and more formal. Also bear in mind that you might be presenting to your client.

WHY SHOULD I CREATE GUI PROTOTYPES?

Unless you are looking at a very minimal and simple project prototypes can help you clarify what exactly needs to be on the different pages of your website.

Clarify Use prototypes to get a clear picture of what information will be needed on each page before design.

Focus Spend time and really focus on the very layout/content of a website.

Understand Have a clear look at how the site will react to various visitors without the clutter of color or design elements.

Adjust Easily adjust and easy to produce allowing the planning process to move along smoothly and efficiently.

Specify Give designers and developers a clear set of visual specifications.

Connect Get a client deeply involved in the planning process.

Safeguard Set fallback points to avoid scope creeps and rework.

Iterate Set up feedback loops with your team and client.

Benefit Save time, money and hassles by clarifying important development steps upfront.

WHEN SHOULD I CREATE GUI PROTOTYPES?

It’s never too late to start to prototype but usually prototypes should be used at the beginning of every website design or redesign process.

Prototypes help to focus on the most important questions upfront:

• What is the site supposed to accomplish?
• What is the site structure going to look like?
• What navigation elements do we need?
• What elements should be on which page?