Rapid Prototyping In The Browser – Patrick Arlt

Rapid Prototyping In The Browser – Patrick Arlt

0 0


On Github patrickarlt / rapid-prototyping-in-browser

Rapid Prototyping In The Browser

Patrick Arlt

Designer/Developer Portland R&D Center – @patrickarlt

Why Prototype

  • Sell ideas to stakeholder
  • Test concepts and ideas
  • Document what a project will look and function like

Where Prototypes Fall Short

  • Not interactive
  • Don't represent the styling
  • Missing important elements

In Browser Prototypes

Better then wireframes

  • Real interactions
  • CSS styling
  • Head start on frontend work
  • Easier to change your mind

Whiteboard and Sketch

Get all your ideas out as fast as possible

Build Directly in a Browser

Start building in a browser using HTML/CSS/JS


CSS Frameworks

Using a framework hugely accelerates the speed at which you can build a prototype


More Ideas



<div ng-controller="TodoCtrl">
  <span>{{remaining()}} of {{todos.length}} remaining</span>
  [ <a href="" ng-click="archive()">archive</a> ]
  <ul class="unstyled">
    <li ng-repeat="todo in todos">
      <input type="checkbox" ng-model="todo.done">
      <span class="done-{{todo.done}}">{{todo.text}}</span>
  <form ng-submit="addTodo()">
    <input type="text" ng-model="todoText"  size="30"
           placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">


# This is markdown

            Its pretty dang simple, it even does things like [Links](http://esri.com).

            * It
            * Also
            * Does
            * Lists

            ![and images](http://myimage.png)



Whiteboard and Sketch Leverage Frameworks Prototype in a Browser


http://patrickarlt.github.io/rapid-prototyping-in-browser/ / @patrickarlt