1846

Projektowanie design systemów

Projektowanie design systemów. Dzisiejszy temat artykułu będzie bardziej techniczny.

Chcąc w ogóle rozmawiać o design system, należy tak naprawdę poznać i rozumieć dwa, wzajemnie przenikające się pojęcia, które bardzo często pojawiają się przy okazji wszelkiego rodzaju publikacji na temat, ogólnie projektowania stron internetowych z gotowych komponentów, czy designu webowego.

 

Tylko takie, kompleksowe podejście da nam pełny obraz tego, czym w ogóle design system jest, kiedy i jak go stosować. Czy naprawdę jest to narzędzie, które powinien znać każdy grafik czy web-developer.

 

Projektowanie design systemów jest procesem niejednokrotnie długofalowym. W trakcie tworzenie aplikacji/portali, poszczególne, kolejne komponenty i składowe systemu są dodawane do głównego zbioru zasad i wyglądu elementów.

1. Garść teorii

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:

2. Pierwsze pojęcie: style guide

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.

3. Drugie pojęcie: code snippets

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.

4. Projektowanie design systemów - dwie definicje?

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.

5. Co powinien zawierać dobry design system?

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) 

6. Współpraca z deweloperem

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.

1846

Czytaj również