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

Death to Wireframes, Long Live Rapid Prototyping

7559f6cff1f5efc2d210965febd4d71c?s=47 Bermon Painter
November 05, 2013

Death to Wireframes, Long Live Rapid Prototyping

Static wireframes are a drag on the whole design process. Prototyping makes things a little better allowing you to stitch together static wireframes or mockups while adding basic interactions. Rapid prototyping with HTML, CSS, and JavaScript is even better, faster, increases collaboration and improves the iteration process. Kill your wireframes. Long live rapid prototyping.

Given originally at ConvergeSE 2012, then for UX Web Summit, Confoo & a complete update for UX Madison.

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

November 05, 2013
Tweet

Transcript

  1. DEATH TO WIREFRAMES RAPID LONG LIVE PROTOTYPING

  2. 1. A TYPICAL PROCESS 2. KILLING IT WITH FIRE 3.

    FROM THE ASHES 4. RAPID PROTOTYPES 5. QUESTIONS
  3. MANUFACTURING, PRINT, AGENCY, STARTUP, ENTERPRISE, PRODUCT, EDUCATION, CONSULTING 13 JOBS

    / 15 YEARS
  4. None
  5. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY

  6. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY • STAKEHOLDER INTERVIEWS •

    BUSINESS GOALS • RISK ANALYSIS • COMPETITIVE ANALYSIS • PROJECT BRIEF • CONTENT • STATEMENT OF WORK • FUNCTIONAL SPECS
  7. TYPICAL PROCESS DOCUMENTATION

  8. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY • STATIC WIREFRAMES •

    PHOTOSHOP COMPS
  9. TYPICAL PROCESS MORE DOCUMENTATION

  10. TYPICAL PROCESS MORE DOCUMENTATION

  11. TYPICAL PROCESS MORE DOCUMENTATION

  12. TYPICAL PROCESS MORE DOCUMENTATION

  13. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY • HTML • CSS

    • JAVASCRIPT • BACKEND
  14. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY

  15. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY

  16. MONTHS PASS (OR MAYBE YEARS)

  17. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY

  18. TYPICAL PROCESS • CLIENTS • STAKEHOLDERS • WIREFRAMES • PHOTOSHOP

    COMPS • HTML • CSS • JAVASCRIPT • BACKEND DISCOVER DESIGN DEVELOP DEPLOY • STAKEHOLDER INTERVIEWS • BUSINESS GOALS • RISK ANALYSIS • COMPETITIVE ANALYSIS • PROJECT BRIEF • CONTENT • STATEMENT OF WORK • FUNCTIONAL SPECS OR NOT BECAUSE LEGAL DIDN’T DO THEIR DO DILIGENCE AND THE PRODUCT YOU WERE BUILDING WAS PATENTED BY ANOTHER COMPANY SO YOU JUST WASTED MILLIONS OF DOLLARS AND A YEAR AND A HALF OF MANPOWER ON A PRODUCT THAT CAN’T BE LAUNCHED AND YOU CAN’T SHOW ANY OF YOUR WORK BECAUSE THE LAWYERS WON’T LET YOU.
  19. None
  20. WIREFRAMES

  21. http://www.analyticdesigngroup.com/files/ADGi-home-wireframe_0.jpg

  22. None
  23. WIREFRAMES NOT SUITED FOR DYNAMIC INTERACTIONS

  24. WIREFRAMES OPEN TO INTERPRETATION

  25. WIREFRAMES NOT USER FRIENDLY

  26. WIREFRAMES CREATES A LOB IT OVER THE FENCE MENTALITY

  27. WIREFRAMES DRAGS DOWN THE ENTIRE PROCESS

  28. MOCKUPS

  29. http://www.analyticdesigngroup.com/files/ADGi-home-wireframe_0.jpg

  30. MOCKUPS PLAGUED BY THE SAME PROBLEMS OF WIREFRAMES

  31. MOCKUPS TIME CONSUMING PIXEL PERFECT DETAIL

  32. MOCKUPS DON’T TAKE INTO ACCOUNT USER INTERACTIONS

  33. MOCKUPS DON’T TAKE INTO ACCOUNT THE EBB AND FLOW OF

    THE WEB
  34. MOCKUPS SETS UNREALISTIC AESTHETIC EXPECTATIONS FOR CLIENTS

  35. MOCKUPS DESIGN CHANGES CONTINUALLY OCCUR CAUSING LOST HOURS IN DEVELOPMENT

    REWORK
  36. MOCKUPS NEARLY IMPOSSIBLY TO MANAGE IN A RESPONSIVE CONTEXT

  37. WHY DO WE CREATE WIREFRAMES?

  38. TO CREATE STRUCTURE

  39. WHY DO WE CREATE MOCKUPS?

  40. TO CREATE AESTHETICS

  41. WIREFRAMES

  42. WIREFRAMES

  43. MOCKUPS

  44. MOCKUPS

  45. FROM THE ASHES

  46. “SPEED FIRST, AESTHETICS SECOND.” – JASON FREID

  47. CONCURRENT PROCESS DISCOVERY DESIGN DEVELOP • STAKEHOLDER INTERVIEWS • BUSINESS

    GOALS • USER RESEARCH • USER STORIES • PERSONAS • SKETCHES • STYLE TILES • ELEMENT COLLAGES • STYLE GUIDES • RAPID PROTOTYPE • BACKEND ITERATE & TEST DEPLOY
  48. STYLE TILES

  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. Serious About a Web Built Right Serious About a Web

    Built Right (without taking ourselves too seriously) (without taking ourselves too seriously) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non. Vie w this p roje ct Vie w this p roje ct C A L E N D A R
  58. ELEMENT COLLAGES

  59. None
  60. None
  61. None
  62. STYLE GUIDES

  63. None
  64. None
  65. None
  66. None
  67. None
  68. Style guide HOME IDENTITY WEBSITES SANDSTONE OVERVIEW BUTTONS COLORS FORMS

    GRIDS TABLES & LISTS TABZILLA TYPEFACES EXAMPLES COMMUNITY SITES DOMAIN STRATEGY COMMUNICATIONS PRODUCTS Sandstone grid system Sandstone grid system Responsive Responsive grids grids The default grid system for Sandstone is 12 columns at a width of 940px. See the chart to the right and the grid examples below for further details including tablet and smartphone sizes. Screen format Width Column Gutter # of col. Smartphone (vert.) 320px 40px 20px 5 col Smartphone (horiz.) 480px fluid expansion of smartphone Tablet 768px 40px 20px 12 col Desktop 990px 60px 20px 12 col Download PSDs Download PSDs Desktop Tablet Phone Smartphone Smartphone Tablet Tablet PREV NEXT
  69. 0. Overview 0. Overview 1. Buttons 1. Buttons 2. Forms

    2. Forms 3. Source Code 3. Source Code 4. Text Styling 4. Text Styling 5. Listings 5. Listings 6. Boxed Groups 6. Boxed Groups 7. Icons 7. Icons 8. Navigation 8. Navigation 9. Behavior 9. Behavior 10. Discussion 10. Discussion 11. Colors 11. Colors 12. Animations 12. Animations 13. Select Menu 13. Select Menu 14. Blank slate 14. Blank slate 15. Alerts 15. Alerts 16. Pagehead 16. Pagehead 17. Repo selector 17. Repo selector 2.1 Typical form groups — <dl.form> with a <dt> containing the label and ` containing the form elements. .required - This group is required to submit the form. <dl class="form"> <dt><label>Example Text</label></dt> <dd><input type="text" class="textfield" value="Example Value"></dd> </dl> <dl class="form"> <dt><label>Example Label</label></dt> <dd> <select> <option>Choose an option</option> <option>Git</option>   Sign up Sign up Sign in Sign in CSS Styleguide Overview Overview Styling & CSS Styling & CSS Markup & Templates Markup & Templates Behavior & JavaScript Behavior & JavaScript Ruby Ruby Words Words Mobile Mobile Example Value Choose an option Example Text Example Label Example Value Choose an option .required Example Text * Example Label * Explore Explore Features Features Enterprise Enterprise Blog Blog Search or type a command ? ?
  70. Chris Chris Sign Out Sign Out Search caring.com Backgrounds Reading

    text basic paragraph or line. Keep the line height at 21px to preserve out vertical rhythm. Contributed (UGC) text basic paragraph or line. Keep the line height at 21px to preserve out vertical rhythm. Caption or Date Link Bulleted List Containers .low-priority-area: Only transparent backgrounds are allowed for this container type. Forms Form instructions come at the top of the form or at the top of a field group. They tell a user what to do and blah blah blah. Standard input field Helper text Standard drop down -- Choose one -- Selected radio button Not selected radio button Typography H1 H2 H3 H4 Styles A-Z Typographic Care Senior Layout Directory BG & Container Matters Caring Forms My Widgets
  71. Introduction Introduction Documentation Syntax Documentation Syntax Generate Styleguides Generate Styleguides

    View the code on GitHub View the code on GitHub KSS is intended to help automate the creation of a living styleguide. A styleguide serves as a place to publish KSS documentation and visualize different states of UI elements defined in your CSS. It’s sometimes hard to explain what a living styleguide is. The best way to explain is through examples. The GitHub CSS Styleguide is a good example of a living styleguide generated with KSS. In particular, you can see the value of KSS on pages like the buttons section. Generating your own styleguide Generating a styleguide with KSS is pretty easy with Rails, Sinatra or any other framework that you can include gems with. These instructions are for setting up a KSS styleguide with the Ruby programming language. Please keep in mind KSS is not a Ruby-only program! This is just one possible implementation of many. Help me write a binary generator to fix this! In the controller In the controller, create a new instance of the KSS parser like so: # Renders the css styleguide in accordance to KSS. def styleguide @styleguide = Kss::Parser.new("#{RACK_ROOT}public/stylesheets") case params[:reference].to_i when 1.0 render :template => "styleguide/css/buttons" when 2.0 render :template => "styleguide/css/forms" when 3.0 render :template => "styleguide/css/icons" end end
  72. Kalei - Style guide Kalei - Style guide Generates bootstrap-like

    documentation for your own CSS! This project aims at making sure your style sheets are fully documented whilst being synchronized with your webpages styles. To do this it actually uses your live stylesheets in so that at anytime you can review how your styleguide looks. This website is a live example generated from Kalei's style.css Star Star 292 292 Fork Fork 51 51 Getting started 1. Download the repository (git clone git://github.com/thomasdavis/kaleistyleguide.git) 2. Serve it on a HTTP server and it should work! 3. Edit js/config.js to point at your own styles.css Rails Gem
  73. HTTPS clone URL https://github.com/darcyclarke/DSS.git You can clone with HTTPS, or

    Subversion.  latest commit 7fd92eabc0 Documented Style Sheets Merge pull request #44 from darcyclarke/bug/fix-whitespace-in-markup shanejonas authored 7 months ago  .gitignore Fixed state parser, added some more styling to example docs and modif… 7 months ago  LICENSE-MIT Added Grunt support 7 months ago  README.md Update _dss reference 7 months ago  dss.js add newlines back in markup 7 months ago  package.json Update _dss reference 7 months ago   README.md README.md Official Logo NPM Package DSS, Documented Style Sheets, is a comment styleguide and parser for CSS, LESS, STYLUS, SASS and SCSS code. In most cases, you will want to include the DSS parser in a build step that will generate documentation files automatically. grunt-dss is the official DSS grunt task which does just that.   Sign up Sign up Sign in Sign in 62 12   Star Star   Fork Fork darcyclarke / DSS PUBLIC    Code Code   Issues Issues 3 3   Pull Requests Pull Requests 0 0   Wiki Wiki   Pulse Pulse   Graphs Graphs   Network Network   ?   Clone in Desktop Clone in Desktop   Download ZIP Download ZIP  95 commits  9 branches  0 releases  5 contributors     master master branch: DSS /  … DSS Generating Documentation Explore Explore Features Features Enterprise Enterprise Blog Blog Search or type a command This repository This repository ? ?
  74. StyleDocco StyleDocco generates documentation and style guide documents from your

    stylesheets. Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences ( ``` ) in your comments, and StyleDocco shows a preview with the styles applied, and displays the example HTML code. The previews are rendered in resizable iframes to make it easy to demonstrate responsive designs at different viewport sizes. Suggestions, feature requests and bug reports are very welcome, either at GitHub or on Twitter (@jacobrask). Installation StyleDocco requires Node.js. After installing Node.js, run npm install -fg styledocco or clone this repository. StyleDocco is free software, released under the MIT license. Examples Stylesheet The following is the code you would write in your stylesheet, and the Output is what you would see in the documentation. /* Provides extra visual weight and identifies the primary action in a set of buttons. <button class="btn primary">Primary</button> */ .btn.primary { background: steelblue; color: snow; border: 2px outset steelblue; } Output Provides extra visual weight and identifies the primary action in a set of buttons. StyleDocco StyleDocco examples examples source code source code
  75. RAPID PROTOTYPING

  76. FOUNDATION Foundation Features Add-ons Case Studies Docs Training Getting Started

    Foundation The most advanced responsive front-end framework in the world. Download Foundation 4 12.4k stargazers @foundationzurb Latest Update on Github JUL 12, 2013 Commit a06390f7b8d09447e04204151e970e8e72d8e90c » Clone Now
  77. BOOTSTRAP Star Star 52,951 52,951 Fork Fork 17,430 17,430 Follow

    Follow @twbootstrap @twbootstrap 71.8K followers Tweet Tweet 18.3K Introducing Bootstrap. Bootstrap Bootstrap Sleek, intuitive, and powerful front-end framework for Sleek, intuitive, and powerful front-end framework for faster and easier web development. faster and easier web development. Download Bootstrap Download Bootstrap GitHub project GitHub project GitHub project Examples Examples Examples Extend Extend Extend Version 2.3.2 Version 2.3.2 Version 2.3.2 Bootstrap Bootstrap Bootstrap Home Home Get started Get started Scaffolding Scaffolding Base CSS Base CSS Components Components JavaScript JavaScript Customize Customize
  78. RATCHET Star Star 5,076 5,076 Tweet Tweet 3,753 Follow Follow

    @GoRatchet @GoRatchet 1,884 followers Getting started Once you've downloaded Ratchet, here's what to do next. Prototype iPhone apps with simple HTML, CSS, and JS components. Download Ratchet Download Ratchet R A T C H E T Getting started Components Page setup View on Github
  79. MIDDLEMAN + SASS

  80. RAPID PROTOTYPING CODE REUSE

  81. RAPID PROTOTYPING INHERIT DOCUMENTATION WITH CODE + COMMENTS

  82. RAPID PROTOTYPING MORE EFFICIENT USE OF TIME

  83. RAPID PROTOTYPING NATURAL FOCUS ON THE EBB & FLOW OF

    THE WEB & CONDUCIVE TO RESPONSIVE DESIGN
  84. RAPID PROTOTYPING CROSS-DISCIPLINE COLLABORATION

  85. CONCURRENT PROCESS DISCOVERY DESIGN DEVELOP • STAKEHOLDER INTERVIEWS • BUSINESS

    GOALS • USER RESEARCH • USER STORIES • PERSONAS • SKETCHES • STYLE TILES • ELEMENT COLLAGES • STYLE GUIDES • RAPID PROTOTYPE • BACKEND ITERATE & TEST DEPLOY
  86. 4 GOALS OF RAPID PROTOTYPING

  87. CREATION IS A SHARED ACTIVITY 1

  88. GET TO THE END PRODUCT WITH AS LITTLE WASTE AS

    POSSIBLE 2
  89. CREATE ONLY WHAT YOU NEED TO INFORM AND VALIDATE DESIGN

    DECISIONS 3
  90. CREATE SYSTEMS NOT PAGES 4

  91. TYPICAL PROCESS • CLIENTS • STAKEHOLDERS • WIREFRAMES • PHOTOSHOP

    COMPS • HTML • CSS • JAVASCRIPT • BACKEND DISCOVER DESIGN DEVELOP DEPLOY • STAKEHOLDER INTERVIEWS • BUSINESS GOALS • RISK ANALYSIS • COMPETITIVE ANALYSIS • PROJECT BRIEF • CONTENT • STATEMENT OF WORK • FUNCTIONAL SPECS QUESTIONS?