Skip to content

Commit 30f0fa0

Browse files
bradfrostbradfrost
committed
Add a Chapter 5
1 parent 5d68021 commit 30f0fa0

File tree

4 files changed

+193
-6
lines changed

4 files changed

+193
-6
lines changed

‎_layouts/toc.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@ <h3>4. The Atomic Workflow</h3>
2929
<p>People, process, and making it all happen</p>
3030
</a>
3131
</li>
32-
<li class="toc-li-minor">
33-
<a href="/conclusion">
34-
<h3>Conclusion</h3>
32+
<li>
33+
<a href="/chapter-5">
34+
<h3>5. Maintaining Design Systems</h3>
35+
<p>Managing living design systems</p>
3536
</a>
3637
</li>
3738
<li class="toc-li-minor">

‎_site/chapter-5/index.html

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width initial-scale=1">
7+
8+
<title>Maintaining Design Systems | Atomic Design by Brad Frost</title>
9+
<meta name="description" content="Atomic design is a methodology for crafting effective design systems
10+
">
11+
12+
<link rel="stylesheet" href="/css/style.css">
13+
14+
<!-- Schema.org markup for Google+ -->
15+
<meta itemprop="name" content="Maintaining Design Systems | Atomic Design by Brad Frost">
16+
<meta itemprop="image" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png">
17+
<meta itemprop="description" content="Atomic design is a methodology for crafting effective design systems
18+
">
19+
20+
<!-- Twitter Card data -->
21+
<meta name="twitter:card" content="summary_large_image">
22+
<meta name="twitter:title" content="Maintaining Design Systems | Atomic Design by Brad Frost">
23+
<meta name="twitter:description" content="Atomic design is a methodology for crafting effective design systems
24+
">
25+
<meta name="twitter:creator" content="@brad_frost">
26+
<!-- Twitter summary card with large image must be at least 280x150px -->
27+
<meta name="twitter:image:src" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png/images/book-cover-thumb.png">
28+
29+
<!-- Open Graph data -->
30+
<meta property="og:title" content="Maintaining Design Systems | Atomic Design by Brad Frost" />
31+
<meta property="og:url" content="http://atomicdesign.bradfrost.com/chapter-5/" />
32+
<meta property="og:image" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png/images/book-cover-thumb.png" />
33+
<meta property="og:description" content="Atomic design is a methodology for crafting effective design systems
34+
" />
35+
</head>
36+
37+
<body>
38+
<header role="banner">
39+
<a href="/" rel="home"><img src="/images/atomic-design.svg" alt="" /></a>
40+
</header>
41+
42+
<main role="main">
43+
<div class="text">
44+
<h1><em>Chapter 5</em> Maintaining Design Systems</h1>
45+
<div class="note">
46+
<p>Greetings, reader! The following text is a <a href="http://bradfrost.com/blog/post/atomic-design-book/">work in progress</a> so be warned you will encounter incomplete thoughts, grammar errors, and more. If you see something worth fixing, please <a href="https://github.com/bradfrost/atomic-design">submit an issue on Github</a>. Thanks and happy reading!</p>
47+
</div>
48+
<p>One essential expectation to reset is the concept of <em>done</em>. 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.</p>
49+
50+
<ul>
51+
<li>And they made a pattern library and lived happily ever after. Right? Not quite.</li>
52+
<li>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.</li>
53+
<li>Throw the design system in the trashcan, right along side the PSDs, PDFs and other artifacts</li>
54+
<li>How to prevent this?</li>
55+
</ul>
56+
57+
<h3 id="make-it-maintainable">Make It Maintainable</h3>
58+
<ul>
59+
<li>Don’t let it die on the vine and become obsolete</li>
60+
<li>Sharing CSS and JS with the production environment is easy, but sharing templates is tough</li>
61+
<li>Templating language should match the production environment</li>
62+
<li><a href="http://bradfrost.com/blog/post/using-grunt-with-pattern-lab/">Using Grunt with Pattern Lab</a></li>
63+
</ul>
64+
65+
<h3 id="the-holy-grail">The Holy Grail</h3>
66+
<ul>
67+
<li>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.</li>
68+
<li><a href="http://rizzo.lonelyplanet.com/">Rizzo</a> by Lonely Planet has accomplished this.</li>
69+
<li><a href="https://medium.com/@marcelosomers/chasing-the-holy-grail-bbc0b7cce365#.vy45rkm7m">Chasing the holy grail</a></li>
70+
</ul>
71+
72+
<h3 id="make-it-cross-disciplinary">Make it cross-disciplinary</h3>
73+
<ul>
74+
<li>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.</li>
75+
<li>Carousel component example - amazingly complex component requiring input from business owners, editorial staff, content strategists, art directors, UX designers, front-end people, backend people</li>
76+
</ul>
77+
78+
<h3 id="make-it-approachable">Make it Approachable</h3>
79+
<ul>
80+
<li>No shocker here, but good design leads to more usage.</li>
81+
<li>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”)</li>
82+
</ul>
83+
84+
<h3 id="make-it-visible">Make it visible</h3>
85+
<ul>
86+
<li>Make it public.</li>
87+
<li>Recruitment, recruitment, recruitment.</li>
88+
</ul>
89+
90+
<h3 id="make-it-agnostic">Make it Agnostic</h3>
91+
<ul>
92+
<li>The more agnostic pattern names are, the more versatile and reusable they become.</li>
93+
<li>Nicole Sullivan <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">media object</a></li>
94+
</ul>
95+
96+
<h3 id="make-it-contextual">Make it Contextual</h3>
97+
<ul>
98+
<li>Demonstrate context. Where are</li>
99+
<li>Pattern Lab lineage</li>
100+
</ul>
101+
102+
<h3 id="make-it-last">Make it last</h3>
103+
<ul>
104+
<li>Publish updates (Material Design example)</li>
105+
<li>Regular E-mail newsletters, blog updates, etc, whenever things change</li>
106+
<li>Monitor progress - Lonely Planet performance</li>
107+
</ul>
108+
109+
<h2 id="go-forth-and-be-atomic">Go forth and be atomic</h2>
110+
111+
<nav role="navigaiton" class="pagination">
112+
<!-- <a href="#">Next Chapter</a>
113+
<a href="#">Previous Chapter</a> -->
114+
<a href="/table-of-contents/">Table of Contents</a>
115+
</nav>
116+
117+
</div>
118+
119+
<div class="banner">
120+
<div class="banner-content">
121+
<h3><a href="/" rel="home">Atomic Design</a></h3>
122+
<p>by <a href="http://bradfrost.com" rel="me">Brad Frost</a></p>
123+
<a href="http://shop.bradfrost.com/products/atomic-design-ebook" class="btn">Preorder the Book</a>
124+
</div>
125+
</div>
126+
127+
128+
</main>
129+
<footer role="contentinfo">
130+
&copy; 2015 Brad Frost
131+
</footer>
132+
133+
</body>
134+
</html>

