30 31

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 rozpoznawal-ność nadawcy przez adresatów komunikacji marketingowej to podsta-wowy 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 mar-ketingowa pozostanie tylko połowicznym sukcesem jeśli nie zostanie trwale skojarzona z marką, która za nią stoi.

Podstawowym kierunkiem budowy spójnej identyfikacji wizual-nej jest stworzenie i utrzymanie jednoznacznego wizerunku firmy w komunikacji ze „światem zewnętrznym”. Jednym z najskuteczniej-szych środków umożliwiających jego realizację jest stworzenie i wdro-żenie profesjonalnej księgi identyfikacji wizualnej.

Artykuł pochodzi z publikacji: Produkcja przekazów multimedialnych, (Red.) M. Chrząścik,

Wyższa Szkoła Promocji, Warszawa 2013

30 31

2.1. Charakterystyka strony internetowej

W dzisiejszych czasach strona WWW (ang. World Wide Web)1 jest najpopularniejszym sposobem na szybkie przekazywanie infor-macji użytkownikom Internetu. Aby móc skorzystać z zasobów sieci konieczna jest przeglądarka internetowa. To dzięki niej można bez pro-blemów przeglądać najróżniejsze witryny oraz zdjęcia, animacje, tek-sty i dźwięki w niej zawarte. Wszystko zaczęło się od zaprojektowania sieci World-Wide-Web, nazywanej również W3.

2.1.1. 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ą. 2

2.2. Aspekt techniczny strony internetowej

Na podstawie tych informacji można stwierdzić iż strona inter-netowa od zawsze była „elektroniczną wersją tradycyjnej publikacji”.3 Z czasem jednak oprócz funkcji informatywnej witryny stały się bar-dziej 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 zastano-wić 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. 553 2 Agnieszka ‘Kaila’ Richte http://www.kaila.biz/design/htm/article/historia.htm 3 G. Ambrose, P. Harris, Layout zasady/ kompozycja/ zastosowanie, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s.148.

32 33

na swobodne poruszanie się na stronie w poszukiwaniu konkretnych informacji.

2.2.1. 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ęk-szą 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ą pikseli5, 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 strony7: 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 arty-stycznych. 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.154.5 G.. Ambrose, P. Harris, Pre-press Poradnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2008, s.114 .6 G.. Ambrose, P. Harris, Layout, PWN, Warszawa 2008 s. 31.7 A. Boguska -Torbicz, M. Kaspeski, Projektowanie Stron WWW – Użyteczność w praktyce, He-lion, Gliwice 2008, s. 23.

32 33

nych pasków nawigacji. Ten typ układu najlepiej sprawdza się w budo-waniu 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 zasta-nowienie się nad organizacją strony8, nad wyborem układu oraz roz-mieszczeniem 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 „Stro-na 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żytkow-nika.

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 poziome12 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.111 9 Ibid., s. 112.10 A. Boguska -Torbicz, M. Kaspeski, Projektowanie Stron WWW – Użyteczność w praktyce, Helion, Gliwice 2008, s. 27.11 Ibidem, s. 28.12 Ibidem, s. 36.

34 35

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 miej-scu na stronie w danym momencie znajduje się użytkownik.

Boczne14 menu może mieć bardzo długą listę linków z wieloma poziomami nawigacyjnymi. Długość nazw kategorii również nie sta-nowi 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 rozmiesz-czenie 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 kolumnowe16, 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óźniej-szym etapie.

Występują również siatki wierszy17, które bardzo pomagają w szybkim umieszczeniu dodatkowych obiektów na stronie bez zbęd-nych 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, He-lion, Gliwice 2008, s. 36. 14 Ibidem, s. 37 15 Bhaskaran Lakshmi, Czym jest projektowanie publikacji, ABE Dom wydawniczy, Warszawa 2006, s. 64. 16 Simmons Jason, Komputerowy Warsztat Projektanta, ABE Dom Wydawniczy, Warszawa 2008, s. 186. 17 Ibidem, s.186.

34 35

