Rozdział 2. Aspekt wizualny stron internetowych spółek giełdowych

Transkrypt

1 Artykuł pochodzi z publikacji: Produkcja przekazów multimedialnych, (Red.) M. Chrząścik, Wyższa Szkoła Promocji, Warszawa 2013 Rozdział 2. Aspekt wizualny stron internetowych spółek giełdowych Marta Julia Baranowska Wstęp Identyfikacja wizualna jest niezbędnym środkiem skutecznego budowania świadomości marki u odbiorcy. Wysoka rozpoznawalność nadawcy przez adresatów komunikacji marketingowej to podstawowy cel większości działań reklamowych i wizerunkowych czy to firm czy instytucji. Identyfikacja wizualna jest narzędziem komunikacji wizualnej - procesu, który ma miejsce między firmą lub instytucją jako nadawcą oraz klientem (faktycznym lub potencjalnym) jako odbiorcą. Jej celem jest stworzenie sieci pozytywnych skojarzeń, silna pozycja marki na rynku wymaga przede wszystkim konsekwencji w kreowaniu swojego obrazu w powszechnym odbiorze. Każda, nawet najlepiej przemyślana pod względem skuteczności przekazu akcja marketingowa pozostanie tylko połowicznym sukcesem jeśli nie zostanie trwale skojarzona z marką, która za nią stoi. Podstawowym kierunkiem budowy spójnej identyfikacji wizualnej jest stworzenie i utrzymanie jednoznacznego wizerunku firmy w komunikacji ze światem zewnętrznym. Jednym z najskuteczniejszych środków umożliwiających jego realizację jest stworzenie i wdrożenie profesjonalnej księgi identyfikacji wizualnej. 30

2 2.1. Charakterystyka strony internetowej W dzisiejszych czasach strona WWW (ang. World Wide Web) 1 jest najpopularniejszym sposobem na szybkie przekazywanie informacji użytkownikom Internetu. Aby móc skorzystać z zasobów sieci konieczna jest przeglądarka internetowa. To dzięki niej można bez problemów przeglądać najróżniejsze witryny oraz zdjęcia, animacje, teksty i dźwięki w niej zawarte. Wszystko zaczęło się od zaprojektowania sieci World-Wide-Web, nazywanej również W Pojęcie strony internetowej Brytyjski inżynier i naukowiec sir Tim Berners-Lee zastanawiał się, w jaki sposób można by udostępnić informacje o wynikach badań naukowych szwajcarskiego instytutu CERN ( Centre European pour la Recherche Nucleaire ) całemu światu. Udało mu się to poprzez połączenie ze sobą dokumentów znajdujących się na serwerze WWW poprzez zastosowanie łączy hipertekstowych. W 1991 roku stworzył pierwszą przeglądarkę tekstową oraz pierwszą stronę internetową Aspekt techniczny strony internetowej Na podstawie tych informacji można stwierdzić iż strona internetowa od zawsze była elektroniczną wersją tradycyjnej publikacji. 3 Z czasem jednak oprócz funkcji informatywnej witryny stały się bardziej rozbudowane, a ich funkcje rozszerzyły się w najróżniejszych kierunkach. Również pod względem technicznym zwiększyły się możliwości w prezentowaniu stron poprzez tworzenie wyjątkowych layoutów. Przy tworzeniu projektu strony internetowej trzeba zastanowić się nad tym czy witryna będzie ruchoma, czy też stała. Większość stron znajdujących się w Internecie ma możliwość przewijania ich za pomocą paska nawigacji. Pozwala to potencjalnemu użytkownikowi 1 Z. Ruszczyk, Internet w Biznesie, Ośrodek Doradztwa i Doskonalenia Kadr, Styczeń 1997, s Agnieszka Kaila Richte 3 G. Ambrose, P. Harris, Layout zasady/ kompozycja/ zastosowanie, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s

3 na swobodne poruszanie się na stronie w poszukiwaniu konkretnych informacji Podstawy projektowania Kolejnym ważnym aspektem decydującym o wyglądzie witryny jest dostosowanie layoutu do rozdzielczości ekranu. 4 Wyróżniamy kilka podstawowych rozdzielczości. Obecnie najmniejszą zalecaną rozdzielczością przez firmę Apple jest rozdzielczość o parametrach 800x600 pikseli. Jednak najczęściej spotykane wymiary ekranu to 1024x768 pikseli. Przy takiej rozdzielczości możliwy jest całkowity widok układu strony, a całość wydaje się scentralizowana. Im większą rozdzielczość zdecydujemy się zastosować tym więcej elementów będzie widocznych bez potrzeby użycia paska nawigacji. Trzeba pamiętać o tym iż rozdzielczość określana jest również przez głębię bitową pikseli 5, co oznacza, że każdy piksel ma określoną liczbę bitów, która mu odpowiada w generowaniu barw. Im większa jest głębia bitowa, tym większą paletę barw posiada obraz cyfrowy. Layout to zaplanowanie formy i przestrzeni publikacji tak, aby rozmieścić na niej elementy wchodzące w skład projektu. 6 Layout w kontekście budowania stron internetowych jest mapą, która pozwoli zorganizować dany układ strony. Wyróżnia się trzy podstawowe układy strony 7 : Pionowy najczęściej spotykany. Treść strony jest skierowana w dół co oznacza, że aby się z nią zapoznać w całości trzeba użyć pionowego paska nawigacji. (Często stosowany na forach i stronach zawierających dużą ilość treści). Poziomy przeciwieństwo układu pionowego. Raczej już rzadko spotykany na stronach. Aby zapoznać się z całą treścią użytkownik musi użyć poziomego paska nawigacji. Ten układ jest stosowany zazwyczaj przy galeriach prac artystycznych. Centralny czyli układ, w którym treść jest rozmieszczona w taki sposób na stronie, że nie trzeba używać do poruszania się żad- 4 J. Siarto, E. Watrall, Head First Web Design, Helion, Gliwice 2010, s G.. Ambrose, P. Harris, Pre-press Poradnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2008, s G.. Ambrose, P. Harris, Layout, PWN, Warszawa 2008 s A. Boguska -Torbicz, M. Kaspeski, Projektowanie Stron WWW Użyteczność w praktyce, Helion, Gliwice 2008, s

4 nych pasków nawigacji. Ten typ układu najlepiej sprawdza się w budowaniu stron firmowych. Najważniejsze w budowaniu biznesowych stron internetowych jest, aby strona była przejrzysta i równo ułożona. Najlepszym sposobem na uzyskanie pożądanego efektu jest zastanowienie się nad organizacją strony 8, nad wyborem układu oraz rozmieszczeniem na niej poszczególnych treści, czyli nad tzw. architekturą informacji. Jest to sposób podzielenia wszystkich informacji, które mają znaleźć się na stronie, w grupy. 9 Ważne jest, aby ułożyć informacje w sposób logiczny dla odbiorcy. Dla przykładu - gdy odwiedza się stronę internetową, to prawie zawsze pierwszym wyborem w menu jest Strona główna, a ostatnim Kontakt. To prowadzi do nawigacji, która jest podstawą poruszania się po witrynach internetowych. Jak stwierdziła Jennifer Fleming, 10 autorka Web Navigation. Designing the User Experience to ona odpowiada użytkownikom na takie pytania jak: Gdzie jestem? Gdzie mogę pójść? Jak się tam dostanę? Jak mogę powrócić do miejsca, w którym już byłem. Patrząc na zastosowanie zwykłego hiperłącza (link jest niebieski, gdy nie zostanie jeszcze uruchomiony, a zmienia się na fioletowy, gdy został już przez danego użytkownika otwarty) nawigacja odpowiada również na pytanie Gdzie już byłem?. Odpowiedzią na te pytania jest stworzenie logicznie zorganizowanej strony dla przeciętnego użytkownika. O sukcesie nawigacji na stronie internetowej decyduje dobrze zaprojektowane Menu główne. Jak sama nazwa wskazuje menu to karta 11 tyle, że w znaczeniu internetowym umożliwia użytkownikom szybkie i łatwe zapoznanie się z zawartością danej witryny. Menu poziome 12 jest jednym z najpopularniejszych. Jego zalety polegają na tym, że nie zabiera wiele miejsca i jest najbardziej zauważalne przez potencjalnego użytkownika. Wadą takiego menu jest to, iż jest ograniczone miejsce, a nazwy kategorii powinny być krótkie. 8 J. Siarto, E. Watrall, Head First Web Design, Helion, Gliwice 2010, s Ibid., s A. Boguska -Torbicz, M. Kaspeski, Projektowanie Stron WWW Użyteczność w praktyce, Helion, Gliwice 2008, s Ibidem, s Ibidem, s

5 W praktyce zastosowanie takiego menu często prowadzi do menu kaskadowego. 13 Polega ono na tym, iż po najechaniu myszką na daną kategorię menu rozsuwa się ukazując podkategorie. Zapewnia ono oszczędność miejsca, a przy tym może pomieścić długie listy kolejnych kategorii. Jednakże rozwijane menu nie pokaże w jakim punkcie strony znajduje się użytkownik, a poruszanie się po nim czasem wymaga zręczności, aby trafić na link, który go interesuje. Dlatego też zdarza się, iż wraz z menu kaskadowym pojawia na stronie boczne menu pionowe, które służy do wskazania, w jakim miejscu na stronie w danym momencie znajduje się użytkownik. Boczne 14 menu może mieć bardzo długą listę linków z wieloma poziomami nawigacyjnymi. Długość nazw kategorii również nie stanowi problemu w tego typu menu. Jedyne, co może okazać się uciążliwe, to spore zajmowanie miejsca na stronie i żmudne przewijanie strony w poszukiwaniu konkretnego linku. Takie menu jest najbardziej odpowiednie dla stron o głębokiej strukturze organizacyjnej. Wybranie menu jednak nie decyduje o jego prawidłowej pozycji na stronie. Niezbędnym elementem wspomagającym precyzyjne rozmieszczenie elementów na stronie jest siatka. 15 To ona umożliwia uniknięcia błędów w późniejszym etapie powstawania layoutu. Istnieje wiele rodzajów lub nawet zestawów siatek. Wyróżnia się na przykład siatki kolumnowe 16, które dzielą projekt na określoną liczbę kolumn. Wraz ze wzrostem ilości kolumn, rośnie elastyczność projektu, ale również jego skomplikowanie w późniejszym etapie. Występują również siatki wierszy 17, które bardzo pomagają w szybkim umieszczeniu dodatkowych obiektów na stronie bez zbędnych pomiarów. Marginesy są również nieodłącznym elementem siatki. Dzięki nim strona zachowuje równowagę i przejrzystość. 13 A.Boguska -Torbicz, M. Kaspeski, Projektowanie Stron WWW Użyteczność w praktyce, Helion, Gliwice 2008, s Ibidem, s Bhaskaran Lakshmi, Czym jest projektowanie publikacji, ABE Dom wydawniczy, Warszawa 2006, s Simmons Jason, Komputerowy Warsztat Projektanta, ABE Dom Wydawniczy, Warszawa 2008, s Ibidem, s

6 Kolejnym elementem siatki są linie pomocnicze 18, które projektant zgodnie z własnym uznaniem zaznacza na projekcie. Liczba kolumn czy wierszy jest zależna często od formatu, na którym będzie się pracować. Jednakże mimo istniejących zasad, które proponują pewne rozwiązania, każdy projekt jest indywidualny i rzadko kiedy zdarza się, aby były one interpretowane w taki sam sposób. Korzystanie z systemu siatek jest bardzo pomocne i sprzyja wystrojowi strony, jednakże nie jest obowiązkowe. W projektowaniu layoutu, po wyborze układu strony i ewentualnym rozmieszczeniu siatki można zastanowić się nad rozstawieniem poszczególnych elementów, które będzie zawierać strona. Oto kilka podstawowych układów blokowych i kolumnowych często spotykanych na stronach internetowych: Układ blokowy centralny 19 - charakteryzuje się menu znajdującym się na szczycie strony oraz centralnie umieszczonym blokiem na treść wykorzystującą całą powierzchnię. Rys. 1. Układ blokowy centralny Źródło: A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW Użyteczność w praktyce, s. 24 Układ dwukolumnowy asymetryczny z menu prawostronnym 20 blok treści znajduje się po lewej stronie. 18 Ibidem, s A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW Użyteczność w praktyce, Helion, Gliwice 2008, s Ibidem, s

7 Rys. 2. Układ dwukolumnowy asymetryczny z menu prawostronnym Źródło: A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW Użyteczność w praktyce, s. 24 Układ dwukolumnowy asymetryczny z menu lewostronnym 21 blok treści znajduje się po prawej stronie Rys. 3. Układ dwukolumnowy asymetryczny z menu lewostronnym Źródło: A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW Użyteczność w praktyce, Helion, Gliwice 2008, s. 25 Układ dwukolumnowy symetryczny 22 menu najczęściej poziome ulokowane na górze z blokami tekstu po lewej i prawej stronie równe względem siebie. 21 A. Boguska -Torbicz, M. Kaspeski, Projektowanie Stron WWW Użyteczność w praktyce, Helion, Gliwice 2008, s Ibidem, s

8 Rys. 4. Układ dwukolumnowy symetryczny Źródło: Ibid, s.25 Układ trójkolumnowy z menu głównym na górze strony najczęściej w formie poziomej. Rys. 5. Układ trójkolumnowy Źródło: Ibid, s.25 Trzeba pamiętać, że nie każdy układ sprzyja wszystkim rodzajom menu, o których była mowa we wcześniejszej części pracy. Niektóre propozycje mają z góry ustalone rozmieszczenie nawigacji i menu na stronie. 37

9 Wracając jednak do proporcji i solidnego usytuowania na stronie całego układu warto wspomnieć o regule trójpodziału czyli o uproszczeniu złotej proporcji. Samo wybranie konkretnego układu nie zapewni prawidłowo zbudowanej siatki. Jednak zastosowanie reguły trójpodziału ułatwi dokładne wyliczenie przestrzeni jaką powinno się przeznaczyć na treść, menu, marginesy i inne elementy. Brzmi ona następująco: Jeśli weźmiesz całą szerokość czegoś i pomnożysz tę wartość przez 0,62, otrzymasz atrakcyjny szeroki obszar, na którym możesz umieścić swoją treść. 23 W tej zasadzie pozostaje 0,38 szerokości, które jest przeznaczone na materiały dodatkowe. Strona, której rozdzielczość wynosi 800 x 600 pikseli powinna mieć obszar na treść o szerokości równej 496 pikseli. 24 Co oznacza, że przy zastosowaniu np. układu trójkolumnowego, na boczny obszar pozostanie po 152 piksele. W nim trzeba uwzględnić margines, ewentualne menu boczne czy nawigację. Zasada ta nie tylko wyznacza środkowy obszar, na którym powinna widnieć treść strony, ale również informuje na czym najpierw spocznie wzrok przeciętnego internauty. W przypadku rozdzielczości 1024 x 768 pikseli, główny obszar wynosiłby 634,88 pikseli. Jak widać nie należy się sztywno trzymać tej reguły, gdyż trudno byłoby wyliczać ułamki z pikseli. Jednakże bardzo ułatwia zagospodarowanie danej przestrzeni i dopasowanie się do konkretnej rozdzielczości. Dzięki tej zasadzie można wraz z niewielką pomocą kalkulatora szybko wyliczyć wszystkie dane potrzebne do proporcjonalnego wyglądu strony Kolor Wszystkie informacje na temat układu strony można potraktować jak szkic i kontur rysunku, którym jest layout. Jedyne, czego mu brakuje do końcowego efektu, jest kolor. Od najmłodszych lat człowiek przypisuje kolorom konkretne emocje lub dowiaduje się o ich kulturowym znaczeniu od otoczenia. Dlatego też skojarzenia jakie występują u odbiorców mają bardzo duże znaczenie w powodzeniu projektu. Zły dobór kolorów nawet najlepiej zapowiadającego się projektu może spowodować jego całkowitą klęskę. Dobór odpowiednich kolorów 23 J. Siarto, E. Watrall, Head First Web Design, Helion, Gliwice 2010, s M, Healey, Czym jest branding, ABE Dom wydawniczy, Warszawa 2008 s

