Strony internetowe przeznaczone dla dzieci

 Dzieci jako użytkownicy stron internetowych stanowią wyjątkową i bardzo trudną grupę docelową. Związane jest to z tym, iż nie osiągnęły one pełnej dojrzałości, co determinuje ich inne spojrzenie i interpretacje warunków zewnętrznych a niżeli osoby dorosłe. 
   Zjawiskiem nierozerwalnie związanym z coraz powszechniejszym dostępem dzieci do stron internetowych, zarówno w domach, jak i w szkołach, a wymagającym odrębnej analizy, jest zagadnienie wykorzystania sieci Internet w procesie nauczania i uczenia się.
   Wykorzystanie Internetu i stron internetowych w procesie kształcenia najmłodszych wzbudza wiele kontrowersji. W przypadku młodzieży w starszym wieku szkolnym nie pojawia się tyle wątpliwości. Korzyści wynikające z umiejętności posługiwania się komputerem oraz posiadania dostępu do Internetu są jednoznaczne. W Internecie jest wiele edukacyjnych wydawnictw multimedialnych mogących wspomóc, ułatwić, a także uatrakcyjnić naukę wielu przedmiotów. Dostępne w Internecie wersje on-line licznych encyklopedii, słowników, leksykonów oraz odpowiednio zaprojektowanych serwisów edukacyjnych mogą uprościć dostęp do informacji. Dzięki Internetowi stosunkowo łatwo jest pozyskać potrzebne materiały do różnego typu referatów i opracowań. Kiedy jednak prowadzone są rozważania  na temat celowości i potrzeby wykorzystania komputera i Internetu w edukacji dzieci młodszych korzyści nie są już tak bardzo widoczne. Dostrzegalna jest również dużo wyraźniejsza polaryzacja stanowisk i opinii. Od skrajnie entuzjastycznych, które widzą w komputerze panaceum na wszelkie braki i utrudnienia związane z procesem kształcenia, do zdecydowanych przeciwników, w wypowiedziach których zasoby Internetu  jawią się jako ogromne zagrożenie dla prawidłowego rozwoju małego człowieka. Mimo zróżnicowanych stanowisk trudno nie docenić roli rewolucji, jaką wprowadziły strony internetowe w świat dzieci. 
   Małe dziecko nie jest w stanie sprawnie poruszać się po sieci i odróżnić stron wartościowych od internetowych śmieci. Należy mu zatem w tym pomóc i pokierować jego poszukiwaniami. Ta rola należy do rodziców i wychowawców.
   Natomiast tworzenie odpowiednich stron dla dzieci jest niewątpliwie trudnym zadaniem dla  projektantów. Projektowanie dotyczy komunikacji, a komunikacja z dziećmi jest bez wątpienia utrudniona, gdyż są to  użytkownicy nie posiadają wystarczającej wiedzy i umiejętności. Aby stworzyć stronę, która dobrze działa i dobrze przekazuje informacje musi być ona dostosowana do preferencji i oczekiwań  młodego użytkownika.
   Dziecko jako użytkownik, zwracająca uwagę na jaskrawe kolory, dynamiczne animacje, szybko zapamiętuje ciekawe ikony. Z obsługi komputera umie - włączyć i wyłączyć komputer, znaleźć kilka razy pokazane gry, programy czy elementy grafiki. Nie potrafi jeszcze czytać więc ma trudności z dojściem do wskazanego celu. Przy rozpoznawaniu ciekawych i atrakcyjnych elementów strony www kieruje się ich kolorem, elementami ruchomymi (gify, grafika 3d, animacje flash), łatwością dostępu i poruszania się na obszarze obserwacji dziecka.
   Biorąc pod uwagę czynniki, które determinują odbiór elementów strony przez dziecko można pokusić się o założenia, zgodnie z którymi strona dla młodych użytkowników mogła by z powodzeniem funkcjonować.

• Intuicyjna obsługa, prosta architektura strony – aminowane elementy nawigacji, mało tekstu dużo ciekawej bogatej w kolory grafiki, zdjęć;
  
• Strona internetowa pobudza wielostronną aktywność (poprzez częste interakcje wymusza działania dziecka i nie pozwala na bierny odbiór przekazu). Aktywność ta może dotyczyć wspierania twórczości graficznej, muzycznej, intelektualnej, a także gier zręcznościowych;
  
• Ucząc bawi - sprawia, że nauka może być przyjemna i atrakcyjna. Informacje zawarte na stronie nie mogą być „suchą treścią”, powinny być przekazywane  w formie zajmujących gier i zabaw.
  

   Stron przeznaczonych dla dzieci w wieku od 3 do12 lat w polskim Internecie można obecnie odnaleźć wiele. Najczęściej używane katalogi i programy wyszukujące po wpisaniu odpowiednich słów kluczowych (np. "strony dla dzieci", "serwisy dla dzieci", "portale dla dzieci", itp.) wyświetlają od kilku do kilkunastu trafnych pozycji. Niektóre z nich są dopiero zwiastunami powstających stron, ale część z nich jest już profesjonalnie przygotowywanymi portalami przeznaczonymi wyłącznie dla odbiorców w tym wieku. Charakteryzują się one ciekawą i bogatą grafiką, można na nich znaleźć wiele przedstawionych w formie zabaw i gier zadań edukacyjnych. Zwykle bywają łatwe i intuicyjne w obsłudze. Objaśnienia do zabaw i gier prezentowane są najczęściej w formie tekstowej, dlatego też w przypadku dzieci młodszych konieczna jest pomoc starszych. Zabawy takie jak: układanki, rozsypanki, puzzle, gry, kolorowanki, labirynty posiadające walory kształcące, mogą nie tylko zachęcić dziecko do pracy, ale równocześnie mogą być przez nie traktowane jako wspaniała zabawa. Pozwalają rozwijać umiejętność logicznego myślenia, ćwiczą spostrzegawczość, refleks, koordynację wzrokowo-ruchową, uczą postępować według ustalonych norm i zasad. Na wielu stronach możemy odszukać bogato ilustrowane bajki, fotografie oraz opowiadania i wiersze dla dzieci.

Nowy algorytm Google - strony Non Mobile-Friendly spadaja ...

Projektowanie zorientowane na użytkownika

 

Można wyróżnić dwa podstawowe punkty widzenia, z których większość ludzi określa, czy dany projekt strony  WWW jest dobry bądź zły.
   Pierwsze stanowisko określane jest od strony czysto estetycznej, dotyczy wizualnej strony prezentacji informacji. Obejmuje problemy zagospodarowania przestrzeni informacyjnej w taki sposób aby projekt wyglądał ładnie i przejrzyście.
   Konwencje dotyczące estetycznej strony projektowania zostały opisane między innymi w poście dotyczącym Układu i kompozycji projektu czy też Barwy .
   Natomiast drugi punkt widzenia jest ściśle praktyczny. Skupia się na funkcjonalności, skutecznej prezentacji informacji oraz na efektywności. 