Kolejnym elementem siatki są linie pomocnicze18, 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ę pra-cować. 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 ewentual-nym 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 spotyka-nych na stronach internetowych:

Układ blokowy centralny19 - 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

18 Ibidem, s.187. 19 A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW – Użyteczność w praktyce, Helion, Gliwice 2008, s. 23. 20 Ibidem, s. 24.

Źródło: A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW – Użyteczność w praktyce, s. 24

Układ dwukolumnowy asymetryczny z menu prawostronnym20 – blok treści znajduje się po lewej stronie.

36 37

Rys. 2. Układ dwukolumnowy asymetryczny z menu prawostron-nym

Układ dwukolumnowy asymetryczny z menu lewostronnym21 – blok treści znajduje się po prawej stronie

Rys. 3. Układ dwukolumnowy asymetryczny z menu lewostron-nym

Źródło: A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW – Użyteczność w praktyce, s. 24

Źródło: A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW – Użyteczność w prak-tyce, Helion, Gliwice 2008, s. 25

Układ dwukolumnowy symetryczny22 – menu najczęściej pozio-me 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. 23. 22 Ibidem, s. 25.

36 37

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.

38 39

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 rozdziel-czoś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 zagospodarowa-nie danej przestrzeni i dopasowanie się do konkretnej rozdzielczości. Dzięki tej zasadzie można wraz z niewielką pomocą kalkulatora szyb-ko wyliczyć wszystkie dane potrzebne do proporcjonalnego wyglądu strony.

2.3. Kolor

Wszystkie informacje na temat układu strony można potraktować jak szkic i kontur rysunku, którym jest layout. Jedyne, czego mu bra-kuje do końcowego efektu, jest kolor. Od najmłodszych lat człowiek przypisuje kolorom konkretne emocje lub dowiaduje się o ich kulturo-wym 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.165. 24 M, Healey, Czym jest branding, ABE Dom wydawniczy, Warszawa 2008 s. 92.

38 39

do witryny internetowej nie jest prosty, gdyż trzeba wziąć pod uwagę psychologię kolorów, ich znaczenie kulturowe oraz, w przypadku biz-nesowej 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.

2.3.1.Definicja Koloru

Człowiek dysponuje pięcioma zmysłami, dzięki którym postrzega świat. Korzysta z percepcji smakowej, węchowej, dotykowej, słucho-wej i wzrokowej.

Dzięki tej ostatniej człowiek otrzymuje aż 96% informacji o świe-cie, 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 informacji25:

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łącze-

niu 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ło-czułych receptorów na powierzchni siatkówki, zaś na ekranie monitora o rozdzielczości 1024 x 768 znajduje się tylko 786 tys. punktów29. 25 Ibidem.

40 41

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.

2.3.2. Znaczenie kolorów wg A. Boguskiej i M. Kasperskiego

Znaczenie koloru ma podłoże psychofizjologiczne i kulturowe26 co oznacza, że kolor nabiera znaczenia dopiero w momencie, gdy zaczy-na 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 1930-1948 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, fio-let 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 kon-kretny kolor. Wykazuje to oddziaływanie barw na ludzki system wege-tatywny. W przypadku koloru czerwonego, powszechnie wiadomo, że jest on silnie pobudzający.

Udowodniono, iż nawet niedługie przebywanie w pokoju o czer-wonych ś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ęże-nia koloru, obszaru, na którym się znajduje, wywołuje on pobudzenie

26 A. Zausznica, Nauka o barwie, Wydawnictwo Naukowe PWN, Warszawa 1959, s.126.27 A. Mąkczyńska - Frydryszek, M. Jaskólska-Klaus, T. Maruszewski, Psychofizjologia widzenia, PWSSP, Poznań, 1991.

40 41

w różnych stopniach. Poniższa tabela przedstawia najpopularniejsze skojarzenia z poszczególnymi kolorami.

Tabela 1 – Znaczenie kolorów

Kolor Znaczenie

