Slide 1

Slide 1 text

Prototyping for dummies Stephen Gill @s_t_gill

Slide 2

Slide 2 text

Prototyping is about communicating an idea or testing a hypothesis with the minimum possible effort GDS Stephen Gill

Slide 3

Slide 3 text

Sketching

Slide 4

Slide 4 text

Sketching is good for sharing rough, early ideas GDS Stephen Gill

Slide 5

Slide 5 text

1. For most people, sketching is much quicker than making an HTML prototype 2. Sketches feel disposable, so you don’t feel so bad about throwing them away (which is what you will end up doing with most early ideas) GDS Stephen Gill

Slide 6

Slide 6 text

Everyone should sketch It doesn’t matter if you can’t draw (like me) GDS Stephen Gill

Slide 7

Slide 7 text

GDS Stephen Gill

Slide 8

Slide 8 text

HTML prototyping level 1 Inspect element

Slide 9

Slide 9 text

GDS Stephen Gill

Slide 10

Slide 10 text

Right click on a website page and select ‘inspect’ Edit the content Take a screen shot GDS Stephen Gill

Slide 11

Slide 11 text

Good for showing small changes, when you don’t need something clickable GDS Stephen Gill

Slide 12

Slide 12 text

HTML prototyping level 2 Prototype GOV.UK content on GitHub Pages

Slide 13

Slide 13 text

GDS Stephen Gill

Slide 14

Slide 14 text

GDS Stephen Gill

Slide 15

Slide 15 text

Good for GOV.UK content (not so much for services) Create pages from scratch Permanent Clickable Easy to share remotely GDS Stephen Gill

Slide 16

Slide 16 text

How to prototype content on GitHub pages 1. Set up a GitHub account and create a repo. Instructions here: https://github.com/. 2. Go to GitHub pages: https://pages.github.com/ 3. Create the content in your CMS and preview it (on GOV.UK, we use a special preview environment for this). 4. Right click on the page you’ve previewed (or published). Then save the page as an HTML page on your desktop (‘Save As’ and ‘Webpage, HTML only’) 5. Open the HTML file you created in a browser. Right click, then ‘View page source’. 6. Copy and paste the code into the file you created on GitHub. Then commit the change. Your page should now be published at http://username.github.io/repository/filename.html 7. If you know a bit of HTML, you can make changes to your page on GitHub. Just edit the file, then commit the changes. GDS Stephen Gill

Slide 17

Slide 17 text

How to prototype content on GitHub pages Example prototype page: http://stephengill.github.io/euro-finder/index-page.html Source code for the example prototype page: https://github.com/StephenGill/euro-finder/blob/gh-pages/index-page.html Be careful: stuff you publish on GitHub can be viewed by anyone, so don’t do it with anything sensitive. GDS Stephen Gill

Slide 18

Slide 18 text

HTML prototyping level 3 Create a static prototype of a service

Slide 19

Slide 19 text

Good for services (not GOV.UK content) Create pages from scratch Permanent Can share screenshots, or make a clickable thing Can publish on GitHub Pages or Heroku GDS Stephen Gill

Slide 20

Slide 20 text

GDS

Slide 21

Slide 21 text

Install the GOV.UK prototype kit for services (you’ll need admin rights for your mac or pc) GDS Stephen Gill

Slide 22

Slide 22 text

HTML prototyping level 4 Create a functional prototype of a service

Slide 23

Slide 23 text

With a bit of coding knowledge, you can do things like routing, ie - “If radio button a is checked, go to page x, but if radio button b is checked, go to page y” GDS Stephen Gill

Slide 24

Slide 24 text

The proper way to do it (Node.js) GDS Stephen Gill

Slide 25

Slide 25 text

GDS Stephen Gill

Slide 26

Slide 26 text

How idiots like me do it (JavaScript) GDS Stephen Gill

Slide 27

Slide 27 text

GDS function firstPageRouting() { var getUrl = document.getElementById("first-page"); var firstPageRadios = document.getElementsByName("radio-group"); for (i=0; i < firstPageRadios.length; i++) { if (firstPageRadios[i].checked) { if (i==0) { getUrl.setAttribute("action", "/some-other-page"); } } } } window.onload = function() { document.getElementById("first-page").onsubmit=function() { firstPageRouting(); } } Stephen Gill

Slide 28

Slide 28 text

Rough translation of that JavaScript - 1. Don’t do anything until the page html loads. 2. When the user hits the ‘continue’ button, go and have a look at the radio buttons on the page. 3. If the top radio button is checked, change the url of the next page to /some-other-page. 4. If a different radio button is checked, don’t change the url of the next page. GDS Stephen Gill

Slide 29

Slide 29 text

If you’re wondering what it takes to write JavaScript to that standard - based on my experience, you can do it with zero aptitude + 6 evening classes GDS Stephen Gill

Slide 30

Slide 30 text

HTML prototyping level 5 Create your own version of GOV.UK

Slide 31

Slide 31 text

GDS Stephen Gill

Slide 32

Slide 32 text

Create your own version of GOV.UK GDS Stephen Gill

Slide 33

Slide 33 text

It’s a bit fiddly to set up (you’ll probably need a developer). But once it’s set up, you can use it without any tech knowledge. Just paste your Markdown into GitHub and it comes out as a GOV.UK-style page. GDS Stephen Gill

Slide 34

Slide 34 text

More about prototyping Principles for prototyping How designers prototype at GDS All the HTML & CSS you need to prototype a simple form GDS Stephen Gill