W temacie tym należy zwrócić szczególną uwagę na zagadnienia związane z projektowaniem zorientowanym na użytkownika.
   Projektowanie zorientowane na użytkownika (UCD) jest jednocześnie techniką oraz ideą, która stawia potrzeby użytkownika na pierwszym miejscu. UCD jest wyznaczane przez wczesne i częste kontakty z użytkownikami w celu zyskania informacji zwrotnej i stworzenia wizji przyszłego projektu.  Jest to wiec szczególnie ważne ponieważ każdy etap projektowania i inne związane z nim procesy pozostają pod jej wpływem.
   Służenie pomocą użytkownikom w jak najłatwiejszym i skutecznym odnajdywaniu informacji jest celem działalności informacyjnej. W procesie przepływu informacji pełni ona funkcję pośrednika między źródłem a odbiorcą. Przekazuje informacje lub dokumenty z informacjami w nich zawartymi użytkownikom, a od nich przyjmują dezyderaty wyrażające ich potrzeby informacyjne. Użytkownikiem może być osoba lub instytucja. Może być nim student przystępujący do egzaminu, początkujący pracownik naukowy lub zaawansowany badacz, naukowiec lub praktyk. Każdy z nich będzie mieć inne zapotrzebowania informacyjne, gdyż każdy z nich potrzebuje informacji w innym celu i na innym poziomie.
   Aby w pełni i skutecznie zaspokoić te zindywidualizowane zapotrzebowania informacyjne, centralnym punktem zainteresowania projektantów stron internetowych powinien być użytkownik ze swoimi wciąż zmieniającymi się potrzebami. Należy pamiętać, że nawet najlepiej, najpełniej, najtrafniej i najbardziej atrakcyjnie przygotowana informacja nie ma znaczenia, nim nie trafi do właściwego odbiorcy i zanim odbiorca nie przekształci się w użytkownika, wykorzystując otrzymane informacje. Potrzeby informacyjne są wielkościami dynamicznymi, zmieniającymi się oraz zróżnicowanymi, zależnymi od wielu czynników subiektywnych i obiektywnych. Czynniki subiektywne związane są z osobowością użytkownika, jego wiekiem, uzdolnieniami, poziomem i rodzajem wykształcenia, znajomością języków obcych, doświadczeniem, zainteresowaniami itp. Czynniki obiektywne to między innymi rodzaj i charakter pracy, pełnione funkcje, przeznaczenie wykorzystania informacji. Użytkowników można podzielić według wielu kryteriów: według rodzajów wykształcenia, wykonywanego zawodu (zajęcia), zajmowanych stanowisk (pełnionych funkcji), przygotowania do samodzielnego prowadzenia wyszukiwań, wieku, poziomu wykształcenia itd. Tak więc znajomość potrzeb informacyjnych odbiorców ma istotne znaczenie dla efektywności działalności informacyjnej. Od trafnego określenia tych potrzeb zależy w dużej mierze znalezienie właściwych możliwości ich zaspokojenia.

Problemy wizualizacji

Naukowcy podczas swoich badań zidentyfikowali kilka problemów związanych z wizualizacją. Podczas projektowania stron internetowych wskazane jest przestrzeganie zasad w celu uniknięcia problemów z przekazem informacji. Do najczęstszych błędów należą:

• Za duża ilość wizualnych podpowiedzi – podpowiedzi mogą być w różnych formach jak kolor, wzór, kształt, odległość. Jeżeli projekt użyje niektórych podpowiedzi nieodpowiednio np. użycie tego samego koloru do wskazywanie dwóch różnych rzeczy, użytkownicy być zdezorientowani.
  Rozwiązaniem tego problemu jest przestrzeganie, aby różnice wizualne współgrały z różnicami w informacjach przekazywanych.
  

• Co się stało? – Wizualizacje mają często wiele dynamicznie łączonych sekcji  (tekst lub obraz). Jeżeli za dużo się zmieni na raz na ekranie użytkownik może nie wiedzieć, co właściwie się stało.
  Aby temu zapobiec należy utrzymywać synchronizację. Należy się upewnić, że wszystkie sekcje odzwierciedlają zmiany zrobione do jednej z nich. Dobrym rozwiązaniem jest również możliwość z korzystania z przycisku, który umożliwiał by powrót do poprzedniej postaci.
  

• Za mało informacji o danych lub narzędziu. – Jeżeli na ekranie jest za mało etykiet, wskazówek lub podpowiedzi, użytkownicy mogą utknąć gdyż nie będą wiedzieć jak zacząć lub gdzie szukać tego, co potrzebują.
  Rozwiązaniem problemu mogą być etykiety oraz dodatkowe informacje, które powiadomią użytkowników, do czego są poszczególne elementy i co one robią. Niekiedy dobrymi rozwiązaniami mogą być mapy strony
  

• Za duże ilości informacji na ekranie. - Jeżeli na ekranie w jednej chwili występuje za dużo informacji użytkownik może mieć problem ze znalezieniem tej właściwej.
  Sposobem na rozwiązaniem tego problemu jest możliwość wyłączenia etykiet przez użytkownika. Użytkownik powinien mieć również możliwość robienia zbliżeń, przez co rozgraniczać miejsca z informacjami. Dobrym sposobem jest ustawienie etykiet na niewidoczne i dopiero po najechaniu na interesujący nas punkt przestawieniu ich na widoczne.
  

• Problem technologiczny – Narzędzia oprogramowania takie jak wyszukiwanie, sortowanie czy też selekcja mogą zbyt skomplikowane lub trudne do zrozumienia przez użytkownika.
  Aby uniknąć tego problemu należy umożliwić użytkownikowi użycie interaktywnych narzędzi do wyszukiwania lub sortowania. Należy również dopilnować, aby dane ładowały się szybko.
  

• Co jest wybrane? – Ponieważ dane często występują w dużych ilościach, użytkownik nie zawsze może być w stanie określić, co wybrał lub czy wybrał to, co chciał.
  Sposobem na rozwiązanie togo problemu jest wyświetlanie wybranych wartości w jakimś polu, lub możliwość wybierania danych w z pola tekstowego.
  

Uniwesalne zasady projektowania

   Heurystyka, to według Słownika Języka Polskiego między innymi umiejętność wykrywania nowych faktów i związków między faktami (a zwłaszcza stawiania hipotez), prowadzącego do poznania nowych prawd. Nielsen - jeden z najbardziej znanych specjalistów w dziedzinie użyteczności pisze o heurystykach w kontekście użyteczności, podając zbiór uniwersalnych jego zdaniem zasad, którymi rządzi się projektowanie użytecznych interfejsów.

Czytelność stanu systemu.
Co aktualnie dzieje się w systemie? Na bieżąco należy informować użytkownika poprzez odpowiednią informację zwrotną, przesyłaną w rozsądnym czasie. W jakiej części aplikacji czy fotografii znalazł się użytkownik? Jeśli po przyciśnięciu “wyślij dokument” pojawia się klepsydra z piaskiem, wiemy już, że system pracuje. Umieszczenie preloadera na stronie www informuje użytkownika o tym, że animacja flash właśnie jest ładowana z sieci.

Adekwatność systemu do świata rzeczywistego.
Należy mówić naturalnym językiem użytkownika. Użycie konwencji językowych świata rzeczywistego jest bardziej zrozumiałe, niż komunikaty zorientowane systemowo. Interfejs użytkownika został stworzony po to, żeby tłumaczyć zero-jedynkowe ciągi na przyswajalne dla przeciętnego odbiorcy komunikaty. Tymczasem, użycie żargonu znanego tylko programistom czy projektantom systemu nie jest dla zwykłego użytkownika bardziej zrozumiałe niż zera i jedynki w tajemniczych “czarnych oknach”. Bezwzględnie należy używać prostego języka, bez specjalistycznych określeń.

Kontrola i wolność wyboru dla użytkowników.
Należy zapewnić możliwość cofnięcia i powtórzenia, a także przerwanie wykonywania wykonanych operacji – użytkownicy często wybierają określone funkcje nieświadomie bądź przez pomyłkę. Aplikacja bądź serwis WWW realizują rozmaite funkcje, np. polegające na wprowadzaniu i modyfikacji danych, wykonywaniu kalkulacji. Użytkownik często przypadkiem wybiera tę a nie inną operację, należy więc umożliwić mu modyfikację raz wprowadzonych informacji, a także rezygnację wykonywania dalszych kroków. Nie powinno się kazać internaucie korzystać z przycisku wstecz w przeglądarce.

Spójność i standaryzacja.
Należy dbać o jednolitość konwencji – nie powinno się zmuszać użytkowników do zastanawiania się nad tym, czy podobne określenia na pewno oznaczają to samo. Warto sięgać po sprawdzone wzorce i konsekwentnie stosować w całym projekcie. Jeżeli trudno o oryginalny czytelny symbol danej funkcji, należy wykorzystać najczęściej stosowany w danej branży.

