Artykuł

Podstawy skutecznej wizualnej kompozycji strony internetowej.
15 sierpnia 2023

Projektowanie stron internetowych jest nierozerwalnie związane z wizualną komunikacją. Aby ta komunikacja była jak najbardziej skuteczna, należy zadbać o to aby na stronie została zachowana dobra wizualna kompozycja strony - zarówno całej www, jak i poszczególnych jej sekcji. Aby kompozycja Twojej strony internetowej była skuteczna i przyniosła zamierzony efekt warto zapoznać się z podstawowymi zasadami kompozycji, które poniżej zostaną po krótce przedstawione. Ale pamiętaj: Każdą regułę można złamać, o ile jest ku temu dobry powód!

Hierarchia i skala

Wizualna hierarchia i skala to podstawy wizualnej kompozycji, które mają zastosowanie zarówno przy tworzeniu wszelkiej maści grafik, jak i waśnie podczas tworzenia layoutu strony internetowej. Co to w praktyce oznacza: Tworzenie wizualnej hierarchii oznacza organizowanie elementów wizualnych w kolejności od najważniejszego do najmniej ważnego, podczas gdy skala jest sposobem pokazania tej hierarchii.

To jak zostanie ustalona hierarchia może również zdeterminować to jak zostanie odebrany nasz przekaz wizualny. Spójrz na przykład poniżej: Pierwsza grafika koncentruje się na ogromie wielkości planety, a druga komunikuje znaczenie astronauty. Właściwa hierarchia i skala mogą przekształcić Twój przekaz w coś dużo potężniejszego.

Na pierwszej grafice skupiamy się na ogromie planety, na drugiej ważniejszy jest kosmonauta!

Zatem projektując swoją stronę internetową, zaznacz za pomocą odpowiedniej hierarchii ważności i skali, to co jest istotne i na co chcesz zwrócić uwagę odbiorcy.

Balans

Możesz stworzyć harmonię, porządek i spójność w swoim projekcie za pomocą balansu - równowagi. Istnieją dwa popularne typy równowagi: symetryczna i asymetryczna.

Balans symetryczny

Symetryczną równowagę można osiągnąć, stosując te same elementy kompozycji po obu stronach linii osi (tj. po lewej i prawej lub u góry i u dołu).

Przykład symetrycznej równowagi - ten sam element jest zamieszczony po każdej stronie kompozycji.

Balans Asymetryczny

Równowaga asymetryczna to nieco trudniejsze zestawienie elementów. Układy asymetryczne mają moc wprowadzenia napięcia bądź ruchu w naszym zestawieniu. Przykładowo można przedawnić po jednej stronie układu kilka lekkich elementów / jasnych elementów, a po drugiej stronie jeden masywny / ciemny element.

Przykład równowagi asymetrycznej - po jednej stronie kompozycji zdjęcie/grafika po drugiej stronie tekst.

Biała przestrzeń

W projekcie poczucie równowagi między elementami może zostać również osiągnięte za pomocą białej przestrzeni.

Uwaga: biała przestrzeń nie jest pustą przestrzenią! Pusta przestrzeń to brak czegoś, natomiast biała przestrzeń to element strategiczny, niezbędny aby zrównoważyć bardziej skomplikowaną, zajętą cześć kompozycji.

Najlepsze praktyki tworzenia białych przestrzeni:

  • Zmniejsz grafikę / elementy -  Zmniejszając elementy projektu, możesz utworzyć białą przestrzeń wokół głównych punktów w ramach oryginalnej grafiki.
  • Unikaj wypełniania każdej przestrzeni treścią - Dodając białe miejsce, możesz wyróżnić istniejące treści i stworzyć schludny wygląd.

Skuteczna wizualna kompozycja strony to nie tylko przemyślane treści i grafiki ale również przemyślane białe przestrzenie!

Zdjęcie poniżej pokazuje witrynę z dobrym przykładem białej przestrzeni. Zmniejszając przestrzeń na tekst i robiąc białą przestrzeń, strona wygląda na prostą, nowoczesną i nieskomplikowaną.

Przykład zastosowania celowej białej przestrzeni - taki zabieg pozwala dodać lekkości stronie.

Jedność

Kolejnym elementem, który sprawia, że wizualna kompozycja strony jest skuteczna i efektywna jest jedność - spójność.

Jedność pozwala różnym elementom projektu łączyć się i tworzyć poczucie całości. Jedność kompozycji strony internetowej można osiągnąć za pomocą elementów uzupełniających i powtórzeń. Jak to wykorzystać w praktyce?

Elementy uzupełniające

Uzupełniające się elementy, czyli każdy odrębny i od każdego inny ale posiadające jednoczące je cechy np. Ten sam styl, kolor, kształt itp. One pozwalają stworzyć poczucie ciągłości w kompozycji. Przykład kompozycji na pierwszy rzut oka bardzo pstrokatej ale jak widzisz wszystkie elementy (grafiki) są w tym samym stylu więc nie są dobrane tak całkiem od czapy!

Grafiki przedstawiające różne sceny ale w tej samej stylistyce tworzą spójną wizualną kompozycję strony.

Projektując swoją witrynę, spróbuj w całej witrynie używać:

  • Zdjęć z tej samej sesji zdjęciowej;
  • Zdjęć zrobionych w podobny sposób, w podobnym tonie;
  • Elementów o podobnym stylu;
  • Elementów w podobnej kolorystyce.

Powtórzenie

