Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Styleguides as Engineering Reference Tools
Ähnlich wie Styleguides as Engineering Reference Tools (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Styleguides as Engineering Reference Tools
- 1. | Styleguides as Engineering Reference Tools Presented By: Rob Mooney, UI/UX Developer
- 2. | Successful Style Guides are... 2 Alive
- 3. | Successful Style Guides are... 3 Aware of their Audience
- 4. | Successful Style Guides are... 4 Usable
- 5. | 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
- 6. | 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?
- 7. | 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
- 8. | 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.
- 12. | US Gov’t Web Design Styleguide (standards.usa.gov) 12
- 16. | Just a little deep 16 Let’s not get too deep down the rabbit hole.
- 17. | 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
- 18. | Surrounded By a Pack of Wolves 18
- 19. | How do Web Developers work? 19 Main Tools: • Text Editor • Browser (with debug panel open) • Command Line
- 20. | What Do Web Developers Use As Tools for Reference 20
- 21. | What Do Web Developers Use As Tools for Reference 21
- 22. | What Do Web Developers Use As Tools for Reference 22
- 23. | What Do Web Developers Use As Tools for Reference 23
- 24. | What Do Web Developers Use As Tools for Reference 24
- 25. | 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
- 26. | 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
- 27. | 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
- 28. | Resources 28 styleguides.io – links to great examples, presentations, podcasts and more
- 29. | Resources 29 Styleguide Generators - github.com/davidhund/styleguide-generators • If you write CSS too, checkout KSS - http://warpspire.com/kss/
- 30. | Resources 30 stylifyme.com – get a jump on a styleguide for an existing site