Kompozycja strony www

Proces oglądania odbywa się przez kilka równoległych, kolejno kierowanych spojrzeń. Po ustaleniu położenia oka w stosunku do przedmiotu, wzrok wędruje od lewej strony na każdy szczegół. Pole widzenia oka jest mniej więcej wielkością stałą i nie obejmuje zawartości przedmiotu, a wyodrębnia jeden z obszarów przy pomocy poszczególnych spojrzeń.

Silne kontrasty światła i cienia najmocniej przyciągają wzrok. Gdy obniżymy kontrast ilustracji, będzie ona zwracała mniej uwagi, niż taka sama, ale o silnych i przeciwstawnych kolorach. Im większa będzie różnica światłocienia, tym bardziej będzie się ona rzucała w oczy. Kontrastowa ilustracja skupi uwagę, a równomierna rozproszy ją.
Podobnie jest z kompozycją strony www. Poszczególne obiekty nie powinny przemawiać jednocześnie, ale w zorganizowanej kolejności. Te, które gość ma ujrzeć jako pierwsze, powinny mieć mocny kontrast.

Patrzący kieruje wzrok najczęściej na środek ekranu i jeśli utworzymy niewidzialne linie zbieżne między różnymi obiektami kompozycji, to gość jednym mgnieniem oka zobaczy zawartość całego ekranu i skieruje wzrok zgodnie z naszymi intencjami. Na ogół dostrzeże szczegóły zaczynając od lewego górnego rogu. Jeśli umieścimy tam ilustrację, to odwróci ona wzrok od innych obiektów. Jeśli zaś będzie tam istotny tekst, to zostanie on zauważony najwcześniej.

Wyodrębnienie punktu ekranu, na który patrzący skieruje wzrok, nie powinno być przypadkowe. Jeżeli odpowiednio przemyślimy zawartość, sposób ułożenia tekstu, menu i ilustracji, a także sporządzimy stronę tak, iż otworzy się w miarę szybko, wówczas wzrok patrzącego trafi w przewidywany punkt.

Pierwsze wrażenie

Pierwszą stronę opracowujemy zazwyczaj staranniej aby gościa zachwycić bądź zaciekawić i zachęcić do obejrzenia pozostałych. Jednak odwiedzający nie zawsze zajrzą na pierwsza stronę, gdyż mogą zacząć oglądanie od dowolnej, wskazanej przez którąś z wyszukiwarek sieciowych.
Kilkanaście pierwszych sekund odpowiednio usposobi odwiedzającego do zainteresowania się zawartością witryny. Zakłócenia w rytmie tekstu oraz nieodpowiedni kontrast między tekstem a tłem mogą utrudniać proces oglądania. Niekorzystne wrażenie może zniweczyć ochotę do zapoznania się z treścią. Oczekiwanie na otwarcie strony zbyt dużej, albo zawierającej zbyt wiele ilustracji - łatwo może zrazić gościa.

Menu

Menu nawigacyjne ma być widoczne, ale nie odwracać uwagi od zawartości i nie powinno stać się najważniejszym komponentem layoutu. Menu powinno być skonstruowane w taki sposób, by gość bez zastanawiania się mógł wybrać odpowiedni dział lub temat. Ułatwieniem są połączenia umożliwiające otwieranie kolejnych stron, bez korzystania z menu. Kilka strzałek w nagłówku i w stopce strony nie zajmie wiele miejsca, a przyspieszy poznanie całości.
Warto zastanowić się nad funkcją menu złożonego z wielu przycisków (ilustracji), z których każdy opóźnia otwarcie strony.

Połączenia nawigacyjne należy umieszczać w tych samych miejscach i najlepiej korzystać z tego samego wzoru poleceń we wszystkich stronach witryny. Jeśli witryna zawiera wiele stron, nie ma potrzeby pokazywania wszystkich połączeń, a tylko prowadzące do głównych stron. Dopiero tam należy pokazać połączenia związane z treścią strony.
Gdy wybierzemy formę IMAGEMAP, to pamiętajmy o umieszczeniu odsyłaczy tekstowych, aby użytkownicy takich przeglądarek mogli łatwo wejść na inne strony.

Interesującym sposobem pokazania (użycia) menu jest otwarcie go w dodatkowym oknie przeglądarki. Oglądający może wówczas przemieścić menu w dowolne miejsce na ekranie, a my możemy wykorzystać całą powierzchnię okna. Jednak niedoświadczony gość może w ten sposób otworzyć zbyt wiele okien i łatwo pogubić się w strukturze witryny.

Kolumny i szpalty

Teksty długie, na całą szerokość monitora, wywołują zmęczenie u czytającego, podobnie jak zbyt wysokie szpalty. Oko potrzebuje zmian w rytmie i można to osiągnąć przez odpowiednio dopasowaną szerokość wiersza. Nadmierne rozciągnięcie tekstu łatwo psuje wysiłek autora. Czytanie najbardziej interesującego tekstu staje się uciążliwe gdy szerokość wiersza przekracza 60 znaków (razem ze spacjami). Czytelnik, oprócz zmęczenia wzroku, traci orientację.
Skutecznym sposobem ograniczenia szerokości tekstu jest umieszczenie zawartości strony w tabeli podzielonej na kolumny, których szerokości definiujemy w pikselach.

Centrowanie i równanie do marginesów

Najpopularniejszym poleceniem HTML do tworzenia bloków jest <BLOCKQUOTE></BLOCKQUOTE>.
Do tworzenia bloków i precyzyjnego ustawienia każdego obiektu w dokumencie HTML możemy też wykorzystać efekt powielania ładowanych elementów graficznych. Do tego celu używamy przezroczystego punktu, który jest 1-pikselowym GIFem. Odległość od marginesu - w tym przykładzie - powstała z użycia polecenia:
  <IMG WIDTH="10" HEIGHT="120" ALIGN="left" SRC="clear.gif">

Wcięcie po lewej stronie uzyskane jest tą samą metodą, ale z użyciem innych wartości: <IMG WIDTH="5" HEIGHT="1" ALIGN="left" SRC="clear.gif"> Używając przezroczystego i 1-pikselowego GIFa możemy konstruować niewidoczne bloki, w poziomie i w pionie, a tym samym precyzyjnie regulować odległość między różnymi obiektami albo tworzyć wcięcia.

Dla odsunięcia tekstu możemy użyć również znacznika &nbsp; ale nie zawsze jest to wygodne, zwłaszcza gdy potrzeba wstawić kilkanaście czy kilkadziesiąt takich znaczników, albo wówczas, gdy zależy nam na dokładności.

Tekst, rozmiar i rodzaj fonta

Nie powinno się stosować więcej niż dwóch rodzajów jak i dwóch wielkości fontów. Wyjątkiem są tytuły i nagłówki. Wielkość fonta użytego do tytułów należy konsekwentnie stosować w całym tekście.
Często spotykanym wyróżnieniem odwracającym wzrok są podkreślenia tekstu. Aby nie zakłócić rytmu oglądania warto dopasować wysokości fontów przez zmniejszenie wysokości wielkich liter i cyfr.

Kompozycja wyrazów złożonych z fontów o zróżnicowanej wysokości (ale nie całych tekstów) może zatrzymać wzrok, lecz nie należy jej używać w odsyłaczach, bo podkreślone zostaną linią o zróżnicowanej grubości. Jeśli uznamy, że warto i trzeba użyć efekt zróżnicowania wysokości fontów, to można tekst zastąpić ilustracją, która nie zajmie wiele miejsca, albo stosować polecenia CSS, eliminujące podkreślenia.
Dla rozdzielenia czy zakończenia tekstu możemy użyć przerywników (ilustracje lub linie) lub ozdobnych winiet, w klasycznej typografii nazywanymi finalikami od spełnianej funkcji.

Ilustracje

Niedostateczna wciąż szybkość ładowania stron zmusza nas do ograniczeń w używaniu ilustracji. Poza tym, długie ładowanie odwraca uwagę od treści. Jeśli mamy coś do przekazania niekoniecznie musimy wyrażać to z pomocą ilustracji. Gdy już ich użyjemy, zadbajmy o to aby ilustracje miały odpowiednie rozmiary i szybko się otwierały.
Wygodnym sposobem pokazania dużej ilustracji jest użycie poleceń napisanych w JavaScript i otwarcie ich w dodatkowym oknie, bez zakłócania oglądania.

Efekty

Animacje, JavaScript, Aplety i efekty dźwiękowe są najczęściej używanymi rodzajami efektów. Wiele innych efektów wymaga plug-in, które trzeba skopiować i zainstalować. Nie wszyscy mają na to czas i ochotę, tak że w ten sposób można stracić wielu odwiedzających. Ponadto efekty odwracają uwagę, ale to może być zaleta ... jeśli tego pragniemy ...