Design system

Z każdej strony jesteśmy zalewani ciągłymi symbolami. Kolory. Logotypy. Melodie. Zapachy. Dźwięki. Slogany. Znaki. Największe firmy swoją komunikację wizualną mają rozbudowaną tak mocno, że staje się ona częścią naszej rzeczywistości. Dokładnie tak samo powinna wyglądać twoja firma, jeżeli chcesz, aby nie zginęła w tłumie innych podobnych. Jeżeli wrzucę Twoją reklamę na mojego Facebooka, odbiorcy od razu powinni poznać, że to jest Twoja reklama.

Każda, podkreślmy to, KAŻDA firma musi posiadać kilka swoich wyróżników. Zakładając firmę i wykonując usługi innym ludziom starasz się to robić najlepiej jak potrafisz. Jednocześnie liczysz na to, że zadowoleni klienci będą Cię polecali. I dlatego powinieneś zadbać o to, aby klienci wiedzieli z kim mają do czynienia.
Na początek powinieneś zadbać o absolutne minimum:

• logotyp (logo + sygnet + tagline) lub ikona. Pamiętaj, aby posiadać również różne wersje kolorystyczne logotypu, które można umieszczać na jasnym, ciemny i kolorowym tle. Dobrze jest również posiadać wersję achromatyczną (biały + czarny + odcienie szarości),
• firmowe kolory. Pewnie kojarzysz charakterystyczny kolor Orange lub żółć Polsatu. Twoja firma też powinna mieć stały zestaw kolorów używany do wszystkich materiałów reklamowych. Nie każdy jednak ma zmysł graficzny, dlatego polecam zapoznanie się z narzędziem, które pomoże ci dobrać kolory – Coolors,
• firmowe literki. Warto wybrać krój pisma charakterystyczny, aby odróżniać się od konkurencji, jednocześnie musi od być czytelny. Nie musi to być krój pisma przygotowany specjalnie dla Ciebie, dlatego warto zapoznać się z bardzo szeroką ofertą darmowych krojów na stronie 1001freefonts.

Spójność

Te trzy punkty to absolutne minimum! Oczywiście wraz ze wzrostem twojej firmy będą się pojawiały nowe elementy – posty w social mediach, koszulki z logo firmy, dedykowane strony tzw. landing page, stopki maili, newslettery, zdjęcia produktów. W tych wszystkich elementach również trzeba zadbać o spójność.

I to właśnie o tą spójność chodzi!

Komunikacja wizualna firmy powinna być spójna i konsekwentna, do tego stopnia, żeby ludzie mogli rozpoznać Twoją firmę po fragmencie reklamy zauważony gdzieś kontem oka w przestrzeni publicznej lub Internecie.
Twoja firma powinna być jak butelka Coca-Coli. Chyba nie ma wśród nas osoby, która nie kojarzyłaby charakterystycznej butelki. Co więcej! Jestem przekonany, że nawet gdybyś zobaczył kawałek potłuczonej butelki Coca-Coli bezbłędnie rozpoznałbyś, że to właśnie o tą markę chodzi.

Demokratyzacja działań marketingowych

XXI wiek i powszechny dostęp do komputerów i Internetu bardzo dużo zmienił. Jeszcze kilkanaście lat temu za wizerunek marki odpowiadała grupa zatrudnionych grafików lub agencja reklamowa, z którą obowiązywała stała współpraca. Chcą zrobić szyld na budynek, nowe ulotki lub okleić auto, kontaktowałeś się z nimi i oni już wiedzieli co dalej. To graficy posiadali księgę znaku i to oni, projektując nowy element wizualny, musieli zrobić projekt według wskazówek w niej zawartych.
W bardziej zaawansowanych przypadkach nie było księgi znaku tylko tzw. key visual. Był to zbiór wyróżników danej marki, czyli to o czym pisałem na początku – logo i jego odmiany kolorystyczne, kolorystyka, krój czcionki, a nawet emocje jakie miały towarzyszyć odbiorcy zapoznającemu się z reklamą lub wskazówki jakim językiem trzeba się komunikować z odbiorcą. Resztą, czyli projektem, zajmowali się ludzie, którzy umieli posługiwać się profesjonalnymi programami do grafiki komputerowej jak np. CorelDraw lub Adobe Illustrator.

