Tutorials and templates

Tutorials

Download and install

• Download the Prototype Kit (zip file)
• Installation guide for new users
  1. Prototype Kit requirements
  2. How to install the kit
  3. How to run the kit
• Installation guide for advanced users

Get started

• Build a basic prototype
  1. Open your prototype in your editor
  2. Create pages
  3. Link your pages together
  4. Use components from the Design System
  5. Show the user's answers
  6. Let the user change their answers
  7. Show different pages depending on user input (branching)
  8. Link your index page to your start page

Basic usage

• Share usage data
• Add CSS, JavaScript, images and other files
• Store your code online with GitHub or GitHub Desktop
• Set up Git using terminal
• Publish on the web (Heroku)
• Pass data into a page
• Update your Prototype Kit

Advanced usage

• Pass data from page to page
• Create routes (server side programming)
• Override the service name on one page
• Store data in session
• Use GOV.UK Notify to prototype emails and text messages
• Template partial areas
• Use backwards compatibility to upgrade from version 6

Page templates

You can find them in your prototype folder, in /docs/views/templates

Copy and paste the pages you need to your /app/views folder to make your prototypes.

• GOV.UK page template / Unbranded page template
• Question page template
• Content page template
• Task list template
• Check your answers template
• Confirmation page template

Your prototype folder also contains the following page templates:

• Start page template
• Step by step navigation template
• Start page with step by step template

You cannot adjust the design of these pages, but you can use them to help you prototype realistic journeys connecting your service with GOV.UK content.

Read the Help users start using a service guidance and the Step by step navigation guidance to learn how to make these pages live for your service.

When not to use step by step navigation

Remember that step by step navigation is not for use within transactional services. We have included it in the Prototype Kit only so you can prototype your journeys. Unlike most other components and patterns in the Design System, we do not provide the code for step by step navigation in `govuk-frontend`.

GOV.UK Design System

GOV.UK Design System is a guide to making your prototype look like a GOV.UK service, including typography, forms and more.