Analiza graficzna stron internetowych

Chcąc zbudować własną stronę internetową często kupujecie gotowy szablon. Chcecie, żeby był nie tylko funkcjonalny, ale też i ładny. Co się jednak często okazuje po zainstalowaniu i wymianie treści? Często przestaje nam się podobać. A przecież był taki śliczny! Gdzie się ta jego śliczność zgubiła?

Żeby pomóc wam w stworzeniu fajnej, ciekawej strony internetowej, przygotowalam analizę graficzną trzech wybranych stron, które uważam za dobrze skonstruowane, z dobrze dobranymi kolorami, fontami i zdjęciami. Analiza grafiki jest ważnym etapem podczas projektowania własnej strony, a nawet jeszcze wcześniej – na etapie kupowania szablonu. Ich autorzy często dobierają zdjęcia, tak, żeby pasowaly do niego. Ale nasze strony internetowe rzadko mogą pochwlić się taką spójnością. Nasze strony są żywe, pełne emocji, różnorodne. Nie zawsze da się utrzymać wszystkie zdjęcia w jednej tonacji. Albo żeby zawsze były czarno-białe.

Dlatego mam dla was kilka wskazówek, jak przeprowadzić taką analizę graficzną innych stron, żeby uświadomić sobie, czego wy potrzebujecie i jak to uzyskać w ramach możliwości dostępnych w szablonie.

3 x tak

Wybrałam trzy przykłady, żeby omówić podstawowe elementy, z których złożona jest strona internetowa:

  • ogólny układ strony
  • kolory
  • fonty
  • zdjęcia
  • inne (mogą to być reklamy, czasem dodatkowe logotypy, ikony)
Slajder-strony-ze-zdjęciem-złotej-biżuterii
Strona-główna-strony-widok-całości-ze wszystkimi-elementami

https://thechrisellefactor.com

W tej stronie moją uwagę zwróciła pewna przejrzystość, lekkość i konsekwencja w jej budowaniu. Slider, to zdjęcie z ostatniego wpisu. Jest więc on w naturalny sposób wyróżniony, a strona od pierwszego spojrzenia robi wrażenie żywej, ciągle się zmienia. Zmniejsza to nieco jej rozpoznawalność, ale inne stałe elementy zapewniają jej wystarczającą charakterystyczność (chyba nie ma takiego wyrazu, ale co tam! tutaj bardzo pasuje :) ).

OGÓLNY UKŁAD

Nie ma stronie zbyt wielu różnych elementów. Głównie są to zajawki wpisów blogowych. Są zróżnicowane, pod względem wielkości i układu. Sekcje zaznaczone tym samym beżowym kolorem. Dodatkowo jedna z nich (video) ma w tle mocny czarny kolor (powtarza się on również w stopce), że całość strony jest świetnie skontrastowana. I właśnie fakt, że jest to taka mocna czerń, nadaje projektowi bardzo elegancki charakter.

KOLORY

Podobają mi się zarówno same kolory, jak i sposób ich użycia. Strona sama w sobie właściwie nie ma żadnych kolorów. Niemal wszystkie kolorowe elementy to zdjęcia. Nie są one pstrokate, utrzymane są w pewnej stałej tonacji, jednak nie ma się wrażenia, że każde z nich zostało potraktowane jakimś presetem. Dzięki pewnym różnicom w sposobie obróbki są one interesujące.

FONTY

Nie jestem fanem fontów dwuelementowych (czyli pionowa część jest grubsza niż pozioma), ani szeryfowych (coś w rodzaju poziomych kreseczek na końcach nóżek literek), ale tutaj wygląda to naprawdę dobrze.

Więcej o fontach przeczytacie w tym wpisie.

