What is Atomic Web Design and how can Pattern-Lab help us with hbr.org redesign? – Atomic Web Design – But back up a bit...

View Github Repository Open presentation in a new window

daigofuji

See all presentation from daigofuji

What is Atomic Web Design and how can Pattern-Lab help us with hbr.org redesign? – Atomic Web Design – But back up a bit...

0 0

intro-to-atomic-design

What is Atomic Web Design and Pattern-Lab? An internal presentation that I gave to colleagues about the approach we took for the HBR.org redesign, 2014

On Github daigofuji / intro-to-atomic-design

What is Atomic Web Design and how can Pattern-Lab help us with hbr.org redesign?

By Daigo Fujiwara, Feb 14, 2014 (rev 2)

Space bar to advance slides

In this 30 min. meeting, I will introduce you to the concept of Atomic Web Design and a tool that is installed for us to use internally, Pattern-Lab.

I want us to start the conversation among us, and be familiar with this "building-blocks" approach.

Thank everyone for coming. I know everyone is busy and I really appreciate your time. I try to be as "jargon-free" as possible, but please stop me if there is any technical terms that you don't know, or need clarification.

Atomic Web Design

A methodology used to construct web design systems.

Created by Brad Frost.

bradfrostweb.com/blog/post/atomic-web-design

It's an idea, approach, philosophy. Bare with me, you'll see this image again and again. I'll explain it a bit later.

Atomic Web Design2/3

Who is Brad Frost?

Brad Frost created a website called This is Responsive which is a great collection of responsive patterns and modules.

He recently worked on Tech Crunch's responsive redesign, and Entertainment Weekly's responsive mobile site.

He is a thought leader in world of Responsive Design and he speaks at a lot of conferences.

Atomic Web Design 3/3

Reusable building-blocks that can be combined into a web page.

Brad quotes Stephen Hay, who wrote a book called "Responsive Design Workflow" (http://responsivedesignworkflow.com/). "We’re not designing pages, we’re designing systems of components." I will try to use word "building-blocks" instead of "components" but you just need to know if I say "components" that just atoms, molecules or organism.

But back up a bit...

What we don't have currently isa browser-based web front-end style guide.

The style guide can help us with:

  • Design Consistency
  • Code Standard (i.e. html structure, css class names)
  • Responsive Web Design
This is different from the style guide that HUGE is delivering. It is also sometimes called "Pattern Library" but for this talk, I will stick with style guide.

Benefits of a front-end style guide

  • Being able to test responsive design ("Where does this design break?")
  • Improved workflow (See it in browser, feedback and collaboration)
  • Shared vocabulary (Design/Tech/Edit "What do you call this building block?")
  • Future reference ("What's available? What needs to be designed/coded next?")

Adapted from Front-end Style Guides by Anna Debenham

Test. Work flow. Vocabulary. Reference. Anna Debenham wrote an excellent ebook called "Front End Style Guides" -- I have a copy if anyone is interested. http://www.fivesimplesteps.com/products/front-end-style-guides

Example of front-end style guide

Quickly show BBC, Starbucks.

Those style guides are great, but...

  • Time consuming to create
  • Seen only as a designer/developer tool
  • Often too abstract
  • Often too incomplete and/or out-of-date
Yes time consuming, but it is tool for everyone, production, editors etc. Not a absolute rule, but guideline. And not one-time thing but should be evolving with the site.

Instead of writing style guide after redesign is finished, we'll build & test small building-blocks that will later become our front-end style guide.

This is what I am proposing. "As we start the process of redesign..."

Back to Atomic Web Design

“Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.”

- Brad Frost

Atomic Web Design

Think of molecules and organisms as Lego-like building blocks designed to be combined together.

This is where I explain atomic web design -- abstract (atoms) to concrete(pages). Atoms -- which are not terribly useful on their own. but, they're great as a reference for (almost) every elements on the website. Think of molecules and organisms as Lego-like building blocks designed to be combined together. Those make up the templates, and eventually, with "real content", become pages. Development is mainly done in the middle three stages. Atoms are reference, pages are where things gets reviewed.

That sounds great. But how are we going to pull that off?

?

Meet Pattern-Lab

An open sourced tool to create the Atomic Web Design system that will become the "living" front-end style guide.

pattern-lab.info (also created by Brad Frost. Maintained by Dave Olsen)

What does Pattern-Lab give us?

Visual library of building blocks View-port resizer Annotation and Code viewer building blocks = (Atoms, Molecules, Organism) Annotation is like a "design notes or comments."

Demo

Follow along at http://demo.patternlab.io/

Visual Library of building blocks (Atoms, Molecules, Organism): Viewport resizer: Annotation/Code viewer:

Pattern-Lab

Available to use within HBR intranet: http://demo.patternlab.io/. (Although not much is in there, yet.) Note: Link has been replaced for public consumption.

Source is hosted in our private github repo.

Thanks to Kevin Davis, Pattern-Lab have been installed and available for us to use. If anyone needs access to github, it is a private repo. Contact me, Matt, or Kevin D.

Pattern-Lab benefits (1/4)

It can serves as a hub for the creation process

Designing / deciding in the browser: "Does this work? Is this what you mean?"

Pattern-Lab benefits (2/4)

Can easily traverse from abstract to concrete

  • Test building-blocks in abstract, or in context
  • Develop alternate style, or "Themes"
  • Find reusable pieces / building-blocks
  • Only evolve certain section of the page

I can build the entire page in template, then decide to break it down to building blocks.

Pattern-Lab benefits (3/4)

Production ready html with meaningful css class names

  • Internal vocabulary depository between editors, designers, and developers
  • Don't have to talk about this if no time: hNews microformat (?)

Replaced the word semantic with Meaningful. "What is that component called? Teaser? Slug? hgroup? Related list? Article tool box?" I don't really care what to call them but we have to agree on it, and use it as it was intended. Create new if you need one.

Pattern-Lab benefits (4/4)

Documentation / annotation depository

  • Writing documentation as you actually create things on website.
  • Avoids duplicate work, changes are documented

Last one should be pretty self explanatory.

Build systems, not pages

From Why section of patternlab

Under the hood

Won't go into details, but for those interested (read: geeks), Pattern-Lab is built with:

  • PHP to build static page from html folder structure (But they are on our Vagrant virtual machine and Jenkins for deployment to out intranet server, so no need to install php on your machine)
  • Mustache template syntax
  • JSON data for content, html is structure only
  • We are using Zurb's Foundation, and SASS/Compass to generate css. (Again, on Vagrant/Jenkins via Grunt) Pattern-Lab will be synced up with the production CSS via GitHub
JSON stands for JavaScript Object Notation.

Take away

The goal of this meeting is to start conversations about Atomic Web Design approach and Pattern-Lab.

I want you to be as excited about this as I am. I am still learning. Ask me questions, let's collaborate.

A lot of potential, but useless if we don't use it in our work-flow.

EMPAHSIS ON A LOT OF POTENTIAL. This is not me telling you what to do, but rather, I want to work with everyone on this.

How will we use it?

When HUGE's design comes in, we'll break them down into building-blocks using Pattern-Lab. Then, using Alfresco/Surf, we'll put the pieces together.

notes

What's next?

notes

Thank you

demo.patternlab.io

Please ask questions, use the tool, explore.