Rapid Prototyping In The Browser – Patrick Arlt



Rapid Prototyping In The Browser – Patrick Arlt

0 0


rapid-prototyping-in-browser


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

Resources

CSS Frameworks

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

Foundation

More Ideas

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...

Whiteboard and Sketch Leverage Frameworks Prototype in a Browser

Thanks

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