Style guide strony internetowej — dlaczego trzeba go mieć?
Nieważne, czy dopiero uruchamiasz swoją witrynę, czy masz sklep online, który po kilku latach potrzebuje rebrandingu — na pewno przyda Ci się style guide. To zbiór wytycznych i elementów, dzięki którym strona zachowa spójność, a użytkownicy będą kojarzyć Twoją markę z konkretnym stylem.
Style guide strony www — dlaczego to takie przydatne?
Budowanie spójności wizualnej to jedno. Później trzeba ją jeszcze utrzymać. Być może kilka osób pomaga Ci przy obsłudze witryny. A może wszystko robisz samodzielnie, ale tworząc kolejną podstronę, nie pamiętasz już, ile wynosiły marginesy oraz jaki styl miały poszczególne nagłówki. I wcale nie musisz pamiętać — po prostu potrzebujesz ściągi.
Style guide to Twój wizualny przewodnik, który pomoże Ci zachować konsekwencję i stworzyć rozpoznawalną estetykę marki. To instrukcja obsługi dla wszystkich użytych na stronie komponentów, elementów graficznych i stylów formatowania. Dzięki niemu w jednym miejscu zbierzesz informacje dotyczące między innymi kolorów, fontów oraz logo firmy i jego wersji alternatywnych.
Mając wytyczne zawsze pod ręką, zwiększysz efektywność swoich działań. O wiele łatwiej wybrać kolor spośród kilku, a nie tysięcy dostępnych. To samo tyczy się stylu przycisków i formatowania tekstu.
Księga stylu jest też nieoceniona, gdy decydujesz się zatrudnić dodatkowe wsparcie przy projekcie na przykład webmastera czy grafika.
Kiedy powinien powstać style guide?
Oczywiście im wcześniej, tym lepiej. Jednak wiadomo, jak dużym projektem jest start własnej witryny czy sklepu internetowego. Nie każdy ma wówczas czas na style guide lub nawet nie wie o jego istnieniu.
Na szczęście nigdy nie jest za późno. Taki dokument warto stworzyć niezależnie od tego, na jakim etapie tworzenia strony jesteś. W końcu nigdy nie wiesz, kiedy potrzebny Ci będzie kolejny landing page, strona zapisu na newsletter czy nowa kategoria produktów w sklepie internetowym.
Z czasem, kiedy serwis zacznie się rozrastać, wprowadzenie poprawek w celu uspójnienia całości będzie wymagać większego nakładu pracy. Dlatego nie odkładaj decyzji o utworzeniu style guide na później. Ten dokument, podobnie jak identyfikacja wizualna i księga znaku, pozwoli Ci tworzyć konsekwentny wizerunek marki oraz przyspieszy realizację niejednego projektu.
Co powinno znaleźć się w style guide?
Nie ma twardych reguł co do tego, jak powinien wyglądać style guide. Przede wszystkim warto traktować go jako żywy dokument, który rozwija się wraz z serwisem. Przewodnik po stylu strony nie ma za zadanie ograniczać Twojej kreatywności, a raczej trzymać ją w ryzach. W rezultacie każda nowa zakładka i każdy nowy pomysł wciąż będą spójne z resztą.
Style guide powinien zawierać następujące elementy:
- logo — dopuszczalna wielkość, układ i ewentualnie wersje alternatywne;
- grid — czyli siatka, która organizuje treści na stronie w sekcje;
- typografia — zazwyczaj stawia się na dwa fonty, z czego jeden wykorzystuje się do nagłówków, a drugi do zwykłego tekstu;
- paleta kolorów — to ważne, by nie umieszczać w style guide pojedynczych kolorów, a całe palety wraz z kontekstem ich użycia na przykład na przyciskach, tle itd.;
- przyciski — należy ustalić ich kształt, wielkość i kolor;
- formularze — informacje o stylu wszystkich formularzy na stronie (na przykład formularza kontaktowego dla klientów): wygląd pól tekstowych, przycisków i checklist;
- marginesy — odstępy pomiędzy komponentami strony oraz poszczególnymi elementami tekstu;
- ikony — najlepiej zdecydować się na jedną paczkę ikon, aby całość była spójna.
Spójność strony www z perspektywy użytkownika
Aby docenić wartość style guide, postaraj się postawić na miejscu potencjalnego klienta e-commerce. Wchodzisz do sklepu internetowego i dodajesz do koszyka interesujący Cię produkt. Przechodzisz dalej, ale strona finalizacji zamówienia wygląda zupełnie inaczej. Inny font, inna kolorystyka i kształt przycisku.
Od razu zastanawiasz się, czy to nie oszustwo — w końcu w sieci nie brakuje sklepów online, których celem jest wyłudzenie pieniędzy. Ostatecznie opuszczasz stronę i robisz zakupy w sklepie, który rozpoznajesz. Nawet kosztem trochę wyższej ceny.
Ten przykład udowadnia, że spójność buduje zaufanie do marki. Użytkownik, podążając ścieżką zakupową czy przeklikując się pomiędzy zakładkami jednej strony, powinien mieć poczucie, że wciąż jest w tym samym miejscu.
Style guide pomoże Ci zbudować witrynę, którą użytkownicy rozpoznają i na którą z chęcią wracają. A to przełoży się na konwersję.