Paper to pixels

Brief overview of some tools and how I use them

 @theatlasroom
9 December, 2015

Overview

  • 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?

Paper

Is this paper? Whoa, super throwback

Roscoe Santangelo

UI

Moqups

Sketch

Invision

Jumping to the browser

UI Frameworks are your friend

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

Foundation

Bootstrap

Customising: LESS + SASS

Getting dynamic

Frontend

  • jQuery
  • BackboneJS
  • AngularJS

Backend

  • 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

Next

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

@theatlasroom