“Thinking Inside the Box Inside the Box Inside the Box” !

Designing with Style Guides

Mason Wendell

Show Cover

The Jazz Messenger

Mason Wendell

Senior Designer, Phase2
codingdesigner on the internet: Twitter GitHub Instagram
Creator of Breakpoint Sass
Co-Organizer of @import
Designed 2014 SassConf.com

Show Cover

This Presentation

codingdesigner.github.io/box

Reid Miles & Blue Note

SVG, CSS Blend Modes

Bugs? Let me know on github.

Show Cover

I’m a music nerd.

Avant Garde Noise

Show Cover

Weird Punk Rock

Show Cover

Indie Pop

Show Cover

Jazzbos are cool

Show Cover

CSS

Know your medium

Present in the Browser

Design in the Browser

Show Cover

What are we designin’?

Not web pages
Design Systems
Small and Large Scale

Show Cover

This Leads Us to Style Guides

A traditional product of creating a design system is for the designer to create a style guide. This might be done after a design is complete as a way to communicate that design thinking to other stakeholders or future designers.

Our design language needs to sustain a feeling and character across many different sections of content. If the brand is cool and sophisticated it probably won't do to lose sight of that and start adding tattoo flames. That's why we have style guides. They codify a design so it can be communicated to others. Recently major brands have begun **publishing html style guides publicly**. This makes it easy for new designers to create new work for them while maintaining the brand. It also helps us grow as an industry if we can see and learn from each other.

Style Guide as Design Tool

Atomic Design
Pattern Lab

Show Cover

I'm suggesting that we flip this process and start with the style guide and treat it like a **design tool**. I'm certainly not the first. Brad Frost has written about this extensively. You may have seen him write about the concept of **atomic design**. He proposes starting with the smallest things you can design, calling them atoms, and working your way up through bigger and bigger constructs until you've designed full templates and pages. At Phase2 we've been using **Pattern Lab**, his styleguide creation tool on many of our projects. We'll be looking at that later.

By starting with the style guide and creating the reference for the design language as we create it we get a very valuable perspective that allows us to fine tune the minute details and see how all the little pieces combine to create the whole.

We’re Talkin’ About Component-Driven Design

self-contained chunk of design
extension of well-formed content
assembled into other components and combined into layouts

Show Cover

Blank Page vs Style Guide

Show Cover

Organize Content

screen shot of design components in patternlab

Colors and Type

screen shot of colors and typography in patternlab

Design Iterations

screen shot of a designed template in patternlab

Assemble Components

Hard Bop

Melody
Tonality
Chords
Form

Show Cover

This approach to designing strikes me as similar to how **hard bop** Jazz is stereotypically structured. We all know that there’s a lot of improvisation in Jazz, but a song doesn’t come from nowhere, and it doesn’t all come out at once.

A composer creates the **tune**
in a key, creates a **tonality** and
**chord progression**, and
defines the song's **form**.

That’s what the composer writes down. That’s the song as a document – the style guide for the song. Then he’ll take that to the band and they’ll play that tune once. It usually takes less than a minute, but the band continues playing. This is where the improvisation kicks in.

What’s going on is that players will take turns soloing over all the source material the composer gave them. The players mine the song form and chord progression for interesting material. It’s not a free-for-all. They’re not trying to play any different songs. They’re exploiting the vocabulary the composer gave them. Sounds like design to me.

Musical Thinking And Style Guides

Show Cover

Melody and Lyrics

Music	Design	Connection
Melody and Lyrics	Content	What You Hum In The Shower

Show Cover

Content Content Content Content Content

Content first design *
Before we Decorate
Content Inventory and Modelling
Follow the Content’s Lead

Show Cover

Let's think about that in tems of **content-first design**.

Good music is not good because it's in 4/4, or 5/8, or resolves to a D Locrian with a sharp 9. Although that's pretty cool. It's all about the core melody and lyrics. The content. So let's start with that as we design.

We should know what our content is going to be **before we try to decorate** it. We'll probably never have every word and image in advance, but we can do a thorough **content inventory and modelling** and be able to map out the characteristics of the content. That's what we need in order to make our CMS after all, and it's no different for our design.

By starting with the content we have the opportunity to **follow its lead**. It's the first piece of our design vocabulary.

Harmony and Rhythm

Music	Design	Connection
Melody and Lyrics	Content	What You Hum In The Shower
Harmony And Rhythm	Design Components	Give Structure And Distinction To The Content

Show Cover

Component Based Design

