Mockups

A mockup, also known as a comp (comprehensive layout), is a high fidelity, static, design representation to be used by the development team. A well created mockup:

• represents the structure of information, visualises the content and demonstrates the basic functionalities in a static way
• ensures all specifications of the design (sizing, spacing, colors, etc) are accurate for development

When to Use

1. To pass off to the development team prior to the development phase
2. To gather consensus from stakeholders
3. To gather feedback and communicate the entire design story
4. To use as a reference for development review/testing

Steps

1. Design high-fidelity, pixel perfect screens in Sketch using the design system library
2. Review with UX team
3. Present final designs to squad or product teams
4. Annotate screens to communicate interaction, UX, and development specification/notes
5. Deliver to development team
6. Maintain ongoing communication during development phase

References

Templates (if applicable)

Created by: Joe Steinkamp | Last updated by: Joe Steinkamp