Design system powinien zawierać w sobie odpowiedzi na pytania „co”, „jak” i „dlaczego”. Wiesz już o tym, jeśli jesteś po lekturze mojego niedawnego wpisu. W dzisiejszym tekście rozwinę ten wątek. Dowiesz się, co składa się na design system, dlaczego właśnie to i wreszcie… jak to wszystko poprawnie wdrożyć. To będzie wstęp do tematu. Na końcu wpisu dowiesz się, gdzie pogłębić swoją wiedzę.

Artykuł jest skrótem wiedzy z 2. lekcji kursu od Figmy na temat design systemu. Dziś również pomaga mi w paru miejscach sztuczna inteligencja. Tym razem występują Google Bard, ChatGPT oraz Copilot. Będziesz wiedzieć, jeśli autorem jakiegoś tekstu będzie AI. Udanej nauki! ?

? Spis treści:

1. Zasady tworzenia design systemu
2. Podstawowe elementy
3. Dokumentacja
4. Procesy
5. Kontynuacja nauki

Zasady tworzenia design systemu

Na początek odpowiedź na to, co kryję się za pytaniem „dlaczego”, o którym pisałam we wstępie. W tym wypadku chodzi o zasady. W design systemie są to główne standardy i podejścia, które odzwierciedlają przekonania i wartości firmy. Jak podkreśla Figma, mocny zbiór zasad kieruje wszystkich w stronę wspólnego celu i pomaga ludziom dojść do porozumienia w przypadku pojawienia się konfliktów.

Do ich stworzenia potrzebujesz pełnej perspektywy biznesowej. Oznacza to konieczność znalezienia odpowiedzi na poniższe pytania:

• Jak firmę reprezentują zespoły ds. marki i marketingu?
• Jak copywriterzy komunikują się z klientami?
• Co się dzieje, kiedy coś idzie nie tak i klienci potrzebują wsparcia?

Figma podaje elementy składowe wzorcowej zasady:

• Definiująca charakterystyka
• Zrozumienie, jak zasada wpływa na doświadczenie klienta i w jaki sposób pomaga w realizacji celów biznesowych
• Jasne przykłady, jak dana zasada sprawdza się na konkretnym przykładzie

Przydatne linki:

• Figma Design Principles
• Headspace design principles
• Design principles workshop

Zasady w design systemie powinny być jasne i oparte na konkretnych wartościach, w które wierzy cały zespół.

Podstawowe elementy

Stanowią one część design systemu odpowiadającą na pytanie „co”. Są blokami, za pomocą których będzie się tworzyć doświadczenie użytkownika. Wśród nich znajdziesz takie rzeczy, jak:

• Style wizualne
• Kolory
• Typografia
• Komponenty
• Wzorce (struktury, zachowania orz konwencje)
• Zasady dostępności (wysoki priorytet)

Z racji tego, że niepełnosprawność może być zarówno trwała, jak czasowa i sytuacyjna, należy poświęcić odpowiednio dużo uwagi dostępności produktu. Dzięki temu twoi użytkownicy nie będą się czuli ignorowani.

Kolorystyka

Kolor pełni wiele funkcji na świecie i ma również swoją konkretną rolę w projektowaniu. Dzięki niemu możesz stworzyć odpowiednią hierarchię elementów wizualnych lub afordancje.

⭐️ Najważniejsze zasady z kursu:

• Efektywna paleta kolorystyczna powinna składać się z kilku kolorów. Zbyt wiele wprowadzi chaos, a z kolei za mało ograniczy elastyczność w projekcie.
• Powyższe może być szczególnie istotne w przypadku tworzenia trybu ciemnego i jasnego.
• Aby stworzyć zrównoważoną paletę kolorów, ważne jest, aby ocenić kolory pod kątem funkcji wymaganych przez system.

? Zasady sugerowane przez ChatGPT 3.5:

1. Spójność kolorów:
   • Wybierz ograniczoną paletę kolorów, która pasuje do identyfikacji wizualnej marki.
   • Zdefiniuj główne kolory, akcenty i kolory tła, aby uniknąć chaosu w projektach.
2. Zasada 60-30-10:
   • Używaj głównego koloru (60%) jako dominującego elementu.
   • Drugi kolor (30%) powinien wspierać główny, dodając kontrast i zrównoważenie.
   • Trzeci kolor (10%) może być używany do akcentowania i dodawania życia.
3. Dostosowanie do różnych interakcji:
   • Ustal kolor lub zestaw kolorów dla interakcji użytkownika, takich jak przyciski, linki czy hover states.
   • Unikaj używania kolorów, które mogą być mylące dla użytkowników, na przykład używając czerwonego koloru dla pozytywnych działań.
4. Kontrast i czytelność:
   • Upewnij się, że tekst jest zawsze czytelny na tle, stosując odpowiedni kontrast.
   • Używaj kontrastowych kolorów dla istotnych elementów, aby przyciągnąć uwagę użytkowników.
