Design prototype for website
A prototype is a simulation or a trial version of the final product that is used for testing before it is launched.
The purpose of prototyping is to test products and ideas before investing a significant amount of money in them and a lot of time developing them.
The development of prototypes helps to determine the issues of usability before launching the project, as well as to detect problems or fields that need to be modified. Once your project is in the hands of real users, you will be able to evaluate what product they need, and then modify your prototype.
Prototypes have four main qualities:
- Presentation. The prototype form, for example, paper, mobile, HTML.
- Accuracy. The level of detalization of the prototype, its realism.
- Interactivity. Prototypes can be fully functional, partially functional or just for viewing.
- Development. Prototype life cycle. Some of them are quickly created, tested and thrown out, and replaced by more advanced versions; others can be created, then be modified, becoming a final product.
Why did designers start using design prototype for mobile app?
In developing a site, prototyping is the stage that comes after research and followed by designing.
In the KATASIS studio, we started using prototypes, because our design and prototype company realized that all of the customer's comments were not connected with the fact that they did not like the elements color or size. As a rule, remarks are related to the fact, that some essence was forgotten: phone, catalog filter, block with news, etc. Basically, most comments concerned functionality. Therefore, in order to spare time on redrawing, our prototype design agency introduced an intermediate stage — prototyping.
Among the main reasons for using prototyping before creating a prototype model, you can highlight the following:
- The prototype gives the customer a complete idea of how the final version of the site will look;
- Prototyping can rationalize the design process, concentrates on the important elements of the interface;
- A sketch of a site is an essential part, if the client does not completely understand what exactly he expects from the site, what functions each page will carry out. Detailed planning at the stage of prototyping makes it possible to avoid global adjustments in the final version of layout;
- During the prototyping stage it is possible to identify unnecessary elements, which should be eliminated, or vice versa — to add additional details to the interface;
- This process significantly reduces the amount of work for the designer on developing the project, and therefore saves the customer's money;
- Having a prototype on their hands, the designer and the customer have a clearer view of the final result;
- Developing a prototype requires customer’s engagement, increases work productivity, compliance of the process.
Development stages of a design prototype from KATASIS studio
The process of creating a prototype itself is quite simple. For making it less complicated, it is assumingly divided into three components:
- Creation — the easiest sketch, based on the customer's wishes. The basic principles of interface design and usability are used at this stage;
- Evaluation — discussion with the client as to how precisely we understood his requirements and wishes;
- Modification — correction of areas with issues of the sketch or a complete change of the layout.
The primary prototype can consist of only general blocks with minimal detailization. In the development process, it will "accumulate" additional elements, slowly approaching the final layout version.
The speed of this process plays an important role — the time between integrations needs to be minimized. In general, the development and modification of a prototype can take from a few minutes (for example, for sketches during the negotiation process about the order with the client) up to a few days. In any case, the time spent on prototyping will help you work faster and more efficient.
The main types of prototypes
You can create a sketch of a website in different ways. One of the easiest and fastest prototypes — drawn by hand. Despite the development of technology, paper prototypes don’t lose its popularity among designers. The remarkable advantage of this type is speed. You can create a sketch of the model during the discussion stage, making corrections according to the customer’s wishes. it gives an opportunity to understand the client better, to determine the objectives of the project.
Paper prototypingrefers to static models, which have different content of static images. In addition to hand-drawn concepts, static prototypes include sketches, created in graphic editors, painted on a tablet or a marker board. They display solely the design of the website.
Unlike static, interactive prototypesrepresent the design, where all components of the resource come to interaction. These are the simplified, but highly detailed layouts of all the website pages. At the same time all the elements are clickable. You can go from page to page, expand menu, etc. The interactive prototype helps to understand better how the project works, to implement the project design solutions, to identify the neccessary of their implementation in the finalized layout.
Design prototype app: prototype development tools
There are some popular prototype tools listed below:
- Omnigraffle (application for OSX) — creates graphical schemes, connecting individual elements with lines. Allows you to build charts, contains modelling elements, to export and import ready-made files.
- ConceptDrawPro (Windows application) is a graphical application that is used to create business projects, prototypes and charts, project documents.
- Pidoco (online application) — software that allows you to create prototypes of websites in one click. A simple interface makes working with Pidoco simple and understandable, and the result can be tested on any mobile device.
- Mockingbird (online application) — helps to create interactive models of the future website or software in real time. You can easily link pages together, look at the preliminary results, make corrections and adjustments.
- ProtoShare (online application) — a convenient tool, that allows you to create dynamic images, interactive prototypes. The advantage of the application is the possibility of a group work on the project, to view the results and leave the comments.