FIVE REASONS TO PROTOTYPE WEBSITE BEFORE DEVELOPMENT

The results of website engineering are prototypes with different level of approximation. Symbolically we can distinguish 3 groups: sketch, wireframe and prototype.

Sketch

Website projection starts with sketch, that generally represents wordy description. Sketch visualization is done without real content and very approximately.

The task of the sketch is to represent main blocks: where the image, text and main menu should be. To create sketch pencil and paper or simple graphic editor will be enough.

Wireframe

The next level is wireframe. Wireframe is much closer to the end version of the website and is a visualization of logical and content parts of the website. In other words, we create web pages, place images, texts, links, popups and other elements of the website, connect them and show visually future result.

There is no artistic appearance on purpose on this stage. The main task of wireframe is to demonstrate website architecture, to fix logics and content blocks. Based on the wireframe a developer gives estimation for the project. As a rule to create wireframes we use WireframeSketcher, that lets us to create dynamic wireframes and simulate page navigation.

Prototype

Prototype is a dynamic front-end, that demonstrates complete appearance and work of the webapp. As a rule prototypes are done for big projects where time for closed testing and usability analysis is taken into account.

To create prototypes we use webflow.com or make webapp with simplified logics using Django, if there is a necessity to show work with admin panel.

 

Why is it better to make wireframes before development?

 

1. REQUIREMENTS AND PRIORITIES SPECIFICATION​

Website engineering is a perfect way of visualization of thousands words about the project in several images. At the stage of visualization it becomes clear where we can optimize logics or vise versa weak spots can be found.

If project development presupposes several iterations, wireframe is a must.

2. GUARANTEE OF EXPECTED RESULT ACHIEVEMENT

Wireframe is an amazing and transparent way of task fixing and tangible result template. Due to a wireframe it is easier to understand consequences of any element change in web application structure.

Wireframe minimizes differences in text perception and chances that result will differ from client’s expectation.

3. TIME ECONOMY

Wireframes are produced taking into account future content. For example, 12 points in main menu and 16 ways of sorting would look really scary. Right at the stage of visualization the sections’ architecture and inner hierarchу can be changed.

Since wireframing is a fast process, changes can be done quickly. While creating wireframes we work not only with basic elements, but we create assets - design components, that can be edited for all pages simultaneously.

4. BUDGET OPTIMIZATION

This point follow from the previous one. Just imagine how many hours can be saved at this stage: each change will take several hours of work of a developer and while planning it may take several minutes.

Quite often for fixed price projects engineering projection is not taken into account. But as a result economy at this stage may lead to the significant budget enlargement and missed deadlines.

5. EFFECTIVE DEVELOPMENT CONTROL

Wireframe is a good RoadMap for planning works and executors. At first you may think that a client pays for developer’s convenience and this has no influence on the project. But competent planning and task assignment may decrease twice time for development, that is definitely a positive factor for a client.

Testing and reporting become much easier, and what is really important time for these actions decreases as well.

What we suggest?