Podstawowe zasady harmonijnego projektowania stron internetowych

8 Min.
Podstawowe zasady projektowania stron internetowych

Jak mówi powiedzenie: Nie ma drugiej szansy na pierwsze wrażenie. Wywołujesz nieznaną stronę internetową i w ciągu kilku sekund oceniasz, czy ta strona jest "dobra" czy "zła". Zwłaszcza w przypadku własnych kreacji nieskończenie trudno jest przeprowadzić obiektywną analizę. Na szczęście istnieją sprawdzone zasady projektowania, które można wykorzystać jako przewodnik. Przegląd.

Co to w ogóle jest "dobry" projekt sieci?

Projektowanie stron internetowych jest dość skomplikowane: wymaga czegoś więcej niż tylko oka do dobrej typografii i wyczucia atrakcyjnego układu wizualnego. Projektowanie stron internetowych oferuje niesamowitą różnorodność możliwości kreatywnego wyrażania siebie. Ale daje też co najmniej tyle samo możliwości zagubienia się w procesie projektowania. Zwłaszcza jeśli jesteś głęboko zakorzeniony w procesie projektowania, łatwo jest stracić z oczu las dla drzew. 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 graficzny idealnie pasuje do jednej strony, podczas gdy na innej wydaje się zagubiony i nie na miejscu.

Co sprawia, że strona odnosi sukcesy?

Dobre strony internetowe prezentują informacje w sposób jasny i efektywny, dzięki czemu użytkownicy intuicyjnie trafiają na stronę. W większości przypadków strona internetowa zorientowana na użytkownika odnosi sukces dzięki dobrze wyważonej interakcji typografii, elementów interaktywnych i wielu udoskonaleń wizualnych. 

A ponieważ nie jest to wystarczająco skomplikowane, jesteśmy również ograniczeni tym, co mogą wyświetlać przeglądarki naszych potencjalnych użytkowników. I być może także dzięki technicznym umiejętnościom dewelopera lub narzędziu, które wykorzystujemy do stworzenia danej strony internetowej. 

Należy również wziąć pod uwagę aktualne trendy oraz tożsamość korporacyjną klienta. Projektowanie stron internetowych jest w zasadzie sumą projektowania UX-, UI- i graficznego, CI oraz aktualnych trendów z uwzględnieniem warunków technicznych.

Stworzenie strony internetowej jest dość obszernym projektem. Nic dziwnego, że zwykle stoi za tym cały zespół. Często pojedyncze osoby (i niestety zespoły) mają tendencję do zwracania większej uwagi na obszary, w których są szczególnie silne. Z kolei innym obszarom poświęca się mniej uwagi, a w skrajnych przypadkach wcale. Stwarza to brak równowagi, który może sprawić, że poczujesz, że strona internetowa jest gorszej jakości i nieharmonijna.

"Dobry" projekt sieci jest wynikiem równowagi pomiędzy różnymi obszarami projektowania i warunkami technicznymi.

Ponieważ szczegółowe rozważania na temat wszystkich obszarów wykraczałyby poza zakres tego artykułu, skupię się teraz głównie na projektowaniu wizualnym. 

Kontrast, biała przestrzeń i kolor

Kontrast często idzie w parze z wyborem podstawowych kolorów projektu, jak również białej przestrzeni w kompozycji. Jednak biała przestrzeń nie musi oznaczać tu przestrzeni, która pozostaje biała. Odnosi się raczej do przestrzeni między elementami. Ta przestrzeń pomiędzy nazywana jest również "przestrzenią negatywną" i może, nawiasem mówiąc, nadal być kolorowa.

Duża ilość białej przestrzeni zazwyczaj sprawia, że strona wygląda na uporządkowaną i bardziej przejrzystą. Takie podejście często idzie w parze z Minimalizm. Oznacza to konsekwentne usuwanie z układu wszystkiego, co jest niepotrzebne i nie wnosi żadnej rozpoznawalnej wartości do projektu. 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: Trudne do odczytania treści mogą spowodować, że osoby z wadami wzroku (np. rozpoznawanie kolorów) nie będą w stanie ich w ogóle zobaczyć.

Zwłaszcza przy tendencji do wypełniania nagłówków stron dużymi panoramicznymi obrazami, często spotykamy trudne do odszyfrowania nakładki tekstowe.

Skuteczny przykład dla wielu białek i kontrastów

