Times are changing and so must the process in which we design and build websites. The days of designing static compositions in Photoshop are a thing of the past, instead, responsive design within the browser is the future. This new world is not without its own risks, but if we focus on maintainability, organization, and modularity we can achieve a better tomorrow. In this talk Shay will outline styleguides, living documentation on the design and development of a website, and their role within web design and development process. Looking at a few modern practices and standards, this talk will cover the benefits of stylesguides, the strategy behind creating one, and how to best utilize one within your project.

1. Modern
Style Guides
for a Better Tomorrow
Shay Howe
@shayhowe
learn.shayhowe.com

2. Modern Style Guides @shayhowe
CSS is
Hard

7. Modern Style Guides @shayhowe
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.
– Jakob Nielson
“

8. Modern Style Guides @shayhowe
Times are
Changing

9. Modern Style Guides @shayhowe
Tools
• HTML5 & CSS3 have opened doors
• Preprocessors make writing code more efficient
• Frameworks improve abstraction

10. Modern Style Guides @shayhowe
Standards
• Web standards are evolving
• OOCSS & SMACSS promote modularization
• Maintainability & performance are gaining traction

11. Modern Style Guides @shayhowe
Browsers
• Feature support is truly respectful
• Rendering has tremendously improved
• Updates are continuous

12. Modern Style Guides @shayhowe
Processes
• Static compositions are a house of cards
• Responsive design is a must
• Mobile first approach provides clarity

13. Modern Style Guides @shayhowe
We Need to…
• Design, or decide, in the browser
• Provide a realistic presentation of a website
• Quickly change & iterate
• Stay consistent
• Think in systems, not pages
• Build a style guide

14. Modern Style Guides @shayhowe
What is a
Style Guide

20. Modern Style Guides @shayhowe
Style Guide
Goals

21. Modern Style Guides @shayhowe
Provide Consistency
• Build a living reference library
• Favor constraints
• Encourage more cohesive design
• Improve maintainability

24. Modern Style Guides @shayhowe
Set Standards
• Document design & development standards
• Conform to standards
• Socialize standards

26. Modern Style Guides @shayhowe
Improve Workflow
• See the design in action
• Cut out unnecessary steps
• Provide better deliverables
• Make life easier & save time

27. Modern Style Guides @shayhowe
Raise Awareness
• Give design & development a voice
• Create a shared vocabulary
• Advocate quality

30. Modern Style Guides @shayhowe
Getting
Support

39. Modern Style Guides @shayhowe
Development
Strategy

40. Modern Style Guides @shayhowe
Research
• Gather the team
• Ask thought provoking questions
• Listen to what is needed
• Organize feedback

41. Modern Style Guides @shayhowe
Take Inventory
• Take visual inventory
• Recognize patterns
• Identify what to include...
• Branding
• Buttons
• Colors
• Forms
• Icons
• Layout
• Media
• Navigation
• Typography

42. Modern Style Guides @shayhowe
Build Incrementally
• Set a foundation for content
Colors, Layout, Lists, Normalize, Typography
• Add in theme & components
Alerts, Buttons, Labels, Navigation, Tooltips
• Round out specifics
Carousels, Hero, Sidebar

51. Modern Style Guides @shayhowe
Bring It to Life
• Build in live, real code
• Show behaviors & interactions
• Use actual examples
• Make it comprehensive

55. Modern Style Guides @shayhowe
Document Standards
• Document set standards
• Educate through standards
• Include brand, development, design & editorial guidelines

60. Modern Style Guides @shayhowe
Iterate
• Do not neglect the style guide
• Keep the audience in mind
• Reduce friction
• Have a review process

61. Modern Style Guides @shayhowe
Moving
Forward

62. Modern Style Guides @shayhowe
Drive Participation
• Encourage contribution
• Evolve through collaboration
• Make it accessible

63. Modern Style Guides @shayhowe
Watch the Unpredictable
• Predict the unpredictable
• Be rigorous, say no!
• Again, conform to standard

64. Modern Style Guides @shayhowe
Learn from Others
• Look to others for advice
• Study different style guides & frameworks
• Don’t reinvent the wheel

65. Modern Style Guides @shayhowe
Helpful Resources
• Website Style Guide Resources
styleguides.io
• The Style Guide Guide
vinspee.me/style-guide-guide
• Style Guide Boilerplate
brettjankord.com/projects/style-guide-boilerplate
• Stylify Me
stylifyme.com

66. Modern Style Guides @shayhowe
In
Closing

67. Modern Style Guides @shayhowe
1 Provide consistency
2 Set standards
3 Form relationships
4 Build incrementally
5 Iterate often

69. Modern Style Guides @shayhowe
Thank You!
@shayhowe
learn.shayhowe.com
Save 35%
“LEARNCODE2”
peachpit.com