Chapter 5 Maintaining Design Systems
Greetings, reader! The following text is a work in progress so be warned you will encounter incomplete thoughts, grammar errors, and more. If you see something worth fixing, please submit an issue on Github. Thanks and happy reading!
- And they made a pattern library and lived happily ever after. Right? Not quite.
- There’s a very real risk of a lot of time and effort going into making a design system and accompanying pattern library, only to have it die on the vine.
- Throw the design system in the trashcan, right along side the PSDs, PDFs and other artifacts
- How to prevent this?
Done and done
One essential expectation to reset is the concept of done. Print and other physical mediums involve creating tangible objects that have a sense of finality to them. That simply doesn’t exist in the digital world. The ephemeral nature of the Web is something that needs to be extolled to your clients, colleagues, and stakeholders. If we’re to create living design systems, we need to recognize that the Web is never done, and that our work can and should be constantly evolved and improved upon over time.
Make It Maintainable
- Don’t let it die on the vine and become obsolete
- Sharing CSS and JS with the production environment is easy, but sharing templates is tough
- Templating language should match the production environment
- Using Grunt with Pattern Lab
The Holy Grail
- Holy Grail is when the pattern library and production environment are perfectly in sync. Make a change to a pattern library, and anywhere the pattern is included in production will be updated.
- Rizzo by Lonely Planet has accomplished this.
- Chasing the holy grail
Make it cross-disciplinary
- Not just a developer tool. Not just a designer tool. Every discipline invested in the success of the website should be contributing to the pattern library.
- Carousel component example - amazingly complex component requiring input from business owners, editorial staff, content strategists, art directors, UX designers, front-end people, backend people
Make it Approachable
- No shocker here, but good design leads to more usage.
- Avoid exposing tons of code right out of the gate as it might discourage other disciplines from looking at it (“Oh this must not be for me”)
Make it visible
- Make it public.
- Recruitment, recruitment, recruitment.
Make it Agnostic
- The more agnostic pattern names are, the more versatile and reusable they become.
- Nicole Sullivan media object
Make it Contextual
- Demonstrate context. Where are
- Pattern Lab lineage
Make it last
- Publish updates (Material Design example)
- Regular E-mail newsletters, blog updates, etc, whenever things change
- Monitor progress - Lonely Planet performance