Powrót Powrót
Mariusz Miś Linkedin
7 lutego 2023 9 min czytania

Zlecasz lub dopiero chcesz zlecić zaprojektowanie strony i zastanawiasz się jak zweryfikować, czy ktoś dobrze wykonał swoją pracę? Nie tylko Twoje poczucie gustu może przydać się do oceny wyglądu strony. W tym artykule podpowiem Ci, jak ocenić gotowy pomysł na wygląd strony internetowej w postaci projektu graficznego.

– Ekipo, otrzymałem projekt nowej strony internetowej. Chętnie poznam Wasze opinie. – rzucił na komunikatorze firmowym szef marketingu w jednej z firm produkcyjnych.
– Fajna!
– Może być.
– Całkiem spoko, ale wg mnie brakuje efektu wow. Sądzę, że nie do końca tego oczekują nasi odbiorcy. Zobaczyłbym inną propozycję.
– Nasze logo jest zdecydowanie za małe.
– Można wymienić moje zdjęcie?

No niby super, jest reakcja. Tylko co teraz zrobić z takim feedbackiem?

Takie podejście to niestety pułapka. Gdy poddajesz projekt ogólnej ocenie, to każdy luźno podejdzie do jego interpretacji. Zwróci uwagę na jego estetykę, podzieli się ogólnym wrażeniem, będzie starać się wychwycić jak najwięcej elementów, które według niego są błędami lub zachowa się jeszcze inaczej.

Koniec końców otrzymasz zestaw różnych opinii, z którymi nie za bardzo wiadomo, co zrobić. Gdyby zapytasz, czy projekt się podoba, otrzymasz subiektywny feedback, oparty głównie na estetycznych przesłankach. Zadziała tutaj zasada ile ludzi, tyle opinii.

Zwróć uwagę, że nie ma znaczenia, ile razy będziecie poprawiać projekt, po jego opublikowaniu zawsze będą osoby, którym projekt będzie się podobał, jak i takie, którym się on nie spodoba. Taka rzeczywistość.

Projekt ma spełniać swoje zadania. Wygląd strony internetowej ma ogromne znaczenie. Ale nie w rozumieniu ładnego obrazka, a interfejsu użytkownika, który powstał przy odpowiednich założeniach i z zachowaniem zasad designu.

To, co może ułatwić opiniowanie projektu graficznego to jego podział na kilka obszarów. Przy takim podejściu jest większa szansa na uzyskanie merytorycznych komentarzy. No i przede wszystkim od razu skupiamy uwagę opiniującego na konkretnych składowych projektu. Jak to zrobić? Oto moje wskazówki:

1. Sekcja Above The Fold

Obszar widoczny bezpośrednio po jej załadowaniu (Above The Fold) to kluczowa sekcja strony internetowej. Warto tutaj zacząć weryfikowanie projektu, bo to miejsce pierwszego styku użytkownika ze stroną. Szczególnie w przypadku strony głównej i podstron ofertowych, choć nie tylko. Nigdy nie mamy pełnej kontroli nad tym, skąd odbiorca trafi na stronę i na którą podstronę. Dlatego warto zwrócić szczególną uwagę na wygląd strony internetowej w tym obszarze.

  • Zwróć uwagę, jakie emocje wywołuje pierwsze spojrzenie na tę sekcję. Czy pojawiają się jakieś wątpliwości? Czy wszystkie element są jasne i od razu wiadomo, jaki mają cel? Czy sekcja zachęca do konkretnego działania, np. kliknięcia, czy przewijania?
  • Upewnij się, że główne hasło i przycisk wezwania do działania są odpowiednio wyeksponowane.
  • Porównaj umiejscowienie logo i nawigacji na wszystkich ekranach. Czy wszystkie wyglądają, jak jedna i ta sama strona internetowa? To ważne, żeby użytkownik poruszający się po podstronach nie miał wątpliwości, że znajduje się w jednym ekosystemie.
  • Jeśli mówimy o stronie firmowej, a Twoja firma posiada identyfikację wizualną, to postaraj się obiektywnie ocenić, czy po wylądowaniu na stronie od razu widać, z jaką marką mamy do czynienia. Spójność kolorystyki, zastosowany key visual, fonty, język komunikacji – to wszystko powinno być spójne z dotychczasowym wizerunkiem marki. Ta spójność powinna być oczywiście utrzymana na całej stronie, ale łatwiej będzie zacząć od niewielkiego obszaru.