Zapobieganie powstawaniu błędów.
Czytelny komunikat o błędzie jest dobry, ale projektowanie z myślą o przeciwdziałaniu powstaniu błędu - jeszcze lepsze. Generalnie zamiast tworzyć obszerne komunikaty o błędach, lepiej stworzyć takie warunki, by błędy te występowały jak najrzadziej. W przypadku stron internetowych należy opracować automatyczne narzędzia do wyszukiwania niedziałających linków. Komunikat o błędzie typu „terror 404” potrafi skutecznie zniechęcić każdego użytkownika.

Rozpoznawanie, a nie przypominanie.
Nie należy kazać użytkownikowi zapamiętywać wprowadzonych wcześniej informacji, czy wybranych opcji. Powinny być pokazywane na bieżąco, albo wyraźnie oznaczony dostęp do nich. Nie należy obarczać użytkownika pamięci danymi, które wprowadził, czy też wybranymi parametrami. Jeżeli ilość wprowadzonych danych to umożliwia, powinny być wyświetlone na ekranie przez cały czas ich wykorzystywania. Jeżeli mogą przydać się później, albo jest ich zbyt wiele, wyraźnie powinien być oznaczony (przycisk, odnośnik hipertekstowy) dostęp do wprowadzonych informacji i wybranych parametrów.

Elastyczność i efektywność użycia.
System powinien być wyposażony w dyskretne wspomaganie interakcji, umożliwiające doświadczonym użytkownikom przyspieszanie często powtarzanych operacji. Nawet mało obyci użytkownicy w miarę nabierania doświadczeń będą chcieli skrócić sobie wykonywanie często powtarzanych operacji. Można umożliwić  im to poprzez stosowanie skrótów czy konfigurowalnych stron typu “moje konta”, “moja strona startowa”.
Należy pozbyć się tendencji do wyposażania okien dialogowych interfejsu w elementy nie komunikujące adekwatnej i potrzebnej informacji. Odciągają uwagę użytkownika od istotnego przekazu i pogarszają jego widoczność. Już pierwsza wizyta na witrynie Jakoba Nielsena utwierdza o głębokiej wierze autora heurystyk w powyższą zasadę. Należy przyznać, że oszczędność formy świetnie sprawdza się w systemach typowo informacyjnych, natomiast biorąc pod uwagę cel komunikacji marketingowej, trudno wyobrazić sobie współczesną witrynę promocyjną bez zawartości typu rich content.

Pomoc użytkownikom w rozpoznawaniu, diagnozowaniu i naprawie błędów.
Komunikaty o błędach powinny być wyrażone językiem naturalnym, bez zamieszczania kodów systemowych. Precyzyjnie należy wskazać problem i sugerować rozwiązanie.Wystąpił błąd nr 723. Aplikacja zostanie zamknięta. Co to znaczy? Obsługa błędów powinna być czytelna dla zwykłego użytkownika - nie może zawierać komunikatów zrozumiałych wyłącznie dla programisty. Jeżeli błąd został spowodowany działaniem użytkownika (np. niewłaściwa dla danej aplikacji konfiguracja systemu) – należy napisać o tym wyraźnie. Trzeba zasugerować, jakie konkretnie kroki może podjąć użytkownik, żeby usunąć problem we własnym zakresie – jeśli to możliwe.
Warto przemyśleć sposób informowania o awarii jako nietypowym (niepożądanym) stanie aplikacji. Czy na pewno politycznie jest powiedzieć, że wystąpił błąd, albo - jeszcze gorzej - jest on spowodowany działaniem Twojego klienta? Należy unikać sformułowań w tonie kategorycznym, raczej trzeba sugerować działanie. Jeżeli umożliwia to konstrukcja aplikacji, za zgodą użytkownika powinno się przeprowadzić pełną diagnozę ustawień które mogą powodować kłopoty, a następnie – skierować do odpowiedniego miejsca w systemie. Wzorem mogą być komunikaty systemu pomocy Max OS X - pod informacją, jakie czynności należy podjąć zwykle umieszczony jest odnośnik „otwórz dla mnie ustawienia”. Ważne jest, żeby komunikat o błędzie nie pozostawiał żadnych wątpliwości, że to od działania użytkownika zależy przywrócenie normalnego stanu rzeczy - np. poprzez wprowadzenie poprawnych danych do formularza. W przypadku rozbudowanych formularzy najlepiej już w trakcie wypełniania poinformować o zaobserwowanych błędach - jeszcze przed naciśnięciem przycisku typu „wyślij”. Ułatwia to wypełniającemu korektę danych. Ważne jest także komunikowanie od razu wszystkich błędów - często spotykanym błędem w sztuce jest informowanie tylko o pierwszym z serii. W takiej sytuacji użytkownik dowiaduje się o kolejnych już po wysłaniu wypełnionego formularza do systemu, kiedy to aplikacja ponownie przeładowuje dane i wyświetla następne komunikaty o problemach.

Pomoc i dokumentacja.
Najlepszy system to taki, który nie potrzebuje dokumentacji, ale dostarczenie systemu pomocy i właściwe udokumentowanie może okazać się niezbędne. Każda informacja tego rodzaju winna być łatwa w przeglądaniu i przeszukiwaniu, skupiona na zadaniach wykonywanych przez użytkownika, zawierać konkretne rozwiązania. A także - być zwarta w formie. Użytkownicy rzadko poświęcają czas na czytanie pomocy systemowej, czy dokumentacji. Jeżeli jednak - zmuszeni do tego - skorzystają z dostępnych podpowiedzi, wskazane jest, żeby mieli możliwość szybkiego odnalezienia interesującego ich tematu. Dlatego też centrum pomocy powinno być zorientowane kontekstowo, czyli wyświetlać informacje na temat aktualnie wykonywanych zadań. Spis treści i ewentualnie index pomocy muszą być rzecz jasna dostępne na życzenie.

Typografia

    Zasadniczym celem każdego projektu strony internetowej jest komunikacja. Bez względu na to, czy mówimy o internetowym sklepie, internetowej obecności firmy czy profilu strony jakiejś społeczności, w każdym z tych przypadków typografia jest decydującym składnikiem. Dla większości ludzi typografia jest po prostu układaniem znajomego zestawu kształtów, aby utworzyć wyrazy, zdania i akapity. Typografią więc nazywamy zasady stosowania i używania znaków pisarskich w druku oraz prezentacją ich na ekranie monitora komputerowego itp.

   Istnieje wiele przeszkód utrudniających skuteczne dostosowanie typografii do potrzeb Internetu, jednak siła czcionki powinna stanowić wystarczającą motywację do tego, by być nowatorskim. W telewizji czy w czasopismach można zobaczyć setki pomysłowych i efektywnych sposobów wykorzystania czcionek. Są one istotą tworzenia marki, kluczem do komunikacji za pomocą pisma i niezbędną częścią złożonego procesu, jakim jest projektowanie stron WWW.

Analiza kształtu liter

   Aby odkryć możliwości tkwiące w czcionce, należy najpierw ją zrozumieć. Trzeba przyznać, że nie jest to proste zadanie. Najdrobniejsze szczegóły kształtu liter i odstępów między nimi zostały dokładnie wyliczone podczas stuleci badań i praktyki. Z tego względu wybór fontów stosowanych w projektach stron WWW nie jest sprawą łatwą. W rzeczywistości większość decyzji, które muszą zostać podjęte podczas wyboru czcionki związana jest raczej z odstępami pomiędzy literami oraz blokami tekstu aniżeli z samą czcionką. Mimo wszystko wybór odpowiedniego kroju pisma jest również niezwykle istotnym krokiem.
   Aby dokładnie zrozumieć znaczenie i rodzaje czcionek należy poznać ich strukturę. Analiza kształtu liter jest podstawą do dalszego wgłębiania się w to zagadnienie. Rysunek 4 przedstawia charakterystykę struktury liter.

Budowa czcionki Podstawowa linia pisma (ang. baseline)

1. Podstawowa linia pisma (ang. baseline). Podstawowa linia pisma jest umowną poziomą linią, na której oparta jest większość znaków. Jedyny znak, który wysuwa się poniżej podstawowej linii pisma, to minuskułowa litera „q”.
   
2. Wysokość majuskuły (ang. cap height).Wysokość majuskuły (lub linia majuskuł) jest kolejną umowną linią. Wyznacza ona wysokość wszystkich majuskułowych liter w kroju czcionki. Wysokość majuskuły jest poniżej maksymalnej wysokości kroju pisma.
   
3. Poprzeczka (ang. crossbar). Kreska łącząca dwie linie w majuskułowych literach „A” i „H” nosi nazwę poprzeczki. Pozioma kreska, która nie łączy dwóch linii, jak ta w minuskułowych literach „f” oraz „t”, określana jest jako kreska krzyżowa.
   
4. Szeryf (ang. serif). Mianem szeryfu określa się końcowe kreseczki u dołu lub góry znaków niektórych krojów pisma.
   
5. Środkowa linia pisma (ang. meanline). Kolejną umowną linią poziomą, która wyznacza górną krawędź minuskułowych liter, jest środkowa linia pisma. Wbrew swojej nazwie linia środkowa nie jest umiejscowiona pomiędzy podstawową linią pisma a linią majuskuł.
   
6. Brzuszek (ang. bowl). Brzuszek litery to zaokrąglony łuk zamykający przestrzeń w rysunku litery. Przykłady brzuszków można zobaczyć w literach „D”, „o” oraz „g”.
   
7. Wydłużenie dolne (ang. descender). Dolna część minuskułowych liter „g”, „j”, „p”, „q”, i „y”, która wysuwa się poniżej podstawowej linii kroju pisma, jest określana jako wydłużenie dolne, Jedynymi innymi znakami, które zwykle wychodzą poza linię podstawową, są cyfry w niektórych krojach pisma. Uważano, że tego rodzaju cyfry, których przykłady z kroju Georgia ilustruje obrazek poniżej, lepiej łączą się z minuskułami cyfr rzymskich. Wyglądają one szczególnie dobrze, kiedy są użyte wewnątrz tekstu.
   
   
   

   Dawne cyfry w foncie Georga

8. Okienko (ang. counter). Przestrzeń wewnątrz litery określana jest jako okno. W niektórych literach, takich jak „A”, „o” czy „P” okno jest całkowicie zamknięte. Nie zamknięta przestrzeń w literach, takich jak „G”, „u” czy „c”, także jest nazywana oknem.
   
9. Trzon (ang. stem). Trzon to główna pionowa bądź ukośna kreska w literze. Są to więc pionowe elementy w literach „I” oraz „H”, jak również wszystkie kreski w literze „W”.
   
10. Znak diaktryczny (ang. tittle). Znak diaktrytyczny to nazwa kropki w minuskułowych literach „j” oraz „i”.
    
11. Zakończenie (ang. terminal). Końcówka trzonu lub kreski, która nie ma szeryfu, określana jest jako zakończenie. Nawet końcówki niektórych szeryfowych krojów pisma mają zakończenia, tak jak litera „c”.
    
12. Wydłużenie górne (ang. ascender). Górne krawędzie większości minuskułowych liter tworzą umowną linię znaną jako środkowa linia pisma. Niektóre minuskułowe litery posiadają wydłużenie górne, które jest ich przedłużeniem wysuwającym się ponad środkową linię. Owe litery to: „b”, „d”, „f”, „h”, „k”, „l” oraz „t”.
    
13. Noga (ang. leg). Niższe ukośne kreski widoczne w literach „K”, „R” oraz „Q” określa się jako nogi. Niekiedy mówi się o nich wstęgi.
    
14. Ligatura (ang. ligature). Litery „f” oraz „i” w słowie „fix” są w rzeczywistości połączone w jeden znak. Takie połączenie znaków określane jest jako ligatura. Ligatury stosuje się, aby nadać odstępom pomiędzy pewnymi znakami bardziej estetyczną równowagę.
    
15. Wysokość x (ang. x-height). Wysokość x jest dokładnie tym, na co wskazuje sama nazwa: wysokością minuskułowej litery x w kroju pisma. Zasadniczo wysokość x jest odległością pomiędzy podstawową linią pisma a środkową linią kroju czcionki.
    

   Kod informacyjny jest nośnikiem informacji o znakach przekazu, lecz określa tylko ich ogólną postać, a nie szczegółową postać graficzną. Nośnik informacji o kształcie znaków pisma jest niezbędnym uzupełnieniem kodu informacyjnego. Bez jego użycia tekst (czy szerzej: całej prezentacji) można przechowywać i przesyłać, ale do jego prezentacji za każdym razem niezbędne jest użycie pewnego konkretnego zestawu znaków graficznych - czyli pisma. W systemach cyfrowych informacja o zestawie znaków jest przechowywana za pośrednictwem fontu.
   Font jest to zestaw liter podobnego typu, są one zainstalowane fabrycznie na komputerze i można je zmieniać w zależności od indywidualnych potrzeb. Przeciętny komputer z Windowsem ma trochę powyżej 40 fontów domyślnie zainstalowanych, podczas gdy przeciętny użytkownika Macintosh ma dostęp do około 100 fontów. Wiele z tych fontów jest zebranych razem w rodziny fontów, w których każdy font jest inną odmianą fontu, od którego nazwę wzięła cała rodzina. Większość rodzin fontów zawiera regularny krój fontu razem z odmianami italic, bold oraz bold italic. Niektóre fonty nie mają w ogóle odmian, inne mogą mieć jedynie bold lub italic, a jeszcze inne komercyjne rodziny fontów mają setki odmian. Każda rodzina fontów ma swoje niepowtarzalne cechy rozpoznawcze. Te cechy charakterystyczne pozwalają zaklasyfikować fonty i rodziny fontów.

Wyróżniki kroju pisma

   Większość rodzin fontów może być podzielona na szeryfowe i bezszeryfowe. Oprócz tego podziału istnieje wiele innych sposobów klasyfikacji i grupowania fontów. Ja postaram się pokrótce scharakteryzować kilka z nich.

• Fonty szeryfowe;

   Historycy uważają, że szeryf bierze swój początek od rzymskich rytów w kamieniu. Kwestią sporną jest pierwotny cel tych ozdobnych kresek, ale w nie tak odległej historii udowodniono, że poprawiają one czytelność dużych bloków tekstu dzięki dostarczaniu poziomej linii odniesienia. Gdy jakiś projektant chce wybrać font szeryfowy, to w większości przypadków jako pierwszy przyjdzie mu na myśl Times New Roman. Wybór fontów szeryfowych jest jednak ogromny. Aby ułatwić sobie decyzję wyboru, dobrze jest najpierw określić, jaki styl chcemy nadać swojemu tekstowi.

