Getting Real with Responsive Wireframes

From Artifact East, 2013

Transcript

1. Jared Ponchot // @jponch // Artifact East 2013
   With Responsive Wireframes
   GETTING REAL
   

   View Slide

2. HI, MY NAME IS
   JARED PONCHOT
   & I’m a unicorn
   

   View Slide

3. 1.
   WHY WIREFRAME
   2.
   WHY HTLM WIREFRAMES
   3.
   HOW TO
   

   View Slide

4. BLESSING!
   

   View Slide

5. WHY WIREFRAME
   

   View Slide

6. View Slide

7. CHEAP & UGLY
   

   View Slide

8. FURTHER CLARIFY ...
   CONTENT, STRUCTURE &
   PRIORITY
   

   View Slide

9. LIGHT-WEIGHT, LIVING
   DELIVERABLES
   

   View Slide

10. DISPLAY MODEL
    ‣ Capture the types of displays your site will need
    ‣ Brainstorm the components for each display
    ‣ Prioritize the components for each display
    ‣ Discover patterns
    ‣ Identify the unique things to design for and with
    

    View Slide

11. DISPLAY
    MODEL WIREFRAME
    

    View Slide

12. PURPOSE CONTENT
    STYLE
    STRATEGY
    DESIGN
    DEVELOPMENT
    

    View Slide

13. PURPOSE CONTENT
    STYLE
    WIREFRAMES
    

    View Slide

14. PURPOSE, NOT PREFERENCE
    PRIORITY, NOT PLACEMENT
    SYSTEMS, NOT PAGES
    

    View Slide

15. “
    — Victor Papanek
    DESIGN IS THE CONSCIOUS EFFORT
    TO IMPOSE A MEANINGFUL ORDER
    

    View Slide

16. WHY
    HTML WIREFRAMES?
    

    View Slide

17. http://imgur.com/a/q1WIO
    

    View Slide

18. View Slide

19. View Slide

20. Photo by lukew http://www.flickr.com/photos/lukew/7382743430/in/photostream
    

    View Slide

21. “
    — from 37Signals “Getting Real”
    GETTING REAL DELIVERS BETTER RESULTS
    BECAUSE IT FORCES YOU TO DEAL WITH
    THE ACTUAL PROBLEMS YOU'RE TRYING
    TO SOLVE INSTEAD OF YOUR IDEAS ABOUT
    THOSE PROBLEMS. IT FORCES YOU TO
    DEAL WITH REALITY.
    

    View Slide

22. “
    — from the Agile Manifesto
    WORKING SOFTWARE ALWAYS TRUMPS
    DOCUMENTS ABOUT WORKING SOFTWARE.
    

    View Slide

23. BONUS REASON:
    IT’S NOT THAT HARD!
    

    View Slide

24. USE A FRAMEWORK
    ROLL YOUR OWN?
    or
    

    View Slide

25. FRAMEWORK PROS
    ‣ Low learning curve
    ‣ Speed
    ‣ Built-in grid
    ‣ Built-in styles
    ‣ Built-in components (some)
    ‣ Pre-tested in browsers
    ‣ Open-source community
    ‣ Widespread use
    ‣ Support
    ‣ Upgrades & updates
    ‣ Easy knowledge transfer
    

    View Slide

26. FRAMEWORK CONS
    ‣ Working with someone else’s code
    ‣ Learning curve
    ‣ Might not be the best fit for your situation
    

    View Slide

27. ROLL YOUR OWN PROS
    ‣ Ownership
    ‣ Flexibility
    ‣ Customization
    ‣ More likely creates HTML/styles for final product
    ‣ Build up your own component / style library
    

    View Slide

28. ROLL YOUR OWN CONS
    ‣ Initial time/thought investment
    ‣ Lots of choices to be made (grid, directory structure, etc.)
    ‣ Possibly longer implementation time
    ‣ On your own for support & testing
    ‣ Create your own documentation
    

    View Slide

29. PROTOTYPING FRAMEWORKS
    ‣Twitter Bootsrap
    ‣Zurb Foundation
    ‣ Gumby
    ‣ Wirefy
    ‣ Proty
    ‣ Skeleton
    ‣ 320 and up
    ‣ and so on ...
    

    View Slide

