The Zen of HTML Prototyping and Designing in the Browser

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

Transcript

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

   View Slide

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

   View 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 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 Slide

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

   View Slide

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

   View Slide

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

   View 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 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 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 Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. YES.
    Monday, May 6, 13
    

    View Slide

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

    View Slide

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

    View 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 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 Slide

39. SKETCH
    FIRST!
    Monday, May 6, 13
    

    View Slide

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

    View 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 Slide

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

    View 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 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 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 Slide

46. LET’S TALK GEAR
    
    Monday, May 6, 13
    

    View Slide

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

    View 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 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 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 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 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 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

70. THANKS!
    twitter.com/joshriggs
    dribbble.com/joshriggs
    josh.riggs@gmail.com
    lullabot.com
    Monday, May 6, 13
    

    View Slide