C zerwonySiła, władza, pasja niebezpieczeństwo, błąd, stop, ostrzeżenie, agresja, ogień, gorący, luksusowy, namiętność, bogactwo, śmia-łość.

Różowy Kobiecość, kolor słodki i cukierkowy, kiczowatość i popkultu-ra.

Pomarańczowy Ciepło, jesień, energia, żywotność, świeżość, nowoczesność, ostrożność.

Żółty Zadowolenie, ostrożność, słoneczność. pogoda ducha, opty-mizm, radość, dostatek, zawiść.

Brązowy Zabrudzenie, zaufanie, przyjaźń, pewność, jesień, klasyka.

ZielonyZazdrość, sielska atmosfera, wiosna, natura, wzrost, żyzność, nowość, nadzieja, przyjaźń, niedoświadczenie, sukces, uzdro-wienie, ochrona środowiska

Niebieski Męskość, woda, smutek, niebo, bezpieczeństwo, spokój ducha, wzniosłość uczuć.

Fioletowy Tajemnica, kolor królewski, mądrość, duchowe poznanie, wta-jemniczenie.

Czarny Zło, noc, upiory, śmierć, żałoba, powaga, autorytet, strach, siła.

Szary, srebrnyCzystość, rozsądek, niewinność, szlachetność, stare czasy (czar-nobiały film); w zależności od jasności: radość, pochmurny, mrok.

Biały Niewinność, czysty, zimny, nieskazitelny, niewinny, chłodny, zima.

Źródło: A. Zausznica, Nauka o barwie (1959), Thomas A. Powell, Web Design Complete Referen-ce (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 pojmo-wania 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. 126.

42 43

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 kra-jach 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

Półświatek Przemijanie Neutralność

Egipt Śmierć Cnota, walka, prawda

Żyzność, tężyzna Szczęście, prosperity

Radość

Indie Życie, twórczość - Pomysłowość, żyzność

Sukces Śmierć, czystość

Japonia Gniew, niebezpieczeństwo

Nieuczciwość Przyszłość, młodzieńczość,

energia

Gracja, szlachetność

Śmierć

Chiny Szczęście Niebo, chmury Dynastia Ming, niebo, chmury

Narodziny, bogactwo,

moc

Śmierć, czystość

Źródło: Ch. J. Lyons, Essential Design for Web Proffessionals,Prentica Hall PTR, 2001

2.3.3. Znaczenie kolorów wg A. Benicewicz-Miazgi

Jedną z podstawowych cech koloru jest jego temperatura. Czło-wiek 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 odcie-nie 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łe30 – Są to kolory rzucające się w oczy wzbudzające 29 A. Benicewicz - Miazga, Grafika w biznesie, Helion, Gliwice 2005, s. 90 30 Ibidem.

42 43

skojarzenia z pozytywnymi emocjami. Warto stosować je do elemen-tó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. Przy-kł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 hoj-noś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 kate-gorii 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 biz-nesowe 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, handlo-wej, 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 inter-netowych 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-

44 45

bolizujące neutralność to czarny, biały, srebrny i szary. Biały jest stoso-wany jako podkład do wszystkich ciemnych kolorów, a czarny kontra-stuje 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 zastoso-waniu biznesowym kolory nadające się na strony firmy byłyby to roz-maite szarości i zimne odcienie. Nie należy się jednak ograniczać tylko to tych barw. Firmowe kolory31 to również czerwienie, które przywodzą na myśl władzę, a przy tym doskonale kontrastują z szarościami i błęki-tami 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. 97.

44 45

wych chromatycznych kolorów), opiera się na czarno-białej osi. Jed-nakż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 prze-cię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 kolo-rami chromatycznymi, czyli między zielenią (G), żółcią (Y), czerwie-nią (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ówka-mi 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żąda-nego odcienia. Tak, więc w przypadku Y80R widać iż zawiera on 80% koloru czerwonego i tylko 20% koloru żółtego.

2.3.4. 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. 203

46 47

jest się świadomym znaczenia zarówno psychologicznego, jak i kul-turowego 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 tempera-tury33, o której wspomniano wcześniej.

Barwa to monochromatyczny wyciek ze spektrum światła widzia-nego.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ż walorem35. 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.

Nasycenie36 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 przeznaczo-ny do pracy na ekranie komputera – RGB, drugi zaś tyczy się drukowa-nia – CMYK. Zrozumienie różnicy pomiędzy tymi dwoma systemami obrazowania kolorów wyjaśnia, na jakiej zasadzie kolory są drukowane z ekranu komputera.

System RGB37 (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łado-wą 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 poszcze-gó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.12.34 G. Ambrose, P. Harris, Pre-press Poradnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2008, s. 74 35 G. Ambrose, P. Harris, Pre-press Poradnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2008, s. 75.36 J. Beaird, Artystyczne projektowanie stron internetowych, Sitepoint, Warszawa 2007, s. 74.37 G . Ambrose, P. Harris, Pre-press Poradnik dla grafików, Wydawnictwo Naukowe PWN SA-,Warszawa 2008.

46 47

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

48 49

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 kolo-ró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 niebieskie-go, 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ż 20 000 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 dopasowa-nia 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. 96.

48 49

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 65 536 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ła-du 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 pre-zentować 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ż naj-ważniejszą rzeczą jest poznanie ich jak najwięcej i zrozumieć różnic między nimi.

2.4. Typografia

2.4.1. Definicja typografii

Równie ważnym elementem, który zadecyduje o sukcesie strony są zastosowane na niej kroje pisma. Typografia39 jest to nauka o literach

50 51

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 tek-stu, 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 przy-padku 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 narra-tywnej. Litery tak, jak i ludzie, mogą być najróżniejsze. Mogą przywo-dzić na myśl rozmaite emocje lub skojarzenia.

Przeciwieństwem typografii widocznej jest typografia niewi-doczna. 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.

2.4.2. Krój Pisma

Typografia, więc reguluje i klasyfikuje najróżniejsze kroje pisma40, które są pełnym zestawem znaków typograficznych. Zawierają one lite-ry 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że-nie 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ściach41: 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. 98.40 Ibidem., s. 101.41 S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s. 7.

50 51

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 rozpo-wszechniona 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.

52 53

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 bez-szeryfowego: groteska, neogroteska oraz pismo humanistyczne i geo-metryczne. 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 projek-towaniu książek, jak i stron internetowych. W połowie lat 90 firma Microsoft45 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 popu-larny jak konkurencji. W dzisiejszych czasach każdy użytkownik kom-putera 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 firm47 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. 107. 45 A. Boguska - Torbicz, M. Kaspeski, Projektowanie Stron WWW – Użyteczność w praktyce, Helion, Gliwice 2008, s. 71. 46 J. Beaird, Artystyczne projektowanie stron internetowych, Sitepoint, Warszawa 2007, s. 109. 47 S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s. 91.

52 53

ści, które są niezwykle ważne w komunikacji między kompetentnymi przedsiębiorstwami. Istnieje zasada, która mówi o tym, iż przy two-rzeniu witryny projektant powinien się ograniczyć do trzech rodzajów fontu. Tak więc, nie należy się ograniczać tylko do fontów bezszeryfo-wych. Odpowiednio zastosowane fonty szeryfowe przywiodą na myśl tradycję i historię, przez co firma może sprawiać wrażenie doświad-czonej. Fonty firmowe doskonale nadają się na strony biznesowe o kli-macie 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 2010.

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ęże-nia kresek. Często nawiązuje się przy projektowaniu takiego fontu do bitmapy lub pikseli.

Styl techno nadaje się świetnie do zastosowania na stronach doty-czą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 2010.

54 55

Gdy witryna internetowa ma za zadanie przedstawić również miej-ską ideę życia, dobrze jest przejrzeć fonty podchodzące pod styl „mia-sto”.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 powin-ny mieć jak najmniej wewnętrznego światła, aby najlepiej oddać ideę przeludnionego miasta. Niektóre kroje nawiązują do ekranów informa-cyjnych 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 2010.

Grupa „elegancja”49 odznacza się w nadaniu literom lekkości i sub-telnoś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. Lite-ry 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 2010.

48 S. Timothy, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010, s. 102. 49 Ibid, s.108.

54 55

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 ujed-nolicone proporcje. Niektóre kroje pokrywają się również ze stylem sztuczności. Styl przemysłowy również charakteryzuje się dodatko-wymi 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ło-wych. 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: www.chank.com

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 manu-skrypty 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ż kwali-fikują 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 sty-lizowane na takich filmach, jak Władcy Pierścieni lub Gwiezdnych Woj-nach. 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. 126.

56 57

Font 6. Linotype Besque

Źródło: www.linotype.com

Jeśli na witrynie ma się znaleźć krój pisma symbolizujący nowo-czesność 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 bezsze-ryfowo-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 sztyw-ne zasady. Dobrze prezentują się na stronach dotyczące technologii i wszelkich udoskonaleń.

Font7. F2F Metamorfossi

Źródło: www.linotype.com

Najbardziej skontrastowaną kategorią pod względem budowy litery jest kategoria o nazwie „ekstremalność”. Fonty w owej kate-gorii mają bardzo skrajne proporcje. Rzadko kiedy litery występują w standardowych kształtach. Charakterystyczna jest dla nich nadmier-na szerokość lub tak duża wąskość liter, iż światło wewnętrzne przypo-mina cienką kreskę. Ekstremalność liter przejawia się również w braku połączeń między kreskami lub w dużym przechyleniu liter. Nawet nad-mierne detale graficzne w piśmie gotyckim są oznaką ekstremalności.

51 Ibidem.

56 57

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: www.linotype.com

Obok pieniędzy i siły, najważniejszą rzeczą w biznesie jest wła-dza. 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 sko-jarzeń 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: www.t26.com

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 przed-stawieniu 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. 152.

58 59

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 arab-skie. Rzadko spotyka się takie liternictwo na stronach internetowych.

Font 10. ITC Simran

Źródło: www.linotype.com

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 nowocze-sność, 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ć.

2.5. Relacje inwestorskie

Relacje inwestorskie koncentrują się na relacji firmy z inwestora-mi, 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 59

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 brie-fingi 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.

2.6. Zasady projektowania i proces powstawania stron internetowych na GPW

2.6.1. 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ścio-wych w Warszawie powołała do życia stronę www.corp-gov.gpw.pl53 mającą na celu rozpowszechniania Dobrych Praktyk, które są źródłem zasad określających normy kształtowania relacji przedsiębiorstw z oto-czeniem.

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 korporacyjnego54, 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 zmechanizowa-ne w zakresie przestrzegania zasad ładu korporacyjnego. Zasady te są

53 www.corp-gov.gpw.pl.54 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.

60 61

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 interne-towych 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łdowych55 - 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 podroz-dziale. Zaleca również korzystanie z tradycyjnych metod jak i również użycie nowoczesnych technologii w zapewnieniu bezpiecznego i szyb-kiego dostępu do informacji.

Dobre praktyki realizowane przez zarządy spółek giełdowych56 - 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 progra-

mem i informacjami o osobach uczestniczących. f) roczne sprawozdania z działalności rady nadzorczej, z uwzględ-

nieniem pracy jej komitetów, wraz z przekazaną przez radę nadzorczą oceną pracy rady nadzorczej oraz systemu kontroli wewnętrznej i sys-temu 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 zada-wane 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 61

j) informacje na temat zdarzeń korporacyjnych, takich jak wypłata dywidendy, oraz innych zdarzeń skutkujących nabyciem lub ogranicze-niem 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 motywacyj-nego 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ń finanso-wych lub informację o braku takiej reguły.

Zamieszczona jest również informacja o konieczności posiadania strony w wersji angielskiej od 01.01.2009.57 Na podstawie powyższych informacji spółka jest zobligowania do zaprojektowania strony posia-dające kategorie nazwie nawiązującej do podpunktów wymienionych w załącznik do Uchwały Nr 17/1249/2010.

2.6.2. Specyfika stron internetowych

W pierwszej części został zaprezentowany zalecany wzór witryny spółki giełdowej zamieszczonym na stronie: http://naszmodel.gpw.pl/90. Znajdują się na nim niezbędne informacje do zaprojektowania odpowiedniej strony do komunikacji między spółką, a potencjalnymi inwestorami.

Od 01.01.200958 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

62 63

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 najpopu-larniejszymi 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 potrze-by 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ól-nych 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 rozpo-znawalnym znaczkiem:

Rys. 8 Symbol RSS

Źródło: http://pl.wikipedia.org/

62 63

Warto zwrócić uwagę na kolorystykę stosowaną w modelu witry-ny spółki giełdowej. Kolory nie są intensywne, tylko przygaszone.

Trzeba pamiętać, iż model przedstawiony przez Giełdę Papierów Wartościowych jest jedynie ukazaniem najbezpieczniejszych i najbar-dziej popularnych rozwiązać. Ważne jest, aby strona się wyróżniała oryginalnością, ale tym samym mieściła się w powyższych zasadach.

