Stosując się do tych prawideł, mamy pewność, że przekaz i warstwa wizualna naszej firmy będzie spójna. Każda agencja, która będzie dla nas tworzyła jakiekolwiek materiały drukowane, będzie miała jasny przepis, jak to powinno wyglądać.
Po opracowaniu identyfikacji wizualnej firmy przychodzi czas na stronę internetową. W zależności od potrzeb można postawić na prosty projekt typu onepage lub zaawansowaną platformę sprzedażową. W obu tych przypadkach zależy nam na spójnym wizerunku. Pomoże nam w tym opracowanie Design Systemu.
Co to jest Design System?
Design system to zestaw zasad, na podstawie których tworzone są wszelkie produkty cyfrowe dla danej marki. Jest to nieustający proces, który porządkuje informacje, w jaki sposób firma ma być przedstawiana na zewnątrz. Możemy dzięki temu utrzymać spójny przekaz i wizerunek. Nie są to jednak jedyne zalety stworzenia Design Systemu. Warto wspomnieć o trzech najważniejszych korzyściach z punktu widzenia biznesowego:
- 1. Skrócenie czasu tworzenia nowych produktów cyfrowych (tj. stron i aplikacji internetowych, dedykowanych narzędzi czy też landing page).
- 2. Zmniejszenie kosztów poprzez brak potrzeby projektowania wszystkiego od zera.
- 3. Zachowanie spójności wizualnej produktów cyfrowych i oprogramowania przy zmianie firm i agencji ich tworzących.
Elementy Design Systemu
Design system składa się z takich elementów jak:
- Komponenty (components),
- Język wizualny (Visual Language),
- Implementacje kodu (Code snippets).
Są to podstawowe elementy Design Systemu, które z reguły znajdują się w każdym opracowaniu. Często jednak zdarza się, że firma posiada znacznie bardziej rozbudowany system projektowania, który daleko wykracza poza powyższe standardy. Wszystko zależy od potrzeb i wyzwań danej organizacji. Ważny jest rozwój design systemu na podstawie reakcji jego użytkowników.
Komponenty
Komponenty to gotowe elementy, które można wykorzystywać w dowolnym produkcie cyfrowym. Są to zbiory graficzne wraz z wytycznymi projektowania.
Podstawowe i popularne komponenty w Design Systemie to:
- przyciski,
- linki,
- formularze,
- pola formularzy (text, checkbox, radio, select),
- tabele,
- nagłówki,
- alerty (powiadomienia),
- tooltipy,
- paginacje,
- modale.
Język wizualny
Drugim standardowym elementem każdego Design Systemu to język wizualny (Visual Language). Składają się na niego:
- kolorystyka (kolor podstawowy i dodatkowy),
- typografia (rozmiar, grubość oraz kroje fontu),
- ikony (gotowe, spójne ikony do użycia),
- zdjęcia (stylistyka wyboru zdjęć),
- kompozycja (układ i proporcje dla elementów).
Tak stworzony język wizualny w znacznym stopniu ułatwia pracę nad nowymi komponentami. W procesie tworzenia nowych produktów cyfrowych nie muszą uczestniczyć graficy. Deweloperzy nie zastanawiają się nad wizualnymi aspektami jak kolorystyka, styl czy proporcje i odległości.
Implementacja kodu (Code snippets)
Do pełni szczęścia brakuje już tylko udogodnień od strony praktycznej. Code snippets to materiały źródłowe do ponownego użycia. Posiadają gotowy kod (np. HTML, CSS, JS), który można szybko i prosto zaimplementować w nowo tworzonym produkcie.
Deweloperzy nie muszą na nowo programować niektórych elementów. Dzięki temu oszczędzają na czasie oraz eliminują ryzyko popełnienia błędów.
Korzyści i przewagi, jakie daje nam opracowanie Design Systemu
Istnieje wiele argumentów za wdrożeniem design systemu do organizacji. Oto najważniejsze korzyści:
- skrócenie czasu wdrożenia nowego produktu cyfrowego,
- zmniejszenie kosztów tworzenia nowego oprogramowania,
- utrzymanie spójności wizualnej pomiędzy produktami firmy,
- lepsza i zrozumiała współpraca pomiędzy osobami w zespole,
- szybsze wdrożenie nowych osób do zespołu projektowego,
- wyższy poziom konwersji oraz lepsze doświadczenia użytkownika.
Wartość dodana, jaką zyskuje organizacja, jest nie do ocenienia. Czas, który zostaje zaoszczędzony, można przeznaczyć na dopracowanie poszczególnych elementów Design Systemu. Mowa tutaj o nastawieniu się na wysoką konwersję oraz ulepszanie UX, czyli doświadczenia użytkownika. Praca nad systemem projektowania to nieustający rozwój. Polega na ciągłym doskonaleniu już istniejących elementów oraz tworzeniem nowych komponentów i narzędzi.
Jak stworzyć podstawowy Design System?
Przede wszystkim należy zweryfikować nasze potrzeby. Odpowiedzmy sobie napytanie, w jakich obszarach chcemy korzystać z Design Systemu? Praca powinna zostać rozpoczęta od opracowania języka wizualnego (Visual Language). Możemy to zrobić na podstawie już posiadanych materiałów (brandbook) lub jeśli są kiepskiej jakości — od podstaw. Musimy ustalić naszą kolorystykę, typografię (dobór fontów), ikony i ich styl oraz popularne kompozycje.
Następnie możemy rozpocząć prace nad poszczególnymi komponentami. Wstępnie musimy opracować popularne elementy jak przyciski, linki, tabele czy też elementy formularzy. Potem możemy skupić się na typowych dla nas komponentach, które mają zastosowanie w produktach, które tworzymy.
Kolejnym etapem jest implementacja opracowanych elementów. Ważne, aby stworzyć kod uniwersalny i elastyczny. Istotą Design Systemu jest możliwość wielokrotnego wykorzystywania tych samych komponentów bez konieczności pisania ich od nowa.
W każdym momencie możemy poruszać się pomiędzy elementami Design Systemu. Co, jeśli zmieni się jeden z podstawowych elementów języka wizualnego (np. kolor przewodni)? Musimy móc prosto, zmieniając go w jednym miejscu, mieć wpływ na całość produktu. Nasz system projektowania to siatka zależności. Każda zmiana ma wpływ na powiązane z nią produkty.
Przykłady Design Systemu w praktyce
Oprócz samej teorii dobrze jest zobaczyć, czym design system jest w praktyce. Część większych organizacji decyduje się na publikację ich systemów projektowania w sieci.
Material Design
Jest to jeden z najbardziej popularnych systemów projektowania. Rozwijany jest przez Google.
Carbon
Bardzo rozbudowany system stworzony przez IBM.
Atlassian
System stworzony przez Atlassian, który jest właścicielem takich marek jak Trello, Jira, Confluence.
Polaris
Jest to design system stworzony przez Shopify na potrzeby sklepów internetowych.
Human Interface Guidelines
System pomagający w projektowaniu aplikacji, które bezproblemowo integrują się z platformami Apple.
Grommet
Design system od Hewlett-Packard. Framework oparty na React.
Podsumowanie — Jak osiągnąć spójną identyfikację wizualną marki i jej serwisów?
Aby osiągnąć spójną identyfikację wizualną marki i jej serwisów należy postawić na Design System. Nie musimy od razu tworzyć rozbudowanego systemu. Możemy zacząć od podstawowych elementów, które akurat w danym momencie posiadają zastosowanie. Następnie, wraz ze wzrostem potrzeb, rozwijać poszczególne segmenty oraz tworzyć nowe komponenty i zależności. Ważne, aby wszystkie osoby skupione wokół firmy miały dostęp do jednej i tej samej spójnej bazy.
