Brad Frost
Web designer
Style Guide Best Practices
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.
65. 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
71. 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
77. 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
84. 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
95. 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
103. 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
109. 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
http://www.nngroup.com/articles/top-10-mistakes-web-design/
110. BENEFITS OF PATTERN LIBRARIES
เน Promotes UI consistency and cohesion
เน Faster production
111. 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. [The status page]
was one of those pages that not a lot of people will
see. We call them the dark corners.
-Federico Holgado
http://styleguides.io/podcast/federico-holgado/
112. 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
http://styleguides.io/podcast/federico-holgado/
113. BENEFITS OF PATTERN LIBRARIES
เน Promotes UI consistency and cohesion
เน Faster production
เน Better workflow
114. Mostly designers will come up with rough
representations of where things might live without
going into too much detail because there's no
longer a need to do that work up front and we can
just tweak it in the browser afterwards.
-Ian Feather
http://styleguides.io/podcast/ian-feather/
115. BENEFITS OF PATTERN LIBRARIES
เน Promotes UI consistency and cohesion
เน Faster production
เน Better workflow
เน Creates a shared vocabulary
116. It is the common ground that designers and
developers are all seekingโฆand I find that a
style guide is really effective at providing
that common ground.
-Lincoln Mongillo
http://styleguides.io/podcast/lincoln-mongillo/
117. BENEFITS OF PATTERN LIBRARIES
เน Promotes UI consistency and cohesion
เน Faster production
เน Better workflow
เน Creates a shared vocabulary
เน Easier to test
118. It makes what you change in production a lot
more easy to manage over the long term; you're
able to debug things more effectively. You're
able to have a view into how your code base is
looking across a site versus having various
artifacts show up across hundreds of pages.
-Lincoln Mongillo
http://styleguides.io/podcast/lincoln-mongillo/
119. BENEFITS OF PATTERN LIBRARIES
เน Promotes UI consistency and cohesion
เน Faster production
เน Better workflow
เน Creates a shared vocabulary
เน Easier to test
เน Useful reference
120. BENEFITS OF PATTERN LIBRARIES
เน Promotes UI consistency and cohesion
เน Faster production
เน Better workflow
เน Creates a shared vocabulary
เน Easier to test
เน Useful reference
เน Future-friendly foundation
139. เน Documents your interface design patterns
เน Points out inconsistencies
เน Helps get buy-in from organization
เน Establishes scope of work
เน Is the genesis of a shared vocabulary
เน Lays the groundwork for a future pattern library
INTERFACE INVENTORY
140. AND IF THE BOSS STILL SAYS NO,
DO IT ANYWAYS.
141. 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
142. IN ORDER TO MAKE THE WHOLE,
YOU NEED TO MAKE THE PARTS.
169. WHAT PATTERN LAB IS
เน A design system builder
เน Your comprehensive interface design system
เน A style guide starter kit
เน A design toolkit (viewport resizer and other tools)
212. Putting a style guide off to the end or
treating it as a separate thing is just asking
for it to just sort of die on the vine or become
outdated and obsolete.
-Jina Bolton
styleguides.io/podcast/jina-bolton
228. When you start to place these kinds of
assets behind constraints, many teams
either take an outrageously long time to get
access, or they never get access.
-Nathan Curtis
http://styleguides.io/podcast/nathan-curtis
232. Companies are using their style guide as a
testament to what their belief system is
and also an indicator of the quality of
their organization; they're essentially
using it as a recruiting tool.
-Nathan Curtis
http://styleguides.io/podcast/nathan-curtis/
233. When I saw Salesforceโs style guide I
thought it was beautiful and it's why I
wanted to join this team.
-Jina Bolton
styleguides.io/podcast/jina-bolton