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
   

   View Slide

2. View Slide

3. Lucas Cherkewski
   

   View Slide

4. What’s this modular
   design thing?
   

   View Slide

5. A tale of two
   methodologies
   

   View Slide

6. Imagine you’re
   ridiculously wealthy
   

   View Slide

7. You want a castle
   

   View Slide

8. You want a castle

   many castles
   

   View Slide

9. You hire a castle architect
   

   View Slide

10. “Design in one”
    

    View Slide

11. View Slide

12. “Design as components”
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. The end of Photoshop?
    

    View Slide

22. A component profile
    

    View Slide

23. A component is…
    

    View Slide

24. A component is…
    Independent
    

    View Slide

25. A component is…
    Flexible
    

    View Slide

26. A component is…
    Reusable
    

    View Slide

27. A component is…
    Reproducible
    

    View Slide

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

    View Slide

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

    View Slide

30. A collection of
    components
    

    View Slide

31. Pattern libraries
    

    View Slide

32. Bootstrap
    

    View Slide

33. View Slide

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

    View Slide

35. Code for America
    

    View Slide

36. View Slide

37. U.S. Web Design
    Standards
    

    View Slide

38. View Slide

39. Dan Eden’s Personal Site
    

    View Slide

40. View Slide

41. Modular design is a
    different way of thinking
    

    View Slide

42. Why should I care?
    

    View Slide

43. Modular design makes
    life better
    

    View Slide

44. Happier designers
    

    View Slide

45. Less duplication
    

    View Slide

46. More time to research
    

    View Slide

47. More time to test
    

    View Slide

48. Happier developers
    

    View Slide

49. Clear tasks
    

    View Slide

50. Visual components map
    to modular code
    

    View Slide

51. Less maintenance
    

    View Slide

52. Happier clients
    

    View Slide

53. Reduced budgets, or

    ones better spent
    

    View Slide

54. Speedier future design
    

    View Slide

55. Succession plans
    

    View Slide

56. Happier designers,
    developers, and clients
    

    View Slide

57. How can I design
    modularly?
    

    View Slide

58. You probably already do
    

    View Slide

59. WordPress encourages
    modular design
    

    View Slide

60. Widgets
    

    View Slide

61. get_footer()
    get_template_part()
    comments_template()
    

    View Slide

62. Content management
    

    View Slide

63. Okay, but what about
    pattern libraries?
    

    View Slide

64. Independent or
    integrated
    

    View Slide

65. Start small
    

    View Slide

66. Pattern library as a guide
    

    View Slide

67. You’ve got this
    

    View Slide

68. Break down your designs;
    design tiny little pieces
    

    View Slide

69. TWITTER HANDLE/
    QUESTIONS
    

    View Slide

70. TWITTER HANDLE/
    QUESTIONS
    Thanks!
    

    View Slide

71. TWITTER HANDLE/
    QUESTIONS
    @lchski
    lucascherkewski.com
    

    View Slide