Kategorie szeryfów

   Garamond jest fontem szeryfowym w starym stylu. Takie fonty zostały przyjęte od pociągnięć pędzlem charakterystycznych dla włoskich skrybów i mogą być rozpoznane zarówno na podstawie płynnych przejść pomiędzy grubymi i cienkimi kreskami, jak i dzięki zaokrąglonym krawędziom szeryfów. Fonty takie jak Garamond są niezwykle uniwersalne. Nie są tak staromodne, aby nie mogły być użyte we współczesnych aplikacjach, choć nie jest to ich mocną stroną.
   Drugi font to Baskerville, font szeryfowi przejściowy. Zaokrąglony kąt łączący zakończenie kreski z szeryfem jest określany jako nawias (ang. bracket). Nawiasy fontów szeryfowych przejściowych są zaokrąglone, ale krańce szeryfów są ucięte pod kątem prostym. Zwykłe dodanie kątów prostych i doskonale prostych linii nadaje tej kategorii fontów bardziej nowoczesny i techniczny styl. Ta kategoria fontów szeryfowych zwana jest przejściową, ponieważ stanowi etap przejściowy pomiędzy fontami szeryfowymi w starym stylu i współczesnym.
   Diot jest fontem szeryfowym współczesnym. Fonty szeryfowe współczesne dostarczają duży kontrast pomiędzy grubymi i cienkimi kreskami, a ich szeryfy są często całkowicie beznawiasowe. Fonty szeryfowe współczesne zostały wprowadzone podczas rewolucji przemysłowej jako radykalna alternatywa wobec stylu szeryfowego przejściowego. Obecnie te fonty kojarzą się z elegancją, wyrafinowaniem i modą, reprezentują one ponadczasowość. Fonty szeryfowe współczesne ze względu na swoje precyzyjne cienkie linie w rzeczywistości nadają się jedynie do wykorzystania w nagłówkach.
   W drugiej połowie XIX wieku, kiedy rozpowszechniły się reklamy, plakaty i ulotki, bardziej śmiała odmiana fontów szeryfowych współczesnych była potrzebna, aby zwrócić na siebie uwagę. Właśnie w tym czasie wprowadzono font szeryfowi belkowy. Kroje z szeryfami belkowymi, taki jak Rockwell, mają przemysłowy charakter pełen siły i hartu. Te kroje zostały zaprojektowane, aby były bardzo czytelne z odległości.

• Fonty bezszeryfowe;

    Chociaż szeryfowe fonty są nadal powszechnie stosowane, popularność i uniwersalność fontów bezszeryfowych wzrasta. Ten rodzaj fontów ma czystszy i bardziej współczesny wygląd. Wyróżnia się on w nagłówkach, zwłaszcza jeśli jest umieszczony w sąsiedztwie tekstu złożonego szeryfowym krojem. Jest to od długiego czasu powszechną praktyką w projektowaniu do druku. Jednak w Internecie jest odwrotnie, gdyż projektanci w tekście głównym używają bezszeryfowych fontów skontrastowanych z szeryfowymi fontami nagłówków. Zmiana w kierunku używania w Internecie bezszeryfowych fontów w tekście głównym spowodowana była głównie ograniczeniami starszych monitorów i matryc laptopów. Z biegiem lat jakość urządzeń wyświetlających obraz poprawiła się, jednak zmiany kreski i drobne szczegóły w fontach szeryfowych mogą sprawić, że stają, że stają się one niemalże nieczytelne przy małych rozmiarach na ekranach o niewielkiej rozdzielczości. Rozwiązaniem może być albo zwiększanie dla równowagi rozmiaru fontu, albo użycie bezszeryfowego fontu, który posiada mniej detali, przez co jest bardziej czytelne przy małych rozmiarach.
   Fonty bezszeryfowe bez względu na to, jak są używane, są niezwykle czytelne i praktyczne dla niemalże każdego celu. Najczęściej stosowanymi fontami bezszeryfowymi są Arial i Verdana. Każda z tych rodzin fontów przynależy do domyślnych zestawów fontów w obu głównych systemach operacyjnych, jednak w świecie projektowym mają one reputację nadużywanych i pospolitych. Z tego względu świetnie nadają się do tekstów głównych, gdzie bezstylowa czytelność jest celem, jednak w nagłówkach i artystycznych zastosowaniach często potrzebny jest bardziej niepowtarzalny charakter. Niekiedy sprawę załatwi wyraźniejszy font szeryfowy lub bardziej wyróżniający się font bezszeryfowy, ale z pewnością poza tymi dwiema kategoriami istnieje jeszcze wiele innych możliwości.

• Fonty odręczne;

   Przed wynalazkiem systemów ruchomych czcionek cały tekst musiał zostać wyryty, namalowany lub napisany odręcznie. Wadą pisma odręcznego jest to, że próba uzyskania jednakowego kształtu liter, wyrównania i odstępów jest sprawą niezwykle trudną. W wyniku tych wyzwań tekst napisany ręcznie może być trudny do odczytania. Jednak pismo odręczne ma tę wspaniałą cechę, że jest symbolem humanizmu i nadaje tekstowi konkretnym wymiar osobisty.

Fonty odręczne

   Kroje odręczne wprowadzają osobowość bez czynnika błędu ludzkiego. Litery i wyrównanie w foncie odręcznym są jednolite i jeśli font jest dobrze zaprojektowany, rozstawienie również powinno być dobre. Tak jak w przypadku innych fontów, nie można liczyć na to, że osoby odwiedzające stronę internetową będą miały zainstalowane wybrane przez autora fonty odręczne. Aby więc wykorzystać je w Internecie, należy przekształcić swój tekst odręczny na obrazki lub zastosować jakąś technikę zastępowania tekstu.

• Fonty nowatorskie;

   Fonty nowatorskie, znane również jako fonty ozdobne czy dekoracyjne, stanowią ogromną większość fontów, które są dostępne za darmo w Internecie. Niektóre fonty z tej kategorii, są zmodyfikowanymi wersjami popularnych fontów szeryfowych i bezszeryfowych, a inne są zupełnie niepowtarzalnymi pomysłami, które lepiej byłoby nazwać sztuką konceptualną niż krojem fontu. Te fonty ze swej natury są mniej czytelne aniżeli ich tradycyjne odpowiedniki, ale jeśli są stosowane oszczędnie, to mogą nadać projektowi ogromnie wiele osobowości i błysku.
   Fonty nowatorskie bardzo często tworzą dobre początkowe bloki dla projektu logo i dekoracyjnych elementów.

Fonty nowatorskie

• Fonty symboliczne (dingbaty);

   W początkach druku dingbaty były ozdobnymi znakami, które stosowano do oddzielania drukowanego tekstu i wypełniania światła. Pierwsze dingbaty składały się głównie z ozdobników i najczęściej używanych symboli. Jednak wraz z rewolucją fontów cyfrowych całkowicie zmieniła się idea fontów symbolicznych. Obecnie dowolny szereg elementów graficznych może zostać zdefiniowanych jako znaki w foncie symbolicznym.

Fonty symboliczne

   Chociaż te fonty mogą się nie wydawać godne uwagi z punktu widzenia składu, mogą okazać się przydatne jako wspomagające elementy graficzne i ikony. Ponieważ fonty składają się ze skalowanych wektorowych kształtów, można dowolnie zmieniać rozmiar glifów dingbatów bez utraty ich wyrazistości.
   W systemie Windows domyślnie zainstalowanymi dingbatami są Wingdings i Webdings – fonty symboliczne. W Internecie jednak dostępne są jednak setki innych fontów symbolicznych.