Look for patterns
Combine into bigger components
Assemble into templates

Show Cover

Instruments and Players

Music	Design	Connection
Melody And Lyrics	Content	What You Hum In The Shower
Harmony And Rhythm	Design Components	Give Structure And Distinction To The Content
Instruments Players	Art Direction	Aesthetic Framework And Limitatons

Show Cover

Lay The Aesthetic Foundation

Colors
Type Scale
Typefaces

Show Cover

Finding the Right Typeface

Typecast

Choose and Combine
Style
Compare

Show Cover

Finding the Right Type Sizes

Sassy Modular Scale

Use ratios to establish sizes
Set of Limitations

screen shot of a modular scale — `$ms-ratio: $fourth; $ms-base: 16px 44px;`

Show Cover

Once I decide on a font face I like to find a set of font sizes that work harmoniously.

Let's look at an example. THE GREAT DISCONTENT

**Modular Scale** uses a concept that's been in typographic practice for hundreds of years and uses consistent ratios to establish relationships between type sizes. In fact the ratios are often expressed as musical intervals. This is a good time to do some experimenting.

For that, my friend Scott Kellum and I wrote Sassy Modular Scale to bring Tim Brown's Modular Scale concept to Sass.

In the **Sass version** you have a lot of control to create a scale with a lot of wide jumps in size or something more tightly spaced. The sizes you choose should show the type at its best, and also help to give your design language a certain character. It establishes a **set of limitations**. Just keep in mind that this is very similar to a musical scale. You don't have to always play the notes in order.

Finding the Right Colors

Color Schemer

Single Seed Color
Harmonious Color Families
Experiment and Tweak

Show Cover

Singularity

Sass Grid System
Define Any Grid You Like
Equal Or Assymetrical

$grid-9: 9;
  $grid-9-gutter: .25;
  .columns {
  @include layout($grid-9, $grid-9-gutter) {
  .col-1 { @include grid-span(1, 1); }
  .col-2 { @include grid-span(1, 2); }
  }
  }

$grid-6: 1 2 1 2 1 2;
  $grid-6-gutter: .25;
  .columns {
  @include layout($grid-6, $grid-6-gutter) {
  .col-1 { @include grid-span(1, 1); }
  .col-2 { @include grid-span(1, 2); }
  }
  }

$grid-4: 8 1 3 5;
  $grid-4-gutter: .25;
  .columns {
  @include layout($grid-4, $grid-4-gutter) {
  .col-1 { @include grid-span(1, 1); }
  .col-2 { @include grid-span(1, 2); }
  }
  }

Show Cover

Sass Media Queries

Breakpoint

$basic: 543px;
  $pair: 456px 794px;

  #foo {
  @include breakpoint($basic) {
  content: 'Basic Media Query';
  }

  @include breakpoint($pair) {
  content: 'Paired Media Query';
  }
  }

@media (min-width: 543px) {
  #foo {
  content: 'Basic Media Query';
  }
  }

  @media (min-width: 456px) and (max-width: 794px) {
  #foo {
  content: 'Paired Media Query';
  }
  }

Organize By Setting Variables
Simplify With Shorthand Syntax
Easier To Experiment And Move To Production

Show Cover

Element Queries

eq.js

Not Native To Css
Add States As A Data-attribute
Style Based On Data Attributes

Show Cover

The Performance

“it’s time!”…!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Show Cover

Working with Teams and Clients

Unity

splitting out the components
designers can work simultaneously
integrate photoshop-based designers
pair with front end developers

Show Cover

I've been using Pattern lab as an example here so I want to give you a brief tour of some of the things I like about it. Pattern Lab is centered arround giving you a low-friction way to define whatever design components you need, organize them into whatever categories or groupings you like, assemble them into bigger components, and then templates, and finally pages. You can add whatever CSS and JavaScript you want. You don't have to use Sass (altho *really?*) and you're really free to use any front end technique you like. One of my favourite bits of the UI is that it lets you quickly drag the width slider to see how the design works at different breakpoints. For me it's really about enabling the design iterations to go quickly and to give you clarity on the global shape of the design language as it progresses.

Pattern Lab

Color Palettes in Sass


