This first phase of this process begins in Design Delivery stage which in this context we’ll refer to as the Prototype phase; the Design Handoff—or simply the Handoff phase facilitates the transition of the designs to the next phase. Finally, using the Artifacts from the previous phase, the Frontend Development commences—which we’ll generally call the Implementation phase.
| Phases | User Interface Design Artifacts | Visual Design Artifacts |
|---|---|---|
| 1. Prototype | Interface Diagram | Mockups |
| 2. Handoff | Interface Diagram, Design System | Mockups, Style Guide, Media Assets, Design System |
| 3. Implementation | Frontend Development Content | Frontend Development Presentation |
The items indicated in this process are Artifacts. In the Implementation phase, items are represented by abstract concepts because the Frontend Development is in a different realm. The principle of Separation of Content and Presentation enables the simultaneous progress of Design and Frontend Development.
Ideally, the goal in the Prototype phase is to handoff (for implementation) a design that is presented and tested based on the set Strategy and Scope. With this goal in mind, it is important to process feedback from stakeholders (people from business, product, engineering) and users before going to the Handoff phase.