Wybór fontu do projektu

   Znając wszystkie techniczne aspekty kształtu liter i kategorii krojów pisma, jak również posiadając dostęp do wszystkich fontów na świecie, można nadal mieć spory problem z wyborem odpowiednich fontów. Wynika to stąd, że wyboru fontu dokonuje się w takim samym stopniu na podstawie kwestii technicznych, co również artystycznych walorów i subiektywnych skojarzeń.
   Na etapie obserwacji i doświadczeń związanych z projektowaniem stron internetowych można doszukać się kilku zasad, które mogą pomóc w wyborze właściwej czcionki dla witryny internetowej.
   Podstawową zasadą w wyborze fontów jest fakt aby nie wybierać ich zbyt wiele. Aby uniknąć chaosu na stronie internetowej dobrze jest zastosować nie więcej niż czterech fontów. Łączenie w jednym projekcie dwóch różnych fontów szeryfowych lub dwóch różnych fontów bezszeryfowych również może prowadzić do niepowodzenia.
   Ważnym kryterium wyboru czcionki jest dążenie do prostoty. Do prezentacji w niskich rozdzielczościach najlepiej nadają się litery o prostych kształtach. Fantazyjne czcionki nie sprawują się dobrze w sieci. Jest tak dlatego, że po pierwsze, czcionki dekoracyjne mogą zmniejszyć percepcję przekazu informacyjnego, a po drugie, o ile czcionki nie mają dużego rozmiaru bity finezyjnych szczegółów są tracone przy rozdzielczościach oferowanych przez monitory. Czcionki takie jak Galena, Silica czy Bliss, mające proste, a jednocześnie dystyngowane kształty znaków, świetnie się prezentują i są doskonale czytelne z ekranów monitorów.
   Faktem jest, że im większa jest czcionka tym więcej pikseli definiuje literę co przy skromnych rozdzielczościach monitorów ma istotne znaczenie dla wyglądu elektronicznych stron. Czcionka o rozmiarze 16 punktów będzie wyglądała korzystniej i będzie znacznie bardziej czytelna niż użyta w mniejszej wielkości. Duże czcionki typu  dekoracyjne nie tylko dodają dramaturgii sieciowym stronom ale również szybciej przyciągają uwagę. Litery wyglądają lepiej ponieważ jest więcej pikseli na uformowanie ich kształtu. Także czcionki cienkoliniowe o dużych rozmiarach pomagają w tworzeniu lepszej grafiki sieciowej. Czcionki takie jak Vellve, TF Forever, Showcard Gothic czy TF Ardent są naturalne dla banerów i nagłówków natomiast Alinea Sans, Alinea Roman czy Bookman są świetne jako czcionki do tekstów.
   W sieci istnieją również narzędzia umożliwiające dobór i testowanie czcionek bezpośrednio na stronie. Pod adresem http://www.typetester.org znajduje się serwis Typetester. Umożliwia on testowanie wyglądu tekstu pisanego różnymi czcionkami, wielkościami  i w różnych kolorach.W Internecie najlepiej pracują czcionki o bezszeryfowych kształtach - szczególnie w zwykłych tekstach. Na wydrukach papierowych szeryfy czcionek stanowią niewielki procent całej litery. Jednak na ekranie, z powodu niedostatecznej liczby dostępnych pikseli szeryfy uzyskują znacznie większy procent pokrycia. Może to powodować powstanie niepotrzebnego szumu dla procesu percepcji informacji.
   Dlatego najlepszymi czcionkami dla stron sieciowych i publikacji internetowych są czcionki bezszeryfowe (bardziej czytelne niż szeryfowe), w stylu pogrubionym (zapewniające większy poziom kontrastu), o zwężonej szerokości (gwarantujących większą liczbę słów w ograniczonej przestrzeni) – np. czcionki w rodzaju Helvetica Bold Condensed.
   Podsumowując powyższe zagadnienie zwiazane z typografi należało by wspomnieć, iż samo pisanie na potrzeby Internetu zdecydowanie różni się od pisania na potrzeby mediów drukowanych. Internet nie jest w żaden sposób linearny, nie ma w nim ciągłości stron. Internet jest hiperprzestrzenią, po której poruszanie się wymaga odpowiedniego przygotowania. Tekst w Internecie jest także przyswajany zupełnie inaczej.

Barwa

    Barwa ma na nasze życie znacznie większy wpływ niż nam się to wydaje. Zwracamy na niego uwagę kupując w sklepie ubranie, wybierając pomidory w hipermarkecie, czy szukając nasze ulubione czasopismo w kiosku. Większość osób nie zastanawia się nad kodami kolorystycznymi funkcjonującymi współcześnie w społeczeństwie ani nad ich wpływem na podejmowanie decyzji.

   Dla grafika natomiast, z zawodowego punktu widzenia, jest to sprawa kluczowa i niezwykle istotna. Odpowiedni dobór kolorów jest w stanie optycznie „powiększyć" opakowanie produktu lub zwiększyć jego „ciężar". Badania naukowe przeprowadzone przez Norman/Nielsen Group dowodzą, że zdolność do zapamiętania informacji zwiększa się znacząco, jeśli są one podane przy użyciu koloru.
   Kolor to coś więcej niż tylko mieszanka barw składowych. Działa on zarówno na podświadomość (budzi określone reakcje fizjologiczne), jak i na świadomość obserwatora. Świadomie postrzegamy jego symbolikę, czyli znaczenie kulturowe - przykładem może tu być biel, utożsamiana z ceremonią ślubu oraz panną młodą. Podświadomie natomiast kolor potrafi działać na organizm człowieka: podnosząc ciśnienie krwi, rozpraszając jego uwagę czy też uspokajając.
   Każdy człowiek interpretuje dany kolor inaczej, kojarząc miedzy innymi z życiowych doświadczeń, które posuwają mu konkretne skojarzenia. Dlatego ten sam kolor (np. czerwony) jedna osoba utożsamia z miłością, a inna z krwią. W dużym stopniu jednak można się pokusić o kategoryzację kolorów według ich symboliki.
   Psychologia kolorów jest dziedziną nauki zajmującą się analizowaniem emocjonalnych i behawioralnych efektów wywoływanych przez kolory i ich zestawienia. Właściciele handlowych stron WWW chcą wiedzieć,  jaki kolor zachęci odwiedzających ich witrynę do wydawania więcej pieniędzy. Dekoratorzy wnętrz chcą wiedzieć, który kolor przekształci sypialnię w spokojne ustronie Zen. Właściciele fast foodów umierają z ciekawości, jakie połączenia kolorów sprawią, że konsument będzie chciał posiłek w rozmiarze super size. Jak wiadomo psychologia kolorów to duży biznes.

 

Teoria barw

   Aby pogłębić podstawową wiedzę na temat kolorów, należy zdobyć elementarne wiadomości na temat niektórych bardziej technicznych aspektów tego tematu, dotyczących np. tego, w jaki sposób tworzone są kolory i jak mogą być one łączone ze sobą.
   Rozróżnia się trzy barwy podstawowe: żółtą, magentę i cyja, z których otrzymuje się barwy pochodne. Każdą barwę można potraktować jako podstawową, jeśli służy do tworzenia innych kolorów. Najbezpieczniejszym sposobem doboru koloru jest użycie koła barw. Ukazuje ono wynik łączenia się kolorów podstawowych i powstawanie ich pochodnych.

Rysunek 2. Koło barw 

   W jaki sposób posługiwać się ugrupowanymi barwami na kole? Istnieje prosta zasada, dzięki której uzyskuje się ciekawe zestawienia kolorystyczne. Biorąc kolor leżący obok danej barwy otrzymujemy zestawienie lekkie i spokojne - działamy na bazie spokojnej gamy barwnej. Można zmieniać ton, nasycenie i stopień jasności w celu odnalezienia najciekawszego efektu. Gama barwna stanowi jednak najistotniejszy element doboru koloru dla kompozycji. Teoria mówi o gamach ciepłych, zimnych i neutralnych, o których wspomniano we wcześniejszych fragmentach rozdziału.
   Kiedy chcemy uzyskać kontrast - wybieramy kolor leżący naprzeciw naszej wiodącej barwy. Ten proces nazywamy obraniem koloru dopełniającego. Na przykład dla koloru czerwonego dopełnieniem będzie połączenie niebieskiego z żółtym - zieleń; dla żółtego wspomnianą rolę będzie pełnić połączenie czerwonego z niebieskim, czyli fiolet. Natomiast dla oranżu – niebieski.
   Balansując jasnością barw użytych w kompozycji w efekcie otrzymujemy zestawienia harmoniczne lub kontrastowe. Kontrasty mogą być łagodne lub agresywne. Istnieje ciekawy sposób na osłabienie kontrastu - wystarczy dodać kontur i tak oddzielone barwy nie „gryzą się" między sobą i lepiej współgrają, wywołując w nas przyjemniejsze odczucia. Jeżeli chcemy barwę „pobudzić" należy dobrać kolor skontrastowany i aktywny.