10 do witryny internetowej nie jest prosty, gdyż trzeba wziąć pod uwagę psychologię kolorów, ich znaczenie kulturowe oraz, w przypadku biznesowej strony, indywidualne wymagania firmy. Największy problem zaczyna się, gdy następuje prezentacja gotowej strony i okazuje się, iż na ekranie klienta kolory wyglądają zupełnie inaczej niż na komputerze projektanta. A wszystko przez to, iż coraz więcej ekranów na rynku jest w stanie przedstawić ponad 16 milionów kolorów Definicja Koloru Człowiek dysponuje pięcioma zmysłami, dzięki którym postrzega świat. Korzysta z percepcji smakowej, węchowej, dotykowej, słuchowej i wzrokowej. Dzięki tej ostatniej człowiek otrzymuje aż 96% informacji o świecie, który go otacza. Droga, jaką pokonuje informacja o kolorze jedynie zaczyna się w oku, by później przebyć długą drogę do specjalnych części mózgu, zwanych potocznie korą wzrokowa, gdzie zostaje poddana obróbce. Kora wzrokowa dzieli się na specjalne obszary odpowiadające za obróbkę poszczególnych informacji 25 : V5 odpowiada za przetwarzanie informacji o ruchu V4 odpowiada za postrzeganie kolorów, a także w mniejszym stopniu za kształty V3 - odpowiada za wyczucie odległości, głębi, ale również w mniejszym stopniu za ruch V2 i V1 mają funkcję dopełniającą. W odpowiednim połączeniu z obszarami V4 i V5 przetwarzają zasadnicze informacje na temat kształtu, ruchu, głębi i koloru. Oko człowieka ma możliwość widzenia jasności i barw, zaś resztą pracy w pojmowaniu widzianego obrazu zajmuje się mózg. Jednakże, gdyby bliżej przyjrzeć się budowie ludzkiego oka, można by łatwiej zrozumieć, jak trudne jest odzwierciedlenie odpowiednich kolorów na ekranie komputera. W oku przeciętnego człowieka znajduje się około 120 milionów pręcików i 6 milionów czopków, czyli w sumie 126 milionów światłoczułych receptorów na powierzchni siatkówki, zaś na ekranie monitora o rozdzielczości 1024 x 768 znajduje się tylko 786 tys. punktów Ibidem. 39

11 Dzięki tak wielkiej czułości oka w postrzeganiu trzech podstawowych barw jakimi są czerwony, niebieski i żółty, człowiek ma możliwość zapoznania się z tak wielka ilością kolorów jakie prezentuje natura Znaczenie kolorów wg A. Boguskiej i M. Kasperskiego Znaczenie koloru ma podłoże psychofizjologiczne i kulturowe 26 co oznacza, że kolor nabiera znaczenia dopiero w momencie, gdy zaczyna być kojarzony z emocjami, których dostarcza oraz gdy człowiek dowiaduje się o jego szerszym znaczeniu z zależności od tego, w jakiej kulturze zostanie wychowany. O upodobaniach do danej barwy jednak często decyduje wiek i doświadczenia indywidualne. W tym wypadku przy doborze odpowiednich kolorów pomoże ustalenie, do jakiej grupy docelowej będzie kierowana witryna internetowa. Już w latach przeprowadzone w Anglii badania The British Colour Concil uświadomiły ludziom, iż dobór kolorystyczny często ma większe oddziaływanie na konsumenta, niż przykładowe hasło reklamowe. Znaczenie kolorów pod względem psychologicznym objawia się tym, jakie skojarzenia przywodzą na myśl ludziom. Mówimy, że czerwień rozdrażnia, szkarłat sprawia wrażenie majestatyczne lub żałobne, kolor żółty rozwesela, zieleń uspokaja, fiolet przygnębia itd. Określamy barwy jako wesołe, czyste pogodne, lub smutne, nużące. 27 Jeżeli chodzi o znaczenie fizjologiczne, to odznacza się ono tym, jak intensywne emocje i uczucia wzbudza w różnych odbiorcach konkretny kolor. Wykazuje to oddziaływanie barw na ludzki system wegetatywny. W przypadku koloru czerwonego, powszechnie wiadomo, że jest on silnie pobudzający. Udowodniono, iż nawet niedługie przebywanie w pokoju o czerwonych ścianach powoduje przyspieszenie oddechu i częstotliwości mrugania oraz wzrost ciśnienia krwi i tętna. Natomiast działanie koloru niebieskiego ma zupełnie odwrotny skutek. W zależności od natężenia koloru, obszaru, na którym się znajduje, wywołuje on pobudzenie 26 A. Zausznica, Nauka o barwie, Wydawnictwo Naukowe PWN, Warszawa 1959, s A. Mąkczyńska - Frydryszek, M. Jaskólska-Klaus, T. Maruszewski, Psychofizjologia widzenia, PWSSP, Poznań,

12 w różnych stopniach. Poniższa tabela przedstawia najpopularniejsze skojarzenia z poszczególnymi kolorami. Tabela 1 Znaczenie kolorów Kolor C zerwony Różowy Pomarańczowy Żółty Brązowy Zielony Niebieski Fioletowy Czarny Szary, srebrny Biały Znaczenie Siła, władza, pasja niebezpieczeństwo, błąd, stop, ostrzeżenie, agresja, ogień, gorący, luksusowy, namiętność, bogactwo, śmiałość. Kobiecość, kolor słodki i cukierkowy, kiczowatość i popkultura. Ciepło, jesień, energia, żywotność, świeżość, nowoczesność, ostrożność. Zadowolenie, ostrożność, słoneczność. pogoda ducha, optymizm, radość, dostatek, zawiść. Zabrudzenie, zaufanie, przyjaźń, pewność, jesień, klasyka. Zazdrość, sielska atmosfera, wiosna, natura, wzrost, żyzność, nowość, nadzieja, przyjaźń, niedoświadczenie, sukces, uzdrowienie, ochrona środowiska Męskość, woda, smutek, niebo, bezpieczeństwo, spokój ducha, wzniosłość uczuć. Tajemnica, kolor królewski, mądrość, duchowe poznanie, wtajemniczenie. Zło, noc, upiory, śmierć, żałoba, powaga, autorytet, strach, siła. Czystość, rozsądek, niewinność, szlachetność, stare czasy (czarnobiały film); w zależności od jasności: radość, pochmurny, mrok. Niewinność, czysty, zimny, nieskazitelny, niewinny, chłodny, zima. Źródło: A. Zausznica, Nauka o barwie (1959), Thomas A. Powell, Web Design Complete Reference (2002), Crystal Waters, Web Consept & Design. A Comprehensive Guide for CEWS (1996). Warto się sugerować zawartością tabeli przy doborze kolorystyki na stronę internetową, gdyż pomimo istnienia ogólnego zarysu pojmowania kolorów nie jest on na tyle silny, aby nie mógł ulegać zmianie w indywidualnym odczuciu każdego człowieka. Kolejną rzeczą, nad którą warto się zastanowić przy wyborze kolorystyki, jest jej zależność kulturowa. 28 Ten element jest niezwykle ważny, gdyż istnieje wiele skrajności co do odbioru kolorów przez poszczególne narodowości. 28 A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW Użyteczność w praktyce, Helion, Gliwice 2008, s

