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

     @tiffany_tse

Style Tiles

     @tiffany_tse

     @tiffany_tse

     @tiffany_tse

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

     @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

     @tiffany_tse

Other Customizations

     @tiffany_tse

Other Systems

     @tiffany_tse

Additional tools

     @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

Style Guides: Best Practices and Workflow for Web Developers

By tset

Style Guides: Best Practices and Workflow for Web Developers

With responsive websites being an expectation in today's web landscape, we need to maintain the complexity and flexibility of a system by designing and building individual components that move and reflow within layouts. Style Guides are a mechanism to style most (if not all) of your site's themable elements in one place, and have quickly become the foundational tool for tackling an increasingly-diverse web landscape. Getting greater theme coverage allows your site builders and content managers to dynamically add new pages and layouts to your site, all while keeping the look and feel intact and maintaining a consistent experience for the end user. Style Guides give designers and developers a platform to create a shared vocabulary, building out components of a system instead of ‘pages’ to a website, and deciding on markup together. This session will feature best practices for creating Style Guides, as well as outline other essential tools for theme development and collaboration.

  • 10,716