Style guide and pattern library

Style Guides &

Pattern Libraries

Brittany Mederos Interaction Designer at Elementum

!

Twitter- @brim

What is a style guide?

What’s in a style guide?

Some Examples

• Nike Style guide

• Adobe Style guide

• Skype Style guide

• Code for America Style guide

• Salesforce Style guide

http://issuu.com/logobr/docs/brandbook_nikefootball

http://brandcenterdl.adobe.com/Corpmktg/Brandmktg/Campaign_Assets/guidelines/corporate/corporate_brand_guidelines.pdf

http://download.skype.com/share/blogskin/press/skype_brandbook.pdf

http://codeforamerica.clearleft.com/

http://sfdc-styleguide.herokuapp.com/?id=style

What is a pattern library?

What’s in a pattern library?

Some Examples

• Code for America Pattern library

• Salesforce Pattern library

• MailChimp Pattern library

• Atlassian Pattern library

http://codeforamerica.clearleft.com/

http://sfdc-styleguide.herokuapp.com/?id=style

https://ux.mailchimp.com/patterns/

https://developer.atlassian.com/design/1.4/components/tabs/

http://webdesign.tutsplus.com/articles/maintain-consistency-with-a-website-style-guide--webdesign-10795

http://designshack.net/articles/graphics/how-to-build-a-brand-bible-visual-style-guide/

Resources

http://webdesign.tutsplus.com/articles/maintain-consistency-with-a-website-style-guide--webdesign-10795

http://designshack.net/articles/graphics/how-to-build-a-brand-bible-visual-style-guide/