Press "Enter" to skip to content

The 4 steps of prototype design


It’s basically just a raw freehand drawing on a piece of paper, that gives you a low-fidelity representation of your app. It is the fastest way to get your idea ready for brainstorming. Even a simple sketch can describe your idea better than words. Generate ideas, change details, visualize what you have on your mind; it’s all up to your imagination. This step is essential for getting to the wireframe stage.

My favourite tool to do it: Pen and A Selected List of Templates 


The flow diagram was then expanded to show data placement and the available actions for users, as pictured below. The flow diagram evolved through an iterative process with the team and stakeholders. As features were added or removed, the flow diagram was updated to reflect the current user stories, ensuring that no important functionality was left out.

Additional details for the flow diagram




A wireframe is equivalent to the skeleton or simple structure of your website/app. Each one is used to describe the functionality of a product as well as relations between views (what will happen when you click a certain button). The decisions on what (content/features) and where to put on the website or app are usually made during this stage. This step does not cover the product’s design.

My favourite tool to do it: Balsamiq

Based on the flow diagrams, each section of the UI had multiple wireframes created for it. The wireframe was drawn on paper, with some pieces on sticky notes. The team tested each variation against user stories, moving the pieces around to decide what worked best. The following figure illustrates one of the wireframes.

Early wireframe


Wireframes can also be used to illustrate animations and interesting transition effects. In Mileage Stats the vehicle tiles animate into position when transitioning between the Dashboard and Details layouts. The vehicle tiles also expand and collapse based on the selected vehicle, and allow you to change the ordering of your vehicles. Using the wireframes allowed the team to easily iterate on the details of these animations. The following figure is a hand-drawn wireframe of a vehicle tile and its associated animations.

Early animation wireframe



At Brainhub, we never start building an app before mockups are completed. With this representation, you can start to work on the development process and the developer can make your mockups a reality. Any mockup will provide a medium-fidelity representation. Add colours, fonts, text (Lorem ipsum), images, logos and anything else that will shape your wireframe. Your result is a static map of the app. Think about User Interface Practices while shaping this step. If you don’t have the ability to move your wireframes to the next stage, just outsource it.

My favourite tool to do it: Sketch


Prototypes offer a high-fidelity representation of your app. It’s like a mockup enriched with UX pieces, interactions, animation and anything else you’d like to experience when clicking buttons. This step is not always needed to create an app. If you’re not a developer, I highly recommend having a prototype to pitch your idea to friends, family and potential investors. The only thing that missing is functionality. It can give you a feeling of using a real app, but they are only images connected with each other.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *