Atomic Design Methodology: Create a systematic UI and reuse.

The real problem in life: "Beautiful website ... but why Headache everywhere? "

UI/UX, Product Manager designer or even business owners have ever experienced this condition? When launching the web or app for the first time Everything looks beautiful Good order But when time passed ... want to add a new feature Or just to fix a small button design, everything is broken, miserable

The button on the A page looks unlike the button on the B, the color used in the subscription page is a different shade on the payment page, Developer must sit and write a new code for a component that looks similar. Repeatedly ... Finally, it turns out that "Great web Even without order. "To expand or maintain a nightmare that both consumes time and wasting budgets unbelievably.

If you are nodding, then you are not faced by this problem. This is the "pain" of the most "good" design.

Prompt: The graphics of the UI of the website on the 2nd side of the website (before the left side shows the button, card, and fonts that are inconsistent. Look chaotic. The right side (After) shows the UI that all components look orderly and beautifully.

Why does that problem occur: the design that only looks "page" does not look "system"

The root of all the chaos is usually due to the wrong design methods. We tend to be taught to be "pages" (Page-based Design), such as "Home Design", "Product Design page Details", "Design in contact with us." This kind of thinking at the beginning may be fast. But in the long run, it is a good disaster.

Because when we design, based on the "page" as the main, we will create various elements New for that page Without thinking that these elements will be used elsewhere or not Causing these problems followed:

• Inconsistency (Inconsistence): Different designers Or even the same person at different times, may create a "blue button" with shades, sizes, or shadows different on each page.
• Redundant Work: Developer must write a code for "User profile box" repeatedly, although it should be created only once and can be used again.
• Lacking the center of the center (No Single Source of Truth): No one knows that the "main button" is really correct. How is it? Everyone works according to their own understanding.

This kind of work is no different from building a city without a city plan. Everyone built the house as he wanted. In the end, the city grew up in crowded and without direction.

Prompt: Cartoon designers and programmers are sitting working after colliding. Each person created their own "button". With an arrow pointing to the computer screen that displayed the same website, but there are many versions that look different

If left, how will it affect: "Technical debt" that escalates until the business holds the business.

Letting your website or application grow systematically Not just a matter of unattractive But it directly affects the business in many dimensions. Like accumulation "Technical Debt" (Technical Debt) that is enormous and expensive.

• User experience (UX) worsen: inconsistent, causing the user to be confused and feel inappropriate. Imagine that if the "confirm" button in your bank app changes your face every time you press. Will you feel confident and dare to continue to use?
• Rising costs: Every time it is required or added It means the time of the designer and the developer that has to be lost with the same problem. And duplicate work This time is "cost" that you have to pay.
• The speed of development decreases: The release of each new feature is a big deal. Because it has to worry about whether it will affect other parts or not from what I have done in 1 week, it may become 1 month
• Damaged brand image: The website is the face of the brand. If it doesn't seem to be a reliable system of the brand in the eyes of consumers, it will be reduced as well.

Finally, this "debt" will escalate until you can't move. To fight with competitors or responding to the market that has changed is slower. Until it may be unfortunately losing business opportunities

Prompt: Intovraft images showed 4 negative impacts caused by releasing this problem: Sansai Watch icon (Waste of time), silver bag icon (high cost), icon graphic icon (UX), and the cracked brand icon. (Damaged brand)

Is there any way to fix: start looking at the "chemist" with atomic design

The solution of this problem is to change the way of thinking from looking into a "page" into a "system" and the most powerful tool to understand this. Atomic design invented by Brad Frost .

Atomic Design is a borrowing concept from chemistry. Applied to the UI design by dividing the various components into 5 levels, like the atoms gathered into molecules And the molecules gathered as a more complex organ

1. Atoms (atom): is the smallest unit and cannot be separated, such as colors, fonts, icons, or single buttons. It is the "raw material", the most basic.
2. Molecules (molecules): Bringing many "atoms" together to create real work components, such as the use of Label (Atom) + Input Field (Atom) + Button (Atom) together into a "form search form". (MOLECULE
3. Organisms (organisms): is to bring "molecules" and/or "atoms" to be as complicated and more important, such as the use of logo + molecule + Molecule form together to become "Header (HEADER)" (Organism)
4. Templates (template): Is the introduction of many "Organism" to put the structure together to create "The outline of the face" without any real information to put in It is a blueprint that stipulates what each page should have.
5. Pages (page): The last step is to bring "Template" to put "real content" (picture, text, video) to allow us to see the webpage or apps that the user will really meet. Which allows us to test the accuracy and efficiency of the design system

The beginning of this concept will help you create a systematic Design System and easily expand. Make it no matter how many tens of hundreds of pages Everything will always remain in the same rules.

Prompt: Beautiful infographic images Show the hierarchy of all 5 atomic design (Atoms -> Molecules -> Organisms -> Templates -> Pages) with clear UI examples in each step, such as Atom, Molecule is search form, header.

Examples from the real thing that used to be achieved: When GE revolutionized the organization with Design System

Theory may still look complicated. Let's take a look at the actual examples of world -class organizations such as General Electric (GE). GE has enormous digital products. Each team designed the UI in different directions. Resulting in confusion and a lot of waste of resources

Problems encountered: lack of violence Making the brand look unique And takes a new product development longer than necessary

How to solve the problem: GE's team has brought the same principle to Atomic Design to create "Predix Design System". They created "Component Library" that everyone in the organization has to use. Starting from color, atoms (Atoms) to data cards, graphs, complex tables (organisms)

Amazing results:

• Reduce the design and develop enormous Because you don't have to create something new from the center
• Create a unified user experience. In every product of GE makes the brand stronger and more reliable.
• Save a huge budget From reducing duplicate functions

This is the proof that the investment creation at first Although it may look slow But the long -term rewards are enormous. And is something that allows the organization to grow sustainably

PROMPT: Slides the BEFORE & After of the GE application. The first side shows the UI from 3 apps that are completely different. The After displaying all 3 apps that use the same Design System, making it look consistent and professional. With statistical numbers such as "Development Time -60%"

If you want to follow, what to do: checklist starts to create atomic design by yourself (can be used immediately).

Read here You probably want to start doing it, right? You don't have to wait! You can start creating the Atomic Design system for your project immediately with this 5 Simple checklist:

1. Making property accounts (UI Inventory): The first step is to explore what you have first. Captures every page of the web or your app. And cut all the components separately: all buttons, all types, cards, all styles, all the topics.
2. Defin your atoms: from the assets made Start grouping and create standards for "Atom" first, such as defining the main color set (Typography Scale), the SPACING SYSTEM system, and the style of the icon This is the creation of Style Guide that is an important foundation.
3. Assemble the body to create molecules: When there is a stable atom Began to bring it together as a "molecule" that is often used, such as "filling in the information with the name", "button with icon", "tag articles"
4. Create important organisms: move up to the next level by creating a larger and the heart of the web, such as Header, Footer, Sidebar, or the product image card with a order button.
5. Use tools to help build: Creating all this system with hands may be too difficult. Use the Figma or Sketch design tool to help create a "Component Library" where everyone on the team can call repeatedly. Figma has a very powerful tool. In this management And if you want to go up again, look at the advanced techniques of Figma that will help you work faster.

PROMPT: Beautiful and easy -to -understand images, showing 5 steps to start atomic design with icons in each item (magnifying glasses, Bảng màu, molecules, structures, and Figma logo).

Questions that people tend to wonder And the answers that are cleared

I gather questions that many people are wondering about Atomic Design to answer clearly. Here

Question 1: Atomic Design is suitable for small projects. Or freelance alone?
Answer: Very suitable! Actually, the smaller the project should start Because it is to create discipline and regulations from the beginning Causing when the project is expanding in the future You will have a strong foundation. No need to come to a headache later Systematic thinking is always useful whether the team is small or large.

Question 2: Will this make the first project be slow?
Answer: Yes, it is a slightly more investment in the first period. But what you have returned is a huge speed of long -term. Like a proverb that "agreed to walk slowly in the first place Better to run faster and stumble in the middle of the way. "It is" slow to Go Fast "(Go Slow to Go Fast) that is the most worthwhile

Question 3: Atomic Design and Style Guide or Design System different?
Answer: It's a very good question! Think like this:

• STYLE GUIDE: Usually focus on "Atoms", such as colors, fonts, logo, icons.
• Atomic Design: Is "philosophy" or "methods" in the use of Style Guide to make a body into a molecules, organisms, templates, and Pages.
• Design System: Is the most "final". It is a recycled component set, with guidelines and complete documents. Atomic design is a great idea to create a Design System.

Question 4: If there is an old website that is already messy, can I take Atomic Design to adapt?
Answer: Absolutely! You don't have to dismantle it all at once. Start from the steps "Ui Inventory" that I recommend first In order to see all the overall image, then gradually create a standard component one by one and then replace the antiques in each part. May start with the most often in front of the person first.

Prompt: The cartoon characters are standing at the intersection. One messy and messy called "Page-Based Design". Another way is a smooth and orderly road called "Atomic Design". The cartoon character has a question mark on the head. Convey the decision

Summary for easy understanding: Stop building a house ... and turn to build "Lego Toward"

If wanting to summarize atomic design, the easiest It is a way to change the way of thinking from "Build the whole house" every time to create "Standard Lego Quarter" set with one set

When you have a good set (atoms, molecules, organisms), whether customers want "house", "castle" or "spacecraft" (Pages), you can pick up the same logo. Assembled into a new item quickly, beautiful and strong, with everything still seems to be part of the same Lego universe

The investment in the "system" today is the purchase of "speed" and "quality" next day. It is the heart of digital products that are ready to grow and adjust in the world that rotates soon. And this is the guideline that our UX/UI design always holds

Okay ... It's time for you to start creating your own Lego set?

Prompt: Powerful last picture Show the designer for the last Lego on the complex and beautiful UI structure. The background is a graph that shows the growth of work efficiency.

‍