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:

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


  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


Templates (if applicable)

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