Fight the Zombie Pattern Library

9fa239b3154a0169d99ab7bf1422dd12?s=47 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.

9fa239b3154a0169d99ab7bf1422dd12?s=128

Marcelo Somers

September 18, 2015
Tweet

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
  2. None
  3. None
  4. http://www.slideshare.net/bradfrostweb/style-guide-best-practices

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

  6. #zombielibrary WHY?

  7. #zombielibrary

  8. None
  9. None
  10. INTERFACES ZOMBIE

  11. #zombielibrary DESIGN PROCESS RETHINKING THE

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

  13. #zombielibrary

  14. None
  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/
  16. #zombielibrary DESIGN DESIGNING WITH PATTERNS

  17. #zombielibrary DESIGN SLICE DESIGNING WITH PATTERNS

  18. #zombielibrary DESIGN SLICE DESIGNING WITH PATTERNS

  19. #zombielibrary DESIGN SLICE ASSEMBLE DESIGNING WITH PATTERNS

  20. None
  21. None
  22. None
  23. None
  24. #zombielibrary DESIGN TOOLS

  25. #zombielibrary DESIGN TOOLS

  26. #zombielibrary

  27. #zombielibrary

  28. #zombielibrary

  29. #zombielibrary

  30. #zombielibrary

  31. #zombielibrary

  32. #zombielibrary BREAKS DOWN WHERE THE DESIGN PROCESS

  33. #zombielibrary DESIGNERS DEVELOPERS DISCOVER DESIGN DEVELOP TEST

  34. #zombielibrary BROKEN TRADITIONAL HANDOFF IS

  35. #zombielibrary DISCOVER DESIGN DEVELOP TEST

  36. #zombielibrary DISCOVER DESIGN DEVELOP TEST

  37. #zombielibrary SLICE DESIGNING WITH PATTERNS ASSEMBLE DESIGN

  38. #zombielibrary PATTERN LIBRARY DESIGNING WITH PATTERNS ASSEMBLE DESIGN

  39. None
  40. #zombielibrary

  41. #zombielibrary

  42. #zombielibrary

  43. #zombielibrary

  44. #zombielibrary WASTE ELIMINATE

  45. #zombielibrary THE EVOLVING DESIGNER

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

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

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

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

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

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

    inconsistently ONE-TIME A static style guide document gives basic direction #zombielibrary
  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
  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
  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
  55. PATTERN LIBRARIES ZOMBIE

  56. #zombielibrary GETTING STARTED (TODAY)

  57. #zombielibrary TAKE AN INVENTORY 1

  58. None
  59. Option List Group Seen On: • My Account » Account

    List • Send Money » Select Payment Option Desktop Mobile
  60. #zombielibrary DOCUMENT EACH PATTERN 2

  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. #zombielibrary BASIC DOCUMENTATION Name Description Example Code Snippet

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

    PERFECTION 4
  70. #zombielibrary BREAK UP YOUR COMPONENTS

  71. #zombielibrary NAMESPACE THE CSS

  72. #zombielibrary FIND IN PROJECT IS YOUR FRIEND

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

    where class=“ “ contains table
  74. #zombielibrary DON’T FORGET JAVASCRIPT!

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

  76. #zombielibrary CSS DOCUMENTATION 1

  77. #zombielibrary 1

  78. #zombielibrary STATIC SITE GENERATION 2

  79. #zombielibrary

  80. #zombielibrary APPLICATION / PLATFORM 3

  81. #zombielibrary

  82. #zombielibrary BETTER WAY THERE HAS TO BE A

  83. None
  84. #zombielibrary

  85. #zombielibrary

  86. #zombielibrary

  87. #zombielibrary

  88. #zombielibrary

  89. http://patternpack.org/

  90. #zombielibrary GET STARTED WITH PATTERN PACK

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

  92. #zombielibrary $ npm init

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

  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
  95. #zombielibrary $ grunt patternpack

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

  97. #zombielibrary CREATE YOUR FIRST PATTERN

  98. #zombielibrary

  99. #zombielibrary

  100. #zombielibrary

  101. #zombielibrary

  102. #zombielibrary

  103. #zombielibrary

  104. #zombielibrary

  105. #zombielibrary

  106. #zombielibrary UNLEASH YOUR CREATION

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

  108. #zombielibrary 1.0.5 major release minor release patch release breaking changes

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

    new patterns bugfixes Customize to your needs
  110. #zombielibrary DEVELOP RELEASE 2.0 BUG 2.0.1 VERSIONING RELEASES 3.0.1 3.1.0

    3.2.0
  111. #zombielibrary $ grunt patternpack:build $ grunt patternpack:release $ git push

    --save-dev
  112. #zombielibrary INTEGRATE INTO YOUR APPLICATION

  113. #zombielibrary $ npm install

  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
  115. #zombielibrary USERNAME & PASSWORD: https://user:pass@bitbucket.org/jondoe/my-awesome-pattern-library.git#1.0.0

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

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

  118. #zombielibrary $ npm install

  119. #zombielibrary

  120. #zombielibrary

  121. #zombielibrary

  122. #zombielibrary DESIGN PROCESS RETHINKING THE

  123. #zombielibrary DISCOVER DESIGN DEVELOP TEST Sketch PatternPack

  124. INTERFACES FIGHT ZOMBIE

  125. MODULARIZE

  126. DOCUMENT

  127. SHARE

  128. #zombielibrary THANK YOU! John Gully @johngully Marcelo Somers @marcelosomers Slides

    http://j.mp/zombie-library PatternPack http://patternpack.org/