Układ i kompozycja

 

 Pojęcie kompozycji w sztukach wizualnych - fotografii definiowane jest jako układ elementów zestawionych ze sobą w taki sposób, aby tworzyły one harmonijną całość.
   Celem kompozycji jest osiągnięcie zamierzonego efektu plastycznego poprzez umiejętne dobranie kształtów, proporcji, faktur i położenia przedstawianych elementów, czasem na drodze porządkowania podobnych do siebie składników, a kiedy indziej poprzez zestawianie ich na zasadzie kontrastu. W kompozycji wykorzystuje się też często pewne konstrukcje znane z geometrii takie jak symetria czy złoty podział. Odpowiednie operowanie tymi narzędziami daje efekt w postaci różnych nastrojów, uczuć, przeżyć jakich może doświadczyć.    Niewątpliwie temat ten w dużym stopniu dotyczy również projektowania stron internetowych. Wygląd graficzny strony internetowej kształtowany jest podobnie jak w przypadku powstawania obrazów. Podczas tworzenia dobrego projektu graficznego można wyróżnić kilka zasad i konwencji, dzięki którym  projekt jest w stanie osiągnąć sukces i uznanie. 

 

Teoria siatki

   Siatka geometryczna mimo swoich zaawansowanych możliwości wykorzystywanych w inżynierii czy architekturze, jest również podstawowym narzędziem w projektowaniu grafiki.
   Używanie siatki nie służy jedynie sprawianiu, że elementy stają się kwadratowe lub równo ustawione - chodzi tu również o proporcje.
   Klasyczna teoria siatki przez tysiące lat wpływała na udane przedsięwzięcia artystyczne. Pomysł dzielenia elementów kompozycji sięga wstecz do matematycznych idei Pitagorasa i jego uczniów, którzy zdefiniowali liczby jako stosunki a nie pojedyncze jednostki. Pitagorejczycy dostrzegli matematyczny model, który tak często występował w naturze, iż wierzyli, że ma pochodzenie boskie. Ten wzorzec określali jako złoty podział lub boską proporcję.
   Złoty podział to podział odcinka na dwie części tak, by stosunek długości dłuższej z nich do krótszej był taki sam, jak całego odcinka do części dłuższej.
   W projektowaniu grafiki kompozycje podzielone liniami o proporcjach zgodnych ze złotym podziałem są uważane za estetycznie przyjemne. Artyści renesansowi wykorzystywali boską proporcję do projektowania swoich obrazów, rzeźb czy architektury, tak jak dzisiejsi projektanci często stosują ten podział podczas tworzenia układów stron, fotogfafii, plakatów czy broszur. Zamiast odwoływać się do wyczucia artystycznego złoty podział dostarcza logicznych wskazówek tworzenia pięknych projektów.
   Udowodniono empirycznie, że różne fragmenty pola widzenia ludzkiego oka otrzymują różny poziom uwagi mózgu. W praktyce oznacza to, że umieszczenie tematu w określonym miejscu kadru sprawi, że cały obraz wyda się patrzącemu bardziej interesujący. Miejscem tym nie jest środek. Dużo dynamiczniejszy efekt uzyskuje się używając przestrzeni poza środkiem, ale też nie zupełnie na krawędzi obrazu. Reguła trójpodziału, wynikająca bezpośrednio ze złotego podziału precyzuje to w następujący sposób: dzieląc kadr na trzy równe pionowe i trzy równe poziome części, uzyskuje się cztery tzw. "gorące punkty", w miejscach przecięcia się prostych dzielących obraz.

Siatka powstała przy zastosowaniu reguły trójpodziału

   Jeżeli umieszczony zostanie temat projektu strony w jednym z tych punktów, z całą pewnością przyciągnie on uwagę obserwatora.
   Jak widać siatka jest niewątpliwie bardzo ważnym narzędziem służącym nie tylko fotografom czy malarzom ale również projektantom stron internetowym. Mając wyznaczone linie zgodnie z reguła trójpodziału można ułożyć poszczególne elementy strony w sposób zgodny z koncepcjami wynikającymi z tej zasady. Odpowiednio umieszczone elementy graficzne i informacje na stronie, pozwalają stworzyć ładnie i czytelnie wyglądającą witrynę. Co w finale prowadzi  do skutecznej komunikacji z użytkownikiem.

Reguły układu i kompozycji

   Tak jak obiekty fizyczne mają swoją wagę, tak samo jest z elementami układu strony. Jeżeli elementy z obu stron kompozycji mają tę samą „wagę”, wówczas równoważą się wzajemnie. Wyróżniamy dwa podstawowe rodzaje wizualnej równowagi: symetryczną i asymetryczną.

   Równowaga symetryczna (czy też równowaga formalna) pojawia się, gdy elementy kompozycji są jednakowe po obu stronach osi. Chociaż ten typ symetrii, zwany horyzontalną symetrią, może nie być przydatny dla wszystkich projektów, może być on zastosowany w układach stron internetowych poprzez umieszczenie zawartości na środku lub zrównoważenie jej w kolumnach.
   W symetrii równowagi można wyróżnić jeszcze dwa rodzaje symetrii. Są one mniej popularne w projektach stron internetowych ze względu ich charakter. Często występują one w projektach drukarskich oraz projektach logo. Są to:

