Three stages of making wireframes
Your prototype needs a workflow.
Everyone loves wireframes. Everyone realizes they give us speed and freedom while planning a project development. But it’s not about just create and send wireframes to your team and client. Creating detailed wireframes for every screen takes time, especially when you try to solve usability issues from the start. Also, involving new teammate into the process takes time to explain everything needed to know.
So we broke this process down to three parts.
As we all used to develop following MVC principles and most if not all apps require an API to work with, I’ll give examples in that terms at every stage.
drafts to define
app sections, screens
and functionality
1. Estimates and app architecture draft.
Client needs approximate estimates to plan a budget. Developers need estimates to plan their activity through current and upcoming projects.
We quickly draw all screens of current version and connect them with lines to mark basic interactions and behaviour. This first step allows to understand how large an app will be. It’s also helps with defining data models, base controllers and API requirements.
layouts and element sets
2. Product functionality.
Second stage is about more detailed list of screens with certain sets of elements. It’s time to review user flows, cut unnecessary elements and functionality, design controllers for that screens and flows. Developers start working according to wireframes. At this step we can define routes, controllers and base layouts.
3. Usability and design draft.
Everyone loves pixel-perfect mockups, but there’s a huge issues with polished designs: they take too much time you can afford in the beginning. So the third stage is about refining usability and getting closer to how an app will look. While iterating over data models, controllers and layouts we can break screens into views and partials.
Of course every stage needs iterations, questions asked and improvements made within.
As a result of this wireframing process we get clear estimates and visual documentation, directions to work in and every teammate comprehending how an app will work and how components interact between each other. Huge team performance growth.