2. Czytelność

Obejrzyj ekrany sekcja po sekcji. W każdej zatrzymaj się na chwilę  i spójrz na całość, a następnie przyjrzyj się poszczególnym elementom.

  • Czy elementów graficznych nie jest za dużo? Czy tekst jest dobrze widoczny w zastosowanej kompozycji?
  • Czy tekst nie jest zbyt długi i wygodnie się go czyta? Czy długość tekstu nie dominuje wyglądu strony internetowej?
  • Czy kontrast pomiędzy tłem a tekstem jest wystarczająco duży, żeby wygodnie się go czytało?
  • Czy odległości pomiędzy wierszami tekstu nie są zbyt małe lub zbyt duże?
  • Czy elementy nie są zbyt blisko siebie? Czy niektóre elementy nie wydają się przylegać do innych grup elementów, niż zaplanowano? Czy strona ma wystarczającą ilość światła, że oko łatwo wyodrębnia jej elementy?
  • Czy nie zastosowano zbyt dużą liczbę rozmiarów i kolorów tekstów?
  • Czy zastosowano hierarchię elementów? Czy wykorzystując np. skalę, kontrast, czy balans projekt zwraca uwagę odbiorcy na te elementy, które są ważne dla odbiorcy?

Gdy projekt przegląda się pobieżnie, nie zawsze zwróci się uwagę na takie elementy. A szkoda byłoby nie trafić do naszego odbiorcy, przez złe zrozumienie naszych intencji. Dlatego klarowność układu jest ważną składową wyglądu strony www.

Zagadnienie czytelności nierozerwalnie wiąże się z zasadami designu. Zdaję sobie sprawę, że osoba, która nie jest projektantem graficznym, może mieć problem z weryfikacją tego aspektu. Niemniej zadanie sobie powyższych pytań, z pewnością zmniejsza prawdopodobieństwo dużych błędów w projekcie.

Jeśli chcesz dowiedzieć się więcej o zasadach projektowania wizualnego, to polecam artykuł autorstwa Nielsen Norman Group » 5 Principles of Visual Design in UX

3. Spójność

Tym razem spójrz na całość strony pod kątem spójności z wizerunkiem marki, a także konsekwencji w zastosowanych rozwiązaniach.

  • Czy zastosowano kolory z księgi identyfikacji wizualnej?
  • Czy proporcje kolorów i zastosowane kreacje wystarczająco nawiązują do stosowanej identyfikacji?
  • Czy zastosowane zdjęcia nie odbiegają kolorystyką i stylem od tych, które stosuje firma w swojej komunikacji?
  • Czy rozmiary nagłówków i treści wszędzie są analogiczne?
  • Czy zabiegi graficzne stosowane na różnych podstronach mają wspólny mianownik? Czy kolory, grubość linii, styl kształtów, itp. nawiązują do siebie?

Spójność jest ważna nie tylko dlatego, żeby strona sprawiała wrażenie jednego ekosystemu. W ten sposób witryna będzie pracować na wizerunek marki. Każde zetknięcie z wypracowaną identyfikacją marki sprawia, że odbiorca lepiej ją zapamiętuje.

4. Logika treści

