Większość projektów blogów zawodzi w ten sam, cichy sposób. Tekst jest dobry, zdjęcia są w porządku, a strona nadal wygląda jak zwykła lista linków, której nikt nie chce przewijać.
Dobry projekt bloga rozwiązuje ten problem za pomocą układu, a nie dekoracji. Przejrzysta siatka, czytelny nagłówek, jeden mocny obraz na wpis i czytelnik zostaje.
Poniższe 12 przykładów projektów blogów to prawdziwe, działające strony. Każdy z nich rozwiązuje ten sam problem: jak sprawić, by przewijane posty sprawiały wrażenie miejsca wartego przeczytania, i każdy rozwiązuje go inaczej.
Obejmują fotografię kulinarną, architekturę, prace ślubne i jednego autora, który nie ma żadnych zdjęć. Skorzystaj z pomysłów na układ, które pasują do Twojego bloga.
Co sprawia, że projekt bloga działa
Przyjrzyj się bliżej stylowi, a zauważysz, że silne blogi podejmują te same decyzje strukturalne:
- Siatka, nie stos. Siatka dwu-, trzy- lub czterokolumnowa pozwala czytelnikowi przeglądać wiele postów jednocześnie. Pojedynczy pionowy stos ukrywa wszystko poniżej pierwszego posta.
- Nagłówki, które mają znaczenie. Na blogu tytuł sprzedaje kliknięcie bardziej niż miniatura. Najlepsze projekty zapewniają mu odpowiedni rozmiar i przestrzeń.
- Jedno zdjęcie na post, dobrze zrobione. Spójny obraz wyróżniający na każdej karcie zmienia listę linków w galerię.
- System kart, który się powtarza. Ten sam współczynnik obrazu, ta sama pozycja tytułu, ten sam odstęp w każdym poście. Spójność to to, co jest zgodne z zamysłem.
- Sposób podziału według tematu. Kategorie, tagi lub pasek boczny pozwalają czytelnikowi wybrać konkretną ścieżkę, zamiast przewijać zawartość bezmyślnie.
Siatka redakcyjna Blogi
Podejście magazynowe: wielokolumnowa siatka, która traktuje posty jak wyróżnione. Pasuje do blogów z obszernym archiwum i wyrazistymi obrazami.
Anwita + Arun
Anwita + Arun Stosują czterokolumnową siatkę murowaną, a murowanie jest jej najmocniejszą stroną. Ich posty łączą zdjęcia wysokich opakowań produktów z szerokimi zdjęciami potraw na talerzach.
Sztywna siatka przycięłaby je na śmierć. Kamieniarstwo pozwala każdemu obrazkowi zachować swój własny kształt, dzięki czemu strona pozostaje żywa, a nie zamknięta. Pod każdą kartą znajduje się data, tytuł i jednowierszowy fragment.
Pożycz to: Jeśli Twoje zdjęcia różnią się kształtem, użyj siatki murarskiej. Dzięki niej zdjęcia portretowe i krajobrazowe zachowają naturalne proporcje, zamiast przycinać je do kwadratu.
In the Ether
W eterze Zaczyna się od powiększonego napisu „In the Ether” w cienkim szeryfie, a następnie przechodzi w dwukolumnową siatkę dużych obrazów. Skala stanowi istotę pomysłu.
Duży logotyp, duże obrazy, praktycznie bez żadnych innych dodatków. Wygląda jak okładka magazynu, a nie jak kanał informacyjny, a to jest dokładnie to, czego potrzebuje starannie wyselekcjonowany blog.
Pożycz to: Duży napis nagłówkowy nadaje blogowi charakter publikacji, a nie listy aktualizacji. Przed pierwszym wpisem nadaj blokowi tytułowemu rzeczywistą wysokość.
Atul Pratap Chauhan
Atula Pratapa Chauhana Zawiera cztery kolumny zdjęć wnętrz i hoteli, które łatwo mogłyby się wydawać przepełnione. Wyśrodkowane tytuły małymi literami i duża ilość białej przestrzeni zapobiegają temu.
Czcionka jest cicha, odstępy szerokie, a obrazy mówią same za siebie. To gęsta siatka, która wciąż daje poczucie spokoju, a znalezienie równowagi jest trudne.
Pożycz to: Czterokolumnowa siatka nadal może dawać poczucie spokoju. Wyśrodkuj tytuły, zachowaj małą czcionkę i pozwól, aby puste przestrzenie działały same, aby gęstość tekstu nigdy nie przerodziła się w bałagan.
Kalina's Photography
Fotografia Kaliny Działa odwrotnie niż cisza i to działa. Tytuły postów są ogromne, napisane pogrubioną czcionką szeryfową, która dominuje nad każdą kartą bardziej niż zdjęcie.
W przypadku bloga o macierzyństwie i noworodkach, taki nagłówek jest trafny. Ludzie szukają tematu („wybór odpowiedniego czasu na sesję ciążową”), więc słowa te zasługują na odpowiednią wielkość. Pasek boczny „Najnowsze wpisy” pozwala na podgląd najnowszych prac.
Pożycz to: Niech tytuły wpisów będą duże. Na blogu, który ludzie znajdują za pomocą wyszukiwarki, nagłówek ma większą siłę sprzedaży niż miniatura, więc nadaj mu dominującą rolę.
Minimalistyczne układy blogów
Powściągliwość jako wybór projektowy. Ograniczają one listę do elementów niezbędnych.
Ryan Hainey
Ryan HaineyBlog jest najbardziej stonowany na tej liście. Nagłówek „Blog” z szeryfami, dwukolumnowa siatka i pod każdym obrazkiem tylko data. Brak tytułów, fragmentów i tagów.
Dla fotografa architektury ta pewność siebie to wyraz dobrego smaku. Zdjęcia są wystarczająco mocne, by same w sobie utrzymać stronę, a po usunięciu metadanych stają się jedyną rzeczą, na którą zwraca się uwagę.
Pożycz to: Jeśli Twoje zdjęcia są mocne, układ niemal bez tekstu (zdjęcie i data) to najpewniejszy wybór. Każda usunięta etykieta sprawia, że zdjęcie staje się bardziej wyraziste.
Daniel Pullen
Daniela Pullena wyświetla stały lewy pasek boczny z linkami do kategorii (Surfing, Krajobrazy, Kultura), podczas gdy posty wypełniają resztę ekranu jako pełnowymiarowe karty z tytułem nałożonym na obraz.
To przejrzysty sposób poruszania się po obszernym archiwum. Czytelnik może od razu przejść do wybranego tematu, a nakładające się tytuły sprawiają, że każda karta stanowi pojedynczą, uporządkowaną całość.
Pożycz to: Stały pasek boczny kategorii pomaga czytelnikom poruszać się po obszernym blogu tematycznie, zamiast przewijać go na ślepo. Nałóż tytuł na obraz, aby każdy wpis wyglądał jak jeden, przejrzysty blok.
Blogi prowadzone przez bohaterów
Przed rozpoczęciem transmisji wyświetlany jest obraz na całą szerokość ekranu, a pierwszy ekran służy do nadania tonu lub przedstawienia głównego punktu widzenia.
Strike the Lights
Zapal światła Otwiera się na pełnowymiarowym zdjęciu zza kulis, na którym znajduje się pojedyncza linijka tekstu: czym jest blog i kto go pisze. Następnie zaczynają się wpisy.
Ten bohater wykonuje zadanie, które większość blogów pomija. Zanim przeczytasz choć jeden wpis, wiesz, że to blog o edukacji i kulisach pracy fotografa. Kadrowanie buduje oczekiwania na jednym ekranie.
Pożycz to: Zacznij od głównego obrazu, który mówi o tematyce bloga. Jedno z haseł przewodnich nad mocnym zdjęciem podpowiada nowemu czytelnikowi, dlaczego warto zostać na blogu.
Madison LaRoc
Madison LaRoc Tutaj zastosowano najbardziej konwencjonalny wzór i o to właśnie chodzi. Baner z etykietą „Najnowszy wpis na blogu” umieszczono nad zdjęciem pary oświetlonej falami, a następnie nad nim wyraźną, trzykolumnową siatką z datą i tytułem szeryfowym.
Nic w tym nie jest mądre i nic nie musi takie być. Dla fotografa ślubnego spokojny, łatwy do przeglądania, trzykolumnowy blog to dokładnie czytelny standard, który większość stron powinna stosować, zanim spróbuje czegoś bardziej wyszukanego.
Pożycz to: Prosty baner z etykietą na siatce trzykolumnowej to bezpieczne i czytelne rozwiązanie domyślne dla większości blogów. Zadbaj o to, zanim sięgniesz po coś bardziej wyszukanego.
Wyróżniające się systemy miniatur i kart
Wizytówka bloga to coś więcej niż tylko przeskalowane zdjęcie. Te trzy elementy traktują samą wizytówkę, jej nakładkę, tag, kolor jako projekt.
Misha Martin
Misza MarcinBlog podróżniczy łączy posty wideo i zdjęcia, dlatego projekt je odpowiednio oznacza. Każda karta ma mały tag kategorii („Wideo”), umieszczony w dwukolumnowej siatce, obok daty i przycisku „Czytaj więcej”.
Tag to drobny gest, który naprawdę działa. Czytelnik przeglądający siatkę wie, które posty są filmami, a które są napisane, zanim kliknie, co szanuje jego czas.
Pożycz to: Oznacz każdy wpis w widoczny sposób według formatu (wideo, poradnik, historia). Gdy blog łączy media, mała etykieta pozwala czytelnikom wybierać, co chcą obejrzeć lub przeczytać.
Waterhouse Wade
Waterhouse'a Wade'a ma nagłówek w wyrazistym kolorze marki (ciepły żółty pasek) na całej stronie i pasek boczny „Najnowsze posty” znajduje się bezpośrednio na stronie artykułu, a nie tylko na liście.
Ten pasek boczny to sprytny element. Gdy czytelnik skończy czytać artykuł, kolejne wpisy są już widoczne, więc przeglądanie może być kontynuowane, zamiast się zatrzymywać. Wyrazisty kolor nagłówka sprawia, że marka jest widoczna aż do końca.
Pożycz to: Umieść pasek boczny „Najnowsze wpisy” na stronach artykułów, a nie tylko w indeksie bloga. Dzięki niemu koniec jednego wpisu stanie się początkiem kolejnego.
Sinclaire Street
Ulica Sinclaire prowadzi swojego bloga zatytułowanego „Rozmyślania” w formie dwukolumnowej siatki dużych czarno-białych fotografii ulicznych. Szeryfowe tytuły wpisów są nałożone na zdjęcia, a monochromatyczna czcionka biegnie wzdłuż całej długości.
Ważna jest powściągliwość. Jedna paleta kolorów, jeden rodzaj oprawy, duże obrazy i nic, co z nimi konkuruje. Całość czyta się jak spójny zbiór prac, a nie jak seria osobnych postów.
Pożycz to: Postaw na jedną paletę barw. Blog w całości w czerni i bieli prezentuje się jako pojedyncza, przemyślana całość, a nie sterta niepowiązanych ze sobą wpisów.
Blogi z tekstem do przodu i bez fotografii
Nie każdy blog ma zdjęcia do pokazania. Gdy nie ma nic do sfotografowania, projekt musi sam utrzymać bloga.
Danielle Berggren
Danielle Berggren jest pisarzem, który nie może polegać na fotografii, a projekt odpowiada na to pytanie wprost. Każdy wpis otrzymuje spersonalizowaną ilustrowaną miniaturę z tytułem wbudowanym w grafikę.
„Wywiad z autorem” i „Co robić, gdy ciemność staje się zbyt uciążliwa” zostały przedstawione w formie grafik z motywem gwiaździstego, ciemnofioletowego wzoru.
Jest to najsilniejszy wizerunek marki na tej liście i powstał właśnie dlatego, że nie było żadnych zdjęć, na których można by się oprzeć.
Pożycz to: Brak zdjęć? Zaprojektuj własne miniatury z tytułem wbudowanym w każdą z nich. To nada blogowi literackiemu spójność wizualną, jaką ma blog fotograficzny, i to za darmo.
Co łączy najlepsze projekty blogów
Połóż 12 obok siebie, a wzór stanie się wyraźny. Najlepszy projekt bloga to nie ten najbardziej ozdobny. To taki, w którym obcy może przeskanować siatkę, przeczytać nagłówek i od razu wiedzieć, co otrzyma.
Trzymają się jednego systemu kart i powtarzają go bezbłędnie. Nadają nagłówkowi lub obrazkowi wystarczająco duży rozmiar, by miał znaczenie, i nigdy nie każą o nie walczyć.
Oferują one dostęp do treści według tematu, poprzez pasek boczny, tagi lub kategorie. Dopasowują układ do treści: duża czcionka dla blogów z wyszukiwarką, siatki niemal bez tekstu dla fotografii, spersonalizowana grafika dla tekstów.
Wstrzemięźliwość jest tu bardziej widoczna niż rozkwit. Najmocniejsze projekty usuwały elementy, zamiast je dodawać.
Dopasuj projekt swojego bloga do tego, co publikujesz
Nie ma jednego, najlepszego układu. Właściwy projekt bloga zależy od tego, co publikujesz i jak często. Oto uczciwy przewodnik:
Dopasuj projekt do treści, a strona będzie czytelna i zamierzona. Zmuś czytelnika do zapoznania się z niewłaściwą treścią, a czytelnicy to odczują, nawet jeśli nie będą potrafili wyjaśnić dlaczego.
Jak zaprojektować własnego bloga
Nie potrzebujesz do tego projektanta. Zacznij od siatki i karty, ponieważ te dwie decyzje stanowią większość projektu.
Wybierz liczbę kolumn odpowiadającą Twoim obrazom, wybierz jeden współczynnik obrazu wyróżnionego i ustaw rozmiar tytułu, który z chęcią powtórzysz. Następnie trzymaj się tych reguł w każdym poście.
Podczas tworzenia witryny internetowej, kreator portfolio oferuje gotowe układy blogów, które są już zaprojektowane w formie siatki, dzięki czemu możesz wybierać między dobrymi opcjami, zamiast budować witrynę od podstaw.
Jeśli ważysz narzędzia, nasze zestawienie najlepsze platformy blogowe dla kreatywnych to miejsce, od którego należy zacząć. Po wybraniu jednego możesz rozpocząć tworzenie stron internetowych blogów podróż.
Każdy z powyższych blogów został zbudowany na Pixpa, co jest uczciwym sygnałem tego, jak daleko sięgają wbudowane układy, Ryan Haineysiatka o zredukowanej grubości Danielle BerggrenIlustrowane karty.
Cokolwiek budujesz, najpierw dopracuj siatkę i kartę. Reszta to już tylko dopracowanie.
Bottom Line
Projekt bloga to w dużej mierze kilka trafnych i powtarzalnych decyzji. Siatka dopasowana do obrazów, nagłówek z odpowiednią przestrzenią, jeden mocny obraz na wpis i przejrzysty podział na tematy.
12 przykładów, które tu wymieniłem, to zarówno minimalistyczny blog o architekturze, jak i ilustrowany, kosmiczny kanał pisarza. Każdy z nich działa z tego samego powodu: układ pasuje do treści, a system kart jest niezawodny.
Wybierz wzór najbardziej zbliżony do tego, co publikujesz, skopiuj jego strukturę i dostosuj ją do swoich potrzeb.
Często zadawane pytania dotyczące projektowania blogów
Co sprawia, że projekt bloga jest dobry?
Dobry projekt bloga sprawia, że przewijanie wpisów jest łatwe do przejrzenia i przeczytania. Zazwyczaj oznacza to siatkę wielokolumnową, spójny obraz wyróżniony w każdym wpisie oraz nagłówki w rzeczywistym rozmiarze.
Czytelnicy mają też możliwość przeglądania treści według kategorii lub tagów, a układ strony dostosowuje się do treści, wykorzystując dużą czcionkę w przypadku blogów z tekstem i duże obrazy w przypadku fotografii.
Jaki jest najlepszy układ bloga?
Nie ma jednego najlepszego układu, ale siatka dwu- lub trzykolumnowa pasuje do większości blogów. Pozwala czytelnikom przeglądać kilka wpisów jednocześnie, bez konieczności niekończącego się przewijania.
Blogi z dużą ilością zdjęć zazwyczaj zawierają większe obrazy i mniejszą liczbę kolumn, natomiast blogi z dużą ilością tekstu korzystają z większych nagłówków i niestandardowych grafik miniatur.
Ile kolumn powinien mieć blog?
Dwie do czterech kolumn sprawdzi się w większości blogów. Dwie kolumny pasują do obszernych wpisów z dużą ilością obrazów, trzy są domyślne i czytelne, a cztery pasują do obszernego archiwum z efektownymi zdjęciami.
Liczba postów przekraczających cztery powoduje tendencję do zmniejszania ich do takiego stopnia, że nic nie będzie się wyróżniać.
Czy każdy wpis na blogu powinien zawierać wyróżniony obraz?
Tak. Spójny obraz wyróżniony w każdym wpisie to najważniejszy element, który zmienia prostą listę linków w starannie zaprojektowaną stronę bloga.
Jeśli nie masz zdjęć, tak jak autor, zaprojektuj zamiast tego spersonalizowaną miniaturę do każdego wpisu. Spójność jest ważniejsza niż źródło.
Gdzie mogę znaleźć inspiracje dotyczące projektowania blogów?
Poza tymi 12, najlepszym źródłem są galerie na żywo, ponieważ pokazują prawdziwe blogi, a nie koncepcje. Nasza kolekcja przykłady witryn blogowych jest dobrym miejscem do przeglądania.
Kiedy patrzysz, zwróć uwagę na siatkę i układ kart, a nie tylko na kolory. To jest ta część, którą możesz ponownie wykorzystać.
Ile kosztuje zaprojektowanie bloga?
Jeśli zbudujesz go samodzielnie w kreatorze stron internetowych, blog będzie kosztował tyle samo, co każda mała strona: mniej więcej tyle, ile kosztuje plan plus domena. Sprawdź najnowsze ceny planów dla bieżących liczb.
Zatrudnienie projektanta do stworzenia spersonalizowanego bloga kosztuje od kilkuset do kilku tysięcy, w zależności od zakresu prac. W przypadku każdej witryny z tej listy, szablon i trafne wybory okazały się wystarczające.