Paper to pixels

Brief overview of some tools and how I use them

9 December, 2015


  • Me
    • Prototyping at different levels
    • Real world example: online court documents
    • Final words
  • Tools i'll touch on..
    • Paper, Moqups, Sketch, Invision, LESS, SASS, Bootstrap, Foundation, JS and Backend frameworks

I am

  • Code for Australia Fellow
  • Full Stack Developer
  • Sound Art Tinkerer

I'm not really a designer...

Pixels are my friend

Getting started

What are we testing?


Is this paper? Whoa, super throwback

Roscoe Santangelo





Jumping to the browser

UI Frameworks are your friend

  • Bootstrap, Foundation
  • Responsive out of the box
  • Comprehensive set of defaults to get you going



Customising: LESS + SASS

Getting dynamic


  • jQuery
  • BackboneJS
  • AngularJS


  • ExpressJS - NodeJS
  • Lumen, Slim - php
  • Flask - Python
  • Sinatra - Ruby

Putting it all togethor

Gettin' reel

Hey, how can we provide clients with secure, up to date access to their court documents?

We started in paper....and I survived

45mins + post it notes and some paper


Then what happened

Yay - now more testing

On prototyping...

  • Focus on what you want to test
  • Think of the lowest level fidelity you need to test your concept
  • Make it quick and keep it dirty

On Tooling....Beware | Be aware

  • Research some good sources for your interests keep tabs on the tools that are out there
  • Get connected and share your experiences with others - learn about the tools others are using
  • Don't get too attached, tools come and go
    • Any flash developers out there?....
  • Really just focus on what will add value to your work and help you move quickly

That's all folks