30. BOOTSTRAP
    Pros
    ‣ Popular
    ‣ Lots of documentation
    ‣ 4 default break points
    ‣ Templates & Components
    ‣ Active development
    Cons
    ‣ Not semantic
    ‣ Not mobile first (now mobile first)
    

    View Slide

31. FOUNDATION
    Pros
    ‣ Popular
    ‣ Mobile first
    ‣ Optionally semantic
    ‣ Templates & Components
    ‣ Active development
    ‣ Paid training available
    Cons
    ‣ Only 1 default break point
    (small/large)
    

    View Slide

32. GETTING STARTED WITH
    FOUNDATION
    

    View Slide

33. THE PLACES YOU’LL GO
    ‣ DOWNLOAD: http://foundation.zurb.com
    ‣ DOCUMENTATION: http://foundation.zurb.com/docs/
    ‣ TEMPLATES: http://foundation.zurb.com/templates.php
    

    View Slide

34. GETTING STARTED
    ‣ Grid
    ‣ Templates
    ‣ Other Goodies
    

    View Slide

35. THE GRID
    ‣ 12 columns (small and large)
    ‣ Nestable
    ‣ Fluid, with an arbitrary max-width
    

    View Slide

36. x = number of grid columns
    Small screen: “small-x columns”
    Large screen: “large-x columns”
    

    View Slide

37. 
    ...
    
    

    View Slide

38. small-12 large-6
    
    ...
    
    

    View Slide

39. small-12
    
    ...
    
    

    View Slide

40. small-12 large-8 large-offset-4
    
    ...
    
    

    View Slide

41. small-12 large-8 large-offset-3
    
    ...
    ...
    
    

    View Slide

42. small-10 large-8 large-centered
    
    ...
    
    

    View Slide

43. small-10 large-8 large-uncentered
    
    ...
    
    

    View Slide

44. small-12 large-8 & large-4
    
    ...
    ...
    
    

    View Slide

45. small-8 within small-12
    small-8 within large-5
    
    
    
    ...
    
    
    
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. COMPONENTS & ELEMENTS
    ‣ Navigation
    ‣ Buttons
    ‣ Forms
    ‣ Typography
    ‣ Components
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. LET’S GIVE IT A TRY!
    

    View Slide

58. Site Name
    Portfolio Item Portfolio Item Portfolio Item
    Portfolio Item
    Legal text
    Portfolio Item Portfolio Item
    Navigation
    Portfolio Item Portfolio Item
    Portfolio Item Portfolio Item
    Portfolio Item Portfolio Item
    Legal text
    Menu
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. Site Name
    Portfolio Item Portfolio Item Portfolio Item
    Portfolio Item
    Legal text
    Portfolio Item Portfolio Item
    Navigation
    Portfolio Item Portfolio Item
    Portfolio Item Portfolio Item
    Portfolio Item Portfolio Item
    Legal text
    Menu
    

    View Slide

71. View Slide

72. View Slide

73. I’M PARTIAL TO PARTIALS
    

    View Slide

74. View Slide

75. View Slide

76. 
    

    View Slide

77. INDEX.HTML
    ‣ index.kit
    ‣ Document Head
    ‣ Primary Navigation
    ‣ Global Footer
    ‣ Document Foot
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. LESSONS FROM
    THE FRONT LINES
    

    View Slide

85. HELPFUL TIPS
    ‣ Keep sketching
    ‣ Keep innovating
    ‣ Keep it cheap
    ‣ Keep iterating
    

    View Slide

86. TA DA!
    Jared Ponchot // @jponch // Artifact East 2013
    

    View Slide

87. HELPFUL LINKS
    ‣ http://foundation.zurb.com
    ‣ http://html5boilerplate.com
    ‣ http://incident57.com/codekit/
    ‣ http://html5doctor.com
    ‣ http://www.dontfeartheinternet.com/
    html/html
    ‣ http://www.codeschool.com/courses/
    assembling-sass
    ‣ http://bradfrost.github.io/this-is-
    responsive/resources.html#frameworks
    

    View Slide