Mockups
Design Processes
Detailed, high-fidelity representations of a design, incorporating visual elements, to showcase the intended look and feel of the final product. Mockups often include realistic images, colors, and typography, providing stakeholders with a visual understanding of the design's aesthetics and functionality.
In practice
Represent high-fidelity, visual previews of a design that communicate the final look and feel. Mockups are important after wireframing as they allow stakeholders and clients to visualize the aesthetic aspects. They serve as a powerful communication tool, facilitating discussions on colors, typography, and imagery, ultimately ensuring alignment on the visual direction before moving into the final development phase.
Questions
What is Mockups?
Mockups are static, high-fidelity representations of how a design will look, without working behaviour behind them.
Why do you use Mockups?
They settle questions of appearance and hierarchy cheaply, and give everyone the same picture before anything is built.
How do you use/apply Mockups?
Make them realistic in content — real copy, real data lengths — because a mockup full of lorem ipsum hides the problems worth finding.
When do you use Mockups?
After structure is agreed and before build, or for stakeholder review.
Who uses Mockups?
Product and visual designers.
