Projektowanie design systemów

Najprościej jest porównać Design system do… księgi znaku. To także jest zbiór wytycznych i elementów standardowych (komponentów) do projektowania i rozwijania produktu cyfrowego. Tak jak w druku – księga znaku określa zasady używania logotypy, tak design system rozwiewa wątpliwości wszystkich osób zaangażowanych w dany projekt. Będą z tego korzystać głównie graficy, ux i ui designerzy. Poza tym spis będzie przydatny także dla project managerów, product ownerów, developerów i programistów czy testerów i analityków.

Myśląc o design systemie, musimy powiedzieć sobie o kilku terminach, które są z nim nierozerwalnie związane:

Jest to fraza, którą należałoby wiązać z księgą identyfikacji wizualnej. Ma to opisywać to, jak mają wyglądać i z czego mają być złożone konkretne komponenty strony www – przedstawiany jest to szczegółowy styl, np. Zaokrąglone rogi boksów, tabel, czy obligatoryjne umieszczanie cieni pod jasnymi elementami. 

Style guide jest zbiorem wytycznych i komponentów, można powiedzieć “klocków” dzięki którym poszczególne podstrony danego projektu można tworzyć w sposób łatwy i szybki.

Jeszcze do niedawna style guide kojarzony był raczej z aplikacjami mobilnymi, lub większymi serwisami które połączone, tworzyły całe systemy informacyjne. Obecnie, rośnie świadomość klientów i coraz więcej osób zdaje się być świadomych konieczności przedstawiania swojej marki jako spójnej i nowoczesnej.

Chodzi tu o biblioteki gotowych wzorów kodu – jest to duże ułatwienie głównie dla web-developerów, kodujących stronę www. Technicznie rzecz biorąc są to wycinki kodu, które opisują poszczególne style (opisane w style guide). Dzięki temu zespół programistów może szybciej i efektywniej tworzyć nowe produkty danej firmy. Mowa tu o podstronach, landing page’ach czy mailingach internetowych.

Takie kompleksowe podejście skraca oczywiście czas realizacji i wdrażania projektu, gwarantuje także optymalizację kodu samej strony, co jest w obecnych czasach kluczowe dla szybkiego ładowania na urządzeniach mobilnych, czy dla samego pozycjonowania.

Jak widać, oba pojęcia wzajemnie przeplatają się, tworzą całość. I też, należy zaznaczyć, że nie tworzą one sztywnej reguły Design sytemu. Określane jest to raczej czymś, bo jest na pograniczu i w zależności od potrzeb, jest to definiowane, do jednej lub drugiej definicji.

System design na pewno nie jest także pojęciem podręcznikowym i w wielu artykułach można znaleźć wiele definicji. Wszystkie jednak odwołują się do głównej idei: że najważniejsze są jasno skonstruowane zasady tworzenia kolejnych interfejsów lub ich części, a nie gotowe elementy, które możemy wykorzystać. Warto także pamiętać, co w niektórych kręgach bywa pomijane – że strony internetowe powinny być traktowane jako żywe organizmy, które podlegają zmianom i które można dowolnie dostosowywać i rozbudowywać.

Design System możemy traktować też jako nasz osobisty styl, zbiór instrukcji i rzeczy na które zwracamy szczególną uwagę, które są dla nas ważne. Nie jest to oczywiście „klasyczny” design system i może bliżej mu do wspomnianego wcześniej style guida. Należy jednak zdać sobie sprawę z jednego, bardzo ważnego aspektu, zalety: System designu niewyobrażalnie skraca czas realizacji! A jak wiadomo czas to pieniądz, a pieniądz to sukces.

Na to pytanie także nie będzie konkretnej instrukcji oraz odpowiedzi. Najprościej byłoby zapewne powiedzieć: “to, czego będziesz potrzebować!” jednak… no właśnie, co?

W zależności od tego jak bardzo rozbudowany ma być projekt, można przygotować design system, który będzie prosty i krótki. Może też być bardzo szczegółowy i długi. Należy tutaj zachować jednak zdrowy rozsądek. Dbać o to, by powstały design system był naprawdę pomocny, nie powodował opóźnień i oddaniu klientowi finalnego projektu.

Jest jednak kilka standardowych elementów, które w podstawowym style guide powinny się znaleźć:

• Typografia. Czyli zbiór używanych fontów i ich wielkości w zależności od zastosowania. Standardowo, przyjmuje się że jest 6 nagłówków od H1 (największy wielkością, powinien znajdować się tylko jeden nagłówek H1, na daną podstronę – jest on także bardzo ważny jeśli chodzi o pozycjonowanie) do H6 (najmniejszy), plus wyszczególnienie tekstu akapitowego, opisów i na przykład stylistyki cytatów. Dodatkowo, można także ostylować listy numerowane i punktowane, podział na kolumny, czy inne dodatkowe elementy typograficzne.

• Kolorystyka. Całościowa, używana na stronie internetowej. Przeważnie jest to paleta barw z identyfikacji wizualnej, lub ustalona wcześniej z klientem.
• Marginesy. Czyli odstępy od poszczególnych elementów, także typograficznych. Dobrze jest tu wyszczególnić także marginesy od takich komponentów jak formularze, kolumny, elementy graficzne etc.
• Rogi elementów – zaokrąglenia. Są istotne zwłaszcza w przypadku, gdy zakładamy stosowanie boksów. Można tutaj dodać także informacje o cieniach – ich kolorze, wielkości i tym, gdzie mają występować.
• Graficzne komponenty. Czyli wszelkie ozdobniki, styl umieszczania grafik (ramki, cienie, linie etc), separatory i ogółem, wszystkie “smaczki”, które będziemy dodawać w ciągu trwania projektu graficznego.
• Przyciski. Jako istotne elementy z punktu widzenia użytecznościowego, także dobrze je ostylować w style guide. Ich kolorystyka, odmiany (stan kliknięty, bazowy, hover, aktywny lub nieaktywny. Zdarzają się także przyciski w odwróconej wersji kolorystycznej lub mniejsze/większe rozmiarami. Ich spójne stosowanie będzie miało duży wpływ na odbiór całości) 

Tak jak wcześniej wspomnieliśmy, design system jest tworzony także z myślą o pracy programistów, kodujących strony. To, co dodatkowo znajdzie się w Twoim style guidzie, należy także od ustaleń z deweloperem.

Warto tu zaznaczyć, że sam code snippet lub nawet style guide wcale nie musi być pokazywany klientowi. Można powiedzieć, że jest to taki nasz brudnopis, w którym spisujemy wszystkie zasady i ustalenia, których będziemy się potem trzymać.

Mamy nadzieję, że tym wpisem rozjaśniliśmy choć trochę zawiłości podstaw świata ux i ui.

Jesteś zainteresowany stworzeniem użytecznej i nowoczesnej strony www? Zachęcamy do wypełnienia krótkiej ankiety projektowej i skontaktowania się z nami. Doradzimy, wycenimy i jak zawsze – damy z siebie 100% aby efekt końcowy zachwycił nie tylko Ciebie, ale i Twoich klientów.