• Symetria wieloosiowa, która zachodzi, gdy kompozycja jest zrównoważona według więcej niż jednej osi.
• Symetria radialna, która występuje, gdy elementy kompozycji są jednakowo rozstawione od jej centralnego punktu.

   Równowaga asymetryczna (czy też równowaga nieformalna) jest nieco bardziej abstrakcyjna i ogólnie bardziej wizualnie interesująca niż równowaga symetryczna. Asymetryczna równowaga zamiast umieszczania lustrzanych obrazów po obu stronach kompozycji dotyczy obiektów o różniącym się rozmiarze, kształcie, odcieniu czy umiejscowieniu. Obiekty te są tak ustawione, aby pomimo swych różnic równoważyły się na stronie. Jeśli po jednej stronie znajduje się duży obiekt i zestawia się go z kilkoma mniejszymi elementami po drugiej stronie, wówczas cała kompozycja nadal będzie robiła wrażenie zrównoważonej.
   Równowaga asymetryczna, w przeciwieństwie do równowagi symetrycznej, jest bardzo uniwersalna i jako taka jest znacznie częściej wykorzystywana w Internecie.
   Często da się zauważyć, że w większości dwukolumnowych układów stron internetowych większa kolumna jest często bardzo jasnego koloru, co jest taktyką tworzącą dobry kontrast dla tekstu i zasadniczej treści. Drobna kolumna nawigacyjna jest zwykle ciemniejsza, ma jakiś rodzaj obramowania lub jest tak sporządzona, aby – wyróżniając się w jakiś inny sposób – zapewniała równowagę kompozycji.
   Kolejną znaczącą zasadą przy tworzeniu obiektów graficznych jest reguła jedności. Teoria projektowania określa jedność jako sposób, w jaki różne elementy kompozycji wchodzą wzajemnie ze sobą w relacje. Jednolity układ projektu to taki, który funkcjonuje raczej jako całość aniżeli osobne fragmenty.
    Chociaż nie jest to już dziś takim problemem, to jedność jest jednym z wielu powodów, dla których projektanci stron WWW zawsze pogardzali ramkami HTML-a. Ważne jest, aby jedność istniała nie tylko wewnątrz każdego komponentu strony internetowej, ale na całej stronie – sama strona musi funkcjonować jako całość.
    Aby uzyskać efekt jedności układu strony można wykorzystać dwie techniki: bliskość i powtarzanie.
   Bliskość jest oczywistym, ale nader często niedostrzeganym sposobem na sprawienie, aby grupa obiektów stanowiła jedną całość. Umieszczenie obiektów blisko siebie w układzie strony tworzy punkt centralny, który przyciąga oko.
   Powtarzanie występuje kiedy zbieramy razem podobne elementy, wówczas tworzą one grupę. W podobny sposób powtarzanie kolorów, kształtów, tekstury lub podobnych obiektów pomaga scalić projekt strony, tak aby tworzył zwartą całość.
   Powtarzanie jest często stosowane w projektach stron internetowych do połączenia elementów kompozycji. Dobrym tego przykładem wśród niezmodyfikowanych elementów HTML-a jest wypunktowana lista. Znacznik wypunktowania poprzedzający każdy element listy jest graficzną wskazówką, że wypunktowane składniki tworzą całość. Powtarzane desenie i tekstury mogą również w dużym stopniu pomóc w scaleniu projektu.
   Ściśle związane z zasadą jedności jest pojęcie wyróżnienia czy dominacji.
Wyróżnienie zamiast skupiać się na dopasowaniu różnych elementów projektu do siebie polega na sprawianiu, aby konkretny obiekt przykuł uwagę oglądającego. Projektując układ strony często występuje potrzeba wyróżnienia jakiegoś elementu zawartości strony. Może to być przycisk, który użytkownicy powinni nacisnąć lub komunikat, który powinni przeczytać. Jednym ze sposobów osiągnięcia takiego wyróżnienia jest uczynienie takiego elementu punktem skupiającym.  

Punktem skupiającym jest cokolwiek na stronie, co przyciąga wzrok osoby oglądającej, a nie jest po prostu częścią strony jako całości ani nie wtapia się w otoczenie. Podobnie jak w przypadku zasady jedności, istnieje kilka sprawdzonych i niezawodnych metod tworzenia punktu skupiającego:

• Umiejscowienie

   Środek kompozycji jest punktem, na który użytkownicy patrzą w pierwszej kolejności, i zawsze jest najlepszym miejscem do uzyskania wyróżnienia (chociaż praktyczne ograniczenia projektów stron WWW nieczęsto na to pozwalają). Im dalej określony element znajduje się od środka, tym mniej prawdopodobne, że zostanie pierwszy zauważony.

• Ciągłość

   Zasada kryjąca się za pojęciem ciągłości polega na tym, że kiedy oczy odbiorcy zaczynają poruszać się w jednym kierunku, wykazują tendencję do poruszania się dalej tą samą drogą aż do momentu, gdy natrafią na bardziej dominującą cechę.

• Izolacja

   Podczas gdy bliskość pozwala otrzymać jedność projektu, tak izolacja sprzyja wyróżnieniu. Obiekt, który został wyodrębniony ze swojego otoczenia, domaga się zwrócenia na niego uwagi.

• Kontrast

   Kontrast określa się jako zestawienie odmiennych elementów graficznych i jest on najczęściej stosowanym sposobem uzyskania wyróżnienia w układzie strony. Zasada jest prosta: im większa różnica pomiędzy graficznym obiektem i jego otoczeniem, tym bardziej będzie się on wyróżniał. Kontrast można stworzyć za pomocą różnicy kolorów, a także rozmiaru i kształtu.

• Proporcja

   Jednym z interesujących sposobów uzyskania wyróżnienia w kompozycji jest zastosowanie reguł proporcji. Proporcja jest zasadą projektowania dotyczą różnic skali obiektów. Jeśli umieszczony zostanie obiekt w otoczeniu o większej bądź mniejszej skali niż sam obiekt, wówczas będzie on wydawał się większy lub mniejszy, niż wygląda w rzeczywistości. Ta różnica w proporcji przyciąga uwagę oglądających do danego obiektu, który w takim kontekście wydaje się być nie na miejscu.