stephanie-k/sketch_wireframing_kit

Quick Sketchapp wireframing tool for UK government digital services

About the wireframing kit

Quick sketchapp wireframing tool for UK government digital services

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.

It is designed around these GOV.UK resources:

GOV.UK elements
GOV.UK template
GOV.UK front end toolkit

Requirements

Sketchapp
GDS Transport Website Font

Getting Started

The wireframing kit has several features which make static prototyping quick and easy.

Desktop or Mobile

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.

Inserting a symbol

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.

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

Detaching a symbol

Anything that is highlighted purple in the sidebar is editing the default elements.

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.