Obróbka zdjęć - grafika online

Oto kilka praktycznych fotoedytorów graficznych online

PIXLR EDITOR 

Pozwala pracować z warstwami. Umożliwia zapis we własnym formacie razem z warstwami. Posiada sporo filtrów, bibliotekę pędzli oraz sporo narzędzi.
Pixlr posiada „style warstw” - pozwalają one dodawać zróżnicowane gotowe efekty do naszych prac. Aplikacja pozwoli poprawić zdjęcie, stworzyć własną grafikę czy baner.

 POLARR 2.1

Posiada sporo filtrów, może dokonać edycji fotografii na wysokim poziomie w łatwy i prosty sposób.

 FOTOR

FREEONLINEPHOTOEDITOR
 

+

Proces projektowania szablonu graficznego - przykład

Rozpoczynając proces projektowania strony internetowej, zawsze należy zastanowić się, co na niej będzie umieszczane. Po zdefiniowaniu etapów powstawania strony, ostatnim najważniejszym punktem jest praktyczne wykonanie szablonu graficznego. Trzymanie się założeń wynikających z wcześniejszego dokładnego planowania jest bardzo istotna. Po stworzeniu projektu nie ma sensu dokładać coraz to nowych elementów, ponieważ w pewnym momencie zostanie całkowicie zatarta idea strony.
Projektowanie serwisu w dużej mierze zależy od możliwości oprogramowania wykorzystanemu do budowy szablonu graficznego.
Program Photoshop firmy Adobe to rozbudowany program graficzny przeznaczony do grafiki rastrowej. Posiada bardzo wygodną możliwość rozłożenia projektu na warstwy i umieszczania poszczególnych jej elementów na nich. Korzyści płynące z wykorzystania warstw nie tylko przyspieszają ale także ułatwiają pracę. Poszczególne warstwy są niezależne od siebie. Dodatkowo można wyłączyć widok poszczególnych warstw oraz w razie potrzeby je zablokować. Należy pamiętać o odpowiednim ułożeniu komponentów strony na warstwach tak by elementy wzajemnie się nie zasłaniały, chyba że takie działanie jest zamierzone. Umieszczając każdy nowy element na nowej warstwie,  uzyskuje się większą kontrolę nad projektem. Ważna zasadą podczas projektowania jest również dążenie do ujednolicania krojów czcionek w projekcie, ich niejednorodność może przyciemnić jego wygląd. Wszystkie elementy projektu powinny tworzyć jednolitą kompozycję graficzną.
         Wykonanie części projektu przebiegało w następujący sposób:

• Rozpoczęcie budowy strony w programie Photoshop należy zacząć od odpowiedniego ustawienia wielkości pola pracy. Wymiary obszaru pracy to 800x780 pikseli.
  

• Tło główne wykorzystane w projekcie to powtarzający się element graficzny – jest to  plik o nazwie 1.gif i pochodzi ze strony www.deviantart.com.
  

• Strukturę główna strony  stanowią dwie ramki, złożone odpowiednio w grupę warstw wypełnioną teksturą zdefiniowaną w programie. Główna – górna ramka złożona jest odpowiednio z dwóch ramek o zaokrąglonych krawędziach o wymiarach: 767x137 pikseli oraz 756x123 pikseli.
  

Ramka główna - górna

Natomiast główna – dolna ramka złożona jest również z dwóch ramek o zaokrąglonych krawędziach o wymiarach: 767x554 pikseli oraz 756x543 pikseli.

Ramka główna – dolna

• Aby obie ramki lepiej wyodrębniały się na powierzchni tła głównego, a jednocześnie tworzyły z nim spójną całość, zostały wzbogacone o dodatkowy element. Jest nim, otaczająca je ramka o nieco ciemniejszej barwie i wymiarach: 787x153 pikseli dla ramki górnej oraz 787x573 dla ramki dolnej. Ponadto krawędzie otaczających ramek zostały „postrzępione” tworząc nie regularne kształty. W celu uzyskania takiego efektu zostało wykorzystane narzędzie do zaznaczania – „lasso” oraz „lasso magnetyczne”. Po zaznaczeniu odpowiednich fragmentów krawędzi ramki, zostały one usunięte tworząc miejscowe „postrzępienie”.
  

Ramka główna - górna z obramowaniem

Ramka główna - dolna z obramowaniem

• Obie ramki będą cały czas widoczne niezależnie od działań interaktywnych użytkownika, jednak dolna ramka  – w której będzie umieszczona główna treść serwisu i podstrony ma się dynamicznie zmieniać w zależności od ilości wyświetlanych elementów.
  

 

Ramki główne na tle głównym strony

• Blok dotyczący identyfikacji wizualnej firmy znajduje się na górze strony na środku górnej ramki. Wykorzystane logo firmy w projekcie jest już wcześniej istniejącym elementem graficznym, który był wykorzystywany między innymi na wizytówkach i ulotkach restauracji. Umieszczenie na stałe logo w statycznej ramce zwiększa rozpoznawalność marki i informuje użytkowników, że strony, które przeglądają, są częścią jednej witryny.
  

 

Logo filrmy "Aviator"

• Aby łatwo można było znaleźć system nawigacji strony, menu główne strony umieszczone zostało pomiędzy górną i dolną ramką. Składa się z pięciu pozycji. Są to tekstowe przyciski nawigacji. Czcionka użyta w menu to czcionka szeryfowa Times New Roman o wielkości 24 pkt. Napisy w menu zostały dodatkowo wzbogacone o style warstwy takie jak: „cień”, „faza i płaskorzeźba” oraz „obrys” i osadzone na ramce o 84 % wypełnieniu.
  

 

Blok nawigacji strony

• Ramka dolna stanowi główny blok strony. Ważne jest, aby utrzymać główny blok treści w miejscu centralnym projektu, tak aby nie marnować cennych sekund, kiedy odwiedzający przegląda stronę w poszukiwaniu potrzebnych im informacji.
  
• Elementy umieszczone w ramce dolnej to wkomponowane w tło zdjęcie przedstawiające wnętrze lokalu. Efekt wnikania zdjęcia w tło został uzyskany poprzez zastosowanie narzędzia „pędzel”. Wzdłuż krawędzi fotografii narysowano dwie ramki: jedna nieprzezroczysta o średnicy 35 pikseli i twardości 30% pędzla, druga zaś o wypełnieniu 65%, średnicy 54 pikseli i twardości 25% pędzla.
  

• Następnym elementami umieszczonymi w ramce są zdjęcia potraw stanowiących ofertę firmy. W celu lekkiego wyeksponowania grupy tych zdjęć, znajdujących się po prawej stronie, zostały do nich dodane style warstwy takie jak: „cień”, „faza zewnętrzna” i „blask wewnętrzny” oraz przenikający przez nie wzorek o 76% kryciu. Wykorzystany wzorek pochodzi z pliku graficznego ze strony www.deviantart.com. Został on wycięty za pomocą narzędzi „różdżka” i „lasso magnetyczne” i w postaci oddzielnej warstwy zastosowany jako element tła w każdej z podstron projektu.
  
• Kolejnym elementem dolnej ramki głównej jest blok tekstowy. Zawiera on kilka krótkich  komunikatów dotyczących firmy, mających na celu zaproszenie oraz zachęcenie potencjalnego klienta restauracji do zapoznania się ze stroną, a następnie odwiedzenia lokalu.  W celu zachowania jednorodności czcionki w projekcie, tekst znajdujący się w ramce dolnej to pochylona czcionka Times New Roman. Zastosowanie pochylenia czcionki wiąże się z potrzebą zachowania klasycznego wyglądu strony. Czcionka Times New Roman jest podstawową czcionką z grupy fontów szeryfowych, które bez wątpienia kojarzą się z elegancją i wyrafinowaniem. Reprezentują one ponadczasowość nawet bardziej niż najbardziej nowatorską nowoczesność. Treść bloku tekstowego jest na tyle zwięzła i krótka, iż bez wahania można sobie pozwolić na zastosowanie tego typu czcionki w projekcie. Natomiast w sytuacji zamieszczania na stronie większych fragmentów tekstu, zastosowanie  czcionki z grupy szeryfowych nie było by najlepszym rozwiązaniem z racji słabszej czytelności, a niżeli w sytuacji czcionek z grupy bezszeryfowych.
  

Strona główna - ramka dolna

Wszystkie elementy zostały umieszczone w sposób tworzący  ze sobą równowagę asymetryczną. Wizualna waga dużego zdjęcia lokalu umieszczonego w lewym górnym rogu równoważona jest poprzez połączoną wagę mniejszych zdjęć potraw znajdujących się z prawej strony i kilku bloków tekstów umieszczonych w lewym dolnym rogu kompozycji.

• Stopka, której zadaniem jest oddzielanie końcowej zawartości strony od dołu okna przeglądarki znajduje się na końcu strony. Zawiera ona informacje na temat praw autorskich i kontaktu. Została ona wykonana w podobny sposób jak ramka otaczająca ramki główne projektu. Jest umieszczona na środku dolnej części dolnych ramek i stanowi nieregularne ich wykończenie.
  
  

