[CZ] Design systém v Kiwi.com (26.2.2018, UXZ)

Přednáška o procesu tvorby design systému v Kiwi.com, kterou jsem prezentoval na UXZ v Praze. O tom, proč je důležité i před takovýmto interním projektem udělat výzkum, o důležitosti komunikace postupu a propojení s vývojem.

Transcript

1. DESIGN SYSTEM Proč do toho investujeme čas? Jak to tvoříme nad již existujícím produktem? Jaké s tím máme plány do budoucna? @honzatmn
2. ! " Něco o mně @honzatmn
3. V Ý Z K U M T V O R B A Z Á V Ě R Ú V O D % & ' @honzatmn
4. @honzatmn Proč jsme tomu dali prioritu?
5. Více produktů, hodně screenů ✈ + P R O B L É M Č . 1 @honzatmn
6. Hodně variant… všeho P R O B L É M Č . 2 @honzatmn
7. Hodně opakovaných diskusí . P R O B L É M Č . 3 @honzatmn
8. Hodně designerů v týmu P R O B L É M Č . 4 @honzatmn
9. Design system je… @honzatmn
10. Design system je… @honzatmn
11. Systém je sada prvků nebo komponent, které jsou promyšleně uspořádany nebo propojeny do vzorců či souvisejících struktur. Systém vytváří charakteristickou sadu chování, často definovanou jako „funkce“ nebo „účel“. @honzatmn
12. Systém je sada prvků nebo komponent, které jsou promyšleně uspořádany nebo propojeny do vzorců či souvisejících struktur. Systém vytváří charakteristickou sadu chování, často definovanou jako „funkce“ nebo „účel“. @honzatmn
13. “A design system isn’t a project. It’s a product serving products.“ N a t h a n C u r t i s 
 D e s i g n s y s t e m s c o n s u l t a n t @honzatmn
