Podstawy projektowania stron internetowych

Podstawy harmonijnych projektowania stron internetowych

Jak mówi przysłowie: nie ma drugiej szansy na pierwsze wrażenie. Wchodzisz na nieznaną stronę internetową i w ciągu kilku sekund oceniasz, czy jest ona "dobra" czy "zła". Szczególnie w przypadku twoich własnych dzieł nieskończenie trudno jest dokonać obiektywnej analizy. Na szczęście istnieją sprawdzone zasady projektowania, które możesz wykorzystać jako przewodnik. Ogólny przegląd.

Czym w ogóle jest dobry projekt strony internetowej?

Projektowanie stron internetowych jest dość skomplikowane: wymaga czegoś więcej niż tylko oka do dobrej typografii i talentu do atrakcyjnej aranżacji wizualnej. To prawda, że projektowanie stron internetowych oferuje niezwykle wszechstronne możliwości twórczej ekspresji. Ale oferuje również co najmniej tyle samo możliwości, aby utknąć w procesie projektowania. Szczególnie, gdy jesteś głęboko zakorzeniony w procesie projektowania, łatwo jest stracić z oczu las i drzewa. Rezultatem może być projekt, który postrzegamy jako "zły".

Nasza ocena jest często intuicyjna, więc trudno jest nam wytłumaczyć, dlaczego ten sam element projektu idealnie pasuje na jednej stronie, a na innej wygląda na zagubiony i nie na miejscu.

Co decyduje o sukcesie strony internetowej?

Dobre strony internetowe prezentują informacje w sposób przejrzysty i efektywny, tak by użytkownicy mogli intuicyjnie odnaleźć się na stronie. Najczęściej strona WordPressa zorientowana na użytkownika odnosi sukces dzięki dobrze wyważonemu połączeniu typografii, elementów interaktywnych i dużej ilości wizualnego dopieszczenia. 

A ponieważ to nie jest wystarczająco skomplikowane, jesteśmy też ograniczeni tym, co mogą wyświetlić przeglądarki naszych potencjalnych użytkowników. Jeśli to konieczne, także przez umiejętności techniczne programisty lub narzędzie, którego używamy do stworzenia danej strony WordPress. 

Ponadto, należy wziąć pod uwagę aktualne trendy i tożsamość korporacyjną klienta. Web design to w zasadzie suma UX, UI i projektowania graficznego, CI i aktualnych trendów, z uwzględnieniem uwarunkowań technicznych.

Tworzenie strony internetowej WordPress to dość rozległy projekt. Nic dziwnego, że zwykle stoi za tym cała drużyna. Często jednostki (i niestety także drużyny) mają tendencję do zwracania większej uwagi na obszary, w których są szczególnie mocne. Natomiast innym obszarom poświęca się mniej uwagi - lub w skrajnych przypadkach wcale. Tworzy to nierównowagę, która może sprawić, że będziesz postrzegał stronę WordPressa jako niskiej jakości i nieharmonijną.

"Dobry" projekt strony internetowej jest wynikiem równowagi pomiędzy różnymi obszarami projektowania a realiami technicznymi.

Ponieważ szczegółowe omówienie wszystkich obszarów wykraczałoby poza ramy tego artykułu, poświęcę się dziś głównie projektowi wizualnemu. 

Kontrast, przestrzeń biała i kolor

Kontrast często idzie w parze z wyborem podstawowych kolorów w projekcie, jak również białych przestrzeni w kompozycji. Białe miejsce nie musi jednak oznaczać przestrzeni, która jest pozostawiona biała. Odnosi się on raczej do przestrzeni pomiędzy elementami. Ta przestrzeń jest również nazywana "przestrzenią negatywną" i nadal może być kolorowana.

Duża ilość białych przestrzeni zwykle sprawia, że strona wygląda na bardziej uporządkowaną i przejrzystą. Takie podejście często idzie w parze z minimalizmem. Oznacza to konsekwentne usuwanie z układu graficznego wszystkiego, co jest niepotrzebne i nie wnosi do projektu żadnej rozpoznawalnej wartości dodanej. Czy to tekst, czy elementy dekoracyjne, czy też zalew CTA.

Zwłaszcza przy tendencji do wypełniania nagłówków stron internetowych dużymi, panoramicznymi obrazami często spotykamy się z nakładkami tekstowymi, które są trudne do rozszyfrowania.

Wskazówki dotyczące udanych kontrastów

Planując kontrast i kolor, należy również pamiętać o następujących kwestiach: Treści, które są trudne do odczytania, mogą w pewnych okolicznościach doprowadzić do tego, że osoby z wadami wzroku (np. rozpoznawanie kolorów) nie będą w stanie w ogóle odebrać tych treści.

