Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Building Blocks: Atomic Design in a Gutenberg W...

Michelle Schulp Hunt
September 15, 2018

Building Blocks: Atomic Design in a Gutenberg World

Gutenberg may be the latest and greatest in WordPress content building, but the concept of modular design isn’t new. WordPress templates and themes are robust and feature filled, but building truly dynamic web pages is limited by the old concept of static pages and posts. Modern web content needs to be flexible and evolving, but not everyone is a developer who can build custom layouts to fit each use case. Page builders, custom fields, drag and drop interfaces, and bespoke solutions have all tried their hand at solving the problem of separating the technical/design components from the content itself. But what is modular design, and what does it have to do with WordPress?

In this talk, we’ll discuss the principles of Atomic Design, how to stop thinking of your content as “pages” and “posts” in favor of the concept of “building blocks,” and how to extend this mindset to utilize the potential of Gutenberg and other similar tools as a web designer.

Michelle Schulp Hunt

September 15, 2018
Tweet

More Decks by Michelle Schulp Hunt

Other Decks in Design

Transcript

  1. FIRST ATTEMPTS • “Wild West” of solutions: inconsistent, hacky, counterintuitive

    • Requires code or pseudocode knowledge • Learning curve, hidden elements • Easy to make mistakes • Mixing content with structure ! ACCESSIBLE ! BALANCED ! CONSISTENT ◦ DYNAMIC ◦ EXTENSIBLE ◦ FLEXIBLE
  2. PAGE BUILDERS: PROS • Create static and dynamic content •

    Not necessary to write code to build or use the tool • Drag and drop interface, sometimes WYSIWYG and/or front-end • Some tackle entire theme (not just content) ◦ ACCESSIBLE ! BALANCED ! CONSISTENT # DYNAMIC ◦ EXTENSIBLE # FLEXIBLE
  3. PAGE BUILDERS: CONS • Complex, inconsistent UI • Non-native, non-intuitive

    • Hidden settings and content • Too many options • Extra code/performance bloat • Mixing design with structure ◦ ACCESSIBLE ! BALANCED ! CONSISTENT # DYNAMIC ◦ EXTENSIBLE # FLEXIBLE
  4. CUSTOM FIELDS: PROS • Extensible and customizable • Static and

    Dynamic content • Separating design and structure • Can address complex content in consistent manner • Can follow Atomic Design model ◦ ACCESSIBLE # BALANCED ◦ CONSISTENT # DYNAMIC # EXTENSIBLE # FLEXIBLE
  5. CUSTOM FIELDS: CONS • Blocky, somewhat unwieldy aesthetic • Not

    necessary to write code to use the tool, but necessary to create new fields • More data entry than WYSIWYG • Saving content in metadata • Doesn’t address additional hidden content areas ◦ ACCESSIBLE # BALANCED ◦ CONSISTENT # DYNAMIC # EXTENSIBLE # FLEXIBLE
  6. GUTENBERG: PROS • Extensible and customizable • Native/core functionality and

    aesthetic • Follows Atomic Design model • Close to WYSIWYG • Separation of design and structure • Balance of decisions and options • Lives within The Content ◦ ACCESSIBLE # BALANCED # CONSISTENT # DYNAMIC # EXTENSIBLE # FLEXIBLE
  7. GUTENBERG: CONS • Feature plugin: not quite ready yet •

    Backwards compatibility issues for existing solutions • Still not many dynamic options built into core • New development tools/platforms ◦ ACCESSIBLE # BALANCED # CONSISTENT # DYNAMIC # EXTENSIBLE # FLEXIBLE
  8. ON MODULAR DESIGN • https://medium.com/5000-things/learning-from-lego-a-step- forward-in-modular-web-design-d8ff953f45a8 • http://atomicdesign.bradfrost.com/ • https://patternlab.io/

    • https://www.toptal.com/designers/ux/getting-started-with- modular-front-end-development • https://room34.com/philosophy/modular-design/
  9. ON GUTENBERG • https://wordpress.org/gutenberg/ • https://gogutenberg.com/blocks/ • https://torquemag.io/2018/07/gutenberg-wordpress-editor-review-roundup/ • https://www.dreamhost.com/blog/wordpress-gutenberg-for-designers/

    • https://yoast.com/what-is-gutenberg/ • https://www.smashingmagazine.com/2018/08/complete-anatomy-gutenberg- wordpress-editor/ • https://crowdfavorite.com/wordpress-gutenberg-enterprise/ • https://www.wpbeaverbuilder.com/future-web-gutenberg-facebook-wordpress- myspace/
  10. FREE STUFF (MY WORK) • https://github.com/marktimemedia my base theme and

    ACF extension plugins (plus other stuff) • http://pinkspring.marktimedev.com/ Live demo of aforementioned theme and plugins