W design system Product Designerzy dokumentują swój własny proces myślowy, podczas projektowania witryny internetowej i aplikacji. Dla kogo dedykowany jest design system? W tym artykule znajdziecie odpowiedzi na wszystkie pytania oraz wskazówki dla projektantów UI — jak efektywnie stworzyć design system.
Design system to dokument, w którym projektanci UI wizualizują i opisują wytyczne projektowe, które wynikają z całego procesu projektowego. Dzięki temu wdrożenie jest szybsze i łatwiejsze. Design system pozwala projektować komponenty bardziej spójne i trzymać porządek w projektach.
W niektórych przypadkach design system ma służyć jedynie jako źródło wytycznych dla zespołu developerskiego, który będzie mógł wdrożyć spójny projekt tworzonego produktu cyfrowego. Jednak jest on też ułatwieniem dla samych projektantów, którzy podczas pracy nad dużymi projektami mogą w każdej chwili skorzystać z design systemu i szybko przypomnieć sobie, jak wyglądają i zachowują się komponenty.
Kolory oraz typografia strony internetowej lub aplikacji to jedne z pierwszych elementów, które zostają określone na początkowym etapie projektowania wizualnego.
W zależności od tego ile kolorów chce się umieścić w style guide, sekcja z paletą kolorów może zawierać kolory główne i uzupełniające. Określając paletę kolorów podstawowych, należy zastosować ją do wszystkich komponentów, m.in.:
Ważne jest również zdefiniowanie kolorów elementów systemowych, które pokazują np. ostrzeżenia, błędy, informacje.
Na początkowym etapie prac projektowych można dać się ponieść fantazji i określić kolory tekstowe nieadekwatne do całości projektu. Warto określić kolory do następujących typów tekstów:
Ogranicz paletę kolorów do maksymalnie trzech lub czterech kolorów. To sprawi, że projekt nie tylko będzie spójny i estetyczny, ale także zmniejszy nakłady finansowe w trakcie programowania CSS witryny.
Podczas projektowania typografii należy upewnić się, że czcionka jest czytelna i estetyczna na różnych platformach. Wymaga to wszechstronnej znajomości wszystkich urządzeń i platform, na których będzie używana Twoja witryna lub aplikacja.
Aby czcionka była czytelna, należy stosować czcionkę w rozmiarze nie mniejszym niż 12-14 punktów.
Kluczowe punkty, o których należy pamiętać podczas projektowania typografii:
Niezależnie czy pracujesz sam, czy w zespole projektantów, konieczne jest określenie warunków rozmiarów dotyczących odstępów i układu witryny lub aplikacji.
Nie ma gotowych i twardych zasad określania wymiarów poszczególnych elementów interfejsu. Mimo to warto na samym początku je dokładnie określić, aby zachować spójność projektu.
Wiele platform udostępnia poradniki dla programistów, w których sugerują określone odstępy, marginesy i wypełnienia elementów interfejsu np: https://material.io/design/layout/spacing-methods.html#spacing
Każdy projektant powinien mieć przynajmniej podstawową wiedzę na temat zasad użyteczności i ergonomii wizualnej. Warto definiować elementy interfejsu użytkownika w przynajmniej trzech rozmiarach: małym, średnim i dużym.
Każdy z tych rozmiarów można przypisać do innego typu przycisku w zależności od wagi wizualnej. Przykładowo przycisk “Kup teraz” jest ważniejszy (ma większą wagę wizualną), więc musi być większy od uzupełniającego przycisku „Opinie”.
Projektując dotykowy interfejs użytkownika, należy określić odpowiednią szerokość i wysokość elementów, aby przyciski były łatwe w użytkowaniu. Minimalny zalecany rozmiar komponentów interaktywnych wynosi 40x40pt.
Design system dedykowany jest programistom, który korzystają z dokumentu podczas wdrażania projektu interfejsu oraz innym projektantom UI, którzy dołączają do tworzenia projektu na późniejszym etapie.
Stworzenie design systemu tak naprawdę nie ma określonego końca. Dokument ewoluuje wraz z rozwojem produktu.