Udany przykład dużej ilości białych przestrzeni i kontrastu

Podstawy harmonijnych projektowania stron internetowych
Podstawy harmonijnych projektowania stron internetowych

https://aiven.io/

Słaby przykład kontrastu

Oto przykład, który jest problemem kontrastu, szczególnie w wersji mobilnej. Wezwanie do działania jest całkowicie zagubione na tle wyboistego tła.

why-ux-fails
https://www.opitz-consulting.com/

Czasami projektantom nie jest łatwo dobrać odpowiednie kolory do projektu. Na szczęście istnieją narzędzia, które pozwalają nam szybko przetestować różne kombinacje - zanim poświęcimy dużo czasu na stworzenie kosztownego układu.

Teoria koloru: narzędzia do doboru kolorów

Material Design Color Tool

Material Design Color Tool tworzy mało wierne makiety przy użyciu dwóch podstawowych kolorów.

material-design-color-tool

Adobe Color Wheel

Adobe Color Wheel nie tylko pomaga tworzyć różne palety kolorów, ale także wyodrębnia używane palety kolorów z istniejących projektów. Ostatnio jest to również możliwe w oparciu o gradienty kolorów.

adobe-color-wheel

Przy doborze odpowiednich kolorów warto przyjrzeć się dokładnie brandingowi klienta: Jakie palety kolorów są już w użyciu? Do jakiego stopnia mogę od nich odstąpić?

Nie da się też uniknąć podstaw teorii kolorów: w zależności od branży, w której działa twój klient, można wybrać kolor o odpowiednim efekcie psychologicznym. To nie przypadek, że kolor niebieski jest często używany w poważniejszych branżach - takich jak ubezpieczenia, konsulting czy porównywarki internetowe. Niebieski ma działanie budzące zaufanie i uspokajające. Ważne jest jednak, by nie być zbyt ogólnym, bo nawet niuanse tego samego koloru mogą wywoływać bardzo różne emocje.

Czy znasz zasadę 60-30-10?

Jest to zalecane jako złota zasada stosowania palet kolorystycznych. Obowiązuje tu zasada: kolor główny stanowi ok. 60 procent szaty graficznej, kolor uzupełniający 30 procent, a trzeci kolor uwypukla kolejne 10 procent. Taki układ ma szczególnie zrównoważony wpływ na użytkownika.

Symetria czy asymetria?

W swoim artykule "Zasady projektowania i ich znaczenie" autorka i projektantka Cameron Chapman wyjaśnia swoje dwa najważniejsze podejścia do równowagi w projektowaniu stron internetowych. W związku z tym rozróżnia treści według ich widoczności, czyli tego, czy są one bardziej przyciągające uwagę, czy mniej widoczne.  

W związku z tym, kolejnym wyzwaniem jest takie rozmieszczenie treści, aby dawały poczucie równowagi. Decyzja projektowa "ułóż symetrycznie lub asymetrycznie" może tu pomóc.

Jak działają oba podejścia?

W podejściu symetrycznym elementy o podobnym znaczeniu są rozmieszczone razem. Z kolei podejście asymetryczne polega na łączeniu treści bardziej i mniej znaczących. 

Na przykład, układ może być utrzymany w czystości. Elementy są od siebie wyraźnie oddzielone, tak jak w przypadku Couro Azul. Często takie treści umieszczane są nieco poza centrum, aby dać słabszemu elementowi nieco więcej przestrzeni i stworzyć równowagę.

Zero, z drugiej strony, wykorzystuje tę samą zasadę - ale w bardziej swobodnym układzie. Duże wykorzystanie białych przestrzeni sprawia, że wygląda to elegancko i nowocześnie.

Takie podejście bardzo dobrze sprawdza się na większych ekranach (od wielkości tabletu). Z kolei mniejsze urządzenia, takie jak smartfony, korzystają z wyraźnie oddzielonych modułów ułożonych jeden pod drugim.

Określanie i ustalanie priorytetów

Zanim zaczniemy projektować stronę WordPress, powinniśmy jasno określić, jaki komunikat chcemy przekazać. Często jasność koncepcji marketingowej przynosi także jasność w układzie graficznym projektu.

Po określeniu kluczowych komunikatów, kolejnym krokiem jest ich podkreślenie poprzez użycie koloru i/lub typografii.

Jak oba te elementy mogą wyglądać w połączeniu, można zobaczyć na tym przykładzie:

cowboy
https://cowboy.com

