Styleguides 

About Me

     @tiffany_tse

     @tiffany_tse

     @tiffany_tse

     @tiffany_tse

What We'll Talk About

     @tiffany_tse

• What are they and why you should already be using Style Guides 
   
• Understanding the different types of Style Guides and best practices
   
• How to convince your team to use them in your development workflow
   
• Style Guide resources and other complimentary front end tools

     @tiffany_tse

building a system

     @tiffany_tse

Reusable parts

     @tiffany_tse

Responsive Design

     @tiffany_tse

In Browser with style guides!

     @tiffany_tse

What is a style guide?

     @tiffany_tse

STYLE GUIDE 

vs.

PATTERN LIBRARY

     @tiffany_tse

Style guides

Brand Identity

Voice and Tone

Design Language

Writing

Pattern Libraries

Code

-- Brad Frost categorized style guides into a few flavours

     @tiffany_tse

Style guides

Brand Identity

Voice and Tone

Design Language

Writing

Pattern Libraries

Code

     @tiffany_tse

     @tiffany_tse

     @tiffany_tse

Brand Identity

•  Purpose: establish guidelines for using core brand assets such as logos, wordmarks, etc.
   
•  Audience: the entire organization, vendors and anyone making use of brand assets
   
• Includes: Logos, typography, color palette, file templates, assets, downloads, etc

     @tiffany_tse

Style guides

Brand Identity

Voice and Tone

Design Language

Writing

Pattern Libraries

Code

     @tiffany_tse

     @tiffany_tse

voice and tone 

• Purpose: establish and encourage a cohesive, appropriate tone across the entire user experience
   
• Audience: content creators and editors, anyone writing copy for the brand
   
• Includes: UI copy, marketing, documentation, blog posts, and so forth

     @tiffany_tse

Style guides

Brand Identity

Voice and Tone

Design Language

Writing

Pattern Libraries

Code

     @tiffany_tse

     @tiffany_tse

     @tiffany_tse

Design language

• Purpose: establish an understanding for a cohesive user experience across a suite of products and services
   
• Audience: anyone creating user experiences for the organization, mostly designers
   
• Includes: design principles, brand overlap, aesthetics, ux principles, motion, etc

     @tiffany_tse

Style guides

Brand Identity

Voice and Tone

Design Language

Writing

Pattern Libraries

Code

     @tiffany_tse

     @tiffany_tse

writing

• Purpose: establish and encourage a cohesive writing style across all forms of content
   
• Audience: content creators and editors, anyone writing copy for the brand
   
• Includes: grammar, proper content structure, general writing best practices, referencing and so forth

     @tiffany_tse

Style guides

Brand Identity

Voice and Tone

Design Language

Writing

Pattern Libraries

Code

     @tiffany_tse

     @tiffany_tse

     @tiffany_tse

CODE

• Purpose: establish code standards for teams to write more cohesive, efficient, and maintainable code
   
• Audience: front-end developers, back-end developers, 3rd party developers, interns
   
• Includes: development principles, HTML structure guidelines, CSS architecture, syntax, best practices, JS style and best practices, backend language syntax and best practices

     @tiffany_tse

Style guides

Brand Identity

Voice and Tone

Design Language

Writing

Pattern Libraries

Code

     @tiffany_tse

     @tiffany_tse

     @tiffany_tse

     @tiffany_tse

Pattern Libraries

• Purpose: establish and maintain an effective interface design mechanism to create consistent UIs, speed up production, and create a one stop shop for your team
   
• Audience: anyone touching the project: designers, developers, project managers, product owners, etc
   
• Includes: global elements, typography, image types, lists, navigation, blocks, media, animations, literally anything you include in a UI

     @tiffany_tse

why should i care?

     @tiffany_tse

scalable, modular and updatable

     @tiffany_tse

document interactivity

     @tiffany_tse

Workflow

     @tiffany_tse

content first

     @tiffany_tse

Content Modelling

http://alistapart.com/article/content-modelling-a-master-skill

     @tiffany_tse

Style Tiles

http://styletil.es

     @tiffany_tse

     @tiffany_tse

     @tiffany_tse

Element collages

http://danielmall.com/articles/rif-element-collages/

     @tiffany_tse

     @tiffany_tse

before & During the build

​

• Let's create a Style Guide (Pattern Library)
   
• Once a design direction is chosen is the best time to start to build/establish a Style Guide and Pattern Library
   
• This may include any of the umbrella terms I mentioned earlier - you probably have a code style guide you follow already

     @tiffany_tse

Making a

PATTERN LIBRARy reality

     @tiffany_tse

Sell it to your team

     @tiffany_tse

Promotes UI consistency

     @tiffany_tse

Creates a shared vocabulary

     @tiffany_tse

Easier to test

     @tiffany_tse

useful reference

     @tiffany_tse

Selling point for clients

     @tiffany_tse

     @tiffany_tse

You just sneak it in. It's what I'm going to do to make the quality of the work better. And I don't have to say it. It starts in the sales process. You just build enough budget so that you can do it. You don't have a conversation about it, it's just par for the course. You don't have to ask permission.

 

-Dan Mall

http://www.stuffandnonsense.co.uk/blog/about/unfinished-business-episode-105-seventeen-coats-of-bullshit

     @tiffany_tse

Implementing style guides

     @tiffany_tse

Wordpress Installation

• Pea.rs wordpress starter theme
   
• Download it from Github 
  (https://github.com/simplebits/Pears) 
   
• Install it and go!

     @tiffany_tse

     @tiffany_tse

Drupal Installation

• There is a module called styleguide !
   
• You place it in the correct directory
  (sites/all/modules/development/)
   
• And then don't forget to turn it on!

     @tiffany_tse

     @tiffany_tse

Drupal styleguide palette

• New with 7.x-1.x
   
• Simply enable the styleguide_palette

     @tiffany_tse

custom markup

• Create a custom module
   
• Use hook_styleguide() function to trigger
   
• Documentation on drupal.org

     @tiffany_tse

Example Module

https://github.com/tiffanytse/styleguide_example

     @tiffany_tse

Other Customizations

• You can use hook_styleguide() in any module file, where it has access to other variables, functions and includes
   
• https://git.dropfort.com/dropfort/drupalproject/blob/7.x-1.x/drupalproject.module

     @tiffany_tse

Other Systems

https://github.com/davidhund/styleguide-generators

So no excuses!

     @tiffany_tse

Additional tools

https://github.com/BBC-News/wraith

     @tiffany_tse

     @tiffany_tse

TO REcap

     @tiffany_tse

Creating a system

     @tiffany_tse

Promotes consistency

     @tiffany_tse

Scalable, Modular and Updatable

     @tiffany_tse

Interactivity

     @tiffany_tse

So many tools for creation!

     @tiffany_tse

Thanks!

Tiffany Tse

@tiffany_tse

tiffany.tse@shopify.com