Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Prototyping for dummies

Stephen Gill
November 02, 2016

Prototyping for dummies

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

Stephen Gill

November 02, 2016
Tweet

Other Decks in Design

Transcript

  1. Prototyping is about communicating an idea or testing a hypothesis

    with the minimum possible effort GDS Stephen Gill
  2. 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
  3. Right click on a website page and select ‘inspect’ Edit

    the content Take a screen shot GDS Stephen Gill
  4. Good for GOV.UK content (not so much for services) Create

    pages from scratch Permanent Clickable Easy to share remotely GDS Stephen Gill
  5. 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
  6. 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
  7. 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
  8. GDS

  9. Install the GOV.UK prototype kit for services (you’ll need admin

    rights for your mac or pc) GDS Stephen Gill
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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