The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
2. Why do we have to start building our design system?
3. 5/10 companies from the top 10 companies
by the market cap are either exclusively
growing by producing software, or software is
an important part of their revenue stream.
4. And in the past 12 months these companies increased
their design headcount by an average of 65%.
8. The business requirements pressure designers to build
more, faster and better, but without standards in place,
every new hire is going to further slow down the process.
9. Team Product
New Styles, Patterns, Ideas…
New Styles, Patterns, Ideas… New Styles, Patterns, Ideas…
Every new hire and every new project increases
chaos in the process and slows down velocity
Without a Design System…
10. Without a design system, software development process
becomes gradually slower and slower and the
experience of users suffers from growing inconsistencies.
12. Does your design have the following problems?
Inconsistency
Hard to train new designers?
Hard to update?
Hard to scale design yo new platform?
Your design look the same with other sites?
13. One YES makes the creation of the design system worthwhile.
14. To overcome these challenges thousands of
companies are investing in Design Systems.
16. “A scalable framework of decisions & team
behaviors across a product portfolio to
converge on a cohesive experience.“
- Nathan Curtis
17. Design System
Components
Design Kit
Voice & Tone
Provides guidance on how
language should be used
Sketch, figma, xd etc. files
for designers
Contains coded
patterns & examples
18. Design System
Components
Design Kit
Voice & Tone
Provides guidance on how
language should be used
Sketch, figma, xd etc. files
for designers
Contains coded
patterns & examples
Atomic Design
20. atoms molecules organisms templates pages
Atomic design is methodology composed of 5 distinct stages working
together to create interface design systems in a more deliberate and
hierarchical manner
22. Atoms
The foundational building blocks that comprise all our user interfaces
1397E1
Brand Secondary
1CB3FF
Brand Terciary
0177C1 - 1CB3FF
Brand Gradient
0177C1
Brand Primary
Primary font: “Helvetica”, sans serif
Primary font: “Helvetica”, sans serif
Primary font italic: “Helvetica”, sans serif
PRIMARY SECONDARY TERTIARY
HOVER HOVER HOVER
SELECTED SELECTED SELECTED
DISABLED DISABLED DISABLED
Type Error DisabledInput field
LOGO
Heading Level 1
Heading Level 2
Heading Level 3
23. Molecules
Relatively simple groups of UI elements functioning together as a unit
240x240
1:1
Lorem ipsum dolor sit (37 characters)
Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo
mi consectetur. Curabitur at vestibulum nisi.
Lorem ipsum dolor sit (37 characters)
Input field
Label
Type
Label
Error
Label
Disabled
Label
Search this site
Type here
Label
27. So now you know how atomic designs help designers
build a design system? But how other stakeholders are
involved in building this. Let’s go over that!
28. Design System
Components
Design Kit
Voice & Tone
Provides guidance on how
language should be used
Sketch, figma, xd etc. files
for designers
Contains coded
patterns & examples
Business +
Content Creators
Designers
Developers
29. Business & Content Creators: Voice & Tone
https://atlassian.design/guidelines/brand/personality
33. Use When Not Use When
• Design large products
• Design multi-platform products
• Design products that have many updates in the future
• Design products that scales
• Team with many design members in one product
• Design things that are too small
• Design one-time use things
• Tight Budget
• Tight Timeline
35. Pros Cons
• Decreased development and design cost
• Faster time to market
• Better product quality
• Happier customers
• Reusable
• Easy to scale/ Update
• Easy to hand off/ Training
• Take time and money to develop
• Not suitable for some types of products
36. It takes time & money initially, But it’s an asset in long term
37. You end up saving the time and money
saved thanks to a design system makes the
whole project worth it
