Skip to content

Commit 4e45d98

Browse files
committed
Incorporate Owen's proofreading changes
1 parent 146816e commit 4e45d98

File tree

19 files changed

+160
-118
lines changed

19 files changed

+160
-118
lines changed

_layouts/toc.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h3>Designing Systems</h3>
3030
<a href="/chapter-2">
3131
<span>2.</span>
3232
<h3> Atomic Design Methodology</h3>
33-
<p>Atoms, Molecules, Organisms, Templates, and Pages</p>
33+
<p>Atoms, molecules, organisms, templates, and pages</p>
3434
</a>
3535
</li>
3636
<li>

_site/author/index.html

+24-8
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width initial-scale=1">
77

8-
<title>About the Author | Atomic Design by Brad Frost</title>
8+
<title>Testimonials | Atomic Design by Brad Frost</title>
99
<meta name="description" content="Atomic design is a methodology for crafting effective design systems
1010
">
1111

@@ -15,22 +15,22 @@
1515
<link href="https://fonts.googleapis.com/css?family=Merriweather|Oswald" rel="stylesheet">
1616

1717
<!-- Schema.org markup for Google+ -->
18-
<meta itemprop="name" content="About the Author | Atomic Design by Brad Frost">
18+
<meta itemprop="name" content="Testimonials | Atomic Design by Brad Frost">
1919
<meta itemprop="image" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png">
2020
<meta itemprop="description" content="Atomic design is a methodology for crafting effective design systems
2121
">
2222

2323
<!-- Twitter Card data -->
2424
<meta name="twitter:card" content="summary_large_image">
25-
<meta name="twitter:title" content="About the Author | Atomic Design by Brad Frost">
25+
<meta name="twitter:title" content="Testimonials | Atomic Design by Brad Frost">
2626
<meta name="twitter:description" content="Atomic design is a methodology for crafting effective design systems
2727
">
2828
<meta name="twitter:creator" content="@brad_frost">
2929
<!-- Twitter summary card with large image must be at least 280x150px -->
3030
<meta name="twitter:image:src" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png/images/book-cover-thumb.png">
3131

3232
<!-- Open Graph data -->
33-
<meta property="og:title" content="About the Author | Atomic Design by Brad Frost" />
33+
<meta property="og:title" content="Testimonials | Atomic Design by Brad Frost" />
3434
<meta property="og:url" content="http://atomicdesign.bradfrost.com/author/" />
3535
<meta property="og:image" content="http://atomicdesign.bradfrost.com/images/book-cover-thumb.png/images/book-cover-thumb.png" />
3636
<meta property="og:description" content="Atomic design is a methodology for crafting effective design systems
@@ -42,15 +42,31 @@
4242
<div class="page-header">
4343
<div class="page-header-inner">
4444

45-
<h1 class="page-title">About the Author</h1>
46-
<p class="page-subtitle">About Brad Frost</p>
45+
<h1 class="page-title">Testimonials</h1>
46+
<p class="page-subtitle">What others are saying about Atomic Design</p>
4747
</div>
4848
</div>
4949

5050
<div class="text">
51-
<p><img src="/images/brad_frost_ffly.png" alt="Brad Frost" /></p>
51+
<blockquote>
52+
To boldly go beyond “pages.” That’s the universe of modern design, and there’s no better guide to exploring it than Brad Frost. In Atomic Design, he replaces our outdated, closed workflows with exciting new collaborative ones, and teaches us to design not just pages but systems. Recommended for all web and interaction designers.
53+
<cite>Jeffrey Zeldman, author of <em>Designing With Web Standards</em></cite>
54+
</blockquote>
5255

53-
<p><a href="http://bradfrost.com">Brad Frost</a> is a web designer, speaker, consultant, and musician located in beautiful Pittsburgh, PA. He’s passionate about creating web experiences that look and function beautifully on a never-ending stream of connected devices, and loves helping others do the same. He’s helped create several tools and resources for web designers, including <a href="http://patternlab.io/">Pattern Lab</a> (with Dave Olsen and Brian Muenzenmeyer), <a href="http://styleguides.io/">Styleguides.io</a> (with Anna Debenham), <a href="https://bradfrost.github.io/this-is-responsive/">This Is Responsive</a>, <a href="http://wtfmobileweb.com/">WTF Mobile Web</a> (with Jen Simmons), and Mobile Web Best Practices.</p>
56+
<blockquote>
57+
"This book is itself an excellent example of Atomic Design. Brad takes on a big intimidating topic—design systems the web—and breaks it down into its constituent parts, making it easy to understand and implement."
58+
<cite>Jeremy Keith, author <em>HTML5 for Web Designers</em></cite>
59+
</blockquote>
60+
61+
<blockquote>
62+
Brad describes not only the atomic design methodology, but also the process involved in making it successful. With the knowledge and experience of working on big and small websites, he'll equip you with the skills needed to build a comprehensive design system that works for your organisation, that is easy to update, and that lives on for months and years to come.
63+
<cite>Anna Debenham, author of <em>Front-end Style Guides</em></cite>
64+
</blockquote>
65+
66+
<blockquote>
67+
Brad is suggesting that we'd be better web designers if we thought of what we're building as a system. A hierarchical system that fits together to form larger parts. Because, spoiler alert, it is and we would be.
68+
<cite>Chris Coyier, CSS Tricks</cite>
69+
</blockquote>
5470

5571

5672

_site/chapter-1/index.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ <h3 id="modularizing-content-im-on-team-chunk">Modularizing content: I’m on Te
172172
<h3 id="classy-code">Classy code</h3>
173173
<p>Modularity has long been a staple principle in the world of computer science, as we discussed earlier. While this principle existed long before the web was invented, it has taken some time for modularity to become engrained in the minds and hearts of web developers.</p>
174174

175-
<p>Despite being around since 1995, JavaScript, the programming language of the web, first had to endure some growing pains to mature into the capable, respected language it is today. Now that JavaScript has grown up, developers can now apply those tried-and-true computer science principles to their web development workflows. As a result, we’re seeing folks develop sophisticated <a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/">JavaScript patterns</a> and architectures.</p>
175+
<p>Despite being around since 1995, JavaScript, the programming language of the web, first had to endure some growing pains to mature into the capable, respected language it is today. Now that JavaScript has grown up, developers can apply those tried-and-true computer science principles to their web development workflows. As a result, we’re seeing folks develop sophisticated <a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/">JavaScript patterns</a> and architectures.</p>
176176

177177
<p>Applying modular programming principles to JavaScript is a bit of a no-brainer, since JavaScript is itself a programming language. But object-oriented thinking is weaving its way into other aspects of the web as well, including CSS, the styling language of the web. Methodologies like <a href="http://oocss.org/">OOCSS</a>, <a href="https://smacss.com/">SMACSS</a>, and <a href="http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax">BEM</a> have cropped up to help web designers create and maintain modular CSS architectures.</p>
178178

@@ -206,7 +206,7 @@ <h3 id="systematic-ui-design">Systematic UI design</h3>
206206

207207
<p>What is an interface made of? What are our Lego bricks? What are our Subway sandwich pieces that we combine into millions of delicious combinations? It’s these questions that we’ve been asking ourselves more and more now that we’re sending our interfaces to more and more places.</p>
208208

209-
<p>A few years ago Ethan Marcotte introduced us to the idea of <a href="http://alistapart.com/article/responsive-web-design">responsive web design</a> and its three core tenets: fluid grids, flexible media, and CSS media queries. These three ingredients provided a much needed foundation for designers to create flexible layouts that smartly adapt to any screen size. Perhaps more importantly, responsive design helped get designers excited about creating thoughtful, adaptable, multi-device web experiences.</p>
209+
<p>A few years ago Ethan Marcotte introduced us to the idea of <a href="http://alistapart.com/article/responsive-web-design">responsive web design</a> and its three core tenets: fluid grids, flexible media, and CSS media queries. These three ingredients provided a much-needed foundation for designers to create flexible layouts that smartly adapt to any screen size. Perhaps more importantly, responsive design helped get designers excited about creating thoughtful, adaptable, multi-device web experiences.</p>
210210

211211
<p>As designers quickly discovered, creating multi-device web experiences involves a lot more than creating squishy pages. Each individual piece of an interface contains its own unique challenges and opportunities in order for it to look and function beautifully across many screen sizes and environments.</p>
212212