Podstawowe zasady harmonijnego projektowania stron internetowych
Podstawowe zasady harmonijnego projektowania stron internetowych

https://aiven.io/

Słaby przykład kontrastu

Oto przykład, który stanowi problem z kontrastem, zwłaszcza w wersji mobilnej. Wezwanie do działania znika całkowicie na niespokojnym tle.

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

Czasami nie jest tak łatwo projektantom odfiltrować odpowiednie kolory dla danego 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 drogiego layoutu.

Teoria kolorów: Narzędzia te pomagają w wyborze kolorów

Narzędzie kolorystyczne do projektowania materiałów

Narzędzie kolorystyczne do projektowania materiałów tworzy wireframey o niskiej wierności z domyślnymi dwoma podstawowymi kolorami.

material-design-color-narzędzie

Adobe Color Wheel

Adobe Color Wheel Pomaga nie tylko w tworzeniu różnych palet kolorów, ale także wydobywa używane palety kolorów z istniejących projektów. Ostatnio jest to możliwe również z nachylenia.

koło adobe-color-wheel

Przy doborze odpowiednich kolorów warto przyjrzeć się uważnie marce klienta: Które palety kolorów są już w użyciu? W jakim stopniu mogę od nich odstąpić?

Podstawy teorii koloru są również nieuniknione: w zależności od branży klienta można wybrać kolor o odpowiednim efekcie psychologicznym. Nie jest przypadkiem, że niebieski jest często używany w poważniejszych branżach - takich jak ubezpieczenia, konsulting i strony porównawcze. Niebieski wzbudza zaufanie i działa uspokajająco. Nie należy tu jednak być zbyt ogólnym, gdyż nawet niuanse tego samego koloru mogą wywołać bardzo różne emocje.

Znasz zasadę 60-30-10?

Zalecane jest to jako złota zasada przy stosowaniu palet kolorów. Oto zastosowana zasada: kolor główny stanowi ok. 60 procent układu, kolor uzupełniający 30 procent, a trzeci kolor dodaje kolejne podkreślenia z 10 procentami. Takie rozwiązanie ma szczególnie dobrze wyważony wpływ na użytkownika.

Symetryczny lub asymetryczny układ elementów konstrukcyjnych

