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

The Zen of HTML Prototyping and Designing in the Browser

Josh Riggs
June 06, 2014

The Zen of HTML Prototyping and Designing in the Browser

A primer in using HTML frameworks to create working prototypes and wireframes.

Josh Riggs

June 06, 2014
Tweet

More Decks by Josh Riggs

Other Decks in Design

Transcript

  1. THE ZEN OF HTML PROTOTYPING
    & Designing in the Browser
    Monday, May 6, 13

    View full-size slide

  2. HOWDY. MY NAME IS JOSH.
    Monday, May 6, 13

    View full-size slide

  3. ALL YOU EVER WANTED TO KNOW ABOUT
    HTML PROTOTYPING:
    • What is HTML prototyping?
    • Why should I do it?
    • How does it fit in to the
    design process?
    • How do I do it?
    • How do I sell it?
    • How does it work with Drupal?
    • Demo Time!
    • Links & resources
    Monday, May 6, 13

    View full-size slide

  4. DISCLAIMER*
    *What I am about to tell you is not a be-all-end-all, set in stone
    process. It will not cure cancer or spew forth double rainbows with
    kittens as pilots. What I WILL discuss with you are methods and
    processes which have been a success for ME in the real world. I will
    also discuss things that have failed miserably, and how I learned
    from them.
    Monday, May 6, 13

    View full-size slide

  5. SO, WHAT’S THIS
    PROTOTYPING THING?
    Monday, May 6, 13

    View full-size slide

  6. “Prototyping is rendering ideas to
    understand them better.”
    JARED M. SPOOL
    Monday, May 6, 13

    View full-size slide

  7. WIREFRAMING vs.
    PROTOTYPING vs.
    HTML PROTOTYPING
    Monday, May 6, 13

    View full-size slide

  8. WIREFRAMES ARE A SERIES OF STATIC
    IMAGES AND DOCUMENTS.
    Yet we attempt to use them to describe multi-
    dimensional user experiences.
    Monday, May 6, 13

    View full-size slide

  9. WIREFRAMES ALONE CANNOT TELL THE
    WHOLE STORY.
    They can, however, suck time & money, create confusion,
    and make false promises.
    Monday, May 6, 13

    View full-size slide

  10. A prototype is an early
    sample or model built to
    test a concept or process or
    to act as a thing to be
    replicated or learned from.
    Monday, May 6, 13

    View full-size slide

  11. Prototyping with HTML
    creates a living, breathing
    environment for users to
    interact with.
    Monday, May 6, 13

    View full-size slide

  12. The goal of HTML prototyping is to
    discover and solve design problems
    early on in the process by
    iterating, testing, implementing
    and refining.
    Monday, May 6, 13

    View full-size slide

  13. IT’S VERY HARD TO DO THAT WITH A SET
    OF PDF WIREFRAMES.
    Monday, May 6, 13

    View full-size slide

  14. WHY PROTOTYPE INSTEAD
    OF WIREFRAME?
    Monday, May 6, 13

    View full-size slide

  15. WIREFRAMES CAN’T HANDLE RESPONSIVE
    DESIGN. PROTOTYPING CAN.
    Let’s do some math...
    Monday, May 6, 13

    View full-size slide

  16. (Demonstration and Support Graphics)
    Monday, May 6, 13

    View full-size slide

  17. Creating static wireframes for
    responsive design is a
    F#$%ING NIGHTMARE!
    Monday, May 6, 13

    View full-size slide

  18. “One of the most important skills
    in RWD is the ability to control the
    layout (how content shifts and
    reflows at various widths).”
    TRENT WALTON
    Monday, May 6, 13

    View full-size slide

  19. PROTOTYPING FORCES YOU TO DISCOVER
    AND SOLVE PROBLEMS EARLY ON
    This is where designing in the browser comes in
    Monday, May 6, 13

    View full-size slide

  20. (Demonstration and Support Graphics)
    Monday, May 6, 13

    View full-size slide

  21. PROTOTYPES SHOW, RATHER
    THAN DESCRIBE
    When you need to demonstrate complex user interactions to
    clients and developers, “describing” these interactions with a
    static wireframe creates too many unanswered questions.
    Monday, May 6, 13

    View full-size slide

  22. (Demonstration and Support Graphics)
    Monday, May 6, 13

    View full-size slide

  23. PROTOTYPES ARE MORE REPRESENTATIVE OF
    THE FINAL PRODUCT.
    So many benefits to this!
    Monday, May 6, 13

    View full-size slide

  24. (Demonstration and Support Graphics)
    Monday, May 6, 13

    View full-size slide

  25. EASIER ITERATION - DESIGN, BUILD, TEST &
    EVALUATE FOR THE WIN
    Escape the print mentality.
    Monday, May 6, 13

    View full-size slide

  26. (Demonstration and Support Graphics)
    Monday, May 6, 13

    View full-size slide

  27. HOW DOES PROTOTYPING
    FIT INTO MY PROCESS?
    Monday, May 6, 13

    View full-size slide

  28. THE OLD WAY IS
    VERY LINEAR.
    THE WEB ISN’T.
    DISCOVER
    Strategists
    DESIGN
    Designers
    DEVELOP
    Developers
    DEPLOY
    Client & Users
    WEBSITE!
    Profit!!!
    Monday, May 6, 13

    View full-size slide

  29. THE OLD WAY IS
    VERY LINEAR.
    THE WEB ISN’T.
    DISCOVER
    Strategists
    DESIGN
    Designers
    DEVELOP
    Developers
    DEPLOY
    Client & Users
    Wireframes go
    somewhere in here...
    WEBSITE!
    Profit!!!
    Monday, May 6, 13

    View full-size slide

  30. A BETTER WAY, A BETTER PROCESS
    Monday, May 6, 13

    View full-size slide

  31. PURPOSE CONTENT
    & HIERARCHY
    SYSTEMS
    & STYLE
    STRATEGY
    DESIGN
    DEVELOPMENT
    Monday, May 6, 13

    View full-size slide

  32. PURPOSE CONTENT
    & HIERARCHY
    SYSTEMS
    & STYLE
    STRATEGY
    DESIGN
    DEVELOPMENT
    Prototyping fits nicely in
    the middle
    Make iterative prototypes
    Monday, May 6, 13

    View full-size slide

  33. HTML Prototyping:
    IS IT DESIGN?
    IS IT STRATEGY?
    IS IT FRONT-END DEV?
    Monday, May 6, 13

    View full-size slide

  34. YES.
    Monday, May 6, 13

    View full-size slide

  35. YOU’VE SOLD ME ON
    PROTOTYPING.
    WHERE DO I START?
    Monday, May 6, 13

    View full-size slide

  36. EVERY TEAM, PROJECT & SITUATION IS
    VERY DIFFERENT.
    Start by evaluating these things.
    Monday, May 6, 13

    View full-size slide

  37. DISPOSABLE REUSABLE
    Only for communicating
    Lets developers create their own
    HTML / CSS
    Less time in prototyping phase,
    but more time in development
    phase.
    Sets HTML structure for final
    product
    Requires more collaboration
    between design & development
    More time in prototyping
    phase, but more less time in
    development phase.
    OR
    Monday, May 6, 13

    View full-size slide

  38. Prototyping with HTML allows
    you to clearly separate the UX
    from the aesthetic design.
    Take advantage of this.
    Monday, May 6, 13

    View full-size slide

  39. SKETCH
    FIRST!
    Monday, May 6, 13

    View full-size slide

  40. START WITH CONTENT, NOT DEVICE.
    Monday, May 6, 13

    View full-size slide

  41. “...We need to shed the notion that
    we create layouts from a canvas
    in. We need to flip it on its head,
    and create layouts from the
    content out.”
    MARK BOULTON
    Monday, May 6, 13

    View full-size slide

  42. CREATE ONCE, PUBLISH EVERYWHERE.
    IF YDK, YOU BETTER GTS!
    Monday, May 6, 13

    View full-size slide

  43. MOBILE OR DESKTOP FIRST? YEP.
    Start with the most complicated interactions first, but create
    a mobile-first CSS structure.
    Monday, May 6, 13

    View full-size slide

  44. BECOME FRIENDS WITH YOUR DEVELOPER(S)
    Prototyping with HTML requires collaboration to be
    successful. Then again, so does anything.
    Monday, May 6, 13

    View full-size slide

  45. CHANGE EXPECTATIONS
    Most clients and internal stakeholders expect a
    waterfall approach. It’s your job as a designer to
    change their expectation.
    Monday, May 6, 13

    View full-size slide

  46. LET’S TALK GEAR

    Monday, May 6, 13

    View full-size slide

  47. FRAMEWORKS vs.
    HOME-BREWING
    Monday, May 6, 13

    View full-size slide

  48. PROS OF PROTOTYPING FRAMEWORKS
    Speed
    Built-in grid
    Built-in styles
    Built-in components
    Pre-tested in various browsers
    Open-source community
    Widespread use
    Support
    Upgrades & updates
    Easy knowledge transfer
    Monday, May 6, 13

    View full-size slide

  49. CONS OF PROTOTYPING FRAMEWORKS
    Working with someone else’s code
    Learning curve
    Proprietary markup
    Might not be the best fit for your situation
    Can be tough to implement in Drupal
    Monday, May 6, 13

    View full-size slide

  50. PROS OF CUSTOM PROTOTYPES
    Flexibility
    Customization
    Creates HTML structure for final product
    Not reliant on any specific program or technology (Sass, Codekit, etc.)
    Can be customized / optimized for Drupal markup
    Over time, you can build up a component / style library.
    Monday, May 6, 13

    View full-size slide

  51. CONS OF PROTOTYPING FRAMEWORKS
    Starting from scratch (or at least relatively)
    No immediate baked-in styles, grid, typography, components, etc.
    Possibly longer implementation time
    On your own for support & testing
    Knowledge transfer may be difficult
    Monday, May 6, 13

    View full-size slide

  52. ZURB FOUNDATION 4
    Now 97% more semantic!
    Runs on Sass or CSS
    Mobile First
    Uses Box-Sizing for grid
    Can disable presentational classes
    Large community of users
    Lots of support
    Only supports IE 9+
    PROTOTYPING FRAMEWORKS
    Monday, May 6, 13

    View full-size slide

  53. TWITTER BOOTSTRAP
    Not so semantic
    Runs on LESS or CSS
    Desktop First
    Uses presentational classes
    Large community of users
    Lots of support & documentation
    Doesn’t always play well with Drupal
    Support for IE 7+
    PROTOTYPING FRAMEWORKS
    Monday, May 6, 13

    View full-size slide

  54. ROCK HAMMER
    Requires Hammer for Mac
    Tons of development features
    How does it work with Drupal? No idea.
    PROTOTYPING FRAMEWORKS
    Monday, May 6, 13

    View full-size slide

  55. OTHER FRAMEWORKS (THERE’S A SHIPLOAD)
    LESS
    Jetstrap
    Divshot
    LayoutIt
    Frameless
    Mobile Boilerplate
    Wirefy
    Sass Responsive
    Kraken
    Susy Grids
    Zen Grids
    HTML5 Boilerplate
    Semantic.gs
    CodeKit
    The list goes on...
    Monday, May 6, 13

    View full-size slide

  56. ...AND THERE’S EVEN
    MORE WHERE THAT
    CAME FROM.
    Monday, May 6, 13

    View full-size slide

  57. COOL. NOW HOW DO I GET
    MY TEAM ONBOARD?
    Monday, May 6, 13

    View full-size slide

  58. HOW MUCH DOES IT COST?
    Monday, May 6, 13

    View full-size slide

  59. Imagine asking a Real Estate company, “How much does a
    house cost?” Well it depends. First off, what are the
    essentials you need? Three bedrooms because you have two
    kids? Central air conditioning because you live down south?
    Now that we have the essentials, what are some of the less
    essential, yet nice features? Basement? Extra storage?
    Large backyard? Three car garage? What if you could have
    it your way? How about a pool? Sounds nice right?
    BRIAN HOFF
    Monday, May 6, 13

    View full-size slide

  60. YOU SHOULD HAVE ALREADY HAD TIME &
    BUDGET FOR WIREFRAMES... RIGHT?
    Overall, the amount of time you spend creating HTML
    prototypes should cut down on front-end development time
    as compared to a traditional wireframe approach.
    Monday, May 6, 13

    View full-size slide

  61. ALLOW FOR SOME TIME FOR
    EXPERIMENTATION
    New things always take time to learn. Talk to your team on
    how to best approach this.
    Monday, May 6, 13

    View full-size slide

  62. DON’T BE AFRAID.
    OWN THAT SH*T
    Monday, May 6, 13

    View full-size slide

  63. DUDE. IT’S DRUPALCON.
    TALK ABOUT DRUPAL.
    Monday, May 6, 13

    View full-size slide

  64. KEEP YOUR MARKUP FREE OF
    PRESENTATIONAL CLASSES.
    Monday, May 6, 13

    View full-size slide

  65. DIVIDE YOUR HTML & CSS INTO PARTIALS,
    LIKE DRUPAL DOES.
    Monday, May 6, 13

    View full-size slide

  66. PROTOBOTS, DECOUPLING, & OTHER JUNK
    (Section to talk about protobots)
    Monday, May 6, 13

    View full-size slide

  67. USE FOUNDATION / BOOTSTRAP THEMES.
    Monday, May 6, 13

    View full-size slide

  68. DEMO TIME.
    LET’S DO THIS!
    Monday, May 6, 13

    View full-size slide

  69. GIVE ME SOME LINKS!
    Go to github.com/puturlherewhendone for all of the links
    and resources used in this presentation
    Monday, May 6, 13

    View full-size slide

  70. THANKS!
    twitter.com/joshriggs
    dribbble.com/joshriggs
    [email protected]
    lullabot.com
    Monday, May 6, 13

    View full-size slide