Intro to Atomic Design Patterns [with examples]

In this lesson, we'll look at how to build the screens that we set up in the previous modules. We already have the navigation for the app and we have put in some placeholder screens. So how do we go about building those screens? Should we just start them individually? Let's say we have a team of five to 10 people working. So we all provide we provide all of them with one individual screen and they start building with the marks or the design that are provided. That will be a great idea. Instead, what we're going to do is we're going to follow the admin design pattern for building layouts. It basically philosophy that tells how a UI should be built. And we're also going to look at building and design system in this module and the two are not dependent on each other. But if you're able to write me break our UI into the admin design pattern and and build a design system according to what our designers have have planned for the app. The two work together very well to come out and build an app that is not just a beautiful, but consistent, scalable, modular and very, very manageable. Now those are some pretty heavy words and we all want to achieve all of that. But how do we do it? In practical scenarios, we've seen that down the line, we're trying to deliver a project. We might have to cut corners and compromise with them and that's where the difference is. I like to use the example of law team in this case a lot. So we all know the pain that a designer goes through when they're trying to create a particular animation, right? They look at each and every frame how they're supposed to move it in a certain flow. And and they get done with it and they pass it on to the developers to replicate that in on a website or on a app. Now the developer needs to go through the same cycle and the additional challenge of that is that they also need to take care. Of the technology that they're using to build those right and the technological limitations. Lottie what it does is abstracts all that out. It basically takes the designers flow of the entire animation as a JSON and plugs it into the app and developer. They don't need to build the animation at all. They just just need to plug in the JSON and it will replicate the entire effort that the designers put. Now that is a separation of design and development right? And that is what following the add we desire pattern along with a design system is going to help us achieve. Once we understand the concept of at-will design pattern and how it helps build layouts and we have drilled our design system. Following these will not be a conscious decision that our team or developers will need to make while building the app. These will form as a daily of the app and with the bell going forward is automatically going to keep design and development separate. So how does it work? Let's go ahead and see before we start. So I do design pattern was developed by Brad Frost and Dave Wilson. It derives its name from atoms the most basic building blocks or anything in the entire universe. So that's how it goes. Let's say that we have a hydrogen atom and it combines with the oxygen atom. There are different type patterns and they combine to form molecules and molecule could be water. And then those molecules combined to get to form more complex organisms by human beings or animal birds. So that's how they visualize building a layout. So from my perspective, they have basically broken it down into five different categories. And that are atoms molecules, organisms, templates and pages. So atoms will be our most basic elements that constitute the UI like a label and input box or button. These can be the most native elements provided by a browser by the video tag and the input box and similarly on native platforms. Next would be our molecules. So multiple atoms come together to form a UI element that's called a molecule. It can be examples can be a search input or a form. So like we can see here we have a label and input box, you know, but we're coming together to form a sort of a search molecule. Next would be organisms. Now these are more complex elements as in we can combine atoms and molecules together to form an organisms. Now an organism would deliver a feature on its own as in what we see right now is probably got hit an organism. And it provides a placeholder for logo. We have a navigation list and also the search format for other examples of organisms. So we have almost anything that we call a component generally on UI today like a product carousel, a section to show the marketing banners and FII section for products, or the give section. All of these individually will combine a lot of atoms and monotubes to deliver one particular functionality and they would form the organisms. So what would be a template? Template is basically the underlying structure of any piece. So like example, for example, what we have there is let's say a home based template and what it does it brings together different objects like molecules and organisms. Most will do form an underlying structure of how the entire feeds going to work without the actual images and text that's going to appear. So what this does is it allows us to visualize how these different components are going to look and function together in the context of an entire view or a stream or a page. And it allows you to how these parts and up together to create that experience. So let's look at a more real example and it's again from the same particle and fighting. It's a brilliant one. So it's basically a breakdown of the Instagram app into these different components. Let's go through that. So for atoms, what do we have for atoms for atoms? We have the items text elements, the two images, the avatar image and the primary image. And if you look at it, they can't be broken down further into any work elements . Right. So they form like atoms and constitute the building the molecules and organ use for the things. So the molecule would be the navigation header and the user information session . Like we have an avatar icon or the handle name and probably when the person was last seen or posted this particular image. Then we have super image. We have few actionable buttons. So this again can be like a button or an action molecule or an organism. Then we have some information and some comments. So these are all the different molecules. So when we combine these molecules, we get organisms for like we see here. So this particular card that that brings forward the entire functionality of a particular post on Instagram with all the information. The user information, what do you have posted? What was the interaction level, the number of lights, comments and what would the comments, this fourth thing forms the organs. Now, if you put all of this together without the actual content, we get the template, the template for the entire piece. And when we plug in the data, what we get is the actual page that the user sees , the user experience of the entire app. With the icons, the user handle, the actual image, the interaction, everything. So as you would see how at we design pattern really helps us break down our different views across screens into smaller of managing the components. And they are basically defined as atoms, molecules and not can some. So these come together to form templates and templates are mostly at the page level. Like we would have a full page template, a product detail template. A card for each template on and checkout template. And then when we plant in actual detail, what we get are our views of pages. So let's also look at that from what the app that we from the perspective of of breaking this particular UI into those five components. the app that we're going to build before you go ahead with this particular video. So go ahead and do that and play the video once again and we go through it. Okay. So let's first look at atoms. So probably the icons and the buttons and the text box here, not not the icon, but just the text box how it's rounded and in the background color. These can be atoms. These icons can also be atoms and similarly the headings, the styling for that will be part of the design system. We will look at in the coming modules. All of this can be atoms. This search box can become a molecule as it also has an icon and clicking the icon will probably have some kind of an action. Either we search over here or we take the two different speed. And similarly, we have a lot of different molecules. We have the navigation molecule over here. Then this is this is more complex. So it has icon and this particular this whole thing can be a molecule or that constituents and icon are text and a click action. And this entire thing can be a category organism. Similarly, we have a Afghanistan over here with an organism of a product car and it's as you can see between the two views. So this is probably a listing view and a landing phase of sort of a home page. So it's used across the screens. And if we could just visualize the whole thing without these items and these images, that would be a template. So our template is basically a search box with sort of a scanner camera camera icon. So we can click anything in search for it. A category widget. Then we have our best sending items and so forth. So let's start off this particular video. I talked about building an app that is consistent modular, scalable and manageable world. And going through this process of understanding will concept of that and design pattern. I think we should now be able to visualize how we achieve that. Atoms should help us achieve consistency will be using labels and paradox types and search boxes. Text boxes. Sorry. Across the views. Molecules and organisms will help us bring modularity and again consistency. In terms of scalability, what we need to do is when we scale this app into different views, we try to use based on what we have. And if we need to build something new, we start from the scenes journey. We start same journey and basically try to define things as atoms and introduce them into our current set of different atoms, molecules and organisms. And in terms of manageability, whenever we need to change something in the app, let's say the design or the colors or let's say the entire product component. We go and revisit what we have and change them at a more granular level. So my following this particular process, which I like to call storyboarding. We have done is we basically can now have a thorough understanding of our entire apps. We only saw what's we need to build. Now we know the components that we need to build how we would break them down into more management pieces and how these different components come together to build on layouts or views. We also know what needs to be built first. We'll start with atoms and then once we're done with those, we'll want to building our molecules and then finally to more complex and free featured. Fully full feature developing organisms. What this process also helps us achieve is that let's say that we have common counter across the views. Let's say that we want to persist the search box and a card icon across different screens. Through our usage to the different steps of user new. So what we know by this process is that we need to build a search molecules which can be reused across books. So to summarize, we now have a wide plan in place that should give us a lot of confidence going in through the actual development phase. So we'll look at building on of these in the subsequent models. Thank you. you