good, fast, and cheap: how modular design improves our projects
TRANSCRIPT
Good, Fast, and Cheap: How Modular Design Improves Our Projects
Jeremy Ward WordCamp Minneapolis
May 21, 2016
ABOUT ME• WordPress Developer at 3five
• Board game geek
• Comedy nerd
• Drummer
• @_jmichaelward
Goals
1. Leave Excited
2. Have Ideas
3. Be Willing to Experiment
Creating Intention
Today’s Process
Client Expectations: AKA "The Dream Project"
Agency Challenges
Enter Modular Design
– Wikipedia
“Modular design is an attempt to combine the advantages of standardization (high
volume normally equals low manufacturing costs) with those of customization.”
Language
Context
"Do What Brad Frost Says"
Elements of Atomic Design
Atoms(Elements)
Molecules (Parts\Components)
Organisms(Modules)
Templates(Templates! Uh, sort of…)
Pages(Templates w/ content!)
Module Anatomy
Structure
Presentation
Interaction
–Every programming tutorial ever (also the key point of this talk)
“Don’t repeat yourself.”
EXAMPLES OF DRY• Proposal boilerplate
• Style guides
• Lorem ipsum
• Plugins
• Starter themes
• Templates
• Widgets
http://www.novolume.co.uk/blog/all-websites-look-the-same/
Begging the Question
Patterns Library
Example Patterns
MANY ALREADY EXIST IN WORDPRESS!
• get_header()
• get_footer()
• wp_nav_menu()
• get_template_part()
• the_widget()
• do_shortcode()
Banner with Call-To-Action
Featured Links
Image Carousel
Frequently Asked Questions
Social Media Links
Photo Gallery
What About Data?
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
Proof of Concept
Modular Process
Sales
Discovery
User Experience/Wireframes
Design
Development
Quality Assurance
Disclaimer
Summary
Good
Fast
Cheap
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)
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
THANK YOU!
• Find me at the Happiness Bar!
• Or:
• Twitter: @_jmichaelward
• Email: [email protected]
• Slack/IRC: jmichaelward
QUESTIONS?