Post on 22-Jan-2018
|
Styleguides as Engineering Reference Tools
Presented By: Rob Mooney, UI/UX Developer
|
Successful Style Guides are...
2
Alive
|
Successful Style Guides are...
3
Aware of their Audience
|
Successful Style Guides are...
4
Usable
|
It’s Alive!
5
• It must be constantly updated as new things are added and old things change
• If you ever contribute to the styleguide then you take responsibility
in keeping it updated
• If your audience can’t rely on it being correct and up to date they will stop using it
|
Break the Fourth Wall
6
A Styleguide needs to be created with a specific audience in mind
• Who is supposed to consume it?
• Is there a specific group or team this is meant for?
• Are they Remote, or Nearby?
• What part of their job/ workflow is it supposed to help?
• How often will they need to refer to it?
• What are they doing when they use it?
|
Usable
7
A styleguide needs to be formatted to be useful. Different Audience’s will consume
your styleguide different ways, which should determine how you lay it out.
• What information needs to be available how and when should determine key
factors like:
• Order of styleguide content
• What information needs to be easily copy-able or remembered
• Which information is the most commonly accessed and therefore the
easiest to get to
|
Who does it right?
8
Luckily there are a ton of great brands/ websites out there that
are creating great styleguides, so we can “take inspiration”
(aka steal liberally) from them.
|
Uber (brand.uber.com)
9
|
Starbucks (starbucks.com/static/reference/styleguide/)
10
|
Codepen (codepen.io/guide/)
11
|
US Gov’t Web Design Styleguide (standards.usa.gov)
12
|
MailChimp (ux.mailchimp.com/patterns)
13
|
MailChimp (styleguide.mailchimp.com)
14
|
Gov.uk (gov.uk/guidance/style-guide)
15
|
Just a little deep
16
Let’s not get
too deep down
the rabbit hole.
|
Styleguides for Engineers
17
For the purpose of this talk lets limit ourselves and go for a real world example.
• Audience – Web Developers
• Content – Reusable Design Patterns
• Form It Will Take – Website
|
Surrounded By a Pack of Wolves
18
|
How do Web Developers work?
19
Main Tools:
• Text Editor
• Browser (with debug panel
open)
• Command Line
|
What Do Web Developers Use As Tools for Reference
20
|
What Do Web Developers Use As Tools for Reference
21
|
What Do Web Developers Use As Tools for Reference
22
|
What Do Web Developers Use As Tools for Reference
23
|
What Do Web Developers Use As Tools for Reference
24
|
What Can We Learn from Code Documentation
25
Styleguide as a Website
Web hosted pdfs (dropbox, google drive, shared server) work too, but the URLs are
hard to remember
• Consider using url shortner with customizable url (bit.do) - http://bit.do/style-
guides-for-engineers
• Browser Address Bar type-ahead is your best friend
Its for web developers, enlist their aid in getting a URL and site up somewhere
|
What Can We Learn from Code Documentation
26
Searchable (Search Bar, CMD+F)
Websites should have a Search Bar if possible
All content (whether website or document) needs to be keyword rich
• When exporting pdfs and documents be careful to keep text as text and not
convert to images
|
What Can We Learn from Code Documentation
27
Code Examples are easily accessible
• Visually separate the code, make sure its clearly related with its headings
Code Examples are Copyable
• Offer a copy to clipboard button
• Test to make sure it is easily copyable
If there is no code, there might be hex/ rgba color values or other content that
developers need available for copying
|
Resources
28
styleguides.io – links to great examples, presentations, podcasts and more
|
Resources
29
Styleguide Generators - github.com/davidhund/styleguide-generators
• If you write CSS too, checkout KSS - http://warpspire.com/kss/
|
Resources
30
stylifyme.com – get a jump on a styleguide for an existing site
|
THANK YOU
Rob Mooney
@robmweb
bit.do/engineer-style-guides