$palettes: (
  blue: (
    base: rgb(28, 117, 188),
    light: rgb(0, 160, 223),
    dark: rgb(0, 52, 121)
  ),
  red: (
    base: rgb(243, 6, 23),
    dark: rgb(99, 50, 63)
  ),
  green: (
    base: rgb(90, 135, 57),
    light: rgb(133, 187, 61)
  ),
  purple: (
    base: rgb(92, 49, 131)
  ),
  orange: (
    base: rgb(203, 113, 19),
    light: rgb(225, 173, 64)
  ),
  yellow: (
    base: rgb(231, 230, 47)
  ),
  gray: (
    base: rgb(130, 130, 130),
    light: rgb(219, 219, 219),
    x-light: rgb(242, 242, 242),
    xx-light: rgb(250, 250, 250),
    dark: rgb(78, 80, 84)
  ),
  white: (
    base: #FFFFFF,
    transparent: hsla(0, 0%, 100%, 0),
    semitrans: hsla(0, 0%, 100%, 0.15)
  ),
  black: (
    base: #000000
  )
);


/* Get color function */
@function color($color, $tone: 'base') {
  @return map-get(map-get($palettes, $color), $tone);
}

/* Using color function */
.button {
  color: color(white);
  background-color: color(blue, light);
}

Try() Mixins


$palettes: (
  blue: (
    base: rgb(28, 117, 188),
    light: rgb(0, 160, 223),
    dark: rgb(0, 52, 121)
  ),
  red: (
    base: rgb(243, 6, 23),
    dark: rgb(99, 50, 63)
  ),
  green: (
    base: rgb(90, 135, 57),
    light: rgb(133, 187, 61)
  ),
  purple: (
    base: rgb(92, 49, 131)
  ),
  orange: (
    base: rgb(203, 113, 19),
    light: rgb(225, 173, 64)
  ),
  yellow: (
    base: rgb(231, 230, 47)
  ),
  gray: (
    base: rgb(130, 130, 130),
    light: rgb(219, 219, 219),
    x-light: rgb(242, 242, 242),
    xx-light: rgb(250, 250, 250),
    dark: rgb(78, 80, 84)
  ),
  white: (
    base: #FFFFFF,
    transparent: hsla(0, 0%, 100%, 0),
    semitrans: hsla(0, 0%, 100%, 0.15)
  ),
  black: (
    base: #000000
  )
);


/* Get color function */
@function color($color, $tone: 'base') {
  @return map-get(map-get($palettes, $color), $tone);
}

/* Try colors mixin */
@mixin try-colors() {
  @each $palette, $items in $palettes {
    @each $name, $value in $items {
      /* color: #{$value}; */
      /* background-color: #{$value}; */
    }
  }
}

/* Using color function */
.button {
  color: color(white);
  background-color: color(blue, light);
  @include try-colors();
}

Try() Mixins Demo

Try() on Github

github.com/at-import/try

Learn one simple trick to keep your styleguide alive from design through launch and beyond.

Use the CSS, JS, and other assets from your styleguide in production.

Also use Grunt to automate tasks like Sass compiling and Modernizr builds.

I lied. That’s two tricks.

Show Cover

Thanks!

Presentation: codingdesigner.github.io/box
Patternlab: patternlab.io
Typecast: typecast.com
Sassy Modular Scale: github.com/at-import/modular-scale
Color Schemer: github.com/at-import/color-schemer
eq.js: github.com/Snugug/eq.js
Breakpoint: github.com/at-import/breakpoint

Show Cover

“Thinking Inside the Box Inside the Box Inside the Box” !

Designing with Style Guides

The Jazz Messenger

Mason Wendell

This Presentation

I’m a music nerd.

Avant Garde Noise

Weird Punk Rock

Indie Pop

Jazzbos are cool

Design in the Browser

What are we designin’?

This Leads Us to Style Guides

Style Guide as Design Tool

We’re Talkin’ About Component-Driven Design

Blank Page vs Style Guide

Organize Content

Colors and Type

Design Iterations

Assemble Components

Hard Bop

Musical Thinking And Style Guides

Melody and Lyrics

Content Content Content Content Content

Harmony and Rhythm

Component Based Design

Instruments and Players

Lay The Aesthetic Foundation

Finding the Right Typeface

Typecast

Finding the Right Type Sizes

Sassy Modular Scale

The Great Discontent

The Great Discontent

The Great Discontent

Finding the Right Colors

Color Schemer

Singularity

Sass Media Queries

Breakpoint

Element Queries

eq.js

The Performance

Working with Teams and Clients

Pattern Lab

Color Palettes in Sass

Try() Mixins

Try() Mixins Demo

Try() on Github

Learn one simple trick to keep your styleguide alive from design through launch and beyond.

I lied. That’s two tricks.

Thanks!