Fight the Zombie Pattern Library - RWD Summit 2016

Transcript

1. #RWDSummit
   PATTERN
   LIBRARY
   ZOMBIE
   FIGHT
   THE
   Responsive Web Design Summit • 03.29.16
   Marcelo Somers
   Solution Architect, User Experience
   @marcelosomers
   

   View Slide

2. #RWDSummit
   Front-end style guides are a modular collection of all the elements in
   your product’s user interface, together with code snippets for
   developers to copy and paste as needed to implement those
   elements. They include common UI components like buttons, form-
   input elements, navigation menus, modal overlays, and icons.
   “
   – Lean UX
   

   View Slide

3. PATTERN LIBRARIES
   ZOMBIE
   

   View Slide

4. #RWDSummit
   How do you keep living,
   knowing that’s what
   the world is like?”
   “ building interfaces
   

   View Slide

5. #RWDSummit
   DESIGN PROCESS
   RETHINKING THE
   

   View Slide

6. #RWDSummit
   BUILD
   SYSTEMS
   NOT
   PAGES
   http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
   -Andy Clarke
   

   View Slide

7. View Slide

8. #RWDSummit
   BUILD A TINY
   BOOTSTRAP
   https://speakerdeck.com/mdo/build-your-own-bootstrap
   – Mark Otto & Dave Rupert
   http://daverupert.com/2013/04/responsive-deliverables/
   

   View Slide

9. #RWDSummit
   DESIGN
   DESIGNING WITH PATTERNS
   

   View Slide

10. #RWDSummit
    DESIGN SLICE
    DESIGNING WITH PATTERNS
    

    View Slide

11. #RWDSummit
    DESIGN SLICE ASSEMBLE
    DESIGNING WITH PATTERNS
    

    View Slide

12. #RWDSummit
    DESIGN
    TOOLS
    

    View Slide

13. #RWDSummit
    

    View Slide

14. #RWDSummit
    

    View Slide

15. #RWDSummit
    

    View Slide

16. #RWDSummit
    

    View Slide

17. #RWDSummit
    

    View Slide

18. #RWDSummit
    

    View Slide

19. #RWDSummit
    BREAKS DOWN
    WHERE THE DESIGN PROCESS
    

    View Slide

20. #RWDSummit
    DESIGNERS
    DEVELOPERS
    DISCOVER DESIGN
    DEVELOP TEST
    

    View Slide

21. #RWDSummit
    BROKEN
    TRADITIONAL HANDOFF IS
    

    View Slide

22. #RWDSummit
    DISCOVER DESIGN
    DEVELOP
    TEST
    

    View Slide

23. #RWDSummit
    PATTERN LIBRARY
    SLICE
    DESIGNING WITH PATTERNS
    ASSEMBLE
    DESIGN
    

    View Slide

24. #RWDSummit
    

    View Slide

25. #RWDSummit
    

    View Slide

26. #RWDSummit
    

    View Slide

27. #RWDSummit
    

    View Slide

28. #RWDSummit
    WASTE
    ELIMINATE
    

    View Slide

29. #RWDSummit
    THE
    EVOLVING
    DESIGNER
    

    View Slide

30. #RWDSummit
    I can shift the bulk of my time and energy to
    looking at the bigger picture. I can think more
    widely about our users’ journey through our
    product and give attention to more than
    baseline functionality.
    “
    – Katey Basye (Salesforce UX)
    https://medium.com/salesforce-ux/how-the-salesforce-design-system-helped-me-onboard-as-a-new-product-designer-92b7d5f42237#.6brzoe1fu
    

    View Slide

31. #RWDSummit
    LIVE
    WHERE DOES THE PATTERN LIBRARY
    IN YOUR PROCESS?
    

    View Slide

32. #RWDSummit
    STYLE GUIDE
    MATURITY
    MODEL
    #RWDSummit
    https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba
    Inconsistent
    The absence of a design system
    Static
    A one-time PDF of your brand guidelines
    Manual
    The pattern library has code, but must be manually updated
    Automatic
    The pattern library is a part of your app build process
    Governed
    The pattern library process is built in to your organization
    Ɠ
    Ó
    ¸
    Ŗ
    †
    This is the “chasm” that is hard for organizations to cross
    

    View Slide

33. View Slide

34. https://medium.com/@marcelosomers/chasing-the-holy-grail-bbc0b7cce365#.wvedzdvsx
    

    View Slide

35. #RWDSummit
    GETTING STARTED
    (TODAY)
    

    View Slide

36. #RWDSummit
    TAKE AN INVENTORY
    1
    

    View Slide

37. View Slide

38. Option List Group
    Seen On:
    • My Account » Account List
    • Send Money » Select Payment Option
    Desktop
    Mobile
    

    View Slide

39. https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517#.c887jlrum
    

    View Slide

40. #RWDSummit
    BASE STYLES
    1
    2 COMPONENTS
    3 PAGE TEMPLATES
    WHAT TO
    DOCUMENT
    

    View Slide

41. #RWDSummit
    https://www.nngroup.com/articles/front-end-style-guides/
    

    View Slide

42. #RWDSummit
    STANDARDIZE
    2
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. #RWDSummit
    DOCUMENT
    3
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. #RWDSummit
    BASIC
    DOCUMENTATION
    NAME
    1
    2 DESCRIPTION
    3 EXAMPLE
    3 CODE SNIPPET
    

    View Slide

57. #RWDSummit
    CENTRALIZE YOUR CSS
    3a
    

    View Slide

58. #RWDSummit
    DEFINE CSS STANDARDS
    4
    REFACTOR TO PERFECTION
    5
    

    View Slide

59. #RWDSummit
    START FUNCTIONAL
    http://www.basscss.com/ http://tachyons.io/
    

    View Slide

60. #RWDSummit
    BREAK UP YOUR
    COMPONENTS
    https://medium.com/@ahmedelgabri/global-scope-namespacing-css-681bda44c43e#.5i17q1gwv
    

    View Slide

61. #RWDSummit
    NAMESPACE
    THE CSS
    https://medium.com/@ahmedelgabri/global-scope-namespacing-css-681bda44c43e#.5i17q1gwv
    

    View Slide

62. #RWDSummit
    FIND IN
    PROJECT IS
    YOUR FRIEND
    

    View Slide

63. #RWDSummit
    REGEX SEARCH FOR CLASSES
    class\s*?=\s*?["'].*?table
    will find all instances where class=“ “ contains table
    

    View Slide

64. #RWDSummit
    DON’T FORGET
    JAVASCRIPT!
    

    View Slide

65. #RWDSummit
    GOVERN YOUR LIBRARY
    6
    

    View Slide

66. #RWDSummit
    https://css-tricks.com/what-a-css-code-review-might-look-like/
    

    View Slide

67. #RWDSummit
    https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system
    

    View Slide

68. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc
    SOLITARY
    

    View Slide

69. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc
    CENTRALIZED
    

    View Slide

70. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc
    FEDERATED
    

    View Slide

71. #RWDSummit
    Effective organizational design is more than drawing boxes and
    arrows, it flows from a thorough understanding of strategic
    objectives, takes into consideration both the formal and
    informal elements of the organizational units involved in the
    redesign and weighs the potential impact on the rest of the
    organization and its ability to fulfill strategic goals.
    “
    – Competing by Design, Nadler and Tushman
    

    View Slide

72. #RWDSummit
    Effective organizational design is more than drawing boxes and
    arrows, it flows from a thorough understanding of strategic
    objectives, takes into consideration both the formal and
    informal elements of the organizational units involved in the
    redesign and weighs the potential impact on the rest of the
    organization and its ability to fulfill strategic goals.
    “
    – Competing by Design, Nadler and Tushman
    

    View Slide

73. #RWDSummit
    Effective organizational design is more than drawing boxes and
    arrows, it flows from a thorough understanding of strategic
    objectives, takes into consideration both the formal and
    informal elements of the organizational units involved in the
    redesign and weighs the potential impact on the rest of the
    organization and its ability to fulfill strategic goals.
    “
    – Competing by Design, Nadler and Tushman
    

    View Slide

74. #RWDSummit
    Effective organizational design is more than drawing boxes and
    arrows, it flows from a thorough understanding of strategic
    objectives, takes into consideration both the formal and
    informal elements of the organizational units involved in the
    redesign and weighs the potential impact on the rest of the
    organization and its ability to fulfill strategic goals.
    “
    – Competing by Design, Nadler and Tushman
    

    View Slide

75. #RWDSummit
    WHY ARE WE DOING THIS?
    1
    HOW WILL IT FIT IN OUR ORGANIZATION?
    2
    WHO’S DOING THE WORK?
    4
    WHAT INVESTMENT ARE WE WILLING TO MAKE?
    3
    

    View Slide

76. #RWDSummit
    OPEN SOURCE
    CULTURE
    

    View Slide

77. #RWDSummit
    DOCUMENTATION
    GREAT
    

    View Slide

78. #RWDSummit
    EASY TO CONTRIBUTE
    MAKE IT
    

    View Slide

79. #RWDSummit
    MISTAKES
    FIND EASY
    

    View Slide

80. #RWDSummit
    NON-DEVELOPERS
    EMBRACE
    

    View Slide

81. #RWDSummit
    COMMUNICATE
    MAKE IT EASY TO
    

    View Slide

82. #RWDSummit
    ROADMAP
    OPEN & TRANSPARENT
    

    View Slide

83. #RWDSummit
    PATTERN LIBRARY
    TOOLS
    http://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/
    

    View Slide

84. #RWDSummit
    CSS DOCUMENTATION
    1
    

    View Slide

85. #RWDSummit
    1
    

    View Slide

86. #RWDSummit
    STATIC SITE GENERATION
    2
    

    View Slide

87. #RWDSummit
    

    View Slide

88. #RWDSummit
    INTEGRATED
    3
    

    View Slide

89. #RWDSummit
    

    View Slide

90. #RWDSummit
    BETTER WAY
    THERE HAS TO BE A
    

    View Slide

91. http://patternpack.org/
    

    View Slide

92. #RWDSummit
    

    View Slide

93. #ZombieLibrary
    GET STARTED WITH
    PATTERN
    PACK
    

    View Slide

94. #ZombieLibrary
    https://github.com/patternpack/patternpack-example-library
    

    View Slide

95. #ZombieLibrary
    $ npm init
    $ git init
    

    View Slide

96. #ZombieLibrary
    $ npm install grunt patternpack --save-dev
    

    View Slide

97. #ZombieLibrary
    module.exports = function(grunt) {
    grunt.initConfig({
    patternpack: {
    run: {},
    build: {},
    release: {}
    }
    });
    grunt.loadNpmTasks('patternpack');
    grunt.registerTask('default', ['patternpack:run']);
    }
    gruntfile.js
    

    View Slide

98. #ZombieLibrary
    $ grunt patternpack:run
    

    View Slide

99. #ZombieLibrary
    

    View Slide

100. #ZombieLibrary
     CREATE YOUR FIRST
     PATTERN
     

     View Slide

101. #ZombieLibrary
     

     View Slide

102. #ZombieLibrary
     

     View Slide

103. #ZombieLibrary
     

     View Slide

104. #ZombieLibrary
     

     View Slide

105. #ZombieLibrary
     

     View Slide

106. #ZombieLibrary
     

     View Slide

107. #ZombieLibrary
     

     View Slide

108. #ZombieLibrary
     

     View Slide

109. #ZombieLibrary
     

     View Slide

110. #ZombieLibrary
     UNLEASH YOUR
     CREATION
     

     View Slide

111. #ZombieLibrary
     USE SEMANTIC VERSIONING
     FOR YOUR DESIGN SYSTEM
     

     View Slide

112. #ZombieLibrary
     1.0.5
     major
     release
     minor
     release
     patch
     release
     

     View Slide

113. #ZombieLibrary
     1.0.5
     major
     release
     minor
     release
     patch
     release
     Customize to your needs
     

     View Slide

114. #ZombieLibrary
     $ grunt patternpack:release
     $ git push --follow-tags
     

     View Slide

115. #ZombieLibrary
     BUILD YOUR STATIC SITE
     1
     INCREMENT YOUR VERSION
     2
     CREATE A NEW COMMIT
     3
     TAG THE COMMIT
     4
     

     View Slide

116. #ZombieLibrary
     INTEGRATE INTO YOUR
     APPLICATION
     

     View Slide

117. https://medium.com/@marcelosomers/chasing-the-holy-grail-bbc0b7cce365#.wvedzdvsx
     

     View Slide

118. #ZombieLibrary
     SUPPORT FOR
     NPM &
     BOWER
     

     View Slide

119. #ZombieLibrary
     $ npm install my-awesome-pattern-library
     

     View Slide

120. #ZombieLibrary
     $ npm install https://user:[email protected]/user/my-
     awesome-library.git
     

     View Slide

121. #ZombieLibrary
     ANATOMY OF A PACKAGE.JSON DEPENDENCY
     "devDependencies": {
     “my-awesome-pattern-library“: "https://user:[email protected]/jondoe/
     my-awesome-pattern-library.git#1.0.0"
     }
     

     View Slide

122. #ZombieLibrary
     USERNAME &
     PASSWORD
     ANATOMY OF A PACKAGE.JSON DEPENDENCY
     "devDependencies": {
     “my-awesome-pattern-library“: "https://user:[email protected]/jondoe/
     my-awesome-pattern-library.git#1.0.0"
     }
     

     View Slide

123. #ZombieLibrary
     ANATOMY OF A PACKAGE.JSON DEPENDENCY
     "devDependencies": {
     “my-awesome-pattern-library“: "https://user:[email protected]/jondoe/
     my-awesome-pattern-library.git#1.0.0"
     }
     PATH TO GIT
     REPOSITORY
     

     View Slide

124. #ZombieLibrary
     ANATOMY OF A PACKAGE.JSON DEPENDENCY
     "devDependencies": {
     “my-awesome-pattern-library“: "https://user:[email protected]/jondoe/
     my-awesome-pattern-library.git#1.0.0"
     }
     VERSION
     COMMITISH
     

     View Slide

125. #ZombieLibrary
     

     View Slide

126. #ZombieLibrary
     

     View Slide

127. #ZombieLibrary
     

     View Slide

128. http://patternpack.org/
     

     View Slide

129. #ZombieLibrary
     THIS IS MORE THAN JUST A
     TECH PROBLEM
     

     View Slide

130. INTERFACES
     FIGHT ZOMBIE
     

     View Slide

131. MODULARIZE
     

     View Slide

132. DOCUMENT
     

     View Slide

133. SHARE
     

     View Slide

134. #ZombieLibrary
     THANK YOU!
     Marcelo Somers
     @marcelosomers
     Slides
     http://j.mp/zombie-library-rwdsummit
     PatternPack
     http://patternpack.org/
     

     View Slide