Fonty użyte na stronie są ładne, lekkie, tekst, mim0 że pisany dużymi literami, nie jest przytłaczający. Żeby uzyskać taki efekt, trzeba naprawdę dobrze przemyśleć wybór fontów i ich wielkość. Obecnie Google oferuje mnóstwo fontów, które można podłączyć do swojej strony. Niektóre szablony mają gotowe podłączenie, w innych trzeba to zrobić za pomocą kodu, albo wtyczek.

Czarny kolor fontów też bardzo mnie ujął. Lubię czarne i szare fonty. Ale oczywiście jest to kwestia indywidualna. W gruncie rzeczy nie ma kolorów dobrych i złych. Ładnych i brzydkich. Wszystko zależy, jak są ze sobą połączone. I połączenia mogą być łatwiejsze i trudniejsze. Fonty czarne i szare są bezpieczne, więc można je łączyć zawsze i ze wszystkim.

ZDJĘCIA

Zdjęcia są siłą tej strony. Owszem, ich układ jest ciekawy, dobrze zsynchronizowany z tytułami postów i fontami, ale przede wszystkim są to zdjęcia ciekawe. Mają narzuconą pewną stylistykę, zwłaszcza jeśli chodzi o kolory, ale są naprawdę ładnie zrobione (poprwne technicznie i kompozycyjnie), są zróżnicowane pod względem zawartości i układu.

Jeżeli ktoś lubi zdjęcia utrzymane w jednej tonacji, to ta strona jest dobrym przykładem do analizy i wyciągania wniosków.

Górna-część-strony-fitmencook-posty-jako-nagłówek-zamiast-slajdera
Cała-strona-internetowa-jako-zrzut-z-ekranu-ze-zdjęciami-przygotowanych-posiłków

https://fitmencook.com

Ta strona totalnie mnie poruszyła. Zdjęcia są fenomenalne. Zupełnie inne, niż na stronie, o której pisałam powyżej. Bardzo kolorowe, wyraziste, dynamiczne. Niezwykle spodobało mi się to, zwłaszcza w kontekście jedzenia.

OGÓLNY UKŁAD

Sam układ nie jest jakoś szczególnie wyrafinowany. Wpisy blogowe w 3 sekcjach. Jedno zdjęcie wyróżnione, pozostałe wokół niego już jednej wielkości. To jest prosty, ale bardzo dobry pomysł.

KOLORY

Jak już wspomniałam, kolory na tej stronie są obłędne. Jest mega kolorowa. A mimo to nie ma wrażenia pstrokacizny. Efekt ten został osiągnięty przez użycie bardzo prostych środkow. Gdyby kogoś podkusiło i chciał do niej coś dodać (jakieś tała, rozbudowane napisy itp.), prawdopodobnie wszystko by się posypalo,

W moim odczuciu nawet pasek z reklamą aplikacji na telefon niestety rozbija spójność strony. Dwa kolorowe paski (niebieski i zielony) są jakby „obce” dla tego projektu. Inne paski informacyjne pomiędzy sekcjami są w pełnym kolorze, z wyraźnymi fontami i małą ilością elementów.  Tutaj jest wszystkiego za dużo niestety.

FONTY

Fonty są bardzo proste. Nie pełnią żadnej funkcji ozdobnej, są neutralne. Występują w kolorze ciemnoszarym i białym. Czytelne fonty niosące informację. Oczywiście takie podejście nadaje stronie charakter, który można by nazwać męskim :) Ale tak naprawdę nie m żadnego powodu, by podobnych fontów nie użyć w przypadku strony prowadzonej przez kobietę.

ZDJĘCIA

Można sobie wyobrazić tę stronę ze zdjęciami dotyczącymi tematu kosmetycznego. I jeśli zdjęcia byłyby równie dobrej jakości i równie kolorowe, strona też wyglądalaby świetnie. Więc jeśli rozpatrujemy stronę nie na poziomie kontentu, ale wyłącznie od strony graficznej, to trzeba jasno powiedzieć, że tę stronę „robią” zdjęcia.

