How We Do It And What It’s For
Prototyping all screens is an excellent way to reduce the number of errors in the UI at every development stage. We create detailed wireframes that are helpful for different use cases.
A clickable black and white schematic prototype real users can test. It has all the dialogs, notifications and states.
Properly create prototype helps to
- Facilitate the project specifications and requirements.
- Check all the user-flows and make sure that all information on its place
- Reduce the time and costs needed for polishing the UI.
- Boost user involvement and improve user experience as well as test ideas
- Improve communications between stakeholders, designers and developers
What is prototyping in design
We create prototypes which are, in fact, black and white schematic pictures of pages joint between each other with links. At this stage we don’t convert them into HTML/CSS code and just use graphic images to show “blueprints” of the future interface.
Close collaboration with the client
First of all, we want to stress that we create prototypes in very close collaboration with the client: we gather necessary information, we ask many questions and we listen to their ideas. And of course, we discuss and explain all key design decisions during the creation.
First screens and the some complex parts of the system we present during the screen sharing sessions, so we can explain our design decisions and answer the client’s questions. And our experience says that the client usually has a lot of them.
The rest of the screen we send to the client as soon as they are ready and discuss suggestions and changes inline, using prototyping tools.
How we build prototypes
So, we can proceed with prototyping immediately after we have got an approved Information Architecture (link). And the very first task is creating the most complicated but crucial things: navigation and general layout.
For the start we take the most complicated screen — usually it’s a dashboard or a home screen — and produce the first draft of the new interface. Despite the fact that we make this draft well considered and put most details in the right place, this is a platform for further discussions. We work with a client together to make this wireframe as good as possible considering all ideas, goals and restrictions.
After we polish it enough, we create the rest of the screens using the Information Architecture and the previously approved layout. And again, all the screens are shown to the client as soon as they are ready and all of them have to be approved by the client.
At the end, the client gets a clickable and fully polished prototype which was created with their active participation.
Why is prototyping important
Prototyping of complicated interfaces is the best way to build and check a new interface with minimum efforts: create a layout and a navigation, place information on itc place and plan functionality.
In other words, you can see how your product will work before it actually works. So, the biggest advantage — any changes at this stage take significantly less effort and time than at the visual design or front-end development stages. And you have a chance to make sure that all user-flows work well and everything you think should be considered in its place.
How else you can use a prototype
Black and white prototypes can be used not only by visual designers for creating a final UI design.You can show it to potential investors, test it with potential users, after all, it represents how functionality has to work and this is very helpful for the back-end development team.
When you would use a prototype
We recommend to use a prototype when your system involves many interactions and user-flows. The only way to consider all details, all situations that may appear during the interactions and to avoid whitespots, is to create a prototype. Otherwise, you have to catch many errors during the rest of development when fixing such a type of bugs may cost you an enormous amount of time and effort.
But sometimes you can miss this stage and start from visual design, for example, when you have a pretty standard e-commerce project or a marketing website.