W przeszłości “nagłówek” w projektowaniu stron internetowych odnosił się do zawsze obecnego paska na górze stron internetowych, który zawierał logo, pasek nawigacji, a może niektóre dane kontaktowe i pasek wyszukiwania. Obecnie “nagłówek” odnosi się częściej do całej przestrzeni nad zakładką na stronie głównej.
Jeśli ktoś nie znalazł Twojej witryny za pośrednictwem postu na blogu udostępnionego w mediach społecznościowych lub z polecenia na innej stronie, szanse są duże, że wprowadzi ją na stronie głównej. I pierwszą rzeczą, którą zobaczą, jest to, że pierwszorzędne nieruchomości na górze są nagie.
Pisałem już wcześniej o tym, jak odwiedzający lepiej reagują na przewidywalne umieszczenie niektórych elementów na twojej stronie (takich jak logo i CTA). Projektując stronę internetową w celu spełnienia ich oczekiwań i zwiększenia ich komfortu poprzez uczynienie doświadczenia nieco bardziej przewidywalnym, możesz skutecznie poprawić współczynniki klikalności i konwersji.
Teraz pomyśl o tej przestrzeni nagłówka na stronie głównej.
Większość ludzi zaczęło polegać na stronach domowych, aby dać im widok z lotu ptaka na to, o co chodzi w firmie lub witrynie, co oznacza, że nie możesz sobie pozwolić na zmarnowanie tej okazji, aby spełnić te oczekiwania.
Oczywiście projekt nagłówka strony głównej może być unikalny dla Twojej marki, ale elementy znajdujące się w nim naprawdę nie powinny być. Odwiedzający oczekują, że przewijanie nie będzie konieczne, aby dowiedzieć się, co strona zrobi dla nich. W istocie, Twój nagłówek powinien być 10-sekundową historią, która udowadnia odwiedzającym, jaką wartość będzie dla nich witryna.
Co zrobisz z tą przestrzenią, aby zainteresować odwiedzających?
Porozmawiajmy o niektórych trendach w projektowaniu nagłówków, co możesz zrobić, aby skorzystać z tej dobrze widocznej nieruchomości, a także przyjrzyj się interesującym przykładom nagłówków po drodze.
Uwaga: Nie wszystkie przykładowe witryny wymienione poniżej używają WordPress, ale można je wykonać za pomocą WordPress.
14 nagłówkowych projektów stron internetowych dla twojej inspiracji
To nie tak, że odwiedzający nie są świadomi swojej zdolności do przewijania strony w dół lub nawigacji po kliknięciach, aby dowiedzieć się więcej o marce stojącej za witryną. Ale dlaczego mieliby to robić?
W nagłówku jest wystarczająco dużo miejsca, aby dostarczyć zwięzłą wiadomość, która mówi im wszystko, co muszą wiedzieć. A jeśli 50 słów lub mniej to za mało, obraz tła lub projekt przekaże resztę historii.
Przede wszystkim nagłówek strony głównej może zrobić lub złamać pierwsze wrażenia odwiedzających, dlatego tak ważne jest, aby przybić tę sekcję.
Jeśli masz problemy ze znalezieniem sposobu na rozpoczęcie witryny z hukiem, być może znajdziesz inspirację w następujących projektach nagłówków.
1. Ponadgabarytowy Obraz Bohatera
Dzięki modułowemu stylowi projektowania witryn, aby były responsywne, większość projektów jest teraz podzielona na odrębne bloki i sekcje. Ten styl projektowania nadaje się dobrze do tych obrazów bohaterów o pełnej szerokości, które zaludniają tak wiele stron internetowych.
Weźmy na przykład kreatywną stronę internetową Cleverbird. It wykorzystuje pojedynczy i uderzający obraz pokryty prostym tekstem, aby powitać odwiedzających. Nie ma pomyłki, do czego zmierzają: uproszczone piękno. Poza tym posiadanie Wonder Woman nie boli.
2. Przesuwane Obrazy
Myślę, że był czas, w niedalekiej przeszłości, kiedy wielu z nas kwestionowało suwak jako realny element konstrukcyjny. Jednak wielu projektantów wykonało świetną robotę, wykorzystując ją w nagłówkach. Są przesuwane obrazy, które automatycznie przewijają się z jednego pięknego obrazu w wysokiej rozdzielczości do następnego, a są tacy, jak Pierre, którzy błagają odwiedzających, aby sami przejęli kontrolę nad tym doświadczeniem.
3. Transformacyjne Obrazy Paralaksy
Strona studia projektowego Anakin.
Paralaksa jest cechą nowoczesnego projektowania stron internetowych od pewnego czasu. Chociaż kilka lat temu uważano go za “gorącego”, stosowanie efektów paralaksy jest nadal popularne, a nagłówek okazał się idealnym miejscem do zastosowania tego rodzaju wizualnej “iluzji” w projektach internetowych. Jednak to, co zobaczysz ostatnio, to projektanci nadający swojej paralaksie przewagę transformacyjną, prawdopodobnie po to, aby zaskoczyć odwiedzających nieoczekiwanym rezultatem przewijania. Studio Projektowe Anakin wykonało to właśnie z nagłówkiem.
4. Tła Wideo
Tło wideo to kolejny z tych ostatnich trendów, który naprawdę działa najlepiej, gdy jest stosowany do nagłówka strony głównej. Ten z Brave People świetnie nadaje ton swojej stronie internetowej, pokazując różne klipy.
5. Ukryta Nawigacja
Chociaż można argumentować, że menu hamburgera należy do stron internetowych przeglądanych na urządzeniach mobilnych (zgodnie z pierwotnym przeznaczeniem), można coś powiedzieć o tym, co ten rodzaj minimalizmu nawigacyjnego robi dla nagłówka. Strona internetowa Canals jest tego dobrym przykładem. Po schowaniu nawigacji natychmiast skupisz się na ekscytujących efektach wizualnych.
6. Maskotka Marki
Jeśli nagłówek jest miejscem, w którym można wprowadzić odwiedzających do twojej witryny, czy jest lepszy sposób na rozpoczęcie go niż przedstawienie im “postaci”, które spotkają po drodze? Jeśli Twoja strona używa maskotki marki – tak jak strona Kellogg ‘ s Frosted Flakes—jest to czas i miejsce, aby je pokazać.
7. Przyciągająca Wzrok Typografia
Można wiele zrobić, aby nadać typografii witryny lifting. To powiedziawszy, czasami nie chodzi o wybranie najbardziej fantazyjnej czcionki kursywnej, aby rzucać ludziom w twarz. Jeśli spojrzysz na powyższy przykład Slack, zobaczysz, że chodzi o rozmiar czcionki. Tnie ma tu nic specjalnego w typografii, którą wybrali, ale jest tak czysta i jasna. To w połączeniu z wielkością głównego przekazu sprawia, że jest on tak przyciągający wzrok.
8. Najpierw Treść
W przypadku stron internetowych, które koncentrują się na dostarczaniu odwiedzającym tłumów treści (pomyśl o dowolnej większej witrynie z wiadomościami lub blogu), strategia treści pierwszej dla nagłówka będzie najbardziej sensowna. Naprawdę nie ma sensu się tu wtrącać. Ludzie przyszli do twojej witryny, aby przeczytać Twoje treści, nie muszą być ugrzęźnięci przez dodatkowe czytanie na stronie głównej, dzięki czemu możesz od razu przejść do niej tak, jak robi to Glamour.
9. Produkty Pierwsze
W ten sam sposób witryny e-commerce nie muszą się martwić o używanie nagłówka, aby napisać chwytliwy nagłówek lub dostarczyć wideo wyjaśniającego o firmie. Odwiedzający wiedzą, po co przyszli na stronę, więc możesz od razu się do niej dostać. Jednak w przeciwieństwie do dostawców treści, sprzedawcy produktów mogą korzystać z tej najwyższej jakości nieruchomości, aby pokazać swoje najlepiej sprzedające się produkty lub najnowsze wersje, aby zachęcić odwiedzających, podobnie jak Apple.
10. CTA Front-and-Center
Może nadejść czas, gdy Twoja witryna ma coś naprawdę wyjątkowego, co można pokazać odwiedzającym, coś, co chcesz, aby pobrali lub kupili. Teraz, nawet jeśli nie jest to główna atrakcja Twojej witryny, możesz użyć nagłówka tymczasowo lub na stałe, aby podkreślić to specjalne wezwanie do działania, jak robi to każdy bloger ze swoją książką.
11. Żywe kolory i tekstury
Jedną z najmilszych rzeczy, jakie możemy osiągnąć dzięki Google Material Design, jest chęć używania bardziej żywych kolorów, warstw i gradientów w projektowaniu stron internetowych. Nie muszą być już relegowane do przycisków wezwania do działania, mogą być używane do całych bloków na stronie internetowej, tak jak robi to Stripe z kolorowym i teksturowanym nagłówkiem.
12. Animacja
Nie ma absolutnie nic złego w statycznym projekcie nagłówka strony głównej, zwłaszcza jeśli chcesz, aby skupiono się na CTA lub wideo. Zachowaj prostotę, aby nie rozpraszać odwiedzających przed podjęciem zamierzonych działań.
Ale dla stron internetowych, które chcą w ciekawy sposób podzielić się swoją wiadomością z czytelnikami, spróbuj animacji. Na przykład Disney używa małej animacji, aby udostępniać wiele wiadomości w tej samej przestrzeni, co uniemożliwia jej wyglądanie na bałagan lub przepełnione informacjami.
13. Wzory Geometryczne
Geometryczne projektowanie stron internetowych jest teraz naprawdę duże, ponieważ nadaje się dobrze do logicznych i czystych linii potrzebnych do responsywnego projektowania. Nic więc dziwnego, że coraz więcej stron internetowych, takich jak API Perspective, integruje elementy geometryczne z projektem nagłówka. Inne, takie jak Stripe i WPMU DEV, używają ukośnych linii, aby stworzyć unikalny i nieoczekiwany krajobraz wizualny dla odwiedzających.
14. Eksperymentalne
Na koniec dochodzimy do eksperymentalnych projektów nagłówków. Kluczem do nich zwykle nie jest to, że nagłówek jest dziwnie dziwny i niezwykły. To byłoby zbyt rozpraszające dla odwiedzających. Zamiast tego powinieneś skupić się na stworzeniu nieoczekiwanego efektu spowodowanego prostym ruchem po nagłówku.
Weźmy na przykład projekt Teamgeek. Możesz zobaczyć, że jest coś “off” w logo i wiadomości na środku strony, ale dopiero, gdy się z nim zaangażujesz, zdasz sobie sprawę, że wbudowany jest specjalny skręt.
Wrapping Up
Jak widać, istnieją różne sposoby projektowania nagłówka dla witryny WordPress. Jeśli przyjrzysz się bliżej powyższym przykładom, zauważysz, że projektanci byli bardzo strategiczni co do stylu nagłówka, którego użyli i które elementy zostały w nim zawarte. Gdy przychodzi czas na zaprojektowanie nagłówka dla następnego projektu witryny, zastanów się, czy potrzebujesz następujących elementów:
- Logo
- Tradycyjne kontra Ukryte
- Sekcja nagłówka bohatera a przejście do treści
- Slogan lub misja
- Informacje kontaktowe
- Linki do mediów społecznościowych
- Pasek wyszukiwania
- Przełącznik wielojęzyczny
- Koszyk
- Maskotka marki
- Fotografia stockowa a rzeczywista Fotografia firmy, ludzi lub produktu
- Statyczny obraz vs. przesuwne obrazy vs. tło wideo
- Embedded promo video
- Przycisk Call-to-action
- Formularz kontaktowy
- Hello bar
Możesz również znaleźć inne elementy, które należą do tej sekcji górnego nagłówka strony głównej. To naprawdę sprowadza się do tego, co ma największy sens dla Twojej witryny.
Innymi słowy, które elementy opowiedzą historię twojej marki, edukują i angażują odbiorców od razu i wzbudzają wystarczające zaufanie, aby napędzać ich do przodu w Twojej witrynie?
Nota wydawcy: Ten post został zaktualizowany pod kątem dokładności i trafności. [Pierwotnie Opublikowany: Sierpień 2017 / Zmieniony: Sierpień 2021]
Tagi:
