Atomic Design using Sketch is the future of product design. The dark side of design. UX analyst and other professions with the UX prefix

I offer Habrakhabr readers a translation of Brad Frost’s article “Atomic Web Design”.

We don't design pages, we design component systems. - Stephen Hay

As the craft of web design continues to evolve, we increasingly feel the need for thoughtful, systematic design, as opposed to creating simple collections of web pages.

Much has been said about creating design systems, and the greatest emphasis is placed mainly on establishing colors, typography, grids, textures, etc. This type of thinking is certainly important, but I'm a little less interested in these aspects of design because, by and large, they are always subjective. IN Lately I'm more puzzled by the question of what our interfaces are made of, and how we can design them more systematically.

In search of inspiration, I returned to chemistry. All substances (be they solids, liquids, gases, simple, complex, etc.) consist of atoms. The atoms bond with each other and form molecules, which, in turn, combine and form organisms. Ultimately, this is how all matter in our universe is created.

Similarly, interfaces are made up of smaller components. This means we can break interfaces into fundamental blocks and combine them, gradually increasing complexity. This is the essence of atomic web design.

Periodic system HTML elements.

What is Atomic Design

Atomic design it is a methodology for creating design systems. There are five distinct levels to atomic design:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Atoms

Atoms in nature are the basic building blocks of matter. In the context of web interfaces, atoms are HTML tags such as a form, input field, or button.

Atoms can include even more abstract elements such as color palettes, fonts, or even more hidden aspects of the interface such as animations.

Like atoms in nature, they are quite abstract and often useless on their own. However, the benefit of their design lies in the task single general style interface.

Molecules

Everything becomes more interesting and tangible when we start combining atoms. Molecules are collections of interconnected atoms. They have their own properties and act as the skeleton of our design system.

For example - a label, input field and button are not that useful on their own, but can be really useful if combined.

Building molecules from atoms improves mental health “do one thing, but do it well”. While molecules can be quite complex, most often they are simple combinations of atoms built to be reused.

Organisms

Molecules give us some building blocks to work with. Now we can put them together to form organisms. Organisms are associations of molecules that form rather complex, separate sections of the interface.

We are moving faster and faster to specifics. The client may not be very interested in the molecules of the design system, but with the advent of organisms one can observe the beginning of the formation of the final product. Dan Moll (with whom I work on several projects) uses collages of elements that show key ideas and interface directions without the need to design the entire site.

Organisms may consist of similar or different types molecules. For example, the page title may consist of different components- logo, main menu, search form and list of media channels. But the organism displaying the product grid may contain a single molecule (product image, name, and price) that is repeated many times.

The transition from molecules to organisms facilitates the creation of independent components ready for reuse.

Templates

At this stage, we will stop drawing analogies with chemistry in order to communicate in a language that is more meaningful for our clients. Templates most often consist of groups of organisms linked together to form pages. It is at this stage that the big picture becomes visible.

The templates are very specific and provide context to all the rather abstract molecules and organisms. It is the template that allows you to see the final design. In my experience with this methodology, templates start out as HTML wireframes, but become more precise over time. They eventually become final products. Bearded Studio in Pittsburgh has a similar process, where designs start out in black and white and without markup, but gradually gaining specifics and details until they become the final work.

Pages

Pages are specific instances of templates. In them, to accurately convey what the user will see, “stub” content is replaced with real content.

Pages are highest level specifics and, because they are the most tangible. They take up the majority of the time of the majority of the people involved and write the majority of the reviews.

The page stage is necessary because it is where the effectiveness of the entire design system is tested. By seeing everything in context, we can take a step back and change our molecules, organisms, and patterns to better suit the actual design context.

This is also the stage for testing changes to templates. For example, you need to make sure that a 40-character headline looks consistent with a 340-character headline. Or check how, instead of a basket with one item, it looks like one with 10 items and a discount using a promo code. These situations influence how we build our system.

Why atomic design

In many ways, this is how we made websites, even if we didn't consciously think about it.