Jednak tak było kiedyś! Dziś:

• punktów styczności klientów z twoją firmą bardzo mocno poszła w górę. Fan-page na Facebooku. Profil na Instagramie, TikToku lub Pintereście. Strona na LinkedInie. Aukcje Allegro. Kanał na YouTube. Newslettery. We wszystkich tych miejscach Twoja firma spotyka się z klientem. Z tego powodu musisz zadbać o spójność, aby klient był pewny, że to Twoja reklama,
• ogólny dostęp do social mediów spowodował, że każdy sam tworzy na nich treść. Przecież nie będziesz zatrudniał grafika, żeby Ci zrobił filmik na InstaStory, który zniknie za 24h. A gdybyś takich filmików wrzucał kilka w tygodniu? Nieeee. Przynajmniej część musisz robić sam,
• projektowanie graficzne w dzisiejszych czasach jest bardzo ułatwione dzięki intuicyjnym narzędziom, z których może korzystać każdy. Zdecydowana większość z tych narzędzi jest dostępna za darmo! Najbardziej popularna jest Canva, jednak mamy również Snappa. Do filmików jest InVideo lub Mojo.

Właśnie dlatego obecnie księgi znaku lub key visuale powoli odchodzą w zapomnienie. W ich miejsce wchodzi bardziej szczegółowy i bardziej dostępny dla ludzi spoza branży – design system.

Co to jest design system

O ile key visual dawał ogólne wskazówki, o tyle design system daje gotowe rozwiązania. Key visual lub księga znaku mówiły tylko jaki kroju czcionki ma być używany i jej kolorze. Natomiast nie dawał gotowych rozwiązań.
Design system daje dużo więcej. Mówi on nie tylko o kroju czcionki i jej kolorze, ale również o tym jakiej wielkości ona ma być w nagłówku na wpisie na Facebooku! Ma on w taki sposób opisać każdy element, który trzeba zaprojektować, aby osoby nie znające się na grafice mogły to zrobić.
Chcesz wrzucić do filmik na YouTube przycisk przekierowujący na stronę Twojego sklepu? Proszę bardzo! Design system mówi, że taki przycisk wrzucany do filmiku na YouTube ma mieć szerokość 30% ekranu, ma być w kolorze #AA4465, a czcionka użyta na nim to 'Now Bold’ wielkości 42px i w kolorze #CDD6D0, obrys ma być w kolorze #fff, odstęp napisów od obrysu wynosi 50px, a przycisk posiada cień o parametrach 10 10 10. Prawda, że łatwiej?!
A co więcej, dzięki opracowaniu całego design systemu w jednym programie, możesz po prostu skopiować przycisk i wkleić w dowolne miejsce! No łatwiej się już nie da.

Jak zaprojektować design system?

Opisując to najprostszym językiem, można powiedzieć, że design system trzeba projektować od szczegółu do ogółu.

• Poziom 1 – najbardziej podstawowe elementy. Kolory. Kształty. Literki. Co ważne, w tym punkcie, szczegóły mogą tworzyć połączenia, które są bezsensowne. Mam tutaj na myśli bardzo jasny tekst na białym tle,
• Poziom 2 – polega to na odrzuceniu wszystkich bezsensowych połączeń szczegółów. W ramach tego punktu powstają pierwsze usystematyzowane twory, np. przyciski,
• Poziom 3 – jest to połączenie kilku elementów z Poziomu 2 w jedną spójną i funkcjonalną całość. Przykładem tutaj może być formularz kontaktowy. Składa się on z kilku elementów Poziomu 2 – pola do wypełnienia, przycisk, informacja w formie tekstu. W tym poziomie mamy opisane wszelkie informacje jak ma wyglądać gotowy formularz kontaktowy, jednak skład tego formularza (elementy z Poziomu 2) mogą być zmieniane dowolnie, w zależności od potrzeby,
• Poziom 4 – jest to już cała funkcjonalna struktura, np. strona główna twojej strony internetowej. Składa się ona z kilku elementów będących Poziomem 3 – nagłówek, slajder, prezentacja artykułów ze sklepu, zapis na newsletter, układ najnowszych artykułów z bloga, stopka. W tym poziomie układamy z elementów z Poziomu 3 całą strukturę strony www. Jednak wygląd tych elementów jest opisany w Poziomie 3,
• Poziom 5 – ostateczny poziom, w którym otrzymujesz gotowy szablon wypełniony treścią, a który wystarczy skopiować i podmienić treść, aby powstała nowa podstrona.

