Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00212 005497 13610805 na godz. na dobę w sumie
Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych. Wydanie III - książka
Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych. Wydanie III - książka
Autor: , Liczba stron: 208
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-0031-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Nie musisz uczęszczać do akademii sztuk pięknych, by tworzyć witryny marzeń!

Stworzenie doskonałej strony WWW wymaga współpracy grafika i programisty, który potrafi przekuć jego wizję na język kodu. Czy jest możliwe połączenie tych dwóch ról? Czy programista może nauczyć się tworzyć atrakcyjne, eleganckie i estetyczne strony WWW bez pomocy grafika? Dowiedz się, jak to osiągnąć i zoptymalizować swoją pracę!

Sięgnij po kolejne wydanie tej bogato ilustrowanej książki i poznaj najlepsze zasady projektowania stron internetowych. W kolejnych rozdziałach zdobędziesz bezcenną wiedzę na temat dobierania kolorów, tworzenia układów stron oraz korzystania z tekstur. Ponadto poznasz szkielety Foundation i Bootstrap. Najnowsze wydanie tej cenionej książki kładzie nacisk na tworzenie responsywnych stron, które prezentują się dobrze zarówno na dużych, jak i małych ekranach. Książka ta jest doskonałą lekturą dla wszystkich pasjonatów tworzenia stron WWW!

Dowiedz się, jak: I wielu innych rzeczy...

Przewodnik po projektowaniu stron dla programistów!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

• Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści Przedmowa  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Dla kogo jest ta książka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 Co tu znajdziesz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 Konwencje typograficzne użyte w książce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Przykładowy kod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Wskazówki, ciekawostki i ostrzeżenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Strona internetowa książki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Rozdział 1   Układ i kompozycja . . . . . . . . . . . . . . . . . 13 Proces projektowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Poznawanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Poszukiwanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Implementacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Wyznaczanie dobrego stylu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Anatomia stron internetowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Teoria siatki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Reguła trójpodziału . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 960 Grid System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Równowaga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Równowaga symetryczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Równowaga asymetryczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Jedność . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Bliskość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Powtórzenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Wyróżnienie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Rozmieszczenie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Ciągłość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Izolacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Kontrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Proporcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Podstawowe układy stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Układ lewokolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Układ prawokolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 Układ trójkolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Kup książkęPoleć książkę 6 Niezawodne zasady web designu . Projektowanie spektakularnych witryn internetowych W poszukiwaniu natchnienia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Teczka z pomysłami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Popularne trendy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Nowe trendy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Zmiana rozmiaru: układy stałe, płynne i elastyczne . . . . . . . . . . . . . . . . . . . . . . 50 Stała szerokość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Szerokość płynna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Szerokość elastyczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51 Rozdzielczość ekranu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Frameworki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Praktyczne wykorzystanie: Knoxville Reflexology Group . . . . . . . . . . . . . . . . . . . 57 Początek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Rozdział 2   Kolor  . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Psychologia koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61 Kolorystyczne skojarzenia — symbolika koloru . . . . . . . . . . . . . . . . . . . . . . . 62 Temperatura barwowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Wartość chromatyczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Saturacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Podstawy teorii koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Czerwony, żółty i niebieski czy CMYK? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71 Schematy kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Monochromatyczny schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Analogiczny schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Dopełniający schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Inne schematy kolorów — dopełniający 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 Pictaculous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91 Colour Contrast Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Praktyczne wykorzystanie: wybór schematu . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Kup książkęPoleć książkę Spis treści 7 Rozdział 3   Tekstura  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 97 Punkt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Linia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Figury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100 Zaokrąglone wierzchołki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103 Obrót . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104 Figury a kompozycja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106 Objętość i głębia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 Perspektywa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 Proporcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108 Światło i cień . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109 Deseń . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Tworzenie faktury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116 Podstarzały, znoszony, nostalgiczny styl . . . . . . . . . . . . . . . . . . . . . . . . . . .116 Czysto-ziarnisto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119 Własnoręcznie zrobiony album . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 Kapryśny styl kreskówkowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122 Tekstura minimalistyczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124 Wyznaczanie nowych trendów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126 Praktyczne wykorzystanie: logo i treść . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127 Rozdział 4   Typografia . . . . . . . . . . . . . . . . . . . . . . . 129 Font a sieć . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .131 Deklaracja @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133 Samodzielne hostowanie fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133 Hosting fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .134 Zastępowanie fontu obrazem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135 Anatomia liter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138 Odstępy w tekście . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140 Odstępy w poziomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141 Odstępy w pionie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142 Wyrównanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .143 Kroje pisma — różnice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144 Kroje szeryfowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .145 Kroje bezszeryfowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147 Kroje odręczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148 Kup książkęPoleć książkę 8 Niezawodne zasady web designu . Projektowanie spektakularnych witryn internetowych Krój stały . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149 Kroje dekoracyjne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152 Dingbaty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154 W poszukiwaniu fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155 Darmowe galerie fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155 Komercyjne galerie fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156 Artyści indywidualni i wydawnictwa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156 Wybieranie właściwego fontu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157 Wielkość fontu i wysokość linii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159 Interpunkcja i znaki specjalne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160 Praktyczne wykorzystanie: dobrym drukiem . . . . . . . . . . . . . . . . . . . . . . . . . . .162 Rozdział 5   Obraz  . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Czego szukać? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 Potencjalne źródła obrazów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169 Brać czy robić? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169 Fotografia stockowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170 Pomoc profesjonalisty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176 Skąd nie czerpać . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177 Google grabież . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177 Hotlinkowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179 Clipart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179 Twórcze wycinanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .180 Transformacje obrazu w Photoshopie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185 Format plików i rozdzielczość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189 Pomysłowe stosowanie obrazów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191 Ulepszanie obrazu obrazem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191 Podkręcanie obrazów za pomocą CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193 Praktyczne wykorzystanie: ostatnie szlify . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196 Naprzód, w drogę! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198 Skorowidz  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Kup książkęPoleć książkę 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 dekoratorem 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 Kup książkęPoleć książkę 62 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 niejasnych odczuć, przeczuć czy domniemań o danym kolorze, wciąż warto wiedzieć, jaki typ ładunku emocjonalnego niosą ze sobą pewne grupy barw. Należy też pamiętać, że skojarzenia kolorystyczne mogą różnić się w zależności od kręgu kulturowego, z jakiego odbiorca pochodzi. 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. Bardziej ziemiste odcienie czerwieni kojarzą się natomiast z jesienią i żniwami. 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 twórcy systemu operacyjnego Ubuntu1 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 1 http://www.ubuntu.com/ Kup książkęPoleć książkę ratunkowe, kamizelki odblaskowe czy pachołki znaczące roboty drogowe. Pomarańcz stymuluje pracę układu trawiennego, a co z tym idzie, 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. Kolor 63 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 J 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ł! Kup książkęPoleć książkę 64 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ą. Kup książkęPoleć książkę Kolor 65 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 Projektowanie WWW. Księga pomysłów. #22, fiolet jest jednym z najrzadziej używanych kolorów 2 Patrick McNeil, Projektowanie WWW. Księga pomysłów. #2, Helion, Gliwice 2012. Kup książkęPoleć książkę 66 Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych w projektowaniu stron internetowych. Jak stwierdził, odnalezienie przykładów stron  dobrze wykorzystujących potencjał tej barwy 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  Design3. 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 tekstu. 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ą. 3   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. Kup książkęPoleć książkę Kolor 67 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. Kup książkęPoleć książkę 68 Niezawodne zasady web designu . Projektowanie spektakularnych witryn internetowych Psychologia kolorów pełni ważną funkcję 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. Kup książkęPoleć książkę Kolor 69 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. Dodanie barwy komplementarnej skutkuje z kolei uzyskaniem żywszego i bardziej naturalnego koloru. Tę metodę często stosuje się w malarstwie, gdyż dzięki temu barwy nie są zbyt ciemne. 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 Kup książkęPoleć książkę 70 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ć szarawy 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 IV 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 XX 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. Kup książkęPoleć książkę Kolor 71 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), żółto-pomarańczowy, żółto-zielony, niebiesko-zielony (akwamaryn), niebiesko-fioletowy i czerwono-fioletowy (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). Kup książkęPoleć książkę 72 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) 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 Kup książkęPoleć książkę Kolor 73 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łniający, „ dopełniający 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 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”. Kup książkęPoleć książkę 74 Niezawodne zasady web designu . Projektowanie spektakularnych witryn internetowych 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 Rubena Sancheza4 i jego monochromatycznego projektu strony. Każda sekcja tej pojedynczej strony zawiera w tle białą teksturę, na której wyraźnie odznaczają się elementy różowe. Prosty układ w połączeniu z subtelnymi teksturami zapewnia silny kontrast i odpowiednie wyróżnienie elementów. Rysunek 2.16. Witryna Rubena Sancheza świetnie wykorzystuje kontrast barw 4 http://www.theskywaspink.es/ Kup książkęPoleć książkę Kolor 75 Innym przykładem kolorystycznie nasyconej, monochromatycznej witryny internetowej jest witryna programu do zarządzania zadaniami DoneDone5. Każda pojedyncza strona tej witryny używa innego monochromatycznego schematu kolorów, co widać na rysunku 2.17. Na każdej stronie znajduje się obszar z grafiką, która przełamuje coś, co w innym przypadku byłoby dużym polem jednolitego koloru. To właśnie dzięki tym obrazom i kształtom witryna jest ciekawsza, a każda strona charakteryzuje się bogatym monochromatycznym schematem kolorów. Rysunek 2.17. Witryna DoneDone używa różnych schematów kolorów dla każdej ze stron 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 Coffee6 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 na jej podstawie, tak jak zrobiła to Meagan, jest świetnym pomysłem. Widoczna na rysunku 2.19 strona Climate Reality Project7 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. Ciemne tło i mało oszczędne wykorzystanie wolnej przestrzeni sprawiają, że żywe fotografie wyróżniają się, nadając życia całemu projektowi. 5 http://www.getdonedone.com/ 6 http://artinmycoffee.com/ 7 http://climaterealityproject.org/ Kup książkęPoleć książkę 76 Niezawodne zasady web designu . Projektowanie spektakularnych witryn internetowych Rysunek 2.18. Art in My Coffee — kolorystyka odzwierciedla tematykę witryny Rysunek 2.19. Monochromatyczna strona Climate Reality Project Kup książkęPoleć książkę Kolor 77 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ą. Na stronie Serial Cut ExtraBold8 królewski fiolet ocieplono nieco pomarańczem (rysunek 2.20). Rysunek 2.20. Witryna ExtraBold z analogicznym schematem kolorów Analogiczny schemat kolorów — przykłady Zabawna ilustracja widoczna na stronie głównej serwisu Startup Turkey9 jest świetnym przykładem analogicznego schematu kolorów. Przejście od jasnej żółci do czerwieni kwiatu róży dodaje obrazowi głębi (rysunek 2.21). Odpowiednie rozmieszczenie kontrastujących kolorów analogicznych i połączenie ich z różnymi odcieniami jest kluczem do uzyskania takiego efektu. Rysunek 2.21. Zgeometryzowana grafika na Startup Turkey 8 http://www.serialcut.com/extrabold/#/the-book/more-than-a-book 9 http://www.startupturkey.com/ Kup książkęPoleć książkę 78 Niezawodne zasady web designu . Projektowanie spektakularnych witryn internetowych Serwis Blinksale10 — 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 HerbaGurus11 (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. 10 http://blinksale.com/ 11 http://herbagurus.com/ Kup książkęPoleć książkę Kolor 79 Rysunek 2.23. HerbaGurus nie traci czasu na ceregiele Dopełniający schemat kolorów Dopełniające 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łniająca małpka Kup książkęPoleć książkę 80 Niezawodne zasady web designu . Projektowanie spektakularnych witryn internetowych Dopełniające 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łniający schemat kolorów. Niektórych użytkowników może odstraszyć wyraźny kontrast barw dopełniających na stronie lekkoatletycznej12 (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łniających kolorów Strona wiosennego programu fundacji Pittsburgh’s Sprout Fund13 — 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ę. Witryna muzyka Zacha Hendricksa14, widoczna na rysunku 2.27, jest pięknym, podręcznikowym przykładem wykorzystania kolorów dopełniających. 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. 12 http://www.gatorzone.com/ 13 http://www.sproutfund.org/spring/ 14 http://zachhendricks.net/ Kup książkęPoleć książkę Kolor 81 Rysunek 2.26. Dopełniające kolory na stronie wiosennego programu fundacji Sprout Fund nadają jej bardziej „organiczną” aurę Rysunek 2.27. Strona Zacha Hendricksa: podręcznikowy przykład wykorzystania kolorów dopełniających Kup książkęPoleć książkę 82 Niezawodne zasady web designu . Projektowanie spektakularnych witryn internetowych Schematy dopełniające — częste błędy Dopełniające 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łniającego 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! 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 Kup książkęPoleć książkę Kolor 83 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 i nastolatkom, 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łniających kombinacji. Witryna Bulls+Arrows15 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. Rysunek 2.30. Witryna Bulls+Arrows bierze ze zderzenia barw to, co najlepsze Inne schematy kolorów   — dopełniający rozdzielony, triada i tetrada Dopełniający rozdzielony, triada i tetrada — nazwy te mogą brzmieć skomplikowanie, ale tak naprawdę opisują one proste wariacje podstawowego schematu dopełniającego. Aby stworzyć schemat dopełniający 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łniający 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. 15 http://www.bullsandarrows.com/ Kup książkęPoleć książkę 84 Niezawodne zasady web designu . Projektowanie spektakularnych witryn internetowych Rysunek 2.31. Przykłady schematów dopełniających rozdzielonych Ż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. Przykłady triadycznych schematów kolorów 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łniający z innym schematem dopełniającym. 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 Kup książkęPoleć książkę Strona internetowa River City Church16 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. Kolor 85 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łniające schematy, spróbuj poeksperymentować z następującymi: 16 http://www.rccjax.com/ Kup książkęPoleć książkę 86 Niezawodne zasady web designu . Projektowanie spektakularnych witryn internetowych „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”. Monorozdzielne dopełnienie Jeśli podoba Ci się schemat dopełniający 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
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych. Wydanie III
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: