Fight the Zombie Pattern Library

Video is available https://youtu.be/6zOe_uyKF3A

In "Fight the Zombie Pattern Library," presented at the Big Design Conference 2015 in Dallas, TX, we look at repeatable processes to implement Pattern Libraries in your product design and development workflow, so you can fight the slow rot of your interface design (and its underlying code) as your product grows and evolves.

These same processes can be used to "build a tiny Bootstrap" for every client and keep developers using them every day.

We also debut PatternPack (http://patternpack.org/), an open source tool for designing and building your interface, and then sharing the code.

Transcript

1. #zombielibrary
   PATTERN
   LIBRARY
   ZOMBIE
   FIGHT
   THE
   Big Design Conference • 09.18.15
   John Gully
   Solution Principal, App Dev
   Marcelo Somers
   Solution Architect, User Experience
   #zombielibrary
   

   View Slide

2. View Slide

3. View Slide

4. http://www.slideshare.net/bradfrostweb/style-guide-best-practices
   

   View Slide

5. http://www.slideshare.net/bradfrostweb/style-guide-best-practices
   

   View Slide

6. #zombielibrary
   WHY?
   

   View Slide

7. #zombielibrary
   

   View Slide

8. View Slide

9. View Slide

10. INTERFACES
    ZOMBIE
    

    View Slide

11. #zombielibrary
    DESIGN PROCESS
    RETHINKING THE
    

    View Slide

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

    View Slide

13. #zombielibrary
    

    View Slide

14. View Slide

15. #zombielibrary
    BUILD A TINY
    BOOTSTRAP
    https://speakerdeck.com/mdo/build-your-own-bootstrap
    – Mark Otto (Creator of Bootstrap) & Dave Rupert
    http://daverupert.com/2013/04/responsive-deliverables/
    

    View Slide

16. #zombielibrary
    DESIGN
    DESIGNING WITH PATTERNS
    

    View Slide

17. #zombielibrary
    DESIGN SLICE
    DESIGNING WITH PATTERNS
    

    View Slide

18. #zombielibrary
    DESIGN SLICE
    DESIGNING WITH PATTERNS
    

    View Slide

19. #zombielibrary
    DESIGN SLICE ASSEMBLE
    DESIGNING WITH PATTERNS
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. #zombielibrary
    DESIGN
    TOOLS
    

    View Slide

25. #zombielibrary
    DESIGN
    TOOLS
    

    View Slide

26. #zombielibrary
    

    View Slide

27. #zombielibrary
    

    View Slide

28. #zombielibrary
    

    View Slide

29. #zombielibrary
    

    View Slide

30. #zombielibrary
    

    View Slide

31. #zombielibrary
    

    View Slide

32. #zombielibrary
    BREAKS DOWN
    WHERE THE DESIGN PROCESS
    

    View Slide

33. #zombielibrary
    DESIGNERS
    DEVELOPERS
    DISCOVER DESIGN
    DEVELOP TEST
    

    View Slide

34. #zombielibrary
    BROKEN
    TRADITIONAL HANDOFF IS
    

    View Slide

35. #zombielibrary
    DISCOVER DESIGN
    DEVELOP
    TEST
    

    View Slide

36. #zombielibrary
    DISCOVER DESIGN
    DEVELOP
    TEST
    

    View Slide

37. #zombielibrary
    SLICE
    DESIGNING WITH PATTERNS
    ASSEMBLE
    DESIGN
    

    View Slide

38. #zombielibrary
    PATTERN LIBRARY
    DESIGNING WITH PATTERNS
    ASSEMBLE
    DESIGN
    

    View Slide

39. View Slide

40. #zombielibrary
    

    View Slide

41. #zombielibrary
    

    View Slide

42. #zombielibrary
    

    View Slide

43. #zombielibrary
    

    View Slide

44. #zombielibrary
    WASTE
    ELIMINATE
    

    View Slide

45. #zombielibrary
    THE
    EVOLVING
    DESIGNER
    

    View Slide

46. #zombielibrary
    LIVE
    WHERE DOES THE PATTERN LIBRARY
    IN YOUR PROCESS?
    

    View Slide

47. #zombielibrary
    https://css-tricks.com/where-style-guides-fit-into-process/
    DESIGN &
    DEVELOPMENT
    PRODUCTION
    WEBSITE
    STYLE
    GUIDE
    THE SIDELINES
    

    View Slide

48. #zombielibrary
    https://css-tricks.com/where-style-guides-fit-into-process/
    DESIGN &
    DEVELOPMENT PRODUCTION
    WEBSITE STYLE
    GUIDE
    THE EXHAUST
    

    View Slide

49. #zombielibrary
    https://css-tricks.com/where-style-guides-fit-into-process/
    DESIGN &
    DEVELOPMENT STYLE
    GUIDE PRODUCTION
    WEBSITE
    THE DICTATOR
    

    View Slide

50. #zombielibrary
    STYLE GUIDE
    MATURITY
    MODEL
    INCONSISTENT
    Different apps are styled inconsistently
    #zombielibrary
    

    View Slide

51. #zombielibrary
    STYLE GUIDE
    MATURITY
    MODEL
    INCONSISTENT
    Different apps are styled inconsistently
    ONE-TIME
    A static style guide document gives basic direction
    #zombielibrary
    

    View Slide

52. #zombielibrary
    STYLE GUIDE
    MATURITY
    MODEL
    INCONSISTENT
    Different apps are styled inconsistently
    ONE-TIME
    A static style guide document gives basic direction
    MANUAL
    A pattern library has been built, but must be manually updated
    #zombielibrary
    

    View Slide

53. #zombielibrary
    STYLE GUIDE
    MATURITY
    MODEL
    INCONSISTENT
    Different apps are styled inconsistently
    ONE-TIME
    A static style guide document gives basic direction
    MANUAL
    A pattern library has been built, but must be manually updated
    AUTOMATED
    The pattern library shares code with the app(s)
    #zombielibrary
    

    View Slide

54. #zombielibrary
    STYLE GUIDE
    MATURITY
    MODEL
    INCONSISTENT
    Different apps are styled inconsistently
    ONE-TIME
    A static style guide document gives basic direction
    MANUAL
    A pattern library has been built, but must be manually updated
    AUTOMATED
    The pattern library shares code with the app(s)
    TEAM
    A dedicated team
    maintains the pattern library
    #zombielibrary
    

    View Slide

55. PATTERN
    LIBRARIES
    ZOMBIE
    

    View Slide

56. #zombielibrary
    GETTING STARTED
    (TODAY)
    

    View Slide

57. #zombielibrary
    TAKE AN INVENTORY
    1
    

    View Slide

58. View Slide

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

    View Slide

60. #zombielibrary
    DOCUMENT EACH PATTERN
    2
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. #zombielibrary
    BASIC DOCUMENTATION
    Name
    Description
    Example
    Code Snippet
    

    View Slide

69. #zombielibrary
    BEGIN WITH THE END IN MIND
    3
    REFACTOR TO PERFECTION
    4
    

    View Slide

70. #zombielibrary
    BREAK UP YOUR
    COMPONENTS
    

    View Slide

71. #zombielibrary
    NAMESPACE
    THE CSS
    

    View Slide

72. #zombielibrary
    FIND IN
    PROJECT IS
    YOUR FRIEND
    

    View Slide

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

    View Slide

74. #zombielibrary
    DON’T FORGET
    JAVASCRIPT!
    

    View Slide

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

    View Slide

76. #zombielibrary
    CSS DOCUMENTATION
    1
    

    View Slide

77. #zombielibrary
    1
    

    View Slide

78. #zombielibrary
    STATIC SITE GENERATION
    2
    

    View Slide

79. #zombielibrary
    

    View Slide

80. #zombielibrary
    APPLICATION / PLATFORM
    3
    

    View Slide

81. #zombielibrary
    

    View Slide

82. #zombielibrary
    BETTER WAY
    THERE HAS TO BE A
    

    View Slide

83. View Slide

84. #zombielibrary
    

    View Slide

85. #zombielibrary
    

    View Slide

86. #zombielibrary
    

    View Slide

87. #zombielibrary
    

    View Slide

88. #zombielibrary
    

    View Slide

89. http://patternpack.org/
    

    View Slide

90. #zombielibrary
    GET STARTED WITH
    PATTERN
    PACK
    

    View Slide

91. #zombielibrary
    https://github.com/patternpack/patternpack-example-library
    

    View Slide

92. #zombielibrary
    $ npm init
    

    View Slide

93. #zombielibrary
    $ npm install patternpack --save-dev
    

    View Slide

94. #zombielibrary
    module.exports = function(grunt) {
    grunt.initConfig({
    patternpack: {
    options: {
    assets: './src/assets'
    },
    run: {},
    build: {},
    release: {}
    }
    });
    grunt.loadNpmTasks('patternpack');
    grunt.registerTask('default', ['patternpack:run']);
    }
    gruntfile.js
    

    View Slide

95. #zombielibrary
    $ grunt patternpack
    

    View Slide

96. #zombielibrary
    http://localhost:8080/
    

    View Slide

97. #zombielibrary
    CREATE YOUR FIRST
    PATTERN
    

    View Slide

98. #zombielibrary
    

    View Slide

99. #zombielibrary
    

    View Slide

100. #zombielibrary
     

     View Slide

101. #zombielibrary
     

     View Slide

102. #zombielibrary
     

     View Slide

103. #zombielibrary
     

     View Slide

104. #zombielibrary
     

     View Slide

105. #zombielibrary
     

     View Slide

106. #zombielibrary
     UNLEASH YOUR
     CREATION
     

     View Slide

107. #zombielibrary
     Use Semantic Versioning
     in your design system
     VERSIONING:
     

     View Slide

108. #zombielibrary
     1.0.5
     major
     release
     minor
     release
     patch
     release
     breaking
     changes
     new
     patterns
     bugfixes
     

     View Slide

109. #zombielibrary
     1.0.5
     major
     release
     minor
     release
     patch
     release
     breaking
     changes
     new
     patterns
     bugfixes
     Customize to your needs
     

     View Slide

110. #zombielibrary
     DEVELOP
     RELEASE 2.0
     BUG 2.0.1
     VERSIONING RELEASES
     3.0.1 3.1.0 3.2.0
     

     View Slide

111. #zombielibrary
     $ grunt patternpack:build
     $ grunt patternpack:release
     $ git push --save-dev
     

     View Slide

112. #zombielibrary
     INTEGRATE INTO YOUR
     APPLICATION
     

     View Slide

113. #zombielibrary
     $ npm install
     

     View Slide

114. #zombielibrary
     package.json | bower.json
     {
     dependencies: {
     my-awesome-pattern-library: …,
     …
     }
     }
     Support for both npm & bower
     ADD A DEPENDENCY:
     https://user:pass@bitbucket.org/jondoe/my-awesome-pattern-library.git
     

     View Slide

115. #zombielibrary
     USERNAME &
     PASSWORD:
     https://user:pass@bitbucket.org/jondoe/my-awesome-pattern-library.git#1.0.0
     

     View Slide

116. #zombielibrary
     GIT
     REPOSITORY
     USERNAME &
     PASSWORD:
     https://user:pass@bitbucket.org/jondoe/my-awesome-pattern-library.git#1.0.0
     

     View Slide

117. #zombielibrary
     VERSION
     COMMITISH
     GIT
     REPOSITORY
     https://user:pass@bitbucket.org/jondoe/my-awesome-pattern-library.git#1.0.0
     USERNAME &
     PASSWORD:
     

     View Slide

118. #zombielibrary
     $ npm install
     

     View Slide

119. #zombielibrary
     

     View Slide

120. #zombielibrary
     

     View Slide

121. #zombielibrary
     

     View Slide

122. #zombielibrary
     DESIGN PROCESS
     RETHINKING THE
     

     View Slide

123. #zombielibrary
     DISCOVER DESIGN
     DEVELOP
     TEST
     Sketch
     PatternPack
     

     View Slide

124. INTERFACES
     FIGHT ZOMBIE
     

     View Slide

125. MODULARIZE
     

     View Slide

126. DOCUMENT
     

     View Slide

127. SHARE
     

     View Slide

128. #zombielibrary
     THANK YOU!
     John Gully
     @johngully
     Marcelo Somers
     @marcelosomers
     Slides
     http://j.mp/zombie-library
     PatternPack
     http://patternpack.org/
     

     View Slide