spletne-urice-how-to-build-design-systen-presentation/talk.txt at master · tresko/spletne-urice-how-to-build-design-systen-presentation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
intro
    - i am front-end engineer

problems
    - is it hype
    - somebody needs to do it
    - design inconsistency

what
    - design system is not sketch or figma files
    - its components
    - button example
    - what is design system
    - benefits
        - reduce technical debt
        - faster production
        - higher quality production
        - reduce QA effots
        - potential adopt new technologies faster
        - useful reference
        - future friendly foundation

how
    - new or old project
        - old project
            - make screenshoots
            - pitch
                consistency and cohesion,
                speed up your team’s productivity,
                establish a more collaborative workflow,
                establish a shared vocabulary,
                provide helpful documentation,
                make testing easier,
                serve as a future-friendly foundation.
                Do you like saving time and money? Yes or no?
            - audit designs
                - make meeting (30 and 90 minutes)
                    - invite:
                        UX designers,
                        visual designers,
                        front-end developers,
                        back-end developers,
                        copywriters,
                        content strategists,
                        project managers,
                        business owners,
                        QA
                        other stakeholders
                    - make screenshots
                        Global elements
                        Navigation
                        Image types
                        Icons
                        Forms
                        Buttons
                        Headings
                        Blocks
                        Lists
                        Interactive components
                        Media
                        Third-party components
                        Advertising
                        Colors
                        Animation
                - present findings
                - regroup and establish next steps

    - define style guides
    - shared vocabulary,
    - redefine teams
    - collaboration is key
    - style guides
    - make designes
    - tools in the basement
    - it is a product

implement:
    - components and designes
    - make CSS framework
        - why
            - react
            - vue
            - django
            - the world is bigger than react / vue
        - CSS arhitecture
            - css style
            - BEM
        - make button CSS
        - modular
    - make CSS framework documentation
        -gatsby
    - make React/vue framework
        - documentation
        - typescript
        - input component
        - hero example
        - better for back-end developers
    - deploy
    - versioning

recap
    - design system is about productivity
    - the world is bigger than react / vue
    - design system is a dependency
    - collaboration is key
    - ask if design system is great

    - KPIs:
        - speed
        - quality
        - easy of contibution
        - completeness

outro
    - course
    - bitstamp