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.

1. STYLE GUIDES@brad_frost

3. Great news, team.
We got the green light to
redesign the homepage.

5. That’s great
news, boss!

6. Yeah, the current
homepage is super ugly!

7. Yeah and don’t even ask
about the code quality lol.

8. Exciting! It will be great to do
things right this time.

9. Yeah we’re going to
use BEM…

10. And the visuals will be
clean and flat.

11. Yeah and we’re definitely
looking into React.js

12. And maybe this will give us
the chance to finally
migrate to a new CMS.

13. Grunt.

14. Make it so.

15. LATHER. RINSE. REPEAT.

30. global

31. north america

32. latin america

33. chile

34. europe

35. india

36. australia

37. china

38. hong kong

39. taiwan

41. huge jerk.

49. We don’t have time for
cohesion and continuity!

50. We’re too busy
DISRUPTING!

51. ONE BRAND

52. MOREDEVICESENVIRONMENTS
PEOPLELANGUAGES
CONTENT
BROWSERS
MEDIUMS
COUNTRIES
SCREENSIZES
FEATURES
PRODUCTSSERVICESFUNCTIONALITY
CUSTOMERS
FORMA
USER
FORMFACTORSCONTEXT

53. STYLE GUIDES

56. http://cargocollective.com/mcalkins/Walmart-brand-book-design

57. brand.wvu.edu

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

67. https://www.google.com/design/spec/material-design/

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

73. voiceandtone.com

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

79. http://www.economist.com/styleguide/

83. http://www.dal.ca/webteam/web_style_guide/writing_for_the_web.html

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

87. code block
.thisishowwedoit {
}
CSS SYNTAX GUIDELINES

88. code block
.this-is-how-we-do-it {
}
CSS SYNTAX GUIDELINES

89. code block
.thisIsHowWeDoIt {
}
CSS SYNTAX GUIDELINES

90. code block
.this__is__how__we__do—-it {
}
CSS SYNTAX GUIDELINES

91. code block
.- -...- - ..- - —— .. . ..—— — {
}
CSS SYNTAX GUIDELINES

92. https://github.com/styleguide

93. https://github.com/styleguide/javascript

94. https://github.com/styleguide/javascript

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

97. http://walmartlabs.github.io/web-style-guide

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

106. MAKING PATTERN LIBRARIES HAPPEN

107. $ELL IT.

108. BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion

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

121. SHOW, DON’T TELL.

122. http://cssstats.com

125. http://bradfrostweb.com/blog/post/interface-inventory

128. ROUND UP THE TROOPS
1

130. PREPARE TO SCREENSHOT
2

131. http://bradfrost.com/blog/post/conducting-an-interface-inventory/

132. SCREENSHOT EXERCISE
3

133. INTERFACE INVENTORY CATEGORIES
๏ Global
๏ Image types
๏ Icons
๏ Navigation
๏ Forms
๏ Buttons
๏ Interactive Components
๏ Media
๏ Headings
๏ Blocks
๏ Lists
๏ 3rd party stuff
๏ Advertising
๏ Messaging
๏ Animation
๏ Colors

136. PRESENT FINDINGS
4

137. http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg

138. REGROUP & NEXT STEPS
5

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.

143. ATOMIC DESIGN

148. ENTER KEYWORD
SEARCH THE SITE
SEARCH

149. ENTER KEYWORD
SEARCH THE SITE
SEARCH

163. ABSTRACT CONCRETE

164. ABSTRACT CONCRETE
CREATORS CLIENTS

165. REFERENCE BUILD REVIEW

166. http://styleguides.io/tools.html

168. DAVE OLSEN@dmolsen

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)

174. https://mustache.github.io/

176. MOLECULE GUTS
code block
<div class="block block-post">
<a href="{{ url }}">
<div class="b-img">
{{> atoms-thumb }}
</div>
<h3 class="b-title">{{ headline }}</h3>
<p class="b-excerpt">{{ excerpt }}</p>
</a>
</div>

177. BASIC INCLUDE
code block
{{> molecules-block-post }}

180. ORGANISM GUTS
code block
<header role="banner">
{{> atoms-logo }}
{{> molecules-primary-nav }}
{{> molecules-search }}
</header>

181. ORGANISM INCLUDE
code block
{{> organisms-header }}

185. TEMPLATE GUTS
code block{{> organisms-header }}
<main role="main">
{{# hero }}
{{> molecules-hero-video }}
{{/ hero }}
<section>
{{# experience }}
{{> organisms-story-feature }}
{{/ experience }}
</section>
<section>
{{# factoid-advertising }}
{{> organisms-factoid }}
{{/ factoid-advertising }}

187. CONTENT STRUCTURE ACTUAL CONTENT

191. PIPING IN REAL CONTENT
code block{
"title" : "Time Inc.",
"bodyClass": "home",
"hero" : {
"headline": "Moving People"
"img": {
"src": "/images/hero_beyonce.jpg",
"alt": "Beyonce"
}
}

192. patternlab.io

208. http://trentwalton.com/2011/07/14/content-choreography/

210. …OR DID THEY?

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

215. MAKE IT MAINTAINABLE

216. YOU SEEK THE HOLY GRAIL.

217. http://rizzo.lonelyplanet.com/

219. MAKE IT CROSS-
DISCIPLINARY

223. MAKE IT APPROACHABLE

224. http://www.yelp.com/styleguide

225. http://sfdc-styleguide.herokuapp.com

226. http://purple.herokuapp.com

227. MAKE IT VISIBLE

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

229. http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/

230. styleguides.io/examples.html

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

234. MAKE IT AGNOSTIC

238. WARNING:
NAMING THINGS IS
REALLY FREAKING HARD.
https://www.flickr.com/photos/131260238@N08/

241. MAKE IT CONTEXTUAL

243. MAKE IT LAST

244. http://www.google.com/design/spec/whats-new/whats-new.html

246. https://flic.kr/p/5YnE4z

248. styleguides.io

249. http://styleguides.io/podcast

250. atomicdesign.bradfrost.com

251. atomicdesign.bradfrost.com
ONLY
$10!!!

252. THANKS!@brad_frost