Obecnie marki mają przed sobą sporo wyzwań związanych ze swoją identyfikacją i budowaniem wizualnej tożsamości. Wiele kanałów komunikacji, jakimi dysponujemy, pozwala dotrzeć do szerokiego grona odbiorców, ale niesie za sobą również ciężar dbania o spójność na wszystkich tych płaszczyznach. Jak sobie z tym poradzić?
Key Visual nie załatwi sprawy.
Key visual to pojedynczy graficzny element, którego używamy jako wizualna reprezentacja marki, kampanii lub produktu. Jest to zazwyczaj główny element graficzny, który przyciąga uwagę i ma być konsekwentnie powielany, budując skojarzenie z danym produktem czy marką. Key Visual (KV) jest oczywiście czymś, o co warto zadbać, ale w dzisiejszych czasach zdecydowanie nie jest wystarczający.
Załóżmy, że KV budowanej marki jest zielona kropka umieszczona w prawym dolnym rogu czarno-białego zdjęcia. Ten element powtórzony kilka razy na stronie internetowej będzie budował już jakiś obraz, ale jeśli nie określimy konkretnych wytycznych jak używać tego ozdobnika, z czym go łączyć i jak wyglądają jego pochodne, to szybko może się okazać, że działamy na oślep i całkiem niezła koncepcja rozjeżdża się w praktyce. I tu z pomocą przychodzi design system!
Design system, czyli kompleksowe narzędzie do spójnego reprezentowania marki.
Design system to sposób na komunikację między użytkownikiem a produktem. Budując design system, tworzymy tak naprawdę zbiór zdefiniowanych reguł, wytycznych i elementów graficznych, na podstawie których będzie można tworzyć kolejne elementy spójnej komunikacji. Nie mamy już więc tylko zdefiniowanych kolorów podstawowych, ale też ich odcienie, nie tylko rodzaj fontu, ale i jego wielkość i hierarchię. Design system określa wszystko, by osoba tworząca następne materiały miała jasne wskazówki, by dbać o naszego Świętego Graala, jakim jest SPÓJNOŚĆ.
Czy da się powiedzieć, że skończyliśmy tworzyć design system? Otóż nie – design system nigdy nie jest skończony, ponieważ ciągle się zmienia, idzie z duchem czasu, podąża za trendami. Nieustannie możemy definiować nowe style, uzupełniać go o kolejne komponenty. Dlatego nie trzeba się obawiać, że na początku ten system może się wydawać mało rozbudowany. To dynamiczna konstrukcja, która żyje.
Warto mieć też na uwadze, że to, jak wygląda design system danej marki, zależy od niej samej. Każda marka ma swoje indywidualne cele i potrzeby, przez co elementy priorytetowe dla jednego brandu, nie będą miały znaczenia dla innego, choć oczywiście pewne podstawowe składowe powinny się pojawić w każdym z nich. Design system należy dopasowywać do aktualnych potrzeb, jednocześnie starając się wybiegać w przyszłość, żeby przewidywać, co w następstwie pewnych ruchów może jeszcze być niezbędne. Do stworzenia design systemu jest więc konieczna dobra komunikacja z Klientem, ale również wewnętrznie z zespołem odpowiedzialnym za projekt.
Atomic Design – podejście do design systemu Brada Frosta
Brad Frost stworzył tzw. Atomic System, który pomaga łatwiej zarządzać rosnącymi projektami oraz ponownie używać i modyfikować istniejące komponenty, co przyspiesza proces tworzenia interfejsów użytkownika.
Nazwa „atomic design” jest metaforą zainspirowaną chemią. W tym podejściu projekty interfejsów można porównać do składników atomowych, które łączą się w większe struktury.
W ten sposób mamy:
- ATOMY – najmniejsze cząsteczki, z których budujemy interfejs. Są to np. kolory, typografia, siatka, odstępy.
- MOLEKUŁY – tworzymy je z połączenia różnych atomów. Np. zdefiniowany kolor w połączeniu z odpowiednim fontem może stworzyć button albo input.
- ORGANIZMY – kombinacja atomów i molekuł, tworząca większy komponent, np. Zdjęcie z nagłówkiem, konkretnym odstępem i buttonem poniżej. Dobrym przykładem organizmu jest też zapis do newslettera.
- SZABLONY – czyli np. ogólny zarys podstrony, ze zdefiniowanymi nagłówkami, odstępami, i komponentami takimi jak menu czy stopka, który dopiero wypełni się konkretną treścią.
- STRONY – najbardziej skonkretyzowany element, który już jest wypełniony docelową treścią.
Podejście atomowe nie jest idealne, ale bardzo pomaga stworzyć design system, który ma swój porządek.
Ułatwiajmy sobie życie z pomocą biblioteki komponentów.
Biblioteka komponentów w design systemie to zbiór wstępnie zaprojektowanych i sformatowanych elementów interfejsu użytkownika, które można łatwo wykorzystać do tworzenia spójnych i spersonalizowanych projektów interaktywnych. Komponenty obejmują takie elementy jak przyciski, formularze, ikony, karty, menu nawigacyjne, stopki, a także wiele innych, które można dostosować do specyficznych potrzeb projektu. Jeśli mamy już zdefiniowane przyciski, to z pomocą takich komponentów w łatwy sposób nałożymy przycisk na grafikę do posta na Facebook’u. Albo jeśli stale zdjęcia wstawiamy w okrągłej ramce z kolorowym obrysem, to nie musimy dzięki bibliotece robić tego za każdym razem na nowo, tylko podmieniamy zdjęcie w gotowym komponencie. Korzystanie z biblioteki komponentów w design systemie pozwala oszczędzić czas i zachować spójność wizualną i funkcjonalną między różnymi elementami interfejsu użytkownika.
Ważne, aby zaznaczyć, że sama biblioteka komponentów nie jest jeszcze design systemem, bo to jedynie zbiór elementów gotowych do zastosowania w projektach, ale są one pozbawione kontekstu ich zastosowania, niezbędnego, by mówić o design systemie.
Dlatego właśnie design system wymaga stworzenia dokumentacji – opisów, które pomogą zrozumieć podstawowe założenia zastosowania elementów. Jest to niezbędne choćby po to, żeby programista nie musiał co kilka chwil dopytywać o coś projektanta. Dzięki dobrej dokumentacji ułatwiamy pracę sobie i innym.
Design system, czyli brandbook w wersji rozszerzonej.
Brandbook to pierwsze skojarzenie, jakie możemy mieć, czytając o design systemie. I całkiem słusznie, ponieważ przedstawia on zasady opisujące budowę i zastosowanie logotypu, fontów i kolorów, więc jest to tak naprawdę pierwszy krok do stworzenia design systemu. Jednak nie ulega wątpliwości, że design system to bardziej kompleksowe narzędzie. Określa zasady dotyczące projektowania interakcji użytkownika i interfejsów użytkownika zarówno w ramach konkretnej platformy lub aplikacji, jak i w pozostałych formach komunikacji, takich jak social media. Design system zawiera zasady dotyczące elementów interfejsu, ich stylowania, hierarchii, zachowania i innych aspektów istotnych do tworzenia spójnego i intuicyjnego doświadczenia użytkownika.
Poznaj Design Systemy Gigantów.
Giganci, których systemy krótko przedstawię często udostępniają ogromne zasoby plików systemowych do ogólnego użytku. Dlaczego? Aby projektanci korzystali z uniwersalnych zasad, które pomogą stworzyć spójne i estetyczne interfejsy. Dzięki temu promują jednolity wygląd i funkcjonalność aplikacji na różnych platformach i urządzeniach.
- Material Design od Google – to zaawansowany system, na którego podstawie zbudowane są wszystkie produkty Google oraz interfejs systemu operacyjnego Android. Material Design stał się popularnym i szeroko stosowanym narzędziem w projektowaniu interfejsów użytkownika. Dodatkowo, otwarta dostępność Material Design umożliwia społeczności twórców zgłaszanie sugestii, poprawek i nowych pomysłów, co przyczynia się do ciągłego rozwoju tego projektu.
- Human Interface Guidelines od Apple to zalecenia, które stanowią podstawę projektowania interfejsów systemów iOS, macOS oraz innych produktów firmy Apple.
- Fluent jest skoncentrowany głównie na aplikacjach i systemach operacyjnych Microsoft, takich jak Windows 10, Windows 11, Xbox i inne. Jednak zasady i wytyczne zawarte w Fluent Design System mogą być również stosowane w projektowaniu aplikacji na inne platformy. Microsoft udostępnia wiele materiałów edukacyjnych, bibliotek komponentów i narzędzi, które pomagają w implementacji Fluent Design System w projektach.
Podsumowanie.
Design system to zbiór zasad służących spójnej komunikacji marki z użytkownikiem. Rozpoczynając nowy projekt strony internetowej poniekąd każdy projektant rozpoczyna tworzenie design systemu, jednak dopiero dobre poznanie tego pojęcia pozwala zabrać się do tego w odpowiedzialny i poukładany sposób. Dzięki odpowiednio zaprojektowanemu design systemowi można osiągnąć bardziej spójny wygląd strony, poprawić jej użyteczność i ułatwić użytkownikom nawigację. Jasne zasady przyspieszają też późniejszy proces rozbudowywania strony, ale również całego obrandowania marki.
Bibliografia
- 1. Paweł Tkaczyk -> „Co to jest Design System i dlaczego go potrzebujesz”
- 2. Karol Stefański -> „Co to jest Design System”
- 3. Brad Frost -> „Atomic Web Design”
- 4. Autentika -> „Design System — co to i dlaczego możesz go potrzebować?”
- 5. Aleksandra Tulibacka /GRAFMAG/ -> „Atomic Design w projektowaniu stron”