‎_site/table-of-contents/index.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,10 @@ <h3>4. The Atomic Workflow</h3>
6868
<p>People, process, and making it all happen</p>
6969
</a>
7070
</li>
71-
<li class="toc-li-minor">
72-
<a href="/conclusion">
73-
<h3>Conclusion</h3>
71+
<li>
72+
<a href="/chapter-5">
73+
<h3>5. Maintaining Design Systems</h3>
74+
<p>Managing living design systems</p>
7475
</a>
7576
</li>
7677
<li class="toc-li-minor">

‎chapter-5.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
layout: page
3+
title: Maintaining Design Systems
4+
chapterTitle: Chapter 5
5+
permalink: /chapter-5/
6+
---
7+
8+
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.
9+
10+
- And they made a pattern library and lived happily ever after. Right? Not quite.
11+
- 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.
12+
- Throw the design system in the trashcan, right along side the PSDs, PDFs and other artifacts
13+
- How to prevent this?
14+
15+
### Make It Maintainable
16+
- Don't let it die on the vine and become obsolete
17+
- Sharing CSS and JS with the production environment is easy, but sharing templates is tough
18+
- Templating language should match the production environment
19+
- [Using Grunt with Pattern Lab](http://bradfrost.com/blog/post/using-grunt-with-pattern-lab/)
20+
21+
### The Holy Grail
22+
- 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.
23+
- [Rizzo](http://rizzo.lonelyplanet.com/) by Lonely Planet has accomplished this.
24+
- [Chasing the holy grail](https://medium.com/@marcelosomers/chasing-the-holy-grail-bbc0b7cce365#.vy45rkm7m)
25+
26+
### Make it cross-disciplinary
27+
- 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.
28+
- Carousel component example - amazingly complex component requiring input from business owners, editorial staff, content strategists, art directors, UX designers, front-end people, backend people
29+
30+
### Make it Approachable
31+
- No shocker here, but good design leads to more usage.
32+
- 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")
33+
34+
### Make it visible
35+
- Make it public.
36+
- Recruitment, recruitment, recruitment.
37+
38+
### Make it Agnostic
39+
- The more agnostic pattern names are, the more versatile and reusable they become.
40+
- Nicole Sullivan [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/)
41+
42+
### Make it Contextual
43+
- Demonstrate context. Where are
44+
- Pattern Lab lineage
45+
46+
### Make it last
47+
- Publish updates (Material Design example)
48+
- Regular E-mail newsletters, blog updates, etc, whenever things change
49+
- Monitor progress - Lonely Planet performance
50+
51+
## Go forth and be atomic

0 commit comments

Comments
 (0)