Web and mobile development is a complex process which requires a certain amount of preparation. Building prototypes is definitely considered to be such preparation. Let’s see why it is so and how to organize prototyping best.

Prototypes help to understand the core of the project and walk in the right direction from the very start. Project estimate and deadline are often based on prototypes that clarify many initial project questions. We all know how it is important to be mutually agreed on requirements and expectations.

I prefer Axure and Justinmind prototyping tools. For websites I use the first one. Justinmind is my choice for mobile prototypes.

Why do I use these exact apps? As for me, they are perfect prototype builders to illustrate the required structure. 

So how is the whole process organized?

      Studying requirements and clarifying details

I usually create a list of questions after reviewing requirements and discussing a project with the team. I mark missing parts and define some kind of imaginary frame of what to do next.

      Building a list of sections

Having specified all the details I start working on the prototype structure: creating sections (pages) and putting them in groups by folders.  

      First sketches

Having discussed the order priority of pages I settle down to creating a grid of elements (inputs, dropdowns, blocks etc.) that I need for a certain page. Then I build the structure.

      Designing a general style for prototypes

The prototype should look as if it’s ready to be handed to a designer. So knowing the main colour theme I use these styles in the prototype.

It’s important to remember that a prototype is not a final design yet but it more than just a mere sketch. So I can neglect some details at this stage.

      First feedback

Having created some pages I wait for client’s feedback to make necessary changes if required.  

      Additional questions to the client

As soon as the style and the idea of future project are approved I can design other pages and sections.

      Creating other pages. Intermediate feedback

      Adding photos, icons, content, etc.

       Creating complex dynamic forms (dropdown menu, sliders, drag drop, etc.)

Now we can start creating detailed interactive forms.

Why not to start creating them earlier? I select this approach to save time. There can be numerous changes during prototype development so it is pointless to create detailed blocks in early stages. Sometimes I can even add some detailed description beside the element showing how it should work instead of creating it. 

        Prototype final version

This step contains the full review of all pages and correcting all inaccuracies.

Conclusion

IT industry is growing fast and there appear a lot of new techniques and tendencies. Nevertheless, I’m sure that prototyping will always be required.