5. Dostosowanie do różnych środowisk:
   • Zapewnij, że kolorystyka jest dostosowana do różnych platform i urządzeń, tak aby zachować spójność w różnych środowiskach.
6. Uwzględnienie dostępności:
   • Zastosuj zasady dostępności, takie jak WCAG, aby zapewnić, że design system jest dostępny dla wszystkich użytkowników, w tym osób z różnymi dysfunkcjami wzroku.
7. Zdefiniuj znaczenia kolorów:
   • Przypisz znaczenia kolorom, na przykład używając zielonego dla działań pozytywnych, czerwonego dla ostrzeżeń itp.
8. Testowanie na różnych ekranach:
   • Upewnij się, że kolorystyka działa dobrze na różnych rodzajach ekranów, zarówno na monitorach komputerowych, jak i na urządzeniach mobilnych.
9. Ustal standardy dla gradientów:
   • Jeśli używasz gradientów, zdefiniuj standardy ich kierunku i intensywności, aby utrzymać spójność.
10. Aktualizuj zgodnie z trendami:
    • Bądź świadomy aktualnych trendów w kolorystyce, ale nie zapomnij, że głównym celem jest utrzymanie spójności z marką.

? Zasady sugerowane przez Google Bard:

Najważniejsze zasady dotyczące kolorystyki podczas tworzenia design systemu to:

• Konsekwencja – kolorystyka powinna być spójna w całym systemie. Dzięki temu użytkownik będzie mógł łatwo się w nim odnaleźć i zapamiętać, co oznaczają poszczególne kolory.
• Widoczność – kolorystyka powinna być czytelna i łatwa do odczytania. Należy unikać jaskrawych kolorów, które mogą być męczące dla wzroku.
• Działanie – kolorystyka powinna być funkcjonalna i wspierać użytkownik w wykonywaniu zadań. Na przykład, kolory mogą być używane do rozróżniania różnych elementów interfejsu lub do wskazywania, gdzie użytkownik powinien skupić swoją uwagę.

Oprócz tych ogólnych zasad, warto pamiętać o następujących kwestiach:

• Znaczenie kolorów – kolory są często kojarzone z określonymi emocjami lub znaczeniami. Należy wziąć to pod uwagę przy wyborze kolorów dla design systemu.
• Odbiorcy – kolorystyka powinna być dostosowana do odbiorców systemu. Na przykład, dla osób starszych lub z problemami wzroku należy wybierać kolory o dużej kontraście.
• Środowisko – kolorystyka powinna być dostosowana do środowiska, w którym będzie używany system. Na przykład, dla aplikacji mobilnych, które będą używane w jasnym słońcu, należy wybierać kolory o dużej nasycenia.

Przykłady zastosowania kolorów w design systemie:

• Kolory podstawowe – kolory podstawowe (czerwony, niebieski, zielony) mogą być używane do wyróżnienia najważniejszych elementów interfejsu.
• Kolory uzupełniające – kolory uzupełniające (przeciwstawne sobie na kole barw) mogą być używane do tworzenia kontrastu i podkreślenia ważnych elementów.
• Kolory neutralne – kolory neutralne (czarny, biały, szary) mogą być używane jako tło lub do tworzenia harmonii w interfejsie.

Przykładowe zastosowania kolorów w design systemie Google:

• Kolor podstawowy – kolorem podstawowym w design systemie Google jest kolor niebieski. Jest on używany do wyróżnienia najważniejszych elementów interfejsu, takich jak logo, przyciski i linki.
• Kolory uzupełniające – kolorami uzupełniającymi w design systemie Google są kolory czerwony i zielony. Są one używane do tworzenia kontrastu i podkreślenia ważnych elementów.
• Kolory neutralne – kolorami neutralnymi w design systemie Google są kolory czarny i biały. Są one używane jako tło lub do tworzenia harmonii w interfejsie.

Typografia

Dobrze określona typografia zapewnia spójność, osobowość marki oraz czytelność treści w ramach całego produktu.

⭐️ Najważniejsze wskazówki z kursu:

• Lekcja, która pomoże tobie dobrać odpowiednią typografię: Typography guides – designsystems.com
• Określ skalę czcionek. To zbiór rozmiarów i stylów tworzących system czcionek. Zaczyna się od podstawowego rozmiaru tekstu, często 16 pikseli, i wcześniej określonego współczynnika skali. Celem jest stworzenie harmonijnego zestawu rozmiarów czcionek.
• Dobrym punktem wyjścia jest użycie popularnego współczynnika skali. Możesz wykorzystać the major third lub the perfect fourth.
• Jeśli używasz systemu siatek, na przykład 8-punktowej siatki bazowej, spróbuj zaokrąglić wielkość czcionki do najbliższej liczby całkowitej będącej wielokrotnością 8.
• Nie ma ograniczeń co do liczby rozmiarów, które można uwzględnić w skali pisma. Jeśli jednak masz zbyt wiele rozmiarów czcionek, kuszące może być użycie ich w niewłaściwy sposób.
• Zwróć szczególną uwagę na:
  • Jak odstępy między literami wpływają na gęstość lub czytelność?
  • Jak grubość czcionki wpływa na hierarchię?
  • Jaka wysokość linii ma sens w przypadku nagłówków versus tekstu podstawowego?

