Design system
Design system to zbiór zasad i gotowych elementów strony: kolorów, typografii, odstępów i komponentów. Dzięki niemu wszystkie podstrony wyglądają spójnie, a rozbudowa jest szybsza i tańsza.
Co zawiera design system strony B2B?
Design system to zestaw zasad, powtarzalnych elementów interfejsu i dokumentacji, z którego korzystają projektanci oraz programiści. Obejmuje między innymi kolory, typografię, odstępy, przyciski, formularze i reguły ich użycia. Określa też zachowanie elementów: stan błędu, aktywny fokus, ładowanie oraz układ na telefonie. Wspiera spójny UX, ponieważ podobne działania wyglądają i działają podobnie na kolejnych podstronach. Sama biblioteka ekranów w programie graficznym nie wystarczy, jeśli wdrożony kod ma inne reguły.
Na stronie B2B system może łączyć prezentację usług, tabele parametrów, formularz zapytania i konfigurator produktu. Dzięki temu nowa podstrona korzysta ze sprawdzonych wzorców zamiast kolejnego wariantu tego samego przycisku. Zakres systemu powinien odpowiadać skali serwisu: mała witryna często potrzebuje kilku dobrze opisanych komponentów. Dla każdego z nich ustal zastosowanie, ograniczenia i osobę odpowiedzialną za aktualizację. Sprawdź działanie w prototypie strony, a potem zgodność projektu z kodem i obsługą klawiatury. Źródło techniczne: opis standardu.
StudioMakers: wspólne zasady marki i strony
Identyfikacja nie odpowiadała jakości realizacji studia.
Opracowaliśmy logo, paletę, typografię i zasady użycia, a następnie stronę opartą na tym systemie.
Strona, materiały i komunikacja korzystają z jednego kierunku wizualnego.
Najczęstsze błędy
Biblioteka bez reguł użycia
Zestaw ładnych elementów nie wyjaśnia, kiedy ich używać. Dodaj zasady doboru wariantów, przykłady i sytuacje, w których komponent się nie sprawdza.
Rozjazd projektu i kodu
Zmiana tylko w pliku projektowym nie aktualizuje strony. Ustal wspólny sposób wdrażania, wersjonowania i sprawdzania komponentów.
Pominięcie stanów i dostępności
Formularz potrzebuje także czytelnego błędu, etykiet i widocznego fokusu. Zaprojektuj te stany przed wdrożeniem, nie dopiero po zgłoszeniu problemu.
Pytania i odpowiedzi
Czym design system różni się od UI kitu?
UI kit to zwykle zbiór elementów wizualnych. Design system dodaje zasady użycia, zachowanie, dokumentację oraz powiązanie z wdrożonymi komponentami i sposobem ich utrzymania.
Czy mała strona potrzebuje design systemu?
Może wystarczyć prosty zestaw reguł i kilku komponentów. Rozbudowany system ma sens wtedy, gdy strona rośnie, powstają kolejne produkty lub nad interfejsem pracuje więcej osób.
Czy design system gwarantuje dostępność strony?
Nie. Może dostarczać dostępne wzorce, ale liczy się również sposób ich połączenia, treść i wdrożenie. Gotowe widoki nadal trzeba sprawdzić, między innymi klawiaturą i czytnikiem ekranu.
Powiązane pojęcia
Chcesz zastosować to na stronie swojej firmy?
Podaj adres strony i opisz cel. Wskażemy, od czego zacząć.
