Styleguides 

 

Best Practices and Workflow for Web Developers

Tiffany Tse

@tiffany_tse

tiffany.tse@shopify.com

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

So how do we design something static that will eventually become something that isn't?

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

     @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

     @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

     @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

Made with Slides.com