Prototyping for dummies

Tips on creating paper and html prototypes for people with no design or coding skills.

Transcript

1. Prototyping for dummies Stephen Gill @s_t_gill
2. Prototyping is about communicating an idea or testing a hypothesis with the minimum possible effort GDS Stephen Gill
3. Sketching
4. Sketching is good for sharing rough, early ideas GDS Stephen Gill
5. 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
6. Everyone should sketch It doesn’t matter if you can’t draw (like me) GDS Stephen Gill
7. GDS Stephen Gill
8. HTML prototyping level 1 Inspect element
9. GDS Stephen Gill
10. Right click on a website page and select ‘inspect’ Edit the content Take a screen shot GDS Stephen Gill
11. Good for showing small changes, when you don’t need something clickable GDS Stephen Gill
12. HTML prototyping level 2 Prototype GOV.UK content on GitHub Pages
13. GDS Stephen Gill
14. GDS Stephen Gill
15. Good for GOV.UK content (not so much for services) Create pages from scratch Permanent Clickable Easy to share remotely GDS Stephen Gill
16. 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
17. 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
18. HTML prototyping level 3 Create a static prototype of a service
19. 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
20. GDS
21. Install the GOV.UK prototype kit for services (you’ll need admin rights for your mac or pc) GDS Stephen Gill
22. HTML prototyping level 4 Create a functional prototype of a service
23. 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
24. The proper way to do it (Node.js) GDS Stephen Gill
25. GDS Stephen Gill
26. How idiots like me do it (JavaScript) GDS Stephen Gill
27. 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
28. 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
29. 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
30. HTML prototyping level 5 Create your own version of GOV.UK
31. GDS Stephen Gill
32. Create your own version of GOV.UK GDS Stephen Gill
33. 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
34. 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