14. @honzatmn Design & vývoj pro Kiwi.com 0 ' + Design & vývoj pro mobilní aplikaci 0 ' + Design & vývoj pro interní systém 0 ' + 1 Knihovna použitých patternů
15. @honzatmn Design & vývoj pro Kiwi.com 0 ' + Design & vývoj pro mobilní aplikaci 0 ' + Design & vývoj pro interní systém 0 ' + 1 Design systém Definuje komponenty & patterny Součástí je kód komponent 0 ' +
16. Co to taky ale znamená? D e f i n o v a n é c í l e Z o d p o v ě d n o s t i R o a d m a p a ⏳ Definujte si i principy, podle kterých chcete k design systemu přistupovat. D E S I G N S Y S T E M J A K O P R O D U K T @honzatmn
17. Podpořit produktové týmy při vytváření použitelných rozhraní tím, že nebudou muset opakovaně řešit již vyřešené problémy. C Í L N A Š E H O D E S I G N S Y S T E M U @honzatmn
18. C Í L N A Š E H O D E S I G N S Y S T E M U Podpořit produktové týmy při vytváření použitelných rozhraní tím, že nebudou muset opakovaně řešit již vyřešené problémy. @honzatmn
19. V Ý Z K U M T V O R B A Z Á V Ě R Ú V O D % & ' @honzatmn
20. Rozhovory se stakeholdery V Ý Z K U M - K R O K 1 @honzatmn
21. N A C O J S E M S E P T A L V Ý V O J Á Ř Ů A D E S I G N E R Ů ? R u t i n y b ě ž n é h o p r a c o v n í h o d n e O č e k á v á n í o d d e s i g n s y s t é m u P ř e d á v á n í i n f o r m a c í m e z i d e s i g n e r y a v ý v o j á ř i @honzatmn
22. Zajímejte se o práci svých kolegů, protože design systém tvoříte pro ně @honzatmn
23. C O J S E M Z J I S T I L ? E x i s t u j í c í p a l e t a b a r e v a t e x t o v é s t y l y N e e x i s t u j í c í k o m u n i k a c e m e z i w e b o v ý m a m o b i l n í m v ý v o j e m N ě k o l i k a k t i v i t n a s j e d n o c e n í k o m p o n e n t < = @honzatmn
24. Komunikujte zjištění a co z toho vyplývá zpět do týmu @honzatmn
25. Průzkum „best practices“ V Ý Z K U M - K R O K 2 @honzatmn
26. A d e l e .U X P i n . c o m @honzatmn
27. Projděte si online design systémy až po rozhovorech se stakeholdery @honzatmn
28. UI audit V Ý Z K U M - K R O K 3 UI inventory + analýza CSS @honzatmn
29. Máme výzkum. Co dál? @honzatmn
30. @HonzaTmn MVP design systemu D E S I G N S Y S T E M J A K O P R O D U K T • Definovat základní vizuální stavební prvky • Sepsat guidelines, jak pracovat s konkrétními prvky • Připravit vývojově Kiwi.com na přechod na nový vizuální styl Vytvořit design system pouze pro produkty, v první verzi nebudeme řešit marketingové podstránky ani podklady pro externí agentury. @honzatmn
31. PRINCIPY POSOUVEJME HRANICE Než něco znovu vytvoříme, zanalyzujme všechna řešení, co již máme v produktu a iteracemi to vylepšeme. DĚLÁME TO PRO UŽIVATELE Vytváření znovupoužitelných komponent nám dává příležitost zaměřit se i na lepší použitelnost a přístupnost našich produktů. NEVYMÝŠLEJME KOLO Používejme patterny, které naši uživatelé již znají. Experimentujme a hledejme nová řešení, prioritou je ale pochopitelný produkt. KOMUNIKUJME OTEVŘENĚ Každá část design systému je otevřena návrhům a diskusím. Naším cílem je najít způsoby, jak efektivně tvořit produkt. @honzatmn
32. V Ý Z K U M T V O R B A Z Á V Ě R Ú V O D % & ' @honzatmn
33. Barvy @honzatmn
34. @HonzaTmn @honzatmn
35. @honzatmn
36. @honzatmn
37. @honzatmn
38. @honzatmn
39. @honzatmn
40. @HonzaTmn @honzatmn
41. @honzatmn
42. + Plugin Sketch Palettes @honzatmn
43. @HonzaTmn Design tokeny @honzatmn
44. Barvy - použití & guidelines @honzatmn
45. ? Zanalyzujte si, které barvy a kolikrát používáte v produkční verzi webu @ Neřešte to izolovaně, vtáhněte celý tým co nejdříve (IKEA efekt) Pár tipů k barvám Myslete na základní pravidla přístupnosti (alespoň u primárních barev). A Mějte definované, jak chcete kterou barvu používat @honzatmn
46. Typografie @honzatmn
47. @honzatmn
48. CSS audit? @honzatmn
49. @honzatmn
50. #171b1e #46515E #7F91A8 $text-attention $text-primary $text-secondary Roboto 40/52 Roboto 28/34 Roboto 22/26 Roboto 16/22 Roboto 14/20 Roboto 12/16 Roboto Regular Roboto Bold Roboto Bold ROBOTO BOLD UPPERCASE @honzatmn
51. Small / Primary · Roboto Regular, 12/16 Small / Secondary · Roboto Regular, 12/16 Small / Attention · Roboto Regular, 12/16 Small / Italic / Primary · Roboto Italic, 12/16 Small / Italic / Secondary · Roboto Italic, 12/16 Small / Italic / Attention · Roboto Italic, 12/16 Small / Bold / Primary · Roboto Bold, 12/16 Small / Bold / Secondary · Roboto Bold, 12/16 Small / Bold / Attention · Roboto Bold, 12/16 SMALL / UPPERCASE / PRIMARY · ROBOTO BOLD, 12/16 SMALL / UPPERCASE / SECONDARY · ROBOTO BOLD, 12/16 SMALL / UPPERCASE / ATTENTION · ROBOTO BOLD, 12/16 Small / Primary · Roboto Regular, 12/16 Small / Secondary · Roboto Regular, 12/16 Small / Italic / Primary · Roboto Italic, 12/16 Small / Italic / Secondary · Roboto Italic, 12/16 Small / Italic / Attention · Roboto Italic, 12/16 Small / Bold / Primary · Roboto Bold, 12/16 Small / Bold / Secondary · Roboto Bold, 12/16 Small / Bold / Attention · Roboto Bold, 12/16 Small / Bold / Attention · Roboto Bold, 12/16 Small / Link, Active · Roboto Bold, 12/16 Normal / Primary · Roboto Regular, 14/20 Normal / Secondary · Roboto Regular, 14/20 Normal / Attention · Roboto Regular, 14/20 Normal / Bold / Primary · Roboto Bold, 14/20 Normal / Bold / Secondary · Roboto Bold, 14/20 Normal / Bold / Attention · Roboto Bold, 14/20 Normal / Link, Active · Roboto Bold, 14/20 Large / Primary · Roboto Regular, 16/24 Large / Secondary · Roboto Regular, 16/24 Large / Attention · Roboto Regular, 16/24 Large / Link, Active · Roboto Bold, 16/24 Large / Bold / Attention · Roboto Bold, 16/24 Large / Bold / Secondary · Roboto Bold, 16/24 Large / Bold / Attention · Roboto Bold, 16/24 Title 0 · Roboto Bold, 40/52 Title 1 · Roboto Bold, 28/34 Title 2 · Roboto Medium, 22/26 Title 3 · Roboto Medium, 16/22 @honzatmn
52. $title-font: 'Roboto' $title-size0-text-size: 40 $title-size0-text-weight: 700 $title-size0-line-height: 52 $title-size0-color: $text-attention $title-size1-text-size: 28 $title-size1-text-weight: 700 $title-size1-line-height: 34 … Small / Primary · Roboto Regular, 12/16 Small / Secondary · Roboto Regular, 12/16 Small / Attention · Roboto Regular, 12/16 Small / Italic / Primary · Roboto Italic, 12/16 Small / Italic / Secondary · Roboto Italic, 12/16 Small / Italic / Attention · Roboto Italic, 12/16 Small / Bold / Primary · Roboto Bold, 12/16 Small / Bold / Secondary · Roboto Bold, 12/16 Small / Bold / Attention · Roboto Bold, 12/16 SMALL / UPPERCASE / PRIMARY · ROBOTO BOLD, 12/16 SMALL / UPPERCASE / SECONDARY · ROBOTO BOLD, 12/16 SMALL / UPPERCASE / ATTENTION · ROBOTO BOLD, 12/16 Small / Primary · Roboto Regular, 12/16 Small / Secondary · Roboto Regular, 12/16 Small / Italic / Primary · Roboto Italic, 12/16 Small / Italic / Secondary · Roboto Italic, 12/16 Small / Italic / Attention · Roboto Italic, 12/16 Small / Bold / Primary · Roboto Bold, 12/16 Small / Bold / Secondary · Roboto Bold, 12/16 Small / Bold / Attention · Roboto Bold, 12/16 Small / Bold / Attention · Roboto Bold, 12/16 Small / Link, Active · Roboto Bold, 12/16 Normal / Primary · Roboto Regular, 14/20 Normal / Secondary · Roboto Regular, 14/20 Normal / Attention · Roboto Regular, 14/20 Normal / Bold / Primary · Roboto Bold, 14/20 Normal / Bold / Secondary · Roboto Bold, 14/20 Normal / Bold / Attention · Roboto Bold, 14/20 Normal / Link, Active · Roboto Bold, 14/20 Large / Primary · Roboto Regular, 16/24 Large / Secondary · Roboto Regular, 16/24 Large / Attention · Roboto Regular, 16/24 Large / Link, Active · Roboto Bold, 16/24 Large / Bold / Attention · Roboto Bold, 16/24 Large / Bold / Secondary · Roboto Bold, 16/24 Large / Bold / Attention · Roboto Bold, 16/24 Title 0 · Roboto Bold, 40/52 Title 1 · Roboto Bold, 28/34 Title 2 · Roboto Medium, 22/26 Title 3 · Roboto Medium, 16/22 Design tokeny @honzatmn
53. ? Na analýzu velikostí fontů stačí pár hlavních screenů z produktu @ Definujte škálu nezávisle na barevné paletě, až poté to kombinujte Pár tipů k typografii A Najděte s vývojáři řešení, jak typografickou škálu definovat v kódu Design tokeny je vhodné používat na další hodnoty, např. border radius nebo stíny. @honzatmn
54. Spacing @honzatmn
55. Spacing: 4px @honzatmn
56. @honzatmn
57. UI kit pro Sketch a Figmu @honzatmn
58. @honzatmn
59. b i t . d o /s y m b o l s - t u t o r i a l @honzatmn
60. Udržte symboly ve Sketchi jednoduché @honzatmn
61. Sdílení Sketch kitu v týmu @honzatmn
62. + @honzatmn
63. Sketch Libraries @honzatmn
64. Sketch Libraries + @honzatmn
65. Sketch Libraries + @honzatmn
66. b i t . d o /s k e t c h - s t y l e s @honzatmn
67. Pravidelná komunikace stavu @honzatmn
68. Po vydání každé nové verze si vyhraďte čas na opravy @honzatmn
69. V Ý Z K U M T V O R B A Z Á V Ě R Ú V O D % & ' @honzatmn
70. Co máme dál v roadmapě? @honzatmn
71. Implementace do produktu C O Ř E Š Í M E T E Ď ? @honzatmn
72. Nový vizuální styl Kiwi.com C O Ř E Š Í M E T E Ď ? d e s i g n . k i w i . c o m @honzatmn
73. Dokumentační stránka C O Ř E Š Í M E T E Ď ? atd. @honzatmn
74. Zdroje k dalšímu studiu @honzatmn
75. @honzatmn
76. d e s i g n . s y s t e m s @honzatmn
77. D S c o n f e r e n c e . c o m @honzatmn
78. Díky za pozornost @honzatmn @designkiwicom Těším se na otázky.