After wireframes, the next stage in the design process is typically the creation of mockups.
Wireframes serve as a basic blueprint, focusing purely on structure and layout. They are low-fidelity representations used to gather initial feedback and can undergo several revisions.
Mockups: Adding Detail and Refinement
Building upon the approved wireframes, mockups represent a more refined version of the design. As the reference states, "Whilst a wireframe is used to gather initial feedback about a potential design, and can go through several iterations, a mockup is a slightly more refined version of the design."
Mockups introduce visual elements such as:
- Colors
- Typography
- Imagery
- Detailed UI components
Unlike wireframes, mockups provide a clearer picture of the design's aesthetic and visual hierarchy. The reference notes, "With detailed elements and components, mockups are not too far from what a finished website or app may look like."
Wireframe vs. Mockup
Understanding the difference between these stages is crucial:
| Feature | Wireframe | Mockup |
|---|---|---|
| Purpose | Layout, structure, basic flow | Visual appearance, aesthetics, detailed UI elements |
| Fidelity | Low-fidelity | Mid-to-high fidelity (static image) |
| Detail | Basic shapes, lines, placeholder text | Colors, fonts, images, icons, precise spacing/alignment |
| Feedback | Content priority, functionality placement | Visual appeal, branding, specific UI element design |
| Stage | Early planning | Post-planning, pre-prototype/development |
The Design Flow
While the process can vary, a common sequence in UI/UX design is:
- Wireframes: Establishing the foundation, structure, and functionality.
- Mockups: Defining the visual design and aesthetics.
- Prototypes: Adding interaction and flow to create a clickable representation (often built from mockups or higher-fidelity designs).
- Development: Building the actual product based on the finalized designs.
Mockups are a key step in transitioning from the structural planning of wireframes to the visual representation that will guide the final development.