? Zasady sugerowane przez ChatGPT 3.5:

1. Spójność czcionek:
   • Wybierz ograniczoną liczbę czcionek (najlepiej dwie: jedną dla nagłówków, drugą dla treści), aby utrzymać spójność w całym systemie.
2. Hierarchia tekstu:
   • Używaj różnych rozmiarów i wag czcionek, aby wyraźnie zaznaczyć hierarchię treści. Nagłówki powinny być wyraźnie odróżnione od treści.
3. Skalowalność:
   • Upewnij się, że czcionki są skalowalne i zachowują czytelność nawet przy różnych rozmiarach ekranów.
4. Przestrzeń między znakami:
   • Ustal odpowiednią przestrzeń między znakami (tracking) i międzywyrazową (kerning), aby poprawić czytelność i estetykę tekstu.
5. Długość linii tekstu:
   • Kontroluj długość linii tekstu, aby uniknąć zbyt szerokich lub zbyt wąskich bloków tekstu. Optymalna długość to około 50-75 znaków na linię.
6. Dostosowanie do różnych formularzy:
   • Dostosuj styl czcionek do różnych formularzy, takich jak nagłówki, akapity, cytaty, aby zachować spójność i zróżnicowanie.
7. Zasady dostępności:
   • Dbaj o czytelność tekstu dla osób z różnymi dysfunkcjami wzroku. Wybieraj kontrastowe kombinacje kolorów i unikaj zbyt cienkich linii.
8. Wybór czcionek zgodnych z marką:
   • Wybieraj czcionki, które odzwierciedlają charakter i osobowość marki, jednocześnie zapewniając czytelność.
9. Zdefiniuj styl elementów interaktywnych:
   • Określ, jakie czcionki będą używane w interaktywnych elementach, takich jak przyciski czy pola tekstowe.
10. Testowanie na różnych urządzeniach:
    • Upewnij się, że typografia działa dobrze na różnych urządzeniach, od komputerów stacjonarnych po urządzenia mobilne.
11. Używanie czcionek zgodnych z trendami:
    • Bądź świadomy aktualnych trendów w dziedzinie typografii, ale stosuj je z umiarem, aby nie stracić spójności z marką.
12. Dokładność odstępów między liniami:
    • Kontroluj odstępy między liniami, aby tekst był czytelny i estetyczny. Optymalne odstępy zależą od wybranej czcionki i jej rozmiaru.

? Zasady sugerowane przez Google Bard:

Zasady dotyczące typografii podczas tworzenia design systemu:

• Konsekwencja – typografia powinna być spójna w całym systemie. Dzięki temu użytkownik będzie mógł łatwo się w nim odnaleźć i zapamiętać, jak wyglądają poszczególne elementy tekstowe.
• Czytelność – typografia powinna być łatwa do odczytania. Należy wybierać kroje czcionek, które mają odpowiednią wielkość, odstępy między literami i wyrazami oraz kontrast między kolorem czcionki a tłem.
• Funkcjonalność – typografia powinna być funkcjonalna i wspierać użytkownika w wykonywaniu zadań. Na przykład, można używać różnych krojów czcionek do rozróżniania różnych elementów interfejsu lub do wskazywania, gdzie użytkownik powinien skupić swoją uwagę.

Oprócz tych ogólnych zasad, warto pamiętać o następujących kwestiach:

• Odbiorcy – typografia powinna być dostosowana do odbiorców systemu. Na przykład, dla osób starszych lub z problemami wzroku należy wybierać kroje czcionek o dużej czytelności.
• Środowisko – typografia powinna być dostosowana do środowiska, w którym będzie używany system. Na przykład, dla aplikacji mobilnych, które będą używane na małych ekranach, należy wybierać kroje czcionek o dużej gęstości.

Przykłady zastosowania typografii w design systemie:

• Krój czcionki – do tekstu podstawowego można wybrać krój czcionki o regularnej grubości i szerokości, taki jak Arial lub Helvetica. Do nagłówków można wybrać krój czcionki o szerszej szerokości, taki jak Roboto lub Open Sans.
• Rozmiar czcionki – rozmiar czcionki powinien być dostosowany do wielkości ekranu i odległości, z jakiej użytkownik będzie patrzył na tekst.
• Odstępy – należy zachować odpowiednie odstępy między literami, wyrazami i wierszami tekstu. Dzięki temu tekst będzie bardziej czytelny i łatwy do odczytania.
• Kolor – kolor czcionki powinien mieć odpowiedni kontrast z tłem. Dzięki temu tekst będzie łatwy do odczytania.

