Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build your design system from scratch

B2a5fdb0f627dc23841bad912473ab3c?s=47 Ivana
October 09, 2019

Build your design system from scratch

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

B2a5fdb0f627dc23841bad912473ab3c?s=128

Ivana

October 09, 2019
Tweet

Transcript

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

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

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

    we have a problem!
  4. @ive77i Build your design system from scratch @webcampzagreb #wczg physical

    vs digital product
  5. @ive77i Build your design system from scratch @webcampzagreb #wczg multiple

    designers and stakeholders
  6. @ive77i Build your design system from scratch @webcampzagreb #wczg multitude

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

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

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

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

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

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

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

    the chaos
  14. @ive77i Build your design system from scratch @webcampzagreb #wczg build

    better and faster
  15. @ive77i Build your design system from scratch @webcampzagreb #wczg make

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

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

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

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

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

    product not project!
  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
  22. @ive77i Build your design system from scratch @webcampzagreb #wczg ongoing

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

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

  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
  26. @ive77i Build your design system from scratch @webcampzagreb #wczg

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

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

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

    colors • typography • spacing • images • visual form • motion • sound (visual) design language
  30. @ive77i Build your design system from scratch @webcampzagreb #wczg http://tiny.cc/9g36dz

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

    brand • information • hierarchy • interaction feedback color
  32. @ive77i Build your design system from scratch @webcampzagreb #wczg 1-3

    primaries neutrals for general UI colors for different states
  33. @ive77i Build your design system from scratch @webcampzagreb #wczg •

    brand • information • hierarchy • user experience typography
  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
  35. @ive77i Build your design system from scratch @webcampzagreb #wczg •

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

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

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

    UI library designing components with global rules and reusable style
  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
  40. @ive77i Build your design system from scratch @webcampzagreb #wczg •

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

  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