Nagłówki bloga: 20 świetnych przykładów i najlepszych praktyk
Nagłówek jest prawdopodobnie pierwszą rzeczą, jaką nowy użytkownik widzi na blogu, więc jest to pierwsze wrażenie - ale dlaczego nagłówek bloga jest o wiele ważniejszy, a przynajmniej inny niż nagłówek podstawowej strony internetowej?
Nagłówki blogów wymagają większej funkcjonalności. Inne projekty stron internetowych mogą się różnić pod względem wykorzystania, dlatego też informacje zawarte w nagłówku strony i sposób jej prezentacji mogą się znacznie różnić.
Na blogu są jednak najlepsze praktyki, które mogą pomóc czytelnikowi w poruszaniu się po blogu i lepszym zaangażowaniu.
Dokładnie to zrobi ten artykuł. Pomożemy Ci zdefiniować, co powinno być częścią nagłówka bloga i jak go ostatecznie wdrożyć , a następnie przyjrzymy się dwóm wspaniałym przykładom, które właśnie to robią.
Aby ustalić, w jaki sposób należy zaprojektować nagłówek bloga i co do niego wstawić, musimy zadać kilka pytań na temat bloga:
- Jaki powinien być nastrój, aby przyciągnąć właściwą grupę docelową?
- W jaki sposób pierwsze wrażenie za pośrednictwem nagłówka może informować o tym, o czym jest blog?
- Jak nagłówek bloga może dać pierwsze wrażenie: "Różnię się od innych".
- Które elementy treści muszą być natychmiast zauważalne, aby stworzyć lepsze działanie? (klikając na linki, subskrybowanie itp.)
Zagłębmy się jeszcze głębiej ...
Jaki powinien być nastrój, aby przyciągnąć właściwą grupę docelową?
Kiedy użytkownik najpierw wchodzi na jakąkolwiek stronę internetową, pierwszą rzeczą, którą określają, jest "osobowość" bloga - i to, czy jest dla nich właściwa.
Ma to zasadnicze znaczenie dla projektowania blogów , ponieważ blogi wymagają od właściwych odbiorców docelowych sukcesu .
Na przykład: dzięki zawartości w branży kreatywnej projekt blogu powinien mieć kreatywny nagłówek, który zrobi wrażenie i zainspiruje nowych. Bardziej techniczny lub biznesowy blog będzie wymagał prostego, wysokiej klasy nagłówka, który jest zarówno estetyczny, jak i dość subtelny.
W jaki sposób pierwsze wrażenie za pośrednictwem nagłówka może informować o tym, o czym jest blog?
Część z tego obejmuje rozwijanie ogólnego nastroju, jaki powinien stworzyć nagłówek, ale nagłówek może zrobić więcej, aby wyjaśnić nowemu czytelnikowi, o czym jest ten blog.
Pierwsze wrażenie odkrywa osobowość bloga, ale o co właściwie chodzi? Można dodać slogan z logo, które mówi, lub zawierać mały akapit / frazę informującą czytelnika, czym jest ten blog i dla kogo jest przeznaczony.
W jaki sposób nagłówek bloga może dać pierwsze wrażenie: "Różnię się od innych"?
Innym sposobem na to jest: "Jak ten blog zostanie zapamiętany? "
Jeśli będzie się komponował z każdym innym blogiem w Internecie, to wcale nie jest dobry motyw na blogu. Dlatego nagłówek jest idealnym miejscem na logo, slogan i inne marki.
Ogólny wygląd i treść prezentowana na pierwszy rzut oka jest tym, co się sklei, o ile dobrze się przedstawi.
Które elementy treści muszą być natychmiast zauważalne, aby stworzyć lepsze działanie? (klikając na linki, subskrybowanie itp.)
Nagłówek powinien być ogólnie prosty pod względem treści, ale niektóre formy treści mogą być obecne, aby pomóc w wezwaniu do działania. Po tym, jak nowy czytelnik oceni początkowe wrażenie bloga i zdecyduje się pozostać, zaczną szukać fragmentów treści i miejsc do nawigacji.
Gdy kategorie są natychmiast obecne, widz obejrzy je i znajdzie obszary, które ich interesują. Gdy pole wyszukiwania jest obecne lub kanał RSS, nie mogą od razu zasubskrybować ani wykonać wyszukiwania, ale podświadomie odnotowali jego położenie i miejsce, w którym można je znaleźć w przyszłości.
Opcje różnią się znacznie poza to, ale w zasadzie każda treść umieszczona w nagłówku jest pierwszym wrażeniem dla treści , dlatego powinna być najważniejsza i dobrze zaprojektowana.
Spójrzmy teraz na kilka świetnych nagłówków blogów, a następnie omówmy ich zalety.
1. Tutorial9
Tutorial9 zawiera prawie wszystkie korzyści omówione powyżej. Logo i tagline natychmiast pokazują, o czym jest blog i jak może pomóc czytelnikowi.
Główne elementy nawigacyjne znajdują się na dużych, zauważalnych zakładkach z ikonami dołączonymi do ekranu. To natychmiast prowadzi użytkownika do treści i zachęca ich do głębszego zagłębiania się w blogu.
Projekt tła jest kreatywny, a nawet ma temat twórczości artystycznej - dokładnie to, do czego przeznaczone są tutoriale. Ponadto, po prawej stronie znajdują się istotne treści, w tym kanał RSS, formularz wyszukiwania, strony bloga i inne.
2. Home Design Znajdź
Ten nagłówek wykorzystuje wielkie zastosowanie hierarchii wizualnej, aby uzyskać punkt przekreślony. Tytuł bloga wystarcza, by powiedzieć czytelnikowi, o co w tym wszystkim chodzi, i promuje pozostawanie i obserwowanie w szczegółach, o co chodzi.
Oko jest następnie doprowadzane do pierwszego zestawu nawigacji, gdzie wyraźnie zaznaczona jest strona, jak również strona kontaktowa. Obrazy po prawej stronie ustawiają nastrój i stanowią inspirację dla osób zainteresowanych tematem tego bloga.
Wreszcie obrazy po prawej stronie prowadzą w dół do bardziej opisowej frazy na blogu.
3. Blog Blog Design
Najbardziej znaczącymi cechami tego nagłówka są logo i slogan. Konkretni odbiorcy docelowi tego bloga sprawiają, że jest on bardziej unikalny i na pierwszy rzut oka, o czym jest bloga, nowy czytelnik widzi to i jest przekonany, że różni się od innych.
Jeszcze dalej, w mniejszym tekście, znajduje się liczba czytników i link do kanału RSS, a także nawigacja podstawowa pozwalająca na dalsze zagłębianie się w tematykę bloga lub samych treści.
4. Kevin John Gomez
Odręczny apel i zdjęcie sprawiają, że motyw tego bloga jest osobisty i pasuje do nazwy strony internetowej - samego webmastera. To osobisty blog osoby twórczej, a nagłówek doskonale to komunikuje.
Kompletna nawigacja znajduje się w nagłówku, ponieważ jest to ograniczona nawigacja i może mieć większy nacisk na nią.
5. Grafika Naldz
Ten nagłówek zapewnia świetne logo i efektywne wykorzystanie treści w nagłówku. Największą część nagłówka stanowi logo lub nazwa bloga, co ułatwia jego zapamiętanie.
Oko jest następnie doprowadzane do nawigacji, gdzie czytelnik może głębiej zagłębić się w blogu w danym momencie i tam, lub przynajmniej zorientować się, o czym jest blog. Nawigacja i kategorie to świetny sposób, aby poinformować nowych czytelników o tym, o czym jest blog, jeśli są dobrze zdefiniowani.
Grafika po prawej stronie pomaga ustawić nastrój bloga, a także prowadzi do liczby subskrybentów i łącza RSS. W przypadku bloga o średniej lub dużej liczbie wyświetleń dobrze jest wyświetlić tę liczbę w nagłówku, ponieważ w pewien sposób sprawdza zawartość bloga i nadaje mu wiarygodność.
W górnej części znajduje się również dodatkowa treść, w tradycyjnym miejscu dla tego rodzaju treści, aby można ją było łatwo znaleźć.
6. Pro Blog Design
Dwa kontrastujące zielone elementy w tym nagłówku mogą sprawić więcej niż jedno. Większość z nich widzi logo z zielonym pop koloru po lewej stronie, gdzie czyta tytuł blogu i nagłówek. Jest to kolejny świetny tytuł, który mówi nowym czytelnikom, jak ten blog może im pomóc.
Następnie ustawia się duże, duże zakładki z 1) ich widocznym rozmiarem i 2) tym innym kolorem zielonym. Druga zielona zakładka mówi czytelnikowi, że nie jest to tylko blog, który może pomóc ci w lepszym projekcie bloga, ale oferuje usługi projektowania blogów. Ponadto, ikony mediów społecznościowych, które czytelnik może wziąć pod uwagę w celu późniejszego działania.
7 października
Ten zilustrowany nagłówek kreacji szybko ustawia nastrój na blogu. Ilustracja jest autorstwa webmastera i daje blogowi osobiste podejście. Zaczynamy dostrzegać treść bloga, zanim zostanie on przedstawiony.
Ten projekt umieszcza małe zdanie wprowadzające bezpośrednio w nagłówku, określając czym dokładnie jest ten blog. Główna nawigacja znajduje się tuż pod logo, więc jest zauważana niemal natychmiast. W nagłówku są też inne szczegóły, które są fajne i zachęcają widza do dłuższego oglądania nagłówka.
8. Mark Forrester
Ten zabawny, dziwaczny i kreatywny nagłówek określa nastrój i jest na tyle wyjątkowy, by naprawdę przyciągnąć twoją uwagę.
Widz na pierwszy rzut oka natychmiast analizuje nagłówek i jego drobne szczegóły oraz historię, którą prezentuje. W tym miejscu pojawia się logo i tagline, gdzie widok dowiaduje się o czym jest blog.
Po zakończeniu korzystania z nagłówka widzą nawigację w górę, a zakładki społecznościowe po prawej. Nagłówek również ładnie prowadzi do treści, prowadząc użytkownika do przewijania w dół i sprawdzania więcej.
9. Kult-Foo
To tylko piękny nagłówek, który codziennie przyciąga uwagę wielu czytelników. Nastrój ma charakter kreatywny i inspirujący i przyciąga właściwą publiczność. Logo w tym nagłówku jest "źródłem" reszty nagłówka - pudełkiem, które prowadzi do reszty projektu.
Pasek wyszukiwania znajduje się tuż poniżej, aby ułatwić dostęp, a dwa obszary zawartości są zdefiniowane po prawej stronie.
Nawigacja jest jednak bardzo fajna w tym nagłówku. Ma więcej czucia w chmurze tagów, a większe kategorie to większy tekst. W ten sposób, gdy nowy czytnik zobaczy chmurę znaczników, najpierw zobaczy największy przedmiot.
W zamian nawiązują połączenie z tymi słowami i treścią blogów. Obecnie na blogu znajduje się większość materiałów, które najbardziej zapadają w pamięć. Sprawdź aktualną wersję tej strony: obszar chmurki nagłówka faktycznie przesunięty przy przewijaniu użytkownika, z dekoracyjną i nie rzucającą się w oczy krawędzią.
10. Vectips
Ten nagłówek jest raczej minimalistyczny, co kładzie większy nacisk na bity treści, które ma. Logo jest dekoracyjne i przedstawione w kontrastowym kolorze, dzięki czemu jest niezapomniany.
Po nim następuje linia znaczników, która dzieli to, o czym jest blog, a następnie prosta nawigacja, która to definiuje. Nawigacja jest świetna, ponieważ ma poszczególne ikony, które zwracają na siebie uwagę, gdy czytelnik przegląda je.
Zabawna ilustracja po prawej stronie ustawia nastrój i kieruje wzrok do góry.
11. Post w niepełnym wymiarze godzin
W przeciwieństwie do Vectips, ten nagłówek dużo się dzieje. Logo w lewym górnym rogu zawiera slogan, a następnie prowadzi wzrok do nawigacji. Zanim jednak klikniesz w nawigację, nagłówek nadal informuje o tym, w jaki sposób witryna może pomóc nowym użytkownikom, a następnie oferuje więcej funkcji nawigacji. Dzięki tej hierarchii czytelnik uzyskał doskonały przegląd nawigacji po całej witrynie.
Ilustracja po prawej stronie prowadzi widza do wzięcia pod uwagę kanału RSS, a następnie oko jest dalej promowane na stronie fanowskiej firmy na Facebooku.
12. TutCandy
Największą cechą nagłówka TutCandy jest jego twórcze, kolorowe i szczegółowe obrazy. Dzięki temu ustawia nastrój i tworzy wiarygodność bloga takiego jak ten. Nazwa przeplata się z kolorową ilustracją i można ją uznać za logo.
Po prawej stronie znajduje się slogan wyjaśniający, czym jest blog i jak jest inny: "Tylko najtrudniejsze samouczki projektowania." Mimo że jest to przede wszystkim prosta i przyjemna gra słów, jest kilka słów kluczowych, które uderzają czytelnika w wywołać pozytywny osąd. "Tylko" - jest niepowtarzalny, oryginalny, jedyny w swoim rodzaju.
Odpowiada na pytanie "Jak ten blog różni się od innych?". "Tastiest" - tagline mógłby być "Tasty Design Tutorials". Nie tylko to brzmi trochę dziwnie, ale nie oznacza to żadnego pierwszeństwa w stosunku do innych samouczków projektowych lub innych blogów samouczków.
Powyżej znajduje się również nawigacja dotycząca bloga i pasek wyszukiwania po prawej stronie. Bezpośrednio poniżej, treść jest zdefiniowana i zorganizowana, co prowadzi czytelnika do głębszego wnikania w bloga.
13. Yoast
Ten blog zapewnia świetną treść w nagłówku. Unikalny szkielet pozwala nagłówkowi zawierać grafikę i wystarczającą zawartość do nawiązania połączenia z nowym czytnikiem. Postać i ilustracja stojąca za nim jest jedną z pierwszych rzeczy, które zauważy nowy użytkownik, i wykonają dobre połączenie, kierując znak do nagłówka po lewej stronie.
Po przejściu oka do treści nagłówka widzą logo i sposoby subskrybowania lub łączenia się z blogiem. Następnie czyta się tak, jak normalny fragment treści "o stronie", z wyjątkiem tego, że znajduje się na pierwszej stronie, co oznacza, że nie tylko czytelnicy, którzy są wystarczająco zainteresowani, aby przejść do strony o tym, czynią to osobiste połączenie - zamiast tego robią to wszyscy nowi czytelnicy. Treść wyjaśnia, o czym jest blog, a następnie wyświetla niektóre popularne i polecane treści.
Poniżej ilustracji po prawej stronie ponownie pojawia się kanał RSS, ale tym razem z bardziej rozpoznawalną grafiką. Zwróć uwagę, jak ten drugi ekran z kanałem wyświetla się po prawej stronie, po tym, jak czytelnik zakończy właśnie czytanie niektórych tytułów treści, trochę informacji o nich i po nawiązaniu połączenia z blogiem.
14. Ten indyjski koleś
Postać w tym nagłówku, podobnie jak wszystkie inne nagłówki z postaciami, zapewnia osobisty charakter i stanowi świetne wprowadzenie do bloga. Jest to pierwsza rzecz, którą zauważy nowy czytnik, a jej wysoka jakość, a także otaczające ją elementy konstrukcyjne, stanowią oświadczenie o stylu tego projektanta i czego można się po nim spodziewać.
Po lewej stronie znajduje się logo, które dodatkowo prowadzi oko do hasła wyjaśniającego zawartość zamieszczoną na blogu. Oko ponownie prowadzi do fragmentu treści, który dzieli osobowość bloga.
15. Ozon3
Temat tego nagłówka jest wyjątkowy iw tym sensie tworzy niezapomniany projekt strony internetowej - naprawdę świetne pierwsze wrażenie. Po zapoznaniu się z ilustracją, oko jest doprowadzane do logo w celu zapamiętywania marki, a następnie bezpośrednio prowadzi do podstawowej nawigacji, a następnie do treści.
Po raz pierwszy widzowie mogą zobaczyć, że ten blog koncentruje się wokół portfolio projektów internetowych i odkrywają to po prawdziwym obejrzeniu pracy projektanta w nagłówku.
Pomimo swojej prostoty, ten nagłówek jest bardzo skuteczny pod względem wizualnej hierarchii i ustawia ogromne przesłanie dla widzów.
16. Studio nDesign
Ten kolorowy nagłówek jest główną atrakcją tego projektu strony internetowej, a logo informuje odwiedzającego, że jest to studio projektowe.
Niesamowity nagłówek potwierdza umiejętności projektanta i jego marki. Nawigacja, kanały i pasek wyszukiwania są bardzo powiązane z nagłówkiem, co czyni je jednym z pierwszych zauważalnych elementów.
Główna nawigacja ma postać zakładek i po raz pierwszy jest rozpoznawana jako część nagłówka. Ponieważ jest w formie zakładek, wydaje się być również połączony z treścią, przyciągając uwagę gościa do ważnej zawartości bloga.
17. Ściana projektanta stron internetowych
To kolejny świetny blog Nicka La z nDesign Studio i widzimy podobną technikę: niesamowite duże tło / nagłówek, sprawdzanie talentów i wiedzy projektanta. Logo jest tutaj większe, dzięki czemu łączy się nazwa blogu z jego celem.
Reszta treści w nagłówku to początkowa nawigacja, kontakt / RSS i pasek wyszukiwania. Wszystkie są urządzone w podobny sposób do nagłówka, łącząc je.
Elementy te mają również podobne cechy do treści (bardziej proste tło, papieropodobna tekstura), więc czują się tak, jakby były częścią treści. Ta sekcja nagłówka łączy nagłówek wprowadzający z obszarem zawartości.
18. Ma.tt
Wydaje się, że istnieje ostateczna reguła projektowania stron internetowych, aby nagłówki nie przekraczały 200-250 pikseli. Jest to świetna zasada do naśladowania z wielu różnych powodów, ale ten nagłówek pokazuje, jak skutecznie złamać tę regułę.
Nie wyświetlając żadnych treści na początku, Matt wykorzystuje swój projekt, aby wywrzeć największe wrażenie na widzu po raz pierwszy. Jego elegancki detal i kreatywne sposoby tworzą niezapomniane pierwsze wrażenie.
Logo jest duże, a ponieważ strona jest nazwą, przyjmuje pozycję osobistego bloga. Kanał RSS znajduje się również w lewym górnym rogu, informując widza, że to rzeczywiście blog od samego początku. Wreszcie, nawigacja jest tym, co widać na końcu, a to prowokuje gościa do kontynuowania tego bloga.
19. Ośrodek Pixel
Szczegółowy styl ilustracji tego nagłówka czyni go zabawnym, a jednocześnie czystym i profesjonalnym. Jest nawet ożywiony, ponieważ scena toczy się dzień i noc, przypominając odwiedzającym, aby patrzył z powrotem na nagłówek, który zawiera logo (markę) i nawigację. Ta metoda może z łatwością promować większą aktywność na blogu.
Poniżej nawigacji umieszczonej na pierwszym planie znajduje się nawigacja podrzędna ze strzałką "łączącą" ją z resztą nagłówka. Pomaga to w dokładniejszym zdefiniowaniu kategorii i pomaga czytelnikowi znaleźć treści, które najbardziej go interesują.
20. Webdesigner Depot
Ahh, tak - blog, który właśnie przeglądasz. Niezależnie od tego, czy odwiedzasz witrynę po raz pierwszy, czy też od dłuższego czasu czytasz Webdesigner Depot, nagłówek zdecydowanie przyciąga twoją uwagę.
W tym nagłówku świetnie się składa, że jest to nie tylko nagłówek o atrakcyjnym wyglądzie, ale elementy w nim zawarte stanowią, że jest to nagłówek z atrakcyjnym wyglądem skupiającym się wokół komputerów lub internetu. Ilustracje na laptopie, "www." I inne elementy technologii wnoszą konkretną grupę docelową.
Nagłówek naprawdę nie ma wiele do zaoferowania pod względem treści, z wyjątkiem linku zawieszającego z powrotem na stronę główną. Jednakże, ponieważ jest on tak złożony, wszelkie dodatkowe funkcje mogą przytłoczyć projekt i sprawić, że będzie on zbyt zagracony.
Nagłówek jest jednak idealny: ustawia nastrój, inspiruje widza i jest na tyle krótki, że prowadzi widza do reszty treści.
Zawijanie
Mamy nadzieję, że przeanalizowanie tych dwudziestu przykładów pomoże w lepszym zdefiniowaniu pytań przedstawionych na początku tego artykułu i pomoże każdemu projektantowi stron internetowych zwrócić większą uwagę na nagłówki blogów.
Treści, które należy umieścić w nagłówku, mogą się znacznie różnić w zależności od bloga. Ważne jest, aby pamiętać o celach bloga, temacie i tym, czego szukałby odwiedzający go po raz pierwszy.
Napisany wyłącznie dla WDD przez Kayla Knight .
Podziel się własnymi wskazówkami dotyczącymi projektowania nagłówków, a także wszelkich dodatkowych przykładów.