Prototyping for dummies Stephen Gill @s_t_gill 

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

Sketching 

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

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 

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

GDS Stephen Gill 

HTML prototyping level 1 Inspect element 

GDS Stephen Gill 

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

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

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

GDS Stephen Gill 

GDS Stephen Gill 

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

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 

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 

HTML prototyping level 3 Create a static prototype of a service 

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 

GDS 

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

HTML prototyping level 4 Create a functional prototype of a service 

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 

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

GDS Stephen Gill 

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

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 

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 

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 

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

GDS Stephen Gill 

Create your own version of GOV.UK GDS Stephen Gill 

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 

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