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

Resources

CSS Frameworks

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

• Bootstrap
• Foundation
• Gumby

Foundation

More Ideas

• Yeoman
• Angular JS
• Markdown
• Static Site Generators, Middleman, Jeykll, DocPad

Yeoman

Angular.js

<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>
    </li>
  </ul>
  <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">
  </form>
</div>

Markdown

# 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)
          

Middleman

So...

Thanks

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