Stopka strony

• Podstawą dla projektów każdej z następnych podstron strony Awiatora, jest główna – dolna ramka z obramowaniem z tym samym tłem. Dodatkowo na każdej z podstron umieszczony jest ten sam wnikający w tło wzorek. Na bazie powyższych elementów zostały wykonane inne podstrony projektu.
  
• Zawartość podstrony „Oferta” stanowi głównie blok tekstowy. Zawiera on krótka charakterystykę usług świadczących przez firmę. Podobnie jak na stronie głównej zastosowana jest czcionka szeryfowi Times New Roman. Dodatkowym elementem tła jest umieszczony wzorek mający na celu zarówno stanowić równowagę wizualną jak i zachować klasyczny charakter projektu.
  

Rezerwacje - podstrona

• Następną podstroną jest strona o nazwie „Rezerwacje”. Zastosowanie  prostego formularza pozwala na lepszy kontakt klienta z firmą. W tym przypadku jest to szybka możliwość  dokonania rezerwacji stolika w lokalu. Użyta czcionka jest taka sama jak w przypadku pozostałych stron. Wstawione ramki są to odpowiednio dwie ramki o wymiarach: szerokość 200 pikseli i długość 26 pikseli, natomiast ramka będąca polem treści wiadomości ma wymiary: szerokość 339 pikseli oraz wysokość 200 pikseli. Na wszystkich ramkach dodatkowo został zastosowany ten sam styl warstwy. Jest nim efekt „Faza zewnętrzna”, która nadaje jasną delikatna otoczkę na krawędziach ramek.
  

 

Rezerwacje - podstrona

• Kolejna podstrona to „Kontakt”. Zawiera ona typowe informacje na temat adresu restauracji, adresu e-mail oraz telefonu. W celu określenia dokładnej lokalizacji firmy została zamieszczona orientacyjna mapka. Użyta czcionka to Times New Roman – taka sama co w pozostałych stronach. Umieszczona na stronie mapka pochodzi ze strony http://map24.interia.pl/. Po wykonaniu zrzutu ekranowego z powyższej strony, została wycięta pożądana część mapki za pomocą narzędzia „zaznaczanie  prostokątne”, który wyznacza dokładną lokalizację restauracji. Dodatkowo cała mapka została przyciemniona za pomocą narzędzia „jasność/kontrast”, zwiększyło to czytelność mapy i wyodrębniło ja na tle strony. Miejsce, gdzie na mapie znajduje się lokal, oznaczone zostało czerwonym punktem za pomocą narzędzia „pędzel” o twardości 7% i o średnicy 5 pikseli. Dodatkowo został wstawiony napis „Aviator” - czcionka Times New Roman wzbogacony o styl warstwy „Faza zewnętrzna”, nadając mu jasną otoczkę w kolorze tła strony.
  

Kontakt - podstrona

• Po połączeniu wszystkich powyższych elementów projektu można uznać, iż tworzą one wspólną harmonijną całość.
  

 

Strona główna "Aviator"

Kolory wykorzystane w projekcie to głownie jasne średnio nasycone ciepłe barwy. Związane jest to z wystrojem lokalu charakteryzującym się miłym dla oka, ciepłym wnętrzem. Elementy klasyczne użyte w projekcie tj. tło główne, czcionka kojarzyć się mogą użytkownikowi z wyrafinowaniem i wysoką klasą restauracji. Elementy graficzne - fotografie przedstawiające przykładowe potrawy świadczyć mogą o wykwintnej kuchni charakterystycznej dla tej restauracji co dodatkowo potęgują pozytywne wrażenie odbiorcy. Wszystkie te czynniki w połączeniu z zastosowaniem zachęcających  haseł opisujących charakter i klimat lokalu mogą sprawić iż klient odwiedzający stronę firmy może być w przyszłości zainteresowany skorzystaniem z jej usług.

Etapy projektowania

   Projektując stronę www często zdarza się, że projekt trwa znacznie dłużej niż przewidywano. Da się tego uniknąć dzięki dokładnemu planowaniu. Planowanie serwisu to zbiór czynności, które mają na celu ułatwić i przyspieszyć jego budowę. Im dłuższy i dokładniejszy jest proces planowania, tym łatwiej i szybciej następują po sobie dalsze części projektu. W tym przypadku mało ważna jest skala projektu, nie jest istotne, czy jest nią wysoko budżetowy serwis korporacyjny, czy też prywatna strona malarza domowego.
   Projektowanie strony internetowej powinno przebiegać według następujących punktów:

• definiowanie celów
• definiowanie grupy docelowej
• projekt zawartości strony
• określenie struktury strony
• projektowanie wizualne

Cele
Definiowanie celów strony to nic innego jak próba udzielenia odpowiedzi na pytania: jaka jest misja firmy, jaką częścią misji i strategii firmy jest strona internetowa, dlaczego ludzie będą odwiedzać stronę? Ważnym elementem na tym etapie projektowania jest znalezienie sposobu na późniejsze zmierzenie, czy określone cele zostały osiągnięte i w jakim stopniu. Czy będzie to ilość odwiedzin, czy liczba pobranych plików, czy stopień rozpoznania firmy i jej marki w Internecie, czy coś jeszcze.
            Aviator to średniej klasy restauracja, świadcząca usługi gastronomiczne na terenie lubelskiego miasteczka akademickiego.
Celem projektu strony Aviatora, jest głównie chęć zaistnienia firmy w Internecie, a co za tym idzie promowanie restauracji w celu zwiększenia ilości klientów. Powstała witryna ma być wizytówką firmy zawierającą podstawowe informacje na temat jej działalności, usług, lokalizacji czy też danych kontaktowych. Zaistnienie firmy w Internecie umożliwi jej klientom łatwy dostęp do bieżących informacji. Wygląd strony ma na celu zachęcenie użytkownika do odwiedzenia lokalu.
Grupa docelowa
            Tworzenie strony internetowej bez wiedzy na temat jej przyszłych użytkowników jest procesem niekompletnym i często może prowadzić do niepowodzenia projektu. Nie można wprowadzić na rynek żadnego produktu, jeśli nie wie się, kto ten produkt kupi. Dlatego też chociażby ogólne określenie grupy przyszłych odbiorców jest bardzo istotne.
Klientami Aviatora są głównie studenci oraz aktorzy i muzycy pracujący w pobliskim teatrze. Można więc z powodzeniem uznać, iż użytkownikami odwiedzającymi stronę Aviatora będą głównie osoby młode oraz w średnim wieku.
Zawartość
  Najważniejszym elementem etapu projektowego jest odpowiedź na dwa podstawowe pytania: jakiego rodzaju informacje będzie zawierała strona oraz jaki będzie jej schemat funkcjonalny.
Strona Aviatora ma zawierać informacje na temat działalności, usług, oferty, danych kontaktowych oraz lokalizacji firmy. Przedstawienie powyższych informacji będzie realizowane za pomocą prostych komunikatów tekstowych, fotografii, grafik. Wszystkie elementy stanowiące zawartość strony będą w funkcjonalny i przejrzysty sposób przekazywać informacje. Zdjęcia w zależności od potrzeby będą odpowiednio opisane i scharakteryzowane w celu uniknięcia wprowadzenia w błąd użytkownika.˛
Struktura
Struktura strony to szkielet, na którym oparte są wszystkie pozostałe elementy. Bez niego często jest niezorganizowana, nieczytelna, skomplikowana i nieprzemyślana. Na tym etapie projektowania strony określa się system nawigacyjny. Warto zdefiniować całość systemu nawigacyjnego - tzn. w jaki sposób użytkownik będzie się poruszał po stronie. Jakie dokumenty będą dostępne z poziomu strony głównej, a które po "pierwszym kliknięciu". Projektując nawigację strony, powinno się zacząć od układu globalnego.
   System nawigacyjny strony Aviatora dostępny będzie na stronie głównej witryny. Zawierać będzie dostęp do kilku pod stron takich jak:

• „Restauracja” - zawierającą krótki opis charakterystyki restauracji oraz kilka zdjęć i grafik;
• „Oferta” – zawiera listę usług stanowiących ofertę firmy;
•  „Rezerwacje” – zawiera formularz umożliwiający dokonanie wcześniejszych rezerwacji stolika w lokalu przez Internet;
• „Kontakt” – zawiera informacje na temat lokalizacji (adres, mapka) oraz telefonu adresu email;

Cztery powyższe elementy nawigacji stanowić będą układ globalny strony.
Jednym z głównych  zadań nawigacji jest próba dostarczenia użytkownikowi wiedzy na temat obecnego miejsca przebywania w strukturze strony. Użytkownik zawsze powinien umieć odpowiedzieć na następujące pytania:
- gdzie jestem?
- dokąd mogę się udać ?
- jak mogę się tam dostać?
- w jaki sposób mogę wrócić tam, skąd tutaj przyszedłem ?
   Użytkownik powinien więc po prostu umieć określić, w jakim jest dziale strony, jaki ogląda dokument, gdzie był przed chwilą i jak się dostał w to miejsce, w którym teraz jest.
