Prototyping guidance

Setting up for the first time

How to download all the kit you need to start creating prototypes.

1. Download Atom
2. Create a GitHub account
3. Download GitHub desktop
4. Download Node

If you have an option, always choose the one that’s recommended for most users.

5. Open ‘Terminal’ on your laptop.

To do this, hit the command (cmd) key and the space bar at the same time. This is an easy way to find anything on your Mac.

We’re now going to do some stuff with code. Don’t panic. You’re just typing stuff into a box.

6. In Terminal, type this (exactly): xcode-select --install and hit enter. It will install. If you already have it installed it will say error, this is already installed.

I’m set up, how do I create a new prototype?

First, download the GOV.UK prototyping kit. This is effectively a blank prototype with example pages designed in the GOV.UK brand. You'll need to download the kit every time you create a new prototype.

1. Click on this link to the govuk prototyping kit.
2. Click on the green ‘Clone or download’ button and choose to download a zip of the kit.
3. Go to your download and double click to unzip it.

Think about where you want to save your prototype on your computer. Your desktop is good for the first time as it’s nice and easy to find. Rename your prototype folder (the folder name defaults to govuk_prototype_kit): For example, passports-prototype

4. Open GitHub desktop, then minimise. Drag and drop your prototype into GitHub desktop. It will tell you that this isn’t a Git repository and ask if you would like to create a repository here instead. Click that link and then click the 'Create repository' button.
5. Your new prototype is now linked to your GitHub account.
6. Open Atom.
7. Open your prototype in Atom by going to ‘File’, ‘Open’ and finding your prototype folder on your desktop (or wherever you’ve saved it).

You’re now in your prototype and ready to make changes.

Seeing what your prototype looks like

Obviously it’s important to see what your prototype looks like as you're working on it.

1. Open Terminal, then minimise.
2. Find your prototype folder.
3. Drag the whole folder into Terminal (basically drop it onto the Terminal icon in your Mac dock)
4. Type npm install into terminal and then hit enter (you only need to do this once per prototype)

Stuff will happen. This can take a few minutes. Have a cup of tea.

5. Now type npm start and hit enter. It should say it’s ‘Listening on port 3000’.
6. Go to this url: http://localhost:3000

And there is it! Your prototype in all its glory. Note, you can’t send http://localhost:3000 to other people to look at because it only exists on your computer. You’ll also need to save your changes in Atom (command+s) before you can see them on localhost3000.

If I close everything, how do I open my prototype again?

1. Open Atom.
2. Open your prototype in Atom.
3. Open Terminal, then minimise.
4. ‘Open’ your prototype in Terminal by dragging and dropping your prototype folder onto the Terminal icon in your dock.
5. Type npm start and hit enter.

And you’re back. This will make your prototype available again at http://localhost:3000