Podstawy harmonijnych projektowania stron internetowych

Sonja Hoffmann Ostatnia aktualizacja 21.10.2020
.
. 7 Min.
Podstawowe zasady projektowania stron internetowych
Ostatnia aktualizacja 21.10.2020

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 własnych kreacji nieskończenie trudno jest dokonać obiektywnej analizy. Na szczęście istnieją sprawdzone w czasie zasady projektowania, które możesz wykorzystać jako przewodnik. 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 wytłumaczyć, dlaczego ten sam element designu 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 aby użytkownik mógł intuicyjnie odnaleźć się na stronie. W większości przypadków, strona zorientowana na użytkownika odnosi sukces dzięki dobrze wyważonemu połączeniu typografii, elementów interaktywnych i dużej ilości wizualnego dopracowania. 

A ponieważ to nie jest wystarczająco skomplikowane, jesteśmy również ograniczeni przez to, co mogą wyświetlić przeglądarki naszych potencjalnych użytkowników. Jeśli to konieczne, również przez techniczne umiejętności dewelopera lub narzędzia, które wykorzystujemy do tworzenia danej strony internetowej. 

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.

Stworzenie strony internetowej to dość obszerne przedsięwzięcie. Nic dziwnego, że zwykle stoi za tym cały zespół. Często jednostki (i niestety zespoły) mają tendencję do zwracania większej uwagi na obszary, w których są szczególnie silne. Natomiast innym obszarom poświęca się mniej uwagi - lub w skrajnych przypadkach nie poświęca się jej wcale. Powoduje to brak równowagi, który może spowodować, że użytkownik będzie postrzegał stronę 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 zazwyczaj sprawia, że strona wygląda schludniej i bardziej przejrzyście. Takie podejście często idzie w parze z minimalizmem. Oznacza to konsekwentne usuwanie z layoutu wszystkiego, co jest zbędne i nie wnosi do projektu żadnej rozpoznawalnej wartości dodanej. Czy to tekst, elementy dekoracyjne, czy zalew CTA.

Wskazówka

Przy planowaniu kontrastu i koloru 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 odebrać tych treści.

Szczególnie przy trendzie wypełniania nagłówków stron internetowych dużymi, panoramicznymi zdjęciami, często spotykamy się z trudnymi do rozszyfrowania nakładkami tekstowymi.

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 layoutu.

Teoria kolorów: Te narzędzia pomogą Ci wybrać kolory

Narzędzie kolorów Material Design

Narzędzie Material Design Color Tool tworzy nisko wierne makiety przy użyciu dwóch kolorów podstawowych.

material-design-color-tool

Koło kolorów Adobe

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ć?

Nieuniknione są również podstawy teorii kolorów: w zależności od branży klienta 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, doradztwo czy porównywarki internetowe. Niebieski ma działanie dodające pewności siebie i uspokajające. Ważne jest jednak, aby nie być zbyt ogólnym, ponieważ 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.

Symetryczne lub asymetryczne rozmieszczenie elementów projektu

W swoim artykule "Zasady projektowania i ich znaczenie", autor i projektant Cameron Chapman wyjaśnia swoje dwa najważniejsze podejścia do równowagi w projektowaniu stron internetowych. Zgodnie z tym wyróżnia treści według ich widoczności - czyli czy są bardziej przyciągające wzrok, 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ę.

Couro Azu

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 przystąpimy do projektowania strony internetowej, należy jasno określić, jaki przekaz ma być na niej zawarty. Często jasność w koncepcji marketingowej przynosi również jasność w układzie 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:

kowboj
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

Proporcja, wspólnota i hierarchia

Zawartość strony powinna być prezentowana w taki sposób, aby miała sens w swojej hierarchii. Dlatego najważniejsze umieszczasz na samej górze. Z malejącym znaczeniem powinieneś pracować w dół. Należy więc zadać sobie pytanie: Jakie informacje są najważniejsze dla osoby odwiedzającej moją stronę? Co jest jedynie dodatkową informacją? 

Dlatego też w większości przypadków menu nawigacyjne znajduje się na górze strony. Poza tym, że jest to wzorzec UI, jest to po prostu jeden z najważniejszych aspektów strony. W końcu menu to nic innego jak przegląd podstawowych treści, które tam oferujesz. Oświadczenie o treści Twojej strony, że tak powiem.

Hierarchia wizualna: co jest naprawdę ważne

Hierarchia może być również tworzona poprzez tzw. ruch. Tutaj układamy treść strony w taki sposób, aby oko było przez nią prowadzone. Można to osiągnąć np. 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ść. 

Tak więc 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.

Podstawowe zasady w projektowaniu stron internetowych - Podsumowanie

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: 

Jakie jest Twoje zdanie na temat zasad projektowania? Jakie masz pytania do Sonji? Zapraszamy do skorzystania z funkcji komentarza. Chcesz być informowany o nowych artykułach na temat projektowania i tworzenia stron internetowych dla agencji i freelancerów? Następnie śledź nas na Twitterze, Facebooku lub poprzez nasz newsletter.

Po ukończeniu studiów z zakresu projektowania gier i twórczego pisania w malowniczym Auckland (w Nowej Zelandii) Sonja Hoffman zadecydowała o tym, by dalej rozwijać się jako webdesigner oraz specjalista ds. tworzenia aplikacji i ich rozwoju. Zajmuje się grywalizacją (to wykorzystanie elementów gier i technik projektowania gier w kontekście niezwiązanym z grami) i badaniami nad motywacją i doświadczeniami użytkownika. Łączy swoją profesję z własnym zainteresowaniem nowościami technologicznymi.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

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