Tiny Little Pieces: Designing and developing with pattern libraries

Tiny Little Pieces: Designing and developing with pattern libraries

Traditional web design is all about the mockup, a series of fully designed pages that a developer then turns into templates and a theme. This kind of web design can create websites that are harder to maintain or extend in the future; if it’s not in the original mockup, we have no idea what to do! In recent years, however, a new method has emerged: designing with patterns—small, reusable mini-designs that are combined to create templates of any sort. This talk covers three connected topics: what pattern libraries are all about; how they make life better for designers, developers, and clients; and how to work with a pattern library when building WordPress themes.

Some great resources on designing with patterns:
* http://styleguides.io
* http://atomicdesign.bradfrost.com
* http://www.maban.co.uk/projects/front-end-style-guides/

9059e112be00a40606e7e16162e10e9a?s=128

Lucas Cherkewski

July 23, 2016
Tweet

Transcript

  1. Tiny Little Pieces

  2. None
  3. Lucas Cherkewski

  4. What’s this modular design thing?

  5. A tale of two methodologies

  6. Imagine you’re ridiculously wealthy

  7. You want a castle

  8. You want a castle
 many castles

  9. You hire a castle architect

  10. “Design in one”

  11. None
  12. “Design as components”

  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. The end of Photoshop?

  22. A component profile

  23. A component is…

  24. A component is… Independent

  25. A component is… Flexible

  26. A component is… Reusable

  27. A component is… Reproducible

  28. A component is… Independent, flexible, reusable, and reproducible

  29. A component is… HTML and CSS (and maybe JS and

    PHP)
  30. A collection of components

  31. Pattern libraries

  32. Bootstrap

  33. None
  34. –Dave Rupert “Tiny Bootstraps, for every client.”

  35. Code for America

  36. None
  37. U.S. Web Design Standards

  38. None
  39. Dan Eden’s Personal Site

  40. None
  41. Modular design is a different way of thinking

  42. Why should I care?

  43. Modular design makes life better

  44. Happier designers

  45. Less duplication

  46. More time to research

  47. More time to test

  48. Happier developers

  49. Clear tasks

  50. Visual components map to modular code

  51. Less maintenance

  52. Happier clients

  53. Reduced budgets, or
 ones better spent

  54. Speedier future design

  55. Succession plans

  56. Happier designers, developers, and clients

  57. How can I design modularly?

  58. You probably already do

  59. WordPress encourages modular design

  60. Widgets

  61. get_footer() get_template_part() comments_template()

  62. Content management

  63. Okay, but what about pattern libraries?

  64. Independent or integrated

  65. Start small

  66. Pattern library as a guide

  67. You’ve got this

  68. Break down your designs; design tiny little pieces

  69. TWITTER HANDLE/ QUESTIONS

  70. TWITTER HANDLE/ QUESTIONS Thanks!

  71. TWITTER HANDLE/ QUESTIONS @lchski lucascherkewski.com