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 na stronach, aplikacjach i w programach, zebrane na dedykowanej stronie. Znany Wam pewnie Material Design jest przykładem takiego systemu.

Po co się je tworzy? Z reguły żeby zunifikować często powtarzające się elementy czy całe wzorce. 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

carbon design system

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, 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. 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ć?

design system

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 nas najbardziej.

Takie systemy to bardzo często rozbudowane platformy pomagające tworzyć produkt programistom i koderom. 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.

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 programistów, którzy 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 wszyscy 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 Spint:
https://medium.com/@marcintreder/design-systems-sprint-0-the-silver-bullet-of-product-development-8c0ed83bf00d

You May Also Like