Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rethinking Themes: Embracing Atomic Design with Gutenberg

Rethinking Themes: Embracing Atomic Design with Gutenberg

When designing WordPress themes, one of the biggest challenges stems from a core component of WordPress itself: the ability for site owners to change, modify, and build new content themselves. After all, 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.

As content and functionality become even more modular thanks to advances like the Gutenberg editor, theme designers will have to accommodate even more flexible ways of visualizing and presenting information. How do we anticipate and accommodate the needs of a constantly evolving website while providing visual solutions that are clean, thoughtful, and consistent?

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 as it is now, and where it might be going in the future.

Michelle Schulp Hunt

February 07, 2020
Tweet

More Decks by Michelle Schulp Hunt

Other Decks in Design

Transcript

  1. RETHINKING
    Embracing Atomic
    THEMES
    Design W
    ith Gutenberg

    View full-size slide

  2. @marktimemedia
    I Design
    &
    Build DIGITAL
    INTERFACES
    HI, I’M
    MICHELLE.
    Rockstar at saying stuff. Adorable badass.
    Carefully curated spontaneity. Master
    suitcase packer. Accidental fitness buff.
    learning to like coffee
    Ambassador

    View full-size slide

  3. @marktimemedia
    HOW WE
    GOT HERE
    A brief history

    View full-size slide

  4. @marktimemedia
    PAGES
    WERE THE SOURCE
    OF KNOWLEDGE

    View full-size slide

  5. @marktimemedia
    THE
    “WEB PAGE”
    PARADIGM

    View full-size slide

  6. @marktimemedia
    TEMPLATES, DATABSES, &
    CONTENT MANAGEMENT

    View full-size slide

  7. @marktimemedia
    DYNAMIC DATA:
    LOGIC & CONNECTIONS

    View full-size slide

  8. @marktimemedia
    Themes
    Plugins
    Metadata
    Relationships
    One-to-one
    One-to-many

    View full-size slide

  9. @marktimemedia
    LIMITATIONS
    of the page model

    View full-size slide

  10. @marktimemedia
    CONTENT IS
    DYNAMIC AND
    INTERACTIVE

    View full-size slide

  11. @marktimemedia
    UNIQUE CONTENT
    CAN BE SMALLER
    THAN PAGES

    View full-size slide

  12. @marktimemedia
    HOW IT WORKS
    IS NOT DEPENDENT
    ON WHAT IT SAYS

    View full-size slide

  13. @marktimemedia
    EXPERIENCES
    SHOULD BE
    CUSTOMIZABLE

    View full-size slide

  14. @marktimemedia
    Patterns
    Systems
    Iterating
    Prototyping
    Maintaining
    Scaling

    View full-size slide

  15. @marktimemedia
    ATOMIC DESIGN
    BRAD FROST
    “Let’s get modular!”

    View full-size slide

  16. @marktimemedia
    THE IDEA

    View full-size slide

  17. @marktimemedia
    Reorderable, reusable
    elements that combine to
    build unique content

    View full-size slide

  18. @marktimemedia
    Content dictates layout
    rather than layout
    dictating content

    View full-size slide

  19. @marktimemedia
    Elements can exist within
    any context or location

    View full-size slide

  20. @marktimemedia
    Seamless functional and
    stylistic integration

    View full-size slide

  21. @marktimemedia
    THE
    STRUCTURE

    View full-size slide

  22. @marktimemedia
    The Single Use
    Principle & DRY

    View full-size slide

  23. @marktimemedia
    Modular File
    Structure

    View full-size slide

  24. @marktimemedia
    RELATED
    CONCEPTS

    View full-size slide

  25. @marktimemedia
    Component
    Libraries

    View full-size slide

  26. @marktimemedia
    Design
    Systems

    View full-size slide

  27. @marktimemedia
    Style
    Guides

    View full-size slide

  28. @marktimemedia
    BUILDING WITH
    ATOMIC DESIGN

    View full-size slide

  29. @marktimemedia

    View full-size slide

  30. @marktimemedia
    ATOMS
    THE SMALLEST BUILDING BLOCKS

    View full-size slide

  31. @marktimemedia
    http://zqsmm.qiniucdn.com/data/20110511083224/index.html

    View full-size slide

  32. @marktimemedia
    http://demo.patternlab.io

    View full-size slide

  33. @marktimemedia
    MOLECULES
    UNIQUE, REPEATABLE
    COMBINATIONS OF ATOMS

    View full-size slide

  34. @marktimemedia
    http://demo.patternlab.io

    View full-size slide

  35. @marktimemedia
    ORGANISMS
    MOLECULES COMING TOGETHER
    ALLOW ACTION

    View full-size slide

  36. @marktimemedia
    http://demo.patternlab.io

    View full-size slide

  37. @marktimemedia
    TEMPLATES
    ORGANISMS TOGETHER BECOME
    LAYOUTS

    View full-size slide

  38. @marktimemedia
    http://demo.patternlab.io

    View full-size slide

  39. @marktimemedia
    PAGES
    TEMPLATES WITH SPECIFIC
    CONTENT

    View full-size slide

  40. @marktimemedia
    http://demo.patternlab.io

    View full-size slide

  41. @marktimemedia

    View full-size slide

  42. @marktimemedia
    GUTENBERG
    & The Block Model

    View full-size slide

  43. @marktimemedia
    the_content()
    From the blob
    to the block

    View full-size slide

  44. @marktimemedia
    At the core of Gutenberg lies the concept
    of the block. From a technical point of
    view, blocks both raise the level of
    abstraction from a single document to a
    collection of meaningful elements, and
    they replace ambiguity—inherent in
    HTML—with explicit structure.
    developer.wordpress.org

    View full-size slide

  45. @marktimemedia
    From a user perspective, blocks allow any
    kind of content, media, or functionality
    to be directly added to their site in a
    more consistent and usable way.
    The “add block” button gives the user
    access to an entire library of options all in
    one place.
    developer.wordpress.org

    View full-size slide

  46. @marktimemedia
    THE IDEA

    View full-size slide

  47. @marktimemedia
    Reorderable, reusable
    elements that combine to
    build unique content

    View full-size slide

  48. @marktimemedia
    Content dictates layout
    rather than layout
    dictating content

    View full-size slide

  49. @marktimemedia
    THE
    STRUCTURE

    View full-size slide

  50. @marktimemedia
    Blocks from
    Core and Plugins

    View full-size slide

  51. @marktimemedia
    Controlled: theme style
    Malleable: block options

    View full-size slide

  52. @marktimemedia

    View full-size slide

  53. @marktimemedia
    ATOMIC DESIGN
    + GUTENBERG

    View full-size slide

  54. @marktimemedia
    ATOMS
    h1-h6
    Paragraphs
    Links
    Code, Verse, Pre
    Separators
    Buttons
    Colors

    View full-size slide

  55. @marktimemedia
    MOLECULES
    Ordered & Unordered
    Lists
    Tables, Headers,
    & Footers
    Quote + Citation
    Image + Captions

    View full-size slide

  56. @marktimemedia
    MOLECULES
    Image + Captions
    Video, Audio
    More, Page Break
    Navigation

    View full-size slide

  57. @marktimemedia
    ORGANISMS
    Gallery
    Media + Text

    View full-size slide

  58. @marktimemedia
    ORGANISMS
    Groups
    Columns
    Cover
    Images

    View full-size slide

  59. @marktimemedia
    ORGANISMS
    Dynamic Blocks
    Reusable Blocks
    Custom Blocks

    View full-size slide

  60. @marktimemedia
    TEMPLATES
    Post Type block
    templates
    Standard Page
    templates
    Standard
    WordPress
    templates

    View full-size slide

  61. @marktimemedia
    THE
    FUTURE
    of block editing

    View full-size slide

  62. @marktimemedia
    Gutenberg
    Experiments

    View full-size slide

  63. @marktimemedia
    Page Content
    Templates
    https://github.com/WordPress/gutenberg/pull/18052

    View full-size slide

  64. @marktimemedia
    Block
    Templates
    https://developer.wordpress.org/block-
    editor/developers/themes/block-based-themes/

    View full-size slide

  65. @marktimemedia
    Whole
    Site Editor
    https://wptavern.com/themes-of-the-future-a-design-framework-and-
    a-master-theme

    View full-size slide

  66. @marktimemedia
    WHAT IS A THEME
    IN THE AGE OF BLOCKS?

    View full-size slide

  67. @marktimemedia
    Global styling
    for core blocks
    and content

    View full-size slide

  68. @marktimemedia
    Curating Block
    Editor options

    View full-size slide

  69. @marktimemedia
    Block & Page
    Templates

    View full-size slide

  70. @marktimemedia
    Detailed
    styling to
    target specific
    plugins

    View full-size slide

  71. @marktimemedia
    Support
    recommended
    block libraries

    View full-size slide

  72. @marktimemedia
    DESIGNING WITH
    ATOMIC DESIGN

    View full-size slide

  73. @marktimemedia
    BE CONSISTENT
    NOT UNIFORM

    View full-size slide

  74. @marktimemedia
    BUILD SYSTEMS
    NOT PAGES

    View full-size slide

  75. @marktimemedia
    CONTENT AUDITS
    TO FIND PATTERNS

    View full-size slide

  76. @marktimemedia
    DEFINE YOUR BRAND:
    VISUAL ATOMS

    View full-size slide

  77. @marktimemedia
    DEFINE YOUR BLOCKS:
    MOLECULES &
    ORGANISMS

    View full-size slide

  78. @marktimemedia
    MAP THESE BLOCKS TO
    CORE & CUSTOM

    View full-size slide

  79. @marktimemedia
    MAKE A PLAN FOR
    BLOCK OPTIONS

    View full-size slide

  80. @marktimemedia
    LIMITATIONS
    of atomic design

    View full-size slide

  81. @marktimemedia
    Styling elements
    relative to the page

    View full-size slide

  82. @marktimemedia
    DRY -> DTM
    “do too much”

    View full-size slide

  83. @marktimemedia
    Ambiguity
    about molecules,
    organisms, &
    utilities/helpers

    View full-size slide

  84. @marktimemedia
    Prescriptive vs.
    Descriptive Systems

    View full-size slide

  85. @marktimemedia
    RESOURCES

    View full-size slide

  86. @marktimemedia
    Resources
    • Block Editor https://developer.wordpress.org/block-editor/
    • Atomic Design http://atomicdesign.bradfrost.com/
    • Style Guides http://styleguides.io/tools.html
    • Style Prototype http://sparkbox.github.io/style-prototype/
    • “Ish” variable viewport tool http://bradfrost.com/demo/ish/
    • HTML Elements
    http://zqsmm.qiniucdn.com/data/20110511083224/index.html

    View full-size slide

  87. @marktimemedia
    Articles
    • https://www.toptal.com/designers/ux/getting-started-with-modular-front-end-
    development
    • https://room34.com/philosophy/modular-design/
    • https://www.crema.us/blog/atomic-design-systems
    • https://ethanmarcotte.com/wrote/pattern-patter/
    • http://alistapart.com/article/language-of-modular-design
    • https://airbnb.design/building-a-visual-language/
    • https://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/
    • https://blog.alexdevero.com/atomic-design-scalable-modular-css-sass/
    • https://blog.prototypr.io/atomic-design-in-practice-does-it-work-9655bacb49d7

    View full-size slide

  88. @marktimemedia
    QUESTIONS?
    Here’s how to
    get in touch:
    Michelle Schulp
    [email protected]
    @marktimemedia
    michelleschulp.pink
    bit.ly/theme-gutenberg
    WHERE TO FIND ME NEXT:
    NOW:
    SiteGround booth,
    sessions, Hallway track,
    afterparty, exercising
    ONLINE:
    Fitness & Freelance
    Twitter – DMs open!
    Podcast? Happy to talk!
    IN PERSON:
    WordCamp Atlanta
    WordCamp DC
    WordCamp ________?

    View full-size slide