Znaczenie barw

   Chociaż warto wiedzieć, w jaki sposób barwy, z których korzystamy w projekcie szaty graficznej strony, mogą oddziaływać na tłumy, to pogląd, że istnieje jedna i niezmienna reakcja psychologiczna na konkretne kolory jest nieuzasadniony. Cały szereg reakcji, które psychologowie kolorów przypisują poszczególnym kolorom, jest zakorzenionych w indywidualnym doświadczeniu. Warto również zaznaczyć, że w wielu kulturach kolory budzą zupełnie odmienne skojarzenia i mają inne znaczenia. Pamiętając o tych zastrzeżeniach, można wyznaczyć niektóre psychologiczne skojarzenia, jakie określone kolory wywołują u większości ludzi w zachodniej kulturze.
   Kolor czerwony uchodzi za kolor podnoszący ciśnienie i adrenalinę. Obok takich psychologicznych skutków czerwień jest znana również z tego, że pobudza metabolizm. Jest ekscytującym, dramatycznym i bogatym kolorem. Czerwień to kolor namiętności.Ciemniejsze odcienie czerwieni, takie jak burgund i bordo, wywołują aurę luksusu i przyjemności – mogą w rzeczywistości być nawet pretensjonalne. Z kolorów tych można skorzystać w przypadku wykonywania projektów stron dla np. koneserów wina lub entuzjastów wytwornego życia. Bardziej brązowe i ziemiste odcienie czerwieni wiążą się z jesienią i żniwami.
   Kolor pomarańczowy podobnie jak czerwień jest bardzo żywym i energicznym kolorem, chociaż w przeciwieństwie do niej nie wiąże się ze złością ,  którą kolor czerwony niekiedy może przywoływać. Zamiast tego uważa się, że pomarańcz pobudza szczęście i reprezentuje słoneczną pogodę, entuzjazm oraz kreatywność. Kolor pomarańczowy jest mniej firmowy czy korporacyjny, co pewnie spowodowało, z guru marketingowi stojący za takimi firmami, jak Cingular w USA i Orange w Europie, postanowili stworzyć marki na jego bazie.
   Kolor pomarańczowy oznacza także przedsiębiorczość, aktywność, pożądanie i podniecenie. Kojarzony jest z energią ogniem, płomieniami. Pomarańczowy to także witalność, obfitość, pełnia życia i sytość. Ponieważ pobudza apetyt i metabolizm, świetnie się on nadaje do reklamowania artykułów żywnościowych i sztuki kulinarnej.
   Kolor żółty jest bardzo żywym i widocznym kolorem, dlatego jest wykorzystywany w taksówkach i znakach ostrzegawczych. Kolor żółty to aktywność umysłowa, aktywność, rozsądek, światły umysł. Kolor budzący skojarzenia z ciepłem, słońcem, serdecznością, witalnością, wesołością, optymizmem. Symbolizuje także bogactwo, dostatek. W malarstwie często barwa ta była synonimem złota. Żółty jednak ma także sporo negatywnych znaczeń, takich jak choroba, zazdrość, hańba (żółte płaszcze pokutników w czasach inkwizycji, żółte szaty Judasza), zdrada, starzenie się oraz tchórzostwo. W reklamie wyzwala chęć działania i spróbowania.
   Kolor zielony kojarzy się z przyrodą. Jest to bardzo kojący kolor symbolizujący wzrost, świeżość, orzeźwienie, nadzieję i zdrowie. Jest znacznie łatwiejszy w odbiorze dla oka i o wiele mniej dynamiczny niż kolor żółty, pomarańczowy czy czerwony. Często wykorzystywany w przypadku produktów ekologicznych i naturalnych, a także chemii kosmetycznej, która chce uchodzić za naturalną i zdrową. Zielony to również niedojrzałość, stąd może oznaczać brak doświadczenia. Barwa ta stosowana jest często w przypadku opakowań i reklamy: napojów, gum do żucia (mięta), papierosów mentolowych. Zieleń kojarzona jest z powrotem do życia, wiosną, obfitością, urodzajem. Kolor nadziei i dobroci (w ludowych podaniach i legendach dobre wróżki ubrane były w zielone szaty). Zielony symbolizuje również trwałości, nieugiętość  i potrzebę uznania.
   Kiedy jaskrawa zieleń umieszczona jest na czarnym tle, naprawdę się rzuca w oczy i nadaje projektowi nowoczesny i techniczny charakter.
   Kolor niebieski to barwa budząca zaufanie, skojarzenia z czystością, świeżością. Niebieski kolor uspokaja, symbolizuje harmonię, porządek, a także zimno, chłód, niebo, wodę, lód. Na poziomie emocjonalnym symbolizuje otwartość, inteligencję i wiarę.
   W ciemnych odcieniach stosowany jest często przez banki i firmy ubezpieczeniowe, gdyż kojarzy się z pewnością, luksusem, bezpieczeństwem. Niebieski to także duchowość, filozofia, religijność afirmacja życia. Barwa ta zmniejsza wrażenie ciężaru. W reklamie często stosowana w przypadku produktów związanych z czystością (proszki do prania, pasta do zębów) oraz produktów mrożonych (lody mrożonki).
   Kolor fioletowy czy purpurowy historycznie związany był z godnością królewską i władzą. Sekret kryjący się za prestiżową przeszłością fioletu wynika z trudności wytworzenia barwników potrzebnych do uzyskania fioletowych strojów.
   Do dzisiejszego dnia fiolet wyobraża bogactwo i ekstrawagancję. Ta ekstrawagancja ma swoje korzenie w przyrodzie. Kolor fioletowy jest najczęściej związany z kwiatami, kamieniami szlachetnymi i zachodami słońca.
   Kolor biały nadzieja, wiara, czystość (także w znaczeniu duchowym), perfekcja, niewinność (stąd białe szaty ślubne), kolor pokoju (symboliczny biały gołąb).
   Biel jest uważana za kolor doskonałości, światła i czystości. To dlatego lśniąco białe prześcieradła są wykorzystywane w reklamach środków piorących, a panna młoda nosi białą suknię w dniu swojego ślubu. Często nie dostrzegamy tych związków ze względu na domyślne wykorzystywanie bieli jako koloru tła, ale one mimo wszystko utrzymują się.
   Kolor czarny to elegancja, szyk, luksus. Barwa stosowana w przypadku produktów wyższej klasy – ekskluzywnych. Kolor sukcesu (stąd czarne luksusowe samochody, czarne eleganckie garnitury i tzw. „mała czarna” w przypadku kobiet). Często w kampaniach społecznych podkreśla nastrój smutku, nostalgii.
   Jeśli chodzi o skojarzenia negatywne czerń to przede wszystkich strach, niepokój, niepewność, wina, depresja, brak wiary i nadziei, żałoba, smutek, pogrzeb. Czarny zwiększa wrażenie ciężaru oraz ciepła ale zmniejsza objętości.
     Mimo że psychologia kolorów odgrywa swoją rolę w sposobie, w jaki osoba odwiedzająca zaprojektowaną stronę może ją postrzegać, to trzeba pamiętać, że nie ma złych kolorów, których nie można byłoby użyć. Znajomość psychologicznego znaczenia kolorów wiele pomaga w ustaleniu podstawowych barw stosowanych w projekcie, jednak sukces pomysłu kolorystycznego zależy od harmonii istniejącej pomiędzy wszystkimi wybranymi kolorami. Aby osiągnąć tę harmonię, trzeba mieć na uwadze jeszcze kilka innych atrybutów kolorów.
   Jedną z cech koloru istniejącą w całym widmie jest temperatura kolorów. Warto pamiętać, że stosując barwy ciepłe lub zimne również wzbudzane są określone wrażenie.
   Ciepłe kolory to kolory począwszy od czerwonego aż po żółty, łącznie z kolorem pomarańczowym, różowym, brązowym i burgundowym. Są one odpowiednikami ciepła i ruchu ze względu na swój związek ze słońcem i ogniem. Ciepły kolor umieszczony obok zimnego koloru  zwraca na siebie uwagę, dominuje.
   Zimne kolory to kolory począwszy od zielonego aż po niebieski, łącznie z niektórymi odcieniami fioletowego. Fiolet jest kolorem pośrednim pomiędzy czerwonym i niebieskim, zatem zimniejszy fiolet to ten, który jest bliższy kolorowi niebieskiemu, podczas gdy bardziej czerwony fiolet może wyglądać niezwykle ciepło. Zimne kolory mogą wpływać uspokajająco i zmniejszać napięcie. W projektach zimne kolory mają tendencję do wycofywania się, co sprawia, że świetnie się nadają jako tło oraz jako większe elementy na stronie, gdyż nie zdominują one głównej treści.
   Miarą rozpiętości tonalnej koloru odcieni jasnych po ciemne jest jego wartość. Jasne i ciemne kolory pomagają we wprowadzaniu tradycyjnej dychotomii dobra i zła. Jasne odcienie tworzy się poprzez dodanie bieli do danego koloru i wyglądają one miękko oraz delikatnie. Z drugiej strony, ciemne kolory sprawiają wrażenie ciężkich i gęstych.
   Nasyceniem lub intensywnością koloru nazywamy stopień jego natężenia bądź przygaszenia. Oczywiste jest, że intensywne, żywe kolory się wyróżniają. Mimo że zimne kolory wycofują się, to żywy błękit będzie zwracał więcej uwagi na siebie niż kremowy, matowy kolor pomarańczowy. Kiedy dodamy kolor szary (czarny oraz biały) do danego koloru, zaczyna on wyglądać matowo i zmniejsza się jego nasycenie. Te kolory, jak mętna woda w basenie czy zachmurzony poranek zimowy, po prostu nie są wizualnie tak atrakcyjne, jak jaskrawe, żywe kolory. Z drugiej jednak strony, matowe kolory pomagają zmniejszyć napięcie i nadają kompozycjom medytacyjny, marzycielski nastrój.