Atomic design provides a clear methodology for creating design systems. Clients and team members can evaluate ideas for a particular design system by seeing the stages of its development.

Atomic design gives us the ability to move from the abstract to the concrete. Therefore, we can create systems that are scalable and have a consistent, consistent style, while still showing the final big picture. Process instead destructuring turns into assembly- we create a structure from the very beginning, rather than carefully selecting suitable templates later.

Pattern Lab

To apply this methodology in my work, I (with the help of

Atomic design allows us to switch between contexts just as the artist Frank so eloquently described. The atoms, molecules and organisms that make up the interfaces do not hang in a vacuum. Interfaces and pages are indeed made up of small parts. Small parts affect the whole structure, and the whole affects smaller parts. These two contexts are intertwined, and atomic design recognizes this fact.

When we design a component, we are like an artist making brush strokes on a canvas. When we view these components as mockups with actual content, we are like an artist stepping away from the canvas and assessing how each stroke affects the entire composition.

You need to focus on one specific component to make it functional, comfortable and beautiful. But it is also necessary to ensure that this component is functional, convenient and beautiful. in the context of the final user interface .

Atomic design provides us with a circuit for switching between parts and the whole, but it is critical to reiterate that atomic design is not a linear process. It would be foolish to design buttons and other elements in isolation and then cross your fingers and hope that everything will come together to form a cohesive whole. It is for this reason that the five steps of atomic design should not sound like this in your head: “Step 1: atoms; Step 2: molecules; Step 3: organisms; Step 4: templates; Step 5: Pages".

Instead, think of the atomic design steps as a mental model that allows you to simultaneously create the resulting interface and the design system that underlies it.

# Clear boundary between structure and content

Discussing design and content is a bit like arguing about the chicken and the egg. Mark Boulton explains:

Content must have structure, and structure, like design, influences content. It is incorrect to say “first content, then design” and “either content or design.” They are equivalent, therefore: “Both content and design.” ~Mark Boulton

A well-thought-out design system corresponds to its content, and quality content corresponds to its presentation in the interface. The interface patterns we approve must accurately reflect the nature of the text, images and other content they contain. Likewise, when creating content, you need to consider how it will be presented. The close relationship between content and design requires taking both components into account when designing a UI.

Atomic design gives us a language for discussing the structure of UI patterns and the content that will be contained in them. Despite the clear distinction between the structure of the content (templates, patterns) and the content itself (pages), atomic design takes into account their influence on each other. For example, let's look at this diagram:

On the left we see the content structure. It consists of the same repeating user profile molecule. On the right we see what happens when we fill out each molecule of the profile relevant content. The technique of visualizing the content structure and presenting it with the resulting content allows you to create templates that exactly match your own content. If the username took up five lines, we would have to fix it not at the molecular level, but at the atomic level.

# What's in a name?

I've said throughout the pages of this book that the idea of ​​modularity in design and development is nothing new. Then why do we introduce new terms such as atoms, molecules and organisms when we can stick to the already established ones: modules, components, elements, sections and regions?

For as long as I've been talking about atomic design, there have always been people who suggested alternative names for design stages. One suggests: “Why not just call them elements, modules and components?”, another: “Why not just call them base, components and modules?” The problem with terms like "component" and "module" is that the names alone don't tell you the hierarchy. Atoms, molecules and organisms imply a hierarchy, so anyone with a basic knowledge of chemistry can guess what we're talking about.

It's difficult to name. The ones I chose for the atomic design steps worked great for me and the teams I worked with to design the UI. But they may not work for you and your company. This is fine. Here's confirmation from the development team at GE:

When presenting design system concepts to colleagues, we initially used atomic design terminology. However, this caused puzzled looks. […] It became obvious that to be successful in our company, we must choose a more appropriate taxonomy. ~

The taxonomy system that the guys eventually came up with included the terms: “Principles”, “Fundamentals”, “Components”, “Templates”, “Characteristics” and “Applications”. Do these names make more sense to you? It doesn't matter. They established a taxonomy that made sense for their company, but anyone who knew the principles of atomic design could work effectively with them.

The term "atomic design" embodies the ideas of modular design and development, making it a useful and powerful buzzword for persuading stakeholders and communicating with colleagues. But Atomic design is not a rigid dogma. Ultimately, whatever taxonomy you choose should help you and your company's employees communicate more effectively to create great system UI design.

Atomic Design for UI

The concept of atomic design was born on the Internet. After all, the humble author of this book is a web designer, which is why it focuses on web interfaces. But it is important to understand that atomic design is generally applicable to any interfaces.

You can use the atomic design methodology when developing the interface of any software: Microsoft Word, Keynote, Photoshop, your bank’s ATM interface, — whatever. To prove this, let's apply atomic design to native application Instagram.

Design Instagram apps, disassembled into atoms.

Let's break down the Instagram interface into atoms:

• Atoms. This Instagram UI screen consists of several icons, several text blocks, and two types of images: the hero image and the user avatar.
• Molecules. Several icons form simple utilitarian components: bottom panel navigation and photo action bar where users can like or comment. In addition, simple combinations text and/or images form relatively simple components.
• Organisms. Here we see how the organism of photography is formed. It consists of information about the user, the time of publication, the photo itself, actions with this photo and information about it, including the number of likes and caption. This organism is the basis of Instagram, since it is repeated many times in the endless stream of photographs taken by the user.
• Templates. We see how components work together in the context of a layout. In addition, here we are exposed to the content structure of Instagram, which especially stands out dynamic content: user nickname, avatar, photo, likes and signature.
• Pages. And finally, we see the final product, filled with content. This helps ensure that the core design system comes together to form a beautiful and functional interface.

I deliberately chose not a website as an example because there is a tendency to mistakenly treat atomic design as an approach when working with web technologies: CSS, JavaScript, etc. Let me be clear: Atomic design has nothing to do with narrow web themes like CSS or JavaScript. In the first chapter, we talked about the trend toward modularity in all aspects of design and development. It's a fantastic trend, including for CSS and JavaScript, but atomic design is all about creating UI design systems, no matter what technology is used.

Atomic design in theory and practice

In this chapter, we talked about the atomic design methodology and saw how atoms, molecules, organisms, patterns, and pages come together to create high-quality, thoughtful interface design systems.

Atomic design allows us to decompose interfaces into atoms and simultaneously observe how these elements come together to form the resulting interfaces.

We learned about the close relationship between content and design and how atomic design allows us to create structure tailored to the content.

Finally, we learned how the atomic design language enables us to discuss modularity with colleagues and provides the much-needed understanding of hierarchy in our design systems.

Atomic design is a useful design and development methodology, but it is only a mental model for creating UI. You may be itching to learn how to do atomic design in practice. Don't worry, dear readers — the rest of the book is dedicated to tools and processes for making atomic design a reality.

TL; DR: Atomic design using Sketch is the future of design products.

Come with me

Brad Frost, the amazing man you see in the video at the beginning of this article, to a large extent is responsible for the system discussed here. Atomic design was developed in response to responsive, digital world, in which we live.

We are still working on the leadership style, elementary principles, collage and many other tools to make our projects easier to understand for future generations. Likewise, developers use tools like Bootstrap, Foundation, Bourbon and others to make their lives easier when it comes time to code. When we compromise and work together, life becomes much easier for both parties. This is what Atomic Design is all about.

Atomic design is not about designing just one model or page, we're talking about about designing a huge system, or more precisely about designing the core of this system.

1-j1P0pjQtl36QJavv8lHdyw

What does Atomic Design consist of?

Atomic design involves creating parts of a system that can be combined to develop elements and patterns that can then be used again and again.

Atoms

An atom is absolute basis our system. Atoms include color palette, fonts, individual elements (such as headings, paragraphs, buttons, etc.) and anything else that combines with other atoms to create a molecule.

2 1-SmVWgKY2jdCYOV4dXJNlkg

Molecules

Molecules are the building blocks that we build using atoms. Although they are made of atoms, molecules are the very Lego pieces with which we will build and design in the future. Although some elements may seem complicated at first, simplicity is key here.

Molecules include components such as form fields with labels or tables with headers and data columns.

3 1-kA-WoT5O0uCgeowzhuSwiQ

Microorganisms

Microorganisms are where we begin to see how the interface forms a unified picture. By combining molecules we can build more complex but repeatable elements of our products.

An example of a microorganism would be a navigation header that includes a logo, navigation links and search fields or register button.

4 1-aL51hsdFw7ugSXXB5HnWZQ

Templates

Templates are essentially the same schemes. By combining several microorganisms, we really begin to see the bigger picture of what we are building.

If high accuracy no result needed, this is the point where we could easily start developing a coded system.

5 1-mx-cBDwsz3MkXa-oX_-56g

Pages

The pages are highly accurate versions of our templates. The design above will be considered a page. This is the place where even those who know nothing about design can understand what we are building.

Pages aren't always necessary, but who doesn't love a nice visual presentation?

Why Sketch?

Despite the fact that Sketch may not yet be the leader of the situation, which are Adobe Illustrator or Photoshop, it is still a unique tool when working using the Atomic Design method.

Organization

Sketch is the brainchild of Adobe Illustrator and Photoshop. We don't deny that Sketch is still young, but it's still very powerful and, on top of that, it's also incredibly easy to pick up and use. Not only can you do almost everything you'll ever need to do without having to find and pull out tools hidden in multi-layered menus, you have a highly organized model that is divided into layers.

7 1-gyxduSTXDd1K-7eEuW1xHA

Modularity

Sketch is necessary tool for atomic design because it makes it easy to make an element modular. Not only do you have a level organization, similarly Adobe Photoshop, you can also make modular elements. In Sketch, these elements are called symbols.

Creating a symbol allows you to change all the styles on one element and see those changes happen to all similar elements throughout the file.

First, create the element the way you would like it to be.

9 1-QU5UMRKF7jnifIcA0K6RlA

Tip: To make elements with text turn into modular symbols in Sketch, make sure you also check the Exclude box text value from the symbol in the toolbar on the right.

To do this, firstly, you must select the text inside the symbol. If you don't do this, you won't see the option in the toolbar on the right.

10 -5iQXZSddoS-OxEm0YfU1Sw

You can now leave the symbol anywhere and change the inner text without changing the text in any other similar symbol used in your design.

11-X9DNHPtyXiBxYEes10u_Iw

If the inner text is not something you plan to change, forget about this step. But remember that it is there, and it is incredibly convenient.

Every time you want to place one of the elements that you have created, all you have to do is click on the Insert drop-down menu, find the Symbols option and select the symbol you want to use from the drop-down menu.

Convert to code

Now that we've created our project, it's time to export the elements to code.

Export to code

What's better than modular symbols? Export your projects directly into code. This means that you designers don't have to learn to code and you developers don't have to know how to break design assets. Although, you should know this.

To get the code for the elements, you first need to make sure that they are either combined properly or turned into symbols. After that, everything is simple, just click right click mouse on the element and select Copy CSS Attributes from the dropdown list

12-0JSPPy6qdMM6UUUfzH1Zmw

All you need to do is copy and paste the code from there into your favorite text editor.

13-qrSfNi7EmBroFNQoM1zcuw

Make sure you've covered everything necessary attachments also because they don't come from Sketch. Otherwise, make sure you use a feature package to deal with them.

Just like Bootstrap or the Foundation template, now our elements are styled and all we have to do is add a class to the element in our HTML.

Going from here means creating elements HTML pages, which will only be visible to the development team. Here we can create a page of our elements with the appropriate class, so we can see how they look in the browser based on screen dimensions.

Brad Frost and Dave Olson from Pattern Lab created an amazing example of what this looks like. Rate it.

Using Template Languages

Bonus points for those of you who have graduated from learning template and CSS languages ​​such as swig, jade, haml and any of the many other languages ​​available today.

Many of the microorganisms we have designed will become partial once they are converted into code.

So you made it

Now you can pretend as if you know something about science. And to some extent you do know. Atomic Design is the science of high quality design.

By creating modular, repeatable elements and models, we can exponentially speed up the design and development process. It's not just about how quickly they can be built, but how quickly changes can be made to the entire system.

Spend a little more time thinking about the core of the system, and it's like going back in time as this process unfolds.

High conversions!

Let's talk about one of the most interesting and promising areas - atomic web design. Based on the fundamental principles of chemistry, it brought a new vision and direction to modern web design.

Website design has undergone huge changes since the beginning of the web industry. If we look at the beginning of the heyday of the Internet in Russia, then this is roughly 2001; from about that time the Internet began to penetrate into our lives everywhere. As times changed, so did the design. The first thing I want to say right away is that there are so-called trends in web development. These are new design solutions that have gained popularity among users and developers. They can gain a foothold for a long time and become some kind of standard for website development. Or it will quickly sink into oblivion.

What is atomic website design

One of the new trends that is becoming a design standard is atomic website design.

What is it and what is its difference? Knowing the reasons for its origin will help us answer this question. main reason simple. This mobile users. Users online with mobile devices, more and more. They have long since exceeded 50% in almost all niches and are steadily approaching 70% of total traffic. When the developers noticed this problem, the primary solution was to create mobile version site. Designers and developers actually had to make two websites: the main one, in which most of the effort was invested, and a second, smaller one, mobile. The prevalence of mobile devices with the ability to access the network has reached its highest point, so mobile traffic can no longer be ignored.

Mobile versions became impractical, and it was decided to design interfaces based on adaptation. The industry rushed forward and provided not a compromise, as it was before, but a full-fledged product. Now the user was able to find necessary information and perform targeted actions, including purchases, using a smartphone. Being a developer has added more work, but it has paid off.

Atomic design is currently at the peak of its development. IN in this case We are changing the direction of development: previously we went from a full-fledged version of the site to a mobile one, but now it’s the other way around. They say that this design follows the structure of the universe. First comes the Atom, then the atoms form molecules, then organisms, patterns and finally the page. Each subsequent level consists of the previous ones and is a more complex continuation.

Atomic Design Elements

There are 5 main levels in the structure of atomic design:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Atoms are basic elements, which determine future design site.

Molecules are the connection of atoms into the first meaningful blocks and the acquisition of the first disparate functionality.

Organisms are the next stage in the evolution of design. Allows us to predict the future structure..

Templates - already almost ready-made design, maximum specificity of which. we get if we collect all the previous elements together.

Pages - Final stage design.

The key advantage of atomic design is that with such design we can adapt the necessary functionality of the site to any device. At the same time, the style and design remain the same for any scaling and adaptation. I would also like to note an important advantage of this approach is that we can add new functions, pages and content without redoing the entire structure or creating new templates from scratch.
In progress website creation design and interface design will increasingly move towards a single concept, abandoning the distinction between devices, be it desktop computer, tablet, smartphone, etc. Atomic design provides a fresh perspective and a new direction for the future of web technology.

In short: Atomic Design using Sketch is the future of product design.

Follow me

Brad Frost, the awesome guy in the video, is one of the founders of the system discussed in this article. Atomic Design was developed in response to this digital, adaptive world in which we all live and work.

We create style guides, element guides, mood boards, and other tools to make our designs easier to understand and use in the future. Likewise, developers use things like Bootstrap, Foundation, Bourbon and other similar tools to speed up the coding process. When we work as a team, these things make life much easier. And that’s exactly what Atomic Design is for.

Atomic design is more suitable for designing the big picture as a whole than creating a single entity or page. This tool is perfect for system core design.

Atomic design involves creating a system of individual pieces that can be used to create elements and patterns that can be reused many times.

Atoms

Atoms are the absolute foundation of our system. Atoms include color palettes, fonts, custom elements (such as headings, paragraphs, buttons, etc.) and other things that combine with other atoms to create a molecule.

Molecules

Molecules are pieces of a system that we build from atoms. And although molecules require atoms, they are more like Lego blocks from which more complex things are built.

Molecules include elements such as form fields with labels or a table with headers and columns of data.

Organisms

From organisms we already get a more or less holistic view of the interface. By combining molecules, we can create more complex, but repeatable, pieces of our product.

Example of an organism – main navigation on a page that includes a logo, navigation links and a search field or registration button.

Templates

Templates are essentially our wireframes or mockups. By combining many organisms, we really begin to see the whole picture of what we are creating.

If a highly accurate, detailed result is not required, from this point we can already begin to implement our system in code.

Pages

Pages are a more detailed version of templates. The design in the picture above is already regarded as a page. Here even a beginner in design can understand what kind of project we are creating.

Pages aren't always a necessity, but who doesn't love beautiful visualization?

Why Sketch?

Although Sketch has not yet become a design powerhouse like Adobe Illustrator or Photoshop, it is an incredible tool for working with the Atomic Design methodology.

Organization

Sketch is sort of the lucky love child of Adobe Illustrator and Photoshop. Undoubtedly, Sketch is still very young, but it is already quite powerful, and on top of that, it is incredibly easy to use.

You can not only implement almost everything you need without this endless search for the right tool in the deposits of numerous multi-level menus, but also organize your workflow even more concisely using a hierarchy of layers.

If you don't get organized properly, chances are you'll start losing money in the design process, you just haven't realized the loss yet. Organization of work is extremely important in the efficient use of time and other resources!

Modularity

Sketch is great for Atomic Design because of its ease of creating modular systems. Not only can you achieve perfect organization with layers like in Adobe Photoshop, you can also create modular elements. In Sketch, these elements are called symbols.

Creating a symbol allows you to change all of the styles of an element, and those changes will be reflected across all of the symbol's entities within the same file.

First, draw your element the way you want it to be.

Then select it and click on the button Create Symbol(create symbol) on top panel tools.

Pro tip: To turn elements with text into perfectly modular symbols in Sketch, be sure to check the option Exclude Text Value from Symbol in the toolbox on the right.

To do this you need to first select the text in the symbol, if you don't you won't see the option you want in the toolbox.

You can now insert a symbol anywhere and change the internal text so that the text on other copies of the symbols remains the same.

If you don't plan on making the text content different for each character, don't worry and skip this step. But just know that this opportunity exists, and it is very convenient.

Whenever you want to place one of the created elements, you just need to click on dropdown Insert, find option Symbols and select the character you want to insert.

Convert to code

Export to code

What's better than modular symbols? Export design directly to code. This means that you, the designer, don't have to learn how to properly source code. Although, this won't hurt either.

To get the code of your elements, you first need to make sure that they are grouped together appropriately and converted into symbols. After this, you just need to right-click on the element and select Copy CSS Attributes in the drop-down menu.

Make sure you take care of all the necessary prefixes as they are not included in the code from Sketch. Or use special package for this.

HTML

As with using Bootstrap or Foundation, we have stylized elements. All that's left to do is add a class to the element in our HTML code.

Here you need to turn the elements into an HTML page that only developers from the team will see. You can create a page of elements with the desired class applied to check how it all looks in the browser on different screens.

Brad Frost and Dave Olson from Pattern Lab created a great example, check it out:

Using template engines

This is a bonus for those who have mastered templating engines and CSS, like swig, jade, haml and many other languages ​​available today.

Many of the organisms we have created will become partials once they are converted into code.

We did it

Now you can pretend like you understand science. And up to to a certain extent, you do understand this. Atomic Design is the science of high-quality design.

By creating modular, repeatable elements and patterns, we can exponentially speed up the design and development process. And the acceleration affects not only the drawing of elements itself, but also the process of making changes throughout the project.