> For the complete documentation index, see [llms.txt](https://govstack.gitbook.io/sandbox/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://govstack.gitbook.io/sandbox/1.0.2-1/follow-methodology/diy/diy-wireframes.md).

# DIY Wireframes

This prototype is focused on service design. Following this guide, you will be able to **use the GovStack Service Templates** and use best practices like the GovStack UX Design Patterns.

<table><thead><tr><th width="199.33333333333331">Component</th><th width="347">Scope</th><th>Quick Links</th></tr></thead><tbody><tr><td>GovStack Wireframe Kit</td><td><ul><li>GovStack Design Patterns as low- and high-fidelity screens</li></ul></td><td><a href="https://www.figma.com/file/ArThVqhrC8zdu1gRCIAU1m/GovStack-Wireframing-Kit?type=design&#x26;node-id=1-54&#x26;mode=design&#x26;t=wPCfAIx7RLkfWzFJ-0">Figma Wireframe Kit</a></td></tr></tbody></table>

## Guidelines

1. Follow [Service Design Methodology](/sandbox/1.0.2-1/follow-methodology/best-practice-example-design-of-the-sandbox-building-permit-use-case.md) with the outputs:
   1. Create As-Is User Journey
   2. Create To-Be User Journey
   3. Create Service Blueprint
2. Use the [Wireframe Kit](https://www.figma.com/file/ArThVqhrC8zdu1gRCIAU1m/GovStack-Wireframing-Kit?type=design\&node-id=1-54\&mode=design\&t=wPCfAIx7RLkfWzFJ-0) to design the screens (see [example outcome](/sandbox/1.0.2-1/follow-methodology/best-practice-example-design-of-the-sandbox-building-permit-use-case/phase-2-design.md))
   1. Open the figma file
   2. Click on the small arrows next to the title and select "duplicate to your drafts"
3. Test wireframes with actual users to refine design and service flow before - if planned - handing over to your frontend developers