Skip to content

Commit 3193700

Browse files
committed
Updated for version 3
1 parent d62fd83 commit 3193700

File tree

4 files changed

+6
-32
lines changed

4 files changed

+6
-32
lines changed

.DS_Store

6 KB
Binary file not shown.

README.md

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,14 @@
1-
# About the wireframing kit
1+
## About the wireframing kit
22
Quick sketchapp wireframing tool for UK government digital services
33

4-
The Sketch wireframing kit provides a simple way to make static prototypes that look like pages on GOV.UK. These wireframes can be used to show ideas to people you work with, and to do user research.
4+
The Sketch wireframing kit provides a way to make static prototypes that look like pages on GOVUK. These wireframes can be used to show ideas to people you work with, and to do user research.
55

6-
It is designed around these GOV.UK resources:
6+
It includes components and patterns from the [GOVUK Design System](https://design-system.service.gov.uk "GOV.UK Design System")
77

8-
[GOV.UK elements](https://github.com/alphagov/govuk_elements "GOV.UK elements")<br />
9-
[GOV.UK template](https://github.com/alphagov/govuk_template "GOV.UK template")<br />
10-
[GOV.UK front end toolkit](https://github.com/alphagov/govuk_frontend_toolkit "GOV.UK front end toolkit")
11-
12-
# Requirements
8+
## Requirements
139
[Sketchapp](https://www.sketchapp.com/ "Download Sketchapp")<br />
1410
GDS Transport Website Font
1511

16-
# Getting Started
17-
18-
The wireframing kit has several features which make static prototyping quick and easy.
19-
20-
### Desktop or Mobile
21-
22-
The wireframing kit comes with elements for both desktop and mobile. To switch between the different device types click the link at the top of the sidebar. You can ignore the symbol editor, unless you want to edit the default import symbols.
23-
24-
![Desktop or Mobile](/../screen_shots/screenshots/sketch_pages.gif?raw=true "Desktop or Mobile")
25-
26-
### Inserting a symbol
27-
28-
Symbols are Sketch's way of importing an element that has already been created. It allows you to simply drop in the GOV.uk elements, without needing to build them yourself every time. To insert a symbol into your wireframe, choose the 'insert' button, and then hover over 'symbol'. This will show a list of desktop and mobile symbols that are available to import.
29-
30-
**It is important to detach any imported symbols to avoid overwriting the default elements supplied with the kit. See below to learn how to do this**
31-
32-
![Insert Symbol](/../screen_shots/screenshots/sketch_insert.gif?raw=true "Insert Symbol")
33-
34-
### Detaching a symbol
35-
36-
**Anything that is highlighted purple in the sidebar is editing the default elements.**
37-
38-
To detach a symbol, right click the purple symbol folder in the layers list, and choose 'detach from symbol'. This will create a copy of the defult symbol, so you can edit it without altering the default elements.
12+
## Notes
3913

40-
![Detach Symbol](/../screen_shots/screenshots/sketch_detach_from_symbol.gif?raw=true "Detach Symbol")
14+
The wireframing kit no longer supports mobile components from version 3.0. If you have a need for this let me know in the issues.
File renamed without changes.

wireframing_kit.sketch

-16.7 MB
Binary file not shown.

0 commit comments

Comments
 (0)