2.6.3. Kryteria różnicowania zastosowania aspektów wizualnych w stronach internetowych spółek notowa-nych na GPW

Konkurs Złota Strona Emitenta, organizowany przez Stowarzy-szenie Emitentów Giełdowych polegał na dokładnym przeanalizowa-niu witryn internetowych spółek giełdowych. Powszechnie wiadomo, iż strona internetowa firmy jest jej wizytówką i to na jej podstawie budowane jest pierwsze wrażenie potencjalnych partnerów. Często wygląd i funkcjonalność strony decyduje o inwestycji w daną spółkę. Ważne jest, aby witryny spółek giełdowych zawierały aktualne infor-macje, były przejrzyste, a co za tym idzie, powinny być dobrze zapro-jektowane.

Konkurs59 miał za zadanie uświadomić właścicielom firm jak ważne jest tworzenie witryn według różnych zasad i jak wielką rolę ma Internet w komunikacji spółek z otoczeniem. W konkursie brały udział wszystkie spółki, a ich strony były oceniane w trzech etapach.

Spółki zostały poinformowane o kryteriach oceniania miesiąc przed rozpoczęciem konkursu, aby mogły wprowadzić modyfikacje. Konkurs Złota Strona Emitenta jest organizowany od 2007 roku. Jego głównym zadaniem jest zwrócenie uwagi emitentów na wprowadzane aktualizacje i modyfikacje wymaganiach co do komunikacji z inwesto-rem za pomocą strony.

Przez 4 edycje konkursu przeanalizowano łącznie ponad 1700 stron spółek notowanych na giełdzie. Każda edycja ZSE zawierała takie same kategorie60:

• spółki giełdowe należące do indeksów WIG20 i mWIG40, • spółki należące do sWIG80,

58 http://naszmodel.gpw.pl59 Raport ZSE 2011, str. 3.60 Raport ZSE 2011, str. 6.

64 65

• spółki notowane na GPW nie należące do w/w indeksów, • spółki notowane na rynku alternatywnym New Connect. W IV edycji z roku 2010 analizowanych zostało aż 52061 stron

spółek emitentów notowanych na giełdzie. Liczba spółek wzrosła o 95 nowych kandydatów od poprzedniej edycji.

Kolejną aktualizacją w najnowszej edycji był nowy podział spół-ek. Sprecyzowano, iż cztery powyższe kategorie zostaną ograniczone do spółek polskich, a wszystkie spółki zagraniczne notowane na GPW w Warszawie (w tym na rynku NewConnect) zostaną przydzielone do nowo stworzonej piątej kategorii. Do pierwszego etapu w IV edycji konkursu przystąpiły wszystkie spółki, które w dniu 1 lipca 2010 roku były notowane na Giełdzie Papierów Wartościowych w Warszawie, w tym na rynku NewConnect. Pierwszy etap miał za zadanie wyłonić 10 najlepiej ocenianych spółek z każdej kategorii.

