Atomic Design Memo

Source : Atomic Design by Brad Frost

Style Guide Benefits

  • Promote consistency and cohesion across the entire experience (myriad of screen sizes, devices, browsers, and environments)
  • Speed up your team’s workflow, saving time and money.
  • Establish a more collaborative workflow between all disciplines involved in a project.
  • Establish a shared vocabulary between everyone in an organization, including outside vendors.
  • Provide helpful documentation to help educate stakeholders, colleagues, and even third parties.
  • Make cross-browser/device, performance, and accessibility testing easier.
  • Serve as a future-friendly foundation for teams to modify, extend, and improve on over time.

Design System Content

  • Brand identity guidelines: logos, typography, color palettes, messaging, illustrations...
  • Design language guidelines: general design direction, philosophy, and approach to specific projects or products.
  • Voice & tone style guide: how the company’s voice and tone should shift across a variety of scenarios.
  • Writing style guide: some guidelines and guardrails for contributing content.
  • Code style guide: conventions, patterns, and examples to write legible, scalable, maintainable code
  • Pattern Libraries: front-end style guides / UI libraries / component libraries

Atomic Design Methodology

  • Atoms: basic html elements (ex: form labels, inputs, buttons, h1...)
  • Molecules: groups of UI elements functioning together as a unit (ex: form label + search input + button)
  • Organisms: complex UI components composed of groups of molecules, atoms & other organisms. These organisms form distinct sections of an interface (ex: a header)
  • Templates: component layout and content structure (generic content)
  • Pages: real content into templates and variations, to demonstrate the final UI and test the resilience of the design system.

Interface Inventory

  • Global elements: headers, footers, and other elements that are shared across the experience.
  • Navigation: primary navigation, footer navigation, pagination, breadcrumbs and anything that’s used to navigate.
  • Image types: logos, hero images, avatars, thumbnails, backgrounds...
  • Icons: every interface icons & their meanings.
  • Forms: inputs, text areas, select menus, checkboxes, switches, radio buttons, sliders...
  • Buttons: primary, secondary, big, small, disabled, active, loading, even text links.
  • Headings: h1, h2, h3, h4, h5, h6 and variations of typographic headings.
  • Blocks: callouts, summaries, ads, or hero units, blocks are collections of typographic headings and/or images and/or summary text.
  • Lists: unordered, ordered, definition, bulleted, numbered, lined, striped...
  • Interactive components: accordions, tabs, carousels, and modules with moving parts.
  • Media: video players, audio players and other rich media elements.
  • Third-party components: widgets, iframes, stock tickers, social buttons, invisible tracking scripts...
  • Advertising: all ad formats and dimensions.
  • Messaging: alerts, success, errors, warnings, validation, loaders, popups, tooltips, and so on.
  • Colors: all unique colors presented in the interface.
  • Animations: UI element that moves, fades, shakes, transitions, or shimmies across the screen.

Maintaining a Design System

  • Make a thing: start now and improve it.
  • Make it official: establish a design system team ; makers (visual, product, ux, frontend, qa) & users
  • Make it adaptable: count on change and establishing a clear governance plan.
  • Make it maintainable: easy to deploy & communicate about it (change logs, roadmap, success stories, tips and tricks...)
  • Make it approachable: create an easy-to-use style guide (documentation, logical naming, use case...) & educate (pair sessions, workshops, webinars, tutorials, onboarding...)
  • Make it a global project (issue tracker, chat, forum, suggestions, requests for feedback, surveys...)
  • Make it visible: make it public
  • Make it bigger: include brand, voice and tone, code, design principles, and writing guidelines.
  • Make it last by laying a solid foundation