Below are the resources associated with my talk “Design Pattern Libraries and CMS go together like peas and carrots” presented at the 2017 Gilbane Digital Content Conference http://gilbaneconference.com/2017/program.aspx#11343 and my talk “The Holy Grail of Design Systems/Pattern Libraries in AEM” at Immerse 2018 https://immerse18.adobe-devs.adobeevents.com/sessions/.
In the talk I cover Style Guides, Design Pattern Libraries, Atomic Design, Web Components and CMS components. I’ve included links to information that help you understand how all of these concepts come together to expose your digital brand as a service.
Holy Grail
- http://atomicdesign.bradfrost.com/chapter-5/
- https://medium.com/slalom-engineering/chasing-the-holy-grail-bbc0b7cce365
Combining Concepts
- Building UI At Enterprise Scale With Web Components https://www.youtube.com/watch?v=y1hFSuSHkRk
- Style Guides Podcast http://styleguides.io/podcasts
Style Guides
- A list of style guides https://www.freelancer.com/community/articles/one-hundred-style-guides-you-should-see-before-designing-yours
- A list of brand books https://issuu.com/janjaneczek
- ICF Olson Style Guide http://www.olson.com/styleguide
Design Pattern Libraries
- Example online style guides/pattern libraries https://adele.uxpin.com/
- Example online style guides/pattern libraries http://styleguides.io/
- Bootstrap https://getbootstrap.com/docs/4.0/components/alerts/
- Walmart https://walmartlabs.github.io/web-style-guide/
- US Government https://standards.usa.gov/components/
- Google Material Design https://material.io/guidelines/material-design/introduction.html
- Starbucks https://www.starbucks.com/static/reference/styleguide/
- BBC http://www.bbc.co.uk/gel/guidelines/category/design-patterns
- Salesforce https://www.lightningdesignsystem.com/components/overview/
Atomic Design
- Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
- Atomic Design by Brad Frost http://atomicdesign.bradfrost.com/table-of-contents/
- Pattern Lab is a tool to build pattern driven user interfaces http://patternlab.io/
Web Components
- Web Components https://www.webcomponents.org/
- Custom Elements Everywhere – JavaScript framework compatibility https://custom-elements-everywhere.com/
- Google Polymer is a cross browser web component library https://www.polymer-project.org/
- Stencil a web component generator https://stenciljs.com/