13 Zgodnie z poniższą tabelą można zauważyć, iż we Francji kolor czerwony jest kojarzony z arystokracją, w Chinach ze szczęściem, w Indiach kolor ten przypisywany jest twórczości i życiu, podczas gdy w Japonii jest on kojarzony jedynie z gniewem i niebezpieczeństwa, a w Egipcie ze śmiercią. Trzeba również pamiętać, że w niektórych krajach zasady kolorystyczne są przyjmowane bardziej konserwatywnie, a co za tym idzie, zapomnienie o znaczeniu może być nawet uznawane za obrazę. Oto inne ciekawe przykłady postrzegania kolorów przez różne kraje. Tabela 2 Znaczenie kolorów wg krajów Kultura Czerwony Niebieski Zielony Żółty Biały USA Niebezpieczeństwo Męskość Bezpieczeństwo Tchórzostwo Czystość Francja Arystokracja Wolność, pokój Egipt Śmierć Cnota, walka, prawda Półświatek Przemijanie Neutralność Żyzność, tężyzna Indie Życie, twórczość - Pomysłowość, żyzność Japonia Gniew, niebezpieczeństwo Nieuczciwość Przyszłość, młodzieńczość, energia Chiny Szczęście Niebo, chmury Dynastia Ming, niebo, chmury Szczęście, prosperity Sukces Gracja, szlachetność Narodziny, bogactwo, moc Źródło: Ch. J. Lyons, Essential Design for Web Proffessionals,Prentica Hall PTR, 2001 Radość Śmierć, czystość Śmierć Śmierć, czystość Znaczenie kolorów wg A. Benicewicz-Miazgi Jedną z podstawowych cech koloru jest jego temperatura. Człowiek instynktownie umie ocenić czy zestaw kolorów jest ciepły czy zimny. 29 Kolory ciepłe to kolory kojarzące się z wysoką temperaturą, czyli wszelkie czerwienie, pomarańcze i żółcie, a także niektóre odcienie różu, brązu czy burgundu. Zimne kolory zaczynają się od zieleni, a kończą na niebieskim. Łączą się również z niektórymi odcieniami fioletu. Gdy postawi się obok siebie kolory ciepłe i zimne, to większą uwagę będą na siebie zwracały zdecydowanie kolory ciepłe. Wyróżnia się pięć grup kolorów według temperatury: Jasne ciepłe 30 Są to kolory rzucające się w oczy wzbudzające 29 A. Benicewicz - Miazga, Grafika w biznesie, Helion, Gliwice 2005, s Ibidem. 42

14 skojarzenia z pozytywnymi emocjami. Warto stosować je do elementów witryny, na który chcemy zwrócić uwagę odbiorcy. Stosowanie kolorów tej kategorii optycznie powiększa dany obiekt lub obszar. Zaleca się stosowanie tych temperatur do witryn związanych z dziećmi, samochodami, żywnością, rozrywką, sportem lub marketingiem. Przykładowymi kolorami są różowy, kojarzony ze słodyczą i delikatnością, żółty kolor wiązany z aktywnością, radością i szczęściem, czerwony czyli siła, moc, miłość, pomarańczowy, który często łączony jest z hojnością, żywotnością i energią oraz beżowy kojarzony z melancholią, neutralnością i klasyką. Ciemne ciepłe kolory te wiązane są z tradycją i klasyką. Współgrają z kolorami neutralnymi dając wrażenie elegancji, luksusu i odprężenia. Charakteryzuje je wszechstronność co oznacza, że doskonale nadają się nie tylko do tradycyjnych projektów, ale przy odpowiednich kontrastach mogą wzbudzać wrażenie nowoczesności i oryginalności. Najczęściej stosowane są przy stronach dotyczących bankowości, finansów, rzemiosła i doradztwa. Kolorami znajdującymi się w tej kategorii jest na przykład kolor fuksji związany z jaskrawością i kobiecością, złoty symbolizujący przepych i bogactwo oraz brązowy kojarzony z dojrzałością i niezawodnością. Jasne zimne kolory nadają wrażenie świeżości i estetyki. Łączenie różnych odcieni tej kategorii z bielą jest kojarzone z nowoczesnością i profesjonalizmem. Kolory te są dobrze widziane przez młodsze biznesowe pokolenie. Błękit, zielonkawożółty i lawendowy są kojarzone z czystością i świeżością, dzięki czemu odzwierciedlają tę kategorię. Zaleca się stosowanie tych kolorów w branży kosmetycznej, handlowej, sportowej oraz wszelkimi branżami związanymi ze zdrowiem i medycyną. Ciemne zimne czyli kolory tajemnicze, wzbudzające respekt, związane z dostojeństwem, mądrością i zaufaniem, a nawet z nieśmiertelnością. Do tych kolorów kwalifikują się fioletowy, granatowy, turkusowy, niebieski, zielony i oliwkowy. Kolory te na stronach internetowych będą kojarzone z dobrami luksusowymi, dlatego najlepiej stosować je w projektach dotyczących firm bankowych, doradczych, architektonicznych i rzemieślniczych, chcących ukazać ich duże doświadczenie i tradycję. Neutralne w połączeniu z innymi zbiorem kolorów powodują stonowanie kolorystyki i zmiękczenie końcowego efektu. Kolory sym- 43

15 bolizujące neutralność to czarny, biały, srebrny i szary. Biały jest stosowany jako podkład do wszystkich ciemnych kolorów, a czarny kontrastuje z jasnymi barwami. Neutralne kolory są zawsze dobrze widziane. Można je odnaleźć na witrynach najróżniejszych branż. Gdyby zechciano określić najbardziej wszechstronne w zastosowaniu biznesowym kolory nadające się na strony firmy byłyby to rozmaite szarości i zimne odcienie. Nie należy się jednak ograniczać tylko to tych barw. Firmowe kolory 31 to również czerwienie, które przywodzą na myśl władzę, a przy tym doskonale kontrastują z szarościami i błękitami symbolizującymi neutralność i solidność. Również zastosowanie zieleni i fioletu jest mile widziane. Oto kilka zestawień firmowych barw dających wrażenie solidności, elegancji i opanowania. Rys. 6. Palety firmowe - Kolory przedstawione w systemie barw CMYK Źródło: Timothy Samara, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s. 97. Jednym z najpopularniejszych systemów postrzegania kolorów występujących w przyrodzie i postrzeganych przez ludzkie oko jest System Kolorów naturalnych czyli Natural Color System. Teoria NCS zakłada, że człowiek głównie postrzega 6 kolorów: chromatyczne - żółty (Y), czerwony (R), zielony (G), niebieski (B) i achromatyczne - biały (W), czarny (S). Ten system służy do opisania kolorów za pomocą ich nasycenia. Istnieją trzy modele przedstawiające wizualnie system NCS. Dzięki nim można szybko i łatwo zdefiniować kolor. Przestrzeń kolorów naturalnych jest trójwymiarowa. 32 Tworzy ją czterowierzchołkowa figura (każdy wierzchołek to jeden z podstawo- 31 S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s

16 wych chromatycznych kolorów), opiera się na czarno-białej osi. Jednakże model ten nie jest przejrzysty. Na jego podstawie powstały dwa kolejne modele: Trójkąt Kolorów NCS Ten model powstaje po pionowym przecięciu przestrzeni kolorów NCS. Wycięty trójkąt przedstawia jeden, wybrany z czterech kolorów wierzchołek oraz jego stosunek do osi czyli do koloru czarnego oraz białego. Im bliżej wierzchołka białego (W) znajduje się wybrany odcień danego koloru, tym większa ilość białego koloru będzie się w nim znajdować. Tak samo jak w przypadku wierzchołka czarnego (S), im bardziej jest zbliżony konkretny odcień tym więcej domieszki czarnego jest w nim, a co za tym idzie, kolor jest ciemniejszy. Jeżeli zaś wybrany kolor zbliża się do wierzchołka koloru chromatycznego to tym samym staje się bardziej nasycony, gdyż domieszka bieli i czerni jest coraz mniejsza. Na poniższym obrazku widać przykładowy Trójkąt Kolorów NCS z kolorem zielonym. Koło Kolorów NCS Gdy przetnie się przestrzeń kolorów NCS poziomo, powstaje Koło Kolorów NCS. W tym modelu nie bada się nasycenia, jak w trójkącie kolorów, ale stosunek między czterema kolorami chromatycznymi, czyli między zielenią (G), żółcią (Y), czerwienią (R) i niebieskim (B). Na poniższym obrazku widać rozmieszczenie czterech barw na kole. Pomiędzy kolejnymi kolorami widać dziewięć odcieni, które przedstawiają wartość procentową dwóch kolorów, pomiędzy którymi się znajdują. Koło czyta się zgodzie ze wskazówkami zegara tak, aby nazwy poszczególnych odcieni były logiczne. Dla przykładu - kolor o nazwie Y80R. Ten kolor znajduje się pomiędzy żółcią (Y), a czerwienią (R), o czym informuje nas pierwsza i ostatnia litera w nazwie. Ponieważ pierwsza literą jest Y to oznacza, że zaczyna się tworzenie koloru od 100% żółci. Liczba w nazwie oznacza procentową ilość koloru, która została dodana do utworzenia pożądanego odcienia. Tak, więc w przypadku Y80R widać iż zawiera on 80% koloru czerwonego i tylko 20% koloru żółtego Barwa Dzięki powyżej wymienionym modelom można o wiele łatwiej zrozumieć przestrzeń kolorów NCS i ich stosunek wobec siebie. Gdy 32 B. Bergstörm, Komunikacja wizualna, PWN, Warszawa 2009, s

