The document discusses how modular design can improve projects by making them good, fast, and cheap. Modular design uses standardized, reusable components or modules to reduce duplication and costs while allowing customization. It presents the concept of atomic design and describes how patterns libraries, custom fields, and a modular process can help create reusable WordPress modules that encapsulate structure, presentation, and interaction. Examples are given of common modules like banners, links, and galleries that could be created.

1. Good, Fast, and Cheap:
How Modular Design
Improves Our Projects
Jeremy Ward
WordCamp Minneapolis
May 21, 2016

2. ABOUT ME
• WordPress Developer at 3five
• Board game geek
• Comedy nerd
• Drummer
• @_jmichaelward
• jeremy@jmichaelward.com

3. Goals

4. 1. Leave Excited

5. 2. Have Ideas

6. 3. Be Willing to
Experiment

7. Creating Intention

8. Today’s Process

9. Client Expectations:
AKA "The Dream Project"

10. Agency Challenges

11. Enter Modular
Design

12. – Wikipedia
“Modular design is an attempt to combine
the advantages of standardization (high
volume normally equals low manufacturing
costs) with those of customization.”

16. Language

18. Context

19. Atomic Design
atomicdesign.bradfrost.com

20. "Do What Brad Frost Says"

21. Elements of Atomic
Design

22. Atoms
(Elements)

23. Molecules
(PartsComponents)

24. Organisms
(Modules)

25. Templates
(Templates! Uh, sort of…)

26. Pages
(Templates w/ content!)

27. Module Anatomy

28. Structure

32. Presentation

34. Interaction

35. –Every programming tutorial ever (also the key point of this talk)
“Don’t repeat yourself.”

36. EXAMPLES OF DRY
• Proposal boilerplate
• Style guides
• Lorem ipsum
• Plugins
• Starter themes
• Templates
• Widgets

37. http://www.novolume.co.uk/blog/all-websites-look-the-same/

38. Begging the
Question

39. Patterns Library

40. Example Patterns

41. MANY ALREADY EXIST IN
WORDPRESS!
• get_header()
• get_footer()
• wp_nav_menu()
• get_template_part()
• the_widget()
• do_shortcode()

42. Banner with
Call-To-Action

44. Featured Links

46. Image Carousel

48. Frequently Asked
Questions

50. Social Media Links

52. Photo Gallery

54. What About Data?

55. CUSTOM FIELDS
• Advanced Custom Fields
• Use acf-json to sync needed component fields
• Updates will change JSON fields for your particular
project
• Remove unneeded fields
• CMB2

56. Proof of Concept

57. Modular Process

58. Sales

59. Discovery

60. User Experience/
Wireframes

61. Design

62. Development

63. Quality Assurance

64. Disclaimer

65. Summary

66. Good

67. Fast

68. Cheap

69. RELATED TALKS
• Tyler Golberg “Custom Post Types for Non-Developers”
• Josh Broton: “WordPress + React: A Match Made in
Heaven” (components)
• Solomon Scott: “JavaScript <3 WordPress” (design
patterns)

70. RESOURCES
• atomicdesign.bradfrost.com
• https://trello.com/b/FDjjqYbL/wordpress-ui-inventory
• https://en.wikipedia.org/wiki/Modular_design
• https://en.wikipedia.org/wiki/Modular_programming
• styletil.es
• pointnorth.io (specifically http://pointnorth.io/#components)
• http://maintainablecss.com/
• http://wpackagist.org

71. THANK YOU!
• Find me at the Happiness Bar!
• Or:
• Twitter: @_jmichaelward
• Email: jeremy@jmichaelward.com
• Slack/IRC: jmichaelward
QUESTIONS?