The Importance of Mockups
One of my roles at Decypher is to develop mockups for new applications, or for updates to existing applications. In this blog post, I’ll talk a bit about what a mockup is, why they are important and how they fit into the project cycle.
Mockup vs. Wireframe vs. Prototype
These three terms often get used interchangeably, but each represents a different stage in the development process.
The first stage is a wireframe, which is a low fidelity, early sketch of an application. A wireframe is meant to give an early representation of the design (not functionality) of an application so that edits can be made easily before a higher fidelity design is built.
Mockups are the second step in the design process and are meant to depict a design that is as close as possible to the final product, while still being a static image. While the wireframe is only meant to show content placement and the basic flow, the mockup goes a level deeper and shows color scheme, typography, icons, spacing, and more.
Prototypes are the final stage in the design process and are used to test functionality. Prototypes allow the user to interact with the application, so last minute tweaks can be made before development begins. Designmodo created this table to easily sum up the three elements and wrote more about this topic in this blog post.
Why Mockups Matter
The main pupose of a mockup is to show as close to a final draft as possible so the client can approve the design before any development actually starts. This saves the client money because project managers are able to more accurately estimate a development timeline, with the back and forth of the design process already out of the way.
I use Adobe XD to create these high fidelity mockups, which can also be set up as interactive prototypes with functional items like buttons and tabs. This allows us to combine a mockup and a prototype, giving the client a more complete picture of the design and functionality of the application.
Decypher’s Design Cycle
At Decypher, we utilize mockups to speed up the development process, allowing applications to go live faster and look exactly how clients expect it to look.
A typical design cycle looks something like this:
1. The initial meeting for requirements gathering
2. Low fidelity sketch (sometimes on a napkin)
3. Initial high fidelity mockup
4. Client feedback
5. Changes to mockup and prototype creation
6. The final draft is approved
7. Hand over to developers
In conclusion, mockups play a key role in our development process at Decypher. Mockups allow us to show polished, final version of an application (with some functionality included) to the client before development begins, streamlining our development process and increasing efficiency.
– Adam Carbeck