Przykładowe zastosowania typografii w design systemie Google:

• Krój czcionki – do tekstu podstawowego w design systemie Google używany jest krój czcionki Roboto. Jest to krój czcionki o regularnej grubości i szerokości, który jest łatwy do odczytania na różnych urządzeniach i rozdzielczościach.
• Rozmiar czcionki – rozmiar czcionki w design systemie Google jest dostosowany do wielkości ekranu. Na małych ekranach, takich jak ekrany smartfonów, używany jest mniejszy rozmiar czcionki, aby tekst był nadal czytelny.
• Odstępy – w design systemie Google zachowane są odpowiednie odstępy między literami, wyrazami i wierszami tekstu. Dzięki temu tekst jest bardziej czytelny i łatwy do odczytania.
• Kolor – kolor czcionki w design systemie Google jest czarny, aby mieć odpowiedni kontrast z białym tłem.

Poziomy

Poziomy w design systemie zapewniają odpowiednią hierarchię oraz odstępy. Do tworzenia poziomów wykorzystuje się takie elementy, jak kolory, cienie, przejrzystość, warstwy.

⭐️ Najważniejsze wskazówki z kursu:

• Zwróć uwagę na to, gdzie i kiedy stosujesz poziomy – i czy w ogóle go używasz.
• Jeśli projektujesz aplikację mobilną, dodanie stanów najechania do obiektów może nie być najlepszym rozwiązaniem, ponieważ użytkownicy nie mają możliwości najechania kursorem na urządzenia z ekranem dotykowym.
• Dodając cienie, unikaj używania prawdziwej czerni, ponieważ może to sprawić, że projekty będą wyglądać na błotniste i matowe. Zamiast tego użyj ciemniejszej wartości koloru z systemu kolorów, aby pasował do reszty projektu.

? Zasady sugerowane przez ChatGPT 3.5:

1. Zdefiniuj hierarchię:
   • Określ jasną hierarchię elementów w zależności od ich znaczenia i roli w interfejsie użytkownika.
2. Użyj spójnych wartości:
   • Ustal spójne wartości elevation dla poszczególnych warstw, aby utrzymać jednolity wygląd systemu.
3. Podkreśl znaczące elementy:
   • Podnieś elevation dla kluczowych elementów, takich jak nagłówki, przyciski akcji czy karty, aby przyciągały uwagę użytkownika.
4. Unikaj nadmiernego użycia:
   • Nie nadużywaj różnych poziomów elevation, aby uniknąć dezorientacji użytkownika i utrzymania spójności.
5. Zastosuj subtelne przejścia:
   • Stosuj subtelne przejścia między poziomami, aby uniknąć nagłych zmian, co może wpływać na doświadczenie użytkownika.
6. Zróżnicuj elementy interaktywne:
   • Używaj różnych poziomów elevation dla interaktywnych elementów, takich jak przyciski czy pola tekstowe, aby podkreślić ich dostępność.
7. Dostosuj do kontekstu:
   • Dostosuj elevation do kontekstu, na przykład podnosząc elementy, które są aktywne lub związane z interakcjami użytkownika.
8. Uwzględnij dostępność:
   • Upewnij się, że kontrast między elementami o różnych poziomach jest wystarczający dla osób z różnymi poziomami widzenia.
9. Testuj na różnych urządzeniach:
   • Zweryfikuj, czy elevation działa poprawnie na różnych urządzeniach, od komputerów stacjonarnych po urządzenia mobilne.
10. Korzystaj z narzędzi do prototypowania:
    • Wykorzystaj narzędzia do prototypowania, aby zobaczyć, jak elevation wpływa na interakcje i ruchy w czasie rzeczywistym.
11. Dokładnie opisz wartości elevation:
    • Dla większej klarowności, opisz wartości elevation, na przykład jako „niski”, „średni”, „wysoki”, zamiast używać bezwzględnych liczbowych wartości.
12. Bądź elastyczny:
    • Zadbaj o elastyczność w stosowaniu elevation, aby móc dostosować się do różnych kontekstów projektowych.

? Zasady sugerowane przez Google Bard:

1. Ustal spójną hierarchię elementów. Poziomy elementów powinny być spójne w całym systemie. Dzięki temu użytkownik będzie mógł łatwo się w nim odnaleźć i zrozumieć, co oznaczają poszczególne poziomy.
2. Uwzględnij funkcjonalność elementów. Poziomy elementów powinny być funkcjonalne i wspierać użytkownika w wykonywaniu zadań. Na przykład, elementy o wyższym poziomie mogą być bardziej interaktywne lub ważniejsze niż elementy o niższym poziomie.
3. Uwzględnij widoczność elementów. Poziomy elementów powinny być widoczne i łatwe do odczytania. Należy wybierać poziomy, które będą dobrze widoczne na różnych urządzeniach i rozdzielczościach.
4. Uwzględnij odbiorców systemu. Poziomy elementów powinny być dostosowane do odbiorców systemu. Na przykład, dla osób starszych lub z problemami wzroku należy wybierać poziomy, które będą dobrze widoczne.
5. Uwzględnij środowisko, w którym będzie używany system. Poziomy elementów powinny być dostosowane do środowiska, w którym będzie używany system. Na przykład, dla aplikacji mobilnych, które będą używane na małych ekranach, należy wybierać poziomy, które będą dobrze widoczne z bliska.
6. Uwzględnij skalowalność elementów. Poziomy elementów powinny być skalowalne, aby można było je łatwo dostosować do różnych urządzeń i rozdzielczości.
7. Uwzględnij kontrast elementów. Poziomy elementów powinny zapewniać odpowiedni kontrast z tłem, aby były dobrze widoczne.
8. Uwzględnij spójność z innymi elementami systemu. Poziomy elementów powinny być spójne z innymi elementami systemu, takimi jak kolory, typografia i rozmiary.
9. Uwzględnij spójność z innymi design systemami. Jeśli projektujesz design system, który będzie współpracował z innymi systemami, należy uwzględnić spójność z tymi systemami.
10. Uwzględnij testowanie użytkowników. Najlepszym sposobem sprawdzenia, czy poziomy elementów są odpowiednie, jest przetestowanie ich z użytkownikami.

Dodatkowe wskazówki:

• Używaj nomenklatury, która jest jasna i łatwa do zrozumienia. Na przykład, możesz używać poziomów 1-5, gdzie 1 oznacza najniższy poziom, a 5 najwyższy.
• Utwórz dokument, który opisze Twoją hierarchię poziomów. Dokument ten powinien zawierać informacje o tym, jakie elementy mają jaki poziom i dlaczego.
• Regularnie przeglądaj swoją hierarchię poziomów i dostosowuj ją w razie potrzeby. Z biegiem czasu możesz odkryć, że niektóre poziomy są niepotrzebne lub że należy je zmienić.

Ikonografia

Dobrze zaprojektowana kolekcja ikon pomoże wzmocnić identyfikację i charakter marki. Jakie wskazówki w tym obszarze przekazuje Figma oraz sztuczna inteligencja? ?

⭐️ Najważniejsze wskazówki z kursu:

• Ikony powinny być funkcjonalne i rozpoznawalne. Pomagają użytkownikom zrozumieć produkty cyfrowe i wchodzić w interakcję z nimi.
• Ikona, której funkcja nie będzie zrozumiana przez użytkowników, nie będzie efektywna.
• Nie musisz wymyślać koła na nowo – korzystaj z rozpoznawalnych znaków, które są zrozumiałe dla większości użytkowników.
• Jeśli zastosujesz dobrze zrozumiałą strukturę nazewnictwa, możesz mieć pewność, że ikony w design systemie będą łatwe do znalezienia i użycia.
• Kompletny przewodnik dotyczący ikonografii w design systemie.
• Budując system, upewnij się, że ikony mają spójny rozmiar. Dotyczy to samej ikony, jej pojemnika i wszelkich dopełnień.

? Wskazówki od ChatGPT 3.5:

1. Jasność i prostota:
   • Twórz ikony, które są jasne, proste i łatwe do zrozumienia. Unikaj nadmiernych detali, aby zachować czytelność nawet w mniejszych rozmiarach.
2. Spójność stylu:
   • Utrzymuj spójny styl ikon we wszystkich elementach design systemu, aby uniknąć chaotycznego wyglądu. Wybierz jednolitą estetykę, np. płaską, minimalistyczną czy realistyczną.
3. Skalowalność:
   • Projektuj ikony w sposób, który umożliwia łatwą skalowalność bez utraty jakości. To jest szczególnie ważne w kontekście różnych rozmiarów ekranów i urządzeń.
4. Znaczenie i jednoznaczność:
   • Upewnij się, że ikony są jednoznaczne i łatwo zrozumiałe dla użytkowników. Staraj się używać powszechnie akceptowanych symboli, aby uniknąć nieporozumień.
5. Dostosowanie kolorów:
   • Jeśli ikony zawierają kolory, dostosuj je do palety kolorów design systemu. Unikaj nadmiernie jaskrawych kolorów i zapewnij kontrast, aby zachować czytelność.

? Wskazówki od Google Bard:

• Użyj ikon, które są proste i łatwe do zrozumienia. Ikony powinny być łatwe do zapamiętania i rozpoznania, nawet przez użytkowników, którzy nie są zaznajomieni z systemem.
• Użyj ikon, które są spójne w całym systemie. Ikony powinny mieć taki sam styl i format, aby użytkownik mógł łatwo je rozpoznać.
• Użyj ikon, które są skalowalne i responsywne. Ikony powinny być łatwe do dostosowania do różnych urządzeń i rozdzielczości.
• Użyj ikon, które są dostępne dla osób niepełnosprawnych. Ikony powinny być dostępne dla osób z niepełnosprawnościami wzroku lub innymi ograniczeniami.
• Testuj ikony z użytkownikami. Najlepszym sposobem sprawdzenia, czy ikony są odpowiednie, jest przetestowanie ich z użytkownikami.

Dodatkowe wskazówki:

• Użyj systemu kategoryzacji ikon. System kategoryzacji pomoże Ci uporządkować ikony i ułatwi Ci ich znalezienie.
• Utwórz przewodnik po ikonografii. Przewodnik po ikonografii powinien zawierać informacje o tym, jak używać ikon w systemie.
• Regularnie aktualizuj ikonografię. Z biegiem czasu możesz odkryć, że niektóre ikony są niepotrzebne lub że należy je zmienić.

System odstępów

Struktura i harmonia w projektach jest tworzona głównie przez odstępy, a konkretnie przez siatkę, układ oraz odległości pomiędzy poszczególnymi elementami. Bez tego ciężko o przyjazny i użyteczny produkt. Jakie są najważniejsze rzeczy, o których trzeba pamiętać?

→ Układ (layout):

• Projekty muszą być dostosowane do różnych ekranów w taki sposób, w jaki ludzie oczekują.
• O tym, kiedy zmienia się układ, decydują często tzw. breakpointy, czyli konkretny rozmiar ekranu. Mogą to być na przykład następujące wartości: poniżej 768 px, powyżej 1280 px, pośredni o szerokości 1024 px.
• Przy rosnącej liczbie urządzeń trudno zdefiniować listę breakpointów. Odpowiedzią na ten problem są responsywne projekty.
• Responsywne, płynne układy pozwalają treści rosnąć, kurczyć się i zmieniać w zależności od zmian na ekranie lub rozmiarze widocznego obszaru.

→ Siatka (grid):

• Systemy siatek zapewniają elementom stały rozmiar, wyrównanie i odstępy. Najpopularniejsze formaty siatek obejmują siatki kolumnowe, bazowe i modułowe.
• Liczba kolumn jest zazwyczaj różna dla poszczególnych rozmiarów urządzeń. Urządzenie mobilne może wykorzystywać 4 kolumny, podczas gdy ekran komputera stacjonarnego może wykorzystywać aż 12.
• Przestrzeń wokół krawędzi nazywana jest marginesem, a każda przestrzeń pomiędzy kolumnami jest prześwitem (gutter).
• Za pomocą siatki 8-punktowej umieszczasz elementy względem linii bazowej. Pionowe odstępy między elementami są zawsze podzielne przez 8. Np. 8, 16, 24, 32 i tak dalej.
• Siatka bazowa powinna również odgrywać rolę w definiowaniu systemu czcionek. Tekst w projekcie powinien mieć rozmiar i wysokość linii podzielną przez 8 lub adekwatny do rozmiaru siatki bazowej.

→ Odstępy (spacing):

• Odstępy pomagają ustalić hierarchię i relacje między obiektami.
• Odstępy oznaczają „negatywną przestrzeń” wokół elementów.
• Większość systemów działa w oparciu o rozmiar podstawowy, który obejmuje dodatkowe opcje odstępów wykorzystujących podstawę jako mnożnik.
• Trudno będzie stworzyć 8-punktową jednostkę podstawową dla systemu odstępów, która będzie działać z podstawowym stylem czcionki 15 i wysokością linii 20. Dlatego ważne jest, aby wziąć pod uwagę inne skale używane w systemie projektowym.
• Więcej na stronie desigsystem.com.

Wzorce

Figma wyjaśnia, że wzorce to rozwiązania typowych problemów lub celów użytkownika, które można ponownie wykorzystać w produkcie.

→ Porady od Figmy:

• Aby zidentyfikować wzorce występujące już w produkcie, przeprowadź audyt całego systemu i udokumentuj swoje ustalenia. Jakie przepływy użytkowników i cele zdarzają się najczęściej?
• Jeśli nie masz danych, spróbuj przeprowadzić badania użytkowników ze swoimi klientami, aby uzyskać ich opinie. Następnie dokładnie udokumentuj zwycięskie wzorce.

? Proces mapowania wzorców według Google Bard:

Można go podzielić na następujące kroki:

1. Identyfikacja: Zidentyfikuj wzorce, które mogą być wykorzystane w projektowaniu interfejsów użytkownika.
2. Opis: Opisz wzorce, zawierając nazwę wzoru, opis wzoru, ilustrację wzoru i zastosowania wzorców.
3. Klasyfikacja: Klasyfikuj wzorce w zależności od ich funkcji lub zastosowania.
4. Dostosowanie: Dopasuj wzorce do konkretnych potrzeb projektu.
5. Wdrożenie: Wdroży wzorce w systemie projektowania.

Mapowanie wzorców w systemie projektowania jest procesem, który wymaga czasu i uwagi. Jednak jest to proces, który może przynieść znaczne korzyści w zakresie spójności i wydajności projektowania interfejsów użytkownika.

Oto kilka dodatkowych wskazówek dotyczących mapowania wzorców w systemie projektowania:

• Użyj standardowej terminologii wzorców, aby ułatwić współpracę i zrozumienie.
• Upewnij się, że wzorce są prawidłowo zdokumentowane, aby można było je łatwo odnaleźć i zrozumieć.
• Regularnie aktualizuj i dostosowuj wzorce w zależności od potrzeb projektu.

? Przykłady wzorców podane przez Copilot:

• Wzorzec strategia: Pozwala na definiowanie rodziny algorytmów, które są wymienne i mogą być wybierane w zależności od kontekstu. Przykładem użycia tego wzorca jest np. zmiana sposobu sortowania lub filtrowania danych w tabeli.
• Wzorzec dekorator: Pozwala na dodawanie nowych funkcjonalności do istniejących obiektów bez konieczności modyfikowania ich kodu. Przykładem użycia tego wzorca jest np. dodawanie ikon, etykiet, czy animacji do elementów interfejsu użytkownika.
• Wzorzec fasada: Pozwala na uproszczenie i ujednolicenie dostępu do złożonego systemu poprzez dostarczenie jednego interfejsu. Przykładem użycia tego wzorca jest np. tworzenie warstwy abstrakcji między komponentami interfejsu a logiką biznesową.
• Wzorzec fabryka: Pozwala na tworzenie obiektów bez ujawniania szczegółów ich konstrukcji. Przykładem użycia tego wzorca jest np. tworzenie obiektów reprezentujących różne typy elementów interfejsu użytkownika.

Więcej informacji i przykładów o wzorcach projektowych można znaleźć na następujących stronach:

• Wzorce projektowe przykłady – Za Warstwą Abstrakcji
• Wzorzec projektowy Factory (Fabryka) – devszczepaniak.pl
• Wzorzec projektowy (informatyka) – Wikipedia, wolna encyklopedia

Dokumentacja

Przypomnienie: design system powinien odpowiadać na pytania, co, dlaczego i jak. Na koniec właśnie ten ostatni element, czyli jaki jest cel wszystkich aspektów design systemu i jak je wdrożyć.

→ Różne style dokumentacji:

• Adnotacje na obszarze roboczym dla komponentów w plikach projektowych
• Opis danego komponentu bezpośrednio w Figmie
• Struktura nazewnictwa w bibliotece lub bazie kodu
• Artykuły i przewodniki
• Dedykowane strony i narzędzia

Wybór stylu dokumentacji zależy oczywiście od grupy odbiorców i od jej potrzeb.

→ Wskazówki dotyczące dokumentacji:

• Upewnij się, że Twoja dokumentacja jest dokładna i kompletna. Im lepiej będzie zrobiona, tym będzie bardziej skuteczna.
• Wczuj się w osobę, która nigdy nie widziała danego elementu i zadaj sobie pytania:
  • Dlaczego z tego korzystają?
  • Co muszą wiedzieć, żeby osiągnąć swoje cele?
  • Jakie pytania mogą się pojawić na ich drodze?
• Unikaj żargonu i skomplikowanego słownictwa. Jeśli musisz wprowadzić nowy termin, wyjaśnij go.
• Spróbuj zwizualizować to, co piszesz. Metafory i analogie mogą być pomocnym narzędziem w tym zadaniu.
• Poproś o feedback od zespołu – dowiedz się, co możesz zrobić lepiej.
• Zapytaj o opinię osoby spoza kontekstu lub mniejszym doświadczeniem – sprawdź, czy dla nich wszystko będzie wystarczająco jasne.

Nazewnictwo

Figma podkreśla, że system nazewnictwa ułatwia znajdowanie, zrozumienie i zastosowanie elementów w design systemie.

→ Najważniejsze wskazówki:

• Korzystaj z semantycznego nazewnictwa.
• Poziomy w nazewnictwie: kategoria obiektu (np. przycisk), zastosowanie (np. secondary, primary), wariacje (np. default, pressed).
• W Figmie warto wykorzystywać w nazwie ukośniki. Proponowana konwencja nazewnictwa: Category / Use / Variation.
• Możesz stosować różne sposoby zapisu liter:
  • Title Case
  • Sentence case
  • underscore_case
  • camelCase