Dobór barw

   Znając podstawowe znaczenie i proces powstawania barw można pokusić się o dobór ich, w celu użycia w projekcie. Właściwy wygląd strony i dobór kolorów to sprawa, która na sam początek przyciąga lub odrzuca odwiedzającego.
   Trudno jest udzielić właściwej i pełnej odpowiedzi na pytanie - ile kolorów użyć przy projektowaniu danego serwisu. Generalnie jednak obowiązuje jedna zasada, iż znacznie większe ryzyko niepowodzenia (osiągnięcia brzydkiego efektu końcowego) jest w przypadku użycia zbyt dużej ilości kolorów niż gdy użyje się zbyt małej ilości kolorów.
   Strona zawierająca zbyt dużo kolorów lub zbyt dużo mieszanin (grup) kolorów jest przede wszystkim nużąca i męcząca dla oczu. Ponadto znacznie utrudnia odnalezienie informacji, której odbiorca poszukuje w naszym serwisie. A nie wolno zapominać, że społeczność internetowa jest społecznością informacji. Oprawa graficzna, jakkolwiek piękna, rozbudowana i dopracowana w szczegółach, zawsze pozostanie tylko dodatkiem do nośnika informacji, jakim powinna być strona WWW.
   Z drugiej strony, oprawa graficzna zawierająca zbyt mało kolorów może być postrzegana jako nudząca, pusta, czy niedopracowana. Jednakże nie zawsze tak musi być. Czasami można uzyskać interesujące wyniki przy zastosowaniu ascezy kolorystycznej, podczas gdy zbyt wielka ilość kolorów prawie zawsze prowadzi do niepowodzenia.
   W Internecie można znaleźć wiele narzędzi, które w obrazowy sposób umożliwiają grafikom dobór barw do ich przyszłych projektów. Jednym z nich jest Color Scheme Generator (z ang. Generator schematów kolorów) ze strony WellStyled. Podczas gdy wiele innych aplikacji używa koła kolorów RGB lub CMYK, to narzędzie wykorzystuje tradycyjne koło barw z kolorem czerwonym, żółtym i niebieskim. Za pomocą kilku kliknięć myszką można wybrać i dostosować schemat kolorów oraz określić rozmaite inne kolory do tworzenia harmonijnej palety.
   W sytuacji, gdy twórca ma już wybrany jeden podstawowy kolor, którego będzie używał w serwisie powinien stosować się do kilku metod doboru kolorów uzupełniających do wybranego koloru podstawowego.
   Jedną z metod jest zasada gradientu barw, czyli dobierania kolejnych kolorów uzupełniających z grupy kolorów stanowiących płynne przejście od wybranego koloru podstawowego do czerni lub bieli. Po wybraniu kilku kolorów z tej linii, dobrym pomysłem jest potraktowanie każdego lub części z nich operacjami zmiany natężenia, nasycenia czy cieniowaniem, tak aby uzyskać lekkie odchylenie od podstawowej linii przejścia kolorów. Jednakże nawet pomimo zastosowania tych operacji uzupełniających, należy mieć na uwadze ryzyko uzyskania monotonii kolorów. Dodanie czerni lub bieli jako ostatniego z kolorów przejściowych może (aczkolwiek nie musi) poprawić ten efekt.
   Teoria kontrastu proponuje użycie kolorów kontrastujących ze sobą (może być to kontrast wartości - różne kolory lub na przykład kontrast natężenia - te same kolory) dla podkreślenia różnic lub uwypuklenia elementów istotnych. Kontrast może być duży lub mały. Z reguły stosuje się duży kontrast pomiędzy kolorem tekstu, a kolorem tła. Należy jednak uważać, że zbyt duży kontrast lub nieprawidłowo dobrane kolory kontrastujące ze sobą, mogą prowadzić do uczucia nieporządku i bałaganu. Biel i czerń tworzą ze sobą najsilniejszy kontrast wśród kolorów. Kontrast jest głównie stosowany do uwypuklenia dużych różnic, np. pomiędzy tekstem a tłem. Duży kontrast jest przyjemnym efektem dla oka, za to mały kontrast może posłużyć do podkreślenia subtelnych różnic np. w tle.
   Kontrast nasycenia raczej bywa wykorzystywany do uzyskania subtelnych efektów graficznych niż do podkreślenia lub uwypuklenia czegoś. Na przykład kilka kolorów kontrastujących przez natężenie, przedstawionych w zestawieniu z szarym tłem może być interpretowany przez ludzki wzrok jak przezroczystość H.
   Ostatnią sprawą w aspekcie kolorów, o której należy pamiętać, jest tak zwana „kolorowa ślepota" (można znaleźć inne tłumaczenia angielskiego określenia „colour blindness"). Niecałe 10% internautów ma lekką wadę wzroku, polegającą na niedostrzeganiu pewnych kolorów zestawionych w pewnych kombinacjach. Niewłaściwe zestawienie koloru tekstu i tła może spowodować, że treść zawarta na stronie WWW będzie dla tych osób praktycznie nieczytelna lub trudno dostrzegalna. Przykładowo, zielony tekst na czerwonym tle lub czerwony tekst na niebieskim tle, jest trudny do przeczytania nawet dla osób pozbawionych opisywanej wady, mimo, że oba te układy kolorów stanowią świetny przykład kontrastu. Natomiast układy biały-czarny i niebieski-żółty również są kolorami kontrastującymi, ale w tym przypadku czarny tekst na białym tle lub żółty tekst na niebieskim tle, są łatwe do odczytania.
     Umiejętność uzyskania wyjątkowej palety kolorów polega w całości na tym, aby mieć oczy szeroko otwarte. Inspiracje kolorystyczne mogą pochodzić skądkolwiek. Świadomość typów zagadnień związanych z używaniem kolorów wzmaga wrażliwość na barwy oraz umiejętność opracowania oryginalnych palet, które będą spełniały oczekiwania klientów stron WWW.

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.