Logo jest gotowe, zdjęcia wybrane, a strona nadal wygląda tak, jakby każdą sekcję przygotowała inna osoba. W jednym miejscu królują mocne kolory, w drugim cienkie litery, a przyciski zmieniają kształt przy każdym przewinięciu. Znasz ten efekt?
Spójny projekt strony internetowej powstaje wtedy, gdy poszczególne decyzje zaczynają ze sobą współpracować. Kolor podpowiada, gdzie kliknąć. Typografia porządkuje treść. Odstępy pomagają oddzielić jedną myśl od kolejnej. Nie trzeba przy tym rezygnować z charakteru marki ani zamieniać każdej podstrony w identyczny szablon.
Zanim wybierzesz kolor, ustal rolę sekcji
Ten poradnik dotyczy warstwy wizualnej. Cel strony, odbiorców i potrzebne treści warto mieć już opisane. Jeśli jesteś wcześniej w procesie, zacznij od tekstu jak zaplanować stronę firmową.
Teraz przyjrzyj się jednej podstronie. Co odwiedzający ma zauważyć jako pierwsze? Który fragment wyjaśnia ofertę, który ją potwierdza, a który prowadzi do kontaktu? Na tej podstawie ustalisz hierarchię. Bez niej nawet dobrze dobrana paleta może tylko podkreślić przypadkowy układ.
Praktyczne ćwiczenie: usuń na chwilę zdjęcia i kolory z makiety. Jeśli nadal rozumiesz kolejność informacji, masz sensowny punkt wyjścia. Jeżeli wszystko wygląda równie ważnie, popraw podział treści przed dopracowywaniem dekoracji.
Kolory powinny mieć przypisane zadania
Zamiast osobnego odcienia dla każdego bloku przygotuj kilka ról: tło, powierzchnia karty, główny tekst, opis pomocniczy i akcja. Potem dobierz do nich barwy marki. Dzięki temu nowa sekcja korzysta z ustalonych zasad.
W stylistyce AndrewDesign są to między innymi perła, biel, granat i złoto. Ich obecność nie oznacza jednak, że każdy element ma być złoty. Akcent jest użyteczny właśnie dlatego, że pojawia się w wybranych miejscach.
Przy ocenie palety sprawdź również komunikaty błędów i aktywne elementy. Kolor nie powinien być jedyną informacją, że formularz wymaga poprawki. Krótki opis problemu będzie dla użytkownika znacznie bardziej pomocny niż sama czerwona ramka.
Typografia ma tworzyć czytelną kolejność
Zacznij od tekstu, który rzeczywiście pojawi się na stronie. Przetestuj długi nagłówek, polskie znaki, cenę z dopiskiem i rozbudowaną nazwę usługi. Krótkie hasła zastępcze nie pokazują, jak projekt zachowa się po wprowadzeniu treści.
Ustal kilka poziomów: tytuł strony, nagłówek sekcji, tytuł karty, akapit i podpis. Różnice buduj rozmiarem, grubością oraz odstępem. Gdy każdy fragment ma inny font, czytelnik musi za każdym razem od nowa rozpoznawać, co ogląda.
Nie dobieraj jasnego tekstu wyłącznie na oko. W3C opisuje minimalny kontrast: zwykle 4,5:1 dla tekstu i 3:1 dla tekstu spełniającego definicję dużego. Sam fakt, że napis jest nagłówkiem, nie kwalifikuje go do niższego progu. W praktyce szczególnej uwagi wymagają małe etykiety i podpisy.
Odstępy mówią, które elementy należą do siebie
Tytuł powinien być wyraźnie powiązany z opisem, którego dotyczy. Dwie osobne usługi potrzebują większego rozdzielenia niż nagłówek i akapit tej samej karty. Taka logika jest ważniejsza od przypadkowego dodawania pustej przestrzeni.
Warto przyjąć wspólną skalę odstępów i wracać do niej przy kolejnych widokach. Nie oznacza to tych samych marginesów na telefonie i monitorze. Chodzi o powtarzalne proporcje oraz o to, żeby zmiana jednego elementu nie wymagała ręcznego poprawiania kilkunastu wyjątków.
Sprawdź też gęstszą sekcję, na przykład formularz albo FAQ. Projekt jest spójny wtedy, gdy porządkuje także te mniej efektowne miejsca, a nie tylko pierwszy ekran.
Zdjęcia, ikony i przyciski potrzebują wspólnego kierunku
Nie każde zdjęcie musi mieć identyczny kadr. Powinno być jednak jasne, dlaczego jedne materiały są duże, a inne pomocnicze. Zdjęcia realizacji mają pokazywać pracę. Grafiki dekoracyjne mogą budować nastrój, ale nie powinny udawać projektów klientów.
Podobnie z przyciskami: główna akcja powinna mieć rozpoznawalny wygląd i zrozumiały tekst. „Poproś o wycenę” wyjaśnia więcej niż samo „Dalej”, jeśli właśnie do rozmowy ma prowadzić ta sekcja.
Porównaj również stronę z wizytówką, ofertą PDF i materiałami w social mediach. Spójność nie wymaga kopiowania ich układu. Pomaga za to utrzymanie tej samej marki w różnych miejscach kontaktu.
Oceniaj system na kilku prawdziwych widokach
Przed akceptacją poproś o pokazanie strony głównej, podstrony usługi i widoku z większą ilością treści. Dołóż telefon. Jeżeli marka rozpoznawalna jest wyłącznie na szerokim ekranie z jednym krótkim nagłówkiem, projekt wymaga dalszej pracy.
Zapisz uwagi konkretnie: „nie widzę głównej akcji” albo „podpis jest zbyt mało czytelny”. Łatwiej je rozwiązać niż ogólne „brakuje efektu”. Szerszy etap uzgadniania układu opisuję w poradniku o projekcie UX/UI strony.
Potrzebujesz spójnej witryny dla firmy? Zobacz ofertę projektowania stron WordPress i napisz, jakie materiały marki już masz. Logo, obecna strona i kilka przykładów zastosowania identyfikacji pozwolą zacząć od konkretów.