Pattern Lab!

# **Pattern Lab** and **Atomic Web Design**

.small[[UX Boston Conference #3](http://www.meetup.com/uxboston/events/218656412/) | January 21, 2015]

by Kianosh Pourian and Daigo Fujiwara

---
class: center, middle

## Kianosh Pourian
User Interface Developer/UX and UI designer, Cielo Concepts Inc

## Daigo Fujiwara
Front end Web Developer, Harvard Business Review

---
class: center, middle, inverse

# Harvard Business Review redesign, November 2014

---
class: center, middle, big-img

![img](img/old-site.png)
---
class: center, middle, big-img

![img](img/am-i-responsive.png)

---
class: center, middle, inverse

#### Problem #1
# Responsive Web Design

---
class: center, middle

## Not a new idea

---
class: center, middle

# It's Easy... 
```css
    @media (min-width:500px) { ... }
```

---
class: center, middle

# ...or is it?

Not just code, but an approach

---
class: center, middle

# Mindset of everyone

---
class: center, middle

## Web **content** fills a variety of **containers**.

---
class: center, middle

# **EMBRACE THE FLUIDITY OF THE WEB!**

Instead of page-based designs, we need **design systems**.
---
class: center, middle
How?

# Communication

Between design and tech
---
class: middle

### Without understanding the system...
* Misunderstanding
* Inconsistencies
* Duplicated or extra work
---

###How to avoid that?

---

##We need to take inventory of our design

---
class: center, middle, inverse

#### Problem #2
# Front-end Style Guide or Pattern Library

---
class: middle

### Benefits of a Web-based Pattern Library

* Being able to **test** responsive design
* Improved **workflow** (Iterative process)
* Shared **vocabulary** ("What do you call it?")
* **Future** reference ("What needs to be coded next?")

.small[Adapted from [Front-end Style Guides](http://24ways.org/2011/front-end-style-guides/) by Anna Debenham]

---
class: middle

## Examples of front-end style guides

* [**Lonely Planet**](http://rizzo.lonelyplanet.com/styleguide/) .small[rizzo.lonelyplanet.com/styleguide/] 
* [**BBC**](http://www.bbc.co.uk/gel) .small[bbc.co.uk/gel]
* [**Starbucks**](http://www.starbucks.com/static/reference/styleguide/) .small[starbucks.com/static/reference/styleguide]
* [**Yelp**](http://www.yelp.com/styleguide) .small[yelp.com/styleguide]
* [**styleguides.io**](http://styleguides.io/examples.html) .small[styleguides.io/]
* [Debenham's style guide collection](https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides-and-pattern-libraries)

---
class: middle

## But...

* **Time consuming** to create
* Seen only as **developer's tool**
* Often too **abstract**
* Often too **incomplete** and/or **out-of-date**

---
class: middle

### **Tools** that are available:
* [Pea.rs](http://pea.rs/)
* [Pattern Primer](http://patternprimer.adactio.com/)
* [Style Guide Boilerplate](http://bjankord.github.io/Style-Guide-Boilerplate/)
* [Pattern Lab](http://patternlab.io/)

---
class: center, middle

## **Atomic Web Design** and **Pattern Lab** helped us with those problems

---
class: middle, center
## Designer vs. Developer

![img](img/lego-marvel-vs-dc-will-it-happen-boss-just-so-boss-picture-source-deviantart.jpeg)

---
class: middle, center
## Designer vs. Developer

![img](img/funny-pictures-kung-fu-fighting-cats.jpg)

---
class: center, middle, inverse

# Atomic Web Design

---
class: middle, center

## Needs for system and “pattern library” for reference

---
class: middle, center
### **Atomic Web Design**
[http://patternlab.io/about.html](http://patternlab.io/about.html)

![img](img/atomic-web-design.gif)

.small[Created by **Brad Frost**, the creator of [this is responsive](http://bradfrost.github.io/this-is-responsive/) pattern library and [Mobile Web Best Practice](http://mobilewebbestpractices.com/)]

---
class: middle

![img](img/atomic-web-design.gif)

**Atoms** on the Web are HTML elements like: h1, p, div, button, etc. More abstract atoms include colors and fonts.

Combining atoms, you get **molecules**, molecules create **organisms**.
---
class: middle

![img](img/atomic-web-design.gif)

## Each of them is **on its own, responsive**.

---
class: middle

![img](img/atomic-web-design.gif)

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

Combined, they become **templates**, and ultimately **pages**.

---
class: center, middle
## Every reusable components on our website is now created with **“mobile first”** in mind.

---
class: center, middle

## What are "Patterns"?

---
class: center, middle

A pattern describes a problem that occurs **over and over again** in our environment, and then describes the core of the solution to that probelm, in such as way that **you can use this solution a million times over**

.small[-- Christopher Alexander (via [Dave Olsen](http://www.slideshare.net/dmolsenwvu/the-death-of-lorem-ipsum-pixel-perfect-content))]

---
class: center, middle, inverse

# Pattern Lab
---
class: center, middle

### Pattern Lab is **an open source tool** to help you create atomic design systems.
![img](img/pattern-lab.png)
**[http://patternlab.io/](http://patternlab.io/)**

.small[Also created by **Brad Frost** and **Dave Olsen**, available on [github](https://github.com/pattern-lab/patternlab-php)]

---
class: middle
## What did Pattern-Lab gave us?

- Visual library of building blocks
- View-port resizer and tester
- Annotation and Code viewer

---
class: center, middle
## Tool to create your site's "living" **front-end style guide** or **pattern-library**

---
class: middle

## Benefits of Pattern Lab
* Start conversation (in browser)
* Build better team (by collaborating)
* Create a shared vocabulary
* Focus (through testing)
* Design systems, instead of page-based designs

---
class: smaller-text, center, middle, big-img

## .man[Benefits]
.man[Instead of]

![img](img/throwing-objects.gif)

---
class: smaller-text, center, middle, big-img

![img](img/keep-calm-and-kumbaya.png)

---
class: center, middle, inverse

# Technology problem

---
class: center, middle

# GEEK ALERT!
![img](img/nerds.png)

---
class: center, middle

# Setting up tools

Pattern Lab, PHP, SASS, Ruby, Compass, Grunt, NodeJS, Foundation, Bower...

---
class: center, middle, big-img 
![img](img/lots-of-stuff.png)

---
class: center, middle

# Solution: 
# Box it up in a **Virtual Machine**

---
class: middle, center

###We created a tool for **you** to start using Pattern Lab...
#...introducing [**daisy**](https://github.com/HBRGTech/daisy).

**bit.ly/hbrdaisy**

---
class: middle, center

# **Thank you!**

[**bit.ly/hbrdaisy**](https://bit.ly/hbrdaisy)

[Download and try daisy](https://github.com/HBRGTech/daisy), let us know what you think!

**Kianosh Pourian** @kianoshp 
**Daigo Fujiwara** @DaigoFuji