Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rapid HTML Prototypes

Garth Braithwaite
November 09, 2012

Rapid HTML Prototypes

Code is a design tool.

Build interactive prototypes to make friends and then bend them to your will.

A tweak of a presentation (https://speakerdeck.com/garthdb/rapid-html) for Web Unleashed.

Garth Braithwaite

November 09, 2012
Tweet

More Decks by Garth Braithwaite

Other Decks in Design

Transcript

  1. View Slide

  2. View Slide

  3. brackets.io

    View Slide

  4. View Slide

  5. Goals

    View Slide

  6. Goals

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. Design worflows suck

    View Slide

  14. Design worflows suck
    Let’s make another!

    View Slide

  15. Design worflows suck
    Let’s make another!

    View Slide

  16. View Slide

  17. Text!
    Illustrator
    Webkit

    View Slide

  18. Illustrator
    Webkit

    View Slide

  19. Designing out of context
    will always be open to
    misinterpretation and
    translation errors.

    View Slide

  20. View Slide

  21. “But I’m not doing design”

    View Slide

  22. View Slide

  23. Dirty code

    View Slide

  24. Dirty code
    Simple

    View Slide

  25. Dirty code
    Simple
    Available

    View Slide

  26. Dirty code
    Simple
    Available
    Interactive

    View Slide

  27. Dirty code
    Simple
    Available
    Interactive
    New

    View Slide

  28. View Slide

  29. Fast

    View Slide

  30. Fast

    View Slide

  31. Prototype

    View Slide

  32. Prototype
    index.html

    View Slide

  33. Prototype
    index.html main.css

    View Slide

  34. Prototype
    index.html main.css app.js

    View Slide

  35. Prototype
    index.html main.css app.js
    assets

    View Slide

  36. Examples

    View Slide

  37. Examples

    View Slide

  38. Examples
    garthdb.github.com/Brackets-UI-Prototypes

    View Slide

  39. View Slide

  40. View Slide

  41. IDE

    View Slide

  42. IDE
    Starter

    View Slide

  43. IDE
    Starter
    Preprocessors

    View Slide

  44. IDE
    Starter
    Preprocessors
    Build

    View Slide

  45. IDE
    Starter
    Preprocessors
    Build
    Testing

    View Slide

  46. IDE
    Starter
    Preprocessors
    Build
    Testing
    Hosting

    View Slide

  47. IDE

    View Slide

  48. IDE

    View Slide

  49. IDE

    View Slide

  50. IDE

    View Slide

  51. IDE

    View Slide

  52. IDE

    View Slide

  53. Starter

    View Slide

  54. Starter

    View Slide

  55. Starter
    github.com/GarthDB/Starter

    View Slide

  56. Preprocessors

    View Slide

  57. Preprocessors

    View Slide

  58. Markup

    View Slide

  59. Markup

    View Slide

  60. Markup

    View Slide

  61. Markup

    View Slide

  62. body
    h1 Jade - node template engine
    #container
    if youAreUsingJade
    p You are amazing
    else
    p Get on it!

    Jade - node template engine

    You are amazing


    Jade Code
    HTML

    View Slide

  63. %body
    %h1 HAML - {markup haiku}
    #container
    - if youAreUsingHAML
    %p You are amazing
    - else
    %p Get on it!

    HAML - {markup haiku}

    You are amazing


    HAML Code
    HTML

    View Slide

  64. # This is an H1
    * Red
    * Green
    * Blue
    [an example](http://example.com/ "Title") inline link.
    This is an H1

    Red
    Green
    Blue

    an
    example inline link.
    Markdown
    HTML

    View Slide

  65. Styles

    View Slide

  66. Styles

    View Slide

  67. Styles

    View Slide

  68. Styles

    View Slide

  69. border-radius()
    -webkit-border-radius arguments
    -moz-border-radius arguments
    border-radius arguments
    body
    font 12px Helvetica, Arial, sans-serif
    & > a.button
    border-radius(5px)
    body {
    font: 12px Helvetica, Arial, sans-serif;
    }
    body > a.button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    Stylus
    CSS

    View Slide

  70. @mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
    }
    body {
    font: 12px Helvetica, Arial, sans-serif;
    & > a.button {
    @include border-radius(5px);
    }
    }
    body {
    font: 12px Helvetica, Arial, sans-serif;
    }
    body > a.button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    SASS
    CSS

    View Slide

  71. .border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    }
    body {
    font: 12px Helvetica, Arial, sans-serif;
    & > a.button {
    .border-radius(5px);
    }
    }
    body {
    font: 12px Helvetica, Arial, sans-serif;
    }
    body > a.button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    Less
    CSS

    View Slide

  72. Script

    View Slide

  73. Script

    View Slide

  74. class Animal
    constructor: (@name) ->
    move: (meters) ->
    alert @name + " moved #{meters}m."
    class Snake extends Animal
    move: ->
    alert "Slithering..."
    super 5
    Coffeescript
    var Animal, Snake,
    __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent)
    { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
    function ctor() { this.constructor = child; } ctor.prototype =
    parent.prototype; child.prototype = new ctor(); child.__super__ =
    parent.prototype; return child; };
    Animal = (function() {
    function Animal(name) {
    this.name = name;
    }
    Animal.prototype.move = function(meters) {
    return alert(this.name + (" moved " + meters + "m."));
    };
    return Animal;
    })();
    Snake = (function(_super) {
    __extends(Snake, _super);
    function Snake() {
    return Snake.__super__.constructor.apply(this, arguments);
    }
    Snake.prototype.move = function() {
    alert("Slithering...");
    return Snake.__super__.move.call(this, 5);
    };
    return Snake;
    })(Animal);
    Javascript

    View Slide

  75. Build

    View Slide

  76. Build

    View Slide

  77. Build

    View Slide

  78. Build

    View Slide

  79. Build

    View Slide

  80. Testing

    View Slide

  81. httpster
    Testing

    View Slide

  82. httpster
    Testing

    View Slide

  83. Hosting

    View Slide

  84. Hosting
    gh-pages

    View Slide

  85. Hosting
    gh-pages

    View Slide

  86. END!

    View Slide

  87. END!
    Nailed it!

    View Slide