“The interpretation of radium and the structure of the atom” (1922) — https://www.flickr.com/photos/internetarchivebookimages/14757172535

Put some atomic design in your content

A couple of weeks ago I went to see Brad Frost’s fascinating conference about atomic design and it got me thinking about the whole process of building websites and applications, especially from a project manager’s point of view.

Source: http://bradfrost.com/blog/post/atomic-web-design/

Atomic design’s principle is pretty straight forward: websites and interfaces are made of a combination of elements, and these elements are made of smaller components. His metaphor goes as follows:

  1. Atoms are the building blocks of matter (or in other words, the basic tags such as buttons, labels or inputs).
  2. Molecules are a combination of atoms, forming a reusable pattern that serve only one purpose. One good example of this would be a search form (made of three atoms: a form label, a search input and a button).
  3. Organisms are more complex standalone portable reusable components. They’re usually made up of several molecules and atoms, and form specific sections of the user interface. An example of this would be a page header including a logo, a search form and a menu.
  4. Templates are what Frost calls “page-level objects” or something pretty close to what most people call schematics or wireframes (focused on content structure more than on actual content).
  5. Pages are the result of swapping out placeholder content from the templates with the final design elements and real content.

Leaving the conference, I was thinking about how I could apply all of this to my own work and I wondered if I could somehow apply it to something else than graphic interfaces and design elements. That’s when I realized that I often need a consistent and rigorous method of structuring text and content when I brief my developers.

How many times have I asked to change the text on a label or a button, to realize later that the fix had been applied only to one specific page and not to other sections of the site? This kind of error happens often, not because developers are not good at what they do, but because content is usually spread across different templates and translation files (we usually use YAML), and that makes every single update more complicated and subject to error. What if we had a standardized and centralized way to structure and organize our textual content?

So I thought I would try to organize different text items according to Frost’s structure (it works surprisingly good). This is only a quick example but you could easily tailor it to your needs.

Atoms would be all the standard text items and settings that are used all around the site.

  • Default button titles (“Submit”, “Cancel”, “New” , “Add” , “Edit”,…)
  • Default select items (“Please select a…”)
  • Default input labels (“Last name”, “Zip code”, “Phone number”,…)
  • Default slugs and urls (mostly for SEO purposes)
  • Default titles and section names (mostly for SEO purposes)
  • Default date and time formats
  • Default number formats (amounts, lengths, quantities,…)
  • Standard error and validation messages
  • Standard tooltip items

Molecules would be more complex items made of several default items.

  • Upload forms
  • Dropdown menus (ex: countries or provinces lists)
  • Timestamps
  • Breadcrumbs
  • Menus and navigation items
  • Alert dialog boxes and fancyboxes

Organisms would be “in context” uses of molecules.

  • Contact forms
  • Search forms
  • Content lists / index pages

Templates would be, you know, pages or interfaces templates.

  • Confirmation pages and emails.
  • Landing pages.
  • Payment pages
  • ….

Pages should consist only of production content and shouldn’t need to be updated or corrected (this should happen at previous stages, usually in atoms or molecules).

  • Lorem Ipsum gets replaced by final approved content.
  • Translations are implemented….

I didn’t know where to include translations in this structure so I put them in Pages by default but I’m not sure it works. There is still room for a lot of improvement and I would be thrilled to read your ideas or comments on this.