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.


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

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.

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

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!

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?

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.

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.

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.

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.

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