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
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
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
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
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)
32.
33. STEP 4
Apply the UI style guide to
established wireframes to
create final UI & pa@ern
library
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