Build your design system from scratch

Planning, setting and creating a design system is crucial for effectively designing and keeping consistent user interfaces.

Transcript

1. @ive77i
   Build your design system from scratch @webcampzagreb #wczg
   Build your
   design system
   from scratch
   WebCamp Zagreb
   October 9th 2019
   

   View Slide

2. @ive77i
   Build your design system from scratch @webcampzagreb #wczg
   Ivana Miličić
   Digital Product Designer
   Hi!
   

   View Slide

3. @ive77i
   Build your design system from scratch @webcampzagreb #wczg
   Houston, we have a problem!
   

   View Slide

4. @ive77i
   Build your design system from scratch @webcampzagreb #wczg
   physical vs digital
   product
   

   View Slide

5. @ive77i
   Build your design system from scratch @webcampzagreb #wczg
   multiple designers and
   stakeholders
   

   View Slide

6. @ive77i
   Build your design system from scratch @webcampzagreb #wczg
   multitude of platforms
   and devices
   

   View Slide

7. @ive77i
   Build your design system from scratch @webcampzagreb #wczg
   

   View Slide

8. @ive77i
   Build your design system from scratch @webcampzagreb #wczg
   why?
   

   View Slide

9. @ive77i
   Build your design system from scratch @webcampzagreb #wczg
   individual and not systematical
   problem solving
   fragmented visual
   language
   

   View Slide

10. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    language is not understood
    by everyone
    misunderstandings
    

    View Slide

11. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    disjointed user
    experiences
    

    View Slide

12. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    

    View Slide

13. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    manage
    the chaos
    

    View Slide

14. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    build better
    and faster
    

    View Slide

15. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    make scale
    possible
    

    View Slide

16. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    achieve
    consistency
    

    View Slide

17. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    improve
    accessibility
    

    View Slide

18. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    

    View Slide

19. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    what?
    

    View Slide

20. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    a product
    not project!
    

    View Slide

21. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    a collection of reusable
    components, guided
    by clear standards
    assembled can build any number of applications
    

    View Slide

22. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    ongoing
    it will require maintenance
    and improvements
    

    View Slide

23. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    

    View Slide

24. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    how?
    

    View Slide

25. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    1. an inventory
    • visual attributes
    • UI elements
    https://cssstats.com
    https://github.com/getflourish/Sketch-Style-Inventory
    

    View Slide

26. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    

    View Slide

27. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    2. guidelines
    defining design language
    styles and properties
    

    View Slide

28. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    

    View Slide

29. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    • colors
    • typography
    • spacing
    • images
    • visual form
    • motion
    • sound
    (visual) design language
    

    View Slide

30. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    http://tiny.cc/9g36dz
    design system
    http://tiny.cc/8h46dz
    demo screens
    

    View Slide

31. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    • brand
    • information
    • hierarchy
    • interaction feedback
    color
    

    View Slide

32. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    1-3 primaries
    neutrals for general UI
    colors for different states
    

    View Slide

33. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    • brand
    • information
    • hierarchy
    • user experience
    typography
    

    View Slide

34. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    up to two typefaces / weights
    type scale
    leading, spacing and sizing
    https://www.modularscale.com
    

    View Slide

35. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    • brand
    • visual communication
    • icons, illustrations, photos
    • define guidelines
    images
    

    View Slide

36. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    • backgrounds
    • gradients
    • textures
    • shadows/elevation (z-indexes)
    • rounded corners
    • borders
    visual forms
    

    View Slide

37. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    • animations
    • tansitions
    • sound
    motion and sound
    

    View Slide

38. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    3. UI library
    designing components with global
    rules and reusable style
    

    View Slide

39. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    elements (or basics, or atoms)
    components (or molecules, or modules)
    regions (or zones, or organisms)
    layouts
    

    View Slide

40. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    • consistent
    • self-contained
    • reusable
    • accessible
    • robust
    foundations
    

    View Slide

41. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    

    View Slide

42. @ive77i
    Build your design system from scratch @webcampzagreb #wczg
    Thanks!
    twitter.com/ive77i
    linkedin.com/in/ivanamilicic/
    instagram.com/just_ivana_things/
    joind.in/talk/d2bc8
    

    View Slide