.
Nagłówek odgrywa kluczową rolę w projektowaniu strony internetowej i nadaje ton każdemu innemu jej aspektowi. Zwłaszcza teraz, w dobie triumfującego minimalizmu, kiedy różne cukierki dla oczu często są bezwzględnie, ale sprawiedliwie wyrzucane. Czasami nie pozostaje nic innego dla oka do złapania, więc rola projektowania nagłówków stron internetowych znacznie wzrosła.
Projektanci stron internetowych wkładają wiele wysiłku w projektowanie tej części strony internetowej, mając na uwadze kreatywność i wydajność. Według Google, potrzeba tylko 50 ms, aby wyrobić sobie opinię o stronie internetowej, a niektóre opinie rozwijają się w ciągu niewiarygodnych 17 ms. Znajomość konsumenta z marką zaczyna się tutaj.
Aby dowiedzieć się, jak zaprojektować nagłówek strony internetowej, który działa i jakie elementy powinien zawierać, czytaj dalej, będą przykłady.
„Życie to pierwsze wrażenie. You get one shot at it.
Make it everlasting.”
– J.R. Rim
Nagłówek strony internetowej to górna sekcja strony internetowej. W tamtych czasach ludzie rozumieli nagłówki jako wąskie paski w górnych częściach stron internetowych, które zawierały logo, wezwanie do działania i informacje kontaktowe. Ale w nowoczesnym projektowaniu, cała przestrzeń nad fałdą strony głównej jest uważana za nagłówek.
Będąc strategiczną częścią strony, którą ludzie widzą w pierwszych sekundach ładowania witryny, nagłówek działa jako rodzaj zaproszenia. Powinien on dostarczać podstawowych informacji o witrynie, aby użytkownicy mogli zrozumieć, co oferuje w ciągu kilku sekund.
Niektórzy projektanci tworzą oddzielne nagłówki dla różnych sekcji witryny. Na przykład, możesz zrobić duży nagłówek dla strony głównej i zostawić mały pasek dla innych stron. Ale zachowaj spójność. Projekt nagłówka na stronie wewnętrznej powinien być skróconą wersją nagłówka na stronie głównej. Jest to dobra praktyka projektowania stron internetowych.
- Co zawiera nagłówek strony internetowej?
- Najlepsze praktyki projektowania nagłówków stron internetowych
- Rozmiar nagłówka
- Hierarchia wizualna
- Stały (lepki) nagłówek
- Przesłanie przekazywane przez nagłówek
- Obrazy istotne
- Wideo lub animacja
- Dobrze zaprojektowane wezwanie do działania
- Najlepsze czcionki do nagłówków stron internetowych
- Sprosty projekt nagłówka
- Ukryta nawigacja (menu hamburger)
- Mobile header design
- Podsumowanie
Co zawiera nagłówek strony internetowej?
Zadaniem nagłówka jest udzielenie użytkownikom odpowiedzi na podstawowe pytania: jaka marka jest reprezentowana, jakie towary i usługi są oferowane, jak można skontaktować się z pracownikami firmy, czy są aktualne oferty, itd. Jeśli nagłówek wywołuje dobrą reakcję emocjonalną, a odbiorca czuje, że ma coś wartościowego, to zdałeś wstępny test.
Głównymi elementami nagłówka strony internetowej są zazwyczaj:
- logo lub identyfikator marki
- wezwanie do działania
- tekst lub nagłówek
- elementy nawigacyjne
- wyszukiwanie.
Nie musisz dodawać ich wszystkich naraz. Konieczne jest znalezienie równowagi między bogactwem informacji a ich harmonijnym uporządkowaniem. Używaj tylko tych danych, które są Ci potrzebne, przeładowanie nagłówka nie przyniesie korzyści, niezależnie od tego, jak ważne mogą się wydawać wszystkie odnośniki.
Zostawienie zbyt pustego nagłówka również nie jest dobrym pomysłem. Użytkownik, który nie jest w stanie rozgryźć Twojego interfejsu w ciągu kilku sekund, najprawdopodobniej opuści stronę i już na nią nie wróci. Zły nagłówek może odepchnąć odwiedzających do innej witryny z gorszą treścią.
W minimalistycznych projektach nagłówków prezentowane są tylko linki do głównych sekcji witryny oraz logo firmy. Technika ta jest szczególnie przydatna przy projektowaniu stron docelowych.
Najlepsze praktyki projektowania nagłówków stron internetowych
Nic nie ogranicza Twojej kreatywności, jeśli chodzi o projektowanie sekcji nagłówka. Nagłówek strony to obszar, który jest otwarty na szerokie pole kreatywnych decyzji projektowych, które powinny być zapadające w pamięć, zwięzłe i użyteczne.
Przejdźmy do głównych punktów.
Rozmiar nagłówka
Nie ma jednoznacznej odpowiedzi na pytanie, jaki rozmiar powinien mieć obraz nagłówka strony internetowej. Niektóre zasoby próbują dostarczyć zestawy dokładnych danych liczbowych, ale dziś jednym z najtrudniejszych aspektów budowania stron internetowych jest zapewnienie skuteczności dla każdego rozmiaru ekranu. A nawet jeśli dwa ekrany mają ten sam rozmiar, rozdzielczość może być różna, więc użytkownicy nie zobaczą tego samego.
Nie należy więc skupiać się na dokładnej koncepcji pikseli, lepiej kierować się prostymi zasadami zdrowego rozsądku.
Nagłówek powinien mieć taką wysokość, aby nie przeszkadzał w odbiorze treści. W przypadku zasobów informacyjnych dobrym wyborem będzie mały nagłówek, natomiast w przypadku landingów nagłówek może być większy.
W przypadku obszernych nagłówków lepiej zostawić trochę miejsca pod fałdą, aby użytkownik miał wgląd w to, co jest dalej na stronie i zaczął przewijać.
Hierarchia wizualna
Nielsen Norman Group po raz pierwszy sformułowała swoją teorię na temat wzorca F czytania w sieci w 2006 roku i do dziś nie straciła ona na aktualności.
Osoba, która znajduje się na nowej, nieznanej stronie zawsze zaczyna swoją wizualną podróż od lewego górnego rogu ekranu. A jeśli nie znajdzie tam oczekiwanych informacji, to strona będzie automatycznie postrzegana jako skomplikowana i niestandardowa, wymagająca zbyt wiele wysiłku, aby ją zrozumieć.
Logo. Inne badanie przeprowadzone przez NN/g wykazało, że użytkownicy znacznie łatwiej zapamiętają te marki, których loga są umieszczone po lewej stronie w porównaniu do umieszczenia ich w centrum lub po prawej stronie.
Jeśli masz logo o okrągłym kształcie, to dopuszczalne jest umieszczenie go w centrum ekranu, choć jego skuteczność będzie nadal niższa w porównaniu do tych umieszczonych po lewej stronie.
Nawigacja. Zwróć szczególną uwagę, aby nie zagracać tej sekcji witryny. Zbyt duża ilość linków przytłacza odwiedzających. Czasami konieczna może być całkowita zmiana struktury witryny, aby wyczyścić trochę miejsca dla najważniejszych kategorii.
Ułatwiaj odwiedzającym zrozumienie, gdzie się znajdują i jak znaleźć dalszą drogę. Użyj efektów hover, aby poprowadzić użytkowników w trakcie nawigacji.
Wezwanie do działania. Wdrażaj zasady hierarchii wizualnej, aby naturalnie wyróżnić CTA.
Stały (lepki) nagłówek
Stałe paski nawigacyjne, lub innymi słowy „lepkie nagłówki”, oznaczają, że nawigacja podąża za użytkownikiem po stronie podczas przewijania. Jest to obecnie standard projektowania stron internetowych.
Umieść stały nagłówek, jeśli nie narusza to ogólnej koncepcji projektu. Jest to dobry pomysł zarówno dla projektów desktopowych, jak i mobilnych:
- Strony e-commerce – koszyk jest zawsze przed użytkownikiem.
- Strony usługowe – numer telefonu lub CTA są stale widoczne.
Stałe nagłówki poprawiają doświadczenie klienta, utrzymując użytkowników w orientacji i dając im większą kontrolę.
Przesłanie przekazywane przez nagłówek
Przed zaprojektowaniem nagłówka należy rozważyć ogólny styl witryny i jej główny cel.
Jeśli jest to witryna promocyjna przeznaczona do prezentacji produktu, projekt nagłówka może zawierać łącza do głównych sekcji, w połączeniu z dużym obrazem bohatera na pierwszym ekranie, ponieważ głównym celem takiej witryny jest skuteczna prezentacja produktu. W przypadku stron e-commerce lub biznesowych sytuacja może być inna. Użytkownik musi łatwo nawigować, wiedzieć o najnowszych ofertach, jak szybko skontaktować się z menedżerem i gdzie zobaczyć zamówienia, które już złożył, więc w tym przypadku nagłówek może być bardziej zwięzły, ustępując miejsca innym kategoriom.
Istnieje kilka możliwych wiadomości, które może przekazać nagłówek:
- zachęć konsumenta do zrobienia czegoś
- pracuj nad budowaniem zaufania
- zachęć odwiedzającego do dowiedzenia się więcej
- bądź zabawny, itp.
Wybór zależy od celu konkretnej witryny.
Obrazy istotne
Zdjęcie w nagłówku powinno bezpośrednio przekazywać informacje o firmie. Na przykład, jeśli reprezentuje on usługę dostawy jedzenia, to obraz może przedstawiać schludnego kuriera z estetycznie atrakcyjnym jedzeniem. Ogólnie rzecz biorąc, odwiedzający, po obejrzeniu twojej strony, powinien chcieć coś od ciebie kupić.
Wysokiej jakości zdjęcia. Fotografia jest potężnym narzędziem dla projektantów stron internetowych. Może opowiadać historię, wywoływać emocje i motywować odwiedzających do przewijania dalej. Dla witryn z potężnymi, uderzającymi obrazami, spróbuj zrobić przezroczysty nagłówek. To lepiej wyświetla obrazy, zachowując główne linki.
Przesuwane obrazy. Jeśli masz kilka świetnych zdjęć reprezentujących działalność witryny, śmiało! Użytkownicy mogą przewijać zestaw wspaniałych obrazów o wysokiej rozdzielczości.
Ilustracje. Obrazy nagłówkowe dla stron internetowych muszą uderzyć we właściwy akord i ustanowić osobiste połączenie. Lepiej, jeśli obraz jest wyraźny i łatwo rozpoznawalny, nawet jeśli wycięty z nagłówka strony internetowej. Możesz to osiągnąć, wykorzystując dzisiejszy trend na ilustracje.
Wideo lub animacja
Nie skupiaj swojej uwagi wyłącznie na statycznych obrazach.
Dodanie wideo jest wśród najbardziej efektywnych pomysłów nagłówka strony internetowej. Jeśli to możliwe, spróbuj dodać tematyczny materiał wideo do nagłówka. Wiele stron internetowych używa go, aby przykuć uwagę publiczności podczas prezentowania swojej firmy lub produktu w najlepszy możliwy sposób.
Innym sposobem na uczynienie projektu jeszcze bardziej atrakcyjnym, żywym i zapadającym w pamięć jest dodanie animacji. To może zrobić naprawdę fajne nagłówki stron internetowych. Jeśli szukasz interaktywnej strony internetowej, która angażuje widzów, animacja jest świetną alternatywą.
Dobrze zaprojektowane wezwanie do działania
Podczas projektowania nagłówka strony internetowej, projektant dodaje tam pewne elementy wezwania do działania, takie jak „zaloguj się”, „zaloguj się”, „skontaktuj się” itp. Aby przyciągnąć uwagę użytkownika tak, aby skutkowało to potrzebnym działaniem, przycisk powinien zawierać napis zrozumiały dla klienta i być zauważalny wśród innych treści.
Umieszczenie wezwania do działania w strategicznie istotnym miejscu jest doskonałą okazją, aby nakłonić użytkowników do podjęcia działania już na samym początku, zwiększając tym samym współczynnik konwersji. Niektóre CTA mogą być używane przez pewien okres czasu, aby promować specjalne oferty, inne mają długoterminową obecność.
Najlepsze czcionki do nagłówków stron internetowych
Przede wszystkim klient odbiera nazwy działów oraz informacje przekazywane przez firmę: dane kontaktowe, ciekawe oferty. Dlatego należy wybrać wyraźne, czytelne czcionki, które nie pogorszą percepcji i będą zrozumiałe na pierwszy rzut oka.
W przypadku dużych nagłówków strony głównej można zastosować odważną typografię i pomysłowe elementy, które przyciągną uwagę użytkowników, w przeciwnym razie lepiej nie wybierać wymyślnych czcionek, które mogą okazać się trudne do odczytania.
Sprosty projekt nagłówka
Dzięki temu, że nagłówek jest dobrze zdefiniowany i schludny, odwiedzający będą mieli wrażenie, że nie próbujesz ich obciążać swoimi ofertami. Kreatywny nagłówek strony internetowej może mieć bardzo prosty wygląd.
Jest to rozwiązanie coraz częściej stosowane przy projektowaniu stron internetowych. Menu hamburgerowe to mała ikona trzech pasków, która po kliknięciu wyświetla pełne menu. Technika ta jest wykorzystywana przez projektantów, gdy muszą skupić się na głównym ekranie.
Z punktu widzenia użyteczności strony, jest to dobre rozwiązanie. Takie menu pochodzi z projektowania mobilnego i jest już znane użytkownikom. Hamburger jest odpowiedni dla stron promocyjnych, gdzie główny nacisk kładzie się na wysokiej jakości prezentację produktu za pomocą zdjęć lub filmów. W przypadku sklepów internetowych ta opcja może być mniej odpowiednia, ponieważ dla klienta ważne jest, aby w szybkim dostępie miał koszyk, wybrane produkty oraz pole wyszukiwania.
Mobile header design
Nagłówek powinien być poprawnie wyświetlany nie tylko na desktopowej wersji strony, ale również na mobilnej. Musi więc być responsywny i dobrze dopasowywać się do każdego urządzenia mobilnego.
Codzienne korzystanie z urządzeń mobilnych doprowadziło do powstania projektów stron internetowych, które nawet w swoich desktopowych wcieleniach wyglądają jak zorientowane na urządzenia mobilne. Na przykład implementacja dużych obrazów hero i menu hamburgerów ma swoje początki w projektowaniu mobilnym.
Podsumowanie
Stronę internetową prezentuje jej nagłówek. Jest on jak unikalna wizytówka. Dlatego projektując stronę internetową, zwróć maksymalną uwagę na nagłówek.
I jeszcze jedna najlepsza praktyka projektowania nagłówka strony internetowej: dokonuj regularnych zmian, aby Twoja strona była świeża i aktualna. Wykorzystaj niektóre spostrzeżenia z tego artykułu.