Design systems, material design, czyli co?

projektowanie systemow wizualnych

Z pewnością znacie te określenia: design system, design language, material design… ten ostatni, szalenie popularny za sprawą Androida przede wszystkim, coraz częściej pojawia się również na stronach internetowych. O co chodzi z tymi całymi systemami, dlaczego powstają i czy powinniśmy zawsze z nich korzystać?

Czym jest design system?

Zacznijmy od początku, czym właściwie są te design systemy? To z reguły zbiory pewnych zasad, wytycznych, dobrych praktyk lub konkretnych kontrolek do użycia w KONKRETNYCH produktach (stronach, aplikacjach i w programach), zebrane na dedykowanej stronie (nie zawsze dostępnej dla szerszej publiczności). Material Design jest pewnie najbardziej znanym przykładem takiego design systemu.

Po co się je tworzy? Z reguły żeby zunifikować często powtarzające się elementy czy całe wzorce – zarówno w obszarze jednego produktu, jak i całego środowiska (np. systemu operacyjnego albo linii produktów). Tak jak marki mają swoje brandbooki, gdzie pilnuje się porządku w kolorystyce, typografii, kompozycji elementów na materiałach drukowanych, tak w przypadku stron, aplikacji i oprogramowania tworzy się podobne zasady. W momencie kiedy kilka zespołów pracuje nad jednym produktem, design system pozwala zachować spójność, porządek i budować produkt tak, by usprawnić potencjalne zmiany lub aktualizacje (jednolite np. dla kilku produktów, które tworzymy).

Poznaj kilka systemów

I jasne, Material Design cieszy się dużą popularnością – jest systemem, na którym będziemy opierać się tworząc aplikacje mobilne pod Androida, by uspójnić pewne, znane użytkownikom już wzorce. Ale to nie jedyny system i warto poznać te inne. Swoje systemy stworzyło:
Apple (iOS Human Interface Guidelines),
Microsoft (Fluent),
IBM (Carbon Design),
Shopify (Polaris),
Oracle (Alta UI),
Salesforce (Lightning Design System)
i cała masa innych firm.

Dlaczego warto je znać? Są dobrą lekcją projektowania interfejsów – jeżeli dopiero zaczynacie swoją przygodę, przejście przez kilka takich systemów pokaże wam co tak naprawdę się projektuje. Na jakie rzeczy musimy zwracać uwagę, że są zagadnienia często pomijane na ładnych prezentacjach z Behance, a są częścią naszej pracy.

Czy musimy z nich korzystać?

Absolutnie nie – przynajmniej dopóki nie tworzymy produktów dedykowanych konkretnej platformie lub nie pracujemy w firmie, która z design systemu korzysta. Możemy potraktować je jako ciekawostkę i wykorzystać w projekcie strony internetowej. Pytanie czy zawsze będzie to potrzebne i czy naprawdę chcemy się tak ograniczać? Prawdopodobnie nie.

Design systems to nie tylko grafika

Wspominałam już o tym, że oprócz czysto wizualnej strony, znajdziemy tam równie często informacje związane z użytecznością, dostępnością, czy dobrymi wzorcami użycia interfejsu. Jednak to wciąż może być tylko malutka część takiego systemu, choć ta, z racji wykonywanej pracy interesuje osoby projektujące najbardziej.

Takie systemy to bardzo często rozbudowane platformy pomagające tworzyć produkt osobom, które go wdrażają. Kiedy kończymy naszą pracę nad wizualną stroną, nadchodzi moment, kiedy większość elementów graficznych zamienia się w kod. I tu znajdziemy gotowe frameworki opracowane pod dany system, całą masę ułatwień i gotowych skryptów dedykowanych osobom technicznym. Takie systemy stają się żyjącą dokumentacją projektów i bazą wiedzy. I to największa i najtrudniejsza część design systemu, często pomijana w opisach projektów osób projektujących. Dlatego – jeśli Twój system zawiera tylko wizualną stronę, jest bardziej style guidem – zbiorem komponentów, stylów i kolorów, które można użyć w projekcie. Bez kodu, nie będzie to jednak design system.

Ratunek dla developerów

Warto pamiętać też, że, jakkolwiek chcielibyśmy żeby było inaczej, aplikacje czy strony nie zawsze powstają przy udziale projektantów. W AppStorze czy Google Markecie znajdziemy całą masę appek tworzonych tylko przez osoby programujące, które nie interesują się zwyczajnie projektowaniem. Jak zrobić żeby programiści dalej mogli tworzyć swoje aplikacje, ale te wciąż spełniały pewne standardy? Po prostu unifikując system i tworząc wytyczne właśnie – tak jak zrobił to Android, tak jak zrobili to inni dostawcy platform.

Tworzenie własnych systemów

Coraz więcej materiałów i narzędzi znajdziecie też o tworzeniu swoich własnych systemów. Czy jest to zasadne i ma sens? Z reguły nie bardzo. W wielu przypadkach pracujemy nad tak małymi produktami, że poświęcanie czasu na budowanie i opracowywanie całego systemu może być po prostu przerostem formy nad treścią. Są jednak sytuacje, kiedy tworzenie systemu jest zasadne i będą to prace choćby nad rozbudowanym oprogramowaniem.

Jeżeli jesteście zainteresowani tematem, sięgnijcie po książkę od Smashing Magazine Design Systems lub wpadnijcie na UXPin, gdzie sporo pisze się ostatnio o tworzeniu systemów.

I tu na samym dole macie cykl o Design System Sprint: https://medium.com/@marcintreder

You May Also Like
Read More

Flat design

Flat Design? Kilkukrotnie spotkałam się z sytuacją nadinterpretacji tego pojęcia. A pojawia się ostatnio dość często w ustach dyrektorów kreatywnych, projektantów,…
web design w 2018
Read More

Podsumowanie 2018 w web designie

Kiedy wszyscy bawią się we wróżenie, co będzie kręciło nas w Web/UI/UX designie w tym roku, ja chciałabym skupić się na tym, co działo się…