Ostatnia aktualizacja 6 lipca, 2022
Spójność to kluczowa cecha dobrych projektów. Oczywiście, zdarzają się takie, w których to umiejętne łamanie konwencji stanowi główną oś designu, jednakże aby łamać zasady, najpierw trzeba je dobrze poznać. W zachowaniu spójności pomaga Design System, czyli zbiór elementów w określonym stylu. Pozwala on na szybkie projektowanie różnorodnych usług z zachowaniem jednolitego wyglądu, co ułatwia m.in. zachowanie dobrego user experience. Czym dokładnie jest Design System, jakie są jego rodzaje oraz jak powstaje?
Zobacz: Pierwsze kroki w UI/UX
Design System w przybliżeniu
Dzięki bibliotece komponentów oraz zbiorowi zasad, procesów, narzędzi czy też fragmentów gotowego kodu, designerzy mają możliwość znacznie przyspieszyć swoją pracę podczas tworzenia nowego projektu UI. Produkt zyskuje spójność i rozpoznawalne cechy, które można wdrożyć znacznie szybciej. Dodatkowo wprowadzenie Design Systemu usprawnia proces współpracy UI Designerów oraz Developerów, niwelując nieporozumienia i standaryzując pracę.
W skład Design Systemu wchodzą takie wytyczne, jak:
- system siatek;
- kolorystyka;
- typografia i sposób jej wykorzystywania ustalony dla poszczególnych sekcji i hierarchii;
- elementy graficzne i zestaw ikon;
- reguły tworzenia elementów strony;
- proporcje oraz odległości elementów.
Sprawdź: UI a UX design – na czym polega różnica?
Design System – jak powstaje?
Jak stworzyć Design System? Warto najpierw przygotować listę powtarzalnych elementów, które występują w projektach lub produktach. Następnym krokiem jest zweryfikowanie spójności dotychczasowych rozwiązań, a w razie potrzeby ustalić konkretne wytyczne dla każdego elementu.
Design System musi podlegać regularnej aktualizacji, ponieważ zmianie ulegają nie tylko trendy w projektowaniu, ale przede wszystkim technologia i możliwości.
System projektowania powinien posiadać swoją dokumentację, w której wyjaśnione będą pojęcia, a także zależności w parametrach wyświetlania.
Przykładowe Design Systemy
Material Design
Najpopularniejszy przykład systemu projektowania to Material Design, autorstwa Google. W 2014 roku obwołano go oficjalnym stylem projektowania aplikacji mobilnych Google, choć wcześniej już można go było zobaczyć w niektórych z nich.
Bez wątpienia jego uniwersalność, prostota i spójność sprawiły, że szybko rozprzestrzenił się wśród innych twórców, którzy czerpali z jego założeń, tworząc własne projekty. Dziś można powiedzieć, że to ogólny Design System, na bazie którego można zbudować własne aplikacje, strony i inne produkty cyfrowe.
Czym się charakteryzuje? Właściwie przepis jest bardzo prosty: nasycone kolory, hierarchia elementów zachowana m.in. dzięki trójwymiarowemu rozmieszczeniu, uzyskanemu za pomocą lekkich cieni. W projektach wykorzystuje się krój pisma Roboto. Tekst zamieszcza się w kolorze czarnym, a do wyróżnienia różnych jego elementów używa się funkcji przezroczystości, która powoduje wyszarzenie. Material Design cechuje się również prostotą ikon oraz dopełniającymi grafikami. Co ważniejsze, stanowi on podstawę dla wielu współczesnych projektów aplikacji oraz stron www.
Eva Design System
Mówiąc w skrócie, ten system projektowania stanowi obszerną bibliotekę komponentów UI kompatybilnych z programami do projektowania UI/UX, w skład których wchodzą Sketch i Figma. Jest również zgodny z bibliotekami Angular oraz React.
Eva Design System udostępnia biblioteki UI dla Sketcha i Figmy z możliwością personalizacji, które opierają się o metodologię atomic design. Ponadto mamy do dyspozycji obszerny zestaw ikon, jak również do wykupienia UI Kits do tworzenia projektów webowych i aplikacji mobilnych.
