This version of the design history has been retired

This is the repository for the original design history.

The design history has since been replaced with a version based on eleventy:

• https://bat-design-history.herokuapp.com/
• https://github.com/DFE-Digital/bat-design-history

The original version is still available here: https://bat-design-history-old.herokuapp.com/

Design history was an app built using the GOV.UK prototyping kit.

Document your designs

This repository makes it easy to:

• screenshot your designs
• create pages of screenshots to document designs
• document designs using the GOV.UK Design System
• print pages of designs
• make designs shareable and linkable

Some examples of design history in use:

• https://bat-design-history.herokuapp.com/
• https://bat-design-history.herokuapp.com/find-teacher-training/choose-how-to-apply

Take screenshots

Configure

In scripts/screenshot.js you should set:

• the domain you want to capture (eg a locally running prototype at localhost:3000 or an Heroku app)
• the paths on that domain with the titles you want to give them

Example paths:

paths = [
  { title: 'Index page', path: '/'},
  { title: 'Terms and conditions', path: '/terms-conditions'}
]

Run

node scripts/screenshot.js "a-generated-example"

This will:

• visit each page and save a screenshot
• save screenshots in a new directory
• generate an index page with screenshots listed in order

Example output:

node scripts/screenshot.js "a-generated-example"
Index generated: app/views/a-generated-example/index.html
https://design-history.herokuapp.com/
 >> app/assets/images/a-generated-example/design-history-index.png

Example commit, example page.

Document

When the index page and images are generated it’s easy to begin documenting those designs.

Publish

You can easily publish your design history to Heroku to create a linkable, shareable design artefact.