Pierwszym elementem, który powinien powstać na tym etapie, jest szablon strony. Powinno się w nim znaleźć miejsce na globalny układ nawigacyjny i lokalną nawigację. Teraz trzeba połączyć to wszystko z pozostałymi elementami strony, takimi jak np. logo firmy. Ten etap projektuje się zazwyczaj nie na ekranie monitora, ale posługując się kartką i ołówkiem. Taki sposób projektowania jest dużo efektywniejszy i łatwiej można dokonać poprawek na bieżąco. Gdy już krystalizuje się koncepcja graficzna szablonu, dopiero wtedy przystępuje się do tworzenia cyfrowego projektu graficznego.
               Korzystając z naszkicowania siatki powstałej przy zastosowaniu reguły trójpodziału można rozpocząć układanie elementów strony.

Układ strony Aviator – szkic

   Górny blok projektu stanowi identyfikacja wizualna firmy tzw. logo, jest ona umieszczona centralnie. Zaraz pod spodem umieszczony jest globalny układ nawigacji strony. Następnie w głównym bloku strony umieszczone jest duże zdjęcie przedstawiające wnętrze lokalu, natomiast pod spodem część tekstowa. Prawą przestrzeń głównego bloku zajmuje kilka zdjęć przykładowych potraw oferowanych przez restauracje.

Strony internetowe przeznaczone dla mężczyzn

Zarówno mężczyźni jak i kobiety są osobami dorosłymi, a przez to mogą posiadać podobne doświadczenia, co może determinować ich podobne postrzeganie i  odbiór przekazywanych informacji w sieci. Niestety tak nie jest. Istnieje dość spora przepaść pomiędzy tymi dwiema grupami docelowymi. Wiadomo - mężczyźni są inni niż kobiety. Świadomość tego w jaki sposób mężczyźni odbierają formę i treść stron internetowych jest więc bardzo istotna dla twórców stron internetowych skierowanych dla tej właśnie grupy docelowej.
   Mężczyźni jako użytkownicy stron internetowych zwracają szczególna uwagę na konkretne i rzeczowe przedstawianie informacji w sieci. Zatem przekazywana treść powinna być w dużym stopniu uboga w dodatkowe, niezwiązane bezpośrednio z tematem elementy graficzne. Mężczyźni jako grupa docelowa mają skłonność do całościowego wychwytywania zawartości stron internetowych, dlatego większa ilość detali i rozpraszających elementów działa negatywnie na ich odbiór. Można uznać, iż surowość formy stron sprzyja i korzystnie oddziałuje na utrzymanie internauty  korzystającego z tak zbudowanych serwisów.
Kolory używane podczas tworzenia stron internetowych przeznaczonych dla mężczyzn powinny być stonowane. Zastosowanie żywych kolorów nie zbyt korzystnie oddziałuje na mężczyzn i jest rozwiązaniem dość ryzykownym.

Strony internetowe przeznaczone dla kobiet

W przypadku próby porównania dwóch grup docelowych jakimi są mężczyźni i kobiety można dopatrzeć się sporo różnic zachodzących  pomiędzy nimi. Są to zarówno kwestie dotyczące wizualnego odbioru stron internetowych, samego  sposobu poruszania się po nich,  jak również metod przyswajania informacji w nich zawartych. 
Kobiety postrzegając problemy i formy, częściej uwzględniają wieloelementowość obiektów; praktycznie od razu obserwują i analizują szczegóły, a dopiero potem skupiają uwagę na całości obiektu. Z tego powodu szybciej dostrzegają drobne zmiany, szczegóły, lecz mają większe problemy nad skupieniem się na całościowym problemie.
Na stronach internetowych skierowanych do kobiet dominują kolory żywe, często są to różnego rodzaju odcienie koloru różowego. Niejednokrotnie tabelki,  ramki czy też bloki tekstowe, w których zamieszczone są informacje mają zaokrąglone, łagodne kształty.  Projekty są bogate w formę poprzez zastosowanie wielu elementów graficznych czy fotografii przy zmniejszonej ilości tekstu. Taki charakter przekazywania informacji jest bardziej bezpośredni. Ułatwia to  przyswajanie pożądanych informacji przy równoczesnym zachęcaniu internautek do pozostania i kontynuowania przeglądania strony.

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.