Basic knowledge about Design System and Atomic Design

2. #atomicdesign
#designsystem
#frameworks
#styleguide
20
17
20
17
HELLO
Eggcademy.online

3. TABLE OF CONTENTS
1. Why Design system?
2. Atomic design
3. How to create Designer Kit
4. Pros & Cons of Design system

4. eggcademy.online
Why Design system?

5. Does your design have the following problems?
INCONSISTENCY
HARDTOTRAINNEWDESIGNER
HARD TO UPDATE
HARD TO SCALE DESIGN TO NEW PLATFORM
YOUR DESIGN LOOK THE SAME WITH OTHER SITES

8. eggcademy.online
Design system

11. eggcademy.online
What do you think about this redesign?

12. COMPONENTS
Contains coded
pa-erns and
examples
DESIGN SYSTEM
VOICE & TONE
Provides guidance
on how language
should be used.
DESIGNERS KIT
Includes a Sketch/
Photoshop/Figma/
etc. file for
designers.
STORYBOOK
Provides
components with
relevant stories for
React Storybook.

13. COMPONENTS
Contains coded
paBerns and
examples
DESIGN SYSTEM
VOICE & TONE
Provides guidance
on how language
should be used.
DESIGNERS KIT
Includes a Sketch/
Photoshop/Figma/
etc. file for
designers.
STORYBOOK
Provides
components with
relevant stories for
React Storybook.
Atomic design

14. eggcademy.online
Atomic design

15. "Atomic design is a
methodology composed of
five dis6nct stages working
together to create interface
design systems in a more
deliberate and hierarchical
manner."
- Brad Frost -

16. The five stages of atomic design
ATOMS MOLECULES ORGANISMS TEMPLATES PAGES

17. Taking cues from chemistry
ATOMS MOLECULES ORGANISMS TEMPLATES PAGES

18. From style guide to final UI
ATOMS MOLECULES ORGANISMS TEMPLATE PAGE

19. ATOMS
The founda/onal building
blocks that comprise all our
user interfaces
LOGO
COLORPALETTE
TEXT STYLES
ICONS
BUTTON
...

20. Atoms
Molecules
MOLECULES
Rela,vely simple groups of UI
elements func,oning
together as a unit

21. ORGANISMS
Rela,vely complex UI
components composed of
groups of molecules and/
or atoms and/or other
organisms
Molecules & Atoms Organism

22. TEMPLATES
Page-level objects that
place components into a
layout and ar>culate the
design’s underlying content
structure

23. PAGES
Specific instances of
templates that show what a
UI looks like with real
representa:ve content in
place

24. eggcademy.online
How to create Designers kit

25. Who create
Designers kit?
TEAMEFFORT
KEY PERSONS: VISUAL DESIGNER
& UX DESIGNER

26. User needs &
Business objec0ves
Brand Strategy
Content requirement
& Fun0onal specs
Brand Iden0ty
Wireframe
Style guide
(Atoms)
Informa0on architecture
& Interac0on design
UI direc0on
Designers Kit
Visual
UX
Next slide

27. uirement
al specs
en.ty
Wireframe Pa;ern library
Style guide
(Atoms)
Final UI
Informa.on architecture
& Interac.on design
UI direc.on
Designers Kit
Visual
UX

28. uirement
al specs
en)ty
Wireframe Pa1ern library
Style guide
(Atoms)
Final UI
Informa)on architecture
& Interac)on design
UI direc)on
Designers Kit
Visual designer can work in
silo to create style guide ...
...but she needs wireframe from
UX designer to con:nue

29. STEP 1
Gather exis0ng brand
guidelines

30. STEP 2
Develop several UI
direc5ons, focus on visual
aesthe5cs
Choose one concept then
move to next step
COLOR
TYPOGRAPHY
FLAT/ MATERIAL...
TEXTURE
...

31. STEP 3
Apply the chosen visual style
to create UI style guide
(Atoms)

33. STEP 4
Apply the UI style guide to
established wireframes to
create final UI & pa@ern
library

34. Wireframe Style guide

35. Final UI Pa*ern library

37. eggcademy.online
Pro & Cons of Design system

38. Pros
CONSISTENCY
RESUABLE
EASY TO MAINTAIN
EASY TO SCALE/ UPDATE
EASY TO HANDOFF/ TRAINING,...
Cons
TAKE TIME & MONEY TO MAKE THE SYSTEM
NOTSUITABLEFORSOMETYPESOFPRODUCTS

39. Time
Design system takes .me &
money to create in early
process, but it will shine later
Money
Time
Design system
Tradi/onal process

40. Time
eggcademy.online
When should we avoid using Design System?

41. Use when
DESIGN LARGE PRODUCTS
DESIGNMULTI-PLATFORMPRODUCTS
DESIGN PRODUCTS THAT HAVE MANY UPDATES
IN THE FUTURE
DESIGN PRODUCTS THAT SCALES
TEAM HAS MANY DESIGNERS INVOLVE IN ONE
PRODUCT
Not use when
DESIGN THINGS THAT TOO SMALL
DESIGNONE-TIME-USETHINGS
TIGHTBUDGET
TIGHTTIMELINE

42. #atomicdesign
#designsystem
#frameworks
#styleguide
20
17
20
17
ASK ME ANYTHING
Eggcademy.online