SlideShare a Scribd company logo
1 of 51
Download to read offline
Adam Kudrna — 22. 3. 2023 — OSTRAVA!!!
UX a design systémy
TechMeetup #26
https:/
/github.com/react-ui-org/react-ui
https:/
/github.com/lmc-eu/spirit-design-system
— UX versus UI
— Design system team
— Jak může vývojář přispět k lepší UX?
PP
UX versus UI
https:/
/www.interaction-design.org/literature/topics/ux-design
“User experience (UX) design is the process design teams use
to create products that provide meaningful and relevant
experiences to users. UX design involves the design of the
entire process of acquiring and integrating the product,
including aspects of branding, design, usability and function.”
https:/
/www.interaction-design.org/literature/topics/ux-design
https:/
/www.cojeuxui.cz/
https:/
/www.cojeuxui.cz/
https:/
/www.cojeuxui.cz/
• návrh produktu
• návrh služby
• user journeys
• komponenty
• interakce
• animace
UX UI
• komponenty
• interakce
• animace
UX UI
Design systém
• návrh produktu
• návrh služby
• user journeys
• komponenty
• interakce
• animace
• konzistence
• přístupnost
• výkon
Design systém
Velké × malé UX
Design system team
Designer
FE
vývojáři
PM
Design systém
Design systém Produkt
UI designer × UX designer
🤔
Designer, nebo dokumentace?
Jak může vývojář přispět
k lepší UX?
🍱 Systematizace
🏃 Výkon
🔎 Mikrointerakce
⌨ Přístupnost
Jak může vývojář design systému
přispět k lepší UX?
⌨ Přístupnost
🔎 Mikrointerakce
🏃 Výkon
🍱 Systematizace
Jak může design systém
přispět k lepší UX?
Samostatností
k rychlejšímu vývoji
Čím méně designerů,
tím lepší dokumentace
Velké × malé UX
Design systém Produkt
@AdamKudrna — @FrontendGarden
DÍKY!!!

More Related Content

Similar to UX a design systémy

UX - User Experience v podání Mariana Vařechy
UX - User Experience v podání Mariana VařechyUX - User Experience v podání Mariana Vařechy
UX - User Experience v podání Mariana VařechyE-kom_Promotion
 
SUX forum prednáška - UI myslenie boli :)
SUX forum prednáška - UI myslenie boli :)SUX forum prednáška - UI myslenie boli :)
SUX forum prednáška - UI myslenie boli :)Jaro Zacko
 
Úživatel nechce přemýšlet
Úživatel nechce přemýšletÚživatel nechce přemýšlet
Úživatel nechce přemýšletjirikomar
 
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?Jan Brejcha
 
Atlassian onlio about onepager 1v0
Atlassian onlio about onepager 1v0Atlassian onlio about onepager 1v0
Atlassian onlio about onepager 1v0Onlio
 
Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikul...
Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikul...Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikul...
Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikul...ÚISK FF UK
 
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012Sherpas
 

Similar to UX a design systémy (9)

UX - User Experience v podání Mariana Vařechy
UX - User Experience v podání Mariana VařechyUX - User Experience v podání Mariana Vařechy
UX - User Experience v podání Mariana Vařechy
 
SUX forum prednáška - UI myslenie boli :)
SUX forum prednáška - UI myslenie boli :)SUX forum prednáška - UI myslenie boli :)
SUX forum prednáška - UI myslenie boli :)
 
Úživatel nechce přemýšlet
Úživatel nechce přemýšletÚživatel nechce přemýšlet
Úživatel nechce přemýšlet
 
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?
 
Atlassian onlio about onepager 1v0
Atlassian onlio about onepager 1v0Atlassian onlio about onepager 1v0
Atlassian onlio about onepager 1v0
 
Plány Asociace UX na rok 2015
Plány Asociace UX na rok 2015Plány Asociace UX na rok 2015
Plány Asociace UX na rok 2015
 
Krev net a slzy
Krev net a slzyKrev net a slzy
Krev net a slzy
 
Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikul...
Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikul...Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikul...
Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikul...
 
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012
Ochutnávka studie WebTop100: Srovnání kvality českých webů, 2012
 

More from Adam Kudrna

Design systém 1.0
Design systém 1.0Design systém 1.0
Design systém 1.0Adam Kudrna
 
TwigX: pište PHP šablony jako v Reactu
TwigX: pište PHP šablony jako v ReactuTwigX: pište PHP šablony jako v Reactu
TwigX: pište PHP šablony jako v ReactuAdam Kudrna
 
Nové CSS vlastnosti pro rok 2022 a jak je využít
Nové CSS vlastnosti pro rok 2022 a jak je využítNové CSS vlastnosti pro rok 2022 a jak je využít
Nové CSS vlastnosti pro rok 2022 a jak je využítAdam Kudrna
 
ITCSS — škálovatelná CSS architektura
ITCSS — škálovatelná CSS architekturaITCSS — škálovatelná CSS architektura
ITCSS — škálovatelná CSS architekturaAdam Kudrna
 
CSS for Design Systems
CSS for Design SystemsCSS for Design Systems
CSS for Design SystemsAdam Kudrna
 
SUIT CSS vs. BEM
SUIT CSS vs. BEMSUIT CSS vs. BEM
SUIT CSS vs. BEMAdam Kudrna
 
CSS pro design systémy
CSS pro design systémyCSS pro design systémy
CSS pro design systémyAdam Kudrna
 
TwigYard – The Final Solution for Small Websites
TwigYard – The Final Solution for Small WebsitesTwigYard – The Final Solution for Small Websites
TwigYard – The Final Solution for Small WebsitesAdam Kudrna
 
HTML prototypování
HTML prototypováníHTML prototypování
HTML prototypováníAdam Kudrna
 
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendistyPhotoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendistyAdam Kudrna
 
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, BrnoBootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, BrnoAdam Kudrna
 

More from Adam Kudrna (13)

Design systém 1.0
Design systém 1.0Design systém 1.0
Design systém 1.0
 
TwigX: pište PHP šablony jako v Reactu
TwigX: pište PHP šablony jako v ReactuTwigX: pište PHP šablony jako v Reactu
TwigX: pište PHP šablony jako v Reactu
 
Nové CSS vlastnosti pro rok 2022 a jak je využít
Nové CSS vlastnosti pro rok 2022 a jak je využítNové CSS vlastnosti pro rok 2022 a jak je využít
Nové CSS vlastnosti pro rok 2022 a jak je využít
 
ITCSS — škálovatelná CSS architektura
ITCSS — škálovatelná CSS architekturaITCSS — škálovatelná CSS architektura
ITCSS — škálovatelná CSS architektura
 
CSS for Design Systems
CSS for Design SystemsCSS for Design Systems
CSS for Design Systems
 
SUIT CSS vs. BEM
SUIT CSS vs. BEMSUIT CSS vs. BEM
SUIT CSS vs. BEM
 
CSS pro design systémy
CSS pro design systémyCSS pro design systémy
CSS pro design systémy
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
Kvalita kódu
Kvalita kóduKvalita kódu
Kvalita kódu
 
TwigYard – The Final Solution for Small Websites
TwigYard – The Final Solution for Small WebsitesTwigYard – The Final Solution for Small Websites
TwigYard – The Final Solution for Small Websites
 
HTML prototypování
HTML prototypováníHTML prototypování
HTML prototypování
 
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendistyPhotoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
 
Bootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, BrnoBootstrap – Frontendisti 26. 6. 2014, Brno
Bootstrap – Frontendisti 26. 6. 2014, Brno
 

UX a design systémy