Kolory są intensywne, ale światło zazwyczaj jest rozproszone, miękkie, dzięki temu autor uzyskuje efekt naturalności. I, co może nie jest zauważalne na pierwszy rzut oka, tutuaj również wszystkie zdjęcia zrobione są w pewnej konwencji. Ale nigdzie nie ma presetów. Często przestrzegam przed presetami, bo pozornie wydaje się, że uzyskujemy fajny efekt. Ale to nie do końca jest tak. Będę niedługo o tym pisała na blogu, więc zaglądajcie :)

INNE

Bardzo fajną rzeczą, która została zastosowana na stronie są kategorie umieszcone pod każdym postem na szarych paseczkach. Jeśli jednak umieścimy kursor nad zdjęciem, zmieniają one kolor i możemy po nim rozpoznać do jakiej kategorii zostały przypisane. Taki drobiazg, a cieszy :)

Na koniec chcialam dodać, że wypróbowałam niektóre z przepisów autora i są naprawdę rewelacyjne. Szczerze polecam :)

Część-górna-strony-internetowej-pokazująca-posty-z-jednym-wyróżnionym
Zrzut-całej-strony-ze-wszystkimi-obrazkami-i-tekstami

https://www.inthefrow.com

Ta strona spodobała mi się ze względu na układ. Chciałam zwrócić waszą uwagę na fakt, że nie zawsze musimy mieć klasyczny układ: zdjęcie na górze, menu, a dopiero potem cała reszta. Tutaj  zdjęcie najnowszego wpisu (to największe po lewej stronie) jest nieruchome. Przesuwa się natomiast pasek z wpisami. Jest to bardzo ciekawy pomysł. wiele elemntów na tej stronie jest bardzo fajnych, chociaż są też takie, które wzbudzają moje wątpliwości. Nie tyle duże, żeby nie móc powiedzieć trzeciego „tak”. Jednak strona wylądowała na trzecim miejscu :)

OGÓLNY UKŁAD

Fajny pomysł na nietypowy układ. Jest on jednocześnie łatwy do poruszania się po nim. Duże zdjęcia, wyraźne nagłówki, 2-3 sekcje (zależy, jak liczyć :) ), stonowane kolory.

KOLORY

Na tej stronie kolry uzyskuje się, podobnie jak na tej powyżej, za pomocą zdjęć. Wszystko inne jest czarne, białe lub szare. I to jest świetny sposób na wyeksponowanie zdjęć. Każdemu, kto ma fajne zdjęcia (swoje lub kupione), doradzałabym takie rozwiązanie. Fajnie mieć jakiś kolor dodatkowy, jako wyróżniający, ale lepiej używać go bardzo ostrożnie. No chyba, że cały pomysł strony zasadza się na zestawieniu intensywnych graficznych elementów.

FONTY

Są świetne. Mega proste, mega czytelne. Tylko czarne lub białe. W moim odczuciu idealnie pasują do tematu fashion. Są lekkie, eleganckie, nie odciągają uwagi od najważniejszej rzeczy, czyli zdjęć. Podobnie, jak w przypadku strony o gotowaniu, fonty niy są głównie po to, żeby nieść treść. Mają za zadanie budować charakter strony, ale nie są głównym bohaterem. 
Podoba mi się również wprowadzenie nawiązania do fontów występujących w logo. Kategorie wpisane są fontem dwuelementowym z szeryfami. Taka drobna rzecz, ale ładnie spina całość. 

ZDJĘCIA

 Tutaj pojawia się pewien kłopot. Większość zdjęć jest zaniebieszczona. To oczywiście daje wrażenie spójności, jednak mnie taki zabieg nie odpowiada. Być może łatwiej byłoby mi się z tym pogodzić, gdyby występowało to tylko na frontowej stronie. Jednak część zdjęć w postach również ma taką niebieską dominantę. Zdjęcie z ostatniego wpisu tego efektu nie ma (mimo że również utrzymane w pewnej zgaszonej tonacji) i podoba mi się znacznie bardziej.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *