Five reasons to prototype website before development
OUR Blog
Project manager
Evan Konenko
Project manager
DESIGN
Dec 16 2014

Five reasons to prototype website before development

Website creation can be compared with house building. Before working on the website as well as before building the house there is a set of rules that must be fixed and followed to achieve the expected result.

The results of website enegineering 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

We suggest projection for all website types, web apps and mobile app (iOS and Android). At the stage of making wireframes our employee becomes a member of your team and does his best to visualize all your demands.

You may see samples of our works in our portfolio or leave request here.

SIMILAR POSTS
Oct 19 2016
This article highlights basic methods which will help you in layout and creation of adaptive emails.
Jul 18 2016
Step-by-step instructions for creating a design for project.
May 03 2016
Design research should be conducted during the very first stage in developing a new product so that insights can be applied when planning and establishing product requirements. Design research starts with primary task resolution and ends with making a working prototype.