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

Fight the Zombie Pattern Library

Marcelo Somers
September 18, 2015

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.

Marcelo Somers

September 18, 2015
Tweet

More Decks by Marcelo Somers

Other Decks in Design

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:[email protected]/jondoe/my-awesome-pattern-library.git

    View Slide

  115. #zombielibrary
    USERNAME &
    PASSWORD:
    https://user:[email protected]/jondoe/my-awesome-pattern-library.git#1.0.0

    View Slide

  116. #zombielibrary
    GIT
    REPOSITORY
    USERNAME &
    PASSWORD:
    https://user:[email protected]/jondoe/my-awesome-pattern-library.git#1.0.0

    View Slide

  117. #zombielibrary
    VERSION
    COMMITISH
    GIT
    REPOSITORY
    https://user:[email protected]/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