Dzisiaj wiele mówi się o tym, jak internauci skanują strony, zamiast je czytać. Stosowanie wielu nagłówków i krótkich treści jest od dłuższego czasu na porządku dziennym. Zweryfikuj, czy stosowane treści mają logiczny ciąg i opowiadają spójną historię.

  • Czy treści ułożone są w krótkie akapity?
  • Czy wizualnie podkreślają zastosowany język korzyści tekstów, np. ikonami, ilustracjami, pokazanie większym fontem tego, co odbiorca może zyskać?
  • Czy w tekście stosowane są nagłówki, które pozwalają wynieść wartościową treść bez czytania mniejszego opisu?
  • Czy zastosowany tekst i grafika współgrają ze sobą znaczeniowo? Czy nie wprowadzają rozdźwięku?
  • Czy informacje zawarte w sekcjach kierujących do podstron i na tych podstronach są spójne? Czy użytkownik poczuje, że trafił w miejsce, którego szuka?

W ten sposób ocenisz, czy zastosowane rozwiązania graficzne mają sens, całość będzie zrozumiała dla odbiorcy i nie będzie się gubił na stronie.

5. Cel strony

Każda strona powstaje w jakimś celu i jej wygląd powinien pomóc ten cel zrealizować. Przyjrzyj się miejscom, które mają za zadanie wywołać działanie odbiorcy.

  • Czy przyciski Call To Action (CTA) są w kontrastującym kolorze?
  • Czy treść przycisków jasno mówi, gdzie prowadzą?
  • Czy kluczowe formularze są wyróżnione?
  • Czy są czytelne, a ich treść jasno mówi, do czego służą?
  • Czy elementy kierujące do użytkownika do celu (nagłówki, ikony itp.) są dobrze widoczne na stronie?

Cel budowanej strony powinniśmy mieć zawsze z tyłu głowy. Nie tylko wspomniane elementy pracują na jego osiągnięcie. Wszystko, o czym tutaj piszę, pomaga użytkownikowi przejść do działania i w ostatecznym rozrachunku osiągać cele biznesowe.

Wygląd strony internetowej - przykład przycisku Przykład wyglądu przycisku wezwania do działania (CTA)

6. Detale

Na koniec przyjrzyj się szczegółom. Strony projektuje się na tzw. gridach, czyli zestawie kolumn, na których opierają się elementy. Gdyby przez całą wysokość projektu przeprowadzić pionowe linie tak, by dotykały lewych i prawych krawędzi grafik i obszarów tekstowych to z grubsza otrzymamy kolumny, które wytyczą miejsca styku elementów. Zwróć uwagę, czy teksty i grafiki są do nich wyrównane. Porównaj na projekcie marginesy, wyśrodkowania, zaokrąglenia.

Ten ostatni, skrupulatny rzut oka upewni Cię, że projekt jest dopracowany i projektant poważnie potraktował swoje zadanie.

 

Wygląd strony internetowej - przykładowy grid Przykład zastosowanej siatki modułowej do projektu graficznego

Podsumowanie

Wygląd strony internetowej bez większego problemu może skomentować każdy. Do podjęcia decyzji de facto biznesowej potrzeba jednak więcej wniosków, niż ogólne stwierdzenie, czy projekt się komuś podoba. Polecam więc spojrzeć na projekt z kilku perspektyw, które razem złożą się na skuteczną stronę.

Warto też wiedzieć, że nie ma gwarancji, że wypracowany wygląd strony będzie tym idealnym. Co więcej, prawdopodobnie nigdy tak nie będzie. Stworzenie strony to dopiero początek działań marketingowych. Bardzo ważne jest analizowanie strony pod kątem zachowań użytkowników oraz jej rozwijanie i eksperymentowanie. Tylko taka droga pozwoli stale podnosić skuteczność witryny firmowej.

Mariusz Miś Linkedin
Współzałożyciel Ideative

Pierwszą stronę internetową stworzył jako uczeń liceum. Ponad 20 lat później dalej ekscytuje się każdym nowym projektem. Czerpie radość z poznawania nowych biznesów i poszukiwaniu dla nich rozwiązań.

Planujesz realizację nowej strony, ale masz obawy?

Rozmowa to nic zobowiązującego, ale może wiele rozjaśnić. Daj znać, jaki projekt planujesz, chętnie pomożemy.

Odezwij się do nas