W swoim artykule "The Principles of Design and Their Importance" (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. Różnicuje treści w zależności od ich widoczności - innymi słowy, czy są mniej czy bardziej widoczne. 

W związku z tym poniższe wyzwanie polega na takim ułożeniu treści, aby przekazywały poczucie równowagi. Pomocna może być tu decyzja projektowa "układać symetrycznie lub asymetrycznie".

Jak działają oba podejścia?

W podejściu symetrycznym, elementy o podobnym znaczeniu są ułożone razem. Dzięki asymetrycznemu podejściu, z drugiej strony, bardziej wyraziste i mniej rzucające się w oczy treści są ułożone razem. 

Układ może być na przykład utrzymywany w czystości. Elementy są wyraźnie oddzielone od siebie, jak w Couro Azul tak jest. Często taka zawartość jest umieszczana nieco poza centrum, aby dać słabszemu elementowi nieco więcej miejsca i stworzyć równowagę.

Couro Azu

Zero stosuje jednak tę samą zasadę - jednak przy bardziej swobodnych ustaleniach. Ze względu na duże wykorzystanie białej przestrzeni, wydaje się elegancki i nowoczesny.

To podejście sprawdza się bardzo dobrze na większych ekranach (od rozmiaru tabletu). Mniejsze urządzenia, takie jak smartfony, korzystają natomiast z wyraźnie oddzielonych od siebie modułów rozmieszczonych jeden pod drugim.

Określanie i ustalanie priorytetów

Zanim przystąpimy do projektowania strony internetowej, należy jasno określić, jaki komunikat powinien zostać przekazany. Często przejrzystość w koncepcji marketingowej przynosi również przejrzystość w układzie graficznym.

Po ustaleniu kluczowych komunikatów ważne jest ich wyróżnienie za pomocą kolorów i/lub typografii.

Jak oboje mogą wyglądać razem, widać na tym przykładzie:

kowboj
https://cowboy.com

Istnieje jednak również wiele możliwości wdrożenia. Przecież treści nie można podkreślać wyłącznie pogrubioną typografią i kolorem. Również poprzez obrazy - jak w przypadku Restauracja Jamie Oliver's - i poprzez wzajemne oddziaływanie różnych zasad wprowadzasz wybrane treści w centrum uwagi.

Restauracja Jamie Oliver's

Proporcja, spójność i hierarchia

Treść strony powinna być przedstawiona w sposób, który ma sens w jej hierarchii. Dlatego stawiasz najważniejszą rzecz na szczycie. Przy malejącym znaczeniu należy zejść na dół. Powinieneś zatem zadać sobie pytanie: Jakie informacje są najważniejsze dla odwiedzającego moją stronę? Co to są tylko dodatkowe informacje? 

Jest to również powód, dla którego w większości przypadków menu nawigacyjne znajduje się na górze. Poza tym, że jest to wzór UI, jest to po prostu jeden z najważniejszych aspektów strony. Przecież menu jest niczym innym jak przeglądem podstawowych treści, które tam proponujesz. A więc, że tak powiem, podsumowanie twojej strony internetowej.

Hierarchia wizualna: Co jest naprawdę ważne

Hierarchia może być również tworzona przez tzw. ruch. Tutaj układamy zawartość strony tak, aby oko było przez nią prowadzone. Można to osiągnąć, na przykład, poprzez zastosowanie kształtów i układu. To Portfel jest interesującym przykładem tego, jak to może wyglądać:

Portfel

Oko jest prowadzone przez ekran od lewej do prawej strony. Punkt 01 ma tu wyraźnie największą hierarchię - nawet wszystkie elementy są tej samej wielkości i na początku wydają się równe. 

Proporcja odgrywa zatem również pewną rolę: elementy tej samej wielkości, koloru i kształtu w zasadzie dają nam poczucie przynależności do siebie i pełnienia tej samej funkcji. Jest to szczególnie ważne w przypadku elementów interaktywnych.

Przedstawiony powyżej przykład pokazuje, że spójny projekt może w znacznym stopniu przyczynić się do powstania wizualnej harmonii: 

  1. Do wszystkich zdjęć używane są jednolite formularze,
  2. wszystkie zdjęcia współgrają ze sobą w kolorze, 
  3. W sumie używane są tylko dwie różne czcionki i rozmiary czcionek, 
  4. tylko jeden kolor jest używany do literówek i separatorów
  5. Separatory stanowią powtarzający się element projektu - i wizualnie łączą obraz z dwoma nagłówkami.
FREE DEV blog lightblue

Podstawowe zasady projektowania stron internetowych - Wnioski

Pomimo wszystkich powyższych podstawowych zasad, reguły są do złamania. To jedyny sposób na tworzenie ciekawych, nowych projektów!

Podejścia, które tutaj krótko przedstawiłem, nie są oczywiście nowe. Są to raczej odmiany badań naukowych i/lub psychologicznych, które zostały przeniesione do naszych obecnych mediów komunikacyjnych. Osobiście uważam, że znajomość tych teorii i metod jest dla mnie ważna. Często i tak wdrażamy zasady intuicyjnie, bo nasze kreatywne oko "nauczyło się" tego.

Ponadto, wiedza na temat różnych podejść w projektowaniu pomaga w ocenie własnych projektów. Pomyśl o tym jak o liście kontrolnej, na którą możesz wpaść, gdy zauważysz, że coś nie do końca działa wizualnie. Często nie można znaleźć odpowiedniego dystansu do własnego projektu, aby ocenić go obiektywnie. 

Wskazane tu zasady projektowania są dalekie od kompletnych. Jeśli chcielibyście Państwo zagłębić się w ten temat, zapraszamy do zapoznania się z tymi artykułami i e-bookami: 

Jaka jest twoja opinia na temat zasad projektowania? Jakie masz pytania do Sonji? Proszę skorzystać z funkcji komentarza. Chcesz być informowany o nowym wkładzie w projektowanie i rozwój stron internetowych dla agencji i freelancerów? Następnie podążaj za nami dalej TwitterFacebook albo o naszym Newsletter.

Po studiach projektowania gier i kreatywnego pisania w zielonym regionie Auckland, wyspecjalizował się Sonja Hoffmannw projektowaniu stron internetowych i aplikacji oraz ich rozwoju. Skupia się na gamifikacji i badaniu motywacji i doświadczenia użytkowników, w połączeniu z pasją i ciekawością trendów technologicznych.

Artykuły pokrewne

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola oznaczone są * Zaznaczone.