Jednak również tutaj istnieje wiele możliwości realizacji. Treść może być podkreślona nie tylko poprzez odważną typografię i kolor. Również za pomocą obrazów - jak w restauracji Jamiego Olivera - i poprzez współgranie różnych zasad, można wyeksponować wybrane treści.

Restauracja Jamiego Olivera

Proporcje i hierarchia

Treść strony powinna być przedstawiona w taki sposób, by miała sens w swojej hierarchii. Najważniejsza treść powinna być umieszczona na samej górze. W miarę zmniejszania się ważności, powinieneś pracować w dół. Powinieneś więc zadać sobie pytanie: Jakie informacje są najważniejsze dla odwiedzającego moją stronę? Co jest tylko dodatkową informacją? 

Jest to też powód, dla którego w większości przypadków menu nawigacyjne znajduje się na górze. Poza tym, że jest to wzorzec UI, jest to po prostu jeden z najważniejszych aspektów strony internetowej. W końcu menu to nic innego, jak przegląd najważniejszych treści, które tam oferujesz. Jest to, że tak powiem, spis treści twojej strony w WordPressie.

Hierarchia wizualna: co jest naprawdę ważne

Hierarchię można również tworzyć poprzez tzw. ruch. Układamy zawartość strony w taki sposób, aby oko było przez nią prowadzone. Można to osiągnąć, na przykład, za pomocą kształtów i aranżacji. To portfolio jest ciekawym przykładem tego, jak coś takiego mogłoby wyglądać:

Portfolio

Oko jest prowadzone przez ekran od lewej do prawej strony. Punkt 01 ma tutaj wyraźnie największą hierarchię - mimo że wszystkie elementy są tej samej wielkości i początkowo wydają się mieć taką samą wartość. 

Proporcje również odgrywają rolę: elementy o tej samej wielkości, kolorze, kształcie dają nam poczucie, że do siebie pasują i pełnią tę samą funkcję. Jest to szczególnie ważne w przypadku elementów interaktywnych.

Przedstawiony powyżej przykład ilustruje, że spójny projekt może w znacznym stopniu przyczynić się do osiągnięcia harmonii wizualnej: 

  1. dla wszystkich obrazów stosowane są jednolite kształty,
  2. wszystkie obrazy harmonizują ze sobą kolorystycznie, 
  3. ogólnie rzecz biorąc, stosowane są tylko dwa różne rodzaje i rozmiary czcionek, 
  4. tylko jeden kolor jest używany dla literówek i separatorów,
  5. separatory stanowią powtarzający się element projektu - i wizualnie łączą obraz z dwoma nagłówkami.

"*" wyświetla wymagane pola

Chcę otrzymywać newsletter, aby być informowanym o nowych artykułach na blogu, e-bookach, funkcjach i nowościach dotyczących WordPress. Mogę wycofać swoją zgodę w dowolnym momencie. Należy zapoznać się z naszą Polityką prywatności.
To pole służy do weryfikacji i nie powinno być zmieniane.

Podsumowanie: Podstawowe zasady projektowania stron internetowych

Pomimo wszystkich powyższych podstawowych zasad, zasady są po to, aby je łamać. Tylko w ten sposób można stworzyć ciekawy, nowatorski projekt!

Podejścia, które tu pokrótce przedstawiłem, nie są oczywiście nowe. Są one raczej odmianami badań naukowych i/lub psychologicznych, które zostały zastosowane do naszych obecnych mediów komunikacyjnych. Znajomość tych teorii i metod jest czymś, co osobiście uważam za ważne. Często i tak wdrażamy zasady intuicyjnie, bo nasze twórcze oko "nauczyło się" tego w ten sposób.

Ponadto, wiedza o różnych podejściach do projektowania pomaga w ocenie własnych projektów. Pomyśl o tym jak o liście kontrolnej, do której możesz się odwołać, kiedy zdasz sobie sprawę, że coś jeszcze nie do końca działa wizualnie. Często nie potrafisz znaleźć odpowiedniego dystansu do własnego projektu, aby go obiektywnie ocenić. 

Zasady projektowania, o których tu mowa, są dalekie od kompletności. Jeśli chcesz zagłębić się w ten temat, zapraszamy do zapoznania się z poniższymi artykułami i e-bookami: 

Twoje pytania dotyczące harmonijnego projektowania stron internetowych

Masz pytania do Sonji? Zachęcamy do korzystania z funkcji komentarzy. Chcesz być informowany o nowych artykułach dotyczących projektowania i tworzenia stron internetowych? Obserwuj nas na Twitterze i Facebooku, LinkedIn lub za pośrednictwem naszego Newslettera.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola wymagane oznaczone są *.