You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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>
52
55
53
-
<p><ahref="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 <ahref="http://patternlab.io/">Pattern Lab</a> (with Dave Olsen and Brian Muenzenmeyer), <ahref="http://styleguides.io/">Styleguides.io</a> (with Anna Debenham), <ahref="https://bradfrost.github.io/this-is-responsive/">This Is Responsive</a>, <ahref="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.
Copy file name to clipboardexpand all lines: _site/chapter-1/index.html
+8-8
Original file line number
Diff line number
Diff line change
@@ -172,7 +172,7 @@ <h3 id="modularizing-content-im-on-team-chunk">Modularizing content: I’m on Te
172
172
<h3id="classy-code">Classy code</h3>
173
173
<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>
174
174
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 <ahref="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 <ahref="http://addyosmani.com/resources/essentialjsdesignpatterns/book/">JavaScript patterns</a> and architectures.</p>
176
176
177
177
<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 <ahref="http://oocss.org/">OOCSS</a>, <ahref="https://smacss.com/">SMACSS</a>, and <ahref="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>
<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>
208
208
209
-
<p>A few years ago Ethan Marcotte introduced us to the idea of <ahref="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 muchneeded 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 <ahref="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>
210
210
211
211
<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>
212
212
@@ -316,9 +316,9 @@ <h3 id="voice-and-tone">Voice and tone</h3>
316
316
<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. <ahref="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>
317
317
318
318
<figure>
319
-
<imgsrc="../images/content/styleguide-voiceandtone.png" alt="Mailchimp’s Voice and Tone guidelines" />
319
+
<imgsrc="../images/content/styleguide-voiceandtone.png" alt="MailChimp’s Voice and Tone guidelines" />
<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>
370
370
371
371
<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>
<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>
383
383
384
384
<figure>
385
-
<imgsrc="../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
+
<imgsrc="../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." />
386
386
<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.
<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>
406
406
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>
408
408
409
409
<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>
0 commit comments