Identyfikacja wizualna a strona internetowa: jak je połączyć

Identyfikacja wizualna i strona internetowa to dwie usługi, ale jedna marka. Gdy strona jest projektowana spójnie z identyfikacją, klient odbiera firmę jako jedną, przemyślaną całość. Gdy powstaje osobno, dostajesz dwie marki w cenie jednej — i żadna z nich nie buduje drugiej.

Wspólny język wizualny

Te same kolory, ta sama typografia i ten sam styl graficzny na stronie i w materiałach budują spójność. Klient nie musi się zastanawiać, czy trafił we właściwe miejsce: wizytówka, reklama i strona mówią jednym głosem. To brzmi banalnie, a jest jednym z najczęściej łamanych zasad.

W praktyce rozjazd zaczyna się od drobiazgów. Na stronie kolor jest odrobinę jaśniejszy, bo ktoś wziął go „na oko" ze zrzutu ekranu. Font jest podobny, ale inny, bo firmowego nie było w bibliotece. Zdjęcia w innym klimacie, bo pochodzą z darmowego banku. Trzy drobiazgi i marka już nie jest tą samą marką.

Najpierw marka, potem strona

Najlepiej zacząć od identyfikacji, a potem zaprojektować stronę na jej podstawie. Wtedy witryna nie jest oderwanym projektem, tylko kolejnym nośnikiem tej samej marki. Projektant strony ma gotową paletę, typografię i zasady — nie musi ich wymyślać od nowa, a Ty nie płacisz dwa razy za te same decyzje.

Odwrotna kolejność też się zdarza i nie jest katastrofą, ale bywa droższa. Gdy strona powstaje pierwsza, identyfikacja musi się do niej dopasować, a niektóre decyzje podjęte pod ekran nie sprawdzają się w druku.

Co gdy strona już istnieje

Nie trzeba jej wyrzucać. Bardzo często wystarczy dopasowanie: ujednolicenie kolorów do firmowej palety, podmiana krojów na właściwe, uporządkowanie hierarchii nagłówków i stylu zdjęć. To praca mniejsza niż nowa strona, a różnica w odbiorze bywa zaskakująco duża.

Osobna sprawa to sytuacja, w której strona jest technicznie przestarzała: wolna, nieresponsywna, trudna w edycji. Wtedy kosmetyka nie wystarczy i lepiej zbudować ją od nowa, od razu na bazie identyfikacji.

Elementy, które muszą się zgadzać

Kolory, z uwzględnieniem tego, że ekran i druk to dwie różne przestrzenie barwne. Typografia, z parą krojów i jasną hierarchią. Styl zdjęć i ilustracji. Ikonografia. Sposób kadrowania i marginesy. Ton komunikacji, czyli to, jak marka pisze o sobie i do klienta.

Warto też pilnować drobiazgów, o których łatwo zapomnieć: favikony, obrazka udostępniania w social mediach, wyglądu formularzy i przycisków, a nawet stron błędu. To one najczęściej wypadają poza system, bo nikt ich nie zaprojektował świadomie.

Typografia na ekranie a w druku

Nie każdy krój, który dobrze wygląda na plakacie, sprawdzi się na stronie. Fonty webowe muszą być czytelne w małych rozmiarach, dostępne na licencji do użytku w sieci i lekkie, żeby nie spowalniały ładowania. Dlatego przy identyfikacji dobieram kroje z myślą o obu światach. To ma również wymiar techniczny: ciężka typografia potrafi realnie spowolnić stronę, o czym piszę w tekście szybkość strony a sprzedaż.

Strona jako narzędzie sprzedaży

Spójna, dobrze zaprojektowana strona buduje zaufanie i wspiera sprzedaż. Połączona z silną identyfikacją działa jak przedłużenie marki, a nie jak folder z informacjami. Klient, który wcześniej widział Twoją reklamę albo opakowanie, natychmiast rozpoznaje, że jest we właściwym miejscu.

Do tego dochodzi widoczność. Strona spójna z marką i dobrze zbudowana technicznie łatwiej wypracowuje pozycje w wyszukiwarce. Piszę o tym szerzej w tekście strona internetowa pod SEO.

Jak to robię

Projektuję strony internetowe spójnie z identyfikacją wizualną, tak aby cała marka grała jednym tonem. Jeśli identyfikacja dopiero powstaje, robimy ją najpierw, a strona wynika z niej naturalnie. Jeśli już ją masz, projektuję stronę na jej bazie i pilnuję, żeby nic się nie rozjechało. Zobacz stronę usługi albo umów bezpłatną konsultację.

Najczęstsze miejsca, w których marka się rozjeżdża

Kolor przycisków. Na stronie prawie zawsze pojawia się kolor akcentowy, którego nie było w identyfikacji, bo trzeba było czymś wyróżnić przycisk. Jeśli nikt tego nie zaplanował, powstaje odcień z przypadku — i to on staje się najczęściej widywanym kolorem Twojej marki. Drugie miejsce: zdjęcia. Na materiałach drukowanych są profesjonalne, na stronie z darmowego banku, bo trzeba było szybko.

Trzecie: nagłówki. W identyfikacji jest jasna hierarchia, na stronie ktoś dobiera rozmiary na oko i po miesiącu istnieje pięć różnych wielkości tytułów. Czwarte: ikony, które nikt nie zaprojektował, więc pochodzą z darmowego zestawu i mają zupełnie inny charakter niż reszta marki. Te cztery drobiazgi wystarczą, żeby strona przestała wyglądać jak Twoja firma.

Jak to zaplanować, żeby nie płacić dwa razy

Przy projektowaniu identyfikacji od razu myślę o ekranie: dobieram kolory, które działają na monitorze i w druku, kroje dostępne na licencji webowej, i ustalam zasady dla elementów interfejsu — przycisków, formularzy, stanów aktywnych. Dzięki temu, gdy przychodzi moment na stronę, nie trzeba niczego wymyślać ani dokupywać, a projekt witryny jest po prostu kolejnym krokiem, nie osobnym projektem od zera.

Jeśli budżet nie pozwala zrobić obu rzeczy naraz, warto przynajmniej zapytać projektanta identyfikacji o zasady pod web i dostać je na piśmie. To niewielki dodatek do zakresu, który oszczędza sporo pieniędzy przy stronie. Zakres dopasowany do Twojej sytuacji ustalimy na bezpłatnej konsultacji.

Podsumowanie

Identyfikacja i strona to jedna marka na dwóch nośnikach. Zaprojektowane razem kosztują mniej i działają lepiej, bo strona nie musi wymyślać na nowo decyzji, które już zapadły. Zaprojektowane osobno dają dwie marki, które nie budują siebie nawzajem, a pierwsze wrażenie klienta rozjeżdża się z tym, co widział wcześniej. Jeśli masz już jedno z dwóch, to nie problem — po prostu drugie projektuje się na bazie pierwszego. Zobacz identyfikację wizualną albo strony internetowe.

Na koniec rzecz najprostsza, a najczęściej pomijana: poproś projektanta strony o te same pliki i zasady, które dostałaś lub dostałeś przy identyfikacji, i sprawdź, czy faktycznie ich użył. Pięć minut porównania kolorów i fontów potrafi wyłapać rozjazd, który inaczej zostanie z Tobą na lata i będzie widoczny w każdym materiale.