Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych [II ed.] [PDF]

Zitiervorschau

---

Spis treści Przedmowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Dla kogo jest ta książka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Co tu znajdziesz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Strona internetowa książki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Errata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Podziękowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Konwencje typograficzne użyte w książce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Przykładowy kod. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Wskazówki, ciekawostki i ostrzeżenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Rozdział 1

Układ i kompozycja . . . . . . . . . . . . . . . . . 17

Proces projektowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Poznawanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Poszukiwanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Implementacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Wyznaczanie dobrego stylu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21 Anatomia stron internetowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Teoria siatki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Reguła trójpodziału. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 960 Grid System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Równowaga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31 Równowaga symetryczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31 Równowaga asymetryczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Jedność . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Bliskość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Powtórzenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Wyróżnienie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Rozmieszczenie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Ciągłość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Izolacja. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Kontrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Proporcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Podstawowe układy stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 Układ lewokolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Układ prawokolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Układ trójkolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

8

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

W poszukiwaniu natchnienia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Teczka z pomysłami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Nowoczesne trendy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Styl beznawigacyjny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ekspansywna stopka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Minimalizm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Zmiana rozmiaru: układy stałe, płynne i reaktywne . . . . . . . . . . . . . . . . . . . . . . Stała szerokość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Szerokość płynna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Alternatywa: układ reaktywny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rozdzielczość ekranu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Praktyczne wykorzystanie: Southern Savers . . . . . . . . . . . . . . . . . . . . . . . . . . . . Początek. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdział 2

44 45 46 46 47 48 48 49 49 50 52 54 55

Kolor . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Psychologia koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Kolorystyczne skojarzenia — symbolika koloru . . . . . . . . . . . . . . . . . . . . . . . 60 Temperatura barwowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Wartość chromatyczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Saturacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Podstawy teorii koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Czerwony, żółty i niebieski czy CMYK? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Schematy kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71 Monochromatyczny schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Analogiczny schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Dopełnieniowy schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Inne schematy kolorów — dopełnieniowy rozdzielony, triada i tetrada . . . . . 83 Inne możliwości . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Tworzenie palety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Notacja szesnastkowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Narzędzia i zasoby . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Color Scheme Designer 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Adobe Kuler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 COLOURlovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Color Stream — aplikacja na iPhone’a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Pictaculous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91 Colour Contrast Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Praktyczne wykorzystanie: kolor oszczędności. . . . . . . . . . . . . . . . . . . . . . . . . . 93

Spis treści

Rozdział 3

Tekstura . . . . . . . . . . . . . . . . . . . . . . . . . 97

Punkt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Linia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Figury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101 Zaokrąglone wierzchołki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103 Obrót . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Figury a kompozycja. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106 Objętość i głębia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108 Perspektywa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108 Proporcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109 Światło i cień . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Deseń. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 Tworzenie faktury. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118 Podstarzały, znoszony, nostalgiczny styl . . . . . . . . . . . . . . . . . . . . . . . . . . .118 Czysto — ziarnisto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 Własnoręcznie zrobiony album . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123 Kapryśny styl kreskówkowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125 Tekstura minimalistyczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127 Wyznaczanie nowych trendów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128 Praktyczne wykorzystanie: wycinanie i oszczędzanie . . . . . . . . . . . . . . . . . . . . .129

Rozdział 4

Typografia. . . . . . . . . . . . . . . . . . . . . . . 133

Font a sieć . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135 Zastępowanie fontu obrazem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .137 Deklaracja @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139 Samodzielne hostowanie fontów. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139 Hosting fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140 sIFR i Cufón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141 Anatomia liter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142 Odstępy w tekście . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144 Odstępy w poziomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144 Odstępy w pionie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146 Wyrównanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146 Kroje pisma — różnice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148 Kroje szeryfowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149 Kroje bezszeryfowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Kroje odręczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 Krój stały . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154

9

10

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Kroje dekoratywne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157 Dingbaty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159 W poszukiwaniu fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160 Darmowe galerie fontów. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160 Komercyjne galerie fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160 Artyści indywidualni i wydawnictwa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160 Wybieranie właściwego fontu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161 Wielkość fontu i wysokość linii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163 Interpunkcja i znaki specjalne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164 Praktyczne wykorzystanie: dobrym drukiem . . . . . . . . . . . . . . . . . . . . . . . . . . .166

Rozdział 5

Obraz . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Czego szukać? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170 Potencjalne źródła obrazów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173 Brać czy robić? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173 Fotografia stockowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .174 Pomoc profesjonalisty. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .180 Skąd nie czerpać. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182 Google grabież . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182 Hotlinkowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183 Clipart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184 Twórcze wycinanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185 Transformacje obrazu w Photoshopie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189 Format plików i rozdzielczość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194 Pomysłowe stosowanie obrazów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195 Ulepszanie obrazu obrazem. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196 Podkręcanie obrazów za pomocą CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199 Praktyczne wykorzystanie: dobrym drukiem . . . . . . . . . . . . . . . . . . . . . . . . . . .202 Naprzód, w drogę! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205

Skorowidz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Przedmowa Gdy ze swoją żoną wprowadziliśmy się do nowego domu, jedną z pierwszych rzeczy, którą zajęliśmy się po przeprowadzce, było unowocześnienie łazienki. Za każdym razem, gdy do niej wchodziliśmy, mieliśmy wrażenie, jakbyśmy cofnęli się w czasie o dekadę — te okropne, krzykliwe tapety w kwiatki, zestawione z pozłacanymi uchwytami umywalki, okropnymi lustrami i złym oświetleniem. Zdejmowanie tapety to ciężka praca, która staje się tym trudniejsza, im więcej jej warstw trzeba zedrzeć. To właśnie musieliśmy zrobić w łazience. Najwyraźniej gust poprzedniego właściciela zmieniał się co kilka lat, lecz zamiast usunąć poprzednią tapetę i przykleić nową, nakładał kolejne warstwy paskudnego na ohydne. Ach, radość posiadania własnych czterech kątów! Gdybym miał wskazać naukę, którą wyniosłem z remontu domu, byłaby to świadomość, jak zbliżone do siebie są projektowanie wnętrz i projektowanie dobrych witryn internetowych. W dobrym projekcie priorytetem jest właściwe oddanie współzależności między jego elementami, tak by między nimi zapanowała idealna równowaga. Bez względu na to, czy mówimy o gruntownej renowacji strony internetowej, czy łazienki, naklejenie kolejnej warstwy tapety czy zmiana koloru tła nie są rozwiązaniem samym w sobie — a jedynie jego częścią. Oprócz zdarcia tapety i gruntownego malowania musieliśmy również zmienić uchwyty, usunąć pozłacane drzwi od prysznica, wymienić lustra oraz oświetlenie, odmalować szafki, zainstalować nowe kontakty i przełączniki oraz zdrapać sufit akustyczny. Gdybyśmy tylko usunęli tandetną tapetę i zostawili całą resztę, w dalszym ciągu mielibyśmy do czynienia z łazienką z innej epoki. Podobnie jest w projektowaniu witryn: nawet jeśli ograniczasz się do drobnych modyfikacji, w końcu przychodzi czas na to, żeby „zedrzeć” całość i zacząć wszystko od nowa. Moda się zmienia, lecz dobry projekt jest wieczny. Podporządkowanie się nowym trendom projektowania może zapewnić Ci rozgłos, lecz jak długo będzie on trwał? Z tego, co wiem, znaczniki typu marquee i blink nigdy nie weszły do profesjonalnego standardu designerskiego — lecz liczniki popularności i newsów w języku JavaScript oraz przysadziste krawędzie tabel zagościły na stronach głównych wielu czołowych witryn w przeszłości. W świecie web designu były one niczym kołtuniaste dywany, połyskliwy sufit akustyczny bądź sklejka. Możesz udać się w podróż do przeszłości za pomocą witryny Internet Wayback Machine1 i przekonać się na własne oczy, jak wyglądały witryny największych gigantów w późnych latach 90. XX wieku, jeszcze przed wybuchem fenomenu tzw. dot-comów. Spróbuj odnaleźć przykłady dobrych i złych projektów. Wśród wielu przestarzałych, wręcz żałosnych witryn znajdziesz i takie, które wciąż wyglądają wcale imponująco. Najprawdopodobniej ich projekty nie powstały w oparciu o krzykliwe filtry Photoshopa lub, modne wówczas, metody implementacji obrazu. Czytając tę książkę, pamiętaj — dobry projekt wykracza poza ramy narzucone mu przez technologię. Ostateczne poprawki często robią największe wrażenie. Słyszałem ostatnio opinię, w myśl której ludziom w głębi duszy podobają się „niemarketingowe” projekty. Według tego poglądu podobno ufamy bardziej niewyszlifowanym, amatorsko wyglądającym witrynom. Myślę jednak, że osąd ten jest nietrafny. Obojętnie, jaki rodzaj witryny 1

http://wayback.archive.org/web/

12

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

tworzysz, Twój projekt winien być dokładnie przemyślany i funkcjonalny. Moja żona i ja, remontując naszą łazienkę, nie zmieniliśmy nic w jej funkcjonalności. Pracowaliśmy jedynie nad detalami i to właśnie one zadecydowały o naszym samopoczuciu. Niektórzy ludzie mogliby korzystać z łazienki w takiej formie, w jakiej była, ale wątpię, czy znalazłby się choć jeden człowiek, który powiedziałby, że odpowiada mu ona w 100%. Analogicznie, jeśli tworzysz stronę, powinieneś poświęcić czas, żeby poważnie przemyśleć jej projekt. W żadnym wypadku Twoja kompozycja nie powinna sprawiać wrażenia niedokończonej i chaotycznej. Jeśli zależy Ci, by prezentowała się ona ostro, niemarketingowo i niekorporacyjnie, stwórz ją w ten sposób — nie ma jednak powodu, by tkwić w nieświadomości zasad dobrego projektowania czy czuć się przez nie onieśmielonym. W tej książce stawiam sobie prosty cel: pragnę przedstawić to wszystko, co wiem o projektowaniu na potrzeby sieci, w sposób łatwy do zrozumienia — tak, aby każdy mógł zastosować zawartą tu wiedzę w praktyce. Czemu? Dlatego że sądzę, iż podstawy projektowania witryn nie powinny stanowić dla nikogo tajemnicy. Wszyscy pracujemy w sieci, w której praktyka zakrywania ohydnego paskudnym jest na porządku dziennym od momentu jej powstania. Czas z tym skończyć i podjąć śmiałe kroki ku lepszemu designowi.

Dla kogo jest ta książka Jeśli dobór kolorów przyprawia Cię o zawrót głowy i sprawia, że patrzysz w puste okno przeglądarki, bezowocnie czekając na przypływ inspiracji, lub jeśli gubisz się, próbując wybrać odpowiedni krój pisma, ta książka jest właśnie dla Ciebie. Podchodzę do prezentowania tradycyjnej teorii projektowania graficznego metodycznie, w kontekście współczesnego zapotrzebowania na rynku usług webdeweloperskich. Choć treść książki jest przeznaczona głównie dla programistów i deweloperów, zawarłem w niej elementarz projektowania oraz odpowiednie przykłady, z których każdy Czytelnik może z powodzeniem skorzystać.

Co tu znajdziesz Książka ta składa się z pięciu rozdziałów. Możesz je czytać w kolejności od pierwszego do ostatniego, by zyskać dokładny obraz jej tematyki, bądź przeskoczyć do interesujących Cię sekcji, jeśli wszystkim, czego potrzebujesz, jest szybka powtórka. Rozdział 1. „Układ i kompozycja” Dobra technika projektowania opiera się na właściwym zrozumieniu tego, jakie zależności przestrzenne istnieją pomiędzy oddzielnymi elementami kompozycji. Rozdział poświęcony układowi witryny rozpoczynam od analizy dostępnych komponentów ją tworzących. Po ich odpowiednim zgłębieniu omówię narzędzia i przykłady, które pozwolą Ci położyć solidne fundamenty pod Twoje projekty. Na koniec zapoznamy się ze studium przypadku projektowania przez webdesignerską firmę Squared Eye rzeczywistej witryny firmy Southern Savers, którą będziemy śledzić w kolejnych rozdziałach.

Przedmowa

Rozdział 2. „Kolor” Kolor jest chyba najbardziej tajemniczym aspektem projektowania. Rozdział 2. rzuca nań trochę światła i pozwala nam zapoznać się bliżej z estetyką i naukowymi kwestiami teorii barw. Uzbrojony w proste zasady i porady dotyczące harmonijnego wyboru kombinacji barw, przekonasz się, że każdy może wybrać zestawienie kolorów, które podkreśli przekaz dowolnej witryny. Pod koniec rozdziału przyjrzymy się, w jaki sposób, przy użyciu ścianek klimatów, powstała paleta barw nowej witryny Southern Savers. Rozdział 3. „Tekstura” Tekstura jest często niedocenianą częścią kompozycji witryny, choć to właśnie ona może wyróżnić Twój projekt wśród innych. Gdy pojmiesz, na jakiej zasadzie działają poszczególne elementy tekstury, będziesz w stanie skorzystać z punktów, linii, figur geometrycznych, by wesprzeć przekaz swojej kompozycji na kilku poziomach naraz. Następnie przekonamy się na własne oczy, jak subtelna faktura pomogła stworzyć tożsamość i charakter naszej przykładowej witryny. Rozdział 4. „Typografia” Typografia jest niezaprzeczalnie jednym z najważniejszych aspektów projektowania. Krój pisma znajdziesz praktycznie w każdym projekcie graficznym, wobec czego zrozumienie zasad jego działania winno być priorytetem każdego projektanta. W rozdziale tym zgłębimy ten złożony temat, poznamy podstawowe elementy budujące każdą literę i przybliżymy różne rodzaje krojów. Później wejdziemy za kulisy i przyjrzymy się typograficznym decyzjom, które pomogły nadać witrynie Southern Savers jej charakter. Rozdział 5. „Obraz” Każda profesjonalnie zaprojektowana witryna winna zawierać starannie dobrane fotografie i ilustracje. W ostatnim rozdziale przedyskutujemy, jak należy efektywnie dobierać obrazy na naszą stronę i z jakich źródeł zdjęć możemy legalnie korzystać. Naturalnie odnalezienie tej jednej, odpowiedniej grafiki to tylko początek. Nauczymy się również podstaw edycji naszych obrazów, nim przejdziemy do ostatniego etapu naszego studium przypadku: włączania do strony ilustracji i fotografii wspierających markę klienta i przekaz jego oferty.

Strona internetowa książki Na stronach wydawnictwa Helion znajduje się witryna poświęcona niniejszej książce. Możesz tu wyrazić opinię na temat przeczytanej książki oraz zapoznać się z opiniami innych. Znajdziesz tutaj także aktualizowaną na bieżąco erratę do książki. Adres strony: www.helion.pl/ksiazki/niezaw.htm.

Errata Nie ma książki doskonałej. Zakładamy, że uważny Czytelnik może znaleźć w książce jeden lub dwa drobne błędy. Sugerowane poprawki do książki możesz przesłać nam, korzystając z adresu www.helion.pl/ksiazki/niezaw.htm.

13

14

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Podziękowania Książkę tę dedykuję wszystkim utalentowanym web designerom i web deweloperom, którzy wciąż przesuwają granice niemożliwego. Wasze osiągnięcia cały czas trzymają mnie w napięciu i sprawiają, że sam staję się coraz lepszym projektantem. Dziękuję również właścicielom witryny Southern Savers — Jenny i Jamesowi oraz zespołowi projektantów z firmy Squared Eye (Matthew, Emily, Andrew, Kevinowi i Jamin) za zapewnienie mi najwyższej klasy studium przypadku. Tak trzymać! Dziękuję też Lisie Lang, która sprawiła, że ta książka powstała z prędkością światła. Do wszystkich osób z wydawnictwa SitePoint, które przyczyniły się do tego, że moja publikacja ujrzała światło dzienne: przyjmijcie wyrazy najgłębszej wdzięczności. Jestem dumny, że mogę być częścią wydawnictwa, które udziela tak wielkiego wsparcia twórcom i web deweloperom. Na koniec pragnę podziękować mojej żonie Amy, która była dla mnie źródłem natchnienia, gdy pisałem pierwsze i drugie wydanie tej książki. Gdy jesteś w pobliżu, czuję, że jestem najszczęśliwszym facetem na świecie, i dlatego też książkę tę dedykuję w pierwszej kolejności Tobie.

Konwencje typograficzne użyte w książce W trakcie czytania tej książki z pewnością zauważysz, że wykorzystałem w niej pewne konwencje układu i typografii, by podkreślić znaczenie różnego rodzaju informacji. Zwróć uwagę na następujące elementy:

Przykładowy kod Elementy kodu w tej książce są napisane krojem maszynowym, jak w poniższym przykładzie Doskonały letni dzień

To był wspaniały dzień na przechadzkę po parku. Ptaszki śpiewały i ani śladu dzieci — wszystkie wróciły do szkoły.

Niektóre fragmenty kodu powinny być zapisane w jednej linii, ale ze względu na rozmiar strony w książce musieliśmy je „zawinąć”. Takie miejsca oznaczamy symbolem ߩ, który wskazuje na przerwę powstałą w wyniku formatowania tekstu i który powinien być zignorowany: URL.open(”http://www.sitepoint.com/blogs/2007/05/28/user-style-she ߩets-come-of-age/”);

Przedmowa

Wskazówki, ciekawostki i ostrzeżenia Hej, Ty! Wskazówki pokażą Ci, co należy zrobić.

Ehm, przepraszam… W ciekawostkach znajdziesz interesujące informacje, które dotyczą określonego tematu, choć nie są niezbędne do jego zrozumienia. Myśl o nich jak o dodatkowej treści.

Uważaj! Ostrzeżenie zwróci Twoją uwagę na wszelkie pułapki i trudności, na które możesz się natknąć na swojej drodze.

15

16

Rozdział

1

Układ i kompozycja Dla wielu web deweloperów, w tym dla mnie samego, najtrudniejszym etapem procesu projektowania witryny jest sam początek. Wyobraź sobie siebie siedzącego przy biurku jedynie z kubkiem kawy i wizytówką potencjalnego klienta, który potrzebuje prostej korporacyjnej strony internetowej. Zwykle wizytówka mówi wiele o charakterze przedsiębiorstwa i dlatego może ona stanowić wspaniałe źródło pomysłów. Niestety, nie jest tak w przypadku wizytówki firmy Smith’s Services, widocznej na rysunku 1.1. Tylko czerń i biel, suchy tekst zero charakteru. Ohyda! Kompletny brak wyrazu. No więc jak zacząć? Przede wszystkim potrzebujesz planu… i musisz koniecznie skontaktować się z panem Smithem. Jego uwagi, informacje o tym, co jego firma właściwie robi, oraz o treści, która powinna zostać zamieszczona na stronie — to wszystko pomoże Ci w zaprojektowaniu dobrego układu oraz kompozycji.

Rysunek 1.1. Pozbawiona wyrazu wizytówka klienta

18

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Każdy — niezależnie od poziomu talentu artystycznego — może stworzyć układ, który będzie dobrze wyglądał i wspaniale się prezentował. Tak naprawdę wszystkim, czego potrzeba, jest odrobina doświadczenia i wiedzy praktycznej o elementarnych zasadach tworzenia kompozycji. Zacznijmy więc od podstaw. Nim się spostrzeżesz, opanujesz to wszystko, co jest niezbędne do zbudowania witryny marzeń.

Proces projektowania Gdybyś miał zaprojektować most, z pewnością przyszłoby Ci do głowy wiele pytań. Czy ma on biec ponad rowem na podwórzu Twego domu, czy nad jeziorem Pontchartrain? Czy wolno Ci użyć betonu i stali, czy całość ma być skonstruowana z wykałaczek? Ja sam nigdy bym nie wziął wizytówki od przypadkowej osoby spotkanej w barze, która chce, żebym zbudował jej most Golden Gate, gdybym nie dowiedział się wcześniej, kim jest i w jakim celu go potrzebuje. Z drugiej strony, gdybym został wynajęty do wykonania rzeźby ogrodowej, czułbym się o wiele lepiej, mogąc stworzyć unikatowe, wiekopomne dzieło. Proces projektowania witryny internetowej mieści się gdzieś pomiędzy budowaniem mostów i rzeźbiarstwem. Owszem, prawdą jest, że strona internetowa powinna być estetyczna i miła dla oka, ale to potrzeby klienta są najważniejsze. Potrzeby te mogą być wzniosłe i wyszukane lub proste, tak aby umożliwić po prostu publikację informacji. Jeśli jednak nie weźmiemy ich poważnie pod uwagę, całość projektu może się nam zawalić na głowę, miażdżąc przy tym naszą reputację. Techniczne aspekty tworzenia strony, jej hosting i utrzymanie są, z perspektywy samego projektu, mniej istotne. Jednakże proces kształtowania projektu graficznego jest zawsze ważny. Składa się on z trzech kluczowych etapów: poznawania, poszukiwania i implementacji.

Projekt graficzny strony Wykonanie próbnego projektu graficznego strony jest praktyką przejętą ze świata poligrafii. Projekt taki powstaje przed wysłaniem ostatecznej jego wersji do druku. Przekładając tę praktykę na projektowanie witryn WWW, projektem graficznym strony nazywamy układ stworzony, zanim zakodujemy go w języku HTML.

Poznawanie Część „poznawcza” w planowaniu wyglądu witryny polega na spotkaniu się z klientami, żeby dowiedzieć się, czym się zajmują. Może Ci się to wydać trochę mało związane z projektowaniem, lecz zdobywanie informacji o tym, kim są Twoi klienci i jak prowadzą swoją działalność, jest kluczowe dla stworzenia dzieła efektywnego i „szytego na miarę”. Przed umówieniem się na pierwsze spotkanie ze swoimi klientami warto najpierw dowiedzieć się o nich jak najwięcej. Jeżeli poprosili Cię o stworzenie strony, najprawdopodobniej nie mieli jej wcześniej. Mimo to sprawdź, czy nie znajdziesz ich gdzieś w sieci. Jeśli nie jesteś w stanie odnaleźć żadnych informacji o nich samych, postaraj się zapoznać z dziedziną przemysłu lub usług, z którą są związani. Jeśli tylko jest to możliwe, powinieneś spotkać się z klientem osobiście. Czasem odległość między Tobą a siedzibą zainteresowanej firmy może zmusić Cię do odbycia rozmowy przez telefon; jednak jeżeli klient jest w mieście, zaplanuj spotkanie z nim twarzą w twarz.

Układ i kompozycja

Pamiętaj, że w spotkaniu tym mniej chodzi o zaimponowanie klientowi i sprzedanie swoich usług, a bardziej o nawiązanie z nim kontaktu i ustalenie, czego pragnie. Postaraj się raczej słuchać, niż mówić. Przynieś ze sobą notatnik, aby móc zapisać najważniejsze informacje. Jeśli weźmiesz na spotkanie laptop lub tablet, żeby pomówić o przykładach stron, postaraj się nie używać go zbyt długo. Ekrany komputerów łatwo przyciągają wzrok. Z tego powodu, jeżeli klient nie będzie cały czas patrzył na wyświetlacz, będziesz to robił Ty — w trakcie robienia notatek. Jeżeli już koniecznie musisz przynieść ze sobą jakieś urządzenie, niech będzie to telefon z oprogramowaniem do nagrywania, którego możesz użyć do zarejestrowania Waszej rozmowy — za przyzwoleniem klienta oczywiście. Z moich doświadczeń wynika jednak, że najlepiej jest używać zwykłego notatnika, który nie rozprasza uwagi często nie tak dobrze obeznanego z nowymi technologiami klienta.

Z klientem nie musisz się spotykać w biurze Nawet gdy pracowałem w dużej firmie, w biurze, spora część moich najbardziej produktywnych spotkań z klientami odbywała się w kawiarni lub przy wspólnym lunchu. Możliwość zasugerowania takiego spotkania zależy od klienta. Jeżeli Wasze relacje mają bardzo formalny charakter, lepiej tego nie proponować. Jednak w wielu przypadkach spotkanie w kawiarni to wspaniały sposób na nadanie stosunkom bardziej osobistego wymiaru. Oto kilka pytań, które często zadaję klientom, nawet jeśli udało mi się poznać odpowiedzi na nie dzięki poszukiwaniom w internecie. „ Czym zajmuje się państwa firma? „ Jaką rolę pani/pan pełni w przedsiębiorstwie?2 „ Czy państwa przedsiębiorstwo posiada własne logo lub markę? Jaki cel chcą państwo osiągnąć dzięki stworzonej witrynie? „ Jaki typ informacji chcą państwo zamieścić na witrynie? „ Do kogo kierowane są państwa usługi, a co za tym idzie, strona? Czy przyszli użytkownicy należą do jednej grupy pod względem wieku, płci bądź miejsca zamieszkania? „ Kim są państwa konkurenci i czy posiadają własne witryny? „ Czy mogą państwo podać przykłady witryn, które się państwu podobają lub nie? „ W jakim terminie chcieliby państwo ujrzeć skończony projekt i jaki budżet mogą państwo przeznaczyć na stworzenie witryny? Jeśli celem projektu jest przebudowa istniejącej witryny, zadaję następujące pytania: „ Czego poszukują goście państwa witryny, gdy na nią wchodzą? „ Na czym polega problem z obecnym projektem państwa strony? „ Co chcieliby państwo uzyskać w wyniku pełnego przebudowania witryny? „ Czy chcieliby państwo zachować jakieś elementy obecnej witryny? „ Jak się państwu wydaje, w jaki sposób zareagują użytkownicy witryny na zmianę jej wyglądu? 2

Pytanie to jest szczególnie ważne, jeśli osoba ta będzie jedyną, z którą będziemy mieli kontakt.

19

20

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Czasami rozpoczynam rozmowę z większą liczbą pytań niż te wypunktowane tutaj. Użyj wyobraźni i wymyśl kilka pomysłowych pytań, które pozwolą Ci lepiej zrozumieć zasady funkcjonowania zainteresowanej instytucji. Jeżeli jesteś programistą, unikaj technicznego żargonu. Jeśli jesteś projektantem, nie rozmawiaj o szczegółach projektu. Jasne, mogą one być tym, co jest dla Ciebie najważniejsze, ale pojęcia takie, jak „znaczniki semantyczne”, „układ pływający i stały” czy „schematy kolorów” będą raczej niewiele mówiły większości Twoich klientów. Co gorsza, taki rodzaj rozmowy może zaowocować błędnymi decyzjami, podjętymi jeszcze zanim będziesz miał okazję przystąpić do właściwej fazy projektowania.

Poszukiwanie Kolejnym etapem procesu projektowania jest zebranie wszystkich informacji pozyskanych od klienta w swoim laboratorium, żeby móc je przeanalizować i poeksperymentować z nimi. Musisz zrozumieć znaczenie każdej informacji, produktu i usługi, którą Twoi klienci oferują, i pomyśleć, jak można je zaaranżować. Postaw się na miejscu gościa witryny i zadaj sobie pytanie: „Po co tu przyszedłem?”. Jeśli przybyłeś tu, żeby nabyć przedmiot, co musisz wiedzieć, zanim go kupisz? Jeśli interesuje Cię dana usługa, gdzie mógłbyś znaleźć pełną dostępną ofertę i informacje o tym, jaki poziom usług byłby dla Ciebie odpowiedni? Jaki tytuł byłby najlepszy dla strony x i ile kroków trzeba przejść, by przenieść się z niej na stronę y? W świecie web designerów jest to wstęp do procesu projektowania architektury informacji. Architekt informacji to profesja sama w sobie — z jego usług korzystają potężne serwisy i aplikacje sieciowe. Podstawowe założenia architektury informacji mogą jednak nadać solidne fundamenty nawet najmniejszej witrynie internetowej. W fazie „poszukiwawczej” projektowania najlepiej jest skupić się na zorganizowaniu zawartości strony w strukturę, do której można będzie dodawać kolejne elementy. Kawałek papieru (lub tablica, jeśli masz ją pod ręką) oraz gruby notesik karteczek samoprzylepnych to dwa najważniejsze narzędzia na tym etapie. Stwórz listę wszystkich części witryny i zacznij je układać w grupy i podgrupy. Z pewnością będziesz je kilkakrotnie przestawiał — i w tym celu przydadzą się karteczki samoprzylepne. Jeśli wykonasz notatkę dla każdej z sekcji, podsekcji i strony witryny, z łatwością będziesz mógł je ułożyć na ścianie w kolejności takiej, jak na jej pasku nawigacji. Lepiej nie przytłaczać użytkowników zbyt wielkim wyborem opcji, ale też nie należy ukrywać informacji w witrynie zbyt głęboko — to znaczy kilka kliknięć za daleko od strony głównej. Nie ma żadnego uniwersalnego przepisu na optymalne rozwiązanie — po prostu postaraj się umożliwić jak najbardziej intuicyjny dostęp do informacji.

Implementacja Teraz, gdy już przeszedłeś etap organizowania informacji na stronie, czas zacząć fazę implementacji poprzez stworzenie układu witryny. Niezależnie od specyfiki realizowanego projektu staraj się nie myśleć o parametrach technicznych związanych z budowaniem stron — przynajmniej na razie. W tej chwili nie jest ważne, czy witryna zostanie napisana zwykłym kodem HTML, będzie szablonem dla systemu zarządzania treścią, czy aplikacją Ruby on Rails. W tej chwili masz do zaprojektowania interfejs użytkownika i jedynie kartkę papieru do pomocy. „Jak to kartkę papieru?”. Tak jest, kartkę papieru. Co? Myślałeś, że tak łatwo pozwolę Ci wrócić do Twojego ukochanego komputera? Mowy nie ma! Jest ku temu powód: łatwo można stracić z oczu cały projekt, jeśli zaczniesz myśleć o układzie strony, siedząc przed komputerem. Zaczynając od zwykłej kartki papieru, możesz

Układ i kompozycja

zignorować ograniczenia techniczne przeglądarek, CSS itp. i skupić się na tym, jak chcesz, żeby wyglądał produkt finalny. Może Ci się wydawać, że dobry projektant stron powinien nosić ze sobą ozdobny szkicownik w twardej oprawie, w którym bazgrze drogimi markerami i pędzlami, tworząc układy stron godne Leonarda da Vinci. Ja sam wolę używać notesu za 3 złote, w którym mażę dowolnym działającym jeszcze pisakiem, jaki znajdę na swoim biurku. Zwykle zaczynam pracę od naszkicowania kilku układów stron. Gdy już je mam, wybieram spośród nich jeden, uruchamiam Photoshopa i używam narzędzia Prostokąt, aby wyznaczyć obszary, które odpowiadają elementom naszkicowanym na papierze. Gdy już określę rozmieszczenie komponentów układu, eksperymentuję z kolorami tła i pierwszego planu tak długo, aż otrzymam porządny schemat kolorów. Następnie bawię się dalej guziczkami i suwakami w Photoshopie, by w końcu, w czarodziejski sposób, uzyskać projekt układu, który mógłbym pokazać klientowi. Proste, prawda? No dobra, może pominąłem kilka kroków w tym króciutkim opisie. Ale tak szczerze, ludzie, którzy pytają się mnie, jak to robię, zwykle dostają ode mnie takie właśnie wyjaśnienie. W rzeczywistości moje doświadczenie oraz lata studiowania projektowania i sztuki sprawiają, że z łatwością wydobywam całą nabytą wiedzę ze swojej podświadomości, co ułatwia mi proces projektowania. Z nauką projektowania stron jest jak z nauką programowania. Są ludzie, którzy mają ku temu odrobinę więcej wrodzonego zacięcia, ale każdy może je opanować. Tak jak widać różnice pomiędzy „ładnym” a „brzydkim” kodem, tak można rozróżnić dobry i zły projekt witryny. Zrozumienie zasad i konwencji związanych z projektowaniem artystycznym pomoże Ci pojąć różnice pomiędzy projektem dobrym, złym i okropnym, pozwalając na wypracowanie własnego stylu projektowania.

Wyznaczanie dobrego stylu Istnieją dwa główne aspekty, według których ludzie określają, czy konkretny projekt witryny jest dobry, czy nie. Pierwszym z nich jest kwestia użyteczności, która skupia się na efektywnej prezentacji informacji i funkcjonalności witryny. Drugim jest estetyka, która odnosi się do wartości artystycznej i efektu wizualnego kompozycji. Niektórym projektantom zdarza się tak koncentrować na estetyce i grafice, że zapominają o użytkowniku, podczas gdy inni guru są zbyt zaabsorbowani testowaniem łatwości obsługi serwisu przez użytkowników, przez co ignorują ich potrzeby estetyczne. Aby dotrzeć do gości witryny i sprawić, żeby chętnie na nią wracali, sprawą absolutnie zasadniczą jest zmaksymalizowanie obu tych czynników. Musisz pamiętać o jednej prostej rzeczy: w projekcie strony najważniejsza jest komunikacja. Jeśli stworzysz stronę, która będzie działać poprawnie i wyśmienicie prezentować informacje, ale wyglądać przy tym okropnie lub nie pasować do marki klienta, nikt nie będzie chciał jej używać. Podobnie będzie, jeśli stworzysz piękną witrynę, z której trudno jest korzystać — jej użytkownicy zaczną Cię opuszczać. Tak naprawdę estetyka i funkcjonalność gotowej witryny powinny tworzyć jedność, tak żeby: Użytkownicy byli zadowoleni z wyglądu kompozycji, ale wracali na stronę po jej zawartość. Jedną z najistotniejszych rzeczy, spędzającą sen z powiek specjalistom od funkcjonalności witryn, jest czas, jakiego potrzebuje użytkownik na znalezienie poszukiwanej informacji na stronie — niezależnie od tego, czy jest nią treść, link do innej sekcji, czy pole formularza.

21

22

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Układ strony nie powinien stanowić przeszkody — powinien działać jak przekaźnik między użytkownikiem a informacją. Witryna Web Designer Wall3, stworzona przez Nicka La (rysunek 1.2), jest doskonałym przykładem projektu jednocześnie pięknego i przystępnego. Bogate, kolorowe ilustracje opływają strukturę strony, która sama jest przyozdobiona nawigacją i innymi elementami, przypominającymi wycinki ze szkicownika. Obecność tak wielu, zdawałoby się, ręcznie robionych, organicznych grafik tworzy kontrast i przyciąga Twój wzrok ku treści, nie wpływając przy tym na jej czytelność i sposób zorganizowania.

Rysunek 1.2. Witryna Web Designer Wall

Użytkownicy mogli łatwo poruszać się po witrynie dzięki intuicyjnej nawigacji. O samym umiejscowieniu menu do nawigacji po stronie opowiem Ci więcej później. Teraz zapamiętaj jednak, że główny pasek nawigacji musi wyróżniać się w witrynie, a każdy link powinien mieć jak najbardziej adekwatną nazwę. Struktura nawigacji, która nie tylko zmienia wygląd po najechaniu na jej fragment myszką, ale też wskazuje aktualnie wyświetlaną stronę lub sekcję (tak jak menu na rysunku 1.3), pomaga użytkownikom zorientować się, gdzie się znajdują i dokąd mają dalej podążać.

Rysunek 1.3. Menu nawigacji witryny nclud.com należącej do firmy webdesignerskiej z Waszyngtonu 3

http://www.webdesignerwall.com/

Układ i kompozycja

Drugorzędna nawigacja, pola wyszukiwania i linki prowadzące do innych witryn nie powinny dominować na stronie. Jeśli zadbamy o to, żeby elementy te były łatwe do odnalezienia, lecz oddzielimy je wizualnie od treści, pozwolimy użytkownikom skoncentrować się na informacji — mimo to jednak będą oni wiedzieć, gdzie znaleźć inne treści witryny. Użytkownicy identyfikowali stronę jako należącą do konkretnej witryny. Nawet jeśli różnica pomiędzy układem strony głównej a resztą witryny będzie dramatyczna, spójny motyw lub styl powinien łączyć wszystkie jej sekcje, żeby podtrzymać „tożsamość” projektu. Zwróć uwagę na trzy zdjęcia witryny Moore School of Business4 na rysunku 1.4. Mimo że bloki z zawartością stron prezentują się na każdym z tych zdjęć inaczej, każda strona posiada kilka wspólnych elementów wskazujących na jej przynależność do tego samego serwisu. Jedność między nimi została zachowana w dużej mierze dzięki powtórzeniu logo i bloków nawigacji. Również konsekwentne użycie ograniczonej palety barw (czerń, szarość, żółć i czerwień) łączy te strony ze sobą.

Rysunek 1.4. Strony witryny Moore School of Business

4

http://mooreschool.sc.edu/

23

24

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Anatomia stron internetowych Nawet z punktu widzenia nie-projektanta zdefiniowanie projektu, który spełniłby wszystkie wymienione przeze mnie wyżej kryteria, powinno być proste. Przypomina to tworzenie frazy z magnetycznych plakietek na drzwiach lodówki. Mimo że istnieją miliony sposobów ułożenia wyrazów w wypowiedź, tylko kilka z nich będzie miało jakikolwiek sens. Magnetyczne słowa są jak komponenty czy też bloki strony internetowej. Chociaż liczba potrzebnych komponentów zależy od wielkości i tematyki witryny, większość z nich składa się z bloków widocznych na rysunku 1.5.

Rysunek 1.5. Anatomia witryny

Przeanalizujmy te komponenty po kolei: Blok z zawartością Każda strona internetowa ma blok zawartości. Może on mieć formę znacznika body, a w nim znaczniki div zawierające każdy element witryny. Bez takiego podziału nie mielibyśmy jak rozdzielić różnych treści strony. Rozciągałyby się one tylko w dół okna przeglądarki, wiersz po wierszu, hen, daleko w bezkresną przestrzeń. Szerokość bloku zawartości może być płynna, co oznacza, że może się on rozszerzać, wypełniając szerokość okna przeglądarki; albo stała — co sprawia, że będzie zawsze taka sama, niezależnie od wielkości okna.

Układ i kompozycja

Logo Gdy web designerzy mówią o „tożsamości”, na ogół chodzi im o logo i kolory występujące w różnych formach komunikacji marketingowej danego przedsiębiorstwa, takich jak wizytówki, papier firmowy, broszury itp.5. Komponent „tożsamościowy” powinien znajdować się u góry strony i zawierać logo firmy lub jej nazwę. Zadaniem tego komponentu jest zwiększenie rozpoznawalności marki i przypomnienie użytkownikom, że strona, którą oglądają, jest częścią większej witryny. Nawigacja Kluczowe jest, aby system nawigacji witryny był łatwy do odnalezienia i prosty w użyciu. Większość użytkowników spodziewa się zobaczyć blok nawigacji u góry strony. Niezależnie od tego, czy chcesz użyć podłużnego paska menu, czy menu ciągnącego się wzdłuż zawartości w dół strony, komponent nawigacyjny powinien znajdować się tak blisko szczytu strony, jak to tylko możliwe. Wszystkie główne elementy nawigacji powinny znaleźć się powyżej „zgięcia strony”.

Zgięcie strony Zgięcie strony jest, jak mówi wielu web designerów, miejscem odgradzającym zawartość strony widoczną od razu po załadowaniu od reszty treści, do której można dotrzeć, przewijając okno przeglądarki w dół. Gdy patrzysz na pierwszą stronę zgiętej gazety, większość nagłówków najważniejszych wiadomości pojawia się w jej górnej części, tak że najważniejsze wieści możesz spostrzec od razu. Dokładne położenie zgięcia strony internetowej zależy od rozmiaru przeglądarki i ustawień rozdzielczości ekranu. Dla rozdzielczości 1024×768 pikseli, gdy weźmiemy pod uwagę przestrzeń zajmowaną przez interfejs przeglądarki, jej przyciski, karty i pasek URL, zgięcie znajduje się w odległości zaledwie 500 pikseli od szczytu strony. Treść Treść winna królować. Typowy internauta po wejściu na stronę opuszcza ją w ciągu kilku sekund. Jeśli nie będzie on w stanie odnaleźć interesujących go treści, bez wątpienia zamknie okno lub odwiedzi inną witrynę. Ważne jest więc, aby komponent zawierający treść znajdował się w punkcie ogniskującym całego projektu, tak żeby gość mógł szybko przejrzeć stronę w poszukiwaniu informacji, której potrzebuje. Stopka Znajdująca się u dołu strony stopka zawiera zwykle informacje o prawach autorskich, dane kontaktowe, zasady użytkowania i linki do głównych sekcji witryny. Poprzez odseparowanie końca bloku treści od dolnej części okna przeglądarki stopka powinna jasno wskazywać użytkownikom, że znajdują się u dołu strony.

5

Wiele osób używa terminów „tożsamość” i „marka” zamiennie. Marka jest szerszym pojęciem, związanym z procesem tworzenia świadomości istnienia firmy, produktów i usług u kupujących. Na proces tworzenia marki składa się reklamowanie, analiza rynku, odzew klientów i wiele innych czynników. „Tożsamość” jest tylko jednym z czynników tworzących markę, który skupia się na jej wizualnej prezentacji.

25

26

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Biała przestrzeń W projektowaniu graficznym termin „biała przestrzeń” (lub „wolna przestrzeń” albo „przestrzeń negatywna”) odnosi się do obszaru strony pozbawionego druku bądź ilustracji. Co prawda wielu początkujących web designerów (i klientów) odczuwa niepohamowaną potrzebę zapełnienia każdego centymetra strony internetowej fotografiami, tekstem, tabelami i danymi, jednak wolna przestrzeń na stronie jest równie ważna jak jej treść. Bez ostrożnego rozplanowania białej przestrzeni projekt będzie wyglądał na bardzo „zatłoczony”. Wolne miejsce pozwala całości kompozycji „oddychać”, prowadząc wzrok użytkownika wokół strony oraz pomagając stworzyć równowagę i jedność — tym dwóm ideom przyjrzymy się bliżej w dalszej części tego rozdziału. Zatem mamy za sobą spotkanie z panem Smithem, naszym hipotetycznym klientem. Było ono bardzo owocne. Wyjaśniono nam bardzo dokładnie, czym zajmuje się jego firma i co chciałby osiągnąć dzięki swojej nowej witrynie. Choć nie mamy na tę chwilę żadnej treści, możemy wykorzystać naszą wiedzę o standardowych komponentach strony do rozpoczęcia prac nad układem. Istnieje co prawda wiele rodzajów bloków tworzonych na potrzeby bardzo specyficznych projektów, ale nasza anatomia stron internetowych adekwatnie scharakteryzowała te najważniejsze, najczęściej używane spośród nich. Teraz, gdy mamy już wszystkie potrzebne informacje, pojawia się pytanie: „Jak stworzyć podstawowy układ dla Smith’s Services?”. Nadszedł czas, by zapoznać się z teorią siatki.

Teoria siatki Gdy większość ludzi myśli o siatkach w kontekście projektowania, nasuwają się im skojarzenia z inżynierią lub architekturą. Jednak siatka jest podstawowym narzędziem również w projektowaniu graficznym, a jej wykorzystanie w projektowaniu stron zyskało znacznie na popularności w ciągu ostatnich kilku lat. Używanie siatki nie oznacza jedynie tworzenia kwadratowych elementów, a następnie ich wyrównywania — ważną rolę odgrywają tu też proporcje. W tym miejscu w wyrażeniu „teoria siatki” znaczenia nabiera właśnie słowo „teoria”. Wielu historyków sztuki tytułuje duńskiego malarza Pieta Mondriana ojcem projektu graficznego, doceniając go za wyrafinowane wykorzystanie siatek. Jednak klasyczna teoria siatek wpływała na kształt wysiłków artystycznych na przestrzeni tysięcy lat. Idea dzielenia kompozycji na poszczególne elementy sięga matematycznych koncepcji Pitagorasa i jego naśladowców, którzy definiowali liczby jako proporcje, a nie jednostki. Pitagorejczycy badali matematyczny wzorzec, który pojawiał się w przyrodzie tak często, że wierzyli w jego boskie pochodzenie. Wzorzec ten nazwali „złotym podziałem” (znane są również nazwy: „podział harmoniczny”, „złota proporcja” lub „boska proporcja”). Jego ideę obrazuje rysunek 1.6.

Rysunek 1.6. Złoty podział

Układ i kompozycja

Dowolną linię można przeciąć na dwie części poprzez podzielenie jej długości przez 1,62. Ta czarodziejska liczba ma tak naprawdę postać 1,6180339…, jest więc liczbą niewymierną, którą zwykle zapisujemy przy użyciu znaku Φ (wymawianego jako „fi”). Wyjaśnienie wszystkich obliczeń, dzięki którym ta wartość powstaje, byłoby zbyt czasochłonne i wiedza ta raczej nie pomogłaby Ci stać się lepszym web designerem, więc oszczędzę Ci szczegółów. Poza tym musiałbym wpierw odkurzyć swoją wiedzę matematyczną. Do czego w takim razie używa się tej proporcji? Ogólnie rzecz ujmując, kompozycje podzielone przez linie zbliżone do złotej proporcji uważa się za o wiele milsze dla oka. Artyści epoki odrodzenia korzystali z boskiej proporcji w projektowaniu obrazów, rzeźb i budynków. Współcześni projektanci często używają tego podziału do tworzenia układów stron, plakatów, broszur itd. Zamiast polegać na intuicji artystycznej, możemy liczyć na boskie proporcje wyznaczające logiczny sposób tworzenia interesujących kompozycji. Słonecznik na rysunku 1.7 jest przykładem zachowania złotych proporcji w przyrodzie. Stosunek średnicy całego kwiatu łącznie z płatkami do średnicy środka słonecznika wynosi dokładnie Φ.

Rysunek 1.7. Boskie proporcje w przyrodzie

Reguła trójpodziału Uproszczoną wersją złotej proporcji jest reguła trójpodziału. Linię utworzoną zgodnie ze złotym podziałem dzielimy na dwie części w taki sposób, że jedna jest prawie dwa razy dłuższa od drugiej. Podzielenie kompozycji na trzy równe części jest prostą metodą wprowadzenia boskiej proporcji bez potrzeby korzystania z kalkulatora. Zróbmy mały eksperyment z podziałem strony. Zacznijmy od narysowania ołówkiem kilku siatek zgodnych z regułą trójpodziału. Narysuj prostokąt i podziel go na trzy części w poziomie i w pionie, po czym poprowadź linię pomiędzy parą linii pionowych, tworząc w ten sposób sześć kolumn.

27

28

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Mając taką siatkę, możemy wreszcie przystąpić do układania elementów witryny. Duży prostokąt, który narysowaliśmy na samym początku, reprezentuje nasz blok zawartości, o którym mówiliśmy w podrozdziale „Anatomia stron internetowych”. Gdy używam tej metody tworzenia układu strony, zwykle najpierw określam położenie największego komponentu. Najczęściej jest nim blok zawierający treść. W mojej pierwszej siatce umieszczam komponent treści w ramach dwóch trzecich całego układu, zaczynając od jego prawej dolnej części. Następnie umieszczam menu nawigacyjne pośrodku kolumny najbardziej po lewej. Kolejno wstawiam część tekstową logo ponad lewą stroną komponentu z treścią i obraz ponad nawigacją. W końcu wciskam informacje o prawach autorskich w blok pod treścią strony po prawej części siatki. W rezultacie otrzymuję jeden z możliwych układów, które możesz podziwiać na rysunku 1.8 (u góry po lewej stronie).

Rysunek 1.8. Cztery układy stron powstałe na planie siatek wykorzystujących regułę trójpodziału

Te wstępne szkice pozwolą Ci poznać kilka prostych metod tworzenia układów, które mogą się sprawdzić w Twojej witrynie. Nie musisz na nich poprzestawać — wzrost popularności projektów stron opartych na siatce zaowocował ogromem świetnych artykułów i — co ważniejsze — narzędzi poświęconych tej tematyce.

Układ i kompozycja

960 Grid System Jednymi z moich ulubionych narzędzi do tworzenia komponentów projektu są szablony i wzorce struktury strony z witryny Nathana Smitha — 960 Grid System6. Stworzony w odpowiedzi na artykuły web designerów Khoi Vinha i Marka Boultona, 960 Grid System jest frameworkiem CSS. Domyślną szerokość zbudowanych za jego pomocą szablonów zawdzięczamy artykułowi Camerona Molla. Rozważając, jaka szerokość pasowałaby bez zarzutu do ekranów o rozdzielczości 1024 pikseli, Moll doszedł do wniosku, że 960 pikseli jest wartością idealną, zauważając przy tym, że liczba ta jest podzielna przez 3, 4, 5, 6, 8, 10, 12, 15 i 16, co sprawia, że nadaje się wyśmienicie do tworzenia siatek. Nathan włączył ten pomysł do swojego projektu i stworzył trzy podstawowe szkieletowe szablony stron: dwunasto-, szesnasto- i dwudziestoczterokolumnowy. Osobiście lubię pracować z dwunastokolumnowymi szablonami, które pozwalają mi w łatwy sposób podzielić stronę na ćwiartki przy użyciu trzech kolumn, trzy części przy użyciu czterech kolumn i połówki — sześciu. Eksperymentując z różnym rozstawianiem elementów w swoim układzie, użyj kolumn dowolnej wybranej przez siebie siatki jako prowadnic wyrównujących dla komponentów logo, nawigacji, treści i stopki. Kuszącym pomysłem wydaje się ułożenie elementów wewnątrz tego samego (jednego lub dwóch) bloku, ale staraj się tego uniknąć — nie wygląda to interesująco. Zamiast tego rozważ przerzucenie niektórych elementów do innej kolumny lub nawet poza siatkę. Jednym z najczęściej powtarzanych przez początkujących projektantów zastrzeżeń jest to, że każda część układu wydaje się pudełkowata. Wszyscy przeciwni używaniu siatki z tego powodu powinni rzucić okiem na stronę 10K Apart7 widoczną na rysunku 1.9 (na następnej stronie). Czerwone kolumny w tle to szablon 960 Grid System, który w rzeczywistości jest niewidoczny na samej witrynie. Nie wiedząc o tym, mógłbyś nigdy nie zdać sobie sprawy z tego, że strona została wykonana na planie siatki. Cytując pioniera projektu graficznego (i autora systemu siatek na witrynie Graphic Design) Josefa Müllera-Brockmanna: „System siatek ma być pomocą, a nie gwarancją sukcesu. Pozwala on projektantowi wybrać spośród wielu rozwiązanie, które będzie odpowiadało jego osobistemu stylowi. Najpierw jednak taka osoba musi nauczyć się korzystać z siatek — jak każda sztuka, i ta wymaga praktyki”8.

6

http://960.gs/

7

http://10k.aneventapart.com/

8

Josef Müller-Brockmann, The Graphic Artist and His Design Problems, Arthur Niggli Ltd, Szwajcaria, 1961, s. 92.

29

30

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 1.9. Witryna 10K Apart z szesnastokolumnową siatką w tle

Tęsknota za strukturą, porządkiem i idealnymi proporcjami jest naturalna dla człowieka. Układ, który „tak jakoś nie bardzo wygląda”, można często łatwo naprawić, przesuwając jego elementy lub zmieniając ich rozmiar w siatce. Jeśli więc Twój układ nie spisuje się, jak należy, pobaw się nim. W pewnej chwili wszystkie części układanki złożą się w całość i usłyszysz dźwięk towarzyszący przejściu na wyższy poziom w Tetrisie. Wtedy uzyskasz równowagę.

Układ i kompozycja

Równowaga Używając przenośni, można powiedzieć, że idea równowagi wizualnej w układzie strony przypomina równowagę ze świata fizyki, osiąganą na huśtawce zrobionej z deski. Skoro ciała fizyczne charakteryzują się wagą, elementy strony również ją posiadają. Jeśli dwie strony kompozycji maję taką samą wagę, równoważą się. Istnieją dwie główne formy równowagi kompozycji: symetryczna i asymetryczna.

Równowaga symetryczna Równowaga symetryczna, zwana też równowagą formalną, ma miejsce, gdy dwa elementy kompozycji znajdują się naprzeciw siebie po dwóch stronach osi symetrii. Cyfrowy obraz Davida Lanhama Kontemplacja, widoczny na rysunku 1.10, adekwatnie ilustruje tę myśl. Zwróć uwagę, jak postacie mężczyzny i kobiety są do siebie podobne pod względem postury i proporcji. Nawet zacieniowane prostokąty w tle są lustrzanym odbiciem samych siebie.

Rysunek 1.10. Równowaga symetryczna: Kontemplacja Davida Lanhama9

Choć nie jest to metoda praktyczna dla wszystkich projektantów i klientów, tego rodzaju symetrii — zwanej symetrią horyzontalną — można użyć w dowolnym układzie, wyśrodkowując treść lub równoważąc ją między kolumnami. 9

http://dlanham.com/

31

32

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Układ strony głównej mojej osobistej witryny10 jest przykładem zachowania takiej symetrii (rysunek 1.11). Zwróć uwagę na to, że dwie kolumny u góry przechodzą w trzy kolumny u dołu strony, a mimo to cała kompozycja zachowuje idealną równowagę.

Rysunek 1.11. Strona główna Jasongraphix

Inne dwie formy równowagi symetrycznej są rzadziej stosowane w projektowaniu stron, ze względu na specyfikę samego medium. Korzysta się z nich jednak w projektowaniu logo i materiałów poligraficznych: „ symetria bilateralna, która zachodzi, gdy kompozycja jest zrównoważona na przynajmniej dwóch osiach symetrii. „ symetria radialna, która powstaje, gdy elementy kompozycji znajdują się w równej odległości od jej punktu centralnego.

Równowaga asymetryczna Równowaga asymetryczna, znana również jako równowaga nieformalna, istnieje w sferze trochę bardziej abstrakcyjnej niż jej poprzedniczka, co czyni ją jednak atrakcyjniejszą wizualnie. Zamiast zwierciadlanych odbić po obydwu stronach kompozycji równowaga asymetryczna polega na dobraniu elementów różniących się wielkością, kształtem, stonowaniem i położeniem. Komponenty te można zaaranżować w taki sposób, aby balansowały wagę strony — pomimo odmienności. Dla przykładu, jeśli umieścisz duży element w jednym miejscu, możesz zrównoważyć całość układu, umieszczając kilka małych elementów po drugiej jego stronie.

10

http://jasongraphix.com/

Układ i kompozycja

Plakat koncertowy autorstwa mojego przyjaciela Jeremiego Darty’ego, który widzisz na rysunku 1.12, jest świetnym przykładem zachowania asymetrycznej równowagi. Waga dużego, różowego flaminga jest balansowana przez mniejsze flamingi i tekst po prawej stronie kompozycji. Warto zauważyć, że Jeremy skorzystał z reguły trójpodziału. Niebieska chmura za napisem „Pop Sucks” zajmuje jedną trzecią wysokości i dwie trzecie szerokości całego plakatu.

Rysunek 1.12. Asymetryczny projekt Jeremiego Darty’ego

Spójrz na trzy kamienie na rysunku 1.13. Być może nie jest to najciekawsza fotografia na świecie, ale jeśli wziąć pod uwagę równowagę elementów, po prostu rządzi! Gdybyś zasłonił którykolwiek z trzech kamieni paskiem papieru, całość fotografii wydałaby się niedokończona. Tak właśnie działa równowaga. To tak, jakby cała kompozycja wisiała na jednym gwoździu na ścianie. Wystarczy dodać jednej stronie odrobinę wagi, żeby cały obrazek się przekrzywił.

Rysunek 1.13. Asymetryczny rock-nie-roll

33

34

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

W przeciwieństwie do swego symetrycznego odpowiednika równowaga asymetryczna jest bardziej wszechstronna, co sprawia, że używa się jej częściej w sieci. Jeśli spojrzysz na układ dwukolumnowy, łatwo zauważysz, że szersza kolumna ma często jaśniejszy kolor — jest to strategia tworzenia kontrastu dla tekstu i głównej zawartości strony. Niewielka kolumna nawigacji jest często ciemniejsza, ma jakiś rodzaj ramy lub odznacza się od reszty w jakiś inny sposób, tak by równoważyć cały układ. Strona informacyjna witryny Steinway & Sons11, którą możesz podziwiać na rysunku 1.14, jest wspaniałym przykładem zachowania asymetrycznej równowagi. Nie ma tam jasno zdefiniowanej prawej kolumny — zamiast niej widać obraz założyciela firmy. Ten sumiasty wąs ma wystarczająco dużą wagę, by zrównoważyć pokaźny nagłówek napisany kursywą.

Rysunek 1.14. Strona „About us” witryny Steinway & Sons — przykład asymetrycznej równowagi

Projekt strony Steinway & Sons pomysłu Jesse Bennet Chamberlain poza równowagą asymetryczną inkorporuje wiele innych zasad projektowania. Witryna zachowuje doskonałą harmonię, co jest wynikiem użycia tekstur, krzywych i spójnego kroju pisma. Wiele z tej harmonii zawdzięczamy zasadom jedności.

11

http://www.steinway.com/about/

Układ i kompozycja

Jedność Według teorii projektu graficznego jedność definiujemy jako sposób, w jaki różne elementy kompozycji oddziałują na siebie. Układ zjednoczony to taki, który tworzy całość, a nie jest po prostu zestawem odrębnych części. Weźmy na przykład małpki z rysunku 1.15. Podobieństwo pod względem kształtu (nie wspominając o identyczności kolorów) decyduje o tym, że należą do jednej grupy, a nie są po prostu czterema zupełnie odmiennymi elementami.

Rysunek 1.15. Jedność wśród małpek

Choć jest to teraz mniejszy problem niż dawniej, to właśnie kwestia jedności była jednym z powodów nienawiści, jaką większość web designerów żywiła do ramek HTML-a. Ważne jest, żeby jedność istniała nie tylko wewnątrz każdego pojedynczego komponentu strony, ale również obowiązywała na całej stronie — cała strona powinna stanowić jedność. Aby ją uzyskać, możemy podejść do problemu na kilka sposobów, wykorzystując poza unikaniem stosowania ramek także odległość i powtarzanie.

Bliskość Wybranie odpowiedniej odległości jest oczywistym, acz często niedocenianym sposobem na zgrupowanie pojedynczych obiektów w całość. Umiejscawiając elementy kompozycji blisko siebie, tworzymy punkt ogniskowy, który będzie przyciągał wzrok widza. Spójrz na obraz cyfrowy na rysunku 1.16. Mimo że wydaje się składać z losowych pociągnięć pędzla, tych pięć plam farby położonych najbliżej siebie zdaje się tworzyć pojedynczy obiekt.

Rysunek 1.16. Bliskość sprzyja tworzeniu grup

35

36

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Z ustawień odległości korzystamy w trakcie definiowania marginesów (margin) i wypełnienia (padding) komponentów witryny. Na przykład gdy ustanawiam dla strony style w arkuszu CSS, zwykle zmieniam domyślne wielkości marginesów pomiędzy najczęściej używanymi znacznikami HTML, takimi jak nagłówki (h1, h2, h3…), akapity (p), cytaty (blockquote) czy nawet grafiki (img). Modyfikując te wartości, mogę stworzyć więcej lub mniej miejsca pomiędzy elementami, co skutkuje pojawieniem się grup komponentów. Jeśli spojrzysz na dwie kolumny tekstu na rysunku 1.17, zauważysz, jak podobne są one do siebie. Różnią się jedynie umiejscowieniem nagłówków. W kolumnie po lewej słowo „Unkgnome” znajduje się dokładnie pośrodku pomiędzy górnym a dolnym akapitem. W efekcie wygląda jak znak rozdzielający, a nie jak tytuł kolejnej sekcji dokumentu. W drugiej kolumnie napis „Gnomenclature” znajduje się bliżej następującego po nim akapitu. Zgodnie z zasadą zachowania bliskości nagłówek ten wydaje się częścią tekstu.

Rysunek 1.17. Studium przypadku — odległość między nagłówkami a treścią

Powtórzenia „Gęganie gęsi”, „ławica ryb” czy „lwie serce”. Jeśli przywołać dwa słowa tego typu naraz, zawsze grupują się one w pary, tworząc kolokacje. W ten sam sposób powtórzenie kolorów, kształtów, tekstur lub podobnych elementów pomaga połączyć układ, tak że tworzy on spójną całość. Rysunek 1.18 ilustruje tę koncepcję. Chociaż na obrazku występuje wiele podobnych plam, te dziewięć czerwonych kropek po lewej stronie wydaje się jednoczyć poprzez wspólny kształt, kolor i fakturę. Plamki po prawej stronie nie mają wspólnego wzorca, więc każda pojedyncza kropka wydaje się odizolowana, mimo że w pobliżu znajdują się inne kształty.

Układ i kompozycja

Rysunek 1.18. Tworzenie grupy za pomocą powtórzeń

Być może czasem trudno je zauważyć, ale faktem jest, że powtórzenie jest często stosowane w projektowaniu witryn do jednoczenia układu strony. Przykładem niech będzie wypunktowana lista w niezmodyfikowanym kodzie HTML. Wypunktowanie poprzedzające każdy element listy wskazuje, że wszystkie one tworzą całość. Również powtórzenie wzorców i faktury może zjednoczyć kompozycję. Popatrz na rysunek 1.19 przedstawiający Odosketch12 — aplikację internetową i jednocześnie portal społecznościowy artystów, stworzony przez Odopod. Układ strony zawiera wiele rzucających się w oczy elementów — powtarzające się miniaturki obrazów z napisem „Featured” na banerach tworzą galerię, podczas gdy szkicowe elementy nagłówków sprawiają, że miniatury stworzone przez użytkowników wyśmienicie wpisują się w kompozycję strony.

Rysunek 1.19. Galeria Odosketch

12

http://sketch.odopod.com/

37

38

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Wyróżnienie Pojęciem blisko związanym z koncepcją jedności jest „wyróżnienie” lub „dominacja”. Miast skupiać się na równomiernym dopasowaniu różnych elementów witryny, poprzez odpowiednie wyróżnienie możemy wydobyć część kompozycji, przyciągając uwagę publiki. Projektując układ strony internetowej, wielokrotnie przyjdzie Ci określić ten element strony, który będzie miał się wyróżniać wśród innych. Może nim być przycisk formularza lub wiadomość o błędzie. Jedną z metod uzyskania takiego wyróżnienia jest stworzenie punktu ogniskującego. Punktem ogniskowym (zwanym też fiksacją lub punktem fiksacji) nazywamy każdy komponent witryny, który zamiast mieszać się z innymi elementami strony, przyciąga wzrok widza, odstając od reszty. Tak jak w przypadku jedności, istnieje kilka sprawdzonych sposobów na uzyskanie wyróżnienia.

Rozmieszczenie Choć ograniczenia wynikające z praktycznego projektowania stron nie pozwalają na stosowanie się do tej zasady zawsze, centrum kompozycji stanowi punkt, na który wzrok użytkowników pada najpierw — jest on więc najlepszym miejscem na stworzenie wyróżnienia. Im dalej dany obiekt znajduje się od środka, tym ma mniejsze szanse na to, że zostanie zauważony jako pierwszy. W projektowaniu witryn również lewy górny róg strony przyciąga uwagę, szczególnie osób czytających od lewej do prawej (pamiętaj, że w wielu językach, w tym hebrajskim i arabskim, słowa są czytane od prawej do lewej) i wodzących wzrokiem z góry na dół.

Ciągłość Ciągłość, zwana też przepływem, działa, gdy przesuwając wzrok w jedną stronę, zatrzymujemy go dopiero po natrafieniu na mocno kontrastujący obiekt. Rysunek 1.20 ukazuje ten efekt. Nawet pomimo tego, że plamka u dołu obrazka jest większa, Twój mózg zdaje się krzyczeć: „Hej, popatrz! Jaka fajna strzałka!”. I oczywiście Twoje oczy spoczną najpierw na mniejszej kropce.

Rysunek 1.20. Ciągłość i rozmieszczenie — razem tworzą wyróżnienie

Zapewnienie ciągłości stanowi jedną z najczęstszych metod tworzenia jedności w układzie strony. Domyślnie, zanim przeglądarka odczyta właściwości z arkuszy stylów, nagłówki, tekst i obrazki rozmieszczane są w dokumencie wzdłuż krawędzi pionowej, po jego lewej stronie. Prostym sposobem na wykorzystanie tego zjawiska jest wyrównanie elementów wzdłuż linii siatki. Tworzy to wiele linii ciągłości, które „przeciągną” wzrok użytkowników w dół strony.

Układ i kompozycja

Izolacja O ile bliskość sprzyja tworzeniu jedności na stronie, o tyle izolacja wspomaga wyróżnienie. Obiekt, który wyróżnia się na tle otoczenia, zwykle przyciąga uwagę. Zatem mimo że smutno jej bez kumpli, osamotniona małpka na rysunku 1.21 wyróżnia się tak mocno, że stała się punktem ogniskowym tej strony.

Rysunek 1.21. Izolacja — smutna małpka

Kontrast Kontrast, definiowany jako przeciwstawienie sobie różnych elementów graficznych, jest najczęściej stosowaną metodą tworzenia wyróżnienia w układzie. Idea jest prosta: im większa jest różnica pomiędzy danym obiektem a otoczeniem, tym bardziej obiekt ten będzie się wyróżniał na tle innych. Kontrast można stworzyć, korzystając z różnych kolorów (o czym więcej w rozdziale 2.), rozmiarów i kształtów. Spójrz na stronę główną serwisu Twitter na rysunku 1.22.

Rysunek 1.22. Kontrast na Twitterze: niebieski kontra pomarańczowy

Link lub przycisk, który ma od razu przykuwać wzrok użytkownika i sprawić, żeby go kliknął, nazywamy, odnośnikiem wezwania do działania (ang. call to action). Kiedy patrzysz na układ powyżej, co najpierw zwraca Twoją uwagę? Ja od razu zauważam przycisk Sign Up w prawej

39

40

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

kolumnie. To jedyne miejsce na stronie, gdzie widać pomarańcz i żółć. Również czcionka tekstu jest większa niż na przyciskach Search i Sign In. Umieszczenie tego odnośnika w bloku, który przecina trzy inne komponenty, zapewnia i ciągłość, i izolację, i kontrast. Twitterowi naprawdę zależy na tym, żebyś kliknął ten przycisk, więc — wyróżniając się jak najbardziej — wzywa Cię do działania.

Proporcje Kolejnym ciekawym sposobem na stworzenie wyróżnienia w Twojej kompozycji jest wykorzystanie proporcji. Reguły proporcji są jednymi z podstawowych zasad projektu, które opisują różnice pomiędzy skalą elementów. Gdyby dowolny przedmiot w pewnej skali umieścić w środowisku o skali mniejszej, wyda się on większy, niż jest w rzeczywistości, i vice versa. Różnica w proporcjach przyciąga uwagę widza do przedmiotu, ponieważ wydaje się on nie na miejscu, biorąc pod uwagę bezpośrednie otoczenie. By wyjaśnić, w czym rzecz, wziąłem naszą smutną, osamotnioną małpkę i nałożyłem ją na pejzaż Manhattanu (patrz rysunek 1.23). Jeszcze zanim zdasz sobie sprawę z kontrastu barw i różnic proporcji, Twój umysł stwierdzi: „Hej, coś tu nie gra!”, co sprawi, że zaczniesz wpatrywać się w postać małpki, aż zmusisz się, żeby odwrócić wzrok.

Rysunek 1.23. Proporcje: małpa na Manhattanie

Reguły proporcji działają również przy miniaturyzacji. Rzuć okiem na zaprojektowaną przez Davida DeSandro witrynę BeerCamp13 widoczną na rysunku 1.24. Pierwszą rzeczą, jaką zauważysz, będzie najpewniej olbrzymi napis BeerCamp. Z tego miejsca mój wzrok podąża

13

http://beercamp.com/2010/

Układ i kompozycja

za strzałką ku rzędowi budynków. Wszystko dzięki ciągłości i przykuwającemu wzrok użyciu proporcji. Osoby zainteresowane możliwościami CSS3 powinny wiedzieć, że we fragmencie strony, który podziwiają, nie wykorzystano nawet jednego pliku graficznego.

Rysunek 1.24. Witryna BeerCamp

W tworzeniu wyróżnienia na stronie nie chodzi jedynie o uwypuklenie Twojego „wezwania do działania”. Polega ono również na umiejętnym kierowaniu wzrokiem widza po układzie. Nadając różnym elementom coraz to mniejszy poziom wyróżnienia, wskazujesz gościowi witryny kolejność ich postrzegania. Pamiętając o tym przy budowie strony, możesz odzwierciedlić wyróżnienie kompozycji za pomocą składni HTML i CSS. Przykładowo dobranie odpowiednich znaczników nagłówków (od h1 do h6) do poziomu wyróżnienia sprawi, że to, w jaki sposób widzą ją zwykli użytkownicy, będzie odzwierciedlać sposób, w jaki postrzegają ją osoby niewidome lub wyszukiwarki internetowe. W następnej części rozdziału zajmiemy się przykładami kilku sprawdzonych projektów.

Podstawowe układy stron Większość z tego, o czym do tej pory rozmawialiśmy, dotyczyła teorii projektowania. Teoria jest ważna, ale sama w sobie nie wyjaśni nam, dlaczego niektóre pomysły sprawdzają się w web designie, a inne nie. Moim zdaniem analiza przykładów i własna praca są cenniejszym źródłem wiedzy. Większość akademickich programów nauczania projektowania grafiki zawiera curricula poświęcone historii sztuki. Zajęcia tego typu pozwalają zrozumieć projektowanie grafiki z perspektywy sztuki, ale niestety nie przygotowują dobrze na wyzwania, które napotkasz, projektując na potrzeby sieci.

41

42

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Pablo Picasso powiedział kiedyś: „Zawsze robię to, co niemożliwe, żeby sprawdzić, jak to zrobić”. Chciałbym częściej móc wybierać takie podejście do tworzenia stron, jednak prawda jest taka, że człowiek musi wpierw wiedzieć, co jest osiągalne. Przeglądając zawartość sieci, mógłbyś stwierdzić, że możliwości są nieograniczone. Jednakże zależnie od celu strony tylko kilka spośród nich będzie miało jakikolwiek sens. Z tego powodu niektóre aranżacje komponentów składających się na tożsamość, nawigację i treść strony pojawiają się w układach raz po raz. W tej sekcji książki pomówimy o trzech najczęściej stosowanych układach strony i poznamy ich zalety i wady.

Układ lewokolumnowy Niezależnie od tego, czy mówimy o płynnym bądź stałym układzie strony, układ lewokolumnowy to już praktycznie klasyk. Projekt witryny Porsche14 widoczny na rysunku 1.25 jest jego świetnym przykładem. Wiele witryn wpisujących się w ten wzorzec niekoniecznie posiada główny blok nawigacji w lewej kolumnie — zdarza się, że rozciąga się on wzdłuż górnej krawędzi strony — ale ich cechą wspólną jest podział układu pod jego górną częścią na wąską lewą kolumnę i szeroką prawą. Wizualnie pełni ona rolę podobną do tej wygodnej koszulki bez rękawków, którą nosisz raz w tygodniu, nawet mimo tego, że przyprawia ona Twoją drugą połówkę o palpitacje serca. Z tego powodu układ lewokolumnowy jest bezpiecznym wyborem dla większości projektów.

Rysunek 1.25. Układ lewokolumnowy na witrynie Porsche

Wadą takiego projektu jest to, że brakuje mu inwencji. Układ lewokolumnowy był wykorzystywany tak wiele razy, na tak wiele sposobów i przez okres tak wielu lat, że strony stworzone w tym standardzie wyglądają bardzo podobnie. Oczywiście nie oznacza to, że powinieneś unikać używania tego układu. Powiedziałbym, że jakieś 75% stron, które sam stworzyłem, powstało według schematu lewokolumnowego, ale gdy tylko mogę, staram się go trochę urozmaicić. Jeśli już jesteśmy przy urozmaicaniu, co byś powiedział, żeby wziąć tę kolumnę z lewej i przesunąć ją na prawą stronę? Otrzymałbyś wtedy układ prawokolumnowy.

14

http://www.porsche.com/usa/models/911/

Układ i kompozycja

Układ prawokolumnowy W dzisiejszych czasach o wiele powszechniejszą praktyką stało się przesuwanie treści strony bardziej ku jej lewej krawędzi, podczas gdy nawigację, reklamy i treść drugorzędną umieszcza się bliżej prawej. Konfiguracja ta jest bardzo popularna na serwisach z wiadomościami, portalach społecznościowych i wszędzie tam, gdzie liczba odnośników jest zbyt duża, aby umieścić je w prostym pasku nawigacji. Witryna Blue Cross Blue Shield of South Carolina15 jest dobrym przykładem takiego układu. Strona na rysunku 1.26 jest czwartostopniowa — co oznacza, że od strony głównej dzielą ją cztery kliknięcia. Umieszczenie drugorzędnej nawigacji bliżej prawej krawędzi sprawia, że nie wchodzi ona w drogę użytkownikowi, który, będąc tak głęboko na witrynie, najprawdopodobniej szuka jakichś konkretnych treści.

Rysunek 1.26. Nawigacja prawokolumnowa witryny Blue Cross Blue Shield of South Carolina

Ostatecznie decyzja o tym, czy umieścić pasek nawigacji po lewej, czy po prawej stronie, zależy od Ciebie oraz od typu i ilości treści, które przyjdzie Ci zorganizować. Jeśli masz stworzyć prostą witrynę, która nie będzie wymagać dodatkowej nawigacji, rozważ zastosowanie wąskiego jednokolumnowego układu. W dobrym projekcie strony często chodzi bardziej o to, co pominiesz, niż o to, co zamieścisz. Jeśli potrzebujesz dodatkowej kolumny, po prostu pamiętaj, że to treść witryny jest tym, po co Twoi goście Cię odwiedzili, i że coraz więcej z nich szuka jej po lewej stronie.

Układ trójkolumnowy Typowy układ trójkolumnowy składa się z szerokiej kolumny pośrodku otoczonej dwiema małymi kolumnami. Sklep internetowy ThinkGeek16, który możesz podziwiać na rysunku 1.27, używa właśnie tego układu strony. Chociaż trzy kolumny mogą być przydatne na stronach z kupą odnośników, treści i reklam, pamiętaj, że zwłaszcza tu wolna przestrzeń jest potrzebna do zachowania równowagi.

15

http://www.southcarolinablues.com/

16

http://www.thinkgeek.com/

43

44

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 1.27. Trójkolumnowy układ witryny ThinkGeek

W poszukiwaniu natchnienia Choć lewo-, prawo- i trójkolumnowy układ stanowią podstawowe układy w projektowaniu stron, pamiętaj, że nie jesteś wcale do nich ograniczony. Obfitość — tak, to dobre słowo — prawdziwa obfitość witryn poświęconych wzorcom projektowym pojawiła się właśnie po to, żeby dzielić się nowymi, innowacyjnymi rozwiązaniami, które mogą Ci pomóc rozwinąć skrzydła. Oto kilka z nich: Unmatched Style (http://unmatchedstyle.com) Znajdziesz tu mnóstwo świetnych galerii CSS. Unmatched Style jest bardziej wybredny w przyjmowaniu zgłoszeń niż wiele innych witryn. Zaciekawić Cię również może dostęp do podcastu wideo i wielu wywiadów. CSS Drive (http://cssdrive.com) Tak jak Unmatched Style, CSS Drive jest przede wszystkim galerią schematów CSS. Tym, co wyróżnia ją spośród innych witryn tego typu, jest uporządkowanie zgłoszonych kompozycji pod względem rodzaju schematów barw i układów. Design Meltdown (http://designmeltdown.com) Pomiędzy rokiem 2005 a 2009 Patrick McNeil zebrał i uporządkował tu tysiące interesujących projektów stron. Korzystając z tych materiałów, opublikował dwie książki i nawet teraz Design Meltdown wciąż służy jako wyjątkowe źródło inspiracji. Pattern Tap (http://patterntap.com) W odróżnieniu od trzech poprzednich przykładów Pattern Tap jest galerią interfejsów, a nie całych witryn. Znajdziesz tu zbiory stylów nawigacji, formularzy kontaktowych, paginacji, odnośników i wielu innych elementów witryny. Yahoo Design Pattern Library (http://developer.yahoo.com/ypatterns) Podobna do serwisu Pattern Tap, ale oferująca mniej przykładów i wariacji na temat komponentów witryny, biblioteka Yahoo jest jednak wciąż świetnym miejscem, w którym można dowiedzieć się wiele o elementach interfejsów.

Układ i kompozycja

Teczka z pomysłami Wiem, co teraz sobie myślisz: „Ekstra! Mam zestaw galerii i bibliotek wzorców do przejrzenia. Tylko co teraz?”. Jedną z najcenniejszych rad, jakiej udzielił mi mój profesor projektowania graficznego, było stworzenie teczki z pomysłami, gdy tylko będę poszukiwał inspiracji do wykonania dużego projektu. Idea jest prosta: jeśli, dajmy na to, pracujesz nad ilustracjami lub marketingowym projektem dotyczącym pociągów, drukujesz i gromadzisz wszystko, co może dać Ci natchnienie, w specjalnej teczce. To naprawdę pomaga w pracy i gdy przyjdzie Ci pracować nad innym „pociągowym” projektem, będziesz miał łatwy dostęp do gotowego źródła inspiracji. Sam długo nie miałem teczki z pomysłami. Jednak kilka lat temu szukałem pewnej witryny, którą widziałem wcześniej w galerii stron, ale której adresu ani nazwy nie byłem sobie w stanie przypomnieć. Jasne, dobrze mieć łatwy dostęp do źródeł inspiracji, ale nawet one mogą się okazać bezużyteczne, jeśli nie będziesz w stanie odnaleźć konkretnego, interesującego Cię przykładu. Wtedy to założyłem swoją cyfrową teczkę z pomysłami. Ostatnio zacząłem korzystać z aplikacji LittleSnapper17 działającej na komputerach typu Mac, która pozwala na wykonanie zrzutu części ekranu lub całej strony internetowej (bez potrzeby jej przewijania i tworzenia wielu plików graficznych). LittleSnapper pozwala też nazwać każdy zrzut i nadać mu odpowiednie oznaczenie, żeby można go było później łatwo znaleźć. Oczywiście niezależnie od tego, jaki system operacyjny preferujesz, każdy oferuje sposoby na zrobienie zrzutów ekranu do Twojej teczki pomysłów. Własne archiwum projektów stron, na których mogę polegać, okazało się bezcenne w niezliczonych sytuacjach, kiedy szukałem natchnienia.

Jak wykonać zrzuty ekranu do teczki z pomysłami 1. Wybierz okno przeglądarki, na której widać stronę do skopiowania. 2. Skopiuj zrzut ekranu przeglądarki do schowka systemowego. „ Na komputerze PC: wciśnij kombinację klawiszy Alt+PrintScreen lub użyj narzędzia Wycinanie (Windows Vista i 7), żeby zrzucić fragment ekranu. „ Na komputerze Mac: wciśnij kombinację klawiszy Shift+Command+4, po czym wciśnij spację, aby zamienić kursor myszy w kamerkę. Następnie, przytrzymując klawisz Ctrl, kliknij okno przeglądarki. 3. Twój zrzut ekranu powinien znajdować się w schowku Twojego systemu. Otwórz nowy dokument w Twoim ulubionym programie graficznym lub edytorze tekstu i wklej go. 4. Zapisz obraz lub dokument do pliku.

17

http://www.realmacsoftware.com/littlesnapper/

45

46

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Nowoczesne trendy Jeśli czujesz się przeciążony natłokiem źródeł, by nawet zacząć się zastanawiać nad założeniem teczki z pomysłami, poświęć kilka chwil na przejrzenie poniższych witryn. Zwróć uwagę nie tylko na kolory i fakturę, ale też na komponenty tworzące ich układy i spróbuj rozpoznać koncepcje i trendy, według których zostały zaprojektowane. Robiąc to, sam zauważyłem kilka nowych tendencji obecnych w projektowaniu stron.

Styl beznawigacyjny Jeśli czytasz teraz ten akapit, domyślam się, że nie dotarłeś do niego, korzystając ze spisu treści. W sieci ludzie bardziej skupiają się na celu i przetwarzają informacje częściami, w małych porcjach. Menu nawigacji witryny pozwala nam działać szybko, wydajnie i… chaotycznie. Co, jeśli nie chcemy, aby nasi użytkownicy uciekali ot tak z naszej strony? Co, jeśli informację, którą mamy przekazać, najlepiej przetworzyć w całości, tak jak książkę bądź artykuł? Czy w takim przypadku w ogóle opłaca się tworzyć nawigację? Takie właśnie podejście przyjmuje witryna Design Informer18 w każdym zamieszczonym artykule o sztuce. Poza małym logo witryny, umieszczonym w nagłówku strony, nie uświadczysz na niej żadnych odnośników, do czasu aż zjedziesz na jej spód i przejrzysz sekcję komentarzy w stopce. „Raptem jedna witryna korzysta z tego układu i już wyznacza trend?” — zapytasz. Sprawdź inne przykłady na rysunku 1.28: witryny The Bold Italic19 i UX2020.

Rysunek 1.28. Nie uświadczysz tu nawigacji, za to znajdziesz pełno wspaniałych treści

18

http://designinformer.com/

19

http://thebolditalic.com/

20

http://52weeksofux.com/

Układ i kompozycja

Ekspansywna stopka Stosowanie ekspansywnej stopki to bardziej fenomen niż trend. Omawiałem ją w pierwszym wydaniu tej książki i muszę powiedzieć, że od tego czasu taka stopka sporo urosła, biorąc pod uwagę jej zwyczajowy rozmiar i ilość informacji, jaką można w niej znaleźć. Zamiast używać stopki do wyświetlania podstawowych odnośników i informacji o prawach autorskich, wiele witryn wykorzystuje tę swego czasu zaniedbaną część strony, używaną do przekazywania informacji kontaktowych, tak żeby rozszerzała nawigację i prezentowała zawartość pobraną z portali społecznościowych. Choć umieszczenie głównego menu nawigacji u dołu witryny byłoby złym pomysłem, dodanie dodatkowej nawigacji i treści jest świetnym rozwiązaniem. Dobrym przykładem tej tendencji jest zaprojektowana przez FortySeven Media witryna Show & Tell Consignment Sale21, widoczna na rysunku 1.29.

Rysunek 1.29. Dodatkowa treść w stopce witryny Show & Tell Consignment Sale

Odwiedź też witryny: „ Mozilla — http://www.mozilla.org/ „ Creamy CSS — http://creamycss.com/ „ i portal wydawnictwa SitePoint — http://www.sitepoint.com/

21

http://showandtellsale.com/

47

48

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Minimalizm Wzorując się na stylu beznawigacyjnym i wbrew koncepcji ekspansywnej stopki, z mnóstwa witryn usuwa się wiele standardowych komponentów strony internetowej. W projekcie minimalistycznym chodzi o zredukowanie liczby elementów układu do niezbędnego minimum. Na rysunku 1.30 widać, jak witryna Analog Coop22 osiąga właśnie coś takiego, ograniczając całą kompozycję do pojedynczej, ciekawej strony. Z kolei Kha Hoang23, sam będąc minimalistą, umieścił na swojej witrynie listę odnośników do portfolio, cytat designerski i informacje kontaktowe. Pomysł ten łatwo zastosować samemu: po prostu przeanalizuj każdy element witryny i zadaj sobie pytanie, co dodaje on do Twojej strony. Jeśli nie znajdziesz odpowiedzi, po prostu go wyrzuć.

Rysunek 1.30. Dwie strony minimalizmu: Analog Coop i portfolio Kha Hoanga

Minimalizm nie jest w żadnym razie nowym trendem w projektowaniu — nawet na potrzeby sieci. W świecie sztuki nurt minimalistyczny lat 60. i 70. XX wieku był odpowiedzią na wyrazistą epokę ekspresjonizmu abstrakcyjnego. Podobnie teraz nagła popularność minimalistycznych, jednostronicowych projektów witryn w sieci jest reakcją na zbyt ekspresyjną filozofię ery Web 2.0. Minimalizm stanowi próbę odcięcia się od zgiełku i harmideru wywołanego zalewem informacją przez stworzenie sieciowego odpowiednika spokojnej kawiarenki lub cichej galerii sztuki. Zobacz też: „ Brand New — http://www.underconsideration.com/brandnew/ „ Sage Media — http://www.sagemediari.com/

Zmiana rozmiaru: układy stałe, płynne i reaktywne W czasie gdy rysowaliśmy wspólnie nasz pierwszy układ za pomocą papieru i ołówka, wyjaśniłem, że zewnętrzny prostokąt naszego projektu jest tak naprawdę naszym blokiem z zawartością. W projektowaniu poligraficznym blok zawartości jest przedmiotem fizycznym, takim jak wizytówka czy bilbord. W świecie sieci nasza zawartość mieści się w oknie przeglądarki. 22

http://analog.coop/

23

http://khahoang.com/

Układ i kompozycja

Czy powinniśmy jej pozwolić na wypełnienie okna, czy powinna ona mieć stałą szerokość? Pytanie to prześladowało web designerów przez setki, jeśli nie tysiące lat — jeszcze w czasach, gdy wszyscy używaliśmy tabel i sztuczki z plikiem spacer.gif, żeby rozmieszczać elementy strony. OK, może nie było to dosłownie tysiące lat temu, ale już dawno stanowiło przedmiot poważnej debaty.

Stała szerokość Jeśli zacząłeś tworzyć swoją stronę za pomocą 960 Grid System, o którym wspomniałem wcześniej, wszystko wskazuje na to, że będzie ona używać układu stałego. Ten typ układu znajduje się wewnątrz znacznika div, któremu nadano pewną szerokość (powiedzmy, 960 pikseli) i który wycentrowano za pomocą właściwości CSS — margin:0 auto;. Jeżeli okno przeglądarki będzie szersze niż 960 pikseli, ujrzysz tło zdefiniowane dla znacznika body po lewej i prawej stronie bloku z zawartością; jeśli jest mniejsze, pojawi się pasek przewijania w poziomie. Układy stałe łatwiej jest zaprojektować i utrzymać, ponieważ stosując je, budujesz dokładnie to, co zaprojektowałeś w Photoshopie. Rysunek 1.31 ukazuje podobnie wyglądające struktury układów stałych i pływających w oknach przeglądarek o takich samych wymiarach.

Rysunek 1.31. Układ stały i płynny — lub ściśnięty i rozdęty, jeśli wolisz

Szerokość płynna Układ płynny, zwany również pływającym, tworzy się, nadając jego elementom wymiary wyrażone w procentach, tak że blok z zawartością dopasowuje się do rozmiarów okna. Takie podejście wymaga więcej pomyślunku, ponieważ musisz przewidzieć problemy, które mogą wynikać ze zmiany wielkości strony. Zdarza się co prawda, że kolumn o stałej szerokości używa się obok kolumn o wymiarach płynnych, ale pamiętaj, że celem tego układu jest umieszczenie na ekranie tak wielu treści, jak to tylko możliwe. Najczęściej w układach płynnych korzysta się z właściwości CSS min-width i max-width, które zapewniają, że element strony nie stanie się zbyt wąski lub szeroki. Jedną z przyczyn odrzucenia przez niektórych projektantów układu płynnego jest przekonanie, że utrudnia on używanie siatki. Jest jednak kilka świetnych źródeł, które to umożliwiają, włączając w to wariację na temat aplikacji 960 Grid System24. Ostatecznie decyzja o tym, czy użyć takiego, a nie innego układu, zależy od grupy docelowych użytkowników i stopnia łatwości obsługi witryny. Zalety i wady obu układów przedstawiłem dość wyczerpująco w tabeli 1.1.

24

http://www.designinfluences.com/fluid960gs/

49

50

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Tabela 1.1. Zalety i wady układu stałego i płynnego — starcie tytanów Zalety

Układ stały

„ daje projektantowi kontrolę nad sposobem, w jaki grafika znajdująca się wewnątrz opływającej ją treści będzie wyglądać „ pozwala rozplanować wolną przestrzeń „ ułatwia czytanie tekstu w węższych kolumnach

Układ płynny

„ przystosowuje się samoczynnie do rozdzielczości wyświetlaczy różnych urządzeń „ zmniejsza potrzebę przewijania strony

Wady

„ może wyglądać karłowato w dużych oknach przeglądarki „ użytkownik nie ma wpływu na wielkość strony

„ tekst trudny do przeczytania, jeśli znajduje się w bardzo szerokiej kolumnie „ trudniejszy do poprawnego zaprojektowania „ ogranicza lub narzuca wolną przestrzeń

Mając w pamięci te zalety i wady, muszę przyznać, że zaprojektowałem więcej układów stałych niż płynnych. Lubię mieć pełną kontrolę nad treścią i wolną przestrzenią. Z drugiej strony, podoba mi się wyzwanie, które stawiają przede mną układy płynne. Jednak niezależnie od Twoich osobistych preferencji to potrzeby klienta są najważniejsze. Decydując się na układ stały, musisz pamiętać o przyszłych użytkownikach witryny — musisz zaprojektować go tak, aby odpowiadał on ich oczekiwaniom.

Alternatywa: układ reaktywny Ktoś kiedyś powiedział, że od każdej zasady są wyjątki. Słowa te sprawdzają się w świecie web designu — projektanci wymyślili wiele wariantów i hybryd łączących struktury układu stałego z elementami układu płynnego. Niedawno czytałem artykuły, w których wymieniono w sumie dziesięć różnych rodzajów układów. Większość z nich można by jednak zaliczyć do jednego z dwóch wymienionych wcześniej typów kompozycji. Jednakże artykuł, który znalazłem na witrynie A List Apart, omawia całkowicie nowatorski układ, który — jak myślę — będziemy widzieć w internecie coraz częściej. Tytuł tego artykułu to Responsive Web Design25, a jego autorem jest Ethan Marcotte. Zamiast przytaczać w tym miejscu treść całego artykułu, polecam, żebyś sam się z nim zapoznał. Gdybym miał nazwać omówioną w nim technikę, ochrzcił bym ją mianem „Wszechmocnej Metody Morfingu Rtęciowego”, ale to pewnie z powodu mego grafomaństwa sam jej nie wymyśliłem. Kluczową koncepcją jest to, że urządzenia przenośne czynią wymiarowanie stron na każdy rodzaj ekranu niemożliwym — w rezultacie rośnie zapotrzebowanie na bardziej płynne układy stron. Technika, o której mowa, wykorzystuje wymyślne płynne skalowanie i możliwości 25

http://www.alistapart.com/articles/responsive-web-design/

Układ i kompozycja

zapytań medialnych CSS3, umożliwiając kompletną przemianę układu, gdy jego szerokość przekroczy pewien próg. Zrzuty ekranów na rysunku 1.32 pokazują wygląd jednej strony w oknach przeglądarki o różnych długościach.

Rysunek 1.32. Kompozycja przystosowująca się do wyświetlania na komórce, monitorze i Jumbotronie

Reaktywne podejście Ethana (czyli moja „Wszechmocna Metoda Morfingu Rtęciowego”) stanowi idealne rozwiązanie problemu, któremu przyjrzymy się za chwilę — kwestii rozdzielczości ekranu.

51

52

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rozdzielczość ekranu W porównaniu z dyskusją dotyczącą wyższości układu stałego nad płynnym debata o wyborze odpowiedniej rozdzielczości była w ostatnich latach dość spokojna. Gdy projektanci mówią, że dana witryna została zaprojektowana lub zoptymalizowana pod określoną rozdzielczość, mają na myśli rozdzielczość wyświetlacza urządzenia użytkownika. W przeszłości dyskusja ta skupiała się wokół pytania: „Czy nasze projekty powinny być przystosowane do rozdzielczości monitorów 800×600 pikseli, tak aby pasek przewijania w poziomie nie był wyświetlany?”.

Rozdzielczość ekranu Według danych statystycznych ze stycznia 2011 roku, udostępnionych przez W3Schools26, 0,6% użytkowników sieci korzystało w swoich komputerach z rozdzielczości 800×600 pikseli (spadek z 1% w roku 2010), 13,8% z rozdzielczości 1024×768 pikseli (spadek z 20%) i — imponujące — 85,1% z rozdzielczości wyższej niż 1024×768 pikseli. Rysunek 1.33 ilustruje te tendencje.

Rysunek 1.33. Użycie rozdzielczości w internecie według danych W3Schools.

Obecnie zakłada się, że przeglądarki stron wyświetlają treść w rozdzielczości co najmniej 1024×768 pikseli. Nawet większość netbooków obsługuje rozdzielczość 1024×600 pikseli i większe. Wnioskując z raportów W3Schools, wskazujących na wzrost popularności rozdzielczości przekraczających 1024 piksele w poziomie, można by przepuszczać, że standardowa szerokość 960 pikseli wkrótce również odejdzie do lamusa. Jest jednak kilka przesłanek wskazujących, że raczej tak się nie stanie. Po pierwsze, większość użytkowników dużych monitorów ustawia szerokość okna przeglądarki na mniej niż 1024 piksele, tak by widzieć inne aplikacje działające w tle. Drugim powodem jest długość tekstu w linii. Jeśli linia tekstu jest za długa, staje się on mniej czytelny. Z tego powodu szersze układy stron pozwoliłyby nam jedynie na dodanie większej liczby kolumn.

26

http://www.w3schools.com/browsers/browsers_display.asp

Układ i kompozycja

Chociaż przytoczone dane statystyczne wyjaśniają powszechne wykorzystanie układów szerokich na 960 pikseli, nie biorą one pod uwagę ważnego segmentu ogółu internautów — użytkowników urządzeń przenośnych. Cytując artykuł o reaktywnym web designie, o którym wspomniałem wcześniej, należy się spodziewać, że w ciągu najbliższych pięciu lat odsetek internautów mobilnych przekroczy liczbę tradycyjnych użytkowników sieci. Można przypuszczać, że wraz ze wzrostem rozdzielczości mobilnych wyświetlaczy i przeglądarek, które doganiają swoich stacjonarnych kuzynów, Twój projekt będzie czytelny na nowoczesnych urządzeniach przenośnych. Mimo to wciąż powinieneś pamiętać o testowaniu stron pod kątem kompatybilności z nimi. Jeśli robisz, co tylko w Twojej mocy, żeby Twoja kompozycja prezentowała się dobrze pod Internet Explorerem 7, czy nie powinieneś jej sprawdzić również na przeglądarce Twojego telefonu lub tabletu? A tak na serio, wiele witryn posiada swoje alternatywne wersje wyświetlane dla urządzeń przenośnych. Oznacza to oczywiście, że coraz więcej klientów będzie wymagać ich implementacji. Przykładem takiej właśnie kompozycji jest widoczna na rysunku 1.34 witryna Blip.tv27. Dawniej stworzenie podobnego układu było bardzo niewdzięcznym zadaniem, gdyż trzeba było używać języków programowania takich jak WML lub użerać się z przeglądarkami w rodzaju RIM OS pod BlackBerry.

Rysunek 1.34. Blip.tv pod iOS (zobacz sam pod adresem http://cssiphone.com/)

Na szczęście obecnie zaprojektowanie wersji na urządzenia mobilne ogranicza się do prostego przystosowania Twojego ogólnego układu do pracy na małym ekranie, przy jak najlepszym wykorzystaniu dodatkowych możliwości systemu operacyjnego. Techniczne detale projektowania stron zoptymalizowanych dla urządzeń przenośnych pozostają poza tematyką tej książki, ale teorie, o których powiedziałem wcześniej, wciąż znajdują tu swoje zastosowanie. Ostatecznie niezależnie od tego, co projektujesz, potrzeby Twoich klientów i przyszłych odbiorców ich usług powinny stać za każdą Twoją decyzją.

27

http://blip.tv/

53

54

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Praktyczne wykorzystanie: Southern Savers Często wiele z tego, co my, projektanci, robimy, ma charakter podświadomy. Zwykle łatwo nam przychodzi wyjaśnienie komuś, dlaczego podjęliśmy taką, a nie inną decyzję, ale już nakreślenie procesu, w jakim do niej doszliśmy, sprawia nam znaczną trudność. Czasem najlepszym sposobem na wyjaśnienie, jak wdrażać zasady projektowania, jest wspólne przejście przez cały proces projektowania praktycznej witryny. Pozwól, proszę, przedstawić sobie — oto Southern Savers28 — praktyczny projekt strony dla prawdziwego klienta. W czerwcu 2008 roku Jenny Martin uruchomiła blog Southern Savers na portalu Blogger.com, żeby podzielić się z innymi informacjami o wyprzedażach w sklepach spożywczych, które odnalazła wspólnie z przyjaciółmi. Po kilku krótkich miesiącach okazało się, że jej witryna rozrosła się zbyt mocno jak na możliwości Bloggera, więc jej mąż James przeniósł ją na hostowany przez siebie blog WordPressa. Ani Jenny, ani James nie posiadali żadnego doświadczenia w projektowaniu witryn, toteż zakupili szablon WordPressa i stworzyli grafikę dla nagłówka. Jenny mogła dalej publikować nowe artykuły. Trochę ponad dwa lata od daty uruchomienia witryna jest wyświetlana około 3 miliony razy w miesiącu i posiada ponad 60 tysięcy fanów na Facebooku — wszystko przy użyciu prostego szablonu, który możesz podziwiać na rysunku 1.35.

Rysunek 1.35. Dawny szablon strony Southern Savers 28

http://www.southernsavers.com/

Układ i kompozycja

Jenny już dawno temu doszła do wniosku, że stronie przydałaby się pełna przebudowa, wobec czego wynajęła profesjonalnych projektantów stron z firmy Squared Eye29 do prac nad nią. Jako przyjaciel Jenny i Matthew Smitha ze Squared Eye miałem możliwość obserwowania przebiegu procesu rozwoju witryny z punktu widzenia klienta i projektanta, co było interesującym doświadczeniem. Uważam, że śledzenie etapów tego procesu w kolejnych rozdziałach tej książki będzie bardzo pouczające również dla Ciebie, więc jestem wdzięczny Jenny i Matthew, że pozwolili mi wykorzystać ich projekt w tej publikacji.

Początek Najczęściej klienci mają listę wymagań dotyczących wyglądu i sposobu funkcjonowania witryny. W zależności od klienta jego pomysły mogą Ci pomóc lub utrudnić pracę — najczęściej to drugie. Jednak w przypadku tego projektu zespół Squared Eye dostał wolną rękę — mógł przebudować i przebrandować witrynę w dowolny sposób. Już na samym początku Matthew zdał sobie sprawę, że on i jego podwładni muszą zrozumieć nie tylko, jak Southern Savers działa, ale też dowiedzieć się, kim są użytkownicy witryny i dlaczego ją odwiedzają. Niezależny strateg sieciowy i architekt informacji Emily Smith wyjaśnia: „Przed rozpoczęciem projektowania musieliśmy przejść etap odkrywania, żeby móc zdefiniować nasze cele. Poszliśmy wspólnie na jeden z warsztatów Jenny poświęcony praktyce oszczędzania i porozmawialiśmy z jego uczestnikami. Ocenialiśmy, jak stali goście witryny z niej korzystają — zaglądając im przez ramię, rozmawiając o opcjach i funkcjach, na których polegają, i obserwując, jak się poruszają po stronie”.

Testy użytkowników Dokładnie ten termin odnosi się do czynności, którą Emily opisała słowami „zaglądając im przez ramię”. Obserwowanie zachowania użytkowników przed i po przebudowaniu witryny jest dobrym sposobem na zmierzenie sukcesu przedsięwzięcia. Świetnym narzędziem przydatnym w testach użytkowych jest Silverback30. Zebrawszy do kupy to, czego dowiedzieli się w trakcie spotkania z Jenny i innymi użytkownikami witryny, Emily i reszta ekipy Squared Eye pochylili się wspólnie nad stołem projektowym. „Wypisaliśmy cechy charakteru osób korzystających z portalu i przyporządkowaliśmy je do konkretnych typów osobowości” — powiedział Matthew. Następnie zespół przystąpił do etapu poznawania, czyli określenia tego, jak zorganizować informacje w taki sposób, żeby i nowi, i starzy użytkownicy mogli łatwo znaleźć to, czego szukają.

29

http://squaredeye.com/

30

http://silverbackapp.com/

55

56

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Wcześniej wspomniałem, że notesik karteczek samoprzylepnych i tablica nadają się znakomicie do planowania architektury informacji. Emily wykorzystała oba te narzędzia w tej fazie przeprojektowywania Southern Savers. Jak widać na rysunku 1.36, trzeba było zorganizować dużo treści — ściana biura znakomicie się do tego nadaje. Gdy Emily miała już wszystkie strony uporządkowane według sekcji nawigacji, nastał czas, żeby zacząć pracę nad układem witryny. Wiadomo było, że część główna kompozycji musi być szeroka na 960 pikseli i że większość stron będzie wykorzystywać dwukolumnową strukturę. W szablonie miało się znajdować wiele elementów nawigacji, dlatego też Emily zaprojektowała szkielet układu wcześniej w Omnigraffle31 — programie napisanym dla komputerów Mac. Zaproponowany przez nią szkielet strony głównej możesz podziwiać na rysunku 1.37.

Rysunek 1.36. Architektura informacji i samoprzylepne karteczki

Rysunek 1.37. Zaproponowany szkielet strony głównej Southern Savers

31

http://www.omnigroup.com/products/omnigraffle/

Układ i kompozycja

Zwróć uwagę na to, że w tym przykładzie brak jakichkolwiek grafik i elementów HTML-a. Celem szkieletu jest określenie struktury układu strony i umiejscowienia elementów. Mówiłem wcześniej w tym rozdziale, że dobry projekt „identyfikuje stronę jako należącą do danej witryny”. Nie musi to oznaczać, że układ każdej strony ma być taki sam. Właściwie dobrze jest popracować nad kontrastem pomiędzy stroną główną a pozostałymi sekcjami witryny. Tworząc szkielety dla innych części projektu, Emily dodała jej pikanterii, budując alternatywne układy, takie jak sekcja „Learn to Coupon” widoczna na rysunku 1.38.

Rysunek 1.38. Szkielet strony „Learn to Coupon” witryny Southern Savers

OK, może przesadziłem z tym „dodaniem pikanterii”, podając jako przykład bezbarwny szkielet strony, ale sam musisz przyznać, że jest tu coś na rzeczy. Teraz, gdy rozplanowaliśmy układ dla Southern Savers, czas omówić kolejny temat — kolor.

57

58

Rozdział

2

Kolor Niezależnie od tego, czy rozbrajasz bombę, czy starasz się zaprojektować przyzwoicie wyglądającą stronę internetową — wybór nieodpowiedniego koloru może skończyć się katastrofą. No dobra, jeśli wybierzesz złą kolorystykę na stronę klienta, nic nie urwie Ci głowy, ale ta jedna nieprzemyślana decyzja może skutecznie przystopować Twoją karierę web designera. Dobór barw nie jest sprawą prostą. Estetyka, użyteczność i ogólnie pojęty „charakter” to czynniki, które należy wziąć pod uwagę. Co gorsza, większość współczesnych ekranów jest w stanie wyświetlić ponad szesnaście milionów kolorów! Pomyśl tylko! To prawie nieskończona liczba sposobów na zrujnowanie wizerunku strony! Na szczęście nie trzeba być objuczonym próbkami konsultantem wnętrz, żeby móc dokonywać właściwych wyborów kolorystyki. Bogactwo wiedzy jest dostępne tu, na wyciągniecie ręki; poczynając od pseudopsychologicznych wskazówek, po sprawdzone teorie koloru. To wszystko z pewnością pomoże Ci dokonać trafnego wyboru kolorów na stronę.

Psychologia koloru Psychologia koloru jest dziedziną nauki, która zajmuje się badaniem wpływu barw na kondycję emocjonalną i zachowanie człowieka. Właściciele sklepów internetowych pragną wiedzieć, jakie kombinacje kolorów mogłyby skłonić ich klientów do dokonania zakupu. Dekoratorzy wnętrz poszukują zestawień pigmentów, które byłyby w stanie przeobrazić zwykłą sypialnię w zaciszny zakątek zen. Z kolei szefowie sieci fast foodów daliby sobie uciąć ręce za kombinację barw mogącą wzbudzić w ich klientach wilczy apetyt. Jak widać, psychologia kolorów to poważny biznes. Ważne jest, by wiedzieć, jak kombinacje barw mogą wpływać na odczucia ogółu. Trzeba jednak przy tym pamiętać: pomysł, iż wszyscy ludzie reagują na dany kolor tak samo, jest po prostu niedorzeczny. Często reakcje, które psychologowie przypisują danej barwie, nijak się mają do tych wynikających z osobistych doświadczeń człowieka. Co ciekawsze, również pomiędzy różnymi

60

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

kręgami kulturowymi można wyróżnić odmienne sposoby interpretacji tej samej barwy. Mając te zastrzeżenia na uwadze, spróbujmy jednak przeanalizować, jakie skojarzenia u ogółu ludzi ze społeczeństw zachodnich mogą wywołać konkretne kolory.

Kolorystyczne skojarzenia — symbolika koloru Opisywanie związku między barwą a Twoim nastrojem może Ci się wydać trochę hipisowskie. Jeśli nie wiesz, o czym mówię, po prostu odwiedź swój ulubiony internetowy sklep muzyczny i odsłuchaj płytę Colors Kena Nordine’a. Choć prawdą jest, iż większość projektantów nie podejmuje decyzji wyłącznie na podstawie subiektywnych odczuć związanych z danym kolorem, warto wiedzieć, jaki typ ładunku emocjonalnego niosą ze sobą pewne grupy barw. Czerwony Czerwień ma opinię barwy wyzwalającej zastrzyk adrenaliny, wywołującej skok ciśnienia tętniczego. W parze z tymi fizjologicznymi objawami idzie ogólne wzmożenie metabolizmu. Jest kolorem ekscytującym, podniecającym, żywym. Czerwień jest również kolorem namiętności. Nic nie wyraża miłości pełniej od wymalowanego na ścianie jaskrawoczerwonego obrazu dla ukochanej. Rzuć okiem na rysunek 2.1 i powiedz, że nie mam racji. Ciemniejsze odcienie czerwieni, wśród nich kasztan i burgund, wywołują skojarzenia z bogactwem i wręcz ujmująco dogadzającym luksusem. Prawdę mówiąc, przebija z nich nutka snobizmu. Pamiętaj o tych kolorach, gdy docelowymi odbiorcami Twojego dzieła mają być koneserzy win czy entuzjaści stylowego życia.

Rysunek 2.1. Czerwień i sześć litrów uczucia

Pomarańczowy Podobnie jak czerwień, pomarańcz wręcz buzuje energią. Nie łączy się go jednak z miłością. Mimo to kojarzy się tę barwę z radością, entuzjazmem, kreatywnością i słońcem. Pomarańcz nie ma w sobie krzty snobizmu charakterystycznego dla czerwieni. Być może właśnie dlatego projektanci promującego podróżowanie portalu społecznościowego Gowalla32 użyli go w swoim logo. Kolor ten nie występuje często w naturze, wobec czego łatwo rzuca się w oczy. Z tej właśnie przyczyny barwi on kamizelki ratunkowe, kamizelki odblaskowe czy pachołki znaczące roboty drogowe. Pomarańcz stymuluje pracę układu trawiennego, a co z tym idzie, wpływa na 32

http://gowalla.com/

Kolor

apetyt. To sprawia, że barwa ta sprawdza się wyśmienicie w promowaniu żywności i usług żywieniowych. Pewnie dlatego sam widok pomarańczy na rysunku 2.2 sprawia, że cieknie Ci ślinka. Nawet jeśli nie lubisz cytrusów.

Rysunek 2.2. Pomarańczowe pomarańcze — ślinka cieknie na sam widok, czyż nie?

Żółty Żółć jest kolejnym żywym, bardzo jaskrawym kolorem. Nie dziwi więc to, że w wielu krajach barwi ona taksówki i znaki ostrzegania. Kolor ten kojarzy się również mocno ze szczęściem, toteż, jak ilustruje rysunek 2.3, stał się on niemalże znakiem firmowym uśmiechu. W Stanach Zjednoczonych jedną z najpopularniejszych marek napojów energetyzujących jest Gatorade, a wśród bogatej oferty produktów właśnie smaki pomarańczowy i cytrynowy sprzedają się najlepiej. Prawdopodobnie, przynajmniej w części, wynika to z energetyzujących skojarzeń, jakie wywołują kolory opakowań tych napojów, odpowiednio — pomarańczowy i żółty.

Rysunek 2.3. Żółty kolorem uśmiechu :-)

Jedną z najczęściej przytaczanych przy omawianiu właściwości koloru żółtego jest anonimowa wypowiedź: „Niemowlęta częściej płaczą w żółtych pokojach, żony częściej kłócą się z mężami w żółtych kuchniach, a śpiewaczki operowe częściej podnoszą raban w żółtych garderobach”. Niezależnie od tego, czy jest ona w 100% prawdziwa, faktem jest, że w zbyt dużych ilościach żółć może być przytłaczająca. Co, nie wierzysz? Gdybyś jako niemowlę został sam w żółtej garderobie z parą kłócących się małżonków i rozhisteryzowaną primadonną — też byś płakał!

61

62

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Zielony Zieleń najczęściej kojarzymy z naturą. Ta kojąca barwa symbolizuje wzrost, świeżość i nadzieję. Nie dziwi więc, że łączy się ją z ochroną środowiska. Zieleń jest kolorem mniej dynamicznym, ale też mniej rażącym wzrok niż żółć, pomarańcz czy czerwień. Jest też bardzo wszechstronna. Poza używaniem jej w projektach mających budzić skojarzenia z naturą zieleń sprawdza się świetnie wszędzie tam, gdzie mowa o bogactwie, stabilności bądź edukacji. Jasny odcień zieleni na czarnym tle łatwo rzuca się w oczy, nadając projektowi „oldschoolowy” technologiczny wygląd. Właśnie takie zestawienie przypomniało mi mój pierwszy komputerek — stary dobry Apple IIe. Zainspirowało mnie to do stworzenia ekranu ładowania dla serwisu MailChimp — w formie, którą możesz podziwiać poniżej (rysunek 2.4).

Rysunek 2.4. Pan Szympans w wydaniu ASCII

Niebieski Gdy byłem dzieckiem, uwielbiałem błękit. Modry błękit kredek Crayola — to było to. Inne dzieci są zwykle mniej wybredne, ale faktem jest, iż błękit i inne warianty koloru niebieskiego są najbardziej lubianą grupą kolorów. Na poziomie czysto emocjonalnym barwa niebieska symbolizuje otwartość, inteligencję i wiarę. Udowodniono, że ma ona działanie uspokajające. Z drugiej jednak strony, dowiedziono również, że niebieski obniża apetyt. Rzadkość występowania tego koloru w jedzeniu z pewnością odgrywa tu pewną rolę. Niektórzy mówią, że jagody są niebieskie. No dobra. Oprócz jagód, ile jesteś w stanie wymienić nazw niebieskiego jedzenia? Właśnie z tego powodu niebieski wydaje się wykluczony z palety barw „apetycznych”. Nie trzeba chyba dodawać, że użycie go w promowaniu żywności byłoby co najmniej nierozsądną decyzją.

Kolor

Co więcej, dla wielu pech lub nieszczęście idą w parze z kolorem niebieskim. To skojarzenie jest odzwierciedlane choćby w muzyce bluesowej czy twórczości Pabla Picassa z melancholijnego, „błękitnego” okresu. Na szczęście niebieski to nie tylko kosmiczne jedzenie czy depresyjne formy artystyczne. Barwa ta jest mimo wszystko atrakcyjna, głównie przez naturalne skojarzenia z niebem i morzem. Sama obecność tego koloru w tle wieży z kamieni na rysunku 2.5 odpręża.

Rysunek 2.5. Kojący widok: niebo, morze i kamienie

Właśnie to sprawia, że niebieski powinien być Twoim wyborem numer jeden przy projektowaniu stron w jakiś sposób związanych z liniami lotniczymi, urządzeniami klimatyzacyjnymi, filtrami do basenów, rejsami pełnomorskimi itp. Tak przy okazji, czy zauważyłeś, że niebieski jest kolorem dominującym w logosach produktów takich firm, jak IBM, Dell, HP czy Microsoft? To dlatego, że wzmaga on poczucie stabilności i pewności w dążeniu do celu… przynajmniej do następnego wyświetlenia Niebieskiego Ekranu Śmierci! Fiolet Z historycznego punktu widzenia fiolet kojarzy się w pierwszej kolejności ze szlachectwem i władzą, o czym może świadczyć znaczek pocztowy na rysunku 2.6. Tajemnica tak prestiżowego znaczenia tego koloru kryje się w trudności uzyskania barwnika potrzebnego do stworzenia fioletowych tkanin. Nawet dziś fiolet oznacza bogactwo oraz ekstrawagancję. Ten drugi aspekt znajduje swoje odzwierciedlenie w samej naturze: fiolet występuje w kwiatach, kamieniach szlachetnych i winie. Równoważy on stymulujący wpływ czerwieni i kojące oddziaływanie koloru niebieskiego. Według Patricka McNeila, autora książki The Web Designer’s Idea Book33, fiolet jest jednym z najrzadziej używanych kolorów w projektowaniu stron internetowych. Jak stwierdził, odnalezienie przykładów stron dobrze wykorzystujących potencjał tej barwy 33

Patrick McNeil, The Web Designer’s Idea Book, How Books, Cincinnati 2008.

63

64

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

było na tyle trudne, że prawie zdecydował się on wyrzucić poświęcony jej podrozdział ze swej książki. Wniosek z tego jest prosty: jeśli pragniesz stworzyć projekt strony wybijający się wśród innych, rozważ użycie różnych wariantów fioletu.

Rysunek 2.6. Fioletowy herb na norweskim znaczku pocztowym

Biel Może Ci się wydawać, że w kolorze turbin wiatrowych na rysunku 2.7 nie ma nic specjalnego, ale użycie bieli w tym kontekście, w ten sposób, wzmacnia przesłanie zdjęcia — ideę odnawialnych źródeł energii. Dla osób wychowanych w zachodnich kulturach biel oznacza doskonałość, czystość i jasność. Dlatego też widzisz śnieżnobiałe obrusy w telewizyjnych reklamach detergentów czy śnieżnobiałe suknie na weselach. Jak głęboko te znaczenia bieli są zakorzenione w naszej kulturze, pokazuje na przykład Robert Frost w swoim wierszu Design34. Frost używa w nim gry skojarzeń, wykorzystując biel jako symbol śmierci i ciemności. Co interesujące, w kulturze chińskiej biel jest kolorem kojarzonym właśnie ze śmiercią i żałobą. Różnice światopoglądowe tego typu powinny Ci przypominać, aby mieć na uwadze gusta kolorystyczne Twojej publiki, gdyż mogą się one różnić od Twoich własnych. Jeżeli chodzi o samo projektowanie stron, biel jest często niedoceniana, jako że stanowi domyślny kolor tła. Nie bój się jednak trochę z nią poeksperymentować. Spróbuj użyć ciemniejszych kolorów w roli tła i białego testu. Możesz też stworzyć kolorowy obszar otoczony ramami z bieli, tak aby rzucał się w oczy. Użycie kolorów w ekstrawagancki sposób może być Twoją śmiałą deklaracją artystyczną.

34

Utwór nie doczekał się tłumaczenia na język polski — oryginalny tekst (w języku angielskim) można znaleźć m.in. w The Norton Anthology of Poetry (5th edition) pod red. Margaret Ferguson, Mary Jo Salter i Jona Stallworthy’ego (W.W. Norton & Company, New York 2004) albo na stronie http://www.americanpoems.com/poets/robertfrost/692 — przyp. tłum.

Kolor

Rysunek 2.7. Może te turbiny i są białe, ale ich przesłanie jest zielone

Czerń Pomimo że czerń niesie ze sobą bagaż negatywnych skojarzeń, takich jak śmierć lub zło, jest ona też kolorem potęgi, elegancji i siły, co prezentuje rysunek 2.8. Wszystko zależy od tego, jak jej użyjesz. Gdy rozważasz wykorzystanie konkretnej barwy, zawsze dobrze jest zadać sobie pytanie: „Jaka jest pierwsza rzecz, która mi przychodzi do głowy, kiedy myślę o tym kolorze?”. Dla przykładu gdy sam myślę o czerni, od razu mam przed oczami Johnny’ego Casha, smokingi i Batmana. Gdy skupię swoją uwagę na Johnnym Cashu, jego ciemny ubiór, głęboki głos i przepełnione smutkiem piosenki nadają namacalne znaczenie skojarzeniu łączącym tego człowieka i barwę.

Rysunek 2.8. Czerń — kolor symbolizujący władzę, elegancję i, w tym przypadku, przesadę

Jeśli zastosujesz tę metodę tworzenia trzywyrazowych skojarzeń z danym kolorem, zrozumienie gustów kolorystycznych Twoich klientów będzie dużo łatwiejsze.

65

66

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Psychologia kolorów pełni ważną rolę w odbiorze strony przez użytkowników. Pamiętaj jednak — żadna barwa nie jest zła sama w sobie. O ile psychologiczne rozważania mogą pomóc Ci dokonać odpowiedniej selekcji barw i wybrać ich podstawową paletę, to sukces całej kompozycji zależy od harmonii pomiędzy jej poszczególnymi elementami. Aby móc stworzyć taką harmonię, musisz pamiętać o kilku innych atrybutach koloru.

Temperatura barwowa Jedną z cech dzieloną przez całe spektrum barw jest tzw. temperatura barwowa. Jaki kolor ma kurek w kranie odkręcający gorącą wodę? Który kolor kojarzy Ci się z lodem? Dlaczego? Odpowiedzi na te pytania są proste, bo narzucone zarówno przez kulturę, jak i samą naturę.

Do barw ciepłych zaliczamy kolory, zaczynając od czerwieni po żółć, wliczając w to pomarańcz, róż, brąz i burgund. Reprezentują one ciepło i ruch, a to z powodu skojarzeń ze słońcem i ogniem. Jeśli kolor ciepły umieścić w pobliżu chłodnego, będzie się on wyróżniał, dominował i tworzył wizualne wyróżnienie, o którym była mowa w rozdziale 1.

Chłodne barwy mieszczą się w obszarze pomiędzy zielenią a kolorem niebieskim. Zaliczają się do nich również niektóre odcienie fioletu. Fiolet jest kolorem pośredniczącym pomiędzy niebieskim a czerwonym. Tak więc, jak pewnie zauważyłeś, zimniejszy fiolet leży bliżej niebieskiego, podczas gdy jego cieplejszy wariant bliżej czerwieni. Chłodne kolory działają uspokajająco — redukują napięcie. W projektowaniu stron chłodne barwy mają tendencję do wtapiania się w tło przy cieplejszych. Nie przytłaczają użytkownika, przez co doskonale nadają się do tworzenia tła lub większych elementów witryny.

Kolor

Wartość chromatyczna Wartość chromatyczna jest miarą jasności odcieni kolorów. Przykładowo dodanie bieli do konkretnej barwy tworzy jej jasny odcień. Podobnie jeśli do tego samego koloru dodać odrobinę czerni — w rezultacie powstanie odcień ciemny. Rysunek 2.9 ilustruje różnice między nimi. Tak jak w przypadku pojedynczych kolorów, ich odcień może mieć znaczny wpływ na emocjonalny odbiór zawartości strony internetowej. Możliwe jest na przykład takie wykorzystanie odcieni, aby zaakcentować porę dnia, z jaką kojarzona jest firma bądź organizacja. Gdybyś projektował witrynę poświęconą życiu nocnemu lub koncertom, dobrym pomysłem byłoby ograniczenie użycia jasnych kolorów, a w ich miejsce wykorzystanie ciemniejszych odcieni. Jasny ton kolorów kojarzy się z dniem, wiosną i dzieciństwem. Powinieneś myśleć teraz o wschodzie słońca, dziecięcych ubrankach i Troskliwych Misiach. Nic nie stoi na przeszkodzie, żebyś użył tych jasnych, pastelowych barw w profesjonalny, wyrafinowany i dojrzały sposób. Każdy, kto kiedykolwiek był w szpitalu, może potwierdzić, że da się to zrobić! Jasne kolory dodają sterylnym wnętrzom charakteru, nie denerwując przy tym chorych pacjentów i niemowlaków. Miej na uwadze to, że nie zaimponujesz żadnemu projektantowi kolorem typu „szpitalna zieleń”, gdybyś jednak pracował nad stroną dla jednodniowego hotelu SPA, jasne tony byłyby doskonałą podstawą Twojej palety. Rysunek 2.9. Odcienie

Saturacja Saturacja, zwana też nasyceniem barw, opisuje siłę i czystość koloru. Jest sprawą oczywistą, że żywe i intensywne kolory wyróżniają się. Mimo że chłodne kolory mają tendencję do odchodzenia na dalszy plan, żywy błękit będzie przyciągał wzrok bardziej niż matowy pomarańcz. Dodanie szarego (białego i czarnego) do dowolnego koloru sprawi, że barwa ta zmatowieje. Kolory tego rodzaju, niczym zachmurzone zimowe niebo o poranku lub pomalowane na beżowo wnętrze biura, są znacznie mniej podniecające niż jasne, żywe barwy. Z drugiej strony, kolory matowe pomagają obniżać napięcie, nadając kompozycji kontemplacyjną, senną aurę. Rysunek 2.10 ukazuje związek między wartością chromatyczną koloru a jego intensywnością.

Rysunek 2.10. Wykres zależności wartości chromatycznej od saturacji

67

68

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Podstawy teorii koloru Aby posunąć się naprzód w naszym wspólnym zgłębianiu wiedzy o kolorze, będziemy musieli opanować pewne bardziej techniczne pojęcia związane z tematem, a szczególnie z powstawaniem kolorów i sposobem ich kategoryzacji. Kolory wyświetlane przez ekrany urządzeń komputerowych (czyli kolory, których będziemy używać do tworzenia stron) powstają w wyniku tzw. syntezy addytywnej. Zgodnie z jej założeniami każdy kolor wyświetlany jest w rezultacie połączenia światła czerwonego (ang. red), zielonego (ang. green) i niebieskiego (ang. blue) w odpowiednich proporcjach, co daje tzw. model RGB. Gdyby włączyć wszystkie żarówki tych kolorów, otrzymalibyśmy światło białe. Jeśli wyłączyć światło niebieskie, a podkręcić czerwoną i zieloną żarówkę, otrzymamy światło żółte. Jeśli kiedykolwiek miałeś kolorową drukarkę, możliwe, że potrafisz rozszyfrować akronim CMYK. Pochodzi on od angielskich nazw kolorów — cyan, magenta, yellow, key — oznaczających odpowiednio: cyjan, magentę, żółć i kolor kluczowy (czerń). Niezależnie od tego, czy używałeś drukarek atramentowych, laserowych, czy czterokolorowej prasy drukarskiej, wszystkie one drukują za pomocą tych czterech barw. W procesie tym wykorzystywane jest zjawisko tzw. syntezy subtraktywnej. Łącząc wszystkie barwy (CMY), ostatecznie możemy otrzymać brudnobrązowy kolor. Nie ma możliwości uzyskania barwy czarnej poprzez wymieszanie tylko cyjanu, magenty i żółci. Z tego właśnie powodu do modelu tego dodaje się czerń. Rzuć okiem na rysunek 2.11, żeby zorientować się, czym syntezy addytywna i subtraktywna różnią się od siebie.

Rysunek 2.11. Modele syntez — addytywnej (po lewej) i subtraktywnej CMYK (po prawej)

Niezależnie od tego, czy Twoja praca trafi do druku, czy do sieci, zrozumienie podstawowych zagadnień teorii koloru pomoże Ci w grupowaniu barw. Pierwsze udokumentowane badania nad klasyfikacją kolorów zostały zawarte w pracach Arystotelesa, w III w. p.n.e. Od tamtego czasu wielu artystów i filozofów miało swój wkład w poznanie sposobu działania barw. Wśród nich byli: Isaac Newton, Johann Wolfgang von Goethe i Johannes Itten. Prace tych wielkich osobistości, wydane odpowiednio w XVII, XVIII i XIX wieku, położyły podwaliny pod współczesne rozumienie koloru. Ich teorie wyjaśniały specyfikę kolorów za pomocą tzw. koła barw, które tworzyły trzy kolory podstawowe: czerwony, żółty i niebieski. Koło barw jest prostym modelem poglądowym służącym do wyjaśnienia zagadnień i terminologii teorii kolorów. Tradycyjne koło barw podzielone jest na 12 równych części, tak jak na rysunku 2.12. Każdą z tych cząstek można przyporządkować odpowiedniej barwie. Wyróżniamy barwy podstawowe, pochodne i tzw. trzeciorzędowe.

Kolor

Rysunek 2.12. Klasyczne koło barw z czerwonym, żółtym i niebieskim jako kolorami podstawowymi

Barwy podstawowe W standardowym kole barw kolory: czerwony, żółty i niebieski należą do barw podstawowych. Końce cząstek, na których one leżą, tworzą wierzchołki trójkąta równoramiennego. Zaczynając od dowolnej barwy podstawowej i poruszając się po kole, co czwarta cząstka oznacza kolejny kolor podstawowy. Barwy pochodne Barwy pochodne, zaznaczone na rysunku 2.12 małymi szarymi trójkątami, powstają wskutek zmieszania dwóch kolorów podstawowych. Kolorami pochodnymi są: pomarańcz, zieleń i fiolet. Barwy trzeciorzędowe Wyróżniamy sześć kolorów trzeciorzędowych: czerwono-pomarańczowy (cynobrowy), żółtopomarańczowy, żółto-zielony, niebiesko-zielony (akwamaryn), niebiesko-fioletowy i czerwonofioletowy (magentę). Jak same ich nazwy wskazują, powstają one w wyniku zmieszania kolorów podstawowych z sąsiednimi pochodnymi.

Czerwony, żółty i niebieski czy CMYK? Muszę przyznać, że brak szacunku dla tradycyjnego koła barw nigdy nie przestaje mnie zdumiewać. Niektórzy nazywają je przeżytkiem, zabawką przedszkolaka. Prawdą jest, że podział barw, który ono proponuje — kolory: czerwony, żółty i niebieski — nie stanowi dokładnego modelu poglądowego percepcji światła. Niektórzy artyści sugerują wyeliminowanie standardowego koła barw z programu nauczania sztuki, wskazując, widoczne na rysunku 2.13, koło kolorów CMYK jako bardziej uniwersalne. Warto zauważyć, że kolory czerwony, zielony i niebieski w modelu CMYK są barwami pochodnymi, co oznacza, że można go użyć do otrzymania kolorów w syntezie addytywnej (światłem), jak i subtraktywnej (na powierzchni stałej).

69

70

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 2.13. Koło barw CMYK

Aby lepiej zrozumieć argumentację osób popierających model CMYK, użyłem gwaszu — czyli rodzaju farb wodnych sprzedawanych w tubkach. Jeśli zmieszać je z wodą, stają się półprzezroczyste, a ich kolory — jak widać na rysunku 2.14 — odpowiadają tym z koła barw CMYK. Mieszanka magenty i żółci tworzy czerwono-pomarańczowe odcienie, podczas gdy mieszanka cyjanu i żółci tony zielono-miętowe. W taki właśnie sposób działa drukowanie w modelu CMYK. Nakładane na siebie półprzezroczyste tusze (z pewną dawką czerni — to K po coś tam jest, prawda?) dają nam większość kolorów, jakie można zobaczyć na emitujących światło monitorach i telewizorach.

Rysunek 2.14. Zabawa CMYK-owym gwaszem

Czekaj! A cóż to za fioletowa plama? No tak! Wbrew temu, co sugeruje koło barw CMYK, równe proporcje cyjanu i magenty tworzą fiolet zamiast koloru niebieskiego. Różne anomalie tego typu zdarzają się często przy mieszaniu nieprzezroczystych pigmentów. Sprowadza się to do tego, że jeżeli

Kolor

Twoja farba jest tak gęsta, iż nie jesteś w stanie zobaczyć papieru lub płótna pod nią, idea koła barw CMYK zaczyna zawodzić. Pod tym względem tradycyjne, trójkolorowe koło barw — rozwinięte przez Goethego, Ittena i innych uczonych w ciągu ostatnich czterech wieków — jest lepsze. Ale przecież my używamy pikseli, nie farb! Powodem, dla którego wielu artystów z branży elektronicznej wciąż odnosi się do klasycznego koła barw, jest fakt, iż wiele schematów kolorów i koncepcji teorii koloru bazuje na tym modelu. Zaraz się przekonasz, że współzależność między kolorami jest uwarunkowana ich rozmieszczeniem na kole barw. Rozmieszczenie to może być różne w zależności od koła. Dla przykładu w kole klasycznym czerwień i zieleń są sobie przeciwstawne, podczas gdy w kole CMYK to cyjan jest przeciwieństwem czerwieni. Nie możesz ot tak sobie przesuwać koloru czerwonego i niebieskiego według swego widzimisię. Z tego powodu przez następne kilka stron będę omawiał schematy koloru. Posłużę się w tym celu klasycznym modelem barw. Oba typy koła kolorów nie są pozbawione wad i sposoby, w jakie barwy na nich się dopełniają, są tego dobrym przykładem. Co więcej, aby Ci jeszcze bardziej namieszać w głowie, powiem Ci, że żadne koło kolorów nie jest w stanie w pełni oddać złożoności, z jaką postrzegamy światło. Mimo to, choć sam projektuję głównie strony internetowe — z konieczności wyświetlane w modelu RGB — w pracy wciąż wykorzystuję klasyczną kombinację czerwonego, żółtego i niebieskiego jako podstawę selekcji barw. Wierzę, że kolorystka stworzona za pomocą takiej palety jest estetycznie przyjemniejsza dla oka, a przecież w dobrym projekcie chodzi właśnie o estetykę. Tak więc zaprezentuję Ci zagadnienia z teorii koloru w sposób, w jaki nauczyłem się ich na drugim roku studiów: posługując się tradycyjnym kołem barw.

Schematy kolorów Wiemy już wystarczająco dużo o kolorach, aby móc swobodnie rozmawiać o ich odcieniach, intensywności, psychologicznych skojarzeniach i położeniu na kole barw. Wszystko ładnie i pięknie, ale jak wybrać kilka współgrających ze sobą barw? I tu pojawiają się schematy kolorów. Schematy kolorów są prostymi przepisami na stworzenie ich harmonijnych i efektownych zestawień. Wyróżniamy sześć klasycznych schematów barw: „ monochromatyczny, „ analogiczny, „ dopełnieniowy, „ dopełnieniowy rozdzielony, „ triada, „ tetrada. Aby móc wykorzystać te schematy, musimy najpierw wybrać jeden kolor. Rozważ tematykę strony, nad którą pracujesz, i wybierz podstawową barwę, która posłuży Twym celom. Może się oczywiście zdarzyć, że nie będziesz miał żadnego wyboru w tej materii, szczególnie gdy będziesz musiał przestrzegać zasad panujących w firmie klienta i jego osobliwych wytycznych dotyczących

71

72

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

kolorystyki. Dla przykładu załóżmy, że pracujesz nad stroną dla szacownej rodziny wyniosłych małpek cyrkowych. Małpki te wciąż wierzą w swe królewskie pochodzenie, więc zażyczyły sobie, żebyś zawarł w projekcie fiolet. Niemądre małpki… No ale wiesz, co mówią: „Klient nasz pan”.

Monochromatyczny schemat kolorów Mówiąc wcześniej o wartości kolorów, wspomniałem o odcieniach. Schemat monochromatyczny — taki, jak na rysunku 2.15 — w całości składa się z pojedynczego koloru i różnych wariantów jego odcieni.

Rysunek 2.15. Monochromatyczna małpka

Monochromatyczny schemat kolorów — przykłady Ostry róż jest niesamowicie intensywną barwą, która po zestawieniu z bielą i czernią wywołuje spektakularne wrażenie. Jak widać na rysunku 2.16, właśnie coś takiego było celem webdeweloperskiej firmy Solid Giant35 i jej monochromatycznego projektu strony. Każda sekcja tej pojedynczej strony zawiera w tle białą teksturę, na której wyraźnie odznaczają się elementy różowe, o odcieniu dokładnie tak niesamowitym (superawesome), jak głosi hasło na stronie.

35

http://www.solidgiant.com/

Kolor

Rysunek 2.16. Witryna firmy Solid Giant świetnie wykorzystuje kontrast barw

Innym przykładem kolorystycznie nasyconej, monochromatycznej witryny internetowej jest osobista strona słynnego autora, mówcy i experience-designera Aarrona Waltera36. Każda pojedyncza strona tej witryny używa innego monochromatycznego schematu kolorów. Treść umieszczona jest w coraz ciemniejszych pasach, co możesz zobaczyć na widocznej na rysunku 2.17 stronie głównej. Powstały one poprzez pomysłowe zastosowanie przezroczystości RGBA. Każdy pas zawiera przezroczyste czarne tło. Po załadowaniu strony kod JavaScript przydziela każdemu pasowi coraz większą wartość krycia (własności opacity), tworząc tym samym imponujący monochromatyczny schemat barw.

Rysunek 2.17. Witryna Aarrona Waltera używa różnych schematów kolorów dla każdej ze stron

36

http://aarronwalter.com/

73

74

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Zmienianie schematów koloru Wiele witryn wykorzystuje odmienne schematy kolorów do każdej ze swoich sekcji. Takie podejście może nadać stronie przepych i charakter, ale może też działać na niekorzyść jej „rozpoznawalności”. Jeśli zamierzasz używać wielu schematów koloru na jednej witrynie, pamiętaj, aby nie zmieniać logo, menu i rozkładu strony. Art in My Coffee37 to prowadzony przez Jinę Bolton blog poświęcony Latte Art, czyli sztuce tworzenia rysunków z mleka na powierzchni kawy, który został zaprojektowany przez Meagan Fisher. Nie powinno dziwić, że kolorystyka witryny bazuje na monochromatycznym schemacie kolorów składającym się z pysznie kremowych odcieni brązu, co widać na rysunku 2.18. Jeśli spodziewasz się, że fotografie oraz treść na Twojej stronie będą dzielić tę samą barwę, opracowanie schematu kolorów w oparciu o nią, tak jak zrobiła to Meagan, jest świetnym pomysłem.

Rysunek 2.18. Art in My Coffee — kolorystyka odzwierciedla tematykę witryny

Widoczna na rysunku 2.19 strona winnicy Black Estate38 w Nowej Zelandii korzysta ze specjalnego rodzaju monochromatyzmu. Nie, nie wymyśliłem tego słowa na poczekaniu! Każde zestawienie kolorów złożone jedynie z czerni, bieli i odcieni szarości nazywamy achromatycznym schematem kolorów. Słowo „achromatyczny” oznacza dosłownie „bez koloru”. To, że ogólny schemat barw jest ich pozbawiony, nie oznacza, że zawartość musi być również bezbarwna. 37

http://artinmycoffee.com/

38

http://blackestate.co.nz/

Kolor

Ciemne tło i mało oszczędne wykorzystanie wolnej przestrzeni sprawiają, że żywe fotografie wyróżniają się, nadając życia całemu projektowi.

Rysunek 2.19. Strona winnicy Black Estate adekwatnie oddaje jej nazwę

Analogiczny schemat kolorów Schemat analogiczny składa się z kolorów znajdujących się w swoim bezpośrednim sąsiedztwie na kole barw. Gdyby nasze koło barw było pysznym plackiem owocowym (placek… mniam!), to analogiczny schemat kolorów stanowiłby jego całkiem sporą porcję. Zachowanie umiaru jest kluczem do stworzenia dobrego schematu analogicznego. Z zasady nie należy kroić placka na porcje większe niż jedna trzecia całości. Inaczej ryzykujesz, że Twoi goście się pochorują. Wracając do naszych wyniosłych małpek, ciekawe, co by powiedziały na projekt na rysunku 2.20, w którym ociepliłem całą fioletową kompozycję, dodając trochę odcieni pomarańczu.

75

76

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 2.20. Małpka analogiczna

Analogiczny schemat kolorów — przykłady Żartobliwe ilustracje widoczne na stronie głównej serwisu Forrst39 są świetną metaforą społeczności designerów i deweloperów. Choć możesz śmiać się pod nosem z krótkich nóżek leśniczego i gry słów angielskiego wyrażenia „Log In”40, które zwróciły Twoją uwagę na rysunku 2.21, zauważ teraz bogaty schemat analogiczny. Poczynając od zielonkawo-niebieskiego nieba, po pomarańczowe brązy, wszystkie barwy na tym szablonie mieszczą się w maksymalnej zalecanej porcji naszego placka kolorów.

Rysunek 2.21. Przyjemnie by było zgubić się w tym lesie — serwis Forrst cieszy oko 39

http://forrst.com/

40

W języku angielskim słowo „log” oznacza zarówno logowanie, jak i kłodę drewna — przyp. tłum.

Kolor

Serwis Blinksale41 — widoczny na rysunku 2.22 — jest aplikacją internetową, która tworzy i wysyła faktury oraz zarządza nimi — zarówno w postaci jawnej, jak i sformatowanej w CSS. Stanowi on doskonały przykład na to, jak imponujący może być pomysłowy analogiczny schemat kolorów dla witryny biznesowej. Twórcy zdają się miąć w dłoni listę wszystkich regułek mówiących, jak powinna prezentować się korporacyjna witryna, by następnie wrzucić ją w morze kolorów z przedziału pomiędzy błękitnymi zieleniami a żółcią. Zauważ, jak kontrast barw wpływa na odznaczanie się elementów interaktywnych. Linie perspektywy zrzutu ekranu wydają się „przeciągać” Twój wzrok do przycisku „Sign up”.

Rysunek 2.22. Witryna Blinksale wygląda profesjonalnie, jednak bez nadmiernej powagi

Podczas gdy strona główna Blinksale jest zaprojektowana, by olśniewać i zadziwiać, witryna Zappos42 (rysunek 2.23) nie traci czasu na zbędne ceregiele. Osiąga to, opierając wizerunek na solidnym schemacie analogicznym złożonym z odcieni błękitu i zieleni. Jasny przycisk wyszukiwania u góry strony wyróżnia się, wprowadzając totalnie odmienne zabarwienie na tle całości. Można powiedzieć, że dopełnia błękit na stronie. Właśnie, „dopełnia”. Co to znaczy? Zaraz się dowiesz.

41

http://blinksale.com/

42

http://www.zappos.com/

77

78

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 2.23. Zappos nie traci czasu na ceregiele

Dopełnieniowy schemat kolorów Dopełnieniowe schematy kolorów — takie jak ten na małpkowym projekcie poniżej (rysunek 2.24) — składają się z kolorów położonych na przeciwległych krańcach koła barw. Co prawda połączenie czerwonawych fioletów z żółtawymi zieleniami jest co najmniej ekscentryczne, jednak małpki nalegały, abym zachował ich królewski fiolet na obrazku. Ale z nich banda prymitywów.

Rysunek 2.24. Ekstrawagancka dopełnieniowa małpka

Kolor

Dopełnieniowe schematy kolorów — przykłady Uniwersytet Florydy to Alma Mater mojej żony. Kolory drużyny uczelnianej — pomarańczowy i niebieski — kładą solidne podwaliny pod dopełnieniowy schemat kolorów. Niektórych użytkowników może odstraszyć wyraźny kontrast barw dopełniających na stronie lekkoatletycznej43 (widocznej na rysunku 2.25), ale jeśli używasz kolorystyki firmy bądź instytucji, dla której pracujesz, zostanie Ci to wybaczone.

Rysunek 2.25. Strona sportowa Uniwersytetu Florydy używa śmiałych dopełnieniowych kolorów

Strona wiosennego program fundacji Pittsburgh’s Sprout Fund44 — widoczna na rysunku 2.26 — dowodzi, że kolory dopełniające nie muszą być używane tak śmiało jak na witrynie Uniwersytetu Florydy. Dzięki stonowaniu nasycenia barw ten czerwono-zielony projekt prezentuje się bardzo naturalnie i realistycznie, co wspiera przesłanie kampanii — bioróżnorodność. Piękne ilustracje w połączeniu z artystyczną fakturą wybijają stronę wysoko ponad konkurencję.

43 44

http://www.gatorzone.com/ http://www.sproutfund.org/spring/

79

80

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 2.26. Dopełniające kolory na stronie wiosennego programu fundacji Sprout Fund nadają jej bardziej „organiczną” aurę

Zastanawia mnie, czemu tak wielu muzyków najpierw nalega, żeby stworzyć im stronę we Flashu, a potem nigdy nie aktualizuje wpisów na niej. Ale odbiegam od tematu. Niezależnie od użytej technologii witryna Zacha Hendricksa45, widoczna na rysunku 2.27, jest pięknym, podręcznikowym przykładem wykorzystania kolorów dopełnieniowych. Nie da się wybrać barw komplementarnych bez sparowania kolorów chłodnych z ciepłymi i projektanci tej strony byli tego świadomi. Horyzont w tle miasta wraz z jasną tarczą słońca skontrastowano z chłodną, jasnoturkusową wodą. Gdybyś zechciał sam poeksperymentować z tym schematem, tajemnica jego sukcesu kryje się w nakładających się na siebie kołach widocznych w logo. Pomimo zastosowania Flasha w obronie samej strony przemawia to, że ma alternatywną wersję wyświetlaną dla iPhone’a i iPada.

45

http://zachhendricks.net/

Kolor

Rysunek 2.27. Strona Zacha Hendricksa: podręcznikowy przykład wykorzystania kolorów dopełnieniowych

Schematy dopełnieniowe — częste błędy Dopełnieniowe barwy różnią się od siebie pod wieloma względami. Z tego też powodu ich jednoczesne użycie może wywołać tzw. efekt równoczesnego kontrastu. To właśnie dzięki niemu użytkownik wodzi wzrokiem po całej stworzonej według schematu dopełnieniowego kompozycji. Efekt ten może jednak zadziałać przeciwko Tobie, jeśli wybrane barwy będą funkcjonowały na zasadzie kontrastu pierwszego i drugiego planu, tak jak na rysunku 2.28.

Rysunek 2.28. Strzeż się efektu równoczesnego kontrastu!

81

82

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Kolejnym często popełnianym błędem jest wybór kolorów niepołożonych dokładnie naprzeciw siebie na kole barw i nieznajdujących się w swoim sąsiedztwie. Takie zestawienia kolorów nazywamy nieharmonijnymi, gdyż ich barwy zaburzają harmonię kompozycji. Tak po prawdzie, moda lat 80. XX wieku bazowała właśnie na kombinacjach niezgranych kolorów. Widok nieharmonijnego schematu przypomina mi słynną w USA serię segregatorów Trapper Keeper, którą tak bardzo kochałem w latach szkolnych. Na rysunku 2.29 możesz zobaczyć jeden z nich.

Rysunek 2.29. Nieharmonijna teczka z serii Trapper Keeper

Powyższy przykład pokazuje, iż z pozoru zły projekt może okazać się efektywny, pod warunkiem że został sporządzony z zamysłem. Nieharmonijne kolory tworzą zaskakujące kombinacje, które podobają się dzieciom, nasto- i dwudziestolatkom, toteż warto rozważyć ich użycie na stronach i produktach przeznaczonych dla młodzieży. Z rzadka można je też stosować w bardziej „dojrzałych” projektach, po to, żeby uzyskać mocniejszy efekt, niż byłoby to możliwe z użyciem prostych dopełnieniowych kombinacji. Witryna Bulls+Arrows46 jest tą, którą musisz odwiedzić, żeby zobaczyć przykład dobrego nieharmonijnego schematu kolorów. Witryna posiada kilka różnych obrazów tła, które są ustawiane losowo w trakcie ładowania strony. Widoczna na rysunku 2.30 grafika dopełnia jasną czerwień mieszaniną zieleni i błękitu, które leżą dość daleko od czerwonego, żeby nadać całości projektu śmiały wygląd.

46

http://www.bullsandarrows.com/

Kolor

Rysunek 2.30. Witryna Bulls+Arrows bierze ze zderzenia barw to, co najlepsze

Inne schematy kolorów — dopełnieniowy rozdzielony, triada i tetrada Dopełnieniowy rozdzielony, triada i tetrada — nazwy te mogą brzmieć skomplikowanie, ale tak naprawdę opisują one proste wariacje podstawowego schematu dopełnieniowego. Aby stworzyć schemat dopełnieniowy rozdzielony, użyj dwóch barw sąsiadujących bezpośrednio z barwą dopełniającą pierwszy wybrany kolor. Dla przykładu spójrz na wysunięty najbardziej na lewo schemat barw (rysunek 2.31). Czerwień jest podstawowym kolorem, więc zamiast użyć zieleni, do stworzenia schematu komplementarnego wykorzystamy dwa sąsiednie kolory: żółto-zielony i akwamaryn, tworząc w ten sposób schemat dopełnieniowy rozdzielony. Pamiętaj, że użycie koloru podstawowego z dwoma barwami nieharmonijnymi może sprawić, iż Twoja kompozycja będzie wyglądać śmiało i odrobinę dziecinnie… ale to może być dokładnie ten efekt, którego potrzebujesz.

Rysunek 2.31. Przykłady schematów dopełnieniowych rozdzielonych

83

84

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Żeby stworzyć triadę, weź poprzedni układ i odsuń oznaczenia bliżej położonych barw od siebie, tak aby były one jednakowo oddalone. Wybierając czerwień na naszą barwę podstawową, tym samym wybieramy kolor żółty zamiast zielono-żółtego i niebieski zamiast akwamarynu. W ten sposób dzielimy koło barw na trzy równe części (stąd przedrostek tri-), otrzymując tzw. „triadę podstawową”, bo złożoną z trzech barw podstawowych. Przykład ten odpowiada schematowi po lewej na rysunku 2.32. Gdybyś przesunął odrobinę oznaczenia zgodnie z ruchem wskazówek zegara, wybrałbyś kolory: żółto-zielony, fioletowy i cynobrowy, uzyskując „triadę uzupełniającą”, którą widać na środkowej części rysunku 2.32.

Rysunek 2.32. Triady „podstawowe” (po lewej) i „uzupełniające” (środek i prawo)

Wiedząc już, że triada składa się z trzech kolorów, na pewno wydedukowałeś — dzięki doskonałej znajomości greki — że tetradyczny schemat kolorów złożony jest z czterech barw. Tetrada łączy dowolny schemat dopełnieniowy z innym schematem dopełnieniowym. Przykład po lewej na rysunku 2.33 jest tetradą scalającą kolory: pomarańczowy i niebieski z żółtym i fioletowym.

Rysunek 2.33. Przykłady tetradycznych schematów kolorów

Strona internetowa River City Church47 w Jacksonville na Florydzie (widoczna na rysunku 2.34) jest doskonałym przykładem wykorzystania tetrady. Zwróć uwagę na obecność w projekcie dokładnie czterech kolorów — poza czernią i bielą. Widzimy dopełniające się kolory: pomarańczowy i niebieski, sparowane z kolorem różowym i zielonym.

47

http://www.rccjax.com/

Kolor

Rysunek 2.34. Śmiało wykonana witryna River City Church

Znalezienie projektów korzystających z pojedynczych schematów kolorów, które omówiłem wyżej, okazuje się trudnym zadaniem. Jest tak dlatego, że w większości przypadków projektanci sami tworzą własne schematy od zera lub używają ich zmodyfikowanej wersji. W kolejnym podrozdziale, zatytułowanym „Inne możliwości”, przedstawię kilka dodatkowych opcji.

Inne możliwości Co prawda większość projektantów stron zna podstawowe schematy kolorystyczne, ale mogą być one odbierane jako banalne i bez natchnienia. Jeśli jednak będziesz traktował koło barw niczym tarczę do lotek, wybierając barwy na chybił trafił, stworzysz naprawdę okropne zestawienia. Wierz mi — sam tego próbowałem. Zamiast podejmować ryzyko, lepiej pobawić się klasycznymi schematami kolorów, żeby stworzyć świeżą kolorystykę. Kiedy już opanujesz monochromatyczne, analogiczne i dopełnieniowe schematy, spróbuj poeksperymentować z następującymi: „Wybicie” monochromatyczne Zamiast używać jedynie odcieni koloru podstawowego, spróbuj wrzucić też trochę szarego, czarnego lub białego. Stworzy to lepszy kontrast, „wybijając” treść w tradycyjnym schemacie monochromatycznym. Analogiczne „podkręcenie” „Podkręć” nasycenie jednego z kolorów w schemacie monochromatycznym w górę. Zmniejsz wartość saturacji dla pozostałych. Bardzo intensywny kolor będzie rzucać się w oczy w towarzystwie tych „wyciszonych”.

85

86

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Monorozdzielne dopełnienie Jeśli podoba Ci się schemat dopełnieniowy rozdzielony, lecz czujesz, że przydałoby mu się więcej głębi, spróbuj użyć kilku wariantów ciemnych i jasnych odcieni wybranych barw w swoim projekcie. Oczywiście nazwy tych wszystkich schematów wymyśliłem na poczekaniu. Zauważyłeś jednak na pewno, jak bardzo są one podobne do tradycyjnych schematów kolorów. Łatwo jest „podrasować” standardowy schemat, aby nadać mu charakter. Warto jednak pamiętać, że wybór schematu określa podstawy palety barw na Twojej stronie, a ważne jest, by budować na solidnych podstawach. Inaczej całość projektu może się zawalić na Twoich oczach.

Tworzenie palety „Paleta?” — mógłbyś zapytać. — „Czy to nie to samo co schemat kolorów?”. Odpowiedź brzmi: i tak, i nie. Schemat kolorów buduje się w oparciu o dwa, trzy, cztery kolory, z którymi przyjdzie Ci pracować. Co prawda taka ograniczona paleta może posłużyć do stworzenia pięknych kompozycji, ale najpewniej nie wystarczy ona do zbudowania witryny. Proces tworzenia palety najłatwiej zrozumieć, myśląc w języku kolorów, zamiast wybierać losowe pomocnicze barwy w odpowiedzi na bieżące zapotrzebowanie. Zapotrzebowanie na kolory zależy od stopnia złożoności Twojego projektu. Sam, zanim zabiorę się za kolorowanie układu strony, wybieram 5 – 6 barw, których jestem pewien.

Notacja szesnastkowa Doszliśmy do etapu, w którym będziemy musieli być bardzo dokładni w opisie interesującej nas barwy. Innymi słowy, będziemy potrzebować ujednoliconego standardu, za pomocą którego odniesiemy się do kolorów w naszej palecie. Z pewnością słyszałeś już o szesnastkowych wartościach kolorów w modelu RGB. Jeśli nie, oto szybki kurs teoretyczny. Szesnastkowy system liczbowy jest podobny do znanego Ci dziesiętnego systemu liczenia, z tą różnicą, że kolejne pozycje cyfr w liczbie nie bazują na potęgach liczby 10, tylko 16. Jako taki zawiera on sześć dodatkowych cyfr: A (odpowiednik liczby 10 w systemie dziesiętnym), B (11), C (12), D (13), E (14), F (15). Tabela 2.1 wyjaśnia, jak liczyć od 1 do 255 w dziesiętnym i szesnastkowym systemie liczbowym. Ale co to ma wspólnego z paletą kolorów? Wcześniej w tym rozdziale napomknąłem, że ekrany urządzeń wykorzystują syntezę addytywną RGB i że każdy piksel na ekranie malowany jest za pomocą różnych kombinacji światła czerwonego, zielonego i niebieskiego. To, o czym nie wspomniałem, to fakt, iż każdy z tych kolorów ma 256 poziomów wyświetlania światła, co pozwala na stworzenie 16 777 216 różnych kolorów. Szczęśliwie istnieje sposób na opisanie każdego z tak otrzymanych kolorów w sposób szybki i łatwy — przy użyciu szesnastkowego kodu kolorów. Opisuje on wartość czerwieni, zieleni i koloru niebieskiego, które składają się na dany kolor. Dla przykładu połączenie najwyższej wartości czerwieni z takimi samymi proporcjami barwy zielonej i niebieskiej tworzy biel. Żeby użyć bieli na naszej stronie, musimy wpierw ustawić komponent czerwony na 255 (FF w systemie szesnastkowym), potem zielony na 255 (FF) i na końcu niebieski również na 255 (FF). Po połączeniu wartości szesnastkowych uzyskujemy kod FFFFFF odzwierciedlający kolejność RGB — kolory czerwony, zielony i niebieski.

Kolor

Tabela 2.1. Porównanie — dziesiętny i szesnastkowy system liczbowy System dziesiętny

System szesnastkowy

System dziesiętny

System szesnastkowy

System dziesiętny

System szesnastkowy

0

0

16

10

32

20

1

1

17

11

33

21

2

2

18

12

34

22

3

3

19

13

35

23

4

4

20

14

5

5

21

15

245

F5

6

6

22

16

246

F6

7

7

23

17

247

F7

8

8

24

18

248

F8

9

9

25

19

249

F9

10

A

26

1A

250

FA

11

B

27

1B

251

FB

12

C

28

1C

252

FC

13

D

29

1D

253

FD

14

E

30

1E

254

FE

15

F

31

1F

255

FF

...

Czerń, która powstaje wskutek ustawienia wartości kolorów czerwonego, zielonego i niebieskiego na zero (00), opisuje się kodem 000000. Czerwień, którą uzyskujemy przez nadanie kolorowi czerwonemu wartości FF i wartości 00 barwom niebieskiej i zielonej, ma kod FF0000. Rysunek 2.35 przedstawia kilka standardowych kolorów wraz z ich szesnastkowymi wartościami. Gdy już przyzwyczaisz się do używania kodów szesnastkowych, zaczniesz rozszyfrowywać je bez większego trudu. Na przykład kolor #F26282 jest odcieniem różu, a #371324 kolorem czerwonego wina z nutką purpury. Po zdobyciu tytułu szesnastkowego Mistrza Jedi odwiedź http://yizzle.com/whatthehex/, żeby zagrać w szesnastkowe zgadywanki.

Rysunek 2.35. Przykłady kolorów w notacji szesnastkowej

87

88

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Narzędzia i zasoby Teraz już wiesz, jak opisać kolor, używając systemu szesnastkowego. Kolejnym krokiem jest odnalezienie wartości kolorów, z którymi będziemy pracować. Istnieje wiele narzędzi pomocnych w doborze kolorów do Twojej palety, wliczając w to samodzielne aplikacje oraz wtyczki dla oprogramowania komputerów PC i Mac. Oto kilka z moich ulubionych.

Color Scheme Designer 3 W sieci jest dostępnych wiele narzędzi pomocnych w selekcji barw, ale moim ulubionym jest Color Scheme Designer48 (dawniej znany jako WellStyled Color Scheme Generator), który możesz podziwiać na rysunku 2.36. Podczas gdy wiele innych aplikacji korzysta z koła barw CMYK lub RGB, to wspaniałe narzędzie HTML używa tradycyjnego koła opartego na kolorach czerwonym, żółtym i niebieskim. Wystarczy kilka kliknięć, by wybrać i dostosować schemat kolorów, nie mówiąc o możliwości łatwej identyfikacji barw — wszystko po to, by zbudować harmonijną ich paletę. Gdy już skończysz ją tworzyć, możesz skorzystać z opcji Vision Simulator, żeby przekonać się, jak ludzie z różnymi schorzeniami wzroku postrzegają Twoją stronę. Na koniec możesz eksportować swoje kolory w formie dokumentów HTML/CSS, XML, plików tekstowych bądź palet programów Photoshop i GIMP.

Rysunek 2.36. Color Scheme Designer 3 — wybór autora

48

http://colorschemedesigner.com/

Kolor

Adobe Kuler Innym świetnym narzędziem do selekcji kolorów jest Adobe Kuler49. Na jego stronie możesz stworzyć kombinacje kolorów za pomocą opcji konfiguracji standardowych ich schematów podobnej do tej z Color Scheme Designera. W odróżnieniu od Designera, Kuler potrafi stworzyć paletę z przesłanego na serwer obrazu. Kolejną cechą wyróżniającą to narzędzie jest społeczność użytkowników. Jeśli zdecydujesz się stworzyć konto na witrynie, będziesz mógł dzielić się swoimi paletami z innymi użytkownikami Kulera. Każdy może przejrzeć najnowsze i najwyżej oceniane zestawienia kolorów. Na rysunku 2.37 widać poręczną wersję Adobe AIR tego narzędzia, które można zainstalować na komputerach klasy Mac i PC.

Rysunek 2.37. Adobe Kuler jest cool

49

http://kuler.adobe.com/

89

90

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

COLOURlovers Jeśli społeczność serwisu Kuler okaże się zbyt mała, żeby zaspokoić Twoje towarzyskie potrzeby, witryna COLOURlovers50 — którą widać na rysunku 2.38 — jest miejscem dla Ciebie. Tutaj więcej czasu spędzisz, dzieląc się inspiracjami z innymi użytkownikami, niż generując zestawy barw. Serwis rozpoczął działalność jako zwykłe narzędzie do wybierania kolorów, ale obecnie możesz się w nim dzielić wzorami i oglądać kombinacje kolorystyczne używane w wielu dziedzinach artystycznych.

Rysunek 2.38. COLOURlovers — dla zakochanych w kolorze

Color Stream — aplikacja na iPhone’a Color Stream jest aplikacją na telefony iPhone, dostępną w sklepie iTunes za 2,99 dolara. Łączy ona najlepsze cechy Color Scheme Designera i Adobe Kuler w urządzeniu wielkości Twojej dłoni. Stworzony przez Sahila Lavinga Color Stream pozwala tworzyć i przechowywać palety barw zaprojektowane od podstaw bądź wyodrębnione z fotografii lub nawet wygenerowane automatycznie przez program. Ta elegancka, łatwa w obsłudze aplikacja czyni z wybierania barw przyjemność. Rysunek 2.39 pokazuje, jak wygląda wyodrębnianie palety z fotografii. Powstały w ten sposób schemat zatytułowałem „Dziedzictwo”.

50

http://www.colourlovers.com/

Kolor

Rysunek 2.39. Stwórz dowolną paletę na poczekaniu, używając Color Stream

Pictaculous Kuler i COLOURlovers są świetnymi narzędziami, za pomocą których możesz modyfikować swoje schematy kolorów i zdobywać opinie na ich temat. Co jednak, jeśli potrzebujesz kolorystycznego natchnienia na teraz? Wtedy do gry wkracza Pictaculous51. Pictaculous jest darmowym narzędziem udostępnionym przez twórców serwisu MailChimp, które dostarcza schematy kolorów wyodrębnione z fotografii za pośrednictwem e-maila. Wystarczy, że zrobisz zdjęcie swoim smartfonem i wyślesz je pod adres [email protected]. Już w ciągu kilku minut możesz otrzymać e-mail zwrotny z sugerowaną paletą i zestawem polecanych schematów kolorów opracowanym w aplikacjach Kuler i COLOURlovers wraz z załącznikiem w postaci pliku palety barw (.aco) firmy Adobe. Możesz też dostać się do zasobów serwisu w inny sposób. Rysunek 2.40 pokazuje polecane przez Pictaculous kolory ze zdjęcia, które przesłałem na adres http://pictaculous.com/ z mojego komputera.

51

http://pictaculous.com/

91

92

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 2.40. Pictaculous

Colour Contrast Check Dobierając kolory do swojej palety, dobrze jest spróbować wybrać dwie lub trzy barwy kontrastujące ze sobą na tyle, żeby można było ich użyć w roli tła i koloru tekstu. Dobry kontrast między tekstem a tłem jest sprawą kluczową w projektowaniu interakcji. Bez niego niektórzy mogą mieć trudności z przeczytaniem treści na stronie. Prostym sposobem na sprawdzenie stopnia kontrastu między dwoma barwami jest wybranie ich na elementy pierwszego planu i tła, a następnie wprowadzenie ich wartości szesnastkowych do aplikacji Jonathana Snooka Colour Contrast Check52. Zdarza się czasem, że kolorystyka, która w teorii powinna być dobra, nie spełnia sieciowych wymogów jasności i kontrastu. Jak wypowiedział się w swoim blogu53 autor tej aplikacji: „(…) narzędzia tego nie powinno się traktować jak wyroczni (…) lecz jako pomoc w doborze lepszych układów barw”. Najważniejszą rzeczą w trakcie wybierania palety barw jest mieć oczy szeroko otwarte. Jeśli zobaczysz witrynę, reklamę, ilustrację lub inną formę grafiki, która wyróżnia się na tle reszty, postaraj się dojść do tego, jakie kolory dominują w kompozycji i jaki rodzaj schematu barw składa się na paletę. Pamiętaj, że natchnienie może przyjść z najmniej oczekiwanej strony. Czy jest barwa, która przypomina Ci jakąś piosenkę? A co powiesz o kolorach Twojej ulubionej potrawy? Może kolor z tamtej tandetnej tapety rodem z lat 70. w domu Twoich rodziców nadałby się na coś? Uświadomienie sobie różnych cech charakteryzujących kolory pozwoli Ci lepiej je zrozumieć, co sprawi, że będziesz umiał je wykorzystać, tworząc palety barw odpowiadające wymogom Twoich klientów.

52

http://snook.ca/technical/colour_contrast/colour.html

53

http://snook.ca/archives/accessibility_and_usability/colour_color_co

Kolor

Praktyczne wykorzystanie: kolor oszczędności Wracając do naszego studium przypadku kompozycji, kiedy pod koniec rozdziału 1. zostawiliśmy witrynę Southern Savers, ekipa Squared Eye była w trakcie czynienia wielkich postępów w swoim projekcie. Przeszli już etap poznawania witryny, użytkowników i sposobu, w jaki Jenny zarządza jej treścią. Wzięli udział w warsztatach ze sztuki oszczędzania, przetestowali użyteczność strony i stworzyli pierwsze diagramy projektu architektury jeszcze przed rozplanowaniem układu serwisu w Omnigraffle. Nadszedł czas, by nadać projektowi trochę koloru. W tym celu Matthew Smith przyprowadził swojego współpracownika i specjalistę od kreowania marki Andrew Ramosa54, żeby wspólnie z nim stworzyć wizualną identyfikację marki i móc pracować nad drukowanymi elementami Southern Savers. „Od początku wiedzieliśmy, że Southern Savers przydałoby się przebrandować” — powiedział Matthew. — „Witrynie brakowało tożsamości wizualnej, ale miała solidne założenia i potencjał biznesowy. Przed nami było mnóstwo pracy”. Aby móc rozpocząć cały proces, Matthew i Andrew musieli wpierw dowiedzieć się, jakie kolory pasowałyby do projektu. Wypytali Jenny, jakie barwy jej się podobają, i stworzyli ścianę klimatów. Jeśli kiedykolwiek oglądałeś programy telewizyjne poświęcone projektowaniu wnętrz lub przestrzeni, prawdopodobnie widziałeś, jak projektanci przedstawiali swoim klientom próbki tkanin, części mebli czy kolory farb na specjalnych ściankach. Tego typu prezentacje pozwalają projektantom określić, jak klient reaguje na ich decyzje, zanim przejdą oni do stworzenia bardziej wymyślnych, czasochłonnych w wykonaniu części kompozycji. Cała procedura sprawdza się równie dobrze w świecie web designerów. Rysunek 2.41 zawiera wizerunki, których Matthew użył na ścianie klimatów dla Southern Savers.

Rysunek 2.41. Ściana klimatów z grafikami dla witryny Southern Savers

54

http://andrewramos.com/

93

94

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Przeglądając elementy ścianki, zauważysz, że składa się na nią szeroki wybór kolorów, faktur i typografii. Natchnieniem dla Andrew i ideą, która łączy wszystkie te elementy, było wyrażenie: „Ze stanów południowych” (ang. southern). Kilka zdjęć zaaprobowanych przez Jenny widać na rysunku 2.42.

Rysunek 2.42. Wybór Jenny: okładki książek Juliusza Verne’a, stare etykiety cenowe i kolorowe zwierzaki

Przy wybieraniu tych zdjęć Jenny nie kierowała się w pierwszej kolejności kolorami, ale łatwo zauważyć wspólny element łączący je wszystkie — wyblakły turkus. Być może nieświadomie, decydując się właśnie na te zdjęcia ze ściany klimatów, Jenny położyła podwaliny pod schemat kolorów swojej strony. Innym kolorem pojawiającym się na każdym obrazku jest czerwonopomarańczowy. Jak już się orientujesz, przeczytawszy podrozdział „Schematy kolorów”, wspaniale nadałby się on do stworzenia dopełnieniowego schematu barw. Jednak Andrew i ekipa Squared Eye zdecydowali się zbudować witrynę w oparciu o ukochany kolor Jenny: wyblakły turkus. Wydobyli oni warianty zieleni z okładki 20 000 mil podmorskiej żeglugi na wybranym zdjęciu. Kolor zielony pełni podwójną rolę, przypominając odwiedzającym o pieniądzach, jakie mogą zaoszczędzić55. Następnie zestawili te zielenie z kremowymi wariantami żółtego i dodali jasny błękit leżący po drugiej stronie koła barw, aby zaakcentować jego analogiczną część. Ostateczny schemat jest radosny, swobodny i przyjazny dla oka (rysunek 2.43).

Rysunek 2.43. Schemat kolorów 55

Jest to jedna z wielu sytuacji, w których skojarzenia kulturowe mogą odgrywać ważną rolę. W tym przypadku większość użytkowników strony mieszka w Stanach Zjednoczonych, gdzie zieleń kojarzona jest z pieniędzmi.

Kolor

Kiedy zapytałem Jenny, co myśli o kolorach na stronie, powiedziała mi, że mimo iż pokaźny odsetek odwiedzających stanowią kobiety, nie chciała ona, żeby witryna wyglądała zbyt „dziewczęco”. „Chciałam, żeby każdy mógł czuć się komfortowo, odwiedzając naszą stronę” — powiedziała. Biorąc pod uwagę ładunek emocjonalny, użycie tego zestawienia kolorów było oczywistym wyborem. „Błękit i zielenie wywołują uczucie spokoju i swobody” — mówi Andrew. — „Schemat ten jak najbardziej odpowiada witrynie takiej jak Southern Savers, której użytkownicy mogą myśleć, że będzie to skomplikowane, bazując na wcześniejszych, przykrych doświadczeniach”. Prezentacja ściany klimatów dała Andrew to, czego potrzebował, by móc rozpocząć proces tworzenia tożsamości marki. Nadała ona również głębi temu, co ekipa Squared Eye wiedziała o projekcie. W zasadzie właśnie głębia będzie tym, z czym zapoznamy się w następnym rozdziale. Nie, nie będę czytał Ci na głos 20 000 tysięcy mil podmorskiej żeglugi. Zamiast tego porozmawiamy sobie o teksturach.

95

96

Rozdział

3

Tekstura Jest wśród nas wielu designerów, którzy choć mają dobre intencje, ograniczają się w budowaniu stron do stworzenia dwu- lub trzykolumnowego układu i dopasowania do niego kilku barw. Nie zawracają sobie głowy ulepszaniem swojego projektu czy podrasowaniem kilku jego elementów. Być może nie mają czasu lub pieniędzy, żeby „popchnąć” go dalej, albo zbyt dosłownie zrozumieli maksymę: „Mniej znaczy więcej”. Nie każda witryna musi być piękna, lecz każda może. Arkusze stylów CSS dały web designerom większą kontrolę nad wyglądem strony, ale problemem pozostaje, jak myślę, to, że wiele osób po prostu nie wie, od czego zacząć, gdy w grę wchodzi wzbogacanie kompozycji. Rozdział ten jest poświęcony właśnie temu — sposobowi na udoskonalenie Twojej witryny za pomocą tekstury. Teksturę, zwaną też — szczególnie poza kontekstem tworzenia form grafiki komputerowej — fakturą, definiujemy jako to wszystko, co nadaje powierzchni lub przedmiotowi specyficzny wygląd bądź wrażenie dotyku. Gdy położysz ręce na ceglanym murze, drewnianej belce lub mokrej kostce mydła — co czujesz pod palcami? Czy potrafiłbyś oddać „wrażenie” dotyku jednej z tych powierzchni na Twojej stronie? Na szczęście witryna raczej nie wbije drzazg w ręce jej użytkowników, ale wciąż może przywołać wspomnienie dotyku prawdziwych przedmiotów. Najpierw jednak musisz znaleźć sposób na opisanie powierzchni. Mógłbyś zacząć od zgłębienia aspektów jej chropowatości i gładkości, ale istnieje też wiele innych atrybutów, które ją charakteryzują. Czy składa się ona z powtarzanych deseni? Czy ma unikalny kształt? Jak można zdefiniować linie ten kształt tworzące? Czy powstała figura geometryczna ma objętość? Pytania te mogą Ci się wydać trochę chaotyczne, ale wyrastają one bezpośrednio z podstawowych pojęć projektowania graficznego, którymi są: punkt, linia, figura, objętość i głębia oraz deseń. Zrozumienie działania tych komponentów nie tylko sprawi, że uchwycisz sens stosowania tekstury, ale również pozwoli Ci ją tworzyć.

98

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Punkt Jeśli pracowałeś już z kaskadowymi arkuszami stylów (CSS), powinieneś wiedzieć, że główną jednostką miary w nich używaną jest piksel (skrót od angielskiego wyrażenia „picture element”). Piksel to jedna z setek tysięcy kropek na ekranie monitora Twego komputera. Jeżeli ustawiłeś jego rozdzielczość na 1280×1024 piksele, wyświetla on 1 310 720 takich elementów ustawionych w 1024 szeregi i 1280 kolumn. Wszystkie te piksele zlewają się, tworząc obraz cyfrowy. To wszystko to oczywiście wiedza bardzo podstawowa, ale — jak zaraz się przekonasz — odnosi się ona do idei punktu w projektowaniu graficznym. Tak jak piksel jest fundamentalną cząstką obrazu cyfrowego, tak punkt (bądź kropka) jest podstawowym elementem projektu graficznego i elementarną figurą geometryczną , której można użyć do stworzenia dowolnej grafiki. Punkty nie mają skali ani wymiarów, o ile nie posiadają układu odniesienia. Dla przykładu punkt na bilbordzie może wyglądać jak znak przestankowy kropki, aby po zbliżeniu okazać się wielkości Twojej głowy. Punkty zgrupowane razem, tak jak na rysunku 3.1, tworzą linie, figury i objętość.

Rysunek 3.1. Rastrowany koteczek — obraz punktowy

Pracując nad projektem graficznym, łatwo jest spojrzeć na całość obrazu, zapominając o tworzących go punktach. Pamiętaj — punkty mają w sobie ogromną moc. Spójrz na witrynę Craiga Robinsona Flip Flop Flyin56. Oprócz innych form sztuki Craig zajmuje się tworzeniem portretów sławnych osobistości, zespołów i grup. Ten typ twórczości nosi nazwę Minipop. Rysunek 3.2 przedstawia Minipop z bohaterami serialu telewizyjnego Drużyna A. Fani z pewnością zauważą trzymane przez Hannibala ukochane cygaro.

56

http://flipflopflyin.com/

Tekstura

Rysunek 3.2. Drużyna A według Craiga Robinsona

Linia Dwa dowolne, połączone ze sobą punkty tworzą linię. Linia jest najczęściej stosowanym i jednym z najbardziej ekspresywnych komponentów w projektowaniu graficznym oraz podstawową figurą geometryczną . Projektując witryny, większość ludzi bierze pod uwagę jedynie linie proste wyznaczające krawędzie (border) lub podkreślenia hiperłączy, mimo że w projektowaniu stron można ich użyć na niezliczoną ilość innych sposobów. Linie ukośne wywołują uczucie ruchu i podekscytowania. Niczym przewracająca się kostka domina, prosta ukośna niesie w sobie duży ładunek energii. Wykorzystanie wzoru składającego się z linii poziomych urozmaica kompozycję i nadaje jej fakturę, ale dopiero użycie motywu linii ukośnych sprawia, że całość staje się niepokojąca, i każe użytkownikowi krążyć wzrokiem po układzie. Porównaj ze sobą dwa przykłady na rysunku 3.3. Który z nich lepiej przyciąga Twoją uwagę?

Rysunek 3.3. Tła stworzone przy użyciu poziomych i skośnych linii

W podobny sposób jak ukośne proste sugerują ruch, od grubości i kierunku ułożenia linii zależy wyraz i charakter kompozycji. Linie wyszczerbione zaginające się pod ostrymi kątami, które nazywamy „łamanymi ”, niosą w sobie odczucie niebezpieczeństwa i paniki. Spokojnie zawijające się linie, zwane „krzywymi ”, wywołują poczucie relaksu i odprężenia. Linie przecinające się pod kątem 90o są postrzegane jako ostre i „techniczne”. Z kolei linie poskręcane i pozaginane wyrażają „charakter”, co widać, gdy występują w formie pisma, graffiti lub szkicu.

99

100

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

W fazie prototypowej tworzenia witryny staraj się pamiętać, że linie mogą być czymś więcej niż wyznacznikami podziału, obramowania czy pasami w tle. Są fundamentem sztuki, rysunku i projektu. Sieć jest bardzo sztywnym, technicznym medium, wobec czego łatwo jest zapomnieć o tak podstawowych narzędziach artysty, jak ołówek i pędzel. Spróbuj więc stworzyć wariacje na temat sposobu wyświetlania linii, konstruując modele w tradycyjny sposób bądź używając uprzednio zdefiniowanych pędzli w programach takich jak Adobe Illustrator, tak jak zrobiłem to ja na rysunku 3.4. To wspaniały sposób, aby dodać odrobinę artyzmu do medium, które czasem wydaje się aż nazbyt cyfrowe.

Rysunek 3.4. Efekt eksperymentów z jakością, kierunkiem i grubością linii

Świetny przykład urozmaiconych linii prezentuje witryna The IdeaLists57, widoczna na rysunku 3.5. Zwróć uwagę na połączenie bardzo cienkich kresek z bardzo grubymi, jak na przykład w pasie z napisem „How it works” na środku strony i w kolorowych słupkach ponad nawigacją. Zauważ też dość swawolne wykorzystanie wzoru zygzaka pod logo i w reszcie układu. Powtórzenie tego wzoru w pionie i poziomie wprowadza jedność na stronie dzięki stworzeniu spójnego schematu kolorów. Na koniec przyjrzyj się subtelnemu zastosowaniu linii poziomych w komponentach u dołu strony i maleńkiemu zawinięciu wstęgi z napisem „How it works”.

57

http://theidealists.com/home

Tekstura

Rysunek 3.5. Stylizacja linią na witrynie The IdeaLists

Figury Jeśli dwa punkty tworzące linię połączymy inną linią, nienakładającą się na tę pierwszą, stworzymy złożoną figurę geometryczną płaską. Na pewno nie wzbogacę zbytnio Twojej wiedzy z dziedziny geometrii, wymieniając trzy podstawowe figury — okrąg, trójkąt i prostokąt. Należą one do grupy figur formalnych (lub regularnych). Są nimi również strzałki, elipsy, deltoidy, znaki „+”, półokręgi itd. Rysunek 3.6 prezentuje kilka z nich. Precyzyjne zakrzywienia, załamania i linie proste charakteryzujące formalne figury geometryczne sprawiają, że trudno jest je narysować od ręki, chyba że przy użyciu cyrkla, kątomierza i linijki. Jednak w dowolnym programie graficznym geometrycznie idealne linie, krzywe i kąty występują w postaci gotowych wzorców. Z tego właśnie względu figury te wywołują skojarzenia z techniką i mechaniką.

101

102

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 3.6. Figury geometryczne regularne i nieregularne

Specyficznym rodzajem figur geometrycznych są figury nieregularne (zwane też figurami nieformalnymi). Odróżniają się od figur formalnych tym, że składają się z nieregularnych zakrzywień i kątów losowej wielkości, jak widać na rysunku 3.6. Ze swej natury są one fikuśne, przez co wyrażają spontaniczność i luz. Mogą oznaczać formę produktu, jakiś gest lub bazgroły. Rysunek 3.7 ukazuje stopniową transformację formalnej figury geometrycznej w figurę nieregularną.

Rysunek 3.7. Przemiana figury regularnej w nieregularną

W kontekście web designu wiele osób zdaje się zapominać, że figury nieregularne istnieją. W rozdziale 1. wyjaśniłem, że struktura strony zbudowana jest z bloków. W jakikolwiek sposób ułożysz stronę, bloki te pozostaną prostokątne. W przeciwieństwie do projektu poligraficznego, który pozwala nam rysować figury, jak tylko chcemy, sieć ogranicza nas do czworokątów. Jednakże to, iż bloki zawierające są z reguły prostokątne, nie znaczy jeszcze, że muszą tak wyglądać. Jedną z najczęściej stosowanych metod ukrywania struktury strony HTML jest nadanie jej tła.

Tekstura

Jako tło mógłbyś zastosować okrąg lub elipsę, w której wyśrodkowałbyś tekst — wstawiając znacznik złamania linii (br) tam, gdzie trzeba — tak by stworzyć wrażenie, że okrągławe tło wyznacza granice komponentu układu. Rysunek 3.8 ukazuje przykład takiego podejścia. Problem stanowi jednak fakt, iż jeśli treść wykroczy poza granice figury lub jeśli zapomnisz złamać linię tekstu, owalny kształt nie rozszerzy się, żeby dopasować się do zawartości.

Rysunek 3.8. Tekst wewnątrz owalu

OK, więc jeśli zapomnisz dopasować tekst do ram grafiki w tle, możesz mieć spory problem. Drugim powodem, dla którego metoda ta jest mało praktyczna, jest to, że wiele przeglądarek pozwala użytkownikom zmieniać wielkość tekstu, co po zastosowaniu może zniszczyć efekt naszej delikatnej, wymyślnej techniki. Z tego płynie wniosek: w praktyce możemy jedynie odwrócić uwagę użytkownika od faktu, że nasz układ strony jest prostokątny.

Zaokrąglone wierzchołki Wiemy teraz jedno: nie możemy polegać na tym, że wysokość bloku zawartości będzie prawidłowo wyświetlana na naszych monitorach w każdym przypadku. Możemy jednak chociaż pozbyć się tych ostrych wierzchołków, które charakteryzują układy prostokątne. Z perspektywy projektowania graficznego figury z zaokrąglonymi rogami łagodzą wygląd kompozycji, sprawiając wrażenie naturalnych i delikatnych. Pamiętasz, gdy zapytałem, czy byłbyś w stanie oddać uczucie dotyku mokrej kostki mydła na swojej witrynie? Zaokrąglone wierzchołki z pewnością uczyniłyby ją bardziej „śliską”. Rzuć okiem na bloki treści na witrynie Simona Collisona58 (rysunek 3.9). Rogi każdego z nich zostały odrobinę przytemperowane, by w efekcie nadać temu bardzo siatkowemu układowi odrobinę delikatniejszy wygląd. Bloki w czerwonych obwódkach po lewej stronie ilustracji pokazują zakrzywione krawędzie w zbliżeniu.

58

http://colly.com/

103

104

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 3.9. Znamienite miscellanea pana Simona Collisona

Czemu zatem dolny czerwony blok na rysunku 3.9 ma ostre wierzchołki? Przedstawia on bowiem wygląd strony pod przeglądarką Internet Explorer 8. Wierzchołki te są kwadratowe, ponieważ Simon użył właściwości CSS3 border-radius, która została wsparta dopiero w Internet Explorerze 9. Prawdę mówiąc, nawet w chwili wydania tej książki przeglądarki Firefox i te oparte na silniku WebKit wymagają specyficznej składni CSS, żeby stworzyć zaokrąglone krawędzie — odpowiednio — -moz-border-radius i -webkit-border-radius. Mimo dziwnego zduplikowania tych nazw zastosowanie CSS3 to najłatwiejszy sposób na zaokrąglanie rogów komponentów graficznych. Niestety, z powodu nieobsługiwania tej właściwości przez większość przeglądarek Microsoftu metoda ta może okazać się mało praktyczna, chyba że możemy pozwolić sobie na to, iż część naszych użytkowników będzie widziała ostre wierzchołki. W przypadku witryny Simona Collisona utrata krągłości niewiele zmienia. Poza tym rzeczą, która robi naprawdę wielkie wrażenie na witrynie Simona, jest wykorzystanie zapytań medialnych (ang. media queries). Zapytanie medialne jest nową właściwością CSS3, która pozwala na zdefiniowanie warunków użycia zestawu stylów. W tym przypadku Simon zastosował ją do automatycznej transformacji układu strony w odpowiedzi na zmianę wielkości okna przeglądarki lub użycie nietypowego urządzenia. Choć nie można powiedzieć, że w rezultacie powstał układ reaktywny — ponieważ nie przechodzi on płynnie między kompozycjami — zastosowane rozwiązanie oferuje praktyczny i imponujący sposób na dopasowanie witryny do różnych typów urządzeń połączonych z siecią. Odwiedź zatem teraz http://colly.com/, zmniejsz okno przeglądarki i sprawdź, co się stanie.

Tekstura

Gdy pisałem pierwsze wydanie tej książki, właściwość border-radius była jedynie świetlistym promyczkiem nadziei na usprawnienie techniki, którą przez lata staraliśmy się zaimplementować, używając HTML-a i CSS. Z tego powodu przybliżyłem w nim kilka sposobów na stworzenie zaokrąglonych wierzchołków przy użyciu języka JavaScript lub znaczników zewnętrznych. Większość z tych metod zarzucono i choć istnieje obecnie kilka powszechnie stosowanych rozwiązań problemu tworzenia zaokrągleń, bazujących na JavaScripcie, żadnego z nich nie mogę polecić z czystym sumieniem. Jeśli nie potrafisz sam stworzyć okrągłych rogów za pomocą prostych obrazów tła w CSS, posłuchaj mojej rady i weź przykład z witryny Simona — spraw tylko, aby zaokrąglenia były dość subtelne. W ten sposób Twój projekt będzie wyglądał dobrze nawet z ostrymi wierzchołkami. Odwiedź witrynę http://dowebsitesneedtolookexactlythesameineverybrowser.com/, by zapoznać się bliżej z moją opinią na temat tego, czy strona musi się prezentować tak samo w każdej przeglądarce.

Obrót W poprzednim podrozdziale wspomniałem, że linie położone ukośnie wywołują uczucie ruchu i ekscytacji. Obrócenie figur lub elementów kompozycji pozwala osiągnąć ten sam efekt. Obrócone komponenty załamują monotonię sieci, a zaokrąglone wierzchołki sprawiają, że całość wygląda bardziej naturalnie. Popatrz na witrynę Ithaca Events59 na rysunku 3.10. Pełno na niej bogatych zdobień, przez co powstaje wrażenie namacalności. Subtelny obrót logo, odnośnika View all u dołu każdej z dat oraz innych elementów tła nadaje witrynie „charakter”. Dla mnie projekt ten wygląda jak plakat, który mógłby zawisnąć przy lokalnym teatrze — nadałby się wspaniale na witrynę regionalnego kalendarza wydarzeń ze świata kultury i sztuki.

Rysunek 3.10. Witryna Ithaca Events

59

http://www.ithacaevents.com/

105

106

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Obecnie najczęściej stosowanym sposobem na uzyskanie efektu obrotu jest zapisanie stworzonych wcześniej grafik w dowolnym edytorze graficznym. Tak jak w przypadku zaokrąglonych wierzchołków, praktyka ta odejdzie wkrótce do lamusa za sprawą CSS3. Właściwość transform CSS3 pozwala na skalowanie, przekrzywianie i obracanie komponentów bezpośrednio w oknie przeglądarki. Efekt ten na pewno będzie wykorzystywany zbyt często i w niewłaściwy sposób, ale faktem pozostanie, że zwiększenie kontroli nad zawartością z poziomu arkuszy stylów stanowi rewolucyjny krok naprzód w projektowaniu witryn. To, że obrót w CSS3 nie ma jeszcze pełnego wsparcia, nie znaczy jeszcze, iż powinieneś tej metody unikać. Nie tak dawno temu skorzystałem z właściwości transform do obrócenia bloku treści głównej na witrynie, którą stworzyłem na warsztaty z projektowania organizowane w trakcie festiwalu South by Southwest Interactive 201060. Wiedziałem, że większość odwiedzających witrynę będzie używać najnowszych wersji przeglądarek Firefox, Chrome lub Safari, a więc zobaczy obróconą treść tak, jak na rysunku 3.11. Użytkownicy Internet Explorera ujrzą ten sam projekt, z tą różnicą, że obszar z treścią nie będzie obrócony.

Rysunek 3.11. Warsztaty projektowe w ramach South by Southwest Interactive

Figury a kompozycja Zaokrąglone rogi i obrócona zawartość to tylko dwie techniki, które sprawią, że Twój układ będzie wyglądał naturalnie i mniej mechanicznie. Istnieje wiele innych sposobów na urozmaicenie swojego projektu poprzez pomysłowe zastosowanie figur geometrycznych. Rzuć okiem na witrynę Tahoe Tech Talk 201061 na rysunku 3.12. Jej projektanci wykorzystali uproszczony styl 60

http://sxsw.com/interactive

61

http://tahoetechtalkconf.com/

Tekstura

ilustrowania, na który składa się wiele nieformalnych figur tworzących widoczną kompozycję. Kiedy sam patrzę na tę stronę, najpierw zauważam odważnie umieszczone logo. Z tamtego miejsca ukośne linie z niego wychodzące prowadzą mój wzrok nad bilbord. Następnie jaskrawoczerwony znak poniżej od razu przykuwa moją uwagę, tak że przeskakuję na białą krawędź, widząc strzałkę z napisem „Learn more”. Wizjer lornety wskazuje mi bilbord poświęcony tematyce strony, gdyby zdarzyło mi się go wcześniej przeoczyć.

Rysunek 3.12. Tahoe Tech Talk 2010

Możesz sobie nie zdać z tego sprawy od razu, ale figury na ilustracji tej strony są właśnie tymi elementami, które definiują całą kompozycję. Jednym ze sposobów określenia, jak wielki wpływ na układ mają figury, jest wyizolowanie ich poprzez wykonanie szkicu jego głównych elementów. Aby to zrobić, możesz albo wydrukować zrzut ekranu tej kompozycji, po czym naszkicować figury odręcznie na papierze milimetrowym, albo otworzyć go w dowolnym programie graficznym i usuwać jego elementy po kolei, po tym jak odwzorujesz obrys podstawowych komponentów na nowej warstwie. Ja nazywam ten proces testem oszczędności linii. Terminu oszczędność linii używa się do opisu dzieła sztuki lub projektu graficznego, który wyraża przekaz z wykorzystaniem jak najmniejszej liczby linii. Jeśli naszkicowany, niepokolorowany układ w dalszym ciągu wygląda na kompletny, oznacza to, że zdał test oszczędności. Jak możesz sam się przekonać, patrząc na rysunek 3.13, układ Tahoe Tech Talk wciąż wydajnie prowadzi Twój wzrok po stronie, mimo że brak mu tekstu i kolorowych grafik.

107

108

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 3.13. Test na oszczędność linii witryny Tahoe Tech Talk

Objętość i głębia Rozmawialiśmy już o punkcie, linii, figurze, a teraz przyszedł czas, by przenieść naszą dyskusję w inny wymiar. Wszystkie z omówionych wcześniej elementów istnieją jedynie w dwóch wymiarach — wysokości i szerokości. Są jedynie znakami na papierze lub ekranie monitora, pozbawionymi wszelkiej głębi. Jednak, jako że żyjemy w trójwymiarowym świecie, nauczyliśmy się polegać na sygnałach wzrokowych, które pomagają nam określić szerokość, wysokość i głębię przedmiotów wokół nas.

Perspektywa Kiedy widzimy drogę znikającą za horyzontem, tak jak dzieje się to z Wielkim Murem Chińskim na rysunku 3.14, nie mówimy, że szerokość drogi zmalała do pojedynczego punktu. Podobnie jest, gdy patrząc na otwarte drzwi, jesteśmy świadomi, że ich dolna i górna krawędź są do siebie równoległe, mimo że wydają się zbiegać w kierunku framugi. Iluzje przestrzenne nie oszukują nas, ponieważ wiemy (świadomie lub nie), że wraz ze wzrostem odległości przedmioty jedynie zdają się maleć.

Tekstura

Rysunek 3.14. Perspektywa na Wielkim Murze Chińskim

Proporcje W rozdziale 1. wspomniałem, że zmodyfikowanie wielkości elementów w kompozycji jest wspaniałym sposobem na uzyskanie wyróżnienia. Metoda ta sprawdza się, ponieważ ludzie polegają na względnych proporcjach sąsiadujących obiektów nie tylko w celu określenia ich wielkości, lecz także aby wyznaczyć ich położenie w trójwymiarowej przestrzeni. Choć konie w tle na rysunku 3.15 są proporcjonalnie mniejsze od konia na pierwszym planie, w rzeczywistości mają mniej więcej tę samą wielkość.

Rysunek 3.15. Z proporcji w projektowaniu stron żaden koń by się nie uśmiał

109

110

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Światło i cień Światło i cień to dwa najważniejsze sygnały wizualne, których możemy użyć do określenia lub stworzenia głębi i objętości kompozycji. Nawet gdy użyliśmy odpowiedniej perspektywy i proporcji, układ pozbawiony prawidłowego naświetlenia i cieniowania będzie wyglądać nudno. Światło i cień ustanawiają kontrast i pomagają stworzyć ułudę trójwymiaru na płaszczyźnie takiej, jak kartka papieru czy ekran monitora. Można ich też użyć oddzielnie, aby iluzorycznie przenieść obiekt dwuwymiarowy w trzeci wymiar. Trzy niebieskie koła na rysunku 3.16 mają ten sam rozmiar, ale różne efekty naświetlenia i cieniowania nałożone na nie nadają każdemu z nich odmienne wrażenie głębi i objętości. Na pierwszym okręgu zastosowano podstawowy zrzut cienia. Jasne jest, że samo koło jest trójwymiarowe, ale rzut cienia sprawił, że wydaje się ono lewitować nad nieokreśloną powierzchnią. Drugie koło potraktowano liniowym gradientem i zacieniowano tak, że cień spłaszcza się w lewą stronę. Zestawienie światła z przechylonym cieniem sugerowałoby, że dwuwymiarowe koło rzuca cień na powierzchnię pod kątem. To, że cień znajduje się bliżej dołu koła, wzmaga wrażenie ruchu — wygląda to, jakby górna część figury upadała do bądź od widza. Gradient kołowy — to znaczy taki, który jest nakładany równomiernie we wszystkie strony od punktu centralnego — został nałożony na trzecie koło, które — dzięki powstałym odblaskom i cieniom — wygląda jak sfera. Cień pada zgodnie ze źródłem światła, co nadaje wiarygodności głębi i objętości figury.

Rysunek 3.16. Przykład gry światłem i cieniem

Tak jak jest wiele metod modyfikacji głębi kół z rysunku 3.16, istnieje też wiele sposobów na nadanie elementom witryny większej objętości przy użyciu jedynie światła i cienia. Weźmy na ten przykład menu nawigacji z rysunku 3.17. Słowa wewnątrz bloków i zaokrąglone wierzchołki sugerują, iż można je kliknąć, a czarne tło przycisku Produkty wskazuje, że albo jest on aktywny, albo najechano na niego myszą. Ta prosta nawigacja działałaby wyśmienicie na dowolnej witrynie, ale niestety nie jest ona zbyt efektowna.

Tekstura

Rysunek 3.17. Proste funkcjonalne menu — szkoda, że zupełnie pozbawione głębi

Jak prezentowałyby się te przyciski, gdyby przenieść je w trzeci wymiar? Czy byłyby płaskie z wypukłymi krawędziami, czy zaokrąglone na górze? Czy ich górne krawędzie byłyby proste w poziomie, czy zaokrąglały się na końcach? Co stałoby się z nimi, gdyby padło na nie światło? Na wszystkie te pytania odpowiedzi znajdziesz, rozglądając się wokół. Na przykład pracując nad menu z rysunku 3.18, wyobraziłem sobie, że światło pada na jego linki z góry, wobec czego zamiast jednostajnego koloru nadałem im lekki gradient. Uwypukliłem też krawędzie, upodobniając je do połyskliwych prostokątnych płytek ceramicznych w metrze. Chciałem również, żeby aktywny link wyglądał na wciśnięty, a nie wypukły. Udało mi się to osiągnąć, dodając cień do górnej części przycisku — zamiast odblasku. Sprawiłem też, że litery wewnątrz odnośników wyglądają, jakby unosiły się odrobinę nad powierzchnią przycisku, rzucając na nie cień.

Rysunek 3.18. Gradienty, cienie i uwypuklenie wyróżniają to menu

Dodanie cieni do tekstu i innych elementów Twego układu jest kolejnym świetnym sposobem na stworzenie głębi w Twoim układzie. Można zrobić to łatwo w Photoshopie, ale co jeśli osoba odpowiedzialna za administrację witryny nie ma własnej kopii tego programu? Tak jak wtedy, gdy zawijaliśmy rogi i obracaliśmy komponenty, i teraz na ratunek przychodzi nam CSS3. Właściwości box-shadow i text-shadow zapewniają, że w przyszłości projektowanie witryn będzie w mniejszym stopniu zależne od gotowych grafik. Świetnym miejscem na poeksperymentowanie z tymi i innymi właściwościami CSS3 jest witryna http://css3please.com/.

111

112

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Nie ma sensu ograniczać się tylko do dodania odblasku i cieni do prostokątnych elementów: spróbuj włączyć w całość trochę perspektywy, biorąc pod uwagę to, jak prezentują się rzeczywiste obiekty, których trójwymiarowość starasz się odwzorować. Spójrz na zrzut ekranu witryny Worry Free Labs na rysunku 3.19. Projekt strony głównej tej teksańskiej firmy designerskiej jest prosty, zabawny i — jeżeli chodzi o fakturę — bardzo pomysłowy. Baner z napisem „Willkommen to Worry Labs!” jest punktem ogniskowym nie tylko dzięki kontrastowi, ale w dużej mierze również dzięki złożonym, zawiniętym krawędziom po obu jego stronach. Bez tych akcesoriów baner byłby tylko nudnym, białym prostokątem, lecz naturalny kształt i realistyczne cienie sprawiają, że wygląda na dokładne trójwymiarowe odwzorowanie rzeczywistego transparentu z papieru lub tkaniny.

Rysunek 3.19. W Worry Free Labs znają się na stosowaniu figur i cieni

Czerpanie natchnienia z prawdziwego świata jest kluczem do nadania wiarygodnej głębi każdemu elementowi graficznemu. Zamiast zadowalać się układem złożonym z kwadratowych bloków koloru, linii i kształtów, spróbuj pomyśleć o sposobach na włączenie do niego trzech wymiarów. Pamiętaj, że elementy, które bardzo „wystają”, staną się najprawdopodobniej punktami ogniskowymi, i że perspektywa oraz proporcje znaczą niewiele bez wsparcia ze strony światła i cienia.

Tekstura

Deseń Wciąż mam w pamięci swoje pierwsze zderzenie ze światem web designu. Byłem w dziesiątej klasie, gdy nauczycielka pisania maszynowego uparła się, że nauczy nas języka HTML. Jego nauka była nieobowiązkowa, ale mając do wyboru dyktando z pisania maszynowego lub trening budowania stron, podjąłem jedyną słuszną decyzję. Pod koniec roku miałem stworzonych kilka małych witrynek internetowych. Cechą wspólną tych wszystkich — spójrzmy prawdzie w oczy — szkaradnych tworów było tło. Wiesz, o jakim rodzaju tła mówię — tym powtórzonym wzorze, który tworzył wrażenie ciągnącej się w nieskończoność faktury wody, kamienia, gwieździstego nieba lub płótna obrazu. Choć powtarzające się obrazy tła, jak te z rysunku 3.20, są charakterystyczne dla wczesnej ery w projektowaniu stron internetowych — lat 90. XX wieku, są też klasycznym przykładem stosowania deseni. Deseń (lub wzorzec) był używany od dawien dawna do wzbogacania różnych rodzajów projektów graficznych. W kontekście sieci preferowane były niewielkie grafiki — z uwagi na małe rozmiary ówczesnych stron. Zastosowanie małego obrazka, który po powieleniu mógł wypełnić całą powierzchnię tła, zamiast dużego jednolitego obrazu znacznie skracało czas ładowania strony na 56-kilobitowym modemie.

Rysunek 3.20. Typowe tła witryn lat 90.

To, że układanie grafik w powtarzalny wzór ma raczej niedobrą przeszłość, nie oznacza, że nie powinieneś stosować deseni. Tak naprawdę używa się takich wzorów częściej, niż możesz być tego świadom. Kaskadowe arkusze stylów dały nam większy stopień kontroli nad grafikami w tle. Przed pojawieniem się CSS tło można było dodać jedynie do elementów tabeli i znacznika body. Obecnie jednak — dzięki CSS — tło można definiować dla dowolnego komponentu. Możesz w tym celu użyć dowolnej z pięciu podstawowych (i jednej skrótowej) właściwości CSS. background-color

Z tej właściwości korzystamy, aby nadać elementowi jednolity kolor tła. Na przykład gdybyśmy chcieli zmienić kolor takiego komponentu na zielono-niebieski (00B2CC), do jego deklaracji stylów dodalibyśmy następującą regułę:

113

114

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

background-color: #00B2CC;

Używając wartości szesnastkowych w CSS, musisz pamiętać o dodaniu symbolu #, tak jak w przykładzie. Właściwością tą możesz posłużyć się do uczynienia elementu przezroczystym za pomocą deklaracji transparent. Transparent jest w rzeczywistości domyślną wartością właściwości background-color. Może Cię kusić, żeby stosować oficjalne nazwy własne kolorów w HTML-u, takie jak Aquamarine czy BalchedAlmond, ale z uwagi na to, że konsorcjum W3C w specyfikacji HTML 4.0 wymienia jedynie szesnaście nazw kolorów (które i tak będą identyfikowane jako błędne, jeśli spróbujesz zwalidować plik CSS), radzę Ci używać wartości szesnastkowych, o których była mowa w rozdziale 2. background-image

Jeśli chcemy, żeby w tle elementu znalazła się grafika, możemy ją zadeklarować, używając właściwości background-image. Właściwość ta przyjmuje dwa typy wartości: url(ścieżkaDoPliku) lub none. Gdybym chciał nadać komponentowi jako tło grafikę z pliku animalcracker.png, dodałbym następującą deklarację: background-image: url(animalcracker.png);

background-repeat

Właściwość background-repeat przyjmuje cztery typy wartości: repeat, repeat-x, repeat-y i no-repeat. Wartość repeat, która sprawia, że grafika będzie powtarzana równomiernie w poziomie i w pionie, jest domyślna. Dzięki repeat-x ta sama grafika jest powtarzana tylko w poziomie. Przydaje się to szczególnie wtedy, gdy chcesz nanieść gradient lub powtórzyć obraz w jednym pasie, ale pragniesz, by resztę elementu wypełniał określony kolor. Z kolei wartość repeat-y sprawia, że grafika powtarzana jest w pionie. Ostatniej wartości — no-repeat — używamy, gdy nie chcemy, żeby grafika tła była powtarzana. Efekt działania każdego z tych ustawień możesz podziwiać na rysunku 3.21.

Rysunek 3.21. Efekty działania różnych ustawień właściwości na przykładzie background-repeat zwierzakowych krakersów

Tekstura

background-attachment

Właściwość ta definiuje, czy grafika w tle zostaje w tym samym miejscu, czy porusza się wraz z treścią, gdy przewiniemy stronę w dół. Przyjmuje ona wartości fixed i scroll — ta druga jest wartością domyślną. Jeśli użyjemy ustawienia fixed, tło zostanie „przyczepione” do okna przeglądarki, co sprawi, że pozostanie ono w miejscu, nawet gdy przewiniemy zawartość strony. background-position

Ta właściwość, odpowiedzialna za umiejscowienie grafiki w elemencie, przyjmuje dwa typy wartości: pozycję wertykalną i horyzontalną obrazka. Typy te można zdefiniować za pomocą słów-kluczy (right, center i left dla ustawień w poziomie i top, center, bottom dla ustawień w pionie), jednostek miary CSS bądź procentów. Na przykład jeśli chcesz, żeby obraz tła był wyśrodkowany w pionie i wyrównany do góry komponentu, mógłbyś zadeklarować to, używając słów-kluczy (background-position: center top;) lub procentów (backgroundposition: 50% 0%;). Gdybyśmy zapragnęli umieścić nasz obraz w odległości 300 pikseli od lewej krawędzi i 400 pikseli od krawędzi górnej komponentu, moglibyśmy skorzystać z deklaracji background-position: 300px 400px; . Rezultat działania każdej z tych deklaracji zobaczysz na rysunku 3.22.

Rysunek 3.22. Zwierzakowe krakersy rozmieszczone za pomocą różnych ustawień właściwości background-position

Aby skrócić zapis wszystkich tych informacji, twórcy CSS stworzyli specjalną właściwość, która pozwala na zastosowanie wartości wszystkich pięciu własności w jednej deklaracji. element { background: background-color background-image background-repeat ߩbackground-position background-attachment; }

115

116

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rozważ dwie następujące deklaracje, które dają identyczny wynik — rząd zwierzakowych krakersów wyświetlonych na pomarańczowym tle wzdłuż dolnej krawędzi znacznika div o identyfikatorze id = ”piklehejho”: #piklehejho { background-color: #FF9900; background-image: url(animalcracker.png); background-repeat: repeat-x; background-position: left bottom; background-attachment: fixed; } #piklehejho { background: #FF9900 url(animalcracker.png) repeat-x left bottom fixed; }

Po zastosowaniu w dokumencie nasz element div mógłby wyglądać w sposób pokazany na rysunku 3.23.

Rysunek 3.23. Pikle Hej-Ho!

Jak już wcześniej napisałem, czasem trudno jest zauważyć powtórzoną grafikę w projekcie strony. Przećwiczmy sobie znajdowanie deseni na zrzucie ekranu witryny Dave’a McNally’ego Tileables62 z rysunku 3.24.

62

http://tileabl.es/

Tekstura

Rysunek 3.24. Tileables — nieskończone źródło deseni

Nie uświadczysz tutaj żadnych zapętlonych cegieł lub zwierzakowatych krakersów w tle — znajdziesz za to solidne źródło deseni do Photoshopa. Co ważniejsze, pod powierzchnią kompozycji Tileables znajdziesz kilka rodzajów powtórzonego tła. Rysunek 3.25 prezentuje kilka z nich.

Rysunek 3.25. Trzy grafiki powtarzane w kompozycji Tileables

1. Na pierwszy rzut oka ta ozdobna linia wygląda na nieprzerwany ciąg kolorowych pasków. Jednak w rzeczywistości powstaje ona z jednego obrazu złożonego z pięciu pasów, które po powtórzeniu w poziomie stanowią tło nagłówka. 2. Znacznikowi body witryny Tileables przypisano powtórzony w pionie i poziomie obraz tła, tak żeby stworzyć fakturę ziarnistego papieru na obszarze ciemnego nagłówka i stopki strony. Gdybyś zmienił ten obraz na jednolity kolor, całość wciąż prezentowałaby się znakomicie, ale ta szesnastokolorowa kwadratowa grafika o wymiarach 100×100 pikseli dodaje całemu układowi dość przepychu, by usprawiedliwić jej wykorzystanie.

117

118

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Formalnie rzecz ujmując, samodzielnie zaprojektowane punkty listy wypunktowanej nie są powtórzonym tłem; to pojedyncze obrazy wyróżniające oddzielne znaczniki. Mimo że powtórzenie nie powstało za sprawą właściwości background-repeat, te zgrupowane elementy tworzą własny rodzaj wzorca.

Tworzenie faktury Do tej pory spośród elementów tworzących teksturę omówiłem: punkt, linię, figurę, głębię i objętość oraz deseń. Pojedynczo każdy z nich tworzy jakiś rodzaj tekstury, jednak dopiero gdy zaczniesz używać ich wszystkich razem, będziesz w stanie powołać do życia bardziej wyrafinowane dzieła. Sposób, w jaki je połączysz, zależy od rezultatu, jaki pragniesz uzyskać. Pytanie więc brzmi: „Jaki rodzaj wrażenia chcesz osiągnąć?”. Oto kilka możliwości.

Podstarzały, znoszony, nostalgiczny styl Może zależy Ci, by zaakcentować ponadczasową lub nostalgiczną naturę tematu? Powiedzmy, że chcesz stworzyć teksturę strony przypominającą zniszczony prospekt informacyjny wyprawy ekstremalnej, na której byłeś lata temu. W takim przypadku mógłbyś stworzyć kompozycję podobną do witryny ośrodka Brookside Resort63 w Gatlinburgu (Tennessee), zaprezentowanej na rysunku 3.26.

Rysunek 3.26. Witryna Brookside Resort

63

http://brooksideresort.com/

Tekstura

Ta witryna zawiera w sobie kilka elementów, które pomagają złożyć tę wyjątkową, znoszoną teksturę. Przestrzenie, zdawałoby się, pokryte akwarelą uzupełniają kolor o plamy i podkreślają fakturę papieru w obszarze z główną zawartością. Fotograficzne kartki pocztowe, które pojawiają się za komponentem z treścią, nadają stronie aurę nostalgii i podkreślają jej wygląd w stylu retro. Krzywa wyznaczająca dolną krawędź logo i kawałek papieru z napisem „Book Now” pomagają odwrócić Twoją uwagę od bardzo regularnych kształtów na stronie. Innym interesującym sposobem wykorzystania linii są perforowane krawędzie zewnętrznych kartek pocztowych — to mały detal, ale przykuwa Twój wzrok, gdy spojrzysz na lewą i prawą część strony. Znoszony i podniszczony wygląd był od dawna wykorzystywany zarówno w poligrafii, jak i web designie. Został spopularyzowany do tego stopnia, że w 2004 roku stał się trendem designerskim, kiedy to Cameron Moll nadał tej jakości estetycznej miano „tego wrednego, zużytego wyglądu” (ang. that wicked worn look)64. Seria artykułów poświęcona tej tematyce stała się hitem, który zainspirował wielu projektantów (w tym mnie) do wprowadzenia bardziej szorstkiej, chropowatej faktury do internetu. Kolejnym przykładem projektu, który wykorzystuje tę estetykę celem stworzenia poczucia nostalgii, jest witryna Team Fannypack65, zaprezentowana na rysunku 3.27. Ta śmieszna, ale przemyślnie zaprojektowana witryna zespołu Multiple Sclerosis Walk wygląda niczym stara, zmięta gazeta. Zwróć uwagę na fakturę wiekowego papieru i zawinięty róg u szczytu strony. Brązowo-szary schemat kolorów akcentuje bogatą historię ekipy.

Rysunek 3.27. Witryna Team Fannypack w pełnej sepii

64

http://www.cameronmoll.com/archives/000024.html

65

http://www.teamfannypack.com/

119

120

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Stosowanie faktury o brudnawych kolorach nie oznacza, że Twoja kompozycja musi nawiązywać do minionej epoki. Witryna The Electric Pulp66, którą widać na rysunku 3.28, stanowi wyśmienity przykład projektu bazującego na podniszczonej teksturze i niewyglądającego przy tym, jakby został wyjęty z archiwum.

Rysunek 3.28. Electric Pulp: grunge w stylu nowoczesnym

W porównaniu z fakturą tła na witrynie Brookside Resort, która wyglądała na pokrytą sklejką, drewniano-ziarniste tło wykorzystane przez Electric Pulp sprawia wrażenie naturalnego, ręcznie wykonanego. Odrobinę obrócone logo, zaznaczenie strony na menu nawigacji oraz drzewa u dołu strony — wszystko to wygląda na namalowane, a fraza: „We Build Websites” zdaje się wypalona w tle. Całość pomaga ustanowić rozpoznawalny styl, powtórzony w wielu innych pracach tej firmy webdesignerskiej. Można by powiedzieć, że namacalna faktura jest jej wizytówką. Choć niektórzy mogą sądzić, że ten styl projektowania jest (lub był) tylko przejściową modą, według mnie nie odejdzie on do lamusa. Niczym w wygodnych jeansach z dziurami na kolanach czy w stosiku wyblakłych pocztówek o podartych brzegach, jest w rzeczach starych i zużytych jakaś aura ponadczasowości i prawdziwości. A teraz coś z całkiem innej beczki…

66

http://electricpulp.com/

Tekstura

Czysto — ziarnisto W reakcji na estetykę zużycia pod koniec pierwszego dziesięciolecia XXI wieku wielu projektantów i web deweloperów zdecydowało się wyrzucić pomysł używania jakichkolwiek rodzajów faktury za okno. W owym okresie wydawało się to logicznym podejściem. Jakby nie patrzeć, jeśli pragniesz wywrzeć profesjonalne, zdecydowane wrażenie, zastosowanie tony tekstur jest równoznaczne z przyjściem w wyświechtanych jeansach i koncertowej koszulce na rozmowę kwalifikacyjną. Mimo to fakt, iż starasz się wyglądać poważnie i fachowo, nie oznacza, że Twoje projekty muszą być nudne i mdłe. Rzuć okiem na witrynę Foundation Six67 (rysunek 3.29).

Rysunek 3.29. Wyrafinowana kompozycja i subtelna faktura witryny Foundation Six

Nie znajdziesz tu nudnego błękitu czy zdjęć ludzi porozsadzanych w boksach, a jedynie profesjonalny, wyrafinowany projekt oparty na dopełnieniowym schemacie barw oraz mnóstwo subtelnej faktury. Zauważ nierówności na banerze z napisem „F6”, kołowy gradient na niebieskim tle i podwójne cienie rzutowane przez okna zrzutów ekranu. W sercu tego namacalnie gładkiego wyglądu znajduje się prosta tekstura szumowa (ang. noise texture), którą spostrzeżesz na każdym z trzech bloków z tłem powyżej. Tekstura szumowa lub ziarnista to po prostu deseń złożony z małych kropek. Jeśli rozejrzysz się wokół, zauważysz, że większość powierzchni ma subtelne nierówności. Dodanie odrobiny półprzezroczystego szumu w celu załamania przestrzeni wypełnionej jednolitym kolorem i aż zbyt doskonałym gradientem sprawi, że Twoje cyfrowe powierzchnie będą wyglądały jak żywe.

67

http://www.foundationsix.com/

121

122

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Nakładanie delikatnej faktury szumu na układ strony jest względnie nowym trendem, ale przy tym na tyle prostym, że będziemy go widzieć powszechnie w sieci przez najbliższe kilka lat. Inną witryną, której czystą, gładką kompozycję pokryto tą wszechobecną fakturą, była strona konferencji New Adventures In Web Design68 z 2011 roku, widoczna na rysunku 3.30 .

Rysunek 3.30. Powszechnie stosowana faktura na witrynie New Adventures In Web Design Conference

Wcześniej w tym rozdziale wyjaśniłem, że formalne figury geometryczne są normą w sieci, lecz niestety sprawiają mechaniczne wrażenie. Projekt The New Adventures Conference Simona Collisona czerpie właśnie z tej regularnej, opartej na planie siatki tradycji. Całość prezentuje się bardzo naukowo i wyglądałaby strasznie zimno i technicznie, gdyby nie dodane gradienty, ciepłe tło i subtelna ziarnista faktura. Właśnie te elementy dodają kompozycji szczyptę uczucia i kontrastu, wyróżniając ją na tle innych.

68

http://newadventuresconf.com/

Tekstura

Własnoręcznie zrobiony album Kolejną pomysłową odpowiedzią na „ten wredny, zużyty wygląd” (czy może raczej wariacją na jego temat) jest kompozycja wyglądająca bardziej na stronę z osobistego dziennika lub albumu niż witrynę internetową. Genialnym tego przykładem jest witryna londyńskiego amatorskiego klubu sportowego Go Mammoth69 widoczna na rysunku 3.31.

Rysunek 3.31. Zamierzona niedoskonałość na witrynie Go Mammoth

Mimo że kompozycja strony wpisuje się we wzorzec „tego wrednego, zużytego wyglądu”, dodanie odrobiny zmian sprawia, że wygląda na wykonaną odręcznie. Zwróć uwagę, że większość prostokątnych elementów na witrynie została obrócona lub przecięta na ukos. Tak samo potraktowano wizerunki sportowców na obszarze z główną zawartością. Zostali oni równo wycięci ze zdjęć, po czym dodano im białą postrzępioną obwódkę, przez co całość wygląda jak zrobiony w pośpiechu kolaż. To świetny wizerunek dla witryny, która stara się promować sporty drużynowe jako wspaniałą rozrywkę dla każdego.

69

http://www.gomammoth.co.uk/

123

124

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Innym przepięknym przykładem takiego „albumowego” stylu jest witryna restauracji Marie Catrib’s70 na rysunku 3.32. Miast polegać na nonszalanckim, „wyciętym” wyglądzie w celu stworzenia estetyki dzieła wykonanego ręcznie, na Marie Catrib’s wykorzystano teksturę rozdartego papieru, duże obrazy i mnóstwo ręcznie rysowanych elementów dekoracyjnych. W rezultacie powstała bardzo wesoła, soczysta kompozycja, która akcentuje artystyczną osobowość restauracji dla smakoszy.

Rysunek 3.32. Witryna Marie Catrib’s: równie rubaszna co wyrafinowana

70

http://www.mariecatribs.com/

Tekstura

Kapryśny styl kreskówkowy Witryna Marie Catrib’s równoważy wesołą kreatywność z wysublimowanym rękodziełem, ale co, jeśli chcesz dodać więcej tego pierwszego niż drugiego? Zastosowanie uproszczonych ilustracji, żywych barw i skupienie się na wizerunku zamiast zawartości może nadać Twemu projektowi dziecięcy nastrój. Sam nazywam taki efekt kapryśnym stylem kreskówkowym. Jeśli docelowymi użytkownikami Twojej witryny mają być dzieci, kapryśny styl kreskówkowy okaże się najpewniej trafnym wyborem. Przykładem witryny zbudowanej w oparciu o niego jest Club Penguin71 Disneya, widoczna na rysunku 3.33. Jeśli elementy interaktywne i animacje na tej stronie nie przykują uwagi dziecka, zrobią to barwne ilustracje i intensywne kolory. Zwróć uwagę na wielokrotne użycie zaokrąglonych rogów w projekcie, co pomaga górnemu menu nawigacji wyśmienicie wkomponować się w resztę strony.

Rysunek 3.33. Wesoła kreatywność na stronie Club Penguin Disneya

71

http://www.clubpenguin.com/

125

126

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Kolejnym wartym uwagi przykładem kapryśnego stylu kreskówkowego jest witryna Pop Cap Games, którą możesz podziwiać na rysunku 3.34. Seria gier Plants vs Zombies tej firmy zdobyła wielki rozgłos. Właśnie tę popularność wykorzystano, dodając do elementów witryny postacie z gry. Zwykle zawalenie projektu przykuwającą wzrok grafiką tego typu rozpraszałoby użytkowników. Jednak gdy Twoja firma sprzedaje gry komputerowe, wymyślanie sposobów na odwrócenie uwagi od poważniejszych spraw dokładnie odzwierciedla Twój charakter. W tym szczególnym przypadku rośliny i zombie po dwóch stronach bloku zawartości pomagają przerzucić Twoje spojrzenie tam i z powrotem, przez co istnieje pewna szansa na to, że Twój wzrok w końcu padnie na treść i przeczytasz ją, zanim wrócisz do grania.

Rysunek 3.34. Witryna Pop Cap Games

Tekstura

Tekstura minimalistyczna Po tym, jak spędziłem cały rozdział na przekonywaniu Cię, że warto dodawać teksturę do swoich projektów, czuję się w obowiązku powiedzieć Ci, że czasem nie trzeba tego robić. Tak jak można całkowicie wyeliminować kolor ze swego projektu, żeby stworzyć dany efekt, odrzucenie faktury również może być sposobem na nadanie stronie charakteru. Weźmy na przykład witrynę Daring Fireball72 Johna Grubera, widoczną na rysunku 3.35. Nie ma na niej ani gradientów, ani zaokrąglonych wierzchołków, ani delikatnej faktury szumu… nie ma nawet wyraźnych bloków.

Rysunek 3.35. Witryna Daring Fireball Johna Grubera

Niektórzy powiedzieliby, że witrynie Johna brakuje polotu, ale ja bym raczej stwierdził, że usunął on z niej wszelkie niepotrzebne elementy. Ta bardzo prosta, monochromatyczna konstrukcja służy jednemu celowi — dostarczeniu informacji. Z uwagi na to, że większość treści jest poświęcona nowinkom technologicznym i wiadomościom o firmie Apple, byłoby całkowicie dopuszczalne, gdyby dodano bardziej techniczną teksturę i obrazy do każdego postu. Zamiast tego John woli się skupić na słowie pisanym. Wyeliminowanie tekstury i obrazu właśnie to zapewnia.

72

http://daringfireball.net/

127

128

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Unikanie używania tekstury w projekcie nie oznacza, że ma się ona w ogóle nie pojawiać w Twojej kompozycji, tak jak ma to miejsce na witrynie Daring Fireball. Istnieje wiele przykładów minimalistycznych dzieł, które dają się nacieszyć oczom czymś więcej niż tylko tekstem. Profesjonalna witryna projektanta stron Marka Boultona na rysunku 3.36 jest tego świetnym przykładem.

Rysunek 3.36. Minimalizm w projekcie witryny Marka Boultona

Punktem ogniskowym tej strony jest olbrzymi nagłówek, który przedstawia niedawne projekty Marka. Niczym na okładce poczytnego czasopisma, logo, menu nawigacji i opis treści nałożono na wierzch głównej grafiki. Wrażenie układu magazynu jest potęgowane poniżej, za pomocą zawartości podzielonej między kolumnami na planie siatki. To doskonała kompozycja dla jednego z pionierów projektu sieciowego opartego na tej technice.

Wyznaczanie nowych trendów Jak ukazałem na przykładach witryn powyżej, faktura może mieć duży wpływ na to, jak ludzie postrzegają Twój projekt. Znajomość najpopularniejszych nowych trendów w web designie jest kluczem do tworzenia efektywnych współczesnych witryn. Jednak to wiedza o formach wyrazu, które pojawiły się w zamierzchłej przeszłości, poza kontekstem internetu, pomoże Ci wypracować Twój własny oryginalny styl.

Tekstura

Jedne z najlepszych źródeł na ten temat znajdziesz w dziale historii sztuki Twojej lokalnej biblioteki bądź księgarni. Zaznajomienie się z wzorcami architektonicznymi epoki późnego odrodzenia czy badanie nurtu realistycznego (i zrozumienie, w jaki sposób wpłynęły na twórców, takich jak Van Gogh czy Cézanne, tak że zdecydowali się złamać wszelkie zasady wykorzystania faktury w malarstwie) lub dojście do tego, jak modernizm ukształtował współczesne trendy designerskie, pozwolą Ci nie tylko wygrać teleturniej „Jeden z dziesięciu”. Wiedza na temat historii projektu graficznego poszerzy Twoje horyzonty, obdarzając Cię kreatywnością, własnym stylem oraz bogatym wachlarzem pomysłów artystycznych, które łatwo dopasujesz do potrzeb klienta. Ostatecznie to wizerunek, jaki Twój klient pragnie stworzyć, i cele komunikacyjne, które ustanowił, powinny być czynnikami rozstrzygającym o tym, jak wiele faktury zastosujesz w kompozycji. Wspominając o klientach, chyba już czas sprawdzić, jak się ma nasza przebudowa witryny Southern Savers.

Praktyczne wykorzystanie: wycinanie i oszczędzanie Proces projektowania witryny Southern Savers wkroczył w nowy etap. Jenny zaczęła prowadzić coraz więcej warsztatów z oszczędzania na południu Stanów Zjednoczonych, a popularność jej bloga nie przestawała rosnąć. Pomimo zastosowania już przestarzałego szablonu WordPressa i braku spójnej marki Southern Savers powoli stawało się powszechnie znane. W tym czasie dzięki udzielonym wywiadom Jenny znalazła się na okładkach kilku czasopism (rysunek 3.37), co zaowocowało jeszcze większym ruchem na stronie. Stało się jasne, że trzeba przeć naprzód z tym projektem.

Rysunek 3.37. Opis fenomenu Southern Savers w lokalnym czasopiśmie

129

130

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Już pod koniec rozdziału 2. oczywiste było, że zespół Squared Eye poczynił znaczne postępy. Szkielety ich stron zostały zatwierdzone, a cała ekipa dowiedziała się — dzięki zastosowaniu ścianek klimatów Andrew Ramosa — jakie kolory Jenny mogłaby chcieć zobaczyć w ostatecznym projekcie. Zanim jednak proces projektowania mógł się rozpocząć, Andrew musiał wpierw stworzyć tożsamość dla Southern Savers. Rysunek 3.38 ukazuje trzy koncepcje rozwoju, które opracował.

Rysunek 3.38. Trzy potencjalne kierunki tworzenia tożsamości Southern Savers

Kierunek nr 1: zabawny W tej koncepcji Andrew napisał nazwę przedsięwzięcia stworzoną przez siebie czcionką i zestawił ją z ręcznie pisanym sloganem. Kręta kropkowana linia za tekstem nadała całości zabawną, kapryśną aurę. Pracując nad tym zestawem, Andrew wpadł na pomysł dodania wizerunku pręgowca — zwierzątka spędzającego większość czasu na gromadzeniu zapasów jedzenia, co jest przecież ideą stojącą za wykorzystywaniem okresowych rabatów w sklepach. Kierunek nr 2: ogólny W projekcie tym tekstowe logo wygląda jak ręcznie malowany szyld. Andrew użył kwiatu magnolii do podkreślenia logo. Włączenie elementu starego wyglądu witryny pomaga zdefiniować osobowość, zbudowaną w oparciu o rozpoznawalność istniejącej marki. Rysunki produktów wspierają ideę, że niczym sklep spożywczy z tradycjami, witryna Southern Savers jest idealnym miejscem na zrobienie zakupów. Kierunek nr 3: klasyczny styl południowy Ta koncepcja opiera się na odręcznym foncie z egipskim szeryfem (znaczenie tych pojęć wyjaśnię w rozdziale 4.). Klasycznie wyglądające liczby, wiatrowskaz i niebieska wstęga mówią, że Southern Savers jest „tradycyjną i godną zaufania” instytucją wywodzącą się ze stanów południowych USA.

Tekstura

Skończyło się na tym, że Jenny spodobały się wybrane części ze wszystkich trzech kierunków. Nie przekonało jej zabawne logo z pierwszej koncepcji, ale za to poparła propozycję dodania rysunku pręgowca na witrynie. Spodobał jej się też pomysł zatrzymania kwiatu magnolii oraz egipski szeryf pisma z klasycznego stylu południowego. W rezultacie powstał pełen gracji mariaż wszystkich trzech koncepcji, który możesz podziwiać w postaci projektu wizytówki na rysunku 3.39. Zauważ subtelną fakturę drewna za logo oraz miękki, ręcznie malowany kwiat magnolii na ilustracji. Wybór tej właśnie „tożsamości” wprowadził poczucie głębi i osobowości marki Southern Savers, co dla Matthew Smitha będzie zasadnicze w pracy nad kompozycją witryny.

Rysunek 3.39. Wizytówka Southern Savers

Jak to wszystko wyszło? Tego dowiesz się później. Teraz czas najwyższy wkroczyć w nowy rozdział naszej przygody! Czas zająć się typografią!

131

132

Rozdział

4

Typografia Spójrzmy prawdzie w oczy — priorytetem w każdej witrynie jest komunikacja. Niezależnie od tego, czy tworzymy sklep internetowy, tożsamość sieciową dla jednej z najbogatszych firm na świecie, czy profil na portalu społecznościowym, typografia jest zasadniczym komponentem naszego projektu. Większość ludzi myśli, że w typografii chodzi tylko o układanie zbiorów kształtów w słowa, zdania i akapity. Możliwość wybrania fontu za pomocą kilku naciśnięć klawiszy sprawiła, że zapomnieliśmy o kreatywnych, artystycznych możliwościach oferowanych przez to medium. Co prawda istnieje wiele przeszkód w efektywnym dostosowywaniu typografii do sieci — omówię je po kolei na kolejnych stronach — jednak potęga, która stoi za krojem pisma, powinna dać Ci wystarczającą motywację, żeby chociaż spróbować przekroczyć przysłowiową granicę możliwości. Nie przekonałem Cię? Weź do ręki dowolne czasopismo, włącz telewizor lub odwiedź sklep spożywczy. Bez wątpienia dostrzeżesz wiele pomysłowych sposobów wykorzystania kroju pisma. Jest ono bowiem esencją marki produktów, kluczem do komunikacji i zasadniczym fragmentem każdego projektu.

To naprawdę absorbujący temat Czas spędzony na nauce typografii sprawił, że już nigdy nie spojrzę na bilbord, ulotkę czy książkę w ten sam sposób co kiedyś. W Twoim przypadku może się skończyć tym, że to Ty, a nie Twoje dzieci, będziesz robił fotki szyldu rollercoastera w parku rozrywki. Rozmyślanie nad tym, czy pozycje w restauracyjnym menu zostały napisane fontem Cantoria, czy Meyer Two, może stać się bardziej interesujące niż wybór dania. W nauce typografii jest coś, co przyciąga ludzi… i zmienia ich na zawsze! Zostałeś ostrzeżony!

134

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Aby wyzwolić potencjał drzemiący w foncie73, wpierw musimy go zrozumieć. Muszę przyznać, że nie będzie to łatwe zadanie. Najdrobniejsze detale kształtu liter i przestrzeni wokół nich zostały określone dzięki całym wiekom badań i doświadczeń praktycznych. W czasach gdy technologie drukarskie dopiero raczkowały, każdą literę wycinano w drewnianym klocku lub wytapiano z ołowiu i pokrywano tuszem, zanim maszyna drukarska naniosła ją na powierzchnię papieru. Była to bardzo ciężka praca, wymagająca poświęcenia i prawie nadludzkiej uwagi do szczegółów. Choć metoda ta została dawno temu wyparta przez nowocześniejsze techniki drukarskie, wiele college’ów i uniwersytetów w Stanach Zjednoczonych wciąż ma w swojej ofercie kursy tradycyjnej praktyki drukarskiej — po to, żeby przyszli projektanci grafiki mogli docenić zalety pracy z drukiem na komputerze i poznali możliwości typografii. Moje zamiłowanie do typografii da się wyjaśnić dwojako. Jako projektant po prostu lubię artystyczne możliwości, jakie ona oferuje. Uwielbiam formy przekazu oferowane przez różne rodzaje fontów oraz wyrazistość typograficznych kolaży w rodzaju tych, które możesz podziwiać na rysunku 4.1. Jakby nie patrzeć, na samo słowo „typografia” składa się grecki przedrostek typos — oznaczający wrażenie lub znak — i przyrostek grapheia — oznaczający pismo. Wyraz ten oznacza więc dosłownie „pismo wrażeń”. Z drugiej strony, jako programista potrafię docenić złożone problemy, na jakie się natykam, pracując z krojem pisma. Wybór fontu i koloru to, wbrew pozorom, jedynie czubek góry lodowej. W rzeczywistości w większości decyzji, które przyjdzie Ci podjąć, korzystając z krojów, będziesz musiał wziąć pod uwagę również przestrzeń wokół form liter i bloków tekstu, a nie tylko sam krój pisma. Dobór właściwego kroju jest jednak krokiem kluczowym.

Rysunek 4.1. Kolaż typograficzny

73

Font jest często błędnie nazywany czcionką. Czcionka jest fizycznym nośnikiem znaku. Font nie jest także komputerowym odpowiednikiem zestawu czcionek — jest to znacznie szersze pojęcie. Font poza definicją zestawu znaków zawiera informacje o zastępowaniu nieistniejących symboli w swoim zestawie znakami alternatywnymi, informacje o odległościach między parami znaków (kerning), odmiany takie, jak wersja pogrubiona czy pisana kursywą oraz informacje o skalowaniu. W przypadku fontów — w przeciwieństwie do czcionek — możliwe jest powiększanie znaków z dowolną dokładnością — przyp. red.

Typografia

Historia i implementacja krojów pisma to temat, który mógłby zapełnić karty setek książek — co też jest faktem. W tym rozdziale zapewnię jedynie krótkie wprowadzenie do świata typografii. W pierwszej kolejności zajmę się problemami i odpowiedziami na kwestię wdrażania kroju w projektach sieciowych. Następnie wspólnie przeanalizujemy podstawową terminologię, zapoznamy się z zasadami wykorzystywania oraz zbadamy cechy różnych typów fontów. Mam nadzieję, że dzięki moim deliberacjom na temat czytelności i zastosowania dynamicznych nagłówków w internecie rozdział ten zainspiruje Cię do dalszych poszukiwań. Jeśli spodobało Ci się to, co tu do tej pory zobaczyłeś, i chciałbyś przebadać tę króliczą norę, skorzystaj z listy polecanych przez mnie źródeł: „ Artykuł The Elements of Typographic Style Applied to the Web na witrynie http://webtypography.net/ „ Witryna Typophile — http://typophile.com/ „ Witryna I Love Typography — http://ilovetypography.com/ „ Witryna Typographica — http://typographica.org/ „ Witryna The Font Feed — http://fontfeed.com/

Font a sieć Jeżeli mowa o sieci i wyborze fontu tekstu, który ma być wyświetlany w przeglądarce, nie ma znaczenia, czy sam masz na swoim komputerze zainstalowane 5, czy 5000 różnych fontów — zawsze musisz brać pod uwagę najmniejszy wspólny mianownik. Liczba fontów wspieranych domyślnie przez wszystkie najpopularniejsze systemy operacyjne jest niewielka. Rysunek 4.2 prezentuje listę fontów należących do tzw. fontów bezpiecznych.

Rysunek 4.2. Dziewięć „bezpiecznych fontów” zainstalowanych domyślnie w systemach Windows i Mac OS X

135

136

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Wadą „bezpiecznej” listy jest mała różnorodność każdej z wymienionych kategorii fontów. Jeśli potrzebujesz zwyczajnego fontu bezszeryfowego74, zmuszony jesteś wybierać między takimi, jak: Arial, Trebuchet MS i Verdana. Dla kogoś, kto nie ma doświadczenia z innymi krojami, taki wachlarz może się wydać wystarczający, ale dla tych z nas, którzy opanowali niuanse stosowania takich fontów, jak Helvetica Neue, Futura i Univers, wykorzystanie „bezpiecznej” listy będzie niczym użycie młotka do wkręcenia śrubki. Na szczęście właściwość CSS font-family pozwala nam zastosować wiele fontów naraz — są one nakładane na stronę w kolejności ich zadeklarowania. Taką formę deklaracji nazywamy stosem fontów. Jeżeli pierwszy z zadeklarowanych fontów nie jest dostępny, kolejny wymieniony zostanie użyty w jego miejsce; jeśli brak tego drugiego, na jego miejsce wejdzie trzeci itd. Powiedzmy, że chcesz, aby nagłówki sekcji na stronie miały krój szeryfowy. Sądzisz, że font Calisto MT sprawdziłby się wyśmienicie — przynajmniej na tych komputerach, na których został zainstalowany. Twoim drugim wyborem, i jednocześnie planem awaryjnym A, jest font Georgia. Jeśli użytkownik nie posiada fontu Calisto MT, zastosowana zostanie Georgia. Choć font Georgia znajduje się na bezpiecznej liście, mogą się znaleźć osoby, które go nie mają. Font Times New Roman jest jego bliskim odpowiednikiem, wobec czego decydujesz się go dodać. Pamiętając o użytkownikach, którzy nie posiadają żadnego z tych fontów, umieszczasz w deklaracji również to, co konsorcjum W3C nazywa ogólną rodziną fontów (ang. generic font family) lub po prostu kolekcją fontów. Określają ją wartości: serif, sans-serif, cursive (podobne do odręcznego pisma), fantasy (zwana też „novelty”) i monospace. Wszystkie wybrane fonty były szeryfowe, więc mając to na uwadze, deklarujesz wartość serif. W rezultacie Twój stos fontów miałby następującą postać: font-family: ’Calisto MT’, Georgia, ’Times New Roman’, serif;

Fonty ze spacjami Pamiętaj, aby nazwę każdej rodziny fontów zawierającą spację umieścić w cudzysłowie pojedynczym (’) lub angielskim cudzysłowie podwójnym (”). Kluczowa dla właściwego sformułowania stosu fontów jest wiedza o tym, które fonty są do siebie podobne i — co ważniejsze — jakie są instalowane domyślnie wraz z systemem operacyjnym. Artykuł Nathana Forda z 2008 roku Building Better Font Stack75 ułatwi Ci odpowiedź na pierwsze z tych pytań; z kolei świetnym źródłem wiedzy o dominujących obecnie typach fontów w różnych systemach operacyjnych jest aplikacja dostępna na witrynie Code Style — Font Stack Builder76.

74

Jeżeli nie jesteś pewien, co ten termin znaczy, przeskocz do podrozdziału zatytułowanego „Kroje pisma — różnice”, żeby zapoznać się z różnymi typami fontów.

75

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

76

http://www.codestyle.org/servlets/FontStack

Typografia

Zastępowanie fontu obrazem Wszystkie te rodzaje specyfikacji fontów da się jakoś wykorzystać, ale co, jeśli chcesz, żeby gość na Twojej stronie ujrzał bardziej nietypowy krój? W takim przypadku oczywistym rozwiązaniem jest zastosowanie grafik do wyświetlenia tekstu. Tego podejścia użył Adam Akers w projekcie swojej witryny Attack from Planet B77, którą możesz podziwiać na rysunku 4.3. Tekst w nagłówku, główne elementy nawigacji i odnośniki kategorii, które widzisz w prawej kolumnie — wszystkie one są grafikami. Metoda ta pozwoliła Adamowi użyć upragnionego kroju oraz obracać go, przekrzywiać, załamywać i dodawać do niego dowolną teksturę. Przeraża mnie w tym wszystkim jednak treść zdefiniowana fontem Comic Sans. Nic nie poradzę na to, że gdy czytam fragment o Piranii, słyszę w głowie głosiki z popularnej kreskówki Alvin i wiewiórki. Tak naprawdę przyprawia mnie to o gęsią skórkę. Ale czy nie o coś takiego chodziło?

Rysunek 4.3. Mnóstwo tandetnawej typografii na witrynie Attack from Planet B — w roli głównej grafiki

Jedną ważną kwestią, którą muszę tu poruszyć, jest to, że zastosowanie grafik w roli tekstu nie oznacza wcale swobodnego wrzucania znacznika img z Twoją frazą ot tak do HTML-a. Używanie obrazków do wyświetlania tekstu nie jest bardzo wygodnym rozwiązaniem i może wpłynąć negatywnie na pozycjonowanie strony — ani osoby niewidome, ani roboty indeksujące nie będą miały dostępu do treści.

77

http://www.attackfromplanetb.com/

137

138

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Zamiast tego lepiej jest oznaczyć tekst — niespodzianka — tekstem. Weźmy na przykład boczną kolumnę witryny Attack from Planet B. Gdybym zechciał dodać do niej nową kategorię — powiedzmy „Klauni-mordercy” — ponad odnośnikiem „Horror”, umieściłbym ją w pojedynczym linku — elemencie HTML. Następnie skorzystałbym z właściwości CSS, żeby dopasować komponent do szerokości i wysokości posiadanej grafiki, po czym wprowadziłbym deklarację display: block (znaczniki linków mają ustawioną domyślną wartość display: inline). Kolejnym krokiem byłaby implementacja grafiki na stronie za pomocą tzw. metody Pharka. Polega ona na ustawieniu obrazka jako tła znacznika, a następnie nadaniu właściwości text-indent ujemnej wartości — na tyle małej, żeby przesunąć treść poza komponent (i ekran). Cała deklaracja będzie miała następującą postać: .clowns { display: block; width: 300px; height: 150px; background: url(/images/clowns.png); text-indent: -9999px; }

Metoda Pharka a kropkowany obrys Po kliknięciu lub przełączeniu się na odnośnik dokumentu HTML dochodzi do aktywacji pseudoklasy :focus. Dzięki niej do niedawna przeglądarka Firefox dodawała domyślnie kropkowane obramowanie wokół linku, korzystając z właściwości outline — w rezultacie użytkownicy witryny mogli zobaczyć, w którym miejscu na niej się znajdują. Obramowanie to obejmowało również przesunięty, niewidoczny tekst, wobec czego rozciągało się ono aż do krawędzi strony. Problem ten nie jest już aktualny, ale i tak wypada wspomnieć o dwóch sposobach rozwiązania go — przydatnych, jeśli dbamy o wsteczną kompatybilność. Możesz albo wprowadzić deklarację overflow:hidden dla selektora linku, albo usunąć obramowanie całkowicie, odpowiednio ustawiając właściwość outline — outline:0. Jeśli zdecydujesz się na ten krok, pamiętaj, aby zdefiniować pseudoklasę focus dla użytkowników używających do przeglądania strony klawiatury. Wyświetlanie tekstu w formie grafik może sprawdzać się dobrze w pracy ze statycznym tekstem, który nie jest zmieniany często, lecz co począć, gdy pragniesz użyć jednego fontu do sekcji, której zawartość podlega okresowym zmianom, takiej jak nagłówki artykułu? Ciągłe tworzenie i zapisywanie na serwerze grafik tekstowych byłoby bardzo niewdzięcznym zadaniem nawet dla projektanta doświadczonego w korzystaniu z oprogramowania graficznego. Jeżeli Twoim zadaniem jest stworzyć blog dla klienta, który nie ma bladego pojęcia o używaniu Photoshopa i HTML-a, możesz zapomnieć o tym rozwiązaniu. Co w takim razie możesz zrobić?

Typografia

Deklaracja @font-face Jason Cranford Teague, autor książki Fluid Web Typography78 , w trakcie jednej ze swoich prezentacji zapytał publiczność: „Co wspólnego ze sobą maję te trzy rzeczy: latające auta, wyprawy na Jowisza i automatyczne ściąganie plików fontów z witryny?”. Odpowiedź jest prosta: każda z tych rzeczy miała być osiągalna w roku 2010. Teague odniósł się tutaj do możliwości wyświetlania tekstu przy użyciu fontu niezainstalowanego na komputerze użytkownika. Mechanizm, który to umożliwiał, był dostępny w CSS już od 1998 roku. Nazywa się on @font-family i ma następującą postać: @font-face { font-family: ”League Gothic”; src: url(/type/league_gothic.otf) format(”opentype”); } h1 { font-family: ”League Gothic”, Arial, sans-serif; }

Jeśli masz już doświadczenie z CSS, składnia selektora @font-face będzie dla Ciebie zrozumiała. Definiujemy po prostu adres URL, z którego można pobrać fonty z rodziny League Gothic. Po jej uprzednim zadeklarowaniu możesz ją bezpiecznie umieścić w stosie, tak jak każdy inny font. Dlaczego więc nie używaliśmy tej techniki od samego początku? Dwie główne przeszkody to opór wydawców fontów i brak spójnego wsparcia dla wszystkich typów plików. Opór wydawców jest zrozumiały. Zarabiają oni pieniądze, wydając licencje na stworzone przez siebie fonty — nie mają więc interesu w tym, żeby pozwolić ludziom ściągać je, kopiować i korzystać z nich za darmo. Kwestia formatu plików jest trochę trudniejsza do zrozumienia. Niektóre przeglądarki wspierają rozszerzenia TTF i OTF, urządzenia z zainstalowanym systemem iOS (czyli np. iPhone i iPad) wymagają plików SVG, Internet Explorer korzysta jedynie z zastrzeżonego formatu Microsoftu EOT i — żeby dolać oliwy do ognia — wprowadzono niedawno opensourcowe rozszerzenie WOFF, wspierane jedynie przez najnowsze przeglądarki. W ciągu ostatnich kilku lat poradzono sobie z większością problemów technicznych związanych z osadzaniem fontów. Zaowocowało to istnym zalewem rynku darmowymi fontami do użytku komercyjnego, co zmusiło wydawców do ponownego przemyślenia swoich strategii licencyjnych. Niestety, na podróże kosmiczne i latające samochody przyjdzie nam jeszcze trochę poczekać.

Samodzielne hostowanie fontów Z uwagi na różnice w formatowaniu plików nie możesz ot tak, po prostu wrzucić pliku TTF do folderu witryny i użyć uproszczonej wersji deklaracji CSS podanej wyżej. Co gorsza, robiąc tak, najprawdopodobniej złamałbyś postanowienia umowy EULA (ang. End User Licensing Agreement) z wydawcą fontu. Nawet jeśli posiadasz opracowany przez siebie font, musisz najpierw zdobyć licencję na osadzenie go w sieci, stworzyć jego kopię w kilku różnych formatach i wpisać najnowszy kod potrzebny do jego zagnieżdżenia. Na szczęście z odsieczą przychodzi widoczna 78

Berkeley, New Riders 2009.

139

140

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

na rysunku 4.4 witryna Font Squirrel79. Możesz na niej znaleźć setki darmowych fontów oraz ich zestawów ułatwiających osadzanie krojów, jak również generator pozwalający na konwersję pliku jednego typu w inny. Jeśli nie będziesz w stanie znaleźć tam tego, czego szukasz, odwiedź bliźniaczą witrynę Fontspring80. Tutaj z kolei zakupisz fonty od wydawców, którzy pozwalają na korzystanie z ich osadzania za pomocą deklaracji @font-face. Wielu z nich oferuje również licencje na nieograniczoną liczbę domen za niewielką opłatą.

Rysunek 4.4. Szeroki wybór fontów dostępny na witrynie Font Squirrel

Hosting fontów Jeśli wolałbyś nie tracić czasu na użeranie się z różnymi typami plików oraz kodem do ich osadzenia, istnieje w sieci kilku usługodawców, którzy mogą hostować fonty i zadbać o ich poprawne zagnieżdżenie dla Ciebie. Każda z tych usług pozwala Ci wybrać dowolny font, skopiować kilka linijek kodu i wkleić je na Twoją witrynę. Voilà! Twój tekst zostanie wyświetlony w określonym foncie. Typekit — http://typekit.com/ Jest to jedna z pierwszych cieszących się niesłabnącą popularnością usług, stworzona przez liderów branży, takich jak Jeffrey Veen czy Jason Santa Maria. Z uwagi na to, że Typekit stanowi olbrzymią bibliotekę fontów i ma wsparcie kilku wydawców, mówi się, że jest to typograficzny iTunes. Serwis ten oferuje darmową bibliotekę próbną do wykorzystania na pojedynczej witrynie. Cena pełnej subskrypcji uzależniona jest od liczby odwiedzin strony w ciągu miesiąca. 79

http://www.fontsquirrel.com/

80

http://www.fontspring.com/

Typografia

Fontdeck — http://fontdeck.com/ Podobnie jak Typekit, Fontdeck to serwis stworzony przez liderów branży, opierający swoją działalność na subskrypcjach użytkowników. Różnica w usłudze stworzonej przez Clearleft i OmniTI polega na tym, iż użytkownicy płacą jedynie za fonty, z których korzystają, a nie za ich całą kolekcję. WebINK — http://www.extensis.com/en/WebINK/ Firma Extensis jest twórcą jednej z najbardziej popularnych aplikacji do zarządzania fontami. WebINK był ich pierwszym produktem, jaki pojawił się na rynku fontów webowych. Cieszy się on wsparciem ze strony wielu wydawców. Ich subskrypcja bazuje na opłatach miesięcznych, a nie rocznych. Google Font Directory — http://code.google.com/webfonts Za pomocą witryny Typekit Google opublikował niedawno własne rozwiązanie hostingu fontów. Obecnie ich wybór w tym serwisie jest bardziej ograniczony w porównaniu z witrynami Fontdeck czy Typekit, ale ponieważ znajdują się w nim jedynie fonty oparte na licencji Creative Commons, korzystanie z tej usługi jest całkowicie darmowe. Oczywiście istnieje o wiele więcej serwisów tego typu i z dnia na dzień ich liczba rośnie. Wielu wydawców przyłączyło się do tego trendu, oferując hostowane wersje swych własnych fontów. Z uwagi na to, że selektor @font-face uzyskał wsparcie dopiero niedawno, trudno jest teraz powiedzieć, które z powstałych serwisów w przyszłości będą wieść prym, a które polegną na polu chwały. Niezależnie od wyniku boju jest pewne, że fonty sieciowe z nami zostaną. Świetnym miejscem, w którym możesz znaleźć najświeższe informacje o deklaracji @font-face i fontach webowych, jest witryna webfonts.info81.

sIFR i Cufón Nim powszechne wykorzystanie selektora @font-face stało się faktem, web designerzy stosowali cały wachlarz czarodziejskich sztuczek, żeby tylko wyświetlić pożądany font. Dwoma najlepszymi i najczęściej stosowanymi rozwiązaniami były techniki sIFR i Cufón. Obie te metody wyjdą wkrótce z powszechnego użycia za sprawą hostowalnych fontów, ale obecnie wciąż korzysta się z nich często i choćby z tego powodu warto o nich wspomnieć. sIFR (wymowa: „sajfer”) to akronim od angielskiego wyrażenia Scalable Inman Flash Replacement („Skalowalny Zamiennik Flash Inmana”). Głównym założeniem tej techniki jest fakt, iż klipy Flasha mogą osadzać fonty i wyświetlać je w pełnej antyaliasingowej krasie. Większość użytkowników sieci posiada zainstalowany Adobe Flash na swoich komputerach, dzięki czemu możliwa jest podmiana bloku tekstu (np. zawartości znacznika h1) poprzez wstawienie w to miejsce pustego filmu za pomocą JavaScriptu. W efekcie wyświetlony zostanie tekst Flash. Poważną wadą tej diabelnie zmyślnej metody jest to, że wymaga zastosowania zarówno JavaScriptu, jak i Flasha. Cufón został obmyślony jako alternatywa dla sIFR. Na początku przekształcamy fonty w plik SVG, a następnie używamy silnika renderingu JavaScript do wyrysowania liter na komponencie canvas. Brzmi to skomplikowanie, ale w rzeczywistości technika ta jest dużo prostsza w implementacji niż sIFR, a fakt, że nie opiera się ona w najmniejszym stopniu na Flashu, jest dużą zaletą.

81

http://webfonts.info/

141

142

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Niezależnie od rodzaju technologii, której użyjemy, by wyświetlić nasz krój, sprawą najważniejszą jest, aby wiedzieć, że jego wybór wykracza poza kwestię ładnego wyglądu. Żeby zrozumieć, o czym mówię, musisz wpierw poznać wszystkie pojedyncze glify — czy też symbole — które tworzą font.

Anatomia liter Dużo zajęć, na które uczęszczałem w college’u, było poświęconych anatomii i terminologii kroju pisma. Wiele osób wie, jaka jest różnica między szeryfami, wydłużeniami górnymi i dolnymi itd., ale teoria typografii na tym się nie kończy — pamiętam, jak sam kiedyś na jedne ćwiczenia musiałem się nauczyć ponad 100 terminów. Choć ja nie będę tutaj tak wredny, zapoznanie się z podstawową terminologią jest konieczne, zanim będziemy mogli przejść do trudniejszych zagadnień z dziedziny typografii. Jasne, że moglibyśmy rozmawiać o kroju, używając nieformalnych sformułowań, takich jak „daszki”, „pochylenia” bądź „rzeczy”, aby opisać formy liter, ale raczej na pewno wszystko by Ci się szybko pomieszało. Na rysunku 4.5 znajdziesz przykłady każdego komponentu tworzącego krój pisma. Przeanalizujemy je wspólnie poniżej.

Rysunek 4.5. Terminologia kroju

1. Linia bazowa (ang. baseline) Linia bazowa to niewidoczna prosta, na której spoczywa większość liter. Jedyną obecną na rysunku literą, która schodzi poniżej linii bazowej, jest małe „q”. 2. Wysokość wersalika (ang. cap height) Wysokość wersalika, zwana też wysokością majuskuły, jest kolejną niewidoczną linią. Wyznacza ona wysokość wszystkich dużych liter kroju. Zauważ, że wysokość wersalika jest mniejsza od maksymalnej wysokości kroju. 3. Belka poprzeczna (ang. cross bar) Kreskę łączącą dwie linie w dużych formach liter, takich jak „A” lub „H”, nazywamy belką. Z kolei linia pozioma, która przekreśla pojedynczą linię pionową, to kreska poprzeczna (ang. cross stroke). 4. Szeryf (ang. serif) Szeryfem nazywamy dekoracyjne wykończenia dolnych i górnych części liter w niektórych odmianach kroju. Opowiem o tym bardziej szczegółowo, gdy przejdziemy do omawiania rodzajów krojów.

Typografia

5. Linia środkowa (ang. mean line, midline) Linia środkowa jest kolejną nierzeczywistą poziomą prostą, oznaczającą granicę górnej krawędzi małych liter. Wbrew nazwie linia środkowa nie musi się zawsze znajdować dokładnie w połowie odległości między linią bazową a linią wysokości wersalika. 6. Brzuszek (ang. bowl) Brzuszek litery to zaokrąglona krzywa tworząca jej część. Przykłady brzuszków znajdziesz w literach „D”, „o” i „g”. 7. Wydłużenie dolne (ang. descender) Dolną część małej litery (takiej jak „g”, „j”, „p”, „q” lub „y”), która schodzi poniżej linii bazowej kroju, nazywamy wydłużeniem dolnym. Niektóre cyfry w starszych krojach również je posiadają. Uważano, że cyfry te, których przykłady możesz podziwiać w foncie Georgia na rysunku 4.6, dobrze prezentują się wewnątrz ciała tekstu, szczególnie w sąsiedztwie liczb rzymskich.

Rysunek 4.6. Cyfry napisane w starym stylu fontem Georgia (po lewej) w porównaniu ze zwykłymi cyframi napisanymi fontem Helvetica (po prawej)

8. Oko (ang. counter) Oko to pusta przestrzeń zamknięta wewnątrz znaku. Niektóre litery, takie jak „A”, „O” i „P”, mają w pełni zamknięte oko. Litery na wpół zamknięte, na przykład „G”, „u” bądź „c”, również mają oko. 9. Trzon (ang. stem) Trzon to jedna z głównych pionowych lub ukośnych kresek tworzących formę litery. Do trzonu tekstu zaliczamy więc zarówno pionowe elementy liter „I” oraz „H”, jak i wszystkie linie tworzące znak „W”. 10. Znak diakrytyczny (ang. tittle) To chyba mój ulubiony termin spośród wszystkich tu podanych. Znak diakrytyczny odnosi się do kropki nad małym „ż” oraz kreski nad „ź”. 11. Zwieńczenie (ang. terminal) Końcówka trzonu lub kreski pozbawiona szeryfu to zwieńczenie. Nawet końcówki niektórych szeryfowych fontów posiadają własne zwieńczenia, co widać na przykładzie litery „c” z rysunku 4.5. 12. Wydłużenie górne (ang. ascender) Niektóre małe litery posiadają wydłużenie górne, które jest rozszerzeniem wychodzącym ponad linię środkową. Do tych liter zaliczamy: „b”, „d”, „f”, „h”, „k”, „l” oraz „t”. 13. Noga (ang. leg) Dolne zakrzywione kreski wychodzące z liter takich, jak „K”, „R” czy „Q” nazywamy nogami. Czasami nazywa się je również ogonami (ang. tail).

143

144

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

14. Ligatura (ang. ligature) Pewnie zauważyłeś, że litery „f” oraz „i” w słowie „fix” połączono tak, iż tworzą jeden znak. Takie łączenie znaków nazywamy ligaturą. Ligaturę stosuje się w fontach szeryfowych po to, aby wprowadzić równowagę w przestrzeni między literami, co ilustruje rysunek 4.7.

Rysunek 4.7. Przykład ligatury „ae” napisany fontem Insignia

15. Wysokość średnia (ang. x-height) Najprościej mówiąc, wysokość średnia to przestrzeń w pionie zajmowana przez małą literę „x” w danym kroju pisma. Według dokładniejszej definicji jest to dystans między liniami bazową a średnią, który określa główną część wszystkich małych liter, bez ich wydłużeń górnych i dolnych. Wartość wysokości średniej pozwala łatwo zidentyfikować typ kroju — im jest ona większa, tym czytelniejszy jest font. Chociaż jest to zwykle mało praktyczne, możesz wykorzystać wartość średnią jako względną jednostkę miary w CSS (ex).

Odstępy w tekście Teraz, gdy już wiesz, jak opisać formę litery, kolejnym krokiem jest opanowanie metod określania i regulacji odstępów między znakami. Wspomniałem wcześniej, że wiele decyzji w typografii podejmowanych jest w oparciu o przestrzeń. Dotyczy to zarówno czcionki drukarskiej, jak i tej ze świata sieci, szczególnie po nastaniu ery CSS. Niezależnie od tego, czy rozmawiamy o projekcie poligraficznym, czy sieciowym, możemy kontrolować przestrzeń wokół liter w dwóch wymiarach — w pionie i w poziomie.

Odstępy w poziomie Dwa terminy, które pojawiają się często w kontekście problemu zachowania właściwych odstępów między literami, to kerning i tracking. Pojęcie kerningu dotyczy regulowania odległości pomiędzy pojedynczymi, konkretnymi parami liter. Często pracując z fontami, zauważysz litery, które znajdują się zbyt blisko lub zbyt daleko od siebie. Większość fontów została zdefiniowana w oparciu o zestawy zasad określających przestrzenie między konkretnymi znakami. Dla przykładu kerning między literami „Wa” powinien być — i jest — mniejszy niż kerning między „WV”. W większości przypadków zasady wpisane w font wystarczają do zapewnienia czytelności tekstu. Jeśli tak nie jest, zawsze możesz przystosować przestrzeń między parami liter w dowolnym programie graficznym. Rysunek 4.8 prezentuje przykłady tekstu pozbawionego kerningu, zmodyfikowanego automatycznie i „ręcznie”.

Typografia

Rysunek 4.8. Inspirujące przykłady kerningu

Oczywiście własnoręczne definiowanie kerningu, litera po literze, na potrzeby strony internetowej mija się z celem. Możesz jednak zmodyfikować właściwość letter-spacing w CSS, którą w świecie druku znamy pod nazwą tracking. Podobnie jak kerning, tracking opisuje odległość między znakami w tekście — różnica polega jednak na tym, że tracking określa jednakowe parametry dla każdej litery. Jeśli pragniesz, by Twój tekst sprawiał wrażenie bardziej otwartego i rozłożystego, spróbuj dodać mu trochę przestrzeni, tak jak zrobiłem to ja z tekstem na rysunku 4.9.

%PNZžMOZ
PETUŢQ
NJŢE[Z
MJUFSBNJ
5SBDLJOH

-PSFN
JQTVN
EPMPS
TJU
BNFU
DPOTFDUFUVS
BEJQJTDJOH
FMJU
"MJRVBN
DPOTFRVBU BMJRVBN
BDDVNTBO
.BFDFOBT
QVMWJOBS
EPMPS
TJU
BNFU
OVMMB
MPCPSUJT
QPSUUJUPS 1SBFTFOU
UVSQJT
GFMJT
IFOESFSJU
B
PSOBSF
BVDUPS
UJODJEVOU
OPO
PSDJ
/VMMB
B
FSPT UPSUPS
BU
TDFMFSJTRVF
OJTM
6U
TVTDJQJU
GSJOHJMMB
BEJQJTDJOH
"FOFBO
FSBU
FMJU
QVMWJOBS OFD
EJHOJTTJN
BD
WFOFOBUJT
RVJT
BVHVF
/BN
GFSNFOUVN
UFNQPS
JBDVMJT
0ETUŢQ
X[HMŢEOZ
XZOPT[ŕDZ
 
FN
5SBDLJOH

-PSFN
JQTVN
EPMPS
TJU
BNFU
DPOTFDUFUVS
BEJQJTDJOH
FMJU
"MJRVBN DPOTFRVBU
BMJRVBN
BDDVNTBO
.BFDFOBT
QVMWJOBS
EPMPS
TJU
BNFU
OVMMB MPCPSUJT
QPSUUJUPS
1SBFTFOU
UVSQJT
GFMJT
IFOESFSJU
B
PSOBSF
BVDUPS UJODJEVOU
OPO
PSDJ
/VMMB
B
FSPT
UPSUPS
BU
TDFMFSJTRVF
OJTM
6U
TVTDJQJU GSJOHJMMB
BEJQJTDJOH
"FOFBO
FSBU
FMJU
QVMWJOBS
OFD
EJHOJTTJN
BD WFOFOBUJT
RVJT
BVHVF
/BN
GFSNFOUVN
UFNQPS
JBDVMJT
Rysunek 4.9. Przykład regulowania odległości między literami

CSS obsługuje też inną właściwość odpowiedzialną za regulowanie przestrzeni — word-spacing. Przyjmuje ona dodatnie lub ujemne wartości długości oraz słowo-klucz normal. Jak się być może domyśliłeś, wpływa ona na odstępy między wyrazami.

145

146

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Odstępy w pionie W języku projektowania poligraficznego pionowa przestrzeń między wierszami tekstu nosi nazwę leadingu. Ten anglojęzyczny termin wywodzi się jeszcze z wczesnej ery druku, kiedy to do odseparowywania wierszy w prasie drukarskiej stosowano ołowiane paski (ang. lead). Tekst, w którym odstępy między wierszami są odpowiednio rozmieszczone, dużo łatwiej się czyta. Przeanalizujmy przykład — domyślny odstęp między wierszami tekstu na rysunku 4.10 jest zbyt mały. Najlepiej, jeśli wysokość linii jest taka, jak półtorej wysokości tekstu — tak więc dla liter o wielkości 12 pikseli wysokość wiersza wynosząca 18 pikseli jest w sam raz. W drugim widocznym na tym rysunku akapicie zastosowaliśmy następującą deklarację CSS: textheight:1.5em. W kontekście CSS em jest jednostką miary równą wielkością dużej literze „M” — stąd też pochodzi jej nazwa.

%PNZžMOZ
PETUŢQ
NJŢE[Z
XJFST[BNJ
-FBEJOH

-PSFN
JQTVN
EPMPS
TJU
BNFU
DPOTFDUFUVS
BEJQJTDJOH
FMJU
"MJRVBN
DPOTFRVBU BMJRVBN
BDDVNTBO
.BFDFOBT
QVMWJOBS
EPMPS
TJU
BNFU
OVMMB
MPCPSUJT
QPSUUJUPS 1SBFTFOU
UVSQJT
GFMJT
IFOESFSJU
B
PSOBSF
BVDUPS
UJODJEVOU
OPO
PSDJ
/VMMB
B
FSPT UPSUPS
BU
TDFMFSJTRVF
OJTM
6U
TVTDJQJU
GSJOHJMMB
BEJQJTDJOH
"FOFBO
FSBU
FMJU
QVMWJOBS OFD
EJHOJTTJN
BD
WFOFOBUJT
RVJT
BVHVF
/BN
GFSNFOUVN
UFNQPS
JBDVMJT
0ETUŢQ
X[HMŢEOZ
NJŢE[Z
XJFST[BNJ
XZOPT[ŕDZ
 
FN
-FBEJOH

-PSFN
JQTVN
EPMPS
TJU
BNFU
DPOTFDUFUVS
BEJQJTDJOH
FMJU
"MJRVBN
DPOTFRVBU BMJRVBN
BDDVNTBO
.BFDFOBT
QVMWJOBS
EPMPS
TJU
BNFU
OVMMB
MPCPSUJT
QPSUUJUPS 1SBFTFOU
UVSQJT
GFMJT
IFOESFSJU
B
PSOBSF
BVDUPS
UJODJEVOU
OPO
PSDJ
/VMMB
B
FSPT UPSUPS
BU
TDFMFSJTRVF
OJTM
6U
TVTDJQJU
GSJOHJMMB
BEJQJTDJOH
"FOFBO
FSBU
FMJU
QVMWJOBS OFD
EJHOJTTJN
BD
WFOFOBUJT
RVJT
BVHVF
/BN
GFSNFOUVN
UFNQPS
JBDVMJT Rysunek 4.10. Przykład leadingu

Wyrównanie tekstu Czy zauważyłeś, że tekst w książkach i czasopismach wyrównany jest względem zarówno lewej, jak i prawej kolumny? Ten rodzaj wyrównania nazywamy justowaniem. Gdy mówimy, iż tekst jest wyjustowany, mamy na myśli to, że odległość między pojedynczymi literami i całymi słowami jest tak dopasowana, iż każdy wiersz tekstu posiada słowa lub litery, które wyrównują się jego do lewej i prawej krawędzi. Wielu projektantów używa justowania do każdej dostatecznie szerokiej treści wykraczającej poza dwie linijki. Możesz obrać to samo podejście w sieci, ustawiając właściwość CSS text-align na justify. Zanim jednak zaczniesz justować cały internet, pozwól, że udzielę Ci ostrzeżenia.

Typografia

Płynie rzeka, płynie Czasem zdarza się, że luka powstała między słowami w wyniku justowania wyrównuje się z lukami w następnym wierszu i następnym, i kolejnym… przez co wewnątrz treści powstaje wielki kanion bądź rzeka — wypisz wymaluj taka, jak na rysunku 4.11. Może to odwracać uwagę czytelnika. W poligrafii łatwo taki błąd skorygować, lecz w sieci jest on trudny do przewidzenia i niemożliwy do naprawienia.

-PSFN
JQTVN
EPMPS
TJU
BNFU
DPOTFDUFUVS
BEJQJTDJOH
FMJU
TFE
EJBN
OPOVNNZ
OJCI
FVJNPEB
UJOEBOU
MBPSFFU
EPMPSF
NBHBOB
BMJFVBN
WPMVUQBU
6U
XJTJ
FOJN
BE
NJOJN
WFOJBN
RVJT
OPT
FYFSDJ
UBUJPO
VMMBNDPSQFS
TVTQJDJU
MBCPSUJTUB
BMJRVJQ
FY
FB
DPNNPEP
DPOTFRVBU
%VJTBVU
WFM
FVN
JSJVSF
EPMPS
JO
IFOESFSJU
WVMQVUBUF
WFMJU
FTTF

8ZKVTUPXBOZ
UFLTU J
XƾTLJF
LPMVNOZ T[D[FHØMOJF XƾTLJF
LPMVNOZ [
E’VHJNJ
T’PXBNJ UBLǻF
[F
TPCƾ OJF
XTQؒHSBKƾ

Rysunek 4.11. Problemy z justowaniem — czy widzisz trzy inne rzeki w tym tekście?

O? Czym? Ty? Mówisz? Problem rzeki jest szczególnie wyraźny w wąskich kolumnach. Dodatkowo często zdarza się, że długie słowa zostają w nich wyizolowane lub, co gorsza, rozciągnięte, dopasowując się do szerokości kolumny. Większość edytorów tekstu jest w stanie naprawić ten problem, wstawiając łącznik tam, gdzie jest to konieczne. Przeglądarki internetowe nie mają jednak tej funkcji, tak więc lepiej, żebyś nie justował wąskich kolumn tekstu. Jeśli nie chcesz nadawać właściwości text-align wartości justify, możesz zamiast niej zadeklarować słowa-klucze left, right lub center. Jeśli tekst jest wyśrodkowany bądź wyrównany do lewej lub prawej krawędzi strony, wielkość odstępów pomiędzy wierszami pozostaje stała. Problem rzeki może się pojawić i tutaj, ale raczej nie wpłynie bardzo na czytelność tekstu wycentrowanego bądź wyjustowanego do jednej strony. Jeżeli chcesz się przekonać, jak może prezentować się w oknie przeglądarki tekst HTML z różnymi ustawieniami leadingu, trackingu lub wyrównania, aplikacje Typetester82 Marko Dugonjica oraz Typechart83 Panduki Senaki — których zrzuty zaprezentowano na rysunku 4.12 — świetnie się do tego nadadzą. Oba te narzędzia pozwolą Ci wypróbować różne typograficzne układy tekstu HTML i stworzą plik CSS, którego będziesz mógł potem użyć na swojej witrynie.

82

http://www.typetester.org/

83

http://www.typechart.com/

147

148

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 4.12. Typetester (po lewej) i Typechart (po prawej) pozwolą Ci szybko przetestować wyrównanie Twojego tekstu

Kroje pisma — różnice Nie wszyscy wiedzą, czym jest font — to zbiór liter, które charakteryzuje pewien styl i które zostały zapisane w formie pliku komputerowego. Fonty są domyślnie instalowane w Twoim komputerze i masz możliwość ich zmiany, jeśli pragniesz, by Twój tekst wyglądał inaczej. W systemie operacyjnym Windows występuje domyślnie około 40 rodzajów fontów, podczas gdy użytkownicy komputerów Mac mają dostęp do około 100 fontów. Wiele z nich pogrupowano w rodziny fontów — pojedynczy font w danej rodzinie występuje w kilku odmianach kroju pisma. Większość takich rodzin składa się z fontu podstawowego oraz odmian pogrubionych bądź pisanych kursywą. Niektóre fonty nie występują w żadnych innych odmianach, inne posiadają wyłącznie swoje pogrubione lub oparte na kursywie odpowiedniki, a znajdą się i takie, szczególnie wśród fontów komercyjnych, które mają setki swoich wersji. Tak jak w niektórych rodzinach zdarza się, że wszyscy członkowie mają duże uszy czy wyjątkowo długie palce u stóp, każda rodzina fontów posiada pewne unikalne, wyróżniające ją cechy. Różnorodność wariacji na temat fontów litery „g” prezentuje rysunek 4.13. Cechy te pomagają w klasyfikacji fontów i ich rodzin. Większość z nich można skategoryzować jako fonty szeryfowe lub bezszeryfowe. Spośród czternastu typów fontów na rysunku 4.13 siedem jest szeryfowych, a pozostałe siedem bezszeryfowych. Czy potrafisz je odróżnić? Oprócz tej klasyfikacji istnieje wiele innych sposobów na podzielenie i pogrupowanie fontów. Sam wyróżniam sześć ich prostych typów: fonty szeryfowe, bezszeryfowe, ręcznie pisane, stałe, dekoratywne i dingbaty. Przyjrzyjmy się każdej z tych kategorii bliżej.

Rysunek 4.13. Czternaście wariantów litery „G”

Typografia

Kroje szeryfowe Według historyków szeryf wywodzi się z rzymskiej epigrafiki (napisów w kamieniu). Do tej pory cel jego stosowania w tamtych czasach nie jest do końca jasny, ale w kontekście mniej odległej przeszłości szeryf sprawdził się w poprawianiu czytelności dużych bloków pisma, zapewniając poziomą linię odniesienia. Pierwszym fontem, który przychodzi do głowy przy wyborze wariantów szeryfowych, jest Times New Roman. Jednakże trzeba pamiętać, że istnieje też wiele innych fontów tego typu poza nim. Zanim będziemy mogli dokonać jego trafnego wyboru, dobrze byłoby wpierw określić, jakie wrażenie powinien sprawiać nasz tekst. Rzuć okiem na napis Garamond na rysunku 4.14. Garamond jest fontem szeryfowym starego stylu. Fonty tego typu złożone są z włoskich glifów — charakteryzuje je płynne przejście między grubymi a cienkimi pociągnięciami pióra oraz zaokrąglone szeryfowe krawędzie. Fonty w starym stylu mają w sobie tę nutkę historycznego uroku. Co ciekawsze, fonty tego rodzaju są bardzo wszechstronne — nie są wcale przestarzałe i można ich z powodzeniem używać w nowoczesnym kontekście. Drugim widocznym na rysunku 4.14 fontem jest Baskerville. Krzywa, która łączy zwieńczenie kreski z szeryfem, nosi miano podpórki. Podpórka fontów przejściowych, Rysunek 4.14. Kategorie szeryfów do których zalicza się Baskerville, jest okrągła, lecz krawędzie samych szeryfów są kanciaste. Dodanie tych 90-stopniowych kątów i linii prostych nadaje tej kategorii fontów bardziej nowoczesny charakter. Właśnie stąd, że ta klasa fontów znajduje się pomiędzy tradycyjnymi a nowoczesnymi, wzięła się ich nazwa — fonty przejściowe. Trzeci z przykładowych fontów jest podstawą krojów nowoczesnych. Nowoczesne fonty szeryfowe stworzone są na zasadzie kontrastu pomiędzy ich grubymi i cienkimi glifami. Często pozbawione są one podpórki. Nowoczesny krój szeryfowy wprowadzono w czasie rewolucji przemysłowej jako radykalną alternatywę dla fontów przejściowych. Obecnie kojarzy się go z elegancją, wyrafinowaniem i modą. Odzwierciedla on wrażenie ponadczasowości, wykraczające poza samą nowoczesność. Z uwagi na ich złożoną konstrukcję nowoczesne fonty stosuje się praktycznie wyłącznie w nagłówkach. Konsekwentne użycie włoskiego fontu Didot w czasopiśmie „Vogue”84, jak zresztą widać na rysunku 4.15, wspiera skojarzenie zarówno fontu, jak i samego magazynu ze stylem. Wśród innych słynnych amerykańskich czasopism korzystających z dobrodziejstw fontów nowoczesnych w swoich tytułach znajdziesz „W”, „Elle”, „Parents”, „Seventeen” oraz „Harper’s Bazaar”. Co prawda fonty te rzadko stosuje się w web designie, ale z pewnością stanowiłyby one dobry wybór, jeśli elegancja i klasa są tym, co pragniesz przekazać.

84

http://www.vogue.com/

149

150

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 4.15. Nowoczesne szeryfy czynią witrynę „Vogue” synonimem stylu

W drugiej połowie XIX wieku wraz z rozwojem różnych form reklamy (takich, jak ulotka czy plakat) pojawiło się zapotrzebowanie na bardziej śmiałą wersję nowoczesnego szeryfu, która byłaby w stanie przykuć wzrok publiki. W tym właśnie okresie wprowadzono szeryf egipski (zwany też slab-serif). Fonty w rodzaju prezentowanego wyżej Rockwella roztaczają fachową, acz przyjemną aurę, pozbawioną snobizmu szeryfów nowoczesnych, która sprawia jednocześnie, że wydają się one jeszcze bardziej współczesne. Z uwagi na to, że większość egipskich fontów szeryfowych jest bardzo wyraźna, nadają się one doskonale do nagłówków i właśnie dlatego cieszą się dużą popularnością w sieci. Rysunek 4.16 ukazuje kilka pięknych przykładów praktycznego zastosowania fontów slab-serif. Widoczna po lewej stronie witryna The Mid-century Modernist85 wykorzystuje w swoim logo font Rockwell Light. Z kolei w logo witryny The Sew Weekly86 użyty został krój Brosse. Moim zdaniem szeryf egipski ma w sobie sporą dawkę męskiej energii. The Sew Weekly w sposób oczywisty zaprzecza tej idei, co dowodzi, że przy wyborze fontu można działać wbrew ustalonym konwencjom.

85

http://midcenturymodernist.com/

86

http://www.sewweekly.com/

Typografia

Rysunek 4.16. Slab-serif na witrynach Mid-century Modernist i Sew Weekly

Kroje bezszeryfowe W czasach gdy pionierzy typografii eksperymentowali z szeryfem egipskim, pomysł, żeby całkowicie usunąć szeryf, wydawał się niedorzeczny. Szeryfy były częścią tradycji — ich wyeliminowanie przyrównywano by do kastracji. Pierwsze czcionki bezszeryfowe były tak mocno krytykowane, że przylgnęło do nich określenie „grotesque”. Jednak z biegiem czasu idea tego typu krojów zyskała na popularności — do tego stopnia, że w latach 20. XX wieku przypuszczano, iż szeryf zostanie na dobre wyeliminowany z typografii. Choć fonty szeryfowe nadal stosuje się powszechnie, popularność i wszechstronność krojów bezszeryfowych wciąż wzrasta. Wydają się one bardziej współczesne i schludne. Wyróżniają się w nagłówkach, szczególnie gdy łączy się je z tekstem napisanym fontem szeryfowym. Zabieg taki stał się zresztą standardem w poligrafii — sam nauczyłem się tej sztuczki umożliwiającej tworzenie kontrastu na stronie jeszcze w college’u. W sieci role tych dwóch kategorii fontów przez długi okres były odwrócone. Wynikało to głównie z ograniczeń monitorów, wspierających niskie rozdzielczości, oraz słabej jakości renderingu w starszych systemach operacyjnych. Ze względu na złożoną budowę fonty szeryfowe stają się praktycznie nieczytelne w niższych rozdzielczościach ekranów. Wraz z pojawieniem się nowych modeli monitorów i odejściem do lamusa całej generacji komputerów możesz swobodnie używać obu typów fontów tak, jak tylko chcesz. Rysunek 4.17 prezentuje blog The Donut Project87, który wpisuje się w tradycję stosowania bezszeryfowych nagłówków w połączeniu z szeryfową treścią.

87

http://thedonutproject.com/

151

152

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 4.17. Witryna The Donut Project

Niezależnie od formy, w jakiej ich użyjesz, pamiętaj, że z uwagi na czytelność fonty bezszeryfowe to dobry wybór do praktycznie każdego zadania. Najpopularniejszymi fontami w sieci są Arial i Verdana. Obie te rodziny występują w praktycznie wszystkich systemach operacyjnych dostępnych na rynku i dlatego też zaprzęga się je do budowy witryn. Wśród projektantów fonty te mają opinię konwencjonalnych i nieinnowacyjnych (przy czym Arial jest postrzegany dodatkowo jako uboższy od swojej kuzynki Helvetiki). W rezultacie nadają się one znakomicie do oznaczenia treści dokumentu, gdzie celem jest przede wszystkim czytelność, ale nie sprawdzają się wszędzie tam, gdzie wymagane jest podejście artystyczne i silny przekaz. Zarówno mocno podkreślone fonty szeryfowe, jak i dystyngowane „bezszeryfy” spełnią swoje zadanie, lecz pamiętaj, że istnieją jeszcze możliwości poza tymi dwoma kategoriami.

Typografia

Kroje odręczne Przed wynalezieniem prasy drukarskiej tekst uwieczniano wyłącznie za pomocą pędzla, pióra bądź dłuta. Wadą takiego podejścia była niemożliwość osiągnięcia identyczności form liter oraz występowanie nierównomiernych odstępów między znakami. Z tego właśnie powodu tekst pisany ręcznie był często trudny do odczytania. Z drugiej strony, pismo odręczne posiada „osobowość”, co dodaje treści wrażenia ciepła i charakteru. Spójrz na rysunek 4.18. Każdy z wersów odzwierciedla „osobowość” fontu, w którym został napisany. Fonty odręczne nadają treści indywidualność, nie tracąc przy tym na jakości. W odróżnieniu od ludzkiego pisma Rysunek 4.18. Fonty odręczne identyczność liter zostanie zachowana, nadają tekstowi ludzki charakter tak samo jak i równomierna odległość między nimi — pod warunkiem że font został dobrze zaprojektowany. Przeglądając próbki odręcznych fontów, mógłbyś dojść do wniosku, że praktycznie każdy mógłby zaprojektować własny krój — i jest to zgodne z prawdą! W odróżnieniu od szeryfowych i bezszeryfowych fontów, które stawiają na czytelność i precyzję, w foncie odręcznym na pierwszy plan wysuwa się osobowość. Jeśli pragniesz stworzyć własny font tego typu, wiedz, że w sieci jest istne zatrzęsienie narzędzi, które Ci w tym pomogą. Jedną z najprostszych witryn zapewniających ten rodzaj usług jest YourFonts.com88. Wystarczy wydrukować szablon z pliku PDF, nanieść na papier znaki w oznaczone miejsca, zeskanować kartkę i przesłać plik na serwer, by — za drobną opłatą — otrzymać plik fontu w formacie OpenType. Zdarza się, że gdy chcesz nadać swojej witrynie przyjazny, ludzki charakter, nawet fonty odręczne sprawiają wrażenie zbyt perfekcyjnych. Rzuć okiem na witrynę Twitter Chirp Conference89, widoczną na rysunku 4.19. Jeśli przyjrzysz się bliżej układowi liter, zauważysz, że w centrum strony nie ma dwóch identycznych znaków. Powód jest prosty — zamiast użyć fontu, litery napisano ręcznie. Większość osób z pewnością nie zauważyłaby subtelnych różnic pomiędzy tymi samymi znakami, lecz to właśnie detale tego rodzaju sprawiają, że cała kompozycja tej witryny konferencyjnej prezentuje się przyjaźnie i ciekawie.

88

http://yourfonts.com/

89

http://chirp.twitter.com/

153

154

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 4.19. Pismo odręczne na witrynie Twitter Chirp Conference

Krój stały Prawdopodobnie zdałeś sobie już sprawę z faktu, iż w przypadku większości fontów każda litera zajmuje różną ilość miejsca. Na przykład duża litera „W” zajmuje większy obszar, podczas gdy litera „l” bardzo mały. Rzuć teraz okiem na rysunek 4.20 i powiedz, które zdanie złożone jest z większej liczby znaków.

Rysunek 4.20. Font z proporcjonalnym rozstawem

To było podchwytliwe pytanie — w rzeczywistości w obu zdaniach jest taka sama liczba znaków. Dlaczego więc pierwsze zdanie wydaje się dłuższe od drugiego? Odpowiedź jest prosta — otóż większość fontów posiada tzw. proporcjonalny rozstaw. Każda pojedyncza litera jest zdefiniowana nie tylko pod względem szerokości, ale również pod względem ilości białej przestrzeni wokół niej. Spójrz teraz na dwa takie same zdania, tym razem napisane fontem Courier, na rysunku 4.21.

Typografia

Rysunek 4.21. Font o stałej szerokości znaków

Powodem, dla którego oba zdania mają teraz taką samą szerokość, jest to, że font Courier korzysta z tzw. kroju stałego (zwanego też krojem monospace lub krojem maszynowym), co oznacza, że posiada stałą szerokość znaków. Odstępy w tym typie kroju są równomierne, a formy liter zaprojektowano tak, aby miały zbliżoną szerokość. Zostały one stworzone w odpowiedzi na techniczne ograniczenia maszyn do pisania. Z racji tego, że maszyna do pisania przesuwa stronę za każdym razem o taką samą odległość w linii poziomej, niezależnie od tego, czy napisaną literą była „w”, czy „i”, na potrzeby tych urządzeń wymyślono specjalne fonty. Jak widać, są one czytelne pomimo zachowania identycznego rozstawu między literami. Pierwsze komputery również korzystały z dobrodziejstw fontów stałych, ale po pewnym czasie na ich potrzeby zaadaptowano inne, bardziej wyraźne i proporcjonalne fonty. Dlaczego więc w dalszym ciągu używa się fontów maszynowych? Głównie ze względu na zdrowie psychiczne programistów i księgowych. Gdy piszesz kod programu lub wyświetlasz dane liczbowe, ważne jest, aby wszystkie znaki były wyrównane z wiersza na wiersz, z kolumny na kolumnę. Sam zapewne masz doświadczenie w pracy z fontami o stałej szerokości znaków, zaczerpnięte z pracy z HTML-em i CSS. Zalety kroju stałego widać szczególnie wyraźnie na rysunku 4.22. Widoczna na nim aplikacja CSS3, please!90 jest generatorem kodu CSS3, pozwalającym na swobodne eksperymenty z jego składnią.

Rysunek 4.22. Fonty stałe w akcji na witrynie CSS3, please!

90

http://css3please.com/

155

156

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

W kontekście sieci najbardziej standardową metodą wyświetlania tekstu w foncie stałym jest zawarcie go w znaczniku pre. „Pre” to skrót od angielskiego wyrażenia preformatted text („tekst preformatowany”). Komponent ten wyświetli całą treść za pomocą liter o stałej szerokości, zachowując przy tym odstępy, tabulatory i przejścia do następnej linii tekstu. Zwykle pozwala to na łatwe wyróżnienie kodu lub danych tabelarycznych, ograniczając całą procedurę implementacji do skopiowania i wklejenia danych na stronę. Piszę, że jest to „zwykle łatwe”, ponieważ znaczniki HTML będą odczytywane normalnie i pomijane w wyświetlaniu na ekranie. Tak więc jeśli chcesz, żeby znaczniki w kodzie były widoczne, będziesz musiał zastąpić wszystkie znaki < i > ich kodowym zapisem (odpowiednio < i >) Tak jak każdy inny element HTML, znacznik pre można opisać w CSS. Przeważnie web deweloperzy, którzy chcą opublikować porcję kodu na stronie, pragną, by w jakiś sposób się on wyróżniał. Stosując CSS, łatwo można stworzyć wokół zawartości znacznika pre ramkę, nadać jej tło, dodatkowe marginesy lub zmienić sposób wyświetlania tekstu. Kolejnym ciekawym, acz już mocno nieaktualnym sposobem wykorzystania fontów stałych jest tworzenie tzw. ASCII art. ASCII (akronim od wyrażenia American Standard Code for Information Interchange) był jednym z pierwszych sposobów kodowania znaków w języku angielskim i przez parę ładnych lat ten zbiór 95 symboli był jedyną formą grafiki na ekranach komputerów. Zanim internet został wprowadzony na szerszą skalę, poza środowiskiem wojskowym i akademickim, w Stanach Zjednoczonych istniały sieci tzw. BBS-ów91. Wiele z nich wyświetlało grafikę za pomocą znaków ASCII. Sam dorastałem w tej erze i dlatego z tęsknotą wspominam artyzm, jaki ludzie potrafili wykrzesać z kroju maszynowego. I choć możesz teraz z łatwością kreować złożone grafiki ASCII, używając aplikacji w rodzaju ASCII-O-Matic92 lub Text Ascii Art Generator93 Patricka Gillespiego, to sztuka tego typu, skomponowana literka po literce, osiągnęła granice artyzmu dostępne dla tego medium w latach 80. i 90. XX wieku. Dziś często się o niej jednak zapomina. Ekran powitalny Energy BBS na rysunku 4.23 stanowi przykład zaginionego ogniwa w ewolucji grafiki komputerowej.

Rysunek 4.23. Grafika ASCII dla Energy BBS autorstwa Carstena Cumbrowskiego 91

BBS (ang. Bulletin Board System) to rodzaj usługi komputerowej, która udostępnia wolną przestrzeń dyskową komputerom w sieci. Można ją wykorzystać do zamieszczania ogłoszeń, obsługi poczty elektronicznej, transferu plików itp. — przyp. tłum.

92

http://www.typorganism.com/asciiomatic/

93

http://patorjk.com/software/taag/

Typografia

Kroje dekoratywne Kroje dekoratywne, zwane też krojami novelty, fantasy czy display, to największa grupa fontów dostępna w sieci za darmo. Niektóre z fontów z tej kategorii powstały wskutek modyfikacji popularnych krojów szeryfowych lub bezszeryfowych, inne są świeżymi pomysłami, pokrewnymi bardziej formom sztuki konceptualnej niż typografii. Ze swej natury fonty te są mniej czytelne od swoich tradycyjnych odpowiedników, ale przy ostrożnym wykorzystaniu nadadzą smak i styl każdemu projektowi. Kilka przykładów fontów dekoratywnych możesz podziwiać na rysunku 4.24. Dobrym miejscem na zastosowanie fontów tego typu jest logo. Rzuć okiem na osobiste portfolio sieciowe Tony’ego Yoo zatytułowane Hype-nation94 na rysunku 4.25. Ten śmiały, bardzo regularny projekt w stylu retro znakomicie pasuje do kroju blokowego użytego w logo. Przypomina on trochę duże litery kroju La Moda, ale z pewnością font ten został dopasowany ręcznie, by nadać całości charakter.

Rysunek 4.24. Przykłady fontów dekoratywnych

Rysunek 4.25. Witryna Hype-nation — śmiała kompozycja w stylu retro

94

http://hype-nation.com/

157

158

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Choć znam się trochę na fontach, z całą pewnością nie jestem automatem do ich rozpoznawania. Zwykle gdy uda mi się znaleźć wyjątkowy tekst, którego kroju nie jestem w stanie zidentyfikować, pierwsza rzecz, jaka przychodzi mi do głowy, to: WTF! Oczywiście mam tu na myśli system identyfikacji fontów dostępny na witrynie MyFonts — WhatTheFont95. Wszystko, co musisz zrobić, to zapisać blok tekstu w pliku graficznym i przesłać go na serwer — a WhatTheFont znajdzie najbardziej podobne fonty za Ciebie. Rysunek 4.26 pokazuje niektóre fonty przypominające tekst z logo Hype-nation. WTF to naprawdę wyjątkowe narzędzie. Nawet jeśli zawiedzie, witryna udostępnia forum dla entuzjastów typografii, którzy z pewnością pomogą Ci rozwiązać zagadkę kroju-widma.

Rysunek 4.26. Usługa WhatTheFont dostępna na witrynie MyFonts

Tak jak przy podejmowaniu jakiejkolwiek innej decyzji, na pierwszym miejscu powinieneś postawić wymagania klienta i przyszłych użytkowników jego witryny. Większość Twoich pracodawców będzie dysponować własnym logo i tożsamością, wobec czego będziesz musiał unikać dziwacznych, niekonwencjonalnych fontów, żeby nie narazić ich reputacji na szwank. Mimo to zawsze warto podejść do planowania kompozycji układu strony z otwartym umysłem. W końcu może się zdarzyć, że firma, dla której pracujesz, zechce odejść od własnego popularnego wizerunku.

95

http://new.myfonts.com/WhatTheFont/

Typografia

Dingbaty Jeśli w pierwszej kolejności zależy Ci na zawarciu w projekcie swojej witryny ilustracji lub grafiki, rozważ zastosowanie tzw. dingbatów (zwanych też fontami symbolicznymi). We wczesnym okresie po wynalezieniu prasy drukarskiej dingbaty były zdobniczymi znakami, których używano do dzielenia druku i wypełniania białej przestrzeni. Do tej grupy zaliczano jedynie zdobione, powszechnie wykorzystywane symbole. Jednakże pojęcie dingbatu zmieniło znaczenie wraz z nastaniem rewolucji cyfrowej. Obecnie każda seria grafik, które można ułożyć w znaki, nosi miano dingbatu. Co prawda fonty te nie znajdują zastosowania w składzie tekstu na witrynie, ale świetnie uzupełniają grafiki i ikony. Z uwagi na fakt, iż fonty są w rzeczywistości skalowalnymi figurami wektorowymi, dingbaty można przekształcić w figury geometryczne w programach takich, jak Adobe Photoshop czy Illustrator. Dzięki temu można je zmniejszać, dzielić i dowolnie nimi manipulować bez ryzyka utraty jakości. Jedynym problemem, jaki sprawia ten rodzaj fontów, jest odnalezienie znaku, którego w danej chwili potrzebujesz. Na szczęście, mimo że nie sposób zachować w pamięci wszystkich symboli tego typu, większość dingbatów posiada charakterystyczne motywy, co ułatwia ich klasyfikację i czyni ich kategorie łatwiejszymi do zapamiętania. Gdy mowa o dingbatach, pierwszymi nazwami, jakie przychodzą do głowy projektantom, są Wingdings i Webdings — fonty symboliczne domyślnie zainstalowane w Windowsie. Oczywiście w sieci znajdziesz zatrzęsienie innych form dingbatów. Rysunek 4.27 pokazuje niektóre z nich.

Rysunek 4.27. Przykłady dingbatów

159

160

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

W poszukiwaniu fontów Choć już kilkakrotnie napomknąłem, że prawdziwe bogactwo fontów możesz znaleźć w sieci, nie powiedziałem Ci jeszcze, gdzie ich szukać. Gdy tylko rozpoczniesz poszukiwania fontów na własną rękę, szybko zauważysz, że źródła krojów można podzielić na trzy kategorie: darmowe galerie fontów, galerie komercyjne i witryny indywidualnych twórców oraz wydawców. Wszystkie z nich nadadzą się wyśmienicie do Twojego podręcznego pojemnika z narzędziami.

Darmowe galerie fontów Wielu projektantów hostuje własnoręcznie wykonane fonty na tych witrynach. Niektórzy z nich mają własne strony, na których oferują możliwość zakupu innych wykonanych przez siebie fontów. Jeśli spodoba Ci się krój danego twórcy, warto poszukać innych jego dzieł. Pamiętaj, że na stronach tych znajdziesz również wiele naprawdę ohydnych fontów, a także o tym, że wiele witryn jest darmowych tylko w teorii — często trzeba przedrzeć się przez las reklam, zanim będziesz mógł ściągnąć upragniony plik. Poza tym jeśli planujesz zagnieździć font na stronie, upewnij się, że jego licencja na to pozwala. Mając to wszystko na uwadze, możesz skorzystać z kilku świetnych źródeł darmowych fontów, takich jak: „ Witryna Font Squirrel — http://www.fontsquirrel.com/ „ Witryna The League of Movable Type — http://www.theleagueofmovabletype.com/ „ Witryna DaFont — http://www.dafont.com/

Komercyjne galerie fontów Podobnie jak trzy galerie wymienione powyżej, witryny te zawierają bogaty wybór fontów należących do różnych autorów indywidualnych i wydawnictw. Różnica polega na tym, że tutaj za fonty się płaci. W większości przypadków jednak inwestycja Ci się opłaci. Wykupiona licencja na font z tych witryn pozwoli Ci korzystać z pojedynczego zestawu znaków, jak również z ich pogrubionych, pochyłych lub innych odmian. „ FontShop — http://www.fontshop.com/ „ Monotype — http://www.fonts.com/ „ Veer — http://www.veer.com/products/fonts/ „ MyFonts — http://www.myfonts.com/ „ Adobe Fonts — http://www.adobe.com/type/

Artyści indywidualni i wydawnictwa Wiele z moich ulubionych współczesnych fontów zakupiłem na witrynach należących do artystów indywidualnych i firm prywatnych. Większość z nich oferuje kilka typów fontów darmowych oraz fonty płatne. „ Witryna Josa Buivengi exljbris Font Foundry — http://www.exljbris.com/. Serwis twórcy tak popularnych krojów, jak Museo, Anivers i Diavlo.

Typografia

„ Letterhead Fonts — http://letterheadfonts.com/. To małe wydawnictwo oferuje wybór ponad dwustu unikalnych fontów wysokiej jakości. „ Witryna Blue Vinyl Fonts Jessa Lathama — http://bvfonts.com/. Jak wielu innych projektantów, Jess z początku traktował tworzenie fontów jako hobby. Jego darmowe i płatne kroje odznaczają się osobliwym stylem i są bardzo profesjonalnie wykonane. „ Witryna Fountain Type Petera Bruhna — http://fountaintype.com/. Znajdziesz tu fonty stworzone przez prawdopodobnie dwudziestu najlepszych projektantów na świecie. Możesz też skorzystać z atrakcyjnych darmowych krojów na niej dostępnych. „ Witryna Typodermic Fonts Raya Larabie — http://typodermicfonts.com/. W świecie typografii Ray ma status gwiazdy. Jego prace odznaczają się dużą wielkością kroju oraz wysoką jakością. „ Witryna Misprinted Type Eduarda Recife — http://www.misprintedtype.com/. Jeśli chodzi o fonty podniszczone i eklektyczne, Eduardo jest mistrzem w ich projektowaniu. Jego dzieła są wyjątkowe, choć trochę zakręcone. „ Witryna Pizzadude Jakoba Fischera — http://www.pizzadude.dk/. Styl Jakoba jest w oczywisty sposób śmieszny i wyluzowany. Od 1998 roku opublikował on ponad 500 fontów odręcznych.

Wybieranie właściwego fontu Nawet jeśli opanowałeś już techniczne aspekty tworzenia form liter, poznałeś kategorie krojów i masz dostęp do wszystkich fontów świata, w dalszym ciągu wybór tych właściwych może sprawić Ci znaczną trudność. Jest to podyktowane tym, że dobór fontów zależy w równej mierze od licentia poetica twórcy, emocjonalnych skojarzeń i ograniczeń technologicznych. Od czego zatem zacząć? Pierwszym krokiem na drodze do odnalezienia kroju doskonałego jest określenie, jakie uczucia powinien on wywoływać u odbiorców witryny. Czy pragniesz ukazać to, że firma, którą reprezentuje witryna, jest młodzieżowa, czy wolałbyś odzwierciedlić aurę niezachwianej mądrości? Czy strona, którą projektujesz, powstanie w oparciu o konkretny motyw, taki jak hawajski laur czy meksykańska fiesta, czy starasz się stworzyć bardziej formalną tożsamość? Zadawszy sobie te pytania i przemyślawszy emocjonalny ładunek dostępnych fontów, powinieneś być w stanie zdecydować, który z nich spełnia Twoje wymagania. Jeżeli nie jesteś w stanie znaleźć odpowiedzi na te, stwórz własne pytania. Spójrz na zrzut ekranu witryny Mellow Mushroom96 na rysunku 4.28. Jakie pytania zadali sobie projektanci tej witryny, wybierając krój? W oczywisty sposób zależało im na wrażeniu odręcznego wykonania. Tylko czemu? Według mnie pragnęli stworzyć przystępną tożsamość, z którą mogłoby się identyfikować jak najwięcej osób.

96

http://www.mellowmushroom.com/

161

162

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 4.28. Witryna Mellow Mushroom Pizza — przystępność w cenie

Sam pomyśl — w swoim życiu widziałeś już miliardy liter i miliony słów. Czy jesteś tego świadom, czy nie, stworzyłeś więzi emocjonalne ze stylami, na których możesz opierać swoje wybory. Pomyśl o logosach, okładkach albumów, podręczników i oznakowaniu, jakie widziałeś. Jak te elementy typografii wpłynęły na Twój sposób postrzegania przedmiotów, które reprezentowały? Teraz weźmy ten pomysł i podejdźmy do niego z drugiej strony, wykorzystując do naszych celów nieistniejący podmiot — dajmy na to restaurację Joego (Joe’s Restaurant) . Rodzaj fontu, który wybierzesz, wpłynie na sposób, w jaki potencjalni klienci będą postrzegać tożsamość lokalu. Rzuć okiem na rysunek 4.29 i wybierz kilka krojów, które wywołują u Ciebie skojarzenia z włoskim bistro. Teraz wybierz fonty, które sugerują wielkomiejską restaurację serwującą pięciogwiazdkowe potrawy. A które z nich będą pasować do obskurnego baru w dokach? Nie ma oczywistych rozwiązań pasujących do każdego z poszczególnych scenariuszy, ale na pewno będziesz w stanie zidentyfikować te fonty, które absolutnie nie będą pasować do każdego z przypadków z osobna. Najpierw postaraj się zmniejszyć liczbę dostępnych opcji do kilku, potem przemyśl swoją decyzję ponownie, aż znajdziesz najlepsze rozwiązanie.

Typografia

Rysunek 4.29. Dwadzieścia różnych fontów dla dwudziestu wariantów Joe’s Restaurant

Tak naprawdę nie ma złych fontów, są tylko nieodpowiednie. Nawet jeśli dany krój nie sprawdza się w jednym kontekście, w innym może okazać się strzałem w dziesiątkę. Cała sztuka polega na byciu otwartym. Gdy już ograniczysz wybór do kilku opcji, poradź się przyjaciela lub współpracownika, zadając pytanie : „Która z nich sprawia wrażenie bardziej [przymiotnik]?”, wstawiając w nawias odczucie, na przekazaniu którego Ci zależy. Ważne jest, żeby umieć ograniczyć się do wyboru tylko kilku opcji. Z zasady powinieneś wypróbować co najmniej dwa, lecz nie więcej niż cztery kroje w swojej kompozycji. Unikaj kombinacji złożonej z dwóch fontów szeryfowych bądź dwóch fontów bezszeryfowych. Tak jak miało to miejsce z kolorami nieharmonijnymi — o których była mowa w rozdziale 2. — ułożenie koło siebie dwóch różnych krojów należących do tej samej rodziny może wyglądać dziwacznie.

Wielkość fontu i wysokość linii Wielkość tekstu od zawsze była trudną kwestią. Od czasu wynalezienia prasy drukarskiej musiało minąć 300 lat, nim francuski drukarz dominikanin Sébastien Truchet wprowadził tzw. punkt graficzny. Choć punkty stały się w ten sposób standardowymi jednostkami miary w typografii, ich rozmiary kilkakrotnie ulegały zmianie z biegiem lat. Było to spowodowane głównie różnicami między angielskim i francuskim systemem metrycznym. Dopiero wraz z nastaniem ery typografii cyfrowej zdefiniowano punkt jako 1/72 cala. Problem ujednolicenia wielkości tekstu w sieci również miał ciekawą przeszłość. O ile wielkość kroju w poligrafii mierzy się za pomocą punktów, rozmiar fontu w sieci zależy od ustawień rozdzielczości ekranu użytkownika. Cztery najpopularniejsze jednostki używane do zmiany wielkości tekstu w tym środowisku to: piksel, punkt, procent oraz em. Bez zagłębiania się w zbędne szczegóły, najprościej mówiąc: 16 px = 12 pt = 100% = 1 em. W CSS piksel (px) jest najmniejszą — i najlepszą — względną jednostką miary tekstu. Rozdzielczość ekranów jest ustawiana w pikselach, podobnie jak wymiary każdej grafiki komputerowej, wobec czego wyrażenie wielkości tekstu w pikselach wydaje się dobrym rozwiązaniem. Dlaczego więc nie korzystamy z pikseli w każdym przypadku?

163

164

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Pewnie dlatego, że niektóre przeglądarki nie pozwalają na skalowanie tekstu zdefiniowanego w pikselach. Stwarza to potencjalny problem z przystępnością dla użytkowników mających trudności z czytaniem drobnego tekstu. Twierdzę, że jest to problem jedynie potencjalny, ponieważ większość nowoczesnych przeglądarek, zamiast powiększać tekst, pozwala użytkownikom na przybliżenie całej strony. Jeśli pragniesz, aby Twój tekst na stronie był skalowalny, zdefiniuj go za pomocą wartości em. Z uwagi na to, że sam mierzę wszystko w pikselach, moje podejście do ustalania wielkości fontów i wysokości linii na witrynie wpisuje się w logikę opisaną w zamieszczonym na witrynie A List Apart artykule Wilsona Minera z 2007 roku Setting Type on the Web to a Baseline Grid97. Artykuł ten dotyczy stosowania siatki opartej na linii bazowej kroju, którą nakłada się na równoległe, równo rozmieszczone horyzontalne linie. Przypomina to siatkę pionową pod tym względem, że wyrównanie tekstu do powstałych prostych nadaje treści strony rytm. Taką równowagę osiąga się, według Wilsona, poprzez — kolejno: usunięcie ze wszystkich komponentów strony domyślnych marginesów (margin) i wypełnienia (padding), zdefiniowanie właściwości font-size i lineheight dla znacznika body, wreszcie przypisanie wszystkim elementom strony właściwości line-height oraz właściwości margin-bottom równej lub będącej wielokrotnością zdefiniowanej w znaczniku body wielkości line-height. Wiem, że brzmi to skomplikowanie, ale w rzeczywistości cała procedura jest całkiem prosta.

Interpunkcja i znaki specjalne Używając nowoczesnego edytora tekstu, zauważysz, że po naciśnięciu klawisza cudzysłowu na ekranie pojawia się jego zaokrąglona wersja. Jak ukazuje rysunek 4.30, próżno szukać takiego rodzaju cudzysłowu na klawiaturze. Mimo to edytory „rozumieją”, że chcesz, by te symbole prezentowały się ładnie, toteż automatycznie zastępują wpisane znaki tymi pożądanymi. To samo dotyczy apostrofów. Czy kiedykolwiek widziałeś cudzysłów ASCII, taki jak na klawiaturze, w edytorze tekstu? Oczywiście, że nie. To, co widzimy w druku, nie jest apostrofem, a cudzysłowem pojedynczym. Tak naprawdę na klawiaturze nie znajdziesz olbrzymiej części znaków, które widzimy powszechnie w materiałach drukowanych czy na stronach internetowych.

Rysunek 4.30. Klawisz cudzysłowu na standardowej klawiaturze

To wszystko działa świetnie, gdy korzysta się z edytora tekstu. My jednak, wpisując treść w formacie HTML, nie możemy polegać na żadnym systemie, który automatycznie zamieniłby znaki na ich językowe, poprawne odpowiedniki. Zależnie od tego, jakiego formatu kodowania używasz na stronie, po wklejeniu tekstu z edytora bezpośrednio w dokument HTML ujrzysz na niej całą gamę krzaczastych symboli. Dodatkowo zawarcie w treści znaków wykorzystywanych 97

http://www.alistapart.com/articles/settingtypeontheweb

Typografia

przez HTML, takich jak < i >, wprowadzi chaos na Twojej witrynie, gdyż zostaną one zinterpretowane jako początek lub zakończenie nieistniejącego znacznika. Z tych właśnie powodów stworzono specjalny system kodów. Używamy ich w dokumentach HTML do wprowadzenia poprawnej interpunkcji oraz napisania dowolnego znaku, jaki mógłby się nam przydać w danej chwili. Przykłady zawarte w tabeli 4.1 to jedynie próbka. Pojedynczy zestaw znaków po lewej stronie tabeli nazywamy encją lub słowem-kluczem. Na przykład aby umieścić na stronie symbol praw autorskich (ang. copyright), wpisz encję © w pliku HTML — w rezultacie na załadowanej stronie zobaczysz znak ©. Każda z tych encji posiada swój liczbowy odpowiednik — dla symbolu © jest nim wartość ©, więc po jej wpisaniu uzyskasz taki sam rezultat. Kompletną listę encji wraz z ich liczbowymi odpowiednikami znajdziesz na stronie W3Schools98.

Tabela 4.1. Skrócona lista encji znaków w HTML-u Encja

Znak




Więcej niż

&

&

Ampersand

‚

‚

Cudzysłów pojedynczy lewy

’

’

Cudzysłów pojedynczy prawy

‘

‘

Brytyjski cudzysłów pojedynczy lewy

„

„

Cudzysłów podwójny lewy

”

”

Cudzysłów podwójny prawy

“

“

Brytyjski cudzysłów podwójny lewy

«

«

Cudzysłów francuski lewy

»

»

Cudzysłów francuski prawy

®

®

Zarejestrowany znak towarowy

™

™

Znak towarowy

©

©

Prawa autorskie

¢

¢

Cent

£

£

Funt

¥

¥

Jen

¼

¼

Jedna czwarta

½

½

Jedna druga

¾

¾

Trzy czwarte

98

http://www.w3schools.com/tags/ref_entities.asp

Opis

165

166

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Praktyczne wykorzystanie: dobrym drukiem Ostatnim razem, gdy sprawdzaliśmy, jak posuwają się prace nad Southern Savers, wszystkie elementy mające stworzyć witrynę zostały zebrane. Emily Smith stworzyła podwaliny strony dzięki testom użytkowników, rozplanowaniu architektury informacji oraz szkieletom układu. Następnie Andrew Ramos, korzystając z dobrodziejstw ścianek klimatów, określił, jakie kolory i tekstury mające tworzyć nową, ulepszoną markę Southern Savers spodobałyby się Jenny. Dokładnie w tym momencie do akcji wkroczył Matthew Smith — dyrektor kreatywny i szef Squared Eye. W trakcie pracy z Andrew nad rebrandingiem polecił mu się skupić w pierwszym rzędzie na typografii. „Projektując tożsamość”— powiedział Matthew — „staram się zachować rzeczywistą osobowość przedsiębiorstwa, ale zinterpretować ją na potrzeby sieci”. Ważną częścią tej interpretacji jest odnalezienie właściwego kroju, który można by zestawić z wyjątkowym, ręcznie pisanym logo. Rozważywszy wszystkie możliwe opcje, Matthew zdecydował się wprowadzić egipski krój szeryfowy Fago Office Serif w nagłówkach. Wziąwszy pod uwagę fakt, że napis w logo jest kombinacją szeryfu egipskiego z fontem skryptowym, to rozwiązanie wpisywało się w założenia marki, jednocześnie wprowadzając dostateczny kontrast, by wyróżniać się na stronie. W przypadku elementu body Matthew postanowił zastosować prosty, skromny krój, który raczej będzie „schodzić z drogi” fontowi Fago, a nie z nim konkurować. Helvetica była tutaj najlepszym wyjściem, tak więc Matthew zdefiniował domyślny stos fontów krótko: Helvetica, Arial, sans-serif. Rysunek 4.31 pokazuje, jak prezentuje się nowe logo zestawione z fontami Fago Office Serif i Helvetica. Rysunek 4.31. Typografia marki Southern Savers Dokonanie wyboru typografii nie stanowiło bynajmniej końca procesu projektowania. W dalszym ciągu należało podjąć decyzję, jakie kolory i tekstury pomogłyby tchnąć życie w całą kompozycję. Matthew postanowił wykorzystać fragment logo — kwiat. „Tekstura tych płatków sprawia wrażenie jednocześnie eleganckiej, jak i ziemistej. Chciałem właśnie coś takiego odzwierciedlić na reszcie strony”. Czerpiąc inspirację ze stylu ilustracyjnego, Matthew włączył w obszar nagłówka jasnoturkusową wstęgę, wyginając ją w łuk, tak by wzmocnić wyróżnienie logo. Ponad wstęgą użył

Typografia

ciemnozielonego koloru, akcentując go liśćmi magnolii. W rezultacie komponenty te w naturalny sposób stały się idealnymi obszarami dla menu nawigacji, zdefiniowanymi w szkielecie strony. W czasie gdy Matthew ulepszał projekt graficzny, Kevin Smith99, web deweloper projektu, rozpoczął pracę nad witryną i jej integracją z WordPressem. Jego zadaniem było ustalenie, jak wiele z decyzji typograficznych znajdzie swoje zastosowanie w ukończonej stronie. Kevin wiedział, że będzie musiał skorzystać z techniki dynamicznego zastępowania fontów, więc zdecydował, że metoda Cufón nada się wyśmienicie do stworzenia alternatywnej deklaracji fontu oraz alternatywnych grafik dla elementów statycznych strony i przycisków. Rysunek 4.32 pokazuje, jak wszystkie kroje wraz z zaprojektowanymi przez Matthew komponentami prezentują się na ukończonej witrynie.

Rysunek 4.32. Projekt strony głównej Southern Savers

Później przyjrzymy się witrynie Southern Savers bliżej. Najpierw jednak musimy się dowiedzieć więcej o obrazie — przede wszystkim o tym, gdzie go szukać oraz jak go użyć, by powalić Twoich klientów na kolana.

99

http://kevinsmith.cc/

167

168

Rozdział

5

Obraz Od samego początku tej książki omawiałem formy prezentacji obrazu — zaczynając od kompozycji strony, przez kolor i teksturę, po krój pisma. Czemu więc poświęcam mu jeden rozdział pod sam jej koniec? Tak jak z typografią, istnieje wiele praktycznych kwestii, które trzeba wziąć pod uwagę przy doborze obrazu — włączając w to typy plików, rozdzielczość grafik i źródła fotografii. Oczywiście aspekt artystyczny tego tematu jest równie ważny i zasługuje na osobne miejsce w dyskusji.

Rysunek 5.1. Okiem obiektywu

Wybór elementów ilustrujących, fotograficznych czy ikon do kompozycji witryny wymaga znajomości zasad projektowania omówionych przez mnie w poprzednich rozdziałach. Dla przykładu spójrz na rysunek 5.1. Chciałem użyć zdjęcia aparatu fotograficznego u góry strony, żeby adekwatnie podkreślić tematykę rozdziału. Jednakże podczas szukania odpowiedniej fotografii moim głównym kryterium wyboru był kąt ustawienia aparatu, a nie na przykład jego model. Kierunek, w którym ustawiony jest aparat, wpływa na wrażenie ruchu na stronie. Gdyby był skierowany na wprost, strona w dalszym ciągu prezentowałaby się dobrze, ale sprawiałaby wrażenie bardzo statycznej. Gdyby był skierowany w prawo, ilustracja naprowadzałaby Twój wzrok poza stronę zamiast na jej treść. Zjawisko to opiera się na koncepcji wyróżnienia, o której mówiłem w rozdziale 1. Umieszczenie zdjęcia u góry strony zapewni to, że zostanie ono zauważone. Z kolei położenie obiektywu tworzy linię ciągłości, która określa jej punkt ogniskujący. Pod koniec tego rozdziału w pełni zrozumiesz działanie tych środków wyrazu i będziesz wiedział, w jaki sposób korzystać z nich we własnych projektach.

170

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Czego szukać? Stare porzekadło: „Jeden obraz jest wart tysiąc słów” — z pewnością sprawdza się w sieci. Fotografie i ilustracje często służą jako wizualne „przynęty”, których zadaniem jest „schwytać” użytkownika i przyciągnąć go do treści. Z drugiej strony, niewłaściwe obrazy czy nawet słabe przedstawienie tych dobrych mogą znacznie ograniczyć atrakcyjność witryny. Każdy człowiek postrzega fotografię lub ilustrację inaczej, zależnie od pochodzenia i własnych doświadczeń. Tak więc tysiąc słów przekazanych jednej osobie może się różnić od tysiąca słów odczytanych z tego samego obrazu przez inną. Zanim zawrzesz grafiki i rysunki w układzie lub treści swojej strony, dobrze by było, gdybyś wpierw zadał sobie trzy następujące pytania: Czy to odpowiedni obraz? Odpowiednie obrazy mogą dodać witrynie uroku i wzbogacić jej treść. Stanowią swego rodzaju wzrokowe zakładki, przypominając użytkownikom, jakiej tematyce dana strona jest poświęcona i gdzie szukać potrzebnych informacji, gdy na nią wrócą. Spójrz na stronę promującą nowe opcje serwisu MailChimp, widoczną na rysunku 5.2. Fotografia w tle wygląda radośnie i wpisuje się w tematykę strony, nadając jej zarówno aurę stylu retro, jak i charakter — niemożliwe do uzyskania przez żadną inną ilustrację. Odpowiedniość jest najbardziej logiczną zasadą przy wyborze obrazu, którą względnie trudno złamać. Jest jednak tylko jednym z czynników, jakie należy wziąć pod uwagę.

Rysunek 5.2. Promocyjna strona serwisu MailChimp

Czy to intrygujący obraz? Choć utrzymanie związku pomiędzy elementem graficznym i treścią jest ważne, nie musi ono być Twoim priorytetem. Cały problem z poszukiwaniem odpowiedniego obrazu na stronę polega na tym, że za często wpadamy w pułapkę zbyt dosłownego przesłania — a właśnie z krainy dosłowności, przynajmniej jeżeli chodzi o obraz, wywodzi się wszelki banał.

Obraz

Gdybyś projektował witrynę dla restauracji meksykańskiej, jaki obraz byś wybrał? Mój instynkt podpowiada mi: „Zdjęcie uśmiechniętych ludzi jedzących nachos”. Tego właśnie obrazu nie znajdziesz na witrynie Tijuana Flats100, zaprezentowanej na rysunku 5.3. Zamiast tego firma webdesignerska PUSH z Florydy zatrudniła do projektu jej kompozycji słynnego amerykańskiego rysownika komiksów Aleksa Saviuka. W rezultacie powstał najlepszy przykład na to, że czasem dobrze jest wprowadzić artystyczny rozmach i zaintrygować kosztem osłabienia związku z tematyką. Choć kompozycja strony nie przypadnie wszystkim do gustu, ja ją po prostu uwielbiam — najbardziej podziwiam to, że jest ona w stu procentach zgodna ze standardami sieciowymi, a głowa monstrualnego dżina zjeżdża w dół strony, gdy ją przewijasz. Z tego przykładu płynie następująca lekcja: lepiej być dziwacznym i szałowym niż zwyczajnym i nudnym.

Rysunek 5.3. Tijuana Flats i komiksowe grafiki Aleksa Saviuka

100

http://www.tijuanaflats.com/

171

172

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Czy to atrakcyjny obraz? Obrazy, które są atrakcyjne pod względem emocjonalnym i estetycznym, świetnie wpływają na zachowanie wyróżnienia i przyciągają uwagę. Szkopuł tkwi w tym, że piękno i atrakcyjność niejedno mają imię i każdy może odbierać je inaczej. Zależnie od tematyki oraz grupy docelowych użytkowników projektowanej przez Ciebie witryny atrakcyjne może być zdjęcie matki z dzieckiem, panorama miasta lub słodka kreskówkowa maskotka. Atrakcyjne obrazy są ważne szczególnie na witrynach poświęconych restauracjom, przepisom i cateringowi. Jeśli użytkownikowi witryny ślinka nie pocieknie na sam widok jedzenia, na pewno go nie zje, nie ugotuje ani nie zamówi. Na witrynie 101 Cookbooks101 Heidi Swanson (rysunek 5.4) znajdziesz naprawdę dobre przepisy. Moim zdaniem jednak tym, co naprawdę przyciąga ludzi na stronę i zachęca do ich wypróbowania, jest trójkolumnowy układ oraz nieprawdopodobnie przepysznie wyglądające —aż ściska w żołądku — fotografie potraw.

Rysunek 5.4. 101 Cookbooks: przepysznie wyśmienite zdjęcia potraw

101

http://www.101cookbooks.com/

Obraz

Jestem świadom, że to, czy dany obraz jest odpowiedni, intrygujący lub atrakcyjny, jest sprawą subiektywną, ale zdarza się, że subiektywność i artyzm idą w parze. Jeśli Twoim zdaniem wybrany przez Ciebie obraz jest dobry, bierz go i uciekaj! A tak na serio, sam unikałbym w swoich projektach wszelakiej maści potworów i ufoludków, ale, jak pokazałem wyżej, nawet taka kompozycja może się sprawdzić — zależnie od klienta i przyszłych użytkowników witryny. W przypadku każdego obrazu, który wybierasz na stronę, powinieneś odpowiedzieć twierdząco na przynajmniej dwa z wymienionych tu pytań. Czemu nie na wszystkie trzy? Cóż, czasem po prostu dobrze jest wrzucić na stronę intrygującą grafikę, która nie ma nic wspólnego z jej tematyką — jak na przykład pokazującą grupki ptaszków niosących złapanego w sieć wieloryba (Twitter) .

Potencjalne źródła obrazów Jak zdobyć interesującą, atrakcyjną i odpowiednią grafikę na Twoją witrynę? Masz trzy możliwości — możesz ją stworzyć samemu, zakupić lub wynająć profesjonalistę, by Ci ją stworzył. Metoda, którą wybierzesz, zależy od Twojego budżetu i potrzeb klienta oraz Twoich własnych umiejętności.

Brać czy robić? Przynajmniej dla mnie samodzielne robienie zdjęć czy własnoręczne tworzenie ilustracji jest jak upieczenie dwóch pieczeni na jednym ogniu. Jeśli moi klienci potrzebują zdjęć na swoje strony, daje mi to wspaniałą okazję, by uciec z czterech ścian biura i zrobić dla odmiany coś innego. Miałem okazję robić fotografie produktów, restauracji, fabryki, apartamentowca, szkoły sztuk walki, sklepów — zdarzyło mi się nawet jednego ranka jeździć wózkiem golfowym, by zrobić zdjęcie polu golfowemu — a wszystko to w godzinach pracy. Jest w tym jednak coś więcej niż tylko możliwość odpoczynku od biurowej harówki . Zwykle klientom podoba się ten pomysł, ponieważ pokazuję im w ten sposób, że poważnie traktuję każdy etap pracy nad projektem. Najprawdopodobniej będzie to też kosztować ich mniej, niż gdyby musieli skontaktować się z profesjonalnym fotografem102. To samo dotyczy pracy nad ilustracjami i animacją. W większości przypadków nawet prosty projekt strony wymaga jakichś grafik. Zwykle sam zajmuję się takimi elementami, jak ikony, przyciski, tła, proste rysunki czy logo. Zapamiętaj, że aby przekaz witryny był jasny, obraz wcale nie musi być złożony; nie musisz też spędzić nad nim całych wieków. Rzuć okiem na witrynę australijskiej firmy designerskiej Bam Creative103 na rysunku 5.5. Grafika bomby użyta na stronie głównej i w logo jest bardzo efektowna i zapadająca w pamięć, mimo że tworzy ją prosta jednokolorowa figura geometryczna, którą mógłby zaprojektować każdy.

102

Choć sam możesz nie uważać się za fotografa, umiejętności robienia dobrych zdjęć też można się nauczyć. Świetnym źródłem wiedzy na ten temat jest książka wydawnictwa SitePoint Photography for the Web (http://www.sitepoint.com/books/photography1).

103

http://www.bam.com.au/

173

174

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 5.5. Witryna Bam Creative prezentuje się naprawdę wybuchowo

Zdarza się jednak, że metoda „zrób to sam” się nie sprawdza. Praca nad ilustracjami, których zażyczył sobie klient, może być poza zasięgiem moich umiejętności lub na tyle skomplikowana, że nie czułbym się dość komfortowo, by podjąć się zadania. Jeśli ową ilustracją ma być zdjęcie, być może nie mam bezpośredniego dostępu do obiektu, który trzeba sfotografować, lub jakość obrazu, jakiej potrzebuje klient, przekracza możliwości mojego sprzętu. W takich przypadkach wybieram kolejne rozwiązanie — udaję się na serwis fotografii i ilustracji stockowej.

Fotografia stockowa Gdy brak Ci czasu lub umiejętności, aby stworzyć grafiki samodzielnie bądź zlecić ich wykonanie komuś innemu, możliwe, że rozwiązaniem Twojego problemu może być serwis fotografii stockowej. Te archiwa zdjęć — czy też banki obrazów — składają się ze zbiorów fotografii i ilustracji stworzonych do użytku ogólnego, a nie na potrzeby konkretnego projektu czy klienta. Za drobną opłatą licencyjną (a czasem nawet za darmo) możesz użyć dowolnego z tych obrazów w swojej pracy. Samo znalezienie właściwych grafik i zdjęć do projektu może okazać się wymagającym zadaniem, w zależności od jego tematyki i Twojego budżetu. Jeśli potrzebujesz zdjęć zwierząt, malowniczych wakacyjnych krajobrazów, sprzętu biurowego lub martwej natury, najprawdopodobniej dość łatwo znajdziesz tu to, czego szukasz. Każde archiwum fotografii stockowej posiada zdjęcia o właśnie takiej tematyce. Z drugiej strony, znajdowanie zdjęć ludzi — jak na przykład fotografii dziewczyny o wspaniałych niebieskich oczach, noszącej golf z wyjątkowo długimi rękawami, na witrynie

Obraz

Brochure Ninjas104 (rysunek 5.6) — może być trudniejsze; większość witryn tego typu żąda podpisania przez modela zgody na opublikowanie zdjęcia, na którym widać jego twarz.

Rysunek 5.6. Zdjęcia osób, jak na fotografii z witryny Brochure Ninjas, mogą być znacznie droższe

Nie zdziw się więc, gdy z tego powodu przyjdzie Ci zapłacić więcej za wysokiej jakości fotografie ludzi. Dodatkowo jeśli potrzebujesz zdjęcia logo produktu, celebryty lub słynnego dzieła sztuki, będziesz się musiał trochę napracować. Choć łatwo znajdziesz potrzebne obrazy w internecie, skorzystanie z nich w profesjonalnym projekcie będzie wymagało podpisania umowy licencyjnej.

Zapoznaj się z zasadami użycia obrazów Nawet jeśli obraz, który chcesz kupić, w teorii nie podlega żadnym ograniczeniom w użyciu, powinieneś się upewnić, czy licencja witryny, na której go znalazłeś, nie wpływa na zasady korzystania z niego. Licencja ta różni się w zależności od witryny, więc dobrze jest się z nią zapoznać, jeszcze zanim rozpoczniesz poszukiwania. Zdarza się, że niektóre galerie pozwalają jedynie na użytek osobisty zamieszczonych materiałów. Kolejnym pytaniem, na które musisz znać odpowiedź, zanim wyruszysz na wyprawę w poszukiwaniu zdjęcia doskonałego, jest: „Ile jesteś gotów zapłacić?”. Niektóre zdjęcia mogą nic nie kosztować, cena innych może wynosić setki dolarów. Jak pewnie się domyślasz, średnia jakość darmowych obrazów jest zdecydowanie gorsza niż tych płatnych. Przebrnięcie przez stos 104

http://www.brochureninjas.com/

175

176

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

nędznych fotografii po to, by znaleźć tę jedną jedyną, darmową, może być jednak warte zachodu. To samo dotyczy płatnych zdjęć. Sam fakt, że jesteś gotów wydać 500 dolarów na jedną fotografię, nie zagwarantuje Ci tego, że otrzymasz Ferrari zamiast tandetnego minivana Chryslera z lat 90. Bez względu na cenę za pojedynczą licencję wszystko sprowadza się do znalezienia tego, czego szukasz. Jeżeli odnajdziesz to dość szybko, nawet jeśli przyjdzie Ci za tę rzecz zapłacić, będziesz mógł poświęcić więcej czasu na pracę nad projektem. Wyróżniamy trzy główne typy fotografii stockowej — zdjęcia darmowe, zdjęcia wolne od opłat autorskich i fotografie licencjonowane. Przyjrzyjmy się każdej z tych kategorii bliżej.

Obrazy darmowe Na pewno znasz powiedzenie: „Nie ma nic za darmo”. Przysłowie to sprawdza się wszędzie, a szczególnie w kontekście darmowej fotografii. Mimo że liczba darmowych zdjęć dostępnych w sieci jest duża, trzeba pamiętać, że ktoś poświęcił własny czas i pieniądze na sprzęt, żeby je wykonać. Dlaczego niby fotografowie mieliby robić coś takiego za darmo? Z tego samego powodu, dla którego utalentowany muzyk nagrywa darmowy utwór lub zespół programistów pracuje na programem typu open source. Po prostu kochają to, co robią, a zamieszczenie darmowych materiałów w sieci pozwala innym ludziom cieszyć się owocami ich pracy, co z kolei sprawia, że zostają zauważeni. Ze wszystkich źródeł fotografii stockowej serwis Stock.XCHNG105, widoczny na rysunku 5.7, jest tym, z którego korzystam najczęściej.

Rysunek 5.7. Serwis Stock.XCHNG — miejsce, w którym znajdziesz stosy zdjęć na każdy temat… nawet fotografie pręgowców

105

http://www.sxc.hu/

Obraz

Stock.XCHNG posiada zbiór ponad 400 000 wysokiej jakości zdjęć, których z dnia na dzień przybywa. Aby zapewnić wysoką jakość bazy danych galerii, moderatorzy witryny sprawdzają każdą nadesłaną fotografię, zanim zostanie ona tam opublikowana. Nim ściągniesz obraz z tego serwisu, sprawdź jego licencję. Większość dostępnych tu zdjęć można wykorzystać bez ograniczeń zarówno w celach prywatnych, jak i komercyjnych. Ważną rolę odgrywa wielkość kolekcji fotografii. Im więcej jest zdjęć w kategorii, którą jesteś zainteresowany, tym masz większe szanse na odnalezienie tego jednego, które Ci się przyda. Choć w sieci znajdziesz więcej źródeł darmowej fotografii stockowej, większość z nich oferuje dużo uboższy wybór obrazów lub jest poświęcona bardzo wąskiej tematyce. Jedną z takich niszowych witryn jest serwis Old Book Illustrations106. Znajdziesz tu duży zbiór zeskanowanych obrazów i ilustracji, takich jak widoczna na rysunku 5.8, które zostały wydane dostatecznie dawno, by znaleźć się w domenie publicznej. Listę innych źródeł udostępniających materiały z tej grupy znajdziesz na odpowiedniej stronie Wikipedii107.

Rysunek 5.8. Rysunek z witryny Old Book Illustrations

Jeśli zdarzyło Ci się już szukać zdjęć w zbiorze fotografii, wiesz, jak może to być frustrujące. Czasem możesz nawet spędzić więcej czasu na poszukiwaniach niż na samym projektowaniu, a przecież przy dużych projektach dla poważnych klientów czas to pieniądz. Jeśli jesteś gotów zapłacić za obraz, poszukiwanie odpowiedniej grafiki staje się dużo prostsze. I tutaj do gry wkraczają płatne fotografie stockowe, które występują w dwóch odmianach — wolnej od opłat autorskich i licencjonowanej.

Grafiki wolne od opłat autorskich Wbrew nazwie obrazy wolne od opłat autorskich nie są darmowe. Termin „opłaty autorskie” odnosi się bowiem do szczegółów umowy licencyjnej, a nie do ceny ilustracji. Według tej licencji pojedyncza opłata za grafikę wystarcza, żeby nabyć niemalże nieograniczone prawa do korzystania z niej. W rezultacie możesz używać tego obrazu na każdej witrynie, w dowolnej liczbie projektów dla dowolnych klientów bez konieczności uiszczenia opłat autorskich — zwanych także tantiemami. Oczywiście, jak zapewne zdajesz sobie sprawę, możliwość takiego zakupu jest szczególnie popularna wśród projektantów wielokrotnie korzystających z tych samych obrazów, którzy nie chcą zawracać sobie głowy negocjowaniem nowych warunków za każdym razem. Jedną z najsłynniejszych witryn z fotografiami tego typu jest widoczny na rysunku 5.9 serwis iStockphoto108. Podczas gdy wiele większych witryn tego typu hostuje zdjęcia profesjonalnych fotografów, iStockphoto umożliwia sprzedaż zdjęć, ilustracji czy nawet plików audio i wideo praktycznie każdemu. W celu zapewnienia wysokiej jakości zdjęć i różnorodności zbiorów administratorzy witryny przyjmują tylko obrazy bardzo wysokiej próby i często odrzucają te o tematyce, z zakresu której mają już wiele fotografii. 106

http://www.oldbookillustrations.com/

107

http://pl.wikipedia.org/wiki/Wikipedia:Graficzne_zasoby_o_wolnych_licencjach

108

http://www.istockphoto.com/

177

178

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 5.9. Wyniki wyszukiwania wyrażenia „happy person” w serwisie iStockphoto

Różnica w jakości obrazów dostępnych na Stock.XCHNG i iStockphoto wynika z prostej przyczyny. iStockphoto płaci artystom, nie dziwi więc, że otrzymuje więcej materiałów wysokiej klasy. Zakup obrazów opiera się tu na systemie kredytów. Gdy już stworzysz tu konto, będziesz miał możliwość zakupu kredytów, które działają podobnie jak bony towarowe w sklepie . Cena jednego kredytu waha się od 1 do 1,50 dolara — im więcej ich kupisz, tym będą tańsze. Cena zwykłych fotografii w tym serwisie wynosi od 2 do 25 kredytów, w zależności od rozmiaru obrazu. Wiem, o czym myślisz. 25 razy 1,50 dolara daje 37,50 dolara za jedno zdjęcie. W kontekście sieci jednak zwykle korzystamy z mniejszych obrazów, które kosztują 10 kredytów lub mniej. Dreamstime109 jest usługą podobną do iStockphoto, lecz tańszą. Choć iStockphoto był dawniej moim źródłem fotografii numer 1, z biegiem czasu zacząłem znajdować to, czego potrzebuję, w zbiorach Dreamstime, które zawierają też wiele darmowych fotografii. Jeśli musisz zdobyć sporą liczbę zdjęć naraz, nawet minimalna stawka dwóch kredytów za fotografię może sprawić, że pójdziesz z torbami. Z tego powodu płatna subskrypcja online może być dla Ciebie ciekawą alternatywą.

109

http://www.dreamstime.com/

Obraz

Istnieje kilka serwisów fotografii stockowej, które nie sprzedają zdjęć indywidualnie; zamiast tego raz w miesiącu obciążają one Twój rachunek sumą, za którą możesz ściągać z ich witryn, co Ci się żywnie podoba. Witryny Photos.com110 i Shutterstock111 są świetnymi dostawcami usług tego typu. Chociaż cena planu podstawowego oscyluje w granicach 100 dolarów miesięcznie, serwisy te oferują zniżki przy zakupie subskrypcji kilkumiesięcznej — co może Ci się bardzo opłacić.

Obrazy licencjonowane Trzecim wariantem fotografii stockowej są obrazy licencjonowane. Ten rodzaj zdjęć jest zwykle droższy od pozostałych — choćby dlatego, że opłata, jaką przyjdzie Ci uiścić, zależy od wielkości Twojej firmy, liczby ludzi, którzy będą podziwiać obraz, oraz czasu, w jakim będzie on dostępny dla publiki. Większość usługodawców fotografii stockowej posiada kolekcję właśnie takich zdjęć — są wśród nich witryny Corbis112, Getty Images113 i Jupiterimages114. Fotografie te odznaczają się zwykle bardzo wysoką jakością. Firma odpowiedzialna za zarządzanie prawami do zdjęć doskonale wie, kto używa jej fotografii, wobec czego szanse na to, że konkurent Twojego klienta wykorzysta te same zdjęcia na swojej stronie, są minimalne. Może Ci się wydawać, że przy tak dużej puli zdjęć dostępnych w sieci wykorzystanie jednej fotografii na wielu witrynach jest mało prawdopodobne, ale prawda jest taka, że coś takiego zdarza się cały czas. Aplikacja TinEye115 pozwala sprawdzić, jak powszechne jest dane zdjęcie w sieci. Ta mała wtyczka do przeglądarki działa jak wyszukiwarka internetowa. Wystarczy po prostu kliknąć obraz, który chcesz przebadać, a program sam znajdzie pasujące wpisy w swoim dwumiliardowym indeksie stron. Jak możesz się przekonać, patrząc na rysunek 5.10, wtyczka ta odnajdzie nawet mocno zmodyfikowane wersje oryginalnego zdjęcia. Tak na marginesie, mimo że wśród zasobów serwisów stockowych jest wiele fotografii kobiet z nagłownymi słuchawkami, skorzystanie z nich trąci banałem. Podobnie jest z każdym zdjęciem poważnych biznesmenów wymieniających uścisk dłoni. Ironia polega na tym, że pasek boczny TinEye wyświetla reklamówkę ze zdjęciem innej kobiety w nagłownych słuchawkach. Mówię Ci, one są wszędzie!

110

http://www.photos.com/

111

http://www.shutterstock.com/

112

http://www.corbisimages.com/

113

http://www.gettyimages.com.au/

114

http://www.jupiterimages.com/

115

http://www.tineye.com/

179

180

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 5.10. Wyniki wyszukiwania TinEye dla popularnego zdjęcia z witryny iStockphoto

Choć wydanie góry pieniędzy na licencjonowaną fotografię może pozwolić Twoim klientom uniknąć takiego scenariusza, to jednak nie masz gwarancji wyłączności. Jeśli chcesz być pewny tego, że obraz, którego użyjesz na swojej stronie, nie zostanie wykorzystany przez nikogo innego, najlepszym wyjściem będzie wynajęcie profesjonalisty.

Pomoc profesjonalisty Gdy przyjdzie Ci korzystać z usług profesjonalnego fotografa, upewnij się, że jest to osoba z doświadczeniem w fotografii komercyjnej z zakresu interesującej Cię tematyki. Ten świetny fotograf, który uwiecznił łzy Twojego szwagra na weselu kuzyna, może być fachowcem od fotografii portretowej, ale nie znać się na fotografii przemysłowej czy architektonicznej. Najlepszą rekomendacją dla fotografa są opinie innych. Jeśli masz znajomości w firmach, które korzystały z usług danego fotografa, poproś je o rekomendację. Jeżeli nie dysponujesz tego typu kontaktami, zwróć się do lokalnego stowarzyszenia profesjonalistów. Jeśli pracujesz w Stanach Zjednoczonych, świetnym miejscem na rozpoczęcie poszukiwań jest witryna American Photographic Artists116. Wielu z fotografów, których nazwiska znajdują się w bazie danych, dysponuje własną biografią i portfolio, co pozwoli Ci dowiedzieć się o nich więcej.

116

http://www.apanational.com/

Obraz

Aby lepiej zorientować się w kosztach, dokładnie sformułuj zlecenie. Upewnij się, że omówiłeś detale każdego zdjęcia, które będzie Ci potrzebne. Napisz, gdzie chcesz, aby zdjęcia zostały wykonane. Jeśli muszą być zrobione poza studiem, przygotuj wszystko, co będzie niezbędne (modeli, przedmioty, ubrania itd.), tak aby wszystkie zdjęcia można było wykonać tego samego dnia. Większość profesjonalnych fotografów pracuje za dniówki lub półdniówki. Stawka za dniówkę może być różna, zależnie od popytu na rynku i doświadczenia fotografa, ale — przynajmniej w Stanach Zjednoczonych — waha się ona między tysiącem a kilkoma tysiącami dolarów. Kolejną kwestią, którą należy wziąć pod uwagę, jest prawo autorskie i zasady użytkowania fotografii. Większość fotografów przekazuje prawo własności klientowi po dokonaniu zapłaty za ich pracę. Niektórzy będą chcieli, żebyś zaznaczył, iż fotografia została wykonana właśnie przez nich. Znajdą się i tacy, którzy zachowują wszelkie prawa z tytułu wykonania zdjęcia dla siebie i pozwolą Ci go używać w zamian za część zysków z jego publikacji. Jeśli to tylko możliwe, spróbuj wynegocjować pełne przekazanie praw, lecz pamiętaj, że najprawdopodobniej będzie Cię to kosztować znacznie więcej. Być może chciałbyś wynająć profesjonalnego ilustratora? W takim przypadku dobrym miejscem, w którym należy szukać pomocy, jest na przykład witryna Hire an Illustrator!117. W indeksie artystów na tej witrynie widnieje ponad 300 wpisów, które można pogrupować według nazwiska, stylu, medium i miejsca pracy. Tak jak w przypadku wynajmowania fotografów, warto jednak polegać na rekomendacji znajomych. Przez ostatnie dwa lata pomagałem organizować konferencje dla web deweloperów o nazwie Converge SE118 w Columbii w stanie Karolina Południowa. Muszę przyznać, że spotkania te zawdzięczały swój charakter w dużej mierze dziwacznym ilustracjom (takim jak Ośmiorekin widoczny na rysunku 5.11) autorstwa Giovanniego Difetericiego.

Rysunek 5.11. Witryna Converge SE i Ośmiorekin

117

http://hireanillustrator.com/i/

118

http://convergese.com/

181

182

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

W trakcie tych konferencji miałem okazję spotkać się z Giovannim i z wieloma innymi projektantami, deweloperami, fotografami, animatorami, grafikami i przedstawicielami innych profesji. Jeśli mieszkasz w wielkim mieście lub jego pobliżu, z pewnością znajdziesz zrzeszenia ludzi z wielu gałęzi rzemiosła, czy to sieciowego, czy technologicznego. Właśnie tam szukaj talentów, które mogłyby Ci pomóc zakończyć Twój projekt bądź na stałe dołączyć do Twojego zespołu. I po raz kolejny pozwól sobie przypomnieć, że niezależnie od źródła, z którego czerpiesz obrazy na swoją witrynę — czy będzie nim serwis fotografii stockowej, czy talent profesjonalisty — to Twój klient powinien podjąć ostateczną decyzję w tej kwestii. Mimo że najprawdopodobniej to Ty dokonasz selekcji obrazów, które, według Ciebie, adekwatnie oddają naturę przedsiębiorstwa, może się zdarzyć, że klient nie zgodzi się z Twoim wyborem. Zawsze bądź gotów dostosować się do koniecznych zmian. Tak długo, jak będziesz się dobrze spisywał i korzystał z legalnych źródeł grafiki, Twoja ciężka praca Ci się opłaci, wprawiając Twoich klientów w zachwyt.

Skąd nie czerpać Omówiliśmy do tej pory kilka źródeł dobrych obrazów na Twoją witrynę. Teraz przedstawię Ci kilka miejsc, z których nie należy czerpać grafik.

Google grabież Jako web designer możesz czerpać inspirację z wyników wyszukiwania obrazów w Google, otrzymanych przy użyciu słów-kluczy, wokół których chcesz zbudować Twoją witrynę. Powiedzmy, że tworzysz stronę sklepu rowerowego. Jeśli jego właściciel nie dostarczył Ci jeszcze żadnych fotografii, samodzielnie wyszukujesz informacji o rowerach górskich, kolarzówkach, wyścigach kolarskich, które lepiej pozwoliłyby Ci się zorientować w temacie i dowiedzieć się, jakich zdjęć można by użyć w projekcie. Zwykle takie zapytanie w wyszukiwarce Google zwraca obrazy, które prezentowałyby się w Twojej kompozycji całkiem dobrze. Mógłbyś odczuć nieprzemożoną pokusę, żeby zachować niektóre z tych zdjęć na swoim komputerze, otworzyć Photoshopa, wyciąć, zmniejszyć i zmodyfikować je tak, aby nadały się do użycia. Praktyka ta nosi miano Google grabieży (ang. Google ganking) i stanowi poważny problem w sieci. O ile dowolna grafika zamieszczona na stronie nie została oznaczona jako dostępna w domenie publicznej, należy założyć, że prawa do niej należą do właściciela witryny — dlatego też, zanim jej użyjesz, powinieneś się z nim skontaktować. Może Ci się wydawać, że ów podmiot nie zorientuje się, iż przywłaszczyłeś sobie jego mienie; wiedz jednak, że ryzykujesz własną reputacją, jeśli Twój klient otrzyma list z nakazem zaprzestania użytkowania fotografii bądź, co gorsza, pozew sądowy. To samo dotyczy większości obrazów znalezionych na witrynie Flickr. Choć większość zdjęć jest własnością ich twórców, serwis Flickr umożliwia swym użytkownikom nadanie im kilku licencji typu Creative Commons (CC)119. Licencje te określają dokładnie, co można i czego nie wolno robić z fotografią. Jedna z dostępnych licencji pozwala na skorzystanie ze zdjęć w celach handlowych. Rysunek 5.12 prezentuje wyniki wyszukiwania zdjęć pręgowców, które możesz swobodnie wykorzystać w swojej pracy. Jak pewnie pamiętasz, podobne zapytanie wysłałem w serwisie StockXCHNG, ale tu zwróciło ono 2423 wyniki, a nie zaledwie 50. Wiadomo więc, dlaczego 119

http://www.flickr.com/creativecommons/

Obraz

niektórzy wskazują na serwis Flickr jako alternatywę dla fotografii stockowej. I choć rzeczywiście znajdziesz tam zatrzęsienie materiałów — pamiętaj — mimo wszystko nie jest to fotografia stockowa. Aby móc z nich legalnie skorzystać, musisz przynajmniej wskazać autora dzieła na swojej stronie. Jeśli nie podasz linku do każdego zdjęcia skopiowanego z Flickra, równie dobrze mógłbyś je po prostu ukraść.

Rysunek 5.12. Flickr: wyniki wyszukiwania fotografii pręgowców z licencją CC do użytku komercyjnego

Hotlinkowanie Jeżeli istnieje jakaś rzecz znienawidzona przez projektantów bardziej niż widok własnego projektu lub zdjęcia na witrynie konkurencji, jest nią linkowanie tego obrazu z ich własnego serwera. Zwykle pliki z grafiką umieszcza się na tym samym serwerze co stronę i definiuje się je następująco:

Obrazy można również linkować w inny sposób, wykorzystując pełny adres URL obrazka:

Wracając do przykładu sklepu rowerowego, powiedzmy, że zapragnąłem użyć zdjęcia konkretnej marki lub modelu roweru. Załóżmy, że udało mi się znaleźć takie zdjęcie na stronie producenta rowerów i zechciałem z niego skorzystać. Zamiast poprosić wytwórcę o przesłanie mi zdjęć

183

184

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

rowerów lub nawet ściągnąć fotografie i umieścić je na serwerze klienta, po prostu wstawiłem bezpośrednie linki do obrazów na witrynie producenta. Taką wątpliwą moralnie praktykę nazywamy hotlinkowaniem. Poza naruszeniem praw autorskich hotlinkowanie zużywa przepustowość serwera, na którym znajdują się pliki. Korzystając z porównania do sytuacji z prawdziwego świata, to tak, jakbyś używał telefonu komórkowego kogoś innego do wykonywania połączeń. Większość profesjonalnych projektantów wie, że nie wolno hotlinkować, więc zwykle podejrzanymi o tę praktykę są niedoinformowani członkowie forów dyskusyjnych, blogerzy oraz użytkownicy serwisu My Space, którzy po prostu wiedzą swoje. Jeśli więc do tej pory postępowałeś tak jak oni, czuj się uświadomiony.

Clipart Wiele witryn ma w swojej ofercie darmowe lub tanie zestawy tzw. clipartów. Choć te kiczowate grafiki (por. rysunek 5.13) mogą się sprawdzać w wewnętrznych biuletynach firmy lub zabawnych wizytówkach, nigdy, przenigdy nie powinny się znaleźć w Twoim profesjonalnym projekcie.

Rysunek 5.13. Cliparty mogą zrobić to TOBIE

Może Ci się wydawać, że jestem w jakiś sposób uprzedzony, ale poświęć chwilę i zastanów się nad tym dobrze. Gdybyś szedł do pięciogwiazdkowej restauracji, czy spodziewałbyś się tam dostać danie instant z mikrofalówki? Jasne, że nie! Oczekiwałbyś wykwintnej potrawy, ugotowanej ze świeżych składników pod okiem wykwalifikowanego szefa kuchni. Jako projektant witryn Ty też masz święty obowiązek „upichcić” dla swojego klienta coś równie zachwycającego i oryginalnego. Choć jakość i „świeżość” fotografii stockowej też może być wątpliwa, nie ma nic gorszego, niż zobaczyć dobry projekt zrujnowany przez tandetny, oklepany clipart. Jeśli to klient poprosi Cię o umieszczenie clipartu lub banalnej animacji GIF na stronie, spróbuj go od tego odwieść. Skoro przyszedł on do Ciebie po projekt, Twoim zadaniem jest wpłynąć na jego decyzję, tak żeby jego witryna wyglądała jak najlepiej. Jednakże pamiętaj i o przysłowiu: „Klient nasz pan”. Czasem

Obraz

wymusi on na Tobie zgodę na takie rozwiązanie i nie będziesz miał innego wyjścia, jak posłuchać go. Cóż, niektórzy ludzie naprawdę lubią dania instant z mikrofalówki. Nawet jeśli dokonałeś perfekcyjnego wyboru obrazów do projektu, nim przystąpisz do pracy, musisz rozważyć jeszcze jeden ważny czynnik — prezentację. Przy formatowaniu zdjęć i ilustracji efekt będzie w dużej mierze zależał od układu strony, jaki wybrałeś. Na przykład wielkość grafiki będzie uzależniona od wielkości prostokątnego bloku na Twojej siatce. To od projektanta — czyli Ciebie — zależy, jak wiele z fotografii zostanie wycięte, czy ilustracja będzie obramowana, czy nie i jakie rodzaje efektów wizualnych dodasz do swego obrazu, jeśli w ogóle jakiekolwiek.

Twórcze wycinanie Wybór tego, co wartościowe, a co zbędne w fotografii, może bardzo wpłynąć na efekt Twojej prezentacji. Aby był on jak najlepszy, korzystamy z jednej z podstawowych i najważniejszych technik manipulacji obrazem, zwanej kadrowaniem (bądź po prostu wycinaniem). Za pomocą kadrowania usuwamy niepotrzebne bądź szpetne detale zdjęć. Fotografię na rysunku 5.14 zrobiłem podczas przechadzki z żoną po centrum miasteczka Charleston w Karolinie Południowej. Nie jest ona zła, ale ludzie na pierwszym planie oraz cień po prawej stronie rozpraszają uwagę.

Rysunek 5.14. Zdjęcie centrum Charleston — przed edycją

185

186

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Po wycięciu dołu i prawej części fotografii powstałe zdjęcie — zaprezentowane na rysunku 5.15 — sprawia wrażenie bardziej spokojnego — niczym zwykła fotografia z wakacji. W oryginalnym zdjęciu perspektywa sprawiała, że punktem ogniskowym była iglica kościoła, lecz całość zawierała zbyt wiele elementów, które walczyły o uwagę widza. Po wykadrowaniu iglica kościoła w dalszym ciągu jest punktem ogniskowym, lecz para turystów widoczna w centrum wyróżnia się jako drugorzędne ognisko, częściowo wskutek działania reguły trójpodziału, o której wspomniałem w rozdziale 1. Choć wieżyczka nie znajduje się już w centrum kompozycji, linie perspektywy biegnące wzdłuż dachów budynków, krawędzi jezdni oraz żółta linia na drodze wskazują właśnie na nią. Umieszczenie punktu ogniskowego z dala od środka fotografii tworzy bardziej intrygującą kompozycję i pomaga uzyskać poczucie równowagi.

Rysunek 5.15. Charleston po wykadrowaniu

Możemy też wycinać obrazy w sposób niekonwencjonalny, żeby oddać emocje, pokazać interesujący punkt widzenia lub zmienić przesłanie zdjęcia. Rysunek 5.16 prezentuje zdjęcie gitarzysty, wycięte tak, że widać jedynie wąski pasek z gitarą. W rezultacie podkreślone zostało wrażenie ruchu właściwe muzycznemu przedstawieniu oraz anonimowość, co pozwala widzowi łatwiej identyfikować się z obrazem.

Obraz

Rysunek 5.16. Wąskie przycięcie zdjęcia akcentuje emocje i ruch

Przycinając fotografię wąsko, należy wziąć pod uwagę jej początkową wielkość. Możesz chcieć wyciąć bardzo mały fragment zdjęcia, po czym go powiększyć, lecz jeśli miało ono niską rozdzielczość, na powstałym obrazie pojawią się piksele120. Na szczęście obrazy w sieci mogą mieć o wiele mniejszą rozdzielczość niż te potrzebne w poligrafii. Dobrze by jednak było, gdybyś zawsze się upewnił, czy po edycji Twoje zdjęcie nie jest zbyt rozmazane bądź ziarniste. Zdjęcia nie zawsze muszą być prostokątne. Ich kadrowanie wcale nie musi ograniczać się do zwykłego przycinania brzegów. Fotografię z rysunku 5.17 wykonałem z brzegu rzeki Saludy. Lubię to zdjęcie w jego czystej, „niepokrojonej” formie tak bardzo, że ustawiłem je na tło pulpitu mojego komputera. No, ale spróbujmy wyjść poza schemat.

Rysunek 5.17. Rzeka Saluda

Niekonwencjonalne metody kadrowania mogą wyglądać nieprofesjonalnie, ale tylko wówczas, jeśli wykorzystuje się je bez namysłu — we właściwych rękach mogą stworzyć porażające efekty. Załóżmy, że zaprojektowałem witrynę centrum wypoczynkowego wypożyczającego kajaki. Mógłbym użyć na niej obrazu otrzymanego techniką z rysunku 5.18. 120

Chyba że grasz w serialu Kryminalne zagadki Las Vegas.

187

188

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 5.18. Fotografia rzeki wycięta wokół postaci kajakarzy

Użyłem tutaj wektorowego obrazu pary kajakarzy jako maski, wokół której wykadrowałem zdjęcie rzeki Saludy. W kontekście programów do edycji grafiki maską nazywamy po prostu kształt ram okna, przez które widać dany obraz. Gdy na fotografię rzeki nałożyłem maskę kajakarzy, stworzyłem górną część grafiki, którą możesz podziwiać na rysunku 5.18. Odwróciwszy maskę o 180o, nałożyłem ją na zabarwiony na niebiesko duplikat zdjęcia, wskutek czego otrzymałem odbicie w wodzie. Grafika ta pasowałaby idealnie do wypożyczalni kajaków. Co jednak, jeśli zostałem zatrudniony przez lokalne centrum turystyczne? Taki klient nie chciałby, żeby rzekę kojarzono wyłącznie z kajakarstwem. To równie dobre miejsce na pływanie, łowienie ryb czy piesze wycieczki. Używając napisu „RIVER” w roli maski na rysunku 5.19 nie tylko sprawiłem, że cała kompozycja jest bardziej wszechstronna, ale również nadałem jej świeży, pomysłowy wygląd.

Rysunek 5.19. Grafika wykonana za pomocą maski tekstowej

Obraz

Ostatnia technika kadrowania polega na usunięciu elementu obrazu ze zdjęcia. Wycinaną część nazywamy knockoutem. Knockoutu można użyć bez tła, nanieść go na inny obraz lub nawet wielokrotnie skopiować i obrócić, formując kształt kwiatu. OK, może przesadziłem z ostatnim przykładem widocznym na rysunku 5.20, ale sam przyznasz, że bananowy kwiat wygląda całkiem fajnie.

Rysunek 5.20. Przykłady knockoutu: banany bez tła, banany podniebne i bananowy kwiat

Jak widać, zwykłe wycinanie oferuje nieskończone możliwości tworzenia wyjątkowych obrazów i innych elementów projektu. Jedyne, co może Cię ograniczyć, to Twoja własna wyobraźnia oraz umiejętność obsługi Photoshopa.

Transformacje obrazu w Photoshopie Na rynku jest dostępnych wiele programów do obróbki graficznej, lecz sam od wielu lat korzystam z Adobe Photoshopa. Muszę przyznać, że pomimo wygórowanej ceny i skomplikowanej obsługi bez tej aplikacji jakość mojej pracy znacznie by się obniżyła. Wśród innych zestawów tego typu Photoshop jest cyfrowym odpowiednikiem scyzoryka, wyznaczając standard dla konkurencji. Może inne narzędzia są tańsze, lecz zawierają one jedynie ostrze, pilnik bądź plastikową wykałaczkę. W porównaniu z nimi Photoshop tnie, kroi i tworzy przekonujące obrazy akwarelowe w ciągu milisekund. Na kolejnych stronach wielokrotnie odwołam się do tego programu. Jednakże większość poruszonych przeze mnie kwestii będzie dotyczyć prostych operacji i funkcji, które udostępnia również wiele innych aplikacji tego typu (w ten czy inny sposób). Można więc powiedzieć, że w tym podrozdziale zajmę się tak naprawdę bardziej dostosowywaniem obrazu niż kryptoreklamą jednej firmy. Gdy do robienia zdjęć używam własnego aparatu, staram się wziąć pod uwagę takie kwestie, jak kompozycja czy oświetlenie. Nie jestem jednak profesjonalistą, więc większość moich zdjęć nie wychodzi tak dobrze, jak bym tego chciał. Te „niedoskonałe” fotografie trafiają do mojego osobistego albumu, by przypominać mi o miejscach i wydarzeniach. Jeśli jednak zdjęcia, które wykonałem, mają pojawić się w moim projekcie, muszę wprowadzić w nich pewne zmiany, nim będę mógł je zaprezentować klientowi. Jako niezbędne minimum stosuję regulację jasności, kontrastu oraz saturację zdjęcia i — oczywiście — kadruję jego elementy. Fotografia z rysunku 5.21 pochodzi z mojego prywatnego aparatu cyfrowego. To zdjęcie wyjątkowej rzeźby ściennej przy wejściu do posiadłości Biltmore Estate w Asheville w Karolinie Północnej, które wykonałem podczas zeszłych wakacji. Jest to dobra fotografia, ale nie można by

189

190

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

jej zastosować tak od razu w profesjonalnym projekcie. Nawet jako zdjęcie w treści strony zawiera ona zbyt wiele punktów ogniskowych, przez co brakuje jej równowagi.

Rysunek 5.21. Kolejne „surowe” zdjęcie — wejście do posiadłości Biltmore Estate

Pierwszym krokiem jest wycięcie fotografii w taki sposób, żeby uwidocznić te jej części, które pragnę zaakcentować. W tym przypadku chcę pokazać rzeźbę człowieka po prawej stronie drzwi. Powiedzmy, że mam użyć tego zdjęcia w artykule o Biltmore Estate. Chciałbym przybliżyć samą rzeźbę z rysunku 5.22, ale tak, żeby pozbyć się okapu bezpośrednio nad głową postaci. Mógłbym to osiągnąć, prostokątnie wycinając niepotrzebne części, lecz jego fragmenty nadal byłyby widoczne. Żeby uzyskać pożądany efekt, w Photoshopie potrzebuję dwóch warstw: Rysunek 5.22. Zdjęcie rzeźby po pierwszym etapie kadrowania jednej z wyizolowaną rzeźbą, a drugiej z tłem. Pracę zaczynam od wykonania kopii fotografii początkowej na kilku warstwach, zachowując jedną niezmienioną wersję, w razie gdybym musiał się cofnąć do punktu startowego. Z najwyższej warstwy ostrożnie wycinam knockout, wykorzystując zbliżenie i narzędzie Lasso do wyznaczenia obrysu rzeźby i usunięcia niepotrzebnych elementów. Tło utworzyłem, przeciągając na jego prostokątną warstwę maskę zdefiniowaną za pomocą narzędzia Rounded Rectangle (Zaokrąglony prostokąt).

Obraz

Rysunek 5.23. Fotografia Biltmore podwójnie przycięta dwoma warstwami

Powstały obraz, widoczny na rysunku 5.23, mimo że wygląda nieźle, przydałoby się trochę poprawić. Pierwszą rzeczą, która mnie w nim odstręcza, są zabrudzone miejsca na ramionach i tarczy. Nie usunę ich całkowicie, ale mogę zmniejszyć kontrast w tych obszarach. Tu przydadzą się narzędzia Dodge (Rozjaśnianie) i Burn (Ściemnij). Narzędzia Dodge (Rozjaśnianie) używa się jak pędzla, który — zgodnie z nazwą — rozjaśnia część obrazu, jaką klikniesz. Narzędzie Burn (Ściemnij) działa odwrotnie. Korzystając z nich obu, będziesz mógł w dowolny sposób wpływać na zaciemnienia i jasność zdjęcia, nadając mu spójne cieniowanie i kontrast.

Nadszedł czas, by wyregulować jasność i kontrast całych dwóch warstw. Opcje pozwalające na to są dostępne w praktycznie każdym programie do edycji grafiki. W Photoshopie dostaniesz się do nich, wybierając z menu u góry okna Image/Adjustments/Brightness/Contrast (Obraz/Dopasowania/Jasność/Kontrast). Okno opcji widać na rysunku 5.24.

Rysunek 5.24. Okno kontroli jasności i kontrastu

W rozdziale 2. dowiedziałeś się, że jasność grafiki opisuje, jak ciemny bądź jasny jest dany obraz. Kontrastem z kolei nazywamy różnicę między jasnymi a ciemnymi partiami tej samej grafiki. Podkręcenie jasności i kontrastu rzeźby o kilka stopni oraz zmniejszenie tych samych wartości dla tła nada całej kompozycji charakteru. Po dostosowaniu jasności i kontrastu przechodzę do kolejnego kroku — regulacji barwy i nasycenia. Okno Hue/Saturation (Barwa/Nasycenie), zaprezentowane na rysunku 5.25, otworzysz, wybierając z opcji menu Image/Adjustments/Hue/Saturation (Obraz/Dopasowania/Barwa/Nasycenie). Suwak barwy reguluje kolor obrazu. Przesuwając go w prawo lub w lewo, możesz zmienić barwy grafiki, tak żeby była bardziej niebieska lub czerwona albo pomarańczowa itd. Odcienie na tym zdjęciu współgrają ze sobą całkiem nieźle, więc nie będę za mocno zmieniał barw — czasem jednak jest to konieczne, zwłaszcza jeśli chcesz zmienić ogólny kolor obrazu. Suwak nasycenia

191

192

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

wpływa na intensywność barw na zdjęciu. Gdybyś je zupełnie wyłączył, otrzymałbyś zdjęcie w kolorach szarości; z kolei gdybyś przesunął suwak maksymalnie w prawo, kolory stałyby się dużo żywsze i bardziej dramatyczne. Ja zwiększyłem nasycenie rzeźby i zmniejszyłem intensywność tła. To pozwoli zmniejszyć kontrast i „wypchnie” zdjęcie na wierzch.

Rysunek 5.25. Okno Hue/Saturation (Barwa/Nasycenie) w Photoshopie

Nasza fotografia jest prawie gotowa! Zwróć uwagę, jak rzeźba na rysunku 5.26 wyróżnia się z tła, popatrz także na jej równomierne cieniowanie. Takie detale są kluczem do uzyskania uderzającego efektu. Żeby podkreślić te niuanse trochę bardziej, nałożyłem czarne obramowanie wokół warstwy tła, wybierając z menu kolejno Layer/Layer Style/Stroke (Warstwa/Styl warstwy/Obrys). Innym sposobem na radykalną zmianę wyglądu Twojej fotografii, oprócz wyregulowania jej jasności, kontrastu i saturacji, jest skorzystanie z filtrów. W fotografii termin filtr oznacza rodzaj przystawki do obiektywu aparatu, która wpływa na wygląd zdjęcia. Filtrów

Rysunek 5.26. Ostateczna wersja fotografii po dodaniu wszystkich poprawek

Obraz

używa się, by uzyskać bogatszą paletę barw, zniwelować wpływ złego oświetlenia czy sprawić, że obraz będzie wyglądał cieplej lub chłodniej. W myśl tych zasad działają też filtry w Photoshopie, choć potrafią one znacznie więcej niż zwykła przystawka do aparatu. Korzysta się z nich do stworzenia artystycznych efektów, zniekształcania obrazów, dodania tekstur i wielu innych rzeczy. Photoshop ma domyślnie wbudowanych wiele filtrów. Niektóre z nich są bardzo użyteczne, inne… cóż, są dla mnie mniej przydatne, lecz każdy znajdzie tu coś dla siebie. Żeby ukazać Ci ich możliwości, otworzyłem w Photoshopie zdjęcie orchidei i nałożyłem na nie kilka standardowych filtrów. Rysunek 5.27 prezentuje rezultaty moich eksperymentów.

Rysunek 5.27. Filtry Photoshopa w akcji

Pokazałem tu zaledwie czubek góry lodowej możliwości filtrów w Photoshopie. Co ja mówię, nawet nie czubek, a zaledwie okruch z czubka. W tym programie możesz zrobić tak wiele rzeczy, że najlepszym sposobem nauki jego możliwości jest eksperymentowanie. Dostępne w sieci tutoriale przyspieszą cały proces, lecz nie ma lepszego nauczyciela niż własne doświadczenie. Otwórz dowolną grafikę i przetestuj, co każdy przycisk, lista wyborów, opcja w menu czy filtr z nią zrobią. Gdy już skończysz z jednym obrazem, otwórz kolejny i zacznij od początku.

193

194

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Format plików i rozdzielczość Obojętnie, którego programu do edycji grafiki użyjesz, przygotowując grafiki na potrzeby sieci, musisz znać podstawowe typy plików powszechnie tam używanych oraz kilka fundamentalnych zasad ich używania. Obecnie przeglądarki internetowe wspierają trzy rozszerzenia graficzne: JPEG, GIF oraz PNG. Wybór właściwego formatu tak naprawdę sprowadza się do określenia, czy bardziej zależy Ci na jakości grafiki, czy na jej jak najmniejszych rozmiarach. JPEG JPEG (.jpg) to nazwa formatu kompresji obrazu opracowanego przez Joint Photographic Experts Group (Połączona Grupa Ekspertów Fotograficznych) właśnie w celu przechowywania fotografii. W odróżnieniu od obrazów typu GIF i PNG, 24-bitowe pliki JPEG charakteryzują się względnie małym rozmiarem. Choć w teorii nie ma ograniczeń co do liczby kolorów, jakie pliki te mogą wyświetlić, jest to format stratny, toteż w zależności od użytego stopnia kompresji na obrazie mogą się pojawić różne zniekształcenia. Dlatego też przy zapisywaniu pliku .jpg będziesz musiał wziąć to pod uwagę. Patrząc na rysunek 5.28, sam możesz się przekonać, że choć grafika JPEG pomoże co prawda znacznie zredukować czas ładowania strony, to jeśli przesadzisz z jej kompresją, tak jak zrobiłem to ja z truskawką najdalej po prawej, ostateczny rezultat może być mało apetyczny.

Rysunek 5.28. To samo zdjęcie truskawki zapisane w trzech plikach JPEG o różnym stopniu kompresji

GIF GIF (ang. Graphics Interchange Format) jest ośmiobitowym formatem, w którym kompresja zależy od liczby kolorów w obrazie. Choć współczynnik kompresji w plikach GIF jest dobry, format ten obsługuje tylko góra 256 kolorów, przez co nie nadaje się do zapisu fotografii. Posiada on dwie przydatne cechy — wspiera przezroczystość (patrz rysunek 5.29) i animację. W późnych latach 90. XX wieku UNISYS (firma, która opracowała algorytmy kompresji wykorzystywane w plikach GIF) żądał uznania formatu GIF za swoją własność i domagał się opłat licencyjnych od przedsiębiorstw, których programy tworzyły pliki tego typu. W odpowiedzi na to roszczenie — oraz na ograniczenie do 256 kolorów — powstał format PNG. Mimo że plików GIF wciąż powszechnie używa się w sieci, obecnie zaleca się stosowanie formatu PNG w roli zamiennika.

Obraz

Rysunek 5.29. Przezroczysty plik GIF i 24-bitowy obraz PNG, nałożone na różne tła

PNG Format PNG (ang. Portable Networks Graphics) został opracowany przez konsorcjum W3C jako alternatywa dla GIF. Algorytmy bezstratnej kompresji w nim użyte działają podobnie do tych w plikach GIF, przynajmniej pod tym względem, iż obrazy z małą liczbą kolorów mają najmniejsze rozmiary. Obraz PNG może być zachowany w dwóch odmianach: 8-bitowej i 24-bitowej. Oba te warianty wspierają przezroczystość, lecz tylko 24-bitowe pliki PNG osiągają ją dzięki implementacji tzw. kanału alfa, obok zwykle stosowanych kanałów — czerwonego, zielonego i niebieskiego. Oznacza to, że każdy piksel obrazu PNG opisuje nawet do 256 poziomów wartości krycia. Różnicę tę ilustruje rysunek 5.29 — zwróć uwagę na to, jak tło prześwituje przez grafikę PNG, podczas gdy w formacie GIF tło jest albo nieprzejrzyste, albo całkowicie przezroczyste. Przezroczystość 8-bitowych plików PNG jest taka, jak w obrazie GIF z rysunku 5.29 — albo jest, albo jej nie ma. Wynika z tego, że jeżeli chcesz umieścić przezroczystą grafikę PNG na kolorowym tle lub teksturze, będziesz musiał zmodyfikować ją tak, aby nieprzejrzyste krawędzie pasowały do dalszego planu. Mam nadzieję, że gdy czytasz te słowa, zaniechano już praktyki optymalizacji witryn pod Internet Explorer 6 — wiedz jednak, że wśród przeglądarek Microsoftu 24-bitowa przezroczystość jest wspierana dopiero przez Internet Explorer 7 i jego nowsze wersje. Oprócz problemów z optymalizacją kolejnym powodem wykorzystania 8-bitowych plików PNG jest ich rozmiar. 24-bitowe pliki tego typu są nawet kilkukrotnie większe od swoich 8-bitowych kuzynów.

Pomysłowe stosowanie obrazów Gdy już zagnieździłeś swój obraz JPEG, PNG lub GIF na stronie, możesz się poczuć nieco rozczarowany jego prezentacją. Domyślnie obrazy umieszczone na stronie za pomocą znacznika HTML img wyrównują się z otaczającym je tekstem. Co więcej, obraz, będący hiperłączem, posiada mało atrakcyjną niebieską obwódkę. Nie wygląda to zbyt zachęcająco, ale w końcu od czego jest CSS? Co, jeśli chcesz umieścić swój obraz w ramce, takiej, jak zdjęcie na ścianie? Co, jeśli chcesz, by Twoja fotografia wyglądała jak wykonana polaroidem? A może chciałbyś, żeby prezentowała się

195

196

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

ona jak zdjęcie włożone do albumu? W każdym z tych scenariuszy masz do wyboru dwie opcje: możesz albo uzyskać pożądany efekt za pomocą programu graficznego, albo skorzystać z możliwości implementacji tła i obwódek w CSS.

Ulepszanie obrazu obrazem Może Ci się wydawać, że przerobienie obrazu tak, by zawierał ramki, różne krawędzie i był przezroczysty, to łatwa sprawa. Kilka minut pracy w Photoshopie i masz to, czego potrzebowałeś. Problem pojawia się w momencie, gdy musisz nadać podobny wygląd każdemu obrazowi na swojej stronie. Co w sytuacji, gdybyś musiał dodać nowe zdjęcie lub zamienić wszystkie fotografie? W obu scenariuszach to samo zadanie, nad którym spędziłbyś góra kilka minut, posługując się językiem HTML, zajęłoby Ci co najmniej pół godziny, gdybyś pracował w programie graficznym. Dodatkowo robiąc tak, negujesz sens stosowania semantycznych znaków, których celem jest odseparowanie stylu od treści. W końcu nawet najładniejszy obraz w treści strony jest tylko jej częścią. Portfolio graficzki i projektantki stron Wing Cheng121 po wyłączeniu pliku CSS wygląda po prostu jak pusta witryna wypełniona losowymi obrazami, co zresztą widać na rysunku 5.30.

Rysunek 5.30. Portfolio Wing Cheng z wyłączonymi arkuszami CSS

121

http://wingcheng.com/

Obraz

Spójrz teraz na tę samą stronę z włączonymi arkuszami stylów, widoczną na rysunku 5.31. Wing używa ich w zabawny, kapryśny i pomysłowy sposób. Kąty, pod którymi papier załamuje się w obie strony, sprawiają, że wydaje się on pojedynczym, nieprzerwanym arkuszem składanym w harmonijkę. Każde z zagięć poniżej strony „about”, którą możesz zobaczyć na zdjęciu, prezentuje inną pozycję w portfolio. Kilka pozycji składa się na pojedynczą kategorię, a cała strona kończy się na formularzu kontaktowym i tylnej okładce skórzanego szkicownika.

Rysunek 5.31. Portfolio z twórczością Wing Cheng

Gdyby Wing skorzystała z naprzemiennych tekstur w tle każdej pozycji na stronie, jej rozmiar byłby dużo większy, przez co ładowałaby się ona całe wieki. Zamiast tego artystka użyła dwóch różnych tekstur papieru zapisanych w 24-bitowych plikach PNG. Są one tłem elementu div każdej z pozycji w portfolio. Gdyby Wing chciała dodać nową pozycję na stronie, wystarczy, że przemieści obrazy tła w CSS, zamiast ponownie implementować te same obrazy w całym portfolio. W tym przykładzie obrazy portfolio stanowiły integralną część treści, których znaczenie podkreślały trójwymiarowe tła ustawione za nimi. Przeciwieństwo tej techniki, czyli nakładanie elementów dekoracyjnych nad obrazami treści, może być równie efektowne. Widoczna na rysunku 5.32 stopka na witrynie Komodo Media122 innego projektanta — Rogiego Kinga, zawiera sekcję, w której wyświetlane są ostatnio odtwarzane albumy. By strzec prywatności Rogiego, wymieniłem tytuły płyt na inne, bardziej „losowe”.

122

http://www.komodomedia.com/

197

198

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Rysunek 5.32. Lista albumów muzycznych, których Rogie King NIE słuchał w ostatnim czasie

Tym, co imponuje mi w liście Rogiego, jest fakt, iż obrazy wyświetlone na stronie znalazły się na niej za sprawą czytnika RSS. Widoczne płyty CD są 24-bitowymi plikami PNG, które umieszczono (z wykorzystaniem właściwości position: absolute) ponad obrazami, jako tło linku do strony każdego albumu. Rogie wyjaśnił sposób implementacji tej techniki na swoim blogu w artykule Sexy Music Album Overlays123 i opracował wersję demonstracyjną zaprezentowaną na rysunku 5.33.

Rysunek 5.33. Strona demonstracyjna „albumu nakładkowego”, ściągnięta z blogu Rogiego

123

http://www.komodomedia.com/blog/2009/03/sexy-music-album-overlays/

Obraz

Podkręcanie obrazów za pomocą CSS Wprowadzenie tła lub nakładki to wspaniały sposób na nadanie obrazom unikalnego, acz jednolitego wyglądu. Oczywiście nie wszystkie efekty CSS wymagają dodatkowych grafik. Choćby zwykłe obramowanie oferuje całe mnóstwo efektów do wyboru. Pewnie już wiesz, że w standardowym CSS2 określają je trzy grupy wartości — width, style i color — które można zdefiniować indywidualnie, korzystając z właściwości border-width, border-style i bordercolor, lub wspólnie — za pomocą właściwości skrótowej border. Właściwości border-width i border-color odpowiadają, jak łatwo zgadnąć, za grubość linii oraz jej barwę. Border-width definiujemy w jednostkach CSS (takich, jak 1px czy 0.5em) lub za pomocą słów-kluczy (thin, medium lub thick). Natomiast właściwość border-color przyjmuje wartości koloru w systemie szesnastkowym124. Dopiero przy definiowaniu właściwości border-style twórcy CSS popisali się inwencją. Dzięki temu mamy do wyboru aż osiem stylów obramowania, zdefiniowanych następującymi słowamikluczami: dotted, dashed, solid, double, groove, ridge, inset oraz outset — do których dochodzą też niewidzialne wartości none i hidden oraz inherit, służąca do dziedziczenia stylu po elemencie nadrzędnym. Efekt ich działania możesz podziwiać na rysunku 5.34.

Rysunek 5.34. Osiem stylów obramowania widocznych w czterech różnych przeglądarkach

Nawet pomimo niejednolitego wyświetlania w różnych przeglądarkach każdy z tych stylów wyraźnie się odróżnia i przynajmniej w teorii jest użyteczny. Piszę: „w teorii”, ponieważ zależnie od sposobu wykorzystania powstałe ramy mogą prezentować się naprawdę okropnie. Tak jak dobra typografia winna dopełniać tekst, tak i dobre obramowanie powinno stanowić jedynie dopełnienie elementu, który otacza. Zbyt duże bądź zbyt mocno kontrastujące ramy będą odciągać uwagę widza od obrazu, do którego przecież chcesz ją przyciągnąć. Możesz w pełni wykorzystać potencjał ohydnych ram, definiując kompletnie różne krawędzie po każdej stronie elementu. Określenie tych wartości oddzielnie może się przydać, jeśli chcesz uzyskać ramę po jednej stronie Rysunek 5.35. Przerażające ramy w CSS komponentu lub zmienić jej kolor. Jednakże mieszanie różnych stylów, barw i grubości linii wokół tego samego bloku nie doprowadzi do niczego dobrego. Jak widać na rysunku 5.35, w rezultacie może powstać coś naprawdę koszmarnego (choć muszę przyznać, że wygląd samej zabawki jeszcze bardziej to podkreśla). 124

Poprawnymi ustawieniami są także: kolory w formacie RGB, RGBA, HSL, HSLA, nazwa koloru w języku angielskim oraz wartości transparent i inherit — przyp. red.

199

200

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Oto deklaracja CSS, za pomocą której zdefiniowałem te okropne ramy: img.uglybox { border-top: 20px groove #ff1100; border-right: 16px dotted #66ee33; border-bottom: 8px outset #00aaff; border-left: 12px double #ff00ff; }

Na szczęście nakładanie różnych właściwości obramowania nie musi kończyć się katastrofą. Niesamowitej mocy ram można użyć równie dobrze do czynienia dobra, jak i zła. Jednym z efektów, który projektanci często wykorzystują w swoich kompozycjach, jest subtelne rzutowanie cienia. W rozdziale 3. wspomniałem, że można w tym celu użyć właściwości CSS3 drop-shadow, lecz zdarza się czasem, że efekt, który pragniesz uzyskać, ma być subtelniejszy — taki, jak na obrazach w treści witryny Veerle Pieters125 na rysunku 5.36. Ciemna obwódka wokół obrazu to tak naprawdę tło, widoczne wskutek nadania mu wypełnienia (padding). Prawdziwą ramą są cienkie, jasne, jednopikselowe kreski u dołu i po prawej stronie grafiki. Ten bardzo delikatny efekt sprawia, że cały komponent wydaje się wchodzić w głąb strony.

Rysunek 5.36. Subtelne wklęsłe obramowanie obrazu w treści strony, stworzone za pomocą stylów CSS, w samouczku o tworzeniu wklęsłych ram w Photoshopie

125

http://veerle.duoh.com/

Obraz

Wiele z technik, które opisałem do tej pory, jest użytecznych, ale dopiero wraz z rozpowszechnieniem się CSS3 będziemy mogli sprawić, że nasze obrazy będą prezentować się w dokumencie HTML naprawdę wyjątkowo. Świetnym przykładem jest demonstracja strony dostępna w artykule Going Nuts with CSS3 Transitions Natalie Downe, zamieszczonym na witrynie 24 ways126. W demo, widocznym na rysunku 5.37, wykorzystano animacje, rzutowanie cienia, obrót i zmianę skali — po to, by zwykła galeria zdjęć prezentowała się niczym fotografie z polaroidu nonszalancko rzucone na stół.

Rysunek 5.37. Wykonane w CSS3 „fotografie” z podpisami

Żyjemy w bardzo ekscytujących czasach — szczególnie dla web designerów i web deweloperów. Przykład powyżej ilustruje jedynie malutki ułamek opcji dostępnych w CSS3. By zobaczyć pełną listę właściwości obramowania, radzę udać się na witrynę The Standardista i przeczytać artykuł Border Properties, Values and Browser Support Estelle Weyl127. Celem tych wszystkich graficznych właściwości jest umożliwienie nam przykucia uwagi użytkownika do treści, bez względu na to, czy będziemy stosować pomysłowe nakładki, proste obramowania, czy nowe funkcje CSS3. Najważniejsze jest, by pamiętać, że ramki i inne efekty powinny wspierać obrazy, które otaczają, a nie je wypierać. Unikaj używania efektów przyciągających więcej uwagi od grafik, które mają jedynie akcentować.

126

http://24ways.org/2009/going-nuts-with-css-transitions

127

http://www.standardista.com/css3/css3-border-properties

201

202

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Praktyczne wykorzystanie: dobrym drukiem W poprzednim rozdziale widzieliśmy coś, co wyglądało na praktycznie skończony projekt witryny Southern Savers po przebudowie. Matthew Smith zakończył pracę nad stroną główną, a jego współpracownik Kevin Smith zabrał się za budowę strony i zaimplementował na niej krój Fago Office Serif, korzystając z techniki Cufón. W rzeczywistości przed zespołem Squared Eye jeszcze mnóstwo pracy. Choć większość postów i kilka podstawowych stron na witrynie Southern Savers miało wykorzystywać standardowy szablon, który widzieliśmy w rozdziale 4., Jenny nalegała, żeby niektóre z nich zaprojektowano od podstaw. Jenny spędza dużo czasu, prowadząc warsztaty oszczędzania i wyjaśniając, w jaki sposób korzystać z rabatowych kuponów. Dodatkowo na swojej poprzedniej witrynie traciła mnóstwo czasu na pisanie odpowiedzi na maile i komentarze, w których zadawano wciąż te same pytania. Było dla niej jasne, że zwykła strona z najczęściej zadawanymi pytaniami i odpowiedziami nie rozwiąże problemu. Strony poświęcone instruktażowi musiały być radosne, przykuwające wzrok i łatwe do zrozumienia. W skrócie — potrzebowały obrazów! Ta integralna część całej witryny nie była wynikiem kaprysu — w rzeczywistości była w planach od momentu, gdy Emily Smith zabrała się za pracę nad architekturą informacji, o czym wspomniałem jeszcze w rozdziale 1. Jedną z podstawowych koncepcji, którą Jenny musi wyjaśniać odwiedzającym jej witrynę, są cykle sprzedaży w supermarketach. Większość sklepów, jak nam wyjaśniła, sprzedaje dany produkt po najniższych cenach w odstępach co sześć do ośmiu tygodni. Aby to ukazać, Emily zawarła próbny szkic wykresu w swoim szkielecie witryny. Chciała go umieścić w sekcji „learn to coupon” (rysunek 5.38).

Rysunek 5.38. Wykres cykli sprzedaży w supermarketach — szkic Emily

Na początku tego rozdziału wyjaśniłem, że zanim wybierzesz dane zdjęcie do swojego projektu, powinieneś zadać sobie następujące pytania: „Czy to odpowiedni obraz?”, „Czy jest intrygujący?”, „Czy jest atrakcyjny?”. W tym przypadku, choć Matthew wiedział, że sam będzie tworzył ostateczne grafiki na stronę, także zadał sobie te trzy pytania. Postawił on sobie za cel przykucie uwagi widza i nauczenie go idei, a nie tylko pokazanie wykresu zmian cen jogurtu i płatków w czasie. Dlatego też usunął ze strony wszelkie etykietki z cenami i uogólnił wykres, przedstawiając wskaźnik sprzedaży w postaci pojedynczej skaczącej linii. Łącząc te koncepcje z wysokim kontrastem i dopełnieniowymi kolorami, zapewnił ostatecznej grafice, widocznej na rysunku 5.39, rozpoznawalność.

Obraz

Rysunek 5.39. Wykres cykli sprzedaży według Matthew

Kolejny kluczowy element graficzny znajduje się u dołu tej samej strony. Jest nim podsumowanie krok po kroku rekomendowanych przez Jenny praktyk oszczędzania. I ten obszar został opracowany jeszcze w trakcie procesu kreowania architektury informacji przez Emily. Karteczkowa wersja pochodząca ze szkieletu witryny, widoczna na rysunku 5.40, oddaje mniej więcej, jak ta sekcja powinna się prezentować, lecz trzeba będzie tu jeszcze wziąć pod uwagę styl, kolor i teksturę całej witryny.

Rysunek 5.40. Szkielet schematu oszczędzania na samoprzylepnych karteczkach

203

204

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

W celu prawidłowego wkomponowania tego schematu Matthew opracował podstawowe ilustracje oparte na szkicach Emily, wykorzystując turkusowo-niebieski schemat kolorów z rozdziału 2. Każdą z tych ilustracji umieścił na tle kół i ponumerował, tak by etykiety z cyframi układały się zgodnie z geometryczną krzywą nagłówka i liniami z wykresu sprzedaży. Ostateczny efekt pracy możesz podziwiać na rysunku 5.41.

Rysunek 5.41. Rysunek ilustrujący ideę okresowych zakupów z kuponami zniżkowymi

Realizacja pomysłu na obraz tego typu to tylko kwestia właściwego wykorzystania zasad projektowania, o których mówiłem, i zestawienia ich z treścią. Bez solidnej treści na początku Emily nie byłaby w stanie opracować szkieletu witryny, a Matthew nie miałby materiałów, z którymi mógłby pracować przy ostatnich grafikach. Tym, co wyróżnia nową wersję Southern Savers wśród innych blogów poświęconych tej samej tematyce czy nawet wśród pełnoprawnych witryn, jest profesjonalne podejście do projektowania oraz przezorność jej twórców.

Obraz

Naprzód, w drogę! Jedną z najlepszych rzeczy w projektowaniu na potrzeby sieci jest poczucie wspólnoty i współpraca między profesjonalistami. Nie ma znaczenia, czy znajdziesz ich podczas przeglądania komentarzy na blogu, Twitterze, Dribble128, czy na spotkaniach lokalnych grup pasjonatów — zawsze znajdą się utalentowani ludzie gotowi podzielić się swoimi opiniami, ulubionymi technikami i doświadczeniem. Społeczność projektantów jest bezcennym źródłem wiedzy — lecz może się też okazać kulą u nogi. Od zawsze poszukuję coraz to nowych źródeł natchnienia, więc mam świadomość tego, że sam fakt, iż w sieci jest tak wiele pomysłów i portfolio autorytetów projektowania, sprawia, że łatwo jest skorzystać z gotowych rozwiązań. Samo w sobie nie jest to niczym złym, lecz gdyby każdy web designer inspirował się dziełami innych projektantów, skończyłoby się na tym, że wszyscy używalibyśmy raz po raz jednej i tej samej kompozycji. Prawdą jest, że zasady projektowania i wskazówki, które omówiłem, pomogą Ci podejmować praktyczne decyzje oraz poprawią estetykę Twego dzieła, lecz pamiętaj — nic nie zastąpi osobowości i oryginalnego pomysłu. Najważniejsze cechy, które sam wnosisz w każdy projekt, to właśnie Twój charakter, doświadczenia i zainteresowania. Te trzy źródła inspiracji powinny stanowić fundament Twojej pracy. Gdyby każdy projektant spędzał mniej czasu na próbach zastosowania najnowszych trendów designerskich i skupił się na definiowaniu własnego stylu, sieć byłaby o wiele ciekawszym miejscem. Chciałbym Ci poradzić, jak określić swój styl, ale problem polega na tym, że sam wciąż usiłuję poznać, czym jest on dla mnie. Życzę Ci szczęścia w Twoich przyszłych staraniach i mam nadzieję, że książka ta okazała się pomocna i wsparła Cię w pierwszych krokach na ścieżce kariery web designera — obojętnie, profesjonalisty czy hobbysty.

128

http://dribbble.com/

205

206

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Skorowidz @font-face, 139 960 Grid System, 29

A achromatyczny schemat kolorów, 74 Adobe Kuler, 89 analogiczny schemat kolorów, 75 przykłady, 76, 77 architektura informacji, 20 ascender, Patrz wydłużenie górne ASCII art, 156

B background-attachment, 115 background-color, 113, 114 background-image, 114 background-position, 115 background-repeat, 114 barwowa temperatura, 66 barwy chłodne, 66 ciepłe, 66 nasycenie, 67 nieharmonijne, 82 pochodne, 69 podstawowe, 69 saturacja, 67 trzeciorzędowe, 69 baseline, Patrz linia bazowa BBS, 156 belka poprzeczna, 142 beznawigacyjny, styl, 46 bezszeryfowe, kroje, 151, 152 biała przestrzeń, 26 biel, 64 blok z zawartością, 24 Bolton, Jin, 74 border-color, 199 border-radius, 104, 105 border-style, 199 border-width, 199 boska proporcja, Patrz złoty podział Boulton, Mark, 29 bowl, Patrz brzuszek brzuszek, 143

C call to action, Patrz wezwanie do działania cap height, Patrz wysokość wersalika chłodne barwy, 66 chromatyczna, wartość, 67 ciągłość, 38 cień, 110 ciepłe barwy, 66 Clipart, 184

CMYK, 68, 69, 70 koło barw, 70, 71 Color Scheme Designer 3, 88 Color Stream, 90, 91 Colour Contrast Check, 92 COLOURlovers, 90 counter, Patrz oko cross bar, Patrz belka poprzeczna cross stroke, Patrz kreska poprzeczna CSS Drive, witryna, 44 Cufón, 141 czcionka, 134 czerń, 65 czerwony, 60

D Darty, Jeremy, 33 dekoratywne, kroje, 157 DeSandro, David, 40 descender, Patrz wydłużenie dolne deseń, 113 Design Meltdown, witryna, 44 dingbaty, 159 przykłady, 159 display, kroje, 157 dopełnieniowy rozdzielony schemat kolorów, 83 dopełnieniowy schemat kolorów, 78 błędy, 81 przykłady, 79, 80, 81 Dreamstime, 178

E efekt równoczesnego kontrastu, 81 ekran rozdzielczość, 52 zrzuty, 45 ekspansywna stopka, 47 encja, 165 estetyka, 21

F faktura, Patrz tekstura fantasy, kroje, 157 figury, 101 a kompozycja, 106 formalne, 101 nieformalne, 102 nieregularne, 102 obrót, 105, 106 regularne, 101, 102 zaokrąglone wierzchołki, 103, 104 fiksacja, Patrz punkt ogniskowy fiolet, 63 Fisher, Meagan, 74 Flickr, 182, 183 font, 134, 148

Font Squirrel, witryna, 140 Fontdeck, 141 font-family, 136 fonty @font-face, 139 bezpieczne, 135 bezszeryfowe, 151, 152 darmowe galerie, 160 dekoratywne, 157 display, 157 fantasy, 157 formaty, 139 grupowanie, 148 hosting, 140 kolekcja, 136 komercyjne galerie, 160 novelty, 157 odręczne, 153 ogólna rodzina fontów, 136 przejściowe, 149 stałe, 154, 155, 156 stos, 136 symboliczne, Patrz dingbaty szeryfowe, 149 w sieci, 135 wielkość, 163 wybór, 161, 162, 163 wysokość linii, 163 zastępowanie obrazem, 137, 138 format plików GIF, 194 JPEG, 194 PNG, 195 fotografia filtry, 192, 193 stockowa, 174, 176 Frost, Robert, 64

G generic font family, Patrz ogólna rodzina fontów GIF, 194 głębia, 108 Google Font Directory, 141 Google ganking, Patrz Google grabież Google grabież, 182

H Hire an Illustrator!, witryna, 181 Hoang, Kha, 48 hotlinkowanie, 183, 184

I interpunkcja, 164 iStockphoto, 177, 178 izolacja, 39

Skorowidz

J jedność, 35 JPEG, 194 justowanie, 146

K kadrowanie, 185, 186, 187, 188, 189 kerning, 144, 145 klient pytania, 19, 20 spotkanie, 18, 19 wizytówki, 17 knockout, 189 kolor, 59 odcień, 67 psychologia, 59, 66 schematy, 71 symbolika, 60 teoria, 68 wartość chromatyczna, 67 wyświetlanie przez ekran, 68 koło barw, 68, 69, 71 kompozycja, 17 centrum, 38 cień, 110 figury, 106 perspektywa, 108 proporcje, 109 równowaga, 31 światło, 110 kontrast, 39 kreska poprzeczna, 142 kreskówkowy, styl, 125, 126 krój bezszeryfowy, 151, 152 dekoratywny, 157 display, 157 fantasy, 157 maszynowy, 155 monospace, 155 novelty, 157 nowoczesny, 149 odręczny, 153 stały, 154, 155, 156 szeryfowy, 149 terminologia, 142

L Lanham, David, 31 leading, 146 leg, Patrz noga letter-spacing, 145 lewokolumnowy, układ, 42 ligatura, 144 ligature, Patrz ligatura linia, 99, 100 bazowa, 142 środkowa, 143 ukośna, 99 litery, anatomia, 142

LittleSnapper, 45 logo, 25

M Marcotte, Ethan, 50 McNeil, Patrick, 63 mean line, Patrz linia środkowa media queries, Patrz zapytania medialne metoda Pharka, 138 midline, Patrz linia środkowa Miner, Wilson, 164 minimalizm, 48 moda, 11 Moll, Cameron, 29, 119 Mondrian, Piet, 26 monochromatyczny schemat kolorów, 72 przykłady, 72, 73 moz-border-radius, 104 Müller-Brockmann, Josef, 29 MyFonts, witryna, 158

N nasycenie barw, 67 nawigacja, 22, 25 niebieski, 62 nieharmonijne kolory, 82 noga, 143 noise texture, Patrz tekstura szumowa no-repeat, 114 nostalgiczny, styl, 118 notacja szesnastkowa, 86 porównanie z systemem dziesiętnym, 87 przykłady kolorów, 87 novelty, kroje, 157

O obrazy, 169, 170, 171 atrakcyjność, 172 Clipart, 184 CSS, 199 darmowe, 176 filtry, 192, 193 format plików, 194 Google, 182 hotlinkowanie, 183, 184 kadrowanie, 185, 186, 187, 188, 189 licencjonowane, 179 Photoshop, 189, 190, 191, 192, 193 rozdzielczość, 194 samodzielne wykonanie, 173 wolne od opłat autorskich, 177 zasady użycia, 175 zatrudnienie profesjonalisty, 180, 181 źródła, 173 obrót, 105, 106 odręczne, kroje, 153 ogólna rodzina fontów, 136 oko, 143

Old Book Illustrations, 177 Omnigraffle, 56 oszczędność linii, 107

P paleta a schemat kolorów, 86 tworzenie, 86 Pattern Tap, witryna, 44 perspektywa, 108 Pharka, metoda, 138 Photoshop, 189, 190, 191, 192, 193 Picasso, Pablo, 42 Pictaculous, 91, 92 piksel, 98 pismo, krój, 142 belka poprzeczna, 142 brzuszek, 143 kreska poprzeczna, 142 ligatura, 144 linia bazowa, 142 linia środkowa, 143 noga, 143 oko, 143 różnice, 148 szeryf, 142 trzon, 143 wydłużenie dolne, 143 wydłużenie górne, 143 wysokość średnia, 144 wysokość wersalika, 142 znak diakrytyczny, 143 zwieńczenie, 143 płynny układ strony, 49 wady i zalety, 50 pływający układ strony, Patrz płynny układ strony PNG, 195 podział harmoniczny, Patrz złoty podział pomarańczowy, 60 powtórzenia, 36 prawokolumnowy, układ, 43 pre, 156 projekt graficzny strony, 18 projektowanie, 18 implementacja, 20 pytania do klienta, 19, 20 spotkanie z klientami, 18, 19 zebranie informacji, 20 proporcje, 40, 109 przepływ, Patrz ciągłość przestrzeń negatywna, Patrz biała przestrzeń punkt, 98 punkt fiksacji, Patrz punkt ogniskowy punkt ogniskowy, 38

R reaktywny układ strony, 50 reguła trójpodziału, 27

207

208

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

repeat-x, 114 repeat-y, 114 RGB, model, 68 rozdzielczość ekranu, 52 rozmiar, zmiana, 48 równoczesnego kontrastu, efekt, 81 równowaga wizualna, 31 asymetryczna, 32, 34 formalna, Patrz równowaga wizualna symetryczna symetryczna, 31, 32

S saturacja, 67 Saviuk, Aleks, 171 schematy kolorów, 71 achromatyczny, 74 analogiczny, 75, 76, 77 dopełnieniowy, 78, 79, 80, 81 dopełnieniowy rozdzielony, 83 inne, 85 monochromatyczny, 72, 73 tetradyczny, 84 triada, 84 zmienianie, 74 serif, Patrz szeryf siatki, teoria, 26 sIFR, 141 slab-serif, Patrz szeryf egipski Smith, Nathan, 29 Southern Savers, projekt, 54 dawny szablon strony, 54 koncepcje rozwoju, 130 obrazy, 202 szkielet strony, 56, 57 ściana klimatów, 93 tekstury, 166 typografia, 166 ustalenie wymagań, 55 stały układ strony, 49 wady i zalety, 50 stały, krój, 154, 155, 156 stem, Patrz trzon Stock.XCHNG, 176, 177 stockowa fotografia, 174, 176 stopka, 25 ekspansywna, 47 stos fontów, 136 strona anatomia, 24 biała przestrzeń, 26 blok z zawartością, 24 estetyka, 21 logo, 25 nawigacja, 22, 25 podstawowe układy, 41 projekt graficzny, 18 stopka, 25 treść, 25 użyteczność, 21 zgięcie, 25

styl beznawigacyjny, 46 dobry, 21 kreskówkowy, 125, 126 minimalistyczny, 48 nostalgiczny, 118 symetria bilateralna, 32 horyzontalna, 31 radialna, 32 synteza addytywna, 68, 69 subtraktywna, 68, 69 szerokość płynna, 49 stała, 49 szeryf, 142, 149 egipski, 150 szeryfowe, kroje, 149 szesnastkowa, notacja, 86 porównanie z systemem dziesiętnym, 87 przykłady kolorów, 87

Ś ściana klimatów, 93 światło, 110

T tail, Patrz noga teczka z pomysłami, 45 zrzuty ekranu, 45 tekst odstępy w pionie, 146 odstępy w poziomie, 144 wyrównywanie, 146 tekstura, 97 szumowa, 121 tworzenie, 118 temperatura barwowa, 66 teoria siatki, 26 terminal, Patrz zwieńczenie testy użytkowników, 55 tetradyczny schemat kolorów, 84 text-align, 146, 147 TinEye, 179 tittle, Patrz znak diakrytyczny tracking, 145 transform, 106 transparent, 114 trendy, 46, 128 treść, 25 triada, schemat kolorów, 84 trójkolumnowy, układ, 43, 44 trójpodziału, reguła, 27 Truchet, Sébastien, 163 trzon, 143 Typechart, 147, 148 Typekit, 140 Typetester, 147, 148 typografia, 133, 134

U układ strony, 17, 41 lewokolumnowy, 42 płynny, 49, 50 prawokolumnowy, 43 reaktywny, 50 stały, 49, 50 trójkolumnowy, 43, 44 Unmatched Style, witryna, 44 użyteczność, 21

V Vinh, Khoi, 29

W Walter, Aarron, 73 wartość chromatyczna, 67 WebINK, 141 webkit-border-radius, 104 WellStyled Color Scheme Generator, 88 wezwanie do działania, 39 WhatTheFont, 158 wierzchołki, zaokrąglone, 103, 104 wizytówki, 17 wolna przestrzeń, Patrz biała przestrzeń word-spacing, 145 wydłużenie dolne, 143 wydłużenie górne, 143 wyrównywanie tekstu, 146 wyróżnienie, 38 wysokość majuskuły, Patrz wysokość wersalika wysokość średnia, 144 wysokość wersalika, 142 wzorzec, Patrz deseń

X x-height, Patrz wysokość średnia

Y Yahoo Design Pattern Library, witryna, 44

Z zaokrąglone wierzchołki, 103, 104 zapytania medialne, 104 zgięcie strony, 25 zielony, 62 złota proporcja, Patrz złoty podział złoty podział, 26, 27 znak diakrytyczny, 143 znaki specjalne, 164 zrzuty ekranu, 45 zwieńczenie, 143