Understanding Atomic Design

Atomic design is a methodology for designing / building out systems of components

What is it?

"Systems of components"...

I thought we were building websites?

Static "Websites"

1992 - 2010

Thanks Responsive.

RWD has made pixel-perfect "pages" impossible.

You wouldn't build out a separate mobile, tablet, and desktop homepage...

So why would we build out separate Blog, Product, and Featured Customer callouts?

Instead of just building out one simplified, flexible, and adaptable callout?

RWD has forced us to move away from building static pages to architecting systems of components.

Keep in Mind:

RWD is just the tip of the iceburg

This is all actually  of something larger: Adaptive Design

Principles behind 

Adaptive Design

http://bradfrost.com/blog/post/the-principles-of-adaptive-design/

Ubiquity

Flexibility

Performance

Enhancement

Future Friendly

Diving Deeper:

How Atomic Design Works

[Slide Every Atomic Design Presentation Includes]

Atoms

Molecules

Organisms

Templates

Pages

Atoms are the smallest reusable pieces

of a site's UI

Typography

Atoms

1:1 Image

Molecules

Molecules: Groups of UI pieces that

form together into a single unit.

Typography

Organisms

Organisms: composed of similar or related groups of molecules. Example: site header or a sidebar region.

Headline goes here

Headline goes here

Headline goes here

Read more >

Templates

Templates: Mostly groups of organisms that are combined together to form page-level objects. Use generic content!

Pages

Pages: Example real-world use of templates using real (or representative) content

Atomic Design helps everyone on a project break up the UI into repeatable, modular, bite-sized pieces; from most generic to most specific

HOWEVER

Atomic Design !== CSS

Seriously. Atomic Design has nothing to do with your CSS.

We'll get into this further in Part 2 next week.

Atoms

Molecules

Organisms

Templates

Pages

Abstract

Concrete

Atoms

Molecules

Organisms

Templates

Pages

Abstract

Concrete

Creators

Clients

Atoms

Molecules

Organisms

Templates

Pages

Reference

Review

Build

Getting Started:

Conducting an Interface Inventory

Instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up the site or app.

Subtitle

http://bradfrost.com/blog/post/interface-inventory/

An interface inventory is like a content inventory

An interface inventory is a comprehensive collection of the bits and pieces that make up your interface

Subtitle

http://bradfrost.com/blog/post/interface-inventory/

An interface inventory is like a content inventory

5 Basic Steps

1. Round up the stakeholders
2. Prep for screenshotting
3. Screenshot exercise!
4. Categorize screenshots
5. Present and define next steps

1. Round up the stakeholders

Just like how you wouldn't do a content inventory or design rounds in secret, interface inventories shouldn't be done isolation

[COLLABORATE]

2. Prepare for Screenshots!

Make sure you have a good screenshot tool on-hand and a place to organize and store your screenshots.

http://lifehacker.com/5880540/the-best-screen-capture-tool-for-mac-os-x

http://lifehacker.com/5880928/the-best-screen-capture-tool-for-windows

2. Prepare for Screenshots!

Google Slides also is a great place to collect your screenshots, especially when working in a group

https://goo.gl/x8qJXj

3. Screenshot Exercise!

Some types of Interface Categories

• Global "Regions"
• Navigation
• Image types (logos, thumbnails, backgrounds, etc)
• Icons
• Forms
• Buttons
• Typography Headings

• Blocks
• Lists
• Interactive Components (tabs, carousels, dropdowns, etc)
• Media (video players, etc)
• 3rd Party Components
• Colors
• Advertising

3. Screenshot Exercise!

Keep in mind: we are looking for patterns and treatments.

We don't need to capture every single button for example if every button looks exactly the same

4. Categorize Screenshots

Can also be done while gathering screenshots.

Goal is to view the different treatments / variations of components at a high-level.

4. Categorize Screenshots

This is also where we can begin to normalize our designs and smooth over any inconsistencies or quirks.

https://speakerdeck.com/csswizardry/normalising-designs-for-better-quality-css

https://www.youtube.com/watch?v=ldx4ZFxMEeo

5. Present and

Define Next Steps

The sooner everyone can start to understand we aren't building pages, but systems of components, the better

http://patternlab.io/

Pattern Lab is a Tool

Pattern Lab is a tool to help organize, prototype and build out systems of components.

Although it's core is based on PHP, it's not CMS or OS dependent and can be run via Grunt or Gulp

The awesome thing is that Pattern Lab can act like a living style guide AND a static HTML prototype

Pattern Lab is a Tool

DEMO