Powtarzanie to użycie tych samych lub podobnych elementów w celu uzyskania spójności w całej witrynie. Jeśli chcesz aby Twoja Marka była rozpoznawalna to używaj tych samych kolorów, typografii i innych elementów wszędzie tzn. nie tylko na stronie internetowej ale również w kampaniach reklamowych, mediach społecznościowych, czy innych materiałach marketingowych.

Przykładowo: Co przychodzi Ci do głowy gdy widzisz taką kombinację kolorów jak poniżej?

Święty Mikołaj? Coca-Cola? Cokolwiek to jest, to jest to prawdopodobnie wynik skutecznego brandingu!

Kontrast

Wykorzystanie kontrastu pomaga uwypuklić bądź też ukryć niektóre elementy projektu. Dzięki wykorzystaniu kontrastu w swojej wizualnej kompozycji możesz w prosty sposób pokazać co jest najważniejsze w danym miejscu witryny.

Główna zasada podczas wykorzystywania kontrastu to:

  • Jeśli chcesz, aby element się wyróżniał, możesz zwiększyć kontrast lub użyć koloru elementu o wysokim kontraście.
  • Jeśli chcesz, aby element wtopił się w tło, wystarczy obniżyć kontrast.
Przykład zastosowania kontrastu: Główny element strony internetowej (wideo) jest żywy i jasny w porównaniu z tłem ( ulica we mgle ).

Reguła trójpodziału

Reguła trójpodziału jest to technika, która pomoże Ci umieścić Twój główny element po prawej stronie dostępnego miejsca/obrazu/sekcji.

Aby zastosować tę technikę, podziel swój projekt na trzy rzędy i trzy kolumny. W każdym punkcie, w którym linie się przecinają będzie znajdował się twój główny punkt – czyli miejsce gdzie należy umieścić swoje najważniejsze elementy.

Przykładowy podział na trzy główne rzędy i kolumny.

Złoty podział

Obok reguły trójpodziału ważną zasadą kompozycji jest złoty podział

często nazywany „najpiękniejszą liczbą we wszechświecie ”. A to ze względu na to, że można zastosować ten podział niemalże do wszystkiego - od podstawowego prostokąta do ludzkiej twarzy.

Jak samodzielnie możesz odnaleźć złoty podział?

Możesz znaleźć złoty podział, biorąc dowolną linię i dzieląc ją na dwie części. Dzieląc dłuższą część (a) przez krótszą (b) wynik powinien być równy sumie obu części ((a) + (b) podzielonej przez dłuższą część (a). Oba obliczenia muszą być równe 1.618.

Jak zastosować złoty podział w projektach ?

Możesz ustawić wymiary w twoim układzie na 1:1,618. 

Jeśli posiadasz dwie kolumny , pomnóż szerokość jednej z nich przez 1,618 i voilà — oto twój złoty podział.

Możesz też zastosować złoty podział, aby określić rozstaw elementów.

Układając elementy kieruj się liniami prostokątów i staraj się umieścić w nich swoje elementy.

Podział na kolumny zgodnie ze złotym podziałem.

Możesz również, używać go jako przewodnik do określenia rozmieszczenia contentu

Umieść najważniejsze elementy projektu w środku spirali -  jest to miejsce, gdzie Twoi użytkownicy będą patrzeć intuicyjnie.

Środek spirali jest miejscem gdzie w pierwszej kolejności intuicyjnie spojrzy Twój odbiorca.

Podsumowanie

Krótko podsumowując jest kilka prostych zasad wizualnej kompozycji strony www jak i innych projektów graficznych. Trzymając się ich Twoja strona będzie prezentowała taki przekaz jakiego potrzebujesz.

Jeśli chcesz zacząć ćwiczyć zasady kompozycji, to możesz odwiedzać Method of Action. Jest to strona internetowa, na której możesz bezpłatnie wypróbować różne narzędzia do projektowania graficznego, eksperymentuj z kolorem, odstępami i nie tylko!

Jeśli natomiast potrzebujesz więcej wskazówek dot. tworzenia skutecznej strony internetowej to zachęcam do pobrania Darmowego Ebooka - Skuteczna witryna www


A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.

Anna Jakubiak



Najnowsze wpisy

Na co zwrócić uwagę przy wyborze dostawcy domeny i serwera.
Podstawy skutecznej wizualnej kompozycji strony internetowej.
Skuteczne pozycjonowanie wizytówki Google w Google Maps.

Kategorie


Podobne Artykuły

Na co zwrócić uwagę przy wyborze dostawcy domeny i serwera.

Zaczynasz swoje działania przy własnej stronie internetowej i nie wiesz gdzie wykupić domenę i serwer? Mam nadzieję, że informacje na co zwrócić uwagę przy wyborze dostawcy domeny i serwera zawarte w tym artykule, naprowadzą Cię na idealnego dostawcę dla Ciebie. Wybór Domeny Czym jest domena? Domena jest adresem Twojej strony WWW. Adres strony jest zawsze […]

Podstawy skutecznej wizualnej kompozycji strony internetowej.

Projektowanie stron internetowych jest nierozerwalnie związane z wizualną komunikacją. Aby ta komunikacja była jak najbardziej skuteczna, należy zadbać o to aby na stronie została zachowana dobra wizualna kompozycja strony.

Skuteczne pozycjonowanie wizytówki Google w Google Maps.

A 97% osób szuka lokalnych przedsiębiorstw za pomocą Google i Google Maps. Dlatego warto zadbać o to aby nasza wizytówka dotarła do jak największej liczby odbiorców. Można to osiągnąć prowadząc skuteczne pozycjonowanie wizytówki Google.