modern style guides for a better tomorrow

ModernStyle Guidesfor a Better Tomorrow

Shay [email protected]

Modern Style Guides @shayhowe

CSS isHard


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

“


Times areChanging


Tools•HTML5 & CSS3 have opened doors•Preprocessors make writing code more efficient• Frameworks improve abstraction


Standards•Web standards are evolving•OOCSS & SMACSS promote modularization•Maintainability & performance are gaining traction


Browsers• Feature support is truly respectful•Rendering has tremendously improved•Updates are continuous


Processes• Static compositions are a house of cards•Responsive design is a must•Mobile first approach provides clarity


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


What is aStyle Guide


Style GuideGoals


Provide Consistency•Build a living reference library• Favor constraints• Encourage more cohesive design• Improve maintainability


Set Standards•Document design & development standards•Conform to standards•Socialize standards


Improve Workflow• See the design in action•Cut out unnecessary steps• Provide better deliverables•Make life easier & save time


Raise Awareness•Give design & development a voice•Create a shared vocabulary•Advocate quality


GettingSupport


DevelopmentStrategy


Research•Gather the team•Ask thought provoking questions• Listen to what is needed•Organize feedback


Take Inventory•Take visual inventory•Recognize patterns• Identify what to include...

•Branding•Buttons•Colors

• Forms• Icons• Layout

•Media•Navigation•Typography


Build Incrementally• Set a foundation for content

Colors, Layout, Lists, Normalize, Typography

•Add in theme & componentsAlerts, Buttons, Labels, Navigation, Tooltips

•Round out specificsCarousels, Hero, Sidebar


Bring It to Life•Build in live, real code• Show behaviors & interactions•Use actual examples•Make it comprehensive


Document Standards•Document set standards• Educate through standards• Include brand, development, design & editorial guidelines


Iterate•Do not neglect the style guide•Keep the audience in mind•Reduce friction•Have a review process


MovingForward


Drive Participation• Encourage contribution• Evolve through collaboration•Make it accessible


Watch the Unpredictable• Predict the unpredictable•Be rigorous, say no!•Again, conform to standard


Learn from Others• Look to others for advice•Study different style guides & frameworks•Don’t reinvent the wheel


Helpful Resources•Website Style Guide Resources

styleguides.io

•The Style Guide Guidevinspee.me/style-guide-guide

• Style Guide Boilerplatebrettjankord.com/projects/style-guide-boilerplate

• Stylify Mestylifyme.com

http://styleguides.io/

http://styleguides.io/


InClosing


1 Provide consistency2 Set standards3 Form relationships4 Build incrementally5 Iterate often


Thank You!@shayhowe

learn.shayhowe.com

Save 35%“LEARNCODE2”

peachpit.com