An Event Apart: “Style Guide Best Practices”

Brad Frost speaking at An Event Apart Orlando 2016 at Disney’s Contemporary Resort in Walt Disney World on October 3, 2016.

We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices and environments. That’s a tall order in and of itself, but once you factor in other team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. With so many variables to consider, we need solid ground to stand on. Style guides are quickly proving to be foundational tools for tackling this increasingly-diverse web landscape while still maintaining your sanity. Style guides promote consistency, establish a shared vocabulary, make testing easier, and lay a future-friendly foundation. This session will detail best practices and considerations for creating and maintaining style guides, so you can set up your organization for success.

Photo source: Zeffrey Zeldman
Photo source: Zeffrey Zeldman

Notes

  • Inconsistent experiences
    • Examples:
      • Getty Images: completely different layouts and styles across the same website
      • Canon: different websites/designs for each country
      • eBay: old interface still present on parts of the website
      • United Airlines: 13 different button styles on the home page
  • Blow up our interface into a series of components
  • Tearing up the page
    • Strategy
    • Process
      • “We want to be more agile; we’re embracing change, continuing improvement, being as flexible as possible, and adapting as we see fit. The thing is, we won’t ever truly be Agile, as the Manifesto states. That’s okay, as long as we say what we will be.” — Brett Harned, “DIY Process”
    • Content
    • Code
      • SMACSS
      • BEM
      • Object-Oriented CSS
    • Visual Design
    • UI Design
      • “We’re not designing pages, we’re designing systems of components.” — Stephen Hay, “BDConf: Stephen Hay presents Responsive Design Workflow”
      • Frameworks (Zurb Foundation, Bootstrap, etc.) are great, but they have potential pitfalls:
        • One-size-fits-all
        • Lookalike issues
        • Potential for bloat/unneeded stuff
        • Might not do everything you need
        • Compatibility with existing sites
        • Subscribe to someone else’s structure, naming, style
      • “Tiny Bootstraps, for every client.” — Dave Rupert, “Responsive Deliverables”
      • “Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.” — Dave Rupert, “Responsive Deliverables”
  • Style Guides
    • 6 types of style guides:
      1. Brand identity
        • Walmart brand book design
        • West Virginia University – Brand Center
        • Brand.ai: build a connected design system; tools and integrations to keep your design system easy to maintain and use
        • Frontify: Software for Brand Style Guides, Design Workflows & Visual Collaboration
        • Brand style guides:
          • Purpose: establish guidelines for using core brand assets
          • Audience: the entire organization, vendors and anyone making use of brand assets
          • Can include: Logos, typography, color palette, file templates, assets, downloads, etc
      2. Design language
        • Google Material Design
        • Design language guidelines:
          • Purpose: establish a design language for cohesive user experience across a suite of products and services
          • Audience: anyone creating user experiences for the organization, mostly designers
          • Can include: design principles, brand overlap, aesthetics, ux principles, motion, etc
      3. Voice and tone
        • Voice & Tone
        • Voice and tone guidelines:
          • Purpose: establish and encourage a cohesive, appropriate tone across the entire user experience
          • Audience: content creators and editors, anyone writing copy for the brand
          • Can include: interface copy, marketing, documentation, blog posts, legal, alerts, etc
      4. Writing
        • The Economist – Style Guide
        • Standard comma, Oxford comma, or Walken comma?
        • Dalhousie University – Writing for the Web
        • Writing style guides:
          • Purpose: establish and encourage a cohesive writing style across all properties
          • Audience: content creators and editors, anyone writing copy for the brand
          • Can include: grammar, proper content structure, general writing best practices
      5. Code
        • CSS syntax guidelines
          • .thisishowwedoit or .this-is-how-we-do-it or .thisIsHowWeDoIt or .this__is__how__we__do—-it?
        • GitHub – Styleguide
        • Frontend Guidelines Questionnaire
        • Code style guides:
          • Purpose: establish code standards for teams to write more cohesive, efficient, and maintainable code
          • Audience: front-end developers, back-end developers, 3rd party developers, summer interns, developers developers developers
          • Can include: development principles, HTML structure guidelines, CSS architecture, syntax, best practices, JS style and best practices, backend language syntax and best practices
      6. Pattern libraries
        • Walmart Web Style Guide
        • Pattern libraries:
          • Purpose: establish and maintain an effective interface design system to create consistent UIs, speed up production, and create a watering hole for the team
          • Audience: anyone touching the project: designers, developers, project managers, product owners, etc
          • Can include: global elements, typography, image types, lists, navigation, blocks, media, animations, literally anything you include in a UI
  • Sell it — Benefits of pattern libraries:
    • Promotes UI consistency & cohesion = more conversions & more money
      • “Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience.” — Jakob Nielson, “Top 10 Mistakes in Web Design”
    • Faster production = roll out more features & iterations faster than ever
      • “[The status page] is one of those pages that not a lot of people will see. We call them the dark corners. But we just copied and pasted a pattern, changed a few things, and in twenty minutes we had built a system that was responsive; it looked great on mobile and it was nice to look at.” — Federico Holgado, “Style Guides with Federico Holgado”
      • “By having a pattern you could actually use that’s already 95% of the way there, it brings up the quality of everything so those dark corners actually aren’t so dark any more.” — Federico Holgado, “Style Guides with Federico Holgado”
    • Shared vocabulary = more time collaborating & less time in meetings
    • Easier to test = more responsive, performant, and accessible experiences
      • “Pattern libraries make what you change in production a lot more easy to manage over the long term; you’re able to debug things more effectively. You have a view into how your code looks across a site versus having various artifacts show up across hundreds of pages.” — Lincoln Mongillo, “Style Guides with Lincoln Mongillo”
    • Useful reference = an essential resource and hub for best practices
    • Future-friendly foundation = modify, extend, & improve upon over time
  • Show, don’t tell
    • CSS Stats
    • Interface Inventory
      • Steps:
        1. Round up the troops
        2. Prepare to screenshot
        3. Screenshot exercise
          • Interface inventory categories:
            • Global
            • Image types
            • Icons
            • Navigation
            • Forms
            • Buttons
            • Interactive Components
            • Media
            • Headings
            • Blocks
            • Lists
            • 3rd party stuff
            • Advertising
            • Messaging
            • Animation
            • Colors
        4. Present findings
        5. Regroup & next steps
      • Interface inventory:
        • Documents your interface design patterns
        • Points out inconsistencies
        • Helps get buy-in from organization
        • Establishes scope of work
        • Plants the seeds of a shared vocabulary
        • Lays the groundwork for a future pattern library
      • And if the boss still says no, do it anyways
  • In order to make the whole, you need to make the parts
  • Atomic Design
    • Parts:
      • Atoms
      • Molecules
      • Organisms
      • Templates
      • Pages
    • Atomic design is a helpful mental model, not rigid dogma
  • “Development Is Design”
  • Front-end development has to be a core part of the design process
    • Front-end developers bridge the gap between designers and developers
  • Establish direction
    • List out atomic design elements in a spreadsheet, with columns: organism, molecule, description, example content
  • Pattern Lab
  • mustache: Logic-less templates
  • Roll up our sleeves
    • Content Choreography by Trent Walton
    • Instead of putting design and development directly into the website, put design and development into a design system and use that system to output the website and pattern library
      1. Design & development
      2. Design system
      3. Website + Pattern library
    • “A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.” — Nathan Curtis
  • Make it adaptable
  • Make it maintainable
  • Make it cross-disciplinary
  • Make it approachable
  • Make it visible
  • Make it agnostic
    • Naming things is really hard
    • Helpful tip for naming things: blur out all the text on an element, show it to a co-worker, and ask them what it looks like
  • Make it contextual
  • Make it last
  • Atomic Design book