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

Fight the Zombie Pattern Library - RWD Summit 2016

Fight the Zombie Pattern Library - RWD Summit 2016

In "Fight the Zombie Pattern Library," presented at the Responsive Web Design Summit in 2016, 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 look at PatternPack (http://patternpack.org/), an open source tool for designing and building your interface, and then sharing the code. For more on getting started with PatternPack, check out the guides and resources (https://github.com/patternpack/patternpack/blob/master/docs/docs.md)

Marcelo Somers

March 29, 2016
Tweet

More Decks by Marcelo Somers

Other Decks in Design

Transcript

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

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

  3. PATTERN LIBRARIES
    ZOMBIE

    View full-size slide

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

    View full-size slide

  5. #RWDSummit
    DESIGN PROCESS
    RETHINKING THE

    View full-size slide

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

    View full-size slide

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

  8. #RWDSummit
    DESIGN
    DESIGNING WITH PATTERNS

    View full-size slide

  9. #RWDSummit
    DESIGN SLICE
    DESIGNING WITH PATTERNS

    View full-size slide

  10. #RWDSummit
    DESIGN SLICE ASSEMBLE
    DESIGNING WITH PATTERNS

    View full-size slide

  11. #RWDSummit
    DESIGN
    TOOLS

    View full-size slide

  12. #RWDSummit
    BREAKS DOWN
    WHERE THE DESIGN PROCESS

    View full-size slide

  13. #RWDSummit
    DESIGNERS
    DEVELOPERS
    DISCOVER DESIGN
    DEVELOP TEST

    View full-size slide

  14. #RWDSummit
    BROKEN
    TRADITIONAL HANDOFF IS

    View full-size slide

  15. #RWDSummit
    DISCOVER DESIGN
    DEVELOP
    TEST

    View full-size slide

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

    View full-size slide

  17. #RWDSummit
    WASTE
    ELIMINATE

    View full-size slide

  18. #RWDSummit
    THE
    EVOLVING
    DESIGNER

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

  23. #RWDSummit
    GETTING STARTED
    (TODAY)

    View full-size slide

  24. #RWDSummit
    TAKE AN INVENTORY
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. #RWDSummit
    STANDARDIZE
    2

    View full-size slide

  30. #RWDSummit
    DOCUMENT
    3

    View full-size slide

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

    View full-size slide

  32. #RWDSummit
    CENTRALIZE YOUR CSS
    3a

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. #RWDSummit
    FIND IN
    PROJECT IS
    YOUR FRIEND

    View full-size slide

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

    View full-size slide

  39. #RWDSummit
    DON’T FORGET
    JAVASCRIPT!

    View full-size slide

  40. #RWDSummit
    GOVERN YOUR LIBRARY
    6

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

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

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

  51. #RWDSummit
    OPEN SOURCE
    CULTURE

    View full-size slide

  52. #RWDSummit
    DOCUMENTATION
    GREAT

    View full-size slide

  53. #RWDSummit
    EASY TO CONTRIBUTE
    MAKE IT

    View full-size slide

  54. #RWDSummit
    MISTAKES
    FIND EASY

    View full-size slide

  55. #RWDSummit
    NON-DEVELOPERS
    EMBRACE

    View full-size slide

  56. #RWDSummit
    COMMUNICATE
    MAKE IT EASY TO

    View full-size slide

  57. #RWDSummit
    ROADMAP
    OPEN & TRANSPARENT

    View full-size slide

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

    View full-size slide

  59. #RWDSummit
    CSS DOCUMENTATION
    1

    View full-size slide

  60. #RWDSummit
    STATIC SITE GENERATION
    2

    View full-size slide

  61. #RWDSummit
    INTEGRATED
    3

    View full-size slide

  62. #RWDSummit
    BETTER WAY
    THERE HAS TO BE A

    View full-size slide

  63. http://patternpack.org/

    View full-size slide

  64. #ZombieLibrary
    GET STARTED WITH
    PATTERN
    PACK

    View full-size slide

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

    View full-size slide

  66. #ZombieLibrary
    $ npm init
    $ git init

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. #ZombieLibrary
    $ grunt patternpack:run

    View full-size slide

  70. #ZombieLibrary

    View full-size slide

  71. #ZombieLibrary
    CREATE YOUR FIRST
    PATTERN

    View full-size slide

  72. #ZombieLibrary

    View full-size slide

  73. #ZombieLibrary

    View full-size slide

  74. #ZombieLibrary

    View full-size slide

  75. #ZombieLibrary

    View full-size slide

  76. #ZombieLibrary

    View full-size slide

  77. #ZombieLibrary

    View full-size slide

  78. #ZombieLibrary

    View full-size slide

  79. #ZombieLibrary

    View full-size slide

  80. #ZombieLibrary

    View full-size slide

  81. #ZombieLibrary
    UNLEASH YOUR
    CREATION

    View full-size slide

  82. #ZombieLibrary
    USE SEMANTIC VERSIONING
    FOR YOUR DESIGN SYSTEM

    View full-size slide

  83. #ZombieLibrary
    1.0.5
    major
    release
    minor
    release
    patch
    release

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  87. #ZombieLibrary
    INTEGRATE INTO YOUR
    APPLICATION

    View full-size slide

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

    View full-size slide

  89. #ZombieLibrary
    SUPPORT FOR
    NPM &
    BOWER

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

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

  96. #ZombieLibrary

    View full-size slide

  97. #ZombieLibrary

    View full-size slide

  98. #ZombieLibrary

    View full-size slide

  99. http://patternpack.org/

    View full-size slide

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

    View full-size slide

  101. INTERFACES
    FIGHT ZOMBIE

    View full-size slide

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

    View full-size slide