👋 Hej
Style guide to zbiór komponentów interfejsu użytkownika połączonych zasadami projektowania. System posiada wytyczne, co do tego, jak powinny wyglądać poszczególne elementy interfejsu typu przyciski, formularze, menu, typografia, linki itd.
Definiuje też ich zachowanie, czyli jak powinien zachować się przycisk po kliknięciu, jak powinien zachować się formularz po wysłaniu itd.
👉 Po co tworzyć style guide?
Te zasady i normy pomagają w szybszym projektowaniu. Dla zespołów projektowych jest to bardzo pomocne, ponieważ w jednym miejscu otrzymują zbiór norm, zasad i wskazówek co do spójności elementów.
O wiele łatwiej jest zachować spójność produktów oraz interfejsów, nawet gdy nad projektem pracuje wielu projektantów. System redukuje niepewność i konieczność ciągłego informowania o zmianach wszystkich członków zespołu.
👉 Jak stworzyć własny style guide?
Jeśli posiadasz już produkt, musisz przejrzeć każdy ekran osobno. Po drodze tworzysz katalog unikalnych elementów, które znajdziesz na poszczególnych ekranach. Najlepiej zacznij od podstaw czyli skataloguj: kolory, fonty, wytyczne typograficzne, ikony, układy.
Następnie utwórz katalog dla elementów projektu jak: przyciski, formularze, listy rozwijane, aktywne linki, menu, przyciski opcji,
akordeony. Równie istotne są kwestie nazewnictwa, jasności i jednoznaczności używanych pojęć.
👉 Kolor
Typowe kolory w systemie projektowania obejmują 1–3 kolory podstawowe, które reprezentują Twoją markę. Możesz chcieć dołączyć szereg odcieni czyli jaśniejsze i ciemniejsze odcienie.
👉 Typografia
Większość systemów projektowania zawiera maksymalnie dwa fonty. Tworząc system ustal, gdzie i kiedy stosować dany font oraz jaka powinna być jego wielkość w danym elemencie.
👉 Obrazy, ikony
Style guide to skrócony plan. Ustal wytyczne dotyczące ilustracji, grafik oraz ikon. Czy ikony powinny być z wypełnieniem czy bez? Jaką wielkość zastosować w menu, a jaką w artykule? Dzięki trzymaniu się zasad, w całym projekcie wszystko będzie spójne.
👉 Czy style guide powinny tworzyć tylko duże firmy?
Podczas tworzenia systemu projektowego, możesz wychwycić wiele różnych elementów, które próbują tworzyć to samo zadanie. Dla przykładu wychwycenie listy rozwijanej oraz przycisków opcji, które służą do tego samego celu, z tym, że na różnych ekranach.
Często też wychwycisz rozbieżności w typografii np. różne wielkości fontu w tym samym nagłówku. Innym częstym błędem jest różny odcień szarości w całym projekcie.
Zobaczysz, że podczas zbierania informacji o elementach, wychwycisz elementy, które wymagają poprawy oraz ujednolicenia.
Dodatkowo utworzony system projektowania pozwoli Ci w późniejszym czasie o wiele szybciej tworzyć kolejne projekty, wystarczy że parę wytycznych i już masz plan na nowy projekt.
👉 Przykłady
Istnieje kilka publicznie dostępnych systemów projektowych znanych marek:
