Raport: EdTech i nowe technologie w branży edukacji (2021) - Krajobraz branży, trendy, historie sukcesu

Pobierz raport (za darmo!)

Style Guide – dla kogo i dlaczego?

Proces tworzenia produktu często potrafi trwać miesiącami. Mnogość tworzonych  komponentów, odległości oraz przycisków na pewnym etapie projektowania może być przytłaczająca, a powstające coraz to nowe ekrany i zmiany, tylko pogłębiają chaos. By temu zapobiec i zwiększyć efektywność, coraz częściej sięgamy po rozwiązanie, jakim jest Style Guide. Tym jakie korzyści niesie ze sobą Style Guide oraz jak go tworzyć, używać i rozwijać, postaram się opowiedzieć w dalszej części tekstu.


Style guide – czyli co?

No właśnie! Czyli co? Coraz częściej i chętniej z niego korzystamy w celu ułatwienia codziennej pracy projektanta, jednakże zanim przejdziemy do sedna sprawy zacznijmy od zdefiniowania, czym jest Style Guide. Zakładam, że nie tylko designerzy będą chcieli przeczytać ten tekst, dlatego postaram się omówić zagadnienie językiem przystępnym dla każdego, także krok po kroku do celu 🙂 

W wielkim skrócie, możemy powiedzieć, że Style Guide jest “instrukcją obsługi dla użytych elementów na stronie”. Czy jest to poprawna definicja? Może. Czy jest ona trafna? Zdecydowanie tak. Dlaczego? Otóż dlatego, że ciężko jest nam znaleźć jedną definicję Style Guide, która jest tą “właściwą”. Samo pojęcie jest na tyle płynne, że tak naprawdę, ile projektów i projektantów, tyle definicji. Oczywiście

w ogólnym rozrachunku wszystkie zawierałyby elementy wspólne, choć na pewno nie byłyby takie same. Wszystko jest zależne od tego, co zawrzemy w naszym projekcie, a docelowo oczywiście w naszej “instrukcji obsługi”. Jeśli miałbym pokusić się o swoją definicję na potrzebę tego tekstu, to mogłaby ona brzmieć tak:

Style Guide to zbiór wytycznych dotyczący standardów stosowania komponentów, elementów graficznych oraz stylów formatowania występujących w danym produkcie

Oczywiście, samo pojęcie zazębia się jeszcze z takimi pojęciami jak Design System czy Atomic Design, ale tym razem skupimy się tylko na mikro skali problemu.

Po co i dla kogo Style Guide?

Super! Wiemy czym jest Style Guide, ustaliliśmy jego definicję. Ale co dalej? Myślę, że spokojnie możemy przejść do tego “po co, “dla kogo” i co najważniejsze – “kiedy?” powinniśmy tworzyć Style Guide. 

Bez zastanowienia moja odpowiedź brzmi – zawsze. Dlaczego? Bo idzie za tym szereg korzyści dla nas i dla naszego zespołu. Tworząc Style Guide nie tylko zwiększamy swoją efektywność, ale też efektywność kolejnych osób pracujących przy danym projekcie, jak np: developerzy czy designerzy. Reużywalność komponentów czy styli, to coś za co podziękuje nam niejeden developer, a dzięki temu uzyskamy niezbędną spójność potrzebną w kształtowaniu produktu oraz oszczędność cennego czasu całego zespołu.

Przykład z życia. Myślę że wielu z nas wielokrotnie spotkało się z taką sytuacją w swojej codziennej pracy, gdzie w natłoku zapominamy już jakiego koloru użyliśmy. Pojawia się nagle kilka odcieni tego samego, zamiast użyć przycisku, który już mamy, projektujemy nowy bo będzie wyglądał lepiej – ten nagłówek tutaj nie pasuje to dodajmy nowy. Siada do tego developer i łapie się za głowę. Jak to wdrożyć – pyta. Kto tak nie miał niech pierwszy rzuci kamieniem. To jest normalne, każdy z nas czasem się zapomina, chociaż nie oszukujmy się, takie podejście bywa frustrujące. Zwłaszcza gdy ktoś po nas “wchodzi” do projektu… i widzi “to”. No właśnie. Wypracowany schemat zaczyna się burzyć, a my gubimy się w tym co wypracowaliśmy. Co wtedy zrobić? 

 