Zauważ, że najwięcej czasu zajmuje przygotowanie pierwszych dwóch poziomów. Projektujesz wtedy całą szatę graficzną – wybierasz czcionkę, jej wielkość i kolor, zastosowane ikony, ich kolory, wielkość, odstęp, wielkość obrazka. Warto zaznaczyć, że czcionka, jej wielkość i kolor może się zmieniać w zależności od tego w jakim elemencie z Poziomu 2 została użyta, np. w nagłówku strony może być użyta większa czcionka niż w treści.
Kolejne trzy poziomy to zabawa klockami. Każdy klocek posiada określone właściwości, a Twoim zadaniem jest takie poukładanie tych kloców, aby całość (Poziom 5) odpowiadała twoim oczekiwaniom.

Jak zaprojektować design system

Design system można projektować na dwa sposoby. Pierwszy dotyczy sytuacji, gdy już posiadasz stronę internetową, na której chcesz się opierać. Drugi to sytuacja gdy zaczynasz budować cały design system od początku, a wszystkie istniejące elementy – strony www, ulotki itp. – przebudowujesz.

Jeżeli już posiadasz stronę lub sklep internetowy i chciałbyś zaprojektować dla niego design system to musisz to zrobić odzwierciedlając poszczególne elementy wyglądu twojej strony. Tak przygotowany Poziom 1 spowoduje, że w prosty sposób będziesz mógł tworzyć inne szablony, np. szablon relacji na Instagramie.

Jeżeli dopiero masz zamiar założyć swoją stronę internetową lub chciałbyś zrobić jej całkowity rebranding, to projektowanie design systemu możesz zacząć od początku, a więc Poziomu 1. Zaczynasz od najbardziej szczegółowych informacji jak, np. krój czcionki, kolor tła itp. a z każdym kolejnym krokiem łączysz, elementy w coraz większe obiekty.

W jakich programach możesz zaprojektować swój design system

Możesz do tego użyć chociażby najpopularniejszych narzędzi do robienia grafiki, a więc Adobe Photoshop, CorelDraw. Jednak to dość drogie programy. Z tego powodu na początek możesz posługiwać się również darmowymi programami jak chociażby CorelVector.

Lepszymi narzędziami do projektowania swojego design systemu mogą być programy służące do projektowania layoutów stron internetowych. Najpopularniejsze z nich to Figma, Adobe XD, Sketch, InVision Studio.

Jednak najlepszym narzędzie do projektowania swojego design systemu będzie narzędzie o nazwie ZeroHeight. Jest to aplikacja dedykowane tworzeniu design systemu.

Design system – przykłady

Chyba najmocniej promowanym od kilku lat design systemem jest Material Design od Google. Jest to design system opisujący jak powinny wyglądać produkty od Google oraz interfejs Androida.

Jednak to nie tak, że tylko Google posiada swój design system. Podobna sytuacja dotyczy również Apple. Stworzyli oni swój Human Interface Guidelines, na którym opierają się projektując interfejs iOS, macOS oraz pozostałych urządzeń marki Apple.

Tak samo sprawy mają się w Microsofcie. Oni również stworzyli swój design system o nazwie Fluent, na którym opierając wygląd aplikacji na komputery z Windowsem.

Istnieją również design systemy będące ponad konkretną firmą. Opisują one, np. w jaki sposób należy prezentować dane naukowe i wykresy. Mam tutaj na myśli design system o nazwie Liquid, który zawiera wszystko, łącznie w ilustracjami.

Również gigant e-commerce Shopify stworzyło design system, z materiałami do projektowania m.in. aplikacji e-commerce. Ten design system nazywa się Polaris.

Jeżeli zainteresowałem cię design systemami i chcesz na własną rękę poszukać innych, to skorzystaj z wyszukiwarki design systemów – Adele.

Jak dobrze samemu zrobić design system

Po pierwsze musisz sobie odpowiedzieć na pytanie czy Twoja firma potrzebuje design systemu.
Design system najlepiej sprawdza się w firmach, które mają wiele punktów stycznych z klientem oraz te punkty są często aktualizowane. Jeżeli za całą szatę graficzną w Twojej firmie odpowiadasz Ty sam, a cała oprawa graficzna kończy się na zmianie zdjęcia w tle profilu na Facebooku, dwa razy w roku, to design system nie zawracaj sobie głowy.
Jeżeli jednak wrzucasz relacje na Instagrama kilka razy w tygodniu, do tego publikujesz posty na Facebooku i dbasz i treści na LinkedInie to możesz być pewny, że design system przyspieszy i ułatwi Ci pracę.
W skrócie można powiedzieć, że im więcej działań marketingowych prowadzisz w Internecie tym design system jest Ci bardziej potrzebny.

Drugim pytaniem jest – z jakiego oprogramowania korzystać do stworzenia design systemu? Wszystko zależy od tego w jakim programie czujesz się najlepiej. Jeżeli korzystasz z Canvy, no to cały design system powinien być przygotowany właśnie w niej. A może jesteś mistrzem Painta? Nic nie stoi na przeszkodzie, abyś właśnie w nim zaprojektował swój design system.
Warto pamiętać, że tworząc design system poniekąd zmuszasz się do korzystania zawsze z tego jednego programu. Jeżeli do tej pory dodawałeś napisy do zdjęcia bezpośrednio na Instagramie, no to teraz możesz o tym zapomnieć!

Kto powinien mieć dostęp do twojego design systemu? Jak pisałem wcześniej, design system powstał po to, aby cały przekaz firmy zachowywał spójność. Z tego powodu dostęp do twojego design systemu muszą mieć wszystkie osoby, które odpowiadają za taką komunikację.
Pamiętaj, że powinieneś wliczać w to również handlowców, którzy wysyłają oferty do klienta. Takie oferty powinny być ujednolicone i wszystkie dodatkowe elementy w nich umieszczone powinny być z góry zaplanowane i dodawane na zasadzie „kopiuj wklej”.

Zalety korzystania z design systemu

Dzięki szczegółowo opracowanym Poziomom design systemu, możesz tworzyć nowe elementy komunikacji wizualnej Twojej firmy niezwykle szybko. A więc zwiększenie szybkości pracy jest jednym z podstawowych zalet stosowania design systemu.

Kolejna zaleta to pewność, że jeżeli delegujesz swoją pracę nowej osobie, firmowe posty w social mediach, będą wyglądały dokładnie tak samo jak wtedy, gdy ty sam się tym zajmowałeś. Dzieje się tak, ponieważ design system ustala ich gotowe szablony, w których wystarczy tylko zmienić tekst i zmienić zdjęcie.

Dzięki stosowaniu szablonów, wdrożenie nowej osoby do pracy na stanowisku programisty, grafika, handlowca itp. jest dużo szybsze. Każdy z nich opiera się na wypracowanych wcześniej automatyzmach. Co więcej, każdy z nich ma te automatyzmy przygotowane w formie klocków „kopiuj-wklej”.

Dzięki spójnej komunikacji wizualnej, klient zawsze jest pewny, że ma do czynienia właśnie z Twoją firmą. Sam wielokrotnie spotykałem się z sytuacją, że posty na Facebooku zupełnie nie pokrywały się z kolorystyką na stronie internetowej lub na Instagramie. Wprowadzało to powątpiewanie czy aby na pewno obserwuję odpowiednią firmę.

Jako ciekawostkę dodam, że tak właściwie to nie musisz wymyślać swojego design systemu od zera. Wiele z nich udostępniona jest w Internecie na licencji open source. Oznacza to, że możesz z nich korzystać bez ograniczeń!