W przypadku podobnej punktacji u większej liczby spółek zakwa-lifikować się miały spółki, które najszybciej odpowiedzą na zadane mailem pytanie dotyczące spółki.

Punkty62 zostały przydzielone na podstawie poniższego formula-rza składającego się z 8 kryteriów:

1. Jak szybko spółka odpowiada merytorycznie na zapytanie dotyczące relacji inwestorskich przekazane za pośrednictwem strony internetowej? (18 pkt.)

2. Czy na stronie są zamieszczone: (10 pkt.) a) podstawowe dokumenty korporacyjne, a w szczególności statut

i regulaminy organów spółki (1 pkt.) b) życiorysy zawodowe członków organów spółki (1 pkt.) c) raporty bieżące (1 pkt.) d) raporty okresowe (1 pkt.) e) roczne sprawozdania z działalności rady nadzorczej (1 pkt.) f) informacja o strukturze akcjonariatu oraz dane akcjonariusza

dominującego lub akcjonariuszy znaczących (1 pkt.) g) kalendarium wydarzeń korporacyjnych (1 pkt.) h) podstawowe wskaźniki finansowe spółki (1 pkt.) i) informacja nt sposobu zawiadamiania przy wykorzystaniu

środków komunikacji elektronicznej o udzieleniu pełnomocnictwa w postaci elektronicznej – Art. 4121 § 4 ksh (1 pkt.)

61 Raport ZSE 2011, str. 5.62 Raport ZSE 2011, str. 7.

64 65

j) transmisje video z wydarzeń korporacyjnych lub link do stron internetowych, które je zamieszczają (1 pkt.)

3. Czy na stronie jest działająca wyszukiwarka treści zawartych na stronie? (5 pkt.)

4. Czy na stronie zamieszczono odnośniki do stron innych instytu-cji rynku kapitałowego (KNF, GPW, SEG)? (3 pkt.)

5. Czy spółka w prowadzeniu relacji inwestorskich wykorzystuje nowoczesne sposoby komunikacji z inwestorami: (2 pkt.)

a) czat, blog korporacyjny (1 pkt.) b) blogi, fora eksperckie (Goldenline, Bankier, Money, Stoc-

kWatch, itp.) lub uczestnictwo w portalach społecznościowych (Face-book, Blip, Tweeter, itp.) (1 pkt.)

6. Czy strona dostępna jest w języku angielskim? (5 pkt.) 7. Efektywność pozycjonowania strony. (5 pkt.) 8. Dostępność stron WWW wg systemu MONIT24. (2 pkt.) W nawiasach zostały przedstawione wartości możliwe do uzyska-

nia za odpowiedź twierdzącą w każdym pytaniu. Maksymalna wartość punktów do uzyskania w pierwszym etapie wynosiła 50 punktów. Po wyłonieniu pięćdziesięciu spółek w pierwszym etapie można było przystąpić do oceny w etapie drugim. Tym razem to jury złożone z 3263 specjalistów musiało ocenić i wybrać po 3 najlepiej oceniane spółki z każdej kategorii.

W każdym kryterium oceny znajdowało się po czterech członków z jury, którzy przydzielali punkty od 0 do 10. Spółki były oceniane w 8 dziedzinach64:

1. Jasność komunikatu, zawartość informacyjna 2. Informacje dla inwestorów odnośnie nowych zasad WZA 3. Innowacyjność komunikacji 4. Intuicyjność, ergonomia, zgodność z regułami nawigacji 5. Poprawność zastosowanych technologii 6. Estetyka strony 7. Opinia inwestorów indywidualnych 8. Opinia inwestorów instytucjonalnych Trzeci etap konkursu, do którego zakwalifikowanych zostało 15

spółek, polegał na wyborze przez członków Kapituły konkursu po jed-nym laureacie z każdej kategorii. W trzecim etapie strony były oceniane

63 Raport ZSE 2011, str. 6.64 Raport ZSE 2011, str. 8.

66 67

