W przeszłości, „nagłówek” w projektowaniu stron internetowych zazwyczaj odnosił się do wszechobecnego paska na górze stron internetowych, który zawierał logo, pasek nawigacyjny, a może niektóre dane kontaktowe i pasek wyszukiwania. Obecnie „nagłówek” odnosi się częściej do całej przestrzeni nad zagięciem na stronie głównej.
Bez względu na to, że ktoś znalazł Twoją witrynę poprzez wpis na blogu udostępniony w mediach społecznościowych lub z polecenia w innej witrynie, są duże szanse, że wejdzie na nią przez stronę główną. A pierwszą rzeczą, jaką zobaczą, jest ta pierwszorzędna nieruchomość na górze, położona nago.
Pisałem wcześniej o tym, jak odwiedzający lepiej reagują na przewidywalne umieszczenie pewnych elementów na Twojej stronie (takich jak logo i CTA). Projektując witrynę z myślą o spełnieniu ich oczekiwań i zwiększeniu ich komfortu poprzez uczynienie doświadczenia nieco bardziej przewidywalnym, możesz skutecznie poprawić wskaźniki klikalności i konwersji.
Teraz pomyśl o tej przestrzeni nagłówka na stronie głównej.
Większość ludzi polega na stronach głównych, aby dać im widok z lotu ptaka na to, o czym jest firma lub witryna, co oznacza, że nie możesz sobie pozwolić na zmarnowanie tej okazji, aby spełnić to oczekiwanie. 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 strony nie będzie konieczne, aby dowiedzieć się, co dana witryna dla nich zrobi. W istocie, Twój nagłówek powinien być 10-sekundową historią, która udowadnia odwiedzającym, jaką wartość będzie miała dla nich strona.
Więc, co zrobisz z tą przestrzenią, aby przykuć zainteresowanie odwiedzających?
Porozmawiajmy o niektórych trendach w projektowaniu nagłówków w 2017 roku, co możesz zrobić, aby wykorzystać tę bardzo widoczną nieruchomość i przyjrzyjmy się kilku interesującym przykładom nagłówków po drodze.
14 Trendy w projektowaniu nagłówków w 2017
Nie jest tak, że odwiedzający nie są świadomi swojej zdolności do przewijania strony lub klikania przez nawigację, 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 zapewnić zwięzłą wiadomość, która mówi im wszystko, co powinni wiedzieć. A jeśli 50 słów lub mniej nie wystarczy, obraz tła lub projekt będzie przekazywał resztę historii.
Przede wszystkim nagłówek strony głównej może sprawić lub zepsuć pierwsze wrażenia odwiedzających, dlatego tak ważne jest, aby przybijać tę sekcję.
Jeśli zmagasz się ze znalezieniem sposobu, aby rozpocząć swoją witrynę z hukiem, może znajdziesz trochę inspiracji w następujących trendach projektowania nagłówków w 2017 roku:
Oversized Hero Image
Dzięki modularnemu stylowi projektowania stron, aby były responsywne, większość projektów jest teraz podzielona na wyraźne bloki i sekcje. Ten styl projektowania dzieje się pożyczyć sobie dobrze do tych pełnowymiarowych obrazów bohaterów, które wypełniają tak wiele stron internetowych.
Take Cleverbird Creative stronie internetowej, na przykład. Wykorzystuje pojedynczy i uderzający obraz nałożony z prostym tekstem, aby powitać odwiedzających. Nie ma wątpliwości, o co im chodzi: uproszczone piękno.
Przesuwane obrazy
Myślę, że był czas, nie tak odległy w przeszłości, kiedy wielu z nas kwestionowało suwak jako realny element projektu. Jednak wielu projektantów wykonało świetną robotę wykorzystując go w nagłówkach. Istnieją przesuwane obrazy, które automatycznie przewijają się z jednego pięknego obrazu o wysokiej rozdzielczości do następnego, a są też takie, jak Pierre’a, które błagają odwiedzających, aby sami przejęli kontrolę nad tym doświadczeniem.
Transformative Parallax Imagery
Parallax scrolling wciąż rośnie w siłę, a nagłówek okazał się idealnym miejscem do zastosowania tego rodzaju wizualnej „iluzji” w projektach internetowych. Jednak to, co ostatnio można zauważyć, to projektanci nadający swojemu paralaksie przewijania transformacyjną krawędź, prawdopodobnie po to, aby zaskoczyć odwiedzających nieoczekiwanym rezultatem przewijania. Australijska agencja projektowa UX August właśnie to zrobiła ze swoim nagłówkiem.
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 od Le 28 wykonuje świetną robotę ustawiając nastrój dla strony restauracji, pokazując filmy z przodu i z tyłu lokalu.
Ukryta Nawigacja
Mimo iż można by argumentować, że menu hamburgerowe należy do stron oglądanych na urządzeniach mobilnych (zgodnie z pierwotnym założeniem), jest coś do powiedzenia na temat tego, co ten rodzaj nawigacyjnego minimalizmu robi dla nagłówka. Strona +rehabstudio jest tego dobrym przykładem. Poprzez schowanie nawigacji, twoja natychmiastowa uwaga zostaje przyciągnięta do ekscytujących wizualizacji w obrębie symbolu plusa… a następnie zdajesz sobie sprawę, że wokół niego znajdują się małe akcenty animacji.
Maskotka marki
Jeśli nagłówek jest miejscem do wprowadzenia odwiedzających do Twojej witryny, jaki jest lepszy sposób na jego rozpoczęcie niż przedstawienie im „postaci”, które spotkają po drodze? Jeśli twoja witryna używa maskotek – tak jak witryna WPMU DEV – jest to czas i miejsce, aby je pokazać.
Przyciągająca wzrok typografia
Jest wiele rzeczy, które można zrobić, aby nadać typografii witryny nowy wygląd. To powiedziawszy, czasami nie chodzi o wybór najbardziej fantazyjnej czcionki kursywnej, aby rzucić ludziom w twarz. Jeśli spojrzysz na przykład Slack powyżej, zobaczysz, że chodzi o wielkość czcionki. Nie ma nic naprawdę specjalnego o typografii wybrali, ale to jest tak czyste i jasne. To w połączeniu z rozmiarem głównej wiadomości jest tym, co sprawia, że tak przyciąga wzrok.
Content First
Dla stron internetowych z głównym naciskiem na dostarczanie dużej ilości treści dla odwiedzających (pomyśl o każdej dużej witrynie informacyjnej lub blogu), strategia content first dla nagłówka będzie miała najwięcej sensu. Naprawdę nie ma sensu w międleniu słów tutaj. Ludzie przyszli do witryny, aby przeczytać treść, nie muszą być bogged down przez dodatkowe czytanie na stronie głównej, więc można dostać prawo do niego jak Glamour does.
Products First
Podążając za tymi samymi liniami, witryny e-commerce nie muszą zawracać sobie głowy używaniem nagłówka, aby napisać chwytliwy nagłówek lub dostarczyć wyjaśnienie wideo na temat firmy. Odwiedzający wiedzą, po co przyszli na stronę, więc możesz od razu przejść do rzeczy. Jednak w przeciwieństwie do dostawców treści, sprzedawcy produktów mogą wykorzystać tę nieruchomość do zaprezentowania najlepiej sprzedających się produktów lub najnowszych wydań, aby zachęcić odwiedzających do dalszych działań, tak jak robi to Apple.
CTA Front-and-Center
Może nadejść czas, kiedy Twoja witryna ma coś naprawdę wyjątkowego do pokazania 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, tak jak to robi bloger Everywhereist ze swoją książką.
Wibrujące kolory i tekstury
Prawdopodobnie jedną z najmilszych rzeczy, które wyszły z Google Material Design, jest nasza gotowość do używania bardziej żywych kolorów, warstw i gradientów w projektowaniu stron internetowych. Nie muszą już być zdegradowane do przycisków wezwania do działania, mogą być używane do całych bloków na stronie, jak to robi Stripe ze swoim kolorowym i teksturowanym nagłówkiem.
Animacja
Nie ma absolutnie nic złego w posiadaniu statycznego projektu nagłówka strony głównej, zwłaszcza jeśli chcesz, aby uwaga została zwrócona na CTA lub wideo. Zachowaj prostotę, aby nie było żadnych elementów rozpraszających, które powstrzymywałyby odwiedzających od podjęcia działań, które zamierzałeś. Ale dla stron internetowych, które chcą ciekawy sposób, aby podzielić się swoją wiadomością z czytelnikami, animacje mogą być mądrym wyborem. Baianat używa małej animacji, aby podzielić się kilkoma wiadomościami w tej samej przestrzeni, dzięki czemu nie wygląda na zagraconą lub przepełnioną informacjami.
Projekty geometryczne
Geometryczne projekty stron internetowych są teraz naprawdę duże, ponieważ dobrze nadają się do logicznych i czystych linii potrzebnych do responsywnego projektowania. Więc nie jest niespodzianką, że widzimy więcej stron internetowych, takich jak ta dla Perspective API, integrują geometryczne elementy do projektu nagłówka. Są też inne, takie jak Stripe i WPMU DEV, które używają ukośnych linii, aby stworzyć unikalny i nieoczekiwany krajobraz wizualny dla odwiedzających.
Eksperymentalny
Wreszcie dochodzimy do eksperymentalnych projektów nagłówków. Kluczem do nich zazwyczaj nie jest to, aby nagłówek był szalenie dziwny i niezwykły. Byłoby to zbyt rozpraszające dla odwiedzających. Zamiast tego, należy skupić się na stworzeniu jakiegoś nieoczekiwanego efektu spowodowanego przez prosty ruch po nagłówku.
Przypomnij sobie projekt Teamgeek, na przykład. Można zauważyć, że jest coś „off” o logo i wiadomość w centrum strony, ale to nie jest, dopóki nie zaangażować się z nim, że zdajesz sobie sprawę, że jest specjalny twist built in.
Wrapping Up
Jak widać, istnieje wiele sposobów można zaprojektować nagłówek dla witryny WordPress. Jeśli przyjrzysz się uważnie powyższym przykładom, zauważysz, że projektanci byli bardzo strategiczni co do stylu nagłówka, którego używali i jakie elementy były w nim zawarte. Gdy nadejdzie czas na zaprojektowanie nagłówka dla Twojego następnego projektu witryny, zastanów się, czy będziesz potrzebował następujących elementów:
- Logo
- Tradycyjny vs. ukryty
- Sekcja nagłówka Hero vs. Przejście od razu do treści
- Tagline lub deklaracja misji
- Informacje kontaktowe
- Łącza do mediów społecznościowych
- Pasek wyszukiwania
- Wielojęzyczny toggle
- Koszyk na zakupy
- Maskotka marki
- Fotografia stockowa vs. rzeczywista fotografia firmy, ludzi lub produktu
- Statyczny obraz vs. przesuwane obrazy vs. wideo w tle
- Embedded promo video
- Przycisk Call-to-action
- Formularz kontaktowy
- Hello bar
Możesz znaleźć inne elementy, które należą do tej górnej sekcji nagłówka strony głównej, zbyt. To naprawdę sprowadza się do tego, co ma największy sens dla Twojej witryny. Innymi słowy, które elementy będą opowiadać historię Twojej marki, edukować i angażować odbiorców od razu po wejściu na stronę, a także wzbudzać wystarczające zaufanie, aby napędzać ich do dalszego działania w witrynie?
Tagi:
- design
- nagłówki
.