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)

9fa239b3154a0169d99ab7bf1422dd12?s=128

Marcelo Somers

March 29, 2016
Tweet

Transcript

  1. #RWDSummit PATTERN LIBRARY ZOMBIE FIGHT THE Responsive Web Design Summit

    • 03.29.16 Marcelo Somers Solution Architect, User Experience @marcelosomers
  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
  3. PATTERN LIBRARIES ZOMBIE

  4. #RWDSummit How do you keep living, knowing that’s what the

    world is like?” “ building interfaces
  5. #RWDSummit DESIGN PROCESS RETHINKING THE

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

  7. None
  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/
  9. #RWDSummit DESIGN DESIGNING WITH PATTERNS

  10. #RWDSummit DESIGN SLICE DESIGNING WITH PATTERNS

  11. #RWDSummit DESIGN SLICE ASSEMBLE DESIGNING WITH PATTERNS

  12. #RWDSummit DESIGN TOOLS

  13. #RWDSummit

  14. #RWDSummit

  15. #RWDSummit

  16. #RWDSummit

  17. #RWDSummit

  18. #RWDSummit

  19. #RWDSummit BREAKS DOWN WHERE THE DESIGN PROCESS

  20. #RWDSummit DESIGNERS DEVELOPERS DISCOVER DESIGN DEVELOP TEST

  21. #RWDSummit BROKEN TRADITIONAL HANDOFF IS

  22. #RWDSummit DISCOVER DESIGN DEVELOP TEST

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

  24. #RWDSummit

  25. #RWDSummit

  26. #RWDSummit

  27. #RWDSummit

  28. #RWDSummit WASTE ELIMINATE

  29. #RWDSummit THE EVOLVING DESIGNER

  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
  31. #RWDSummit LIVE WHERE DOES THE PATTERN LIBRARY IN YOUR PROCESS?

  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
  33. None
  34. https://medium.com/@marcelosomers/chasing-the-holy-grail-bbc0b7cce365#.wvedzdvsx

  35. #RWDSummit GETTING STARTED (TODAY)

  36. #RWDSummit TAKE AN INVENTORY 1

  37. None
  38. Option List Group Seen On: • My Account » Account

    List • Send Money » Select Payment Option Desktop Mobile
  39. https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517#.c887jlrum

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

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

  42. #RWDSummit STANDARDIZE 2

  43. None
  44. None
  45. None
  46. None
  47. None
  48. #RWDSummit DOCUMENT 3

  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. #RWDSummit BASIC DOCUMENTATION NAME 1 2 DESCRIPTION 3 EXAMPLE 3

    CODE SNIPPET
  57. #RWDSummit CENTRALIZE YOUR CSS 3a

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

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

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

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

  62. #RWDSummit FIND IN PROJECT IS YOUR FRIEND

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

    where class=“ “ contains table
  64. #RWDSummit DON’T FORGET JAVASCRIPT!

  65. #RWDSummit GOVERN YOUR LIBRARY 6

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

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

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

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

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

  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
  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
  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
  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
  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
  76. #RWDSummit OPEN SOURCE CULTURE

  77. #RWDSummit DOCUMENTATION GREAT

  78. #RWDSummit EASY TO CONTRIBUTE MAKE IT

  79. #RWDSummit MISTAKES FIND EASY

  80. #RWDSummit NON-DEVELOPERS EMBRACE

  81. #RWDSummit COMMUNICATE MAKE IT EASY TO

  82. #RWDSummit ROADMAP OPEN & TRANSPARENT

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

  84. #RWDSummit CSS DOCUMENTATION 1

  85. #RWDSummit 1

  86. #RWDSummit STATIC SITE GENERATION 2

  87. #RWDSummit

  88. #RWDSummit INTEGRATED 3

  89. #RWDSummit

  90. #RWDSummit BETTER WAY THERE HAS TO BE A

  91. http://patternpack.org/

  92. #RWDSummit

  93. #ZombieLibrary GET STARTED WITH PATTERN PACK

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

  95. #ZombieLibrary $ npm init $ git init

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

  97. #ZombieLibrary module.exports = function(grunt) { grunt.initConfig({ patternpack: { run: {},

    build: {}, release: {} } }); grunt.loadNpmTasks('patternpack'); grunt.registerTask('default', ['patternpack:run']); } gruntfile.js
  98. #ZombieLibrary $ grunt patternpack:run

  99. #ZombieLibrary

  100. #ZombieLibrary CREATE YOUR FIRST PATTERN

  101. #ZombieLibrary

  102. #ZombieLibrary

  103. #ZombieLibrary

  104. #ZombieLibrary

  105. #ZombieLibrary

  106. #ZombieLibrary

  107. #ZombieLibrary

  108. #ZombieLibrary

  109. #ZombieLibrary

  110. #ZombieLibrary UNLEASH YOUR CREATION

  111. #ZombieLibrary USE SEMANTIC VERSIONING FOR YOUR DESIGN SYSTEM

  112. #ZombieLibrary 1.0.5 major release minor release patch release

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

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

  115. #ZombieLibrary BUILD YOUR STATIC SITE 1 INCREMENT YOUR VERSION 2

    CREATE A NEW COMMIT 3 TAG THE COMMIT 4
  116. #ZombieLibrary INTEGRATE INTO YOUR APPLICATION

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

  118. #ZombieLibrary SUPPORT FOR NPM & BOWER

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

  120. #ZombieLibrary $ npm install https://user:pass@github.com/user/my- awesome-library.git

  121. #ZombieLibrary ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/

    my-awesome-pattern-library.git#1.0.0" }
  122. #ZombieLibrary USERNAME & PASSWORD ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies":

    { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/ my-awesome-pattern-library.git#1.0.0" }
  123. #ZombieLibrary ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/

    my-awesome-pattern-library.git#1.0.0" } PATH TO GIT REPOSITORY
  124. #ZombieLibrary ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/

    my-awesome-pattern-library.git#1.0.0" } VERSION COMMITISH
  125. #ZombieLibrary

  126. #ZombieLibrary

  127. #ZombieLibrary

  128. http://patternpack.org/

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

  130. INTERFACES FIGHT ZOMBIE

  131. MODULARIZE

  132. DOCUMENT

  133. SHARE

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