styleguides as engineering reference tools
TRANSCRIPT
![Page 1: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/1.jpg)
|
Styleguides as Engineering Reference Tools
Presented By: Rob Mooney, UI/UX Developer
![Page 2: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/2.jpg)
|
Successful Style Guides are...
2
Alive
![Page 3: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/3.jpg)
|
Successful Style Guides are...
3
Aware of their Audience
![Page 4: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/4.jpg)
|
Successful Style Guides are...
4
Usable
![Page 5: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/5.jpg)
|
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
![Page 6: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/6.jpg)
|
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?
![Page 7: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/7.jpg)
|
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
![Page 8: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/8.jpg)
|
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.
![Page 9: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/9.jpg)
|
Uber (brand.uber.com)
9
![Page 10: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/10.jpg)
|
Starbucks (starbucks.com/static/reference/styleguide/)
10
![Page 11: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/11.jpg)
|
Codepen (codepen.io/guide/)
11
![Page 12: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/12.jpg)
|
US Gov’t Web Design Styleguide (standards.usa.gov)
12
![Page 13: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/13.jpg)
|
MailChimp (ux.mailchimp.com/patterns)
13
![Page 14: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/14.jpg)
|
MailChimp (styleguide.mailchimp.com)
14
![Page 15: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/15.jpg)
|
Gov.uk (gov.uk/guidance/style-guide)
15
![Page 16: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/16.jpg)
|
Just a little deep
16
Let’s not get
too deep down
the rabbit hole.
![Page 17: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/17.jpg)
|
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
![Page 18: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/18.jpg)
|
Surrounded By a Pack of Wolves
18
![Page 19: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/19.jpg)
|
How do Web Developers work?
19
Main Tools:
• Text Editor
• Browser (with debug panel
open)
• Command Line
![Page 20: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/20.jpg)
|
What Do Web Developers Use As Tools for Reference
20
![Page 21: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/21.jpg)
|
What Do Web Developers Use As Tools for Reference
21
![Page 22: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/22.jpg)
|
What Do Web Developers Use As Tools for Reference
22
![Page 23: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/23.jpg)
|
What Do Web Developers Use As Tools for Reference
23
![Page 24: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/24.jpg)
|
What Do Web Developers Use As Tools for Reference
24
![Page 25: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/25.jpg)
|
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
![Page 26: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/26.jpg)
|
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
![Page 27: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/27.jpg)
|
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
![Page 28: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/28.jpg)
|
Resources
28
styleguides.io – links to great examples, presentations, podcasts and more
![Page 29: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/29.jpg)
|
Resources
29
Styleguide Generators - github.com/davidhund/styleguide-generators
• If you write CSS too, checkout KSS - http://warpspire.com/kss/
![Page 30: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/30.jpg)
|
Resources
30
stylifyme.com – get a jump on a styleguide for an existing site
![Page 32: Styleguides as Engineering Reference Tools](https://reader031.vdocuments.us/reader031/viewer/2022030318/58eee75c1a28abb9118b4651/html5/thumbnails/32.jpg)
|
THANK YOU
Rob Mooney
@robmweb
bit.do/engineer-style-guides