@@ -316,9 +316,9 @@ <h3 id="voice-and-tone">Voice and tone</h3>
316316
<p>Voice and tone guidelines get into the weeds by articulating how the company’s voice and tone should shift across a variety of scenarios. <a href="http://voiceandtone.com/">MailChimp’s brilliant voice and tone guidelines</a> define how the brand’s tone changes across content types, so that when a user’s credit card is declined, writers know to shift away from their generally cheeky and playful tone of voice and adopt a more serious tone instead.</p>
317317

318318
<figure>
319-
<img src="../images/content/styleguide-voiceandtone.png" alt="Mailchimp’s Voice and Tone guidelines" />
319+
<img src="../images/content/styleguide-voiceandtone.png" alt="MailChimp’s Voice and Tone guidelines" />
320320
<figcaption>
321-
Mailchimp’s Voice and Tone guidelines
321+
MailChimp’s Voice and Tone guidelines
322322
</figcaption>
323323
</figure>
324324

@@ -366,7 +366,7 @@ <h2 id="style-guide-benefits">Style guide benefits</h2>
366366

367367
<h3 id="consistently-awesome">Consistently awesome</h3>
368368

369-
<p><strong>Web style guides promote consistency and cohesion</strong> across a user interface. This consistency benefits both the people who create these interfaces but also their users.</p>
369+
<p><strong>Web style guides promote consistency and cohesion</strong> across a user interface. This consistency benefits both the people who create these interfaces and also their users.</p>
370370

371371
<p>I recently visited my health insurance provider’s website to pay my bill. In the course of five clicks, I was hit with four distinct interface designs, some of which looked like they were last touched in 1999. This inconsistent experience put the burden on me, the user, to figure out what went where and how to interpret disparate interface elements. By the time I got to the payment form, I felt like I couldn’t trust the company to successfully and securely process my payment.</p>
372372

@@ -382,9 +382,9 @@ <h3 id="a-shared-vocabulary">A shared vocabulary</h3>
382382
<p>As the number of people working on a project increases, it becomes all too easy for communication breakdowns to occur. It’s not uncommon for different disciplines to have different names for the same module, and for individuals to go rogue and invent their own naming conventions. For true collaboration to occur, it’s essential for teams to speak a common language. Style guides are there to help establish that shared vocabulary.</p>
383383

384384
<figure>
385-
<img src="../images/content/starbucks-blocks-3up.png" alt="Giving names to patterns like 'Blocks 3-Up' in Starbucks' style guide helps team members speak the same language." />
385+
<img src="../images/content/starbucks-blocks-3up.png" alt="Giving names to patterns like 'Blocks Three-Up' in Starbucks' style guide helps team members speak the same language." />
386386
<figcaption>
387-
Giving names to patterns like 'Blocks 3-Up' in Starbucks' style guide helps team members speak the same language.
387+
Giving names to patterns like 'Blocks Three-Up' in Starbucks' style guide helps team members speak the same language.
388388
</figcaption>
389389
</figure>
390390

@@ -404,7 +404,7 @@ <h3 id="education">Education</h3>
404404
<h3 id="an-empathetic-workflow">An empathetic workflow</h3>
405405
<p>Education isn’t just important for clients and stakeholders. A good style guide helps inform designers and developers of the tools they have in their toolbox, and provides rules and best practices for how to use them properly.</p>
406406

407-
<p>By making a style guide a cornerstone of your workflow (which we’ll detail in chapter 4), <strong>designers and developers are forced to think about how their decisions affect the broader design system</strong>. It becomes harder to go rogue and becomes easier to think of the greater good. And this is exactly where you want team members to be.</p>
407+
<p>By making a style guide a cornerstone of your workflow (which we’ll detail in chapter 4), <strong>designers and developers are forced to think about how their decisions affect the broader design system</strong>. It becomes harder to go rogue and easier to think of the greater good. And this is exactly where you want team members to be.</p>
408408

409409
<p>A style guide provides a home for each discipline to contribute their respective considerations and concerns for patterns. By collecting all these considerations under one roof, the style guide becomes a hub for everyone involved in the project, which helps each discipline better understand the design system from many perspectives.</p>
410410

0 commit comments

Comments
 (0)