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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. #zombielibrary
    WHY?

    View full-size slide

  5. #zombielibrary

    View full-size slide

  6. INTERFACES
    ZOMBIE

    View full-size slide

  7. #zombielibrary
    DESIGN PROCESS
    RETHINKING THE

    View full-size slide

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

    View full-size slide

  9. #zombielibrary

    View full-size slide

  10. #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 full-size slide

  11. #zombielibrary
    DESIGN
    DESIGNING WITH PATTERNS

    View full-size slide

  12. #zombielibrary
    DESIGN SLICE
    DESIGNING WITH PATTERNS

    View full-size slide

  13. #zombielibrary
    DESIGN SLICE
    DESIGNING WITH PATTERNS

    View full-size slide

  14. #zombielibrary
    DESIGN SLICE ASSEMBLE
    DESIGNING WITH PATTERNS

    View full-size slide

  15. #zombielibrary
    DESIGN
    TOOLS

    View full-size slide

  16. #zombielibrary
    DESIGN
    TOOLS

    View full-size slide

  17. #zombielibrary

    View full-size slide

  18. #zombielibrary

    View full-size slide

  19. #zombielibrary

    View full-size slide

  20. #zombielibrary

    View full-size slide

  21. #zombielibrary

    View full-size slide

  22. #zombielibrary

    View full-size slide

  23. #zombielibrary
    BREAKS DOWN
    WHERE THE DESIGN PROCESS

    View full-size slide

  24. #zombielibrary
    DESIGNERS
    DEVELOPERS
    DISCOVER DESIGN
    DEVELOP TEST

    View full-size slide

  25. #zombielibrary
    BROKEN
    TRADITIONAL HANDOFF IS

    View full-size slide

  26. #zombielibrary
    DISCOVER DESIGN
    DEVELOP
    TEST

    View full-size slide

  27. #zombielibrary
    DISCOVER DESIGN
    DEVELOP
    TEST

    View full-size slide

  28. #zombielibrary
    SLICE
    DESIGNING WITH PATTERNS
    ASSEMBLE
    DESIGN

    View full-size slide

  29. #zombielibrary
    PATTERN LIBRARY
    DESIGNING WITH PATTERNS
    ASSEMBLE
    DESIGN

    View full-size slide

  30. #zombielibrary

    View full-size slide

  31. #zombielibrary

    View full-size slide

  32. #zombielibrary

    View full-size slide

  33. #zombielibrary

    View full-size slide

  34. #zombielibrary
    WASTE
    ELIMINATE

    View full-size slide

  35. #zombielibrary
    THE
    EVOLVING
    DESIGNER

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. #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 full-size slide

  43. #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 full-size slide

  44. #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 full-size slide

  45. PATTERN
    LIBRARIES
    ZOMBIE

    View full-size slide

  46. #zombielibrary
    GETTING STARTED
    (TODAY)

    View full-size slide

  47. #zombielibrary
    TAKE AN INVENTORY
    1

    View full-size slide

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

    View full-size slide

  49. #zombielibrary
    DOCUMENT EACH PATTERN
    2

    View full-size slide

  50. #zombielibrary
    BASIC DOCUMENTATION
    Name
    Description
    Example
    Code Snippet

    View full-size slide

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

    View full-size slide

  52. #zombielibrary
    BREAK UP YOUR
    COMPONENTS

    View full-size slide

  53. #zombielibrary
    NAMESPACE
    THE CSS

    View full-size slide

  54. #zombielibrary
    FIND IN
    PROJECT IS
    YOUR FRIEND

    View full-size slide

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

    View full-size slide

  56. #zombielibrary
    DON’T FORGET
    JAVASCRIPT!

    View full-size slide

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

    View full-size slide

  58. #zombielibrary
    CSS DOCUMENTATION
    1

    View full-size slide

  59. #zombielibrary
    1

    View full-size slide

  60. #zombielibrary
    STATIC SITE GENERATION
    2

    View full-size slide

  61. #zombielibrary

    View full-size slide

  62. #zombielibrary
    APPLICATION / PLATFORM
    3

    View full-size slide

  63. #zombielibrary

    View full-size slide

  64. #zombielibrary
    BETTER WAY
    THERE HAS TO BE A

    View full-size slide

  65. #zombielibrary

    View full-size slide

  66. #zombielibrary

    View full-size slide

  67. #zombielibrary

    View full-size slide

  68. #zombielibrary

    View full-size slide

  69. #zombielibrary

    View full-size slide

  70. http://patternpack.org/

    View full-size slide

  71. #zombielibrary
    GET STARTED WITH
    PATTERN
    PACK

    View full-size slide

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

    View full-size slide

  73. #zombielibrary
    $ npm init

    View full-size slide

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

    View full-size slide

  75. #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 full-size slide

  76. #zombielibrary
    $ grunt patternpack

    View full-size slide

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

    View full-size slide

  78. #zombielibrary
    CREATE YOUR FIRST
    PATTERN

    View full-size slide

  79. #zombielibrary

    View full-size slide

  80. #zombielibrary

    View full-size slide

  81. #zombielibrary

    View full-size slide

  82. #zombielibrary

    View full-size slide

  83. #zombielibrary

    View full-size slide

  84. #zombielibrary

    View full-size slide

  85. #zombielibrary

    View full-size slide

  86. #zombielibrary

    View full-size slide

  87. #zombielibrary
    UNLEASH YOUR
    CREATION

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  93. #zombielibrary
    INTEGRATE INTO YOUR
    APPLICATION

    View full-size slide

  94. #zombielibrary
    $ npm install

    View full-size slide

  95. #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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  99. #zombielibrary
    $ npm install

    View full-size slide

  100. #zombielibrary

    View full-size slide

  101. #zombielibrary

    View full-size slide

  102. #zombielibrary

    View full-size slide

  103. #zombielibrary
    DESIGN PROCESS
    RETHINKING THE

    View full-size slide

  104. #zombielibrary
    DISCOVER DESIGN
    DEVELOP
    TEST
    Sketch
    PatternPack

    View full-size slide

  105. INTERFACES
    FIGHT ZOMBIE

    View full-size slide

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

    View full-size slide