Style Guides
Examples of style guides in practice
- Paul Robert LLoyd
- Fairly basic guide for smaller site
- MailChimp
- Yelp
- CodePen
- Starbucks [dated: 2014]
- BBC Global Experience Library (GEL)
- Mozilla Design
- Mozilla Design System [older unfinished version]
- Ubuntu Design
- A List Apart style guide [more editorial]
- Jeremy Keith’s Pattern primer
Lists of guides
Static Guides
Design Systems
- Google’s Material Design
- Apple’s iOS Human Interface Guidelines
- Microsoft’s Fluent Design System
- Salesforce Lightning Design System
- U.S. Web Design System
- Firefox’s Photon Design System
- Airbnb
- QuickBooks Design System
- IBM Design Language
- Great short snippets to read about design in general
- Visual: Typography
- Visual: Color
- Interaction: Information architecture - Information architecture ensures that content fits its context.
- Interaction: Touch - Create thoughtful mobile designs with easy touch targets, awareness of how users hold devices and optimal interaction areas.
- Animation: Elements - Animation creates energy within an interface and lets the user know what’s happening before, during and after an action.
- GitHub for IBM Design
- Design system resources and downloads
- Great short snippets to read about design in general
Readings
- Writings about the design process for Reading is Fundamental website
- Our New Responsive Design Deliverable: The Style Prototype
- Visual Inventory - A design deliverable for the post-PSD era of responsive design
- Thoughtful reading about early interactions on design ideas with clients
- Responsive Deliverables [2013]