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/

Transcript

1. Tiny Little Pieces
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”
12. “Design as components”
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
34. –Dave Rupert “Tiny Bootstraps, for every client.”
35. Code for America
37. U.S. Web Design Standards
39. Dan Eden’s Personal Site
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