Image for post
Image for post
Image by Placeit.net

Clarifying the transition 

This short post is a follow-up to the “Three stages of making wireframes”. In short, it’s about splitting prototyping process into three stages: estimates and architecture, functionality, design draft.

After getting some feedback I decided to clarify the difference between design draft and pixel-perfect mockups. Here’s an example from another application design.
Stage 1 is missing because it’s about architecture, estimates and user flows, so it stands outside of detailed design process.
Stage 2 (Design draft) is optional about using colors, sometimes this process transfers to the stage of final mockups.

Image for post
Image for post
Transition from wireframes to design
Image for post
Image for post
Detailed look at design draft: improving shapes to look like UI elements, adding color, localization


Image for post
Image for post

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. …

About

Alexander Mescheryakov

product designer and developer — http://octobear.ru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store