• W programowaniu często wykorzystuje się nazewnictwo uderscore_case lub camelCase.
• Zapytaj swój zespół o to, jaki sposób zapisu będzie najlepszy.

? Wskazówki do Copilot:

• Używaj jasnych i opisowych nazw, które odzwierciedlają funkcję i wygląd komponentu. Na przykład: button/primary, icon/search, layout/header.
• Używaj ukośnika (/) do tworzenia kategorii i podkategorii komponentów. Na przykład: button/primary, button/secondary, button/tertiary. Figma automatycznie utworzy nadrzędną kategorię o nazwie button, która ułatwi zamianę instancji i eksport.
• Używaj konwencji nazewnictwa, która jest spójna z innymi członkami zespołu lub systemem projektowym. Na przykład: jeśli używasz nazw kolorów, takich jak red, green, blue, używaj ich również w nazwach komponentów, takich jak button/red, button/green, button/blue.
• Unikaj używania nazw, które są zbyt ogólne lub zbyt szczegółowe. Na przykład: unikaj nazwania komponentu button, ponieważ nie mówi to nic o jego roli lub stylu. Z drugiej strony, unikaj nazwania komponentu button/primary/rounded/blue/with-shadow, ponieważ jest to zbyt długie i skomplikowane.

Jeśli chcesz dowiedzieć się więcej o komponentach w Figmie, możesz sprawdzić te źródła:

• Przewodnik po komponentach w Figmie – oficjalny artykuł pomocy Figma, który wyjaśnia, jak tworzyć, używać i zarządzać komponentami.
• Figma: Wszystko, co musisz wiedzieć – kompleksowy samouczek dla początkujących, który pokazuje, jak korzystać z Figma, w tym z komponentów. Zawiera również porady dotyczące importowania plików Sketch do Figma.
• Ogarnij w końcu właściwości komponentów w Figmie – film na YouTube, który pokazuje, jak korzystać z zaawansowanych właściwości komponentów, takich jak zmienne, przełączniki i warstwy nakładkowe.

Procesy

Ostatni ważny element składowy design systemu, czyli procesy. Określają mechanikę i sposób zarządzania design systemem. Odpowiadają na pytania:

• Jak wprowadzać aktualizacje w systemie i dzielić się nimi z innymi?
• Jak udzielać informacji zwrotnej i w jaki sposób to robić?
• Jak współpracować z różnymi zespołami?
• Jak zapewnić szkolenie nowym członkom zespołu?
• i wiele więcej…

Procesy pomogą w skutecznym rozwijaniu design systemu i warto je określić już na początku drogi.

Ostatnia ważna rzecz, na którą zwraca Figma, to współpraca z developerami, która pomoże w rozwoju design systemu (a tym samym w rozwoju produktu). Rzeczy, które należy wziąć pod uwagę:

• Zaangażuj developerów w sesje krytyki zanim zakończysz projektowanie produktu.
• Konsultuj z developerami tworzenie nowych komponentów, żeby były dopasowane do kodu.
• Naucz się dostrzegać ograniczenia. Współpracuj z developerami, aby zrozumieć bazę kodu i sposób, w jaki wszystko działa.
• Zapoznaj się z wymaganiami technicznymi i ograniczeniami zasobów, z którymi pracujesz.

Na koniec porcja porad od sztucznej inteligencji, w tym wypadku ponownie od Copilot:

• Zrozum cele i ograniczenia projektu, takie jak budżet, termin, zakres funkcjonalności, wymagania techniczne i jakościowe.
• Komunikuj się jasno i często, używając odpowiednich narzędzi i kanałów, takich jak Figma, Slack, GitHub, Trello, itp.
• Ustalcie wspólne standardy i konwencje, takie jak nazewnictwo komponentów, formatowanie kodu, dokumentacja, testowanie, itp.
• Szanuj rolę i ekspertyzę każdego członka zespołu, unikaj mikrozarządzania i nadmiernego krytykowania.
• Wspierajcie się nawzajem, dzielicie wiedzą i feedbackiem, rozwiązujcie problemy i konflikty w konstruktywny sposób.
• Uczestnicz w regularnych spotkaniach i sesjach brainstormingowych, aby omawiać postępy, wyzwania i pomysły na ulepszenia produktu.

---

Kontynuacja nauki

To nie koniec lekcji od Figmy. Możesz przejść do kolejnych lub cofnąć się do pierwszej ⤵️

• Wprowadzenie do design systemu: lekcja w formie tekstowej i w formie wideo.
• Tworzenie design systemu: lekcja w formie tekstowej i w formie wideo.
• Dokumentacja i zarządzanie systemem: lekcja w formie tekstowej i w formie wideo.
• O tokenach, wariantach i stylach: lekcja w formie tekstowej i w formie wideo.
• Na mojej stronie znajdziesz też notatki z pierwszej lekcji kursu od Figmy.
• Jeszcze więcej wskazówek na stronie designsystems.com.