przez fachowców w takich dziedzinie jak relacje inwestorskie, grafika, dziennikarstwo, komunikacja marketingowa oraz ekonomia. Terminy poszczególnych etapów, jak i zasady oceniania były spółki były jawne i umieszczone na stronie konkursu www.zse.seg.org.pl

Zakończenie

Aspekt wizualny strony internetowej jest drugim co do ważności, tuż po zawartości merytorycznej, elementem każdej strony interneto-wej. Jest on niezwykle istotną częścią komunikacji między inwestorem, a spółką za pomocą Internetu. Często to właśnie pierwsze wrażenie decyduje o tym czy inwestor zdecyduje się zagłębić w strukturę strony czy też postanowi ją opuścić. Witryna spółki, a w szczególności serwis Relacji inwestorskich może być powodem wyrobienia szybkiej opinii nie tylko o stronie, ale i o całej firmie. Dlatego też tak kluczową spra-wą jest odpowiednie i czytelne zaprojektowanie strony internetowej. To właśnie wykorzystanie odpowiedniego układu strony, kolorystyki i kroju pisma często decyduje o prawidłowym przekazie dotyczącym działalności firmy i jej podstawowych założeniach.

Komunikacja z inwestorami za pomocą stron internetowych wciąż jest w fazie rozwoju, dlatego też spółki wciąż mają problem w stworze-niu witryny czytelnej i odpowiedniej dla użytkowników.

Spółki przy projektowaniu stron najczęściej stosują kolory pod-stawowe systemu RGB, a w szczególności kolor niebieski, gdyż jest uważana za podstawowy kolor biznesowy. Przy wybraniu kolorystyki w odcieniach błękitu należy pamiętać o dodaniu elementu kontrastu, dzięki któremu spółka nie straci indywidualności w Internecie i stanie się rozpoznawalna dla potencjalnych inwestorów. Każdy kolor ma swoje znaczenie w danej kulturze, dlatego też przy projektowani spółka powinna przeprowadzić analizę jaki kolor będzie najodpowiedniejszy do danej branży i rynku na którym firma działa. Dzięki kolorom neu-tralnym nawet intensywny kolor przewodni może być stonowany, co nada witrynie oryginalny wydźwięk.

66 67

Bibliografia

1. Ambrose Gavin, Harris Paul, Pre-press Poradnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2008.

2. Ambrose Gavin, Harris Paul, Layout zasady/ kompozycja/ zasto-sowanie, Wydawnictwo Naukowe PWN SA, Warszawa 2010.

3. Ambrose Gavin, Harris Paul, Pre-press, Wydawnictwo Naukowe PWN SA, Warszawa 2010.

4. Beaird Jason, Artystyczne projektowanie stron internetowych, Sitepoint, Warszawa 2007.

5. Benicewicz-Miazga Anna, Grafika w biznesie, Helion, Gliwice 2005.

6. Bergstörm Bo, Komunikacja wizualna, Wydawnictwo Naukowe PWN, Warszawa 2009.

7. Bhaskaran Lakshmi, Czym jest projektowanie publikacji, ABE Dom wydawniczy, Warszawa 2006.

8. Boguska-Torbicz Anna, Marek Kaspeski, Projektowanie Stron WWW – Użyteczność w praktyce, Helion, Gliwice 2008.

9. Cohen J., Serwisy WWW. Projektowanie, tworzeni i zarządzanie, Helion, Gliwice 2004.

10. Niedziółka Dariusz A., Relacje inwestorskie, Wydawnictwo Naukowe PWN, 2008.

11. Siarto Jeff, Watrall Ethan, Head First Web Design, Helion, Gliwi-ce 2010.

12. Simmons Jason, Komputerowy Warsztat Projektanta, ABE Dom Wydawniczy, Warszawa 2008.

13. Timothy Samara, Kroje i kolory pisma Przewodnik dla grafików, Wydawnictwo Naukowe PWN SA, Warszawa 2010.

14. M. Jaślan, Zaistnieć w Sieci, Businessman, 04/98