17 jest się świadomym znaczenia zarówno psychologicznego, jak i kulturowego kolorów, warto jest zapoznać się z terminem barwy. Często jest on stosowany zamiennie z kolorem, jednakże gdyby przyjrzeć się bliżej definicji barwy, można by zauważyć, iż jest ona jedynie jednym z czterech pojęć charakteryzujący cechy danego koloru. Tak więc kolor składa się z barwy, jasności, nasycenia i temperatury 33, o której wspomniano wcześniej. Barwa to monochromatyczny wyciek ze spektrum światła widzianego. 34 Oznacza to, iż barwa jest wynikiem emisji lub pochłaniania światła. O jej różnorodności decyduje długość fali światła. Barwa określi tożsamość koloru. To ona informuje czy to, co widać jest kolorem czerwonym, fioletowym czy niebieskim. Kolejną z cech koloru jest jasność, nazywana również walorem 35. Określa ona miarę rozpiętości tonalnej. Zmiany osiąga się poprzez mieszanie barwy z czernią lub bielą. Jasność mówi czy kolor jest jasny czy ciemny. Nasycenie 36 lub intensywność koloru reguluje natężenie koloru. Oznacza to, że kolor przesuwany jest w stronę szarości lub oddala się od niej. Informuje czy kolor jest blady czy żywy. Istnieją dwa modele odzwierciedlające informacje dotyczące koloru. Jeden jest przeznaczony do pracy na ekranie komputera RGB, drugi zaś tyczy się drukowania CMYK. Zrozumienie różnicy pomiędzy tymi dwoma systemami obrazowania kolorów wyjaśnia, na jakiej zasadzie kolory są drukowane z ekranu komputera. System RGB 37 (ang. red, green, blue) czyli czerwony, zielony i niebieski, przedstawia schemat mieszania barw addytywnych, czyli barw powstałych w wyniku sumowania. Każda z tych barw jest składową białego światła co oznacza, że gdybyśmy nałożyli na siebie kolory zielony, czerwony i niebieski otrzymalibyśmy kolor biały. Nawiązanie do systemu CMYK widać, gdy zacznie się nakładać na siebie poszczególnie kolory z systemu RGB. Gdy nałożymy na siebie kolor zielony 33 S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo PWN SA, Warszawa 2010, s G. Ambrose, P. Harris, Pre-press Poradnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2008, s G. Ambrose, P. Harris, Pre-press Poradnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2008, s J. Beaird, Artystyczne projektowanie stron internetowych, Sitepoint, Warszawa 2007, s G. Ambrose, P. Harris, Pre-press Poradnik dla grafików, Wydawnictwo Naukowe PWN SA-,Warszawa

18 i niebieski powstaje cyjan. Żółty jest wynikiem połączenia zieleni z czerwienią, a magenta czerwieni z błękitem. Rys. 7 System kolorów RGB Źródło: G. Ambrose, P. Harris, Pre-press Poradnik dla grafików Rys. 8. System kolorów CMYK Źródło: G. Ambrose, P. Harris, Pre-press Poradnik dla grafików 47

19 System CMYK (ang. cyan, magenta, yellow, key) przedstawia schemat barw subtraktowych, czyli barw, które powstają w wyniku odejmowania kolejnych składowych. Diagram ten jest odwrotnością systemu RGB. CMYK składa się z cyjanu, magenty, żółtego i czarnego (key). Po połączeniu cyjanu i magenty powstaje niebieski. Czerwony według CMYK powstaje po nałożeniu na siebie magenty i żółtego, zielony po zmieszaniu barwy żółtej z cyjanem. W przeciwieństwie do poprzedniego systemu, po nałożeniu na siebie trzech składowych kolorów powstanie nie biały, a czarny kolor. Oba diagramy nie są jednak idealne ponieważ nie uwzględniają dwóch cech koloru jasności i nasycenia. Gdyby zechciano zmieszać niektóre z podanych barw, mogłoby się okazać, iż zamiast niebieskiego, który powinien powstać w wyniku mieszana magenty i cyjanu, otrzymamy kolor fioletowy. Jest to spowodowane brakiem precyzji w kwestii waloru i intensywności w teorii systemów CMYK i RGB. Oba diagramy jednak są najbliższe idealnego systemu, który tak naprawdę nie istnieje. Warto wspomnieć o systemach dopasowywania kolorów CMYK. Najbardziej rozpoznawalny jest PANTONE Matching System (PMS). 38 Stworzony przez firmę Panetone Inc. słynącej z najbardziej precyzyjnie dopasowanych kolorów tuszu w druku za pomocą czterech kolorów podstawowych. Problem pojawia się dopiero, gdy okazało się, iż kolorów dodatkowych z palet Panetone nie da się odzwierciedlić w systemie CMYK. Kolejnym systemem, o którym warto wspomnieć, jest FOCOL- TONE. Jest to skrót od słów Four Color Tone. Zawiera on 763 próbek kolorów CMYK. Paleta FOCOLTONE Plus oferuje już kolorów możliwych do wydrukowania. Kolory z palety TOYO I DIC56 służą do określenia kolorów dodatkowych. Jednakże ten system jest popularny jedynie w Japonii. American Newspaper Publisher Association również opracował swój własny system. ANPA ogranicza się do 300 kolorów i jest on używany do określania kolorów dodatkowych w druku gazet. Przy tworzeniu projektu dobrze jest zapoznać się z kilkoma systemami dopasowania kolorów, gdyż moją one zupełnie inne możliwości i ograniczenia w mieszaniu kolorów. 38 J. Simmons, Komputerowy Warsztat Projektanta, ABE Dom Wydawniczy, Warszawa 2008, s

20 Omówione zostało stosowania systemu CMYK służącego do druku. System RGB stosowany jest do projektów prezentowanych na monitorze komputera. Nigdy nie wiadomo na jakim sprzęcie będzie oglądana strona internetowa. Zdarza się, iż sygnał wysyłany przez komputer do ekranu może mieć problem z prawidłową interpretacją kolorów z powodu palety jaką posiada komputer. Obecnie urządzenia, dzięki którym można przeglądać strony internetowe posiadają co najmniej 16- bitowe kolory, co oznacza że rozpoznają i wyświetlają one kolorów. W opcji 24- bitowych kolorach rozpoznawały by 16,7 milionów kolorów. Jednakże nie wszystkie ilustracje w formacie PNG lub JPEG byłby w stanie wyświetlić wartość 24- bitowych kolorów. Dla przykładu można wspomnieć o formacie GIF, który jest w stanie wyświetlić jedynie wartości 8-bitowych czyli 256 kolorów. Jest możliwość, aby strona internetowa wyświetlała się tak jak na ekranie projektanta. Żeby osiągną zamierzony efekt należy zastosować kolory web58. Paleta ta została stworzona w okresie, kiedy większość komputerów była w stanie wyświetlić zaledwie 8- bitowe kolory. W owym systemie istnieje 216 kolorów. Będą one tak samo prezentować się na ekranach zarówno zwykłych pecetów jak i maków, które będą podłączone do Internetu. Kolory od zawsze były spornym tematem przy odbiorze witryn internetowych, dlatego przy wyborze należy poświęcić im nieco więcej czasu. Bazując na informacjach z powyższego rozdziału, wiemy już, iż systemów przedstawiających barwy jest wiele i wciąż powstają nowe. Nie wynaleziono jeszcze systemu, który byłby idealny zarówno do przedstawiania kolorów na ekranie, jak i w druku. Dlatego też najważniejszą rzeczą jest poznanie ich jak najwięcej i zrozumieć różnic między nimi Typografia Definicja typografii Równie ważnym elementem, który zadecyduje o sukcesie strony są zastosowane na niej kroje pisma. Typografia 39 jest to nauka o literach 49

21 i cyfrach, o ich kształtach, o rodzajach i układach, w jakich występują. Dzięki niej można uporządkować zawarty w projekcie tekst. Kiedy chce się podkreślić przekaz lub wydźwięk fragmentu tekstu, który piszemy stosujemy fonty, które najbardziej oddają myśl w nim zawartą. Najłatwiej zaobserwować taką sytuację w komiksach. Gdy bohater wypowiada kwestie, będąc przerażonym często można zauważyć użycie liter przywodzących na myśl trzęsienie się. W przypadku podkreślenia wybuchu lub dużego hałasu używany jest font nienaturalnie pogrubiony, który ma za zadanie podkreślić dramatyzm sytuacji. W takich przypadkach mówi się o typografii widocznej lub narratywnej. Litery tak, jak i ludzie, mogą być najróżniejsze. Mogą przywodzić na myśl rozmaite emocje lub skojarzenia. Przeciwieństwem typografii widocznej jest typografia niewidoczna. Charakteryzuje się dobrze zaprojektowanym tekstem bez użycia zmyślnych krojów pisma. Tekst musi czytać się wygodnie i nie narzucać pewnych skojarzeń czytelnikowi, jak w przypadku typografii widocznej Krój Pisma Typografia, więc reguluje i klasyfikuje najróżniejsze kroje pisma 40, które są pełnym zestawem znaków typograficznych. Zawierają one litery tworzące alfabet, cyfry, symbole i znaki interpunkcyjne. W kwestii komputerów mówi się o foncie, który jest krojem pisma o określonej szacie graficznej. Wszystkie litery mają określony styl, co daje wrażenie spójności. Projektowanie liter to żmudny proces, gdyż anatomia liter w każdym kroju musi idealnie pasować, aby tworzyć całość. Poszczególne elementy liter są wciąż opisywane za pomocą tych samych terminów co 2 tysiące lat temu. Poniższy obraz przedstawia wszystkie elementy: Każda litera alfabetu występuje w dwóch wielkościach 41 : w wersji minuskuły, czyli małej litery oraz rzadziej używanej majuskuły, czyli wielkiej litery. W budowie dużej litery występuje więcej przestrzeni w zestawieniu z innymi literami. Jest to konieczne do lepszego odczytu. 39 B. Bergstörm, Komunikacja wizualna, Wydawnictwo Naukowe PWN, Warszawa 2009, s Ibidem., s S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s

22 Rys. 9. Anatomia liter Źródło: S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s. 7 Kolejnym ważnym elementem jest grubość kresek. 42 To ona decyduje o rodzaju kroju. Wyróżnia się cztery grubości liter: cienkie, półgrube, grube i bardzo grube. Kreski w literach mogą mieć zupełnie różniące się od siebie proporcje. Różnica ta nazywana jest kontrastem. Im większa jest dysproporcja pomiędzy stronami liter, tym większy kontrast. Gdy połowy litery są równe, mówi się o jednolitej grubości kresek. Na przykładzie litery M określana jest szerokość litery. Kroje pisma, gdzie litera M wskazuje na minimalną szerokość nazywane są wąskimi. W przypadku nadmiernej rozwlekłości mamy do czynienia z krojem szerokim lub bardzo szerokim. Następnym elementem jest pochylenie litery. Gdy oś przebiegająca przez środek litery jest prostopadła do linii bazowej pisma, nazywamy ją z antykwą 43, czyli znakiem prostym. W przypadku nachylenia litery mówi się o kursywie, która rozpowszechniona była w epoce renesansu. Idealny kąt nachylenia wynosił od 12 do 15 stopni, gdyż naśladował pismo odręczne. Styl pisma zależy od zdefiniowania trzech elementów. Rozróżnia się dwa rodzaje pisma pod względem szeryfów. Pierwszym jest pismo szeryfowe, 44 czyli takie, w którym litery zawierają niewielkie elementy na zakończeniu kresek oraz pismo bezszeryfowe, nie posiadające żadnych zwężeń na 42 Ibidem. 43 Ibidem. 51

23 końcach. Pismo bezszeryfowe sprawia wrażenie bardziej techniczne. Poprzez ich geometryczny kształt, czytanie bardzo długich tekstów staje się monotonne. Najczęściej jest ono używane w nagłówkach lub hasłach reklamowych. Doskonale również sprawdza się w diagramach, tablicach lub tabelach. Stosowanie liter bezszeryfowych w dłuższym tekście stosowane jest rzadko. Wyróżnia się cztery rodzaje pisma bezszeryfowego: groteska, neogroteska oraz pismo humanistyczne i geometryczne. Następna klasyfikacja występuje pod względem ozdobności krojów. Styl pisma jest neutralny, czy też dekoracyjny lub stylizowany. Pismo neutralne widać na co dzień w przeciwieństwie do wszelkich ozdobnych styl, gdyż stosowanie ich jest mocno ograniczone. Rozwój stylizowanych styli najłatwiej zaobserwować w Internecie, jednakże nie jest spotykane w stosowaniu w długich tekstach. Czytelność i przejrzystość liter jest podstawą zarówno w projektowaniu książek, jak i stron internetowych. W połowie lat 90 firma Microsoft 45 wzięła sobie na cel stworzenie krojów pisma nadających się do stosowania w Internecie. Fonty musiały być czytelne na ekranie. Na podstawie już istniejących krojów stworzono obrysy wektorowe i tak powstał pakiet składający się między innymi z takich styli, jak Verdana, Arial czy Georgia. Również firma Adobe wypuściła pakiet dwunastu fontów pod nazwą Adobe WebType, ukierunkowanych do stosowania w Internecie. Jednakże w odróżnieniu do fontów Microsoftu, pakiet Adobe był płatny. To spowodowało, iż fonty Adobe nie był tak popularny jak konkurencji. W dzisiejszych czasach każdy użytkownik komputera zna takie fonty, jak Arial, Arial Black, Comic Sans MS, Coutier New, Georgia, Impact, Times New Roman, Trebuchet Ms i Verana. Listę tych dziewięciu fontów określa się mianem bezpiecznych, 46 gdyż są obsługiwane przez dwa główne systemy operacyjne. Jednakże przy tworzeniu witryn internetowych nie należy się ograniczać do wyboru fontów z bezpiecznej listy. Z klimatem firm 47 kojarzone głównie są fonty bezszeryfowe, gdyż nie posiadają one zbędnych ozdobień. Najczęściej wybierane fonty przez firmy charakteryzują się nikłym kontrastem i średnią szerokością znaków. Uważa się, iż te cechy liter dają efekt prostoty i neutralno- 44 B. Bergstörm, Komunikacja wizualna, Wydawnictwo Naukowe PWN, Warszawa 2009, s A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW Użyteczność w praktyce, Helion, Gliwice 2008, s J. Beaird, Artystyczne projektowanie stron internetowych, Sitepoint, Warszawa 2007, s S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s

24 ści, które są niezwykle ważne w komunikacji między kompetentnymi przedsiębiorstwami. Istnieje zasada, która mówi o tym, iż przy tworzeniu witryny projektant powinien się ograniczyć do trzech rodzajów fontu. Tak więc, nie należy się ograniczać tylko do fontów bezszeryfowych. Odpowiednio zastosowane fonty szeryfowe przywiodą na myśl tradycję i historię, przez co firma może sprawiać wrażenie doświadczonej. Fonty firmowe doskonale nadają się na strony biznesowe o klimacie finansowym, giełdowym. Dla podkreślenia innego wydźwięku strony warto jest owe fonty mieszać z kolejnymi klimatami. Font 1. Interviewer Regular Źródło: S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa Kolejnym jest styl techno, czyli fonty pochodzące z początku XXI wieku. Są one ekstremalne i pełne energii. Inspiracją do tworzenia do takich fontów była oczywiście cyfrowa muzyka o tej samej nazwie. Kroje z kategorii techno muszą oddawać wszystko co oddaje ten rodzaj muzyki. Muszą, więc nie tylko wypełniać podstawowe funkcje dobrze zaprojektowanego fontu jak czytelność, ale i oddawać wysoki poziom energii i nowoczesności. Pod względem projektowania fonty te są bardzo skrajne. Zawierają duże kontrasty i nieprzewidywalne zwężenia kresek. Często nawiązuje się przy projektowaniu takiego fontu do bitmapy lub pikseli. Styl techno nadaje się świetnie do zastosowania na stronach dotyczących muzyki, sportów ekstremalnych lub eventów. Font 2. Monitor Źródło: S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa

25 Gdy witryna internetowa ma za zadanie przedstawić również miejską ideę życia, dobrze jest przejrzeć fonty podchodzące pod styl miasto. 48 W tej kategorii następuje duża różnorodność co do klasyfikacji krojów. Można w niej spotkać zarówno antykwy z bardzo mocnymi szeryfami, jak i bardzo wąskie litery bezszeryfowe. Popularne również są kroje ozdobne kojarzone z graffiti w stylu hip-hop u. Litery powinny mieć jak najmniej wewnętrznego światła, aby najlepiej oddać ideę przeludnionego miasta. Niektóre kroje nawiązują do ekranów informacyjnych lub elektronicznych bilbordów reklamowych. Ten styl nadaje się do stron o tematyce architektonicznej, bankowej, a także subkulturowej i wszystkim, co może być kojarzone z ulicznym stylem życia. Font 3. F2F El Dee Cons Źródło: S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa Grupa elegancja 49 odznacza się w nadaniu literom lekkości i subtelności, przywodzące na myśl dobra luksusowe. W przepadku krojów bezszeryfowych za fonty eleganckie uważa się takie o bardzo cienkich kreskach, a także pisanki, czyli kroje naśladujące pismo odręczne. Litery muszą być filigranowe. Mile widziany jest duży kontrast i światło w budowie liter. Ten styl jest doskonały do wszystkich stron, które mają przywodzić na myśl wytworność i klasykę. Najczęściej jest spotykany na witrynach poświęconych branży bieliźnianej lub jubilerskiej. Font 4. P22 Michelangelo Roman Źródło: S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s Ibid, s

26 Kolejny stylem jest styl pod tytułem przemysł. 50 Fonty te mają kojarzyć się z wytwarzaniem, kołami zębatymi i starymi fabrykami. Litery powinny mieć bardzo geometryczną strukturę i bardzo ujednolicone proporcje. Niektóre kroje pokrywają się również ze stylem sztuczności. Styl przemysłowy również charakteryzuje się dodatkowymi i specyficznymi detalami. Częściej w owej kategorii spotyka się szerokie lub cienkie, grube style bezszeryfowe, ale i również kroje o szeryfach belkowych i hybrydowych zaliczają się to fontów przemysłowych. Fonty dekoracyjne w tym stylu często posiadają elementy nawiązujące do przekładni, śrub i nakrętek. Czasem nawiązują stylizacją do starych, już nie do końca wyraźnych napisów farbą na ścianach fabryk. Najlepiej fonty prezentowałyby się na stronach dotyczących produkcji taśmowej lub sprzętu budowlanego. Font 5. Player Piano Źródło: Styl świat fantazji nawiązuje do wszystkiego, co jest kojarzone z magią, mistycyzmem, fikcją i nadprzyrodzonymi mocami. Pismo to jako jedyne z wymienionych, bazuje na pismach historycznych, jak manuskrypty lub tajemnicze zwoje, często z okresu średniowieczna. Głównym elementem tych krojów są przerysowane detale, więc śmiało można ten styl określić jako głównie dekoracyjny. Do tej kategorii również kwalifikują się fonty hybrydowe w tym wypadku łączące w sobie pisankę i kroje bezszeryfowe, które nasuwają na myśl runy. Jednakże również bardziej klasyczne szeryfowe i bezszeryfowe kroje mogą kwalifikować się do tej kategorii, jeśli mają odpowiednio udziwnioną strukturę. Swego czasu jednymi z najpopularniejszych krojów w tym stylu były fonty stylizowane na takich filmach, jak Władcy Pierścieni lub Gwiezdnych Wojnach. Fonty ze świata fantasy można spotkać na stronach wydawnictw lub stronach o tematyce spirytystycznej lub gier fantasy. 50 S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s

27 Font 6. Linotype Besque Źródło: Jeśli na witrynie ma się znaleźć krój pisma symbolizujący nowoczesność i rozwój, to na pewno powinien się znajdować w kategorii postęp. 51 Fonty z tej kategorii mają na myśl przywodzić pewną ewolucje w liternictwie i świeżą, nowoczesną ideę. Owe progresywne kroje dzieli się na dwie kategorie. Pierwszy to font hybrydowy bezszeryfowo-szeryfowy, które godzą oba style pod względem wewnętrznego światła i kresek. W drugiej kategorii znajdują się fonty uproszczone do takiego stopnia, iż trudno je zaklasyfikować do jednego stylu. Często w tej kategorii dodawane są nieco abstrakcyjne elementy dekoracyjne. Głównym przesłaniem stylu postępu jest wyjście poza sztywne zasady. Dobrze prezentują się na stronach dotyczące technologii i wszelkich udoskonaleń. Font7. F2F Metamorfossi Źródło: Najbardziej skontrastowaną kategorią pod względem budowy litery jest kategoria o nazwie ekstremalność. Fonty w owej kategorii mają bardzo skrajne proporcje. Rzadko kiedy litery występują w standardowych kształtach. Charakterystyczna jest dla nich nadmierna szerokość lub tak duża wąskość liter, iż światło wewnętrzne przypomina cienką kreskę. Ekstremalność liter przejawia się również w braku połączeń między kreskami lub w dużym przechyleniu liter. Nawet nadmierne detale graficzne w piśmie gotyckim są oznaką ekstremalności. 51 Ibidem. 56

28 Mottem tej kategorii jest intensywność i dynamika. W projektowaniu witryny nie należy nadmiernie używać tej kategorii. Najlepiej się sprawdzają w tematyce sportowej, muzycznej oraz artystycznej. Font 8. Linotype Submerge Two Regular Źródło: Obok pieniędzy i siły, najważniejszą rzeczą w biznesie jest władza. Stąd nazwa kolejnej kategorii. Kroje znajdujące się w kategorii władzy powinny przywodzić na myśl trwałość i stabilność. Na zasadzie skojarzeń można zdefiniować, iż litera najlepiej pasująca do tych skojarzeń powinna mieć grube kreski, być średniej szerokości i zapewne w większości przypadków bezszeryfowa. Dodatkowo powinna mieć więcej ostrych przyjść, niż łuków w budowie, co przywiodłoby na myśl odrobinę stanowczości, a nawet agresji. Do końcowego efektu należało by używać tylko majuskuł, aby podkreślić wytrzymałość liter. Ten styl jest używany często na stronach z branży alkoholowej, ekskluzywnych klubów lub firm doradczych. Font 9.Sanos Black Źródło: Ostatnią kategorią, która zostanie omówiona w tym rozdziale jest wielokulturowość. 52 W tej kategorii ideę można wyrażać w dwóch kierunkach. Jeden jest całkowicie uniwersalny, a drugi polega na przedstawieniu liter w formie konglomeratu, czyli na zasadzie połączenia różnych cech pism formalnych. Pierwsza kategoria jest stosowana 52 S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s

29 w pismach na konferencjach narodowych, dlatego znajdują się w niej jedynie fonty bezszeryfowe o bardzo zrównoważonej budowie, nie posiadające żadnych ozdobień. Ważne jest aby nie przywodziły na myśl żadnych skojarzeń historycznych, społecznych lub religijnych. Druga grupa jest zupełnie inna. Zawarte w niej kroje pisma nawiązują w budowie do rozmaitych kultur i alfabetów. W taki sposób powstają fonty stylizowane na przykład na japońską katakanę lub na litery arabskie. Rzadko spotyka się takie liternictwo na stronach internetowych. Font 10. ITC Simran Źródło: Na podstawie powyższych informacji można zadecydować jaką typografię można zastosować, aby wywołać odpowiednie skojarzenia u odbiorcy. Jest wiadome, jakie litery wywołują szacunek i nowoczesność, a jakie przywodzą na myśl zabawę lub elegancję. Trzeba pamiętać, że bardzo przydatne jest łączenie powyższych kategorii na witrynie internetowej. Trzeba jednak uważać, aby strona nie sprawiała wrażenia niepoważnej i chaotycznej. Dlatego właśnie należy ograniczyć się do trzech różnych fontów na stronie, które powinny ze sobą współgrać Relacje inwestorskie Relacje inwestorskie koncentrują się na relacji firmy z inwestorami, wśród których szczególną rolę odgrywają akcjonariusze spółki. Do grona inwestorów zalicza się inwestorów indywidualnych, czyli osoby fizyczne inwestujące w akcje emitowane przez spółki jak również instytucjonalnych czyli firmy inwestujące w spółki. Do grona inwestorów instytucjonalnych zalicza się najczęściej fundusze zarówno Private Equity i Ventures Capital. Ważną grupą są również potencjalni Inwestorzy, na których jest zwrócona również, a może przede wszystkim, uwaga spółki. Do tej 58

30 grupy emitent w zakresie relacji inwestorskich kieruje najwięcej działań jak: road show, prezentacje wyników okresowych, prezentacje głównych nurtów działalności oraz informacje o umowach znaczących, zaś pośrednio informuje również środowisko inwestorów poprzez briefingi dla mediów i analityków rynku. Ponadto relacje inwestorskie to wszelkie działania mające na celu prowadzenie właściwej komunikacji z rynkiem Zasady projektowania i proces powstawania stron internetowych na GPW Opis wymogów strony internetowej na GPW Rynek giełdowy w Polsce z roku na rok rozwija się coraz szybciej i tym samym staje się coraz bardziej atrakcyjny dla nowych inwestorów nie tylko z rodzinnych terenów, ale i również zza granicy. Ponieważ żyjemy w dobie Internetu ważne jest, aby wszystkie spółki notowane na Giełda Papierów Wartościowych były świadome, iż nie odłącznymi elementami w swobodnym dialogu między spółką, a inwestorem są witryny internetowe spółek giełdowych. Giełda Papierów Wartościowych w Warszawie powołała do życia stronę 53 mającą na celu rozpowszechniania Dobrych Praktyk, które są źródłem zasad określających normy kształtowania relacji przedsiębiorstw z otoczeniem. Strona ta ma również zachęcać do zgłaszania sugestii i zadawania pytań przez przedsiębiorców dotyczących zawartości ich stron. Ważne dla GPW jest promowanie zasad ładu korporacyjnego 54, które poprawiają jakość komunikacji spółek z inwestorami oraz wzmacniają ochronę praw autorskich. Dobre Praktyki składają się z czterech części. Pierwsza część składa się ze wskazówek dotyczących relacji wewnętrznych i zewnętrznych spółek z ich otoczeniem. Pozostałe części są bardziej zmechanizowane w zakresie przestrzegania zasad ładu korporacyjnego. Zasady te są Załącznik do Uchwały Nr 17/1249/2010 Rady Giełdy z dnia 19 maja 2010 r. Dobre Praktyki Spółek Notowa-nych na GPW. 59

31 co roku aktualizowane z pomocą spółek giełdowych. Niektóre punkty z czasem zoster uchylone, ponieważ wciąż powstają nowe i lepsze rozwiązania. Poniżej zostaną opisane punkty dotyczące witryn internetowych z niektórych części dobrych praktyk zalecanych przez Giełdę Papierów Wartościowych w Warszawie: Rekomendacje dotyczące dobrych praktyk spółek giełdowych 55 - ta część opisuje jak spółka powinna prowadzić politykę informacyjną na stronie spółki, a także prezentuje zalecany wzór witryny spółki giełdowej, który zostanie dokładnie przeanalizowany w kolejnym podrozdziale. Zaleca również korzystanie z tradycyjnych metod jak i również użycie nowoczesnych technologii w zapewnieniu bezpiecznego i szybkiego dostępu do informacji. Dobre praktyki realizowane przez zarządy spółek giełdowych 56 - w drugiej części wypisane są informacje, które powinny znaleźć się na stronie spółki, co sugeruje powstanie różnych kategorii. Informuje również o potrzebie ciągłego aktualizowania wydarzeń dziejących się w spółce. Na stronie powinny się znaleźć podkategorie zawierające: a) podstawowe dokumenty korporacyjne, w szczególności statut i regulaminy organów spółki, b) życiorysy zawodowe członków organów spółki, c) raporty bieżące i okresowe, d) (uchylony) e) informacje dotyczące walnych zgromadzeń wraz z ich programem i informacjami o osobach uczestniczących. f) roczne sprawozdania z działalności rady nadzorczej, z uwzględnieniem pracy jej komitetów, wraz z przekazaną przez radę nadzorczą oceną pracy rady nadzorczej oraz systemu kontroli wewnętrznej i systemu zarządzania ryzykiem istotnym dla spółki, g) pytania akcjonariuszy dotyczące spraw objętych porządkiem obrad w obrębie walnych zgromadzeń wraz z odpowiedziami na zadawane pytania, h) informację na temat powodów zmian terminów lub odwołania zgromadzenia wraz z uzasadnieniem, i) informację o przerwie w obradach walnego zgromadzenia i o powodach jej zarządzenia, 55 Ibidem. 56 Ibidem. 60

32 j) informacje na temat zdarzeń korporacyjnych, takich jak wypłata dywidendy, oraz innych zdarzeń skutkujących nabyciem lub ograniczeniem praw po stronie akcjonariusza, z uwzględnieniem terminów oraz zasad przeprowadzania tych operacji. k) powzięte przez zarząd, na podstawie oświadczenia członka rady nadzorczej, informacje o powiązaniach członka rady nadzorczej z akcjonariuszem dysponującym akcjami reprezentującymi nie mniej niż 5% ogólnej liczby głosów na walnym zgromadzeniu spółki, l) w przypadku wprowadzenia w spółce programu motywacyjnego opartego na akcjach lub podobnych instrumentach - informację na temat prognozowanych kosztów jakie poniesie spółka w związku z jego wprowadzeniem, m) oświadczenie o stosowaniu zasad ładu korporacyjnego, zamieszczone w ostatnim opublikowanym raporcie rocznym, a także raport, o którym mowa w 29 ust. 5 Regulaminu Giełdy - o ile został opublikowany, n) informację o treści obowiązującej w spółce reguły dotyczącej zmieniania podmiotu uprawnionego do badania sprawozdań finansowych lub informację o braku takiej reguły. Zamieszczona jest również informacja o konieczności posiadania strony w wersji angielskiej od Na podstawie powyższych informacji spółka jest zobligowania do zaprojektowania strony posiadające kategorie nazwie nawiązującej do podpunktów wymienionych w załącznik do Uchwały Nr 17/1249/ Specyfika stron internetowych W pierwszej części został zaprezentowany zalecany wzór witryny spółki giełdowej zamieszczonym na stronie: Znajdują się na nim niezbędne informacje do zaprojektowania odpowiedniej strony do komunikacji między spółką, a potencjalnymi inwestorami. Od roku obowiązkowym elementem jest angielska wersja strony często wyróżniana na stronie za pomocą hiperłącza lub brytyjskiej flagi. 57 Załącznik do Uchwały Nr 17/1249/2010 Rady Giełdy z dnia 19 maja 2010 r. Dobre Praktyki Spółek Notowanych na GPW 61

33 Kolejnym niezbędnym elementem, o którym należy pamiętać jest umieszczenie w widocznym miejscu wyszukiwarki, która ogranicza się do wyszukiwania haseł z treści strony. Na wzorze jest prezentowane menu główne kaskadowe oraz menu dodatkowe boczne lewostronne z wyszczególnionymi najpopularniejszymi kategoriami na stronie. Menu kaskadowe zajmuje mało miejsca i jest uważane ze najbardziej estetyczne, dlatego tak często jest spotykane na stronach firm. Warto zwrócić uwagę na nazwy kategorii przedstawione na wzorze ponieważ przedstawiają tematy cieszące się największym zainteresowaniem wśród inwestorów, którzy będą chcieli poznać bliżej daną spółkę. Jednakże nie są to często spotykane nazwy kategorii. Elementem, który od razu przykuwa uwagę na stronie jest napis logo, który sugeruje miejsce umieszczenia po lewej stronie na bannerze głównym znaku firmowego spółki. Na samym dole strony (stopka) widać kilka hiperłączy, które należy wyróżnić na stronie głównej jak i każdej podstronie bez potrzeby zagłębiania się w menu kaskadowe. Są to: mapa serwisu (często również nazywaną mapą strony), ochrona prywatność (określa warunki korzystania z danej witryny), kontakt (czyli adres fili, w której mieści się spółka oraz numery telefonów i adresy mailowe do poszczególnych działów), newsletter (możliwość otrzymywania na własny adres mailowy wszelkich aktualności jakie może oferować dana strona oraz RSS (czyli dział, w którym umieszcza się pliki do odczytu w systemie Really Simple Syndication) zastępowany również powszechnie rozpoznawalnym znaczkiem: Rys. 8 Symbol RSS Źródło: 62