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