Twórzmy Style Guide jako punkt podparcia dla naszej pracy. Nie bójmy się tego robić mówiąc “przecież pamiętam co projektowałem” czy też “tutaj to nie pasuje”. Oczywiście Style Guide nie ma być ograniczeniem dla naszej kreatywnej pracy a jedynie pomocnikiem. Jeśli wiemy, że coś może wyglądać lepiej to “GO ON”, ale pamiętajmy o tym, by nie tworzyć jednorazowych rzeczy. Nie wymyślajmy koła na nowo 🙂

Jak widzimy korzyści płynące z używania Style Guide’a są daleko idące, niestety by miały one sens musimy pamiętać o kilku rzeczach. 

 

  1. Style Guide potrzebuje czasu. Wspominałem już o tym wcześniej, że jest to żywy element, który ciągle się rozwija. Jest to duży plus, gdyż daje nam dużą swobodę w doborze komponentów, jednakże jeśli zaniedbamy aktualizowania go regularnie, może przerodzić się w minus dając nam nie lada problem w “odkopaniu się” we wszystkim na nowo.
  2. Współpraca z developerem. By nasz style guide miał ręce i nogi, istotne jest by współpraca na linii designer-developer była od samego początku. Dużo łatwiej będzie nam określić, które rzeczy będą reużywalne, a sam developer będzie mógł zaoszczędzić dużo więcej czasu podczas wdrażania. Za ten aspekt nie tylko podziękuje nam developer, ale i sam odbiorca, którego w jakiś sposób przyzwyczailiśmy już do powtarzalności i spójności.
    Jako użytkownicy nie lubimy być zaskakiwani, a wolelibyśmy unikać takich efektów jak ten poniżej :)

 

Co powinien zawierać Style Guide?


Tak naprawdę nie ma jasno określonych reguł co powinien zawierać style guide. Oczywiście są pewne elementy, które powinny się w nim znaleźć, jednakże to my decydujemy, co w nim zawrzemy i jak bardzo będzie to rozbudowane. Mimo wszystko postaram się przybliżyć, co moim zdaniem powinno być absolutnym minimum.

  1. Kolory – wszystkie kolory oraz przezroczystości tych kolorów użyte na stronie wraz z informacją, jak ich używać i przy jakich akcjach (komunikaty, podkreślenia, inputy, itp). Istotne jest to, by też podkreślić, które kolory używamy w przypadku przycisków i ich interakcji. 
  2. Style/Typografia – informacje o stylach i fontach użytych w naszym produkcie. Ważna kwestią jest to, by podkreślić podział na headery, paragrafy i komunikaty. 
  3. Marginesy – wszystkie informacje na temat odstępów pomiędzy poszczególnymi elementami, jak np: nagłówki, komponenty oraz sekcje. Warto również zaznaczyć wielkość marginesów wewnętrznych w przyciskach czy inputach. 
  4. Efekty – wszelkie efekty związane z poszczególnymi elementami na stronie, takie jak cienie, rozmycia, zaokrąglenia rogów czy np: interakcje przycisków w pewnych elementach strony. 
  5. Formularze/Przyciski – tutaj warto zawrzeć wszystkie pola tekstowe,”check” listy, przyciski, itp. elementy które wielokrotnie będziemy stosować na naszej stronie.
  6. Ikonki – tutaj za wiele nie trzeba tłumaczyć :), warto zrobić paczkę wszystkich użytych ikon na stronie. 
  7. Zdjęcia – bardzo opcjonalnie, jednakże jeśli pojawiają się zdjęcia bądź ilustracje, które powielają się na stronie, to warto dać o tym znać.

Przykładowy Style Guide. Źródło: https://dribbble.com/shots/15117607-Eximee-Design-System


Co dalej?

Podsumowując – co tak naprawdę nam daje style guide? Przede wszystkim spójność. Style Guide pomaga nam w ustaleniu pewnych standardów, które są niezwykle istotne, gdy pracujemy w teamie i nie tylko. Pomaga nam zniwelować margines błędu do minimum, co pozwala tworzyć jeszcze lepsze i dokładniejsze produkty. Mam nadzieję, że tym krótkim tekstem udało mi się pokazać korzyści idące z korzystania ze Style Guidów i choć część z Was zaaplikuje go w swojej codziennej pracy.

Artykuły to za mało?

Chcesz poznać cały proces i dowiedzieć się, jak mógłby wyglądać w Twojej organizacji?

Umów się na bezpłatną konsultację

Uwielbiamy ciasteczka!

Nie wierzysz? Odwiedź nas w naszym biurze i sprawdź! Ciasteczka serwujemy z pyszną kawą. Dowiedz się więcej

Zgoda