large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://uxdesign.cc/atmospheric-design-467ae8bf8c18?source=rss----138adf9c44c---4">uxdesign.cc &ndash; User Experience Design &mdash; Medium</a> | MarcoSuarez </p>
<h4>How design systems thinking can change the way we design</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5iWhNeuCCrqiAYMPW56s3g.png"></p>
<blockquote><p>The primary value of a design system is scalability.</p></blockquote>
<p>Where there was once crippling <a href="https://medium.com/etsy-design/designed-for-growth-cdc2a01a8a8a">technical and design debt</a>, design systems enabled teams to be agile. This is primarily done through building systems of reusable blocks called components that can be easily assembled to create any interface you desire. This reusability means you’re able to do far more while having far less to maintain. But what about all that happens leading up to the point of putting mouse to artboard or keystroke to editor? Design systems address the way we build, but what about the way we design?</p>
<p>When the topic of design systems is brought up, we often assume we’re referring to an artifact: a body of code, documentation, or a Sketch file. Sometimes we assume we we’re referring to a team that maintains those artifacts and advocates for their use. But rarely do we refer to the way we design. I believe systems can include more than just output, they can include decision-making. One of the biggest challenges of a design team is <a href="https://medium.com/leading-design/7-problems-growing-design-teams-face-5fd94292d405">velocity</a>. How do we remove friction, create alignment, eliminate subjectivity, and organize highly specialized silo’d teams around a holistic consistent experience? To do this we need something that exists outside of someone’s head, that isn’t lost when someone leaves, and scales easier than headcount. A design system can be a comprehensive, repeatable, teachable, refine-able program for the entire process, as well as the output, of design.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/600/1*etBEwvp5J1q7gdFlIHThbg.gif"></p>
<h3>Vision</h3>
<p>First, we need to get out of the weeds. If we don’t know where we’re going, we’ll never know if we get there. This requires thinking abstractly about what it is we’re attempting to accomplish, which can be difficult when so much of our time is spent constructing the concrete. Vision is the achievement of the design experience. It’s our north star. Every project requires an assessment to gauge whether we’re closer to realizing the vision or if course correcting is needed.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/600/1*QW_tEsurGriZu-E6Y9u3UQ.gif"></p>
<h3>Principles</h3>
<p>Principles are the qualities of the design experience. In design critiques at Etsy, we try to not use subjective words or phrases but words everyone understands. This helps remove ambiguity so we communicate clearly and provide feedback that’s helpful. But even with that, every designer brings their own values of design into the room. A shared standard of design creates alignment and an end to circular design debates. Design principles offer a ruler to measure work. They are the guard rails that keep you on the path to achieving your vision.</p>
<p>One of the most popular design principles is <a href="https://www.vitsoe.com/us/about/good-design">Dieter Rams’ 10 principles of good design</a>. I’m personally a fan of Massimo Vignelli’s <a href="http://www.vignelli.com/canon.pdf">Canon</a>. But it has become popular for tech companies to create design principles, and Anton Badashov has assembled <a href="https://medium.muz.li/design-principles-behind-great-products-6ef13cd74ccf">a comprehensive list</a>. At Etsy, we developed <a href="https://medium.com/etsy-design/creating-etsys-design-principles-4faf31914be3">our own design principles</a>. I was fortunate to have been able to contribute to their creation. With them, we’re given a language to use when assessing each other’s work. As a team, we’re now in alignment on what we’re all aiming to achieve.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/600/1*GFXHw9mnG2vQis7C184ruw.gif"></p>
<h3>Process</h3>
<blockquote><p>It is only in the repetition of the craft that he or she masters the art.<br />-Samuel Avital</p></blockquote>
<p>At some point, the tasks and actions essential to the design experience must be defined. But we cannot expect to see artifacts of a designer’s explorations if there is not the expectation to explore. It’s difficult to improve the output of something if there is no expectation of how to arrive at an output. Just as designers develop their own values in design, they develop their own process. And to advocate for something like user research when there is not first an understanding of when and where user research is useful is a difficult task.</p>
<p>Where the designer is in their process is critical to providing helpful feedback in critiques. Comments on spacing aren’t helpful when the designer is attempting to understand the user journey. And questions about business goals aren’t helpful when the designer is refining production ready code. Simply having or following a process does not ensure quality work, but it does set expectation. In order for teams and team members to work well together, there must be a shared understanding of how user experience decisions are made.</p>
<p>A popular process for design is the <a href="https://dschool-old.stanford.edu/sandbox/groups/designresources/wiki/36873/attachments/74b3d/ModeGuideBOOTCAMP2010L.pdf?sessionID=1b6a96f1e2a50a3b1b7c3f09e58c40a062d7d553">Institute of Design at Stanford’s Design Thinking process</a>. It begins with understanding and defining the problem to be solved then moving onto developing prototypes to test your solution. You learn from your findings, repeat, and refine.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JqdFF2Fu8arZMz767pSOEg.png">d.school design thinking process</p>
<p>Another popular process is the <a href="http://www.designcouncil.org.uk/sites/default/files/asset/document/ElevenLessons_Design_Council%20(2).pdf">British Design Council’s double diamond</a>. Similar to the d.school’s method, it first begins with understanding the problem to be solved then converging on a definition of the problem. Second is iterating and testing solutions then converging on the final solution. Discover, Define, Develop, Deliver.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KDO3TOZ4GNcBMtcDKVj1VQ.png">British Design Council’s double diamond process<img alt="" src="https://cdn-images-1.medium.com/max/600/1*OP9q-e_ydtdddyt0qjwjaA.gif"></p>
<h3>Visual language</h3>
<p>For digital product design, the interface is our product. It is the means of which tasks and actions are perceived and performed. This is where the value of our work and our company is realized. Where the design process defines the tasks and actions of the design experience, the tasks and actions themselves derive from the visual language. Though you may have a pattern library you may not have a visual language, which is composed of three parts:</p>
<p><strong>Vocabulary </strong>— What we say<br /><strong>Syntax </strong>— How we say it<br /><strong>Semantics </strong>— What we mean</p>
<h4>Vocabulary</h4>
<p>Vocabulary is the objects of design. Most often, this is where design systems begin and end. These are all the “words” one needs to form a sentence, or components one needs to build an interface. They include things like buttons, inputs, colors, text, drop-downs, etc.</p>
<h4>Syntax</h4>
<p>Syntax are the rules that define the structure, order, and assembly of objects. At Etsy, we call these guidelines. Guidelines are the documentation of rules for things like color, typography, iconography, accessibility, localization, and the documentation for patterns such as navigation or filtering and sorting. It also includes guidelines for the use of each component such as when it’s appropriate to use a button versus a text link.</p>
<p><a href="https://polaris.shopify.com/visuals/colors#navigation">Shopify’s Polaris</a> includes well documented guidelines.</p>
<h4>Semantics</h4>
<p>Semantics are the meaning given to the objects and their behavior. A button is an object, whether to use a primary or secondary button is directed by the syntax, but the meaning given to this point of action, and how it looks and the way it behaves is found in the semantics.</p>
<p>These aesthetic decisions are most often decided arbitrarily. This becomes a problem when more than one person contributes to a system because these decisions only exist in the mind of the creator. Why is a button given a shadow on hover? What is the purpose of animation? When do I use this color? It’s difficult to understand these decisions and debate their qualities if there exists no purpose behind them.</p>
<p>Meaning for the aesthetic of objects is found in their purpose and brand personality. Interface design is a conversation–speaking, listening, and responding with and without words. Interfaces speak through the way they present content and abilities. They respond in the way they react when acted upon.</p>
<p>A good starting point, is defining the purpose and personality of shape, color, type, time, space, and motion. These elements are found in nearly every component in your system.</p>
<p><a href="https://material.io/guidelines/#introduction-principles">Google Material</a> has done a fantastic job of defining the semantics of their visual language. <a href="https://medium.com/@suprb/redesigning-pinterest-block-by-block-6040a00d80a3">Pinterest</a> also has their semantics defined.</p>
<p>Building the vocabulary or objects of your visual language is an achievement in and of itself. But in order to scale a system, defining the syntax and the semantics of those objects will be necessary.</p>
<h3>Layers of the atmosphere</h3>
<p>On a simplistic level, our earth is made up of dirt and water. But life on earth would not be possible without the layer of gas that surrounds our planet–the atmosphere. As I mentioned earlier, design systems is often thought of as an artifact. Which like the dirt and water of our planet, is tangible and visible. But just as the atmosphere is an integral part of our planet’s makeup, design systems should also include the invisible layer of how we design–vision, principles, process, and visual language. That’s why I’ve come to call these things, Atmospheric Design.</p>
<p>Our atmosphere is made up of layers, each alone offering a great value, but together they form something comprehensive and effective. Vision, principles, process, and visual language are no different. Together they create a scalable system where each layer can be critiqued, refined, and taught. Layers that build upon each other making the others more effective.</p>
<p>Just as technical and design debt slows down product development, not having a defined atmospheric level of design will slow down design teams. By including the way you design in your design system, you’ll be able to benefit from design systems greatest value: scalability.</p>
<h3>Atmospheric Design</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*iPsTlk2YCJnrVaMI8IzH3A.png"><img alt="" src="https://cdn-images-1.medium.com/max/700/1*aNPBhln7iDMY8qRcmoyCfA.jpeg"><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F50d69a%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2F50d69a%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="480" frameborder="0"><a href="https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href">https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=467ae8bf8c18" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxdesign.cc/atmospheric-design-467ae8bf8c18">Atmospheric Design</a> was originally published in <a href="https://uxdesign.cc">uxdesign.cc</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Atmospheric Design

Atmospheric Design

How design systems thinking can change the way we design

Top Stories