Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00516 006051 14695076 na godz. na dobę w sumie
Design dla hakerów. Sekrety genialnych projektów - książka
Design dla hakerów. Sekrety genialnych projektów - książka
Autor: Liczba stron: 344
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4452-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> funkcjonalność stron
Porównaj ceny (książka, ebook, audiobook).

Pasjonująca wyprawa w świat projektów!

Tego jeszcze nie było! Książka, która rozprawia się z mitami oraz wyjaśnia powszechnie przyjęte założenia. Prawda, że Comic Sans to znienawidzona czcionka? Ale czy wiesz dlaczego? Czy złota proporcja faktycznie ma znaczenie? Dlaczego Monet nigdy nie używał czarnego na swoich obrazach? To tylko niektóre z pytań, nad którymi zastanawia się David Kadavy - utytułowany projektant, który rozłożył klasyczne zasady projektowania i techniki webdesignerów na części pierwsze. Co jeszcze umieścił w tej wyjątkowej książce?

Znajdziesz tu mnóstwo informacji na temat typografii, grafiki tworzonej na potrzeby stron internetowych oraz teorii kolorów. W trakcie lektury nauczysz się dobierać odpowiednie proporcje projektu oraz wykorzystywać kolory do ożywienia swojego dzieła. Ponadto zdobędziesz ogromną wiedzę na temat odpowiedniego zagospodarowania przestrzeni i tworzenia przejrzystych układów. Jeżeli chcesz tworzyć eleganckie, intrygujące i przyciągające wzrok prace, ta książka wprost idealnie spełni Twoje oczekiwania. Dodatkowo zawiera ona wiele informacji o niuansach i sprawach historycznych, lecz wciąż mających wpływ na dzisiejsze sposoby projektowania. Uważaj, ta lektura naprawdę wciąga!

Dowiedz się:

Myśl jak haker, a Twoje projekty będą nowatorskie,
niebanalne i funkcjonalne!

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 Wprowadzenie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Design jako nowa piśmienność . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Postawa hakera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Problem z designem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Część I Zrozumieć design RoZDZIał 1 Dlaczego design jest ważny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Czym design jest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Czym design nie jest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Warstwy projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Cel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Medium i technologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Decyzje estetyczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Podsumowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 RoZDZIał 2 Funkcje designu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Projektowanie graficzne a projektowanie doświadczenia użytkownika . . . . . 35 Podstawy projektowania doświadczenia użytkownika . . . . . . . . . . . . . . . . 36 Projekty wizualne w różnych kategoriach produktów . . . . . . . . . . . . . . . . 38 Czasami wystarczy przeciętna oprawa graficzna . . . . . . . . . . . . . . . . . . . . . . . . 39 Oprawa graficzna bywa atutem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Analiza doświadczenia użytkownika na Twitterze . . . . . . . . . . . . . . . . . . . . . . 42 Persony użytkowników . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Przypadki użycia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Szkielet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Wiedza stosowana . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 8 DeSIgn DLA HAK ERóW Część II Medium i forma RoZDZIał 3 Medium i forma w typografii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Tragedia złych wyborów: dlaczego nienawidzimy Comic Sans . . . . . . . . . . . . 52 Typograf w powrozach: słowo i jego niezmienna forma . . . . . . . . . . . . . . . . . 59 Kształtowanie się naszego alfabetu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Narodziny naszych liter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Twitter Cesarstwa Rzymskiego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Rozkwit typografii rzymskiej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Krój, który przeżył . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Wynalezienie i upowszechnienie druku . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Wycinanie stempli: kołyska niezmiennej formy słowa . . . . . . . . . . . . . . . . 77 Wenecja i renesans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Francja i Garamond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Garamond współcześnie: dlaczego nie używamy go w internecie . . . . . . . . . 79 Narodziny „fontów internetowych” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Wielki krok naprzód . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Trzecia droga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Ograniczenia można twórczo wykorzystać — a nawet parodiować . . . . . 85 Wiedza w praktyce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 RoZDZIał 4 Technologia i kultura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Jak powstają trendy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Narodziny impresjonizmu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Grafika w Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Design to również SEO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Dlaczego SEO jest ważne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Dobór właściwych słów kluczowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Treść i kodowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Wiedza w praktyce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 SpIS TR EśCI 9 Część III Kompozycja RoZDZIał 5 oszukańcza złota liczba: zrozumieć proporcje . . . . . . . . . . . . . 119 Czym są proporcje? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Proporcja i design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Fakty i mity o złotej proporcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Złota proporcja i ciąg Fibonacciego: podobne, lecz inne . . . . . . . . . . . . . 126 Złota proporcja a człowiek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Mity o złotej proporcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Inne atrakcyjne proporcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Prostokąt 1:√2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Prostokąt 2:3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Prostokąt 3:4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Proporcje w naszym świecie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Muzyka i taniec . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Przyroda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Komputery i urządzenia przenośne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Proporcje w praktyce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Wiedza w praktyce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 RoZDZIał 6 przyciągnąć wzrok: zasady kompozycji . . . . . . . . . . . . . . . . . . . 147 Relacje kompozycyjne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Kierunek czytania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Prowadzenie wzroku przez kompozycję . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Relacje między pierwszym planem a tłem . . . . . . . . . . . . . . . . . . . . . . . . . 155 Zasady projektowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Dominacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Podobieństwo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Rytm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 10 DeSIgn DLA HAK ERóW Faktura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Kierunek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Kontrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Dlaczego logo MailChimp jest piękne: zastosowanie zasad kompozycji i projektowania . . . . . . . . . . . . . . . . . . . . . 171 Relacje między pierwszym planem a tłem . . . . . . . . . . . . . . . . . . . . . . . . . 173 Dominacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Podobieństwo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Rytm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Faktura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Kierunek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Kontrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Wiedza w praktyce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 RoZDZIał 7 ożywić informacje: hierarchia wizualna . . . . . . . . . . . . . . . . . . 181 Jak rozumiem hierarchię . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Hierarchia jest ekspresyjna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Na hierarchię może wpłynąć wiele czynników wizualnych . . . . . . . . . . . 184 Czynniki hierarchizujące — wszystkie z osobna . . . . . . . . . . . . . . . . . . . . . . . 185 Przestrzeń negatywna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Grubość i wielkość pisma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Kolor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Dekoracje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Hierarchia w działaniu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Wiedza w praktyce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 SpIS TR EśCI 11 Część IV Kolor RoZDZIał 8 nauka o barwach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Czym jest kolor? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Oczy, które kłamią . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Metameryzm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Stałość barw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Powidoki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Jak działa układ wzrokowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Czopki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Teoria trzech kolorów a teoria kolorów przeciwstawnych . . . . . . . . . . . . 216 Mieszanie kolorów widma a koło barw . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 ślepota barw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Określić barwy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Munsell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Odcień, nasycenie i wartość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Model barw Lab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Modele kolorów i grafiki informacyjne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Kolor i dane jakościowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Kolor i dane ilościowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Sekwencyjne a rozbieżne palety kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Myślenie systemem szesnastkowym: zrozumieć kolory internetowe . . . . . . 231 Zrozumieć RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 RGB w systemie szesnastkowym . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Poruszanie się po szesnastkowym „sześcianie” . . . . . . . . . . . . . . . . . . . . . 235 Przyszłość: HSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Modele kolorów w działaniu: dlaczego wizytówki i strony internetowe wyglądają (i będą wyglądać) inaczej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Ekrany RGB a drukowanie w CMYK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Gamy kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Praca z różnymi nośnikami i zarządzanie kolorem . . . . . . . . . . . . . . . . . . 243 Wiedza w praktyce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 12 DeSIgn DLA HAK ERóW RoZDZIał 9 Teoria koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Reakcje na barwy na przestrzeni dziejów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Reakcje na barwy a biologia człowieka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Potęga czerwieni: dlaczego nigdy nie sprostasz „wyzwaniu Target” . . . . . . . 252 Jak czerwień działa na mózg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Kora przedczołowa i racjonalne myślenie . . . . . . . . . . . . . . . . . . . . . . . . . 253 Atak na korę przedczołową . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Kora przedczołowa i podejmowanie decyzji . . . . . . . . . . . . . . . . . . . . . . . 255 Kolor i kontekst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Co to oznacza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Badania nad innymi kolorami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Kolor i kultura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Schematy kolorystyczne i koło barw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Wybór kolorów i konwencje internetowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Tła . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Grafika i tekst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Kolory akcentujące . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Interakcja barw: dlaczego Monet nigdy nie malował na czarno . . . . . . . . . . 268 Impresjoniści: mistrzowie barw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Teoria kolorów: co odkryli impresjoniści . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Jak Monet używał kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Używaj kolorów jak Monet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Schematy kolorystyczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Monochromatyczny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Analogiczny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Komplementarny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Półkomplementarny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Triadyczny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 SpIS TR EśCI 13 Tetradyczny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Wariacje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 Kreowanie nastroju kolorem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 Tajemniczy, ekskluzywny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 Ożywiony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 Przytłumione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 Naturalne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Kreatory palet i schematów kolorystycznych . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Wiedza w praktyce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Dodatki DoDaTeK a Dobór i zestawianie krojów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 Klasyfikacja krojów pisma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Kroje szeryfowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Kroje bezszeryfowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 Kroje afiszowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 Struktura liter: szkielet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Kroje humanistyczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Kroje geometryczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 Kroje realistyczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 Zestawianie krojów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 Zasada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Wyjątek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Dlaczego kroje do siebie pasują . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Najsprytniejsza sztuczka: wybierz sobie jednego typografa . . . . . . . . . . . 316 Wszystkie kroje, które będą Ci kiedykolwiek potrzebne . . . . . . . . . . . . . . . . 317 14 DeSIgn DLA HAK ERóW DoDaTeK B etykieta typograficzna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 Zniekształcanie pisma: czego nie robić . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Sztuczne pogrubienie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Sztuczna kursywa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Sztuczne kapitaliki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324 Rozciąganie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 Obrysowywanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 Tekst a obrazy i tekstury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Skład tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 Akapity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 Unikaj justowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 Unikanie bękartów i szewców . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 Szczegóły . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 Cudzysłów cudzysłowowi nierówny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 Pauzy, półpauzy i łączniki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 Ligatury łączą litery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 Skorowidz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Rozdział 7Ożywić informacje: hierarchia wizualna 0100100100100101001011011101010100101001010110101010101010101001010101001010100101001011011101010100101001010110101010101010101001010101001001001001101110101010010100101011010101010101010100101010100100100100101001010010100101011010101010101010100101010100100100100101001011011010110101010101010101001010101001001001001010010110111010101010101010100101010100100100100101001011011101010100100100101011001001001001010010110111010101001010010100010010010010100101101110101010010100101011010101010010110111010101001010010101101010101010111010101001010010101101010101010101010010100101011010101010101010100101111010101010101010100101010100100101010100101010100100100101010010010010010010100110010010100101101111011011101010101010010100101011010100010110101101010101011010101001010101001010101001001001010100100100100101001010010010010100101101110101010010100101101110101010010100101010110111010101001010010101101010101110101010010100101011010101010101010101010010100101011010101010101010100101101001100101011010101010101010100101010100100100100100110101010101010101001010101001001001001010010110111010101010101001010010010010010010100101101110101010010010101001010010010010010010100101101110101010010100101011010101001001001001001010010110111010101001010010101101010101010100010010010010100101101110101010010100101011010101010101010100101001 182 DeSIgn DLA HAK ERóW komPozycJe, NaD którymi pracuje większość współczesnych designerów, są o wiele bogatsze pod względem informacyjnym i służą konkretniejszym celom niż rzeźby renesansowe czy impresjonistyczne obrazy. Kiedy projektant tworzy interfejs bloga, uwzględnia konkretne zadania i cele użytkownika. Użytkownik musi mieć możliwość dotarcia do potrzebnych mu podstron, lecz jednocześnie artykuły bloga powinno się czytać łatwo. Poruszanie się po kategoriach również powinno być proste, a informacje o blogu i jego autorach muszą być dostępne bez problemu. Atrakcyjność takich kompozycji jest ważna dla zatrzymywania nowych użytkowników na stronie i wywierania na odbiorcach odpowiedniego wrażenia. Ciekawa kompozycja nie jest jednak szczególnie przydatna, jeżeli użytkownik nie może znaleźć tego, czego szuka. Istnieje wiele wypracowanych standardów graficznych i wzorców interfejsów używanych przy projektowaniu na potrzeby internetu, wiążą się z nimi także pewne oczekiwania ze strony użytkowników. Aby użytkownik mógł poruszać się po wszystkich informacjach na stronie internetowej lub w aplikacji, trzeba je zaprezentować przejrzyście i ustalić jasną hierarchię. Jak rozumiem hierarchię Termin hierarchia sugeruje istnienie linearnego porządku od najważniejszych do najmniej ważnych informacji, lecz nie do końca tak jest. Ważność danej informacji dla ogółu interfejsu może ulegać zmianie w zależności od sytuacji użytkowania. Kiedy na blogu, który często czytasz, pojawia się nowy wpis, raczej nie jesteś szczególnie zainteresowany datą jego publikacji. Data wpisu może mieć jednak duże znaczenie, jeżeli czytasz instrukcję obsługi często aktualizowanego oprogramowania. Choć czasami możesz bezpiecznie przyjąć pewne założenia o względnej ważności różnych informacji, wizualna organizacja danych jest procesem o wiele bardziej zniuansowanym niż tworzenie „rankingu”. Rozważmy przykład typowego layoutu bloga (rysunek 7.1). Prawdopodobnie zetknąłeś się z wieloma blogami o takim layoucie. Logo i tytuł bloga znajdują się na górze. Obok tego jest system nawigacji, a może nawet logo z nazwą bloga. W kodzie HTML te informacje są często zawarte w czymś, co nazywa się nagłówkiem bloga. RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 183 RYSunEK 7.1. Tak na ogół wygląda layout bloga. Poszczególne sekcje są rozmieszczone tak, by tworzyć hierarchię Pod nagłówkiem mieści się zwykle obszar z główną zawartością, w którym znajduje się właściwa treść wpisu, czyli tytuł, tekst i inne materiały, oraz metadane w rodzaju daty publikacji, informacji o autorze czy listy kategorii, do których wpis jest zaklasyfikowany. Poniżej treści wpisu znajdują się komentarze czytelników. Przy każdym z tych komentarzy — o ile to możliwe — widnieje zdjęcie autora oraz sygnaturka czasowa publikacji. Obok obszaru z główną treścią często umieszcza się pasek boczny, w którym zazwyczaj znajdują się kategorie, narzędzie do przeszukiwania zawartości bloga, informacje o subskrypcji, a czasami także reklamy. U dołu strony często znajduje się stopka. W stopce zwykle pojawiają się powtórzone odnośniki z systemu nawigacyjnego w nagłówku, a także inne odnośniki, na przykład do systemu zarządzania treścią (CMS-a), na którym blog jest oparty, albo do informacji o prawach autorskich, które twórca bloga sobie zastrzega. Poszczególne sekcje standardowego layoutu blogowego nie tyle określają ważność poszczególnych informacji, ile wskazują różnice między nimi. 184 DeSIgn DLA HAK ERóW Hierarchia jest ekspresyjna Dokładne uporządkowanie tych informacji w kolejności od najważniejszej do najmniej ważnej nijak nie jest możliwe, zwłaszcza tak, żeby ta hierarchia znajdowała zastosowanie w każdej sytuacji. Ustanowienie hierarchii wizualnej w zdecydowanie większym stopniu wiąże się z ekspresją, a mniej ze ścisłym myśleniem. Wszystkie typy informacji, między którymi zachodzą pewne relacje, mają własne osobowości. HTML porządkuje informacje w pewną hierarchię. Istnieją wprawdzie linearne wyróżniki w rodzaju znaczników nagłówków H1, H2, H3 i dalszych, ale inne znaczniki typu blockquote i code wskazują jedynie na charakter poszczególnych informacji, zamiast określać ich ważność. Pod tym względem hierarchia wizualna przypomina HTML. Potrzeby użytkowników i cele marketingowe czasami sprawiają, że pewne informacje są niezaprzeczalnie ważniejsze od innych, lecz jednocześnie pomiędzy informacjami występuje wiele subtelnych różnic, które trzeba przedstawić z większą finezją. Na hierarchię może wpłynąć wiele czynników wizualnych Wielu designerów rozpoczynających naukę popełnia błąd, jakim jest podejmowanie prób wykorzystania zbyt wielu czynników wizualnych przy tworzeniu hierarchii wizualnej. Jak wykażę w tym rozdziale, istnieje sporo sposobów odróżniania różnorakich informacji i elementów projektu od siebie nawzajem. Można w tym celu przekształcić nieco przestrzeń negatywną czy zmienić rozmiar, krój lub ciężar graficzny. Można też zmieniać kolory albo wykorzystywać elementy dekoracyjne, jak linie, ikonki czy obszary o jednolitej barwie. Niepewni co do właściwego postępowania początkujący designerzy często usiłują zmienić zbyt wiele czynników naraz. Zazwyczaj modyfikują najbardziej wyeksponowane czynniki. Kiedy tworzą nagłówek wpisu blogowego, mogą zmienić krój pisma, powiększyć tekst, zmienić jego kolor oraz dodać linię lub obrazek w tle. Gdybyś spróbował zatańczyć do muzyki salsowej, nie znając w ogóle kroku podstawowego, Twoje podrygi nie byłyby zbyt imponujące. Jeżeli nie masz wrodzonego talentu (lub dużego doświadczenia z innymi stylami tańca), RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 185 prawdopodobnie wyszłoby Ci to koszmarnie. Nawet gdybyś najpierw przyjrzał się tancerzom, bardzo trudno byłoby Ci się nauczyć przez obserwację. Widziałbyś, jak wykonują open break, hammerlock, copę i crossbody, ale nie wiedziałbyś, jak nazwać te ruchy, które zresztą następowałyby tak szybko, że nie zdążyłbyś ich przetworzyć na tyle dobrze, by je powtórzyć. Gdybyś się jednak najpierw nauczył odróżniania akcentów, a następnie kroku podstawowego, miałbyś już dobrą podstawę do rozwijania swoich umiejętności tańczenia salsy. Wszystko, czego byś się nauczył i co byś zobaczył, pasowałoby do tej podstawy. Nauczywszy się podstawowych elementów technicznych, prawdopodobnie mógłbyś już zaimponować swoimi umiejętnościami komuś, kto dopiero zaczyna. Po wielu próbach i zajęciach stałbyś się dobrym tancerzem. Nauka designu, czyli wyrażania i odróżniania różnych informacji, w znacznym stopniu przypomina naukę tańca. Musisz poznać podstawowe kroki, zanim je połączysz z krokami bardziej złożonymi. Podstawowe kroki w designie nie są jednak tak oczywiste i dobrze znane jak kroki taneczne. Czynniki wizualne, które wpływają na hierarchię informacji, przypominają kroki taneczne do określonego rytmu. Jeżeli zaczniesz je obserwować i uczyć się ich z osobna, z większą łatwością powiążesz je ze sobą. Czynniki hierarchizujące — wszystkie z osobna Nawet najprostszy layout bloga, który wcześniej przedstawiłem, to zbyt skomplikowany utwór dla kogoś, kto dopiero zaczyna naukę tańca. W tym layoucie widać hierarchię wizualną, czyli szereg typów informacji, które się od siebie różnią. Relacje hierarchiczne istnieją zarówno pomiędzy tymi typami informacji, jak i w ich obrębie. Do nauki podstaw tworzenia hierarchii wizualnych potrzebna będzie prostsza hierarchia informacji. Posłużę się zatem tekstem z podstawowej zajawki wpisu blogowego na stronie głównej. Zajawka taka zawiera tytuł wpisu, fragment tekstu głównego, odnośnik do całego tekstu, a także metadane w rodzaju daty publikacji, kategorii, autora oraz liczby komentarzy do wpisu. 186 DeSIgn DLA HAK ERóW To jasne, że niektóre informacje są ważniejsze od innych. Najważniejszy jest tytuł, który wskazuje, o czym jest dany wpis. W zależności od sytuacji kolejny co do ważności jest fragment właściwego tekstu wpisu. Ważność metadanych — imienia autora, czasu publikacji, kategorii i liczby komentarzy — jest natomiast względna. Owe metadane mogą być równie ważne, lecz zdecydowanie różnią się od siebie pod względem konceptualnym i znajdują się w różnych relacjach z innymi informacjami. Można powiedzieć, że wpis został napisany „przez” imię autora. Można też powiedzieć, że tytuł wpisu jest „skatalogowany” pod nazwą kategorii. Można również powiedzieć, że do wpisu „dołączono” trzy komentarze. Także to, że sam wpis pojawił się „o” określonej godzinie określonego dnia. To, w jaki sposób mówimy o tych informacjach, wskazuje, jakie różnice konceptualne występują między nimi. Przestrzeń negatywna Żeby zdobyć rzeczywistą umiejętność wyrażania różnic między tymi informacjami, musimy wskazać zmienne, które to umożliwiają. Jedną z najważniejszych, ale też najbardziej owianych mgłą legend, jest przestrzeń negatywna. Terminem tym zazwyczaj opisuje się obszary, na których nie ma żadnych informacji ani innych elementów kompozycyjnych. Pewnie zdarzyło Ci się usłyszeć, że „powinieneś dodać więcej pustej przestrzeni” albo że „użyłeś za dużo negatywnej przestrzeni”. Cóż to jednak rzeczywiście oznacza? Element informacji otoczony dużą ilością pustej przestrzeni często sprawia wrażenie ważniejszego od innych informacji. Dwie informacje oddzielone niewielką ilością przestrzeni negatywnej sprawiają wrażenie powiązanych. Aby wyizolować wpływ przestrzeni negatywnej na hierarchię i przyjrzeć mu się bliżej, musisz dopilnować, by wszystkie inne czynniki oddziaływały tak samo. Posłużę się zatem przykładem kompozycji, w której zastosowano wszędzie jednakowy krój (Helveticę), tę samą wielkość pisma (12 pt) oraz jednakowy ciężar tekstu (bez wytłuszczeń i kursywy). Zarządzanie przestrzenią negatywną przy użyciu siatki Do sprawnego wykorzystania negatywnej przestrzeni zastosuję niektóre z technik pracy z geometrią opisanych w poprzednich rozdziałach. Zaczynam od płótna o wymiarach 3 : 4 i tworzę na nim wypośrodkowany obszar kompozycji w postaci RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 187 prostokąta o wymiarach 3 : 4 — będący pochodną samego płótna (rysunek 7.2). Skoro zatem płótno jest wysokie na 300 punktów, to obszar kompozycji musi być szeroki na 300 punktów, a wysoki na 225 punktów (300×0,75 = 225). RYSunEK 7.2. Na potrzeby przykładów stworzyłem płótno z obszarem kompozycji o wymiarach 3 : 4 Tworzę szeroką kolumnę po prawej stronie, zamieszczając kolejny prostokąt o wymiarach 3 : 4 w obszarze kompozycji. Powstaje dzięki temu linia, która dzieli płótno. Z podobnej metody możesz skorzystać przy tworzeniu layoutu strony internetowej. Dzieląc w ten sposób obszar kompozycji, tworzysz większy obszar na główną treść oraz mniejszy na treści właściwe dla paska bocznego. Ustanawianie hierarchii przy użyciu przestrzeni negatywnej Rysunek 7.3 przedstawia efekt mojej pierwszej próby ustanawiania hierarchii wyłącznie przy użyciu negatywnej przestrzeni. Widać, że możliwości odróżniania informacji wyłącznie za pomocą tego środka są dość ograniczone. Oto kilka sposobów, w jakie starałem się go jak najlepiej wykorzystać. Tytuł wpisu zapisałem wersalikami i żeby go wyróżnić, oddzieliłem nieco litery od siebie. Umieściłem go w lewym górnym rogu kompozycji, ponieważ to od tej strony wzrok odbiorcy prawdopodobnie zacznie odczytywać kompozycję. Zauważ, że unikam stosowania kapitalików (p. dodatek B). 188 DeSIgn DLA HAK ERóW RYSunEK 7.3. Ograniczywszy się do użycia jednego kroju i jednej wielkości pisma, przy tworzeniu hierarchii wizualnej muszę zdać się na skuteczne wykorzystanie przestrzeni negatywnej Imię autora znajduje się obok tytułu wpisu, aby zasugerować związek między tymi dwiema informacjami. Inne metadane w rodzaju daty publikacji i kategorii również znajdują się u góry, lecz z prawej strony. Ta relacja przestrzenna między metadanymi i tytułem w poziomie sugeruje, że między tymi informacjami istnieje jakiś związek, ale ze względu na oddalenie tych dwóch elementów jest on mniej wyraźny. Główna treść wpisu jest wyrównana do stworzonej przeze mnie linii podziału. Jako że znajduje się ona dość blisko środka kompozycji, jest dodatkowo wyszczególniona wielkim obszarem pustej przestrzeni z lewej, ma dość duży ciężar graficzny ze względu na swój rozmiar oraz zajmuje dość wydatne miejsce w kompozycji. Odnośnik Więcej znajduje się w prawym dolnym rogu obszaru kompozycji. To położenie jest informacyjnym wyrazem tego, że ów element prowadzi tam, gdzie jest czegoś więcej. Jest on dość wyrazisty ze względu na ilość okalającej go przestrzeni negatywnej. RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 189 Ile przestrzeni negatywnej używać Relacje geometryczne wpływają nie tylko na kompozycję projektu, lecz również na interakcję poszczególnych elementów. Przykładowo ilość przestrzeni negatywnej pomiędzy tytułem bloga a imieniem autora nie została dobrana arbitralnie. Jak widać na rysunku 7.4, przestrzeń między tymi dwoma elementami ma wysokość równą wysokości samych wersalików. RYSunEK 7.4. Relacje geometryczne służą do określania ilości pustej przestrzeni pomiędzy elementami, na przykład pomiędzy tytułem wpisu a imieniem jego autora Tę samą metodę zastosowałem przy oddzielaniu licznika komentarzy od innych metadanych w prawym górnym rogu kompozycji. Nazwa kategorii i sygnatura czasowa są natomiast graficznie połączone poprzez zamieszczenie niewielkiej ilości negatywnej przestrzeni pomiędzy nimi — są od siebie oddalone o połowę wysokości wersalika. Myślenie o pustej przestrzeni w takich kategoriach pozwala na to, by kompozycja wywoływała wrażenie rytmu i porządku, dzięki czemu wydaje się „czysta”. Wystarczy po prostu rozważyć, ile pustej przestrzeni należy zamieścić między elementami, i spójnie zastosować się do wniosków, by zapewnić kompozycji klarowność. Przestrzeń negatywna i kursywa Na rysunku 7.5 po raz kolejny usiłuję stworzyć hierarchię przy użyciu samej negatywnej przestrzeni, lecz tym razem część tekstu obstylowuję kursywą. Nie jest to szczególnie widoczny czynnik, stanowi jednak jakiś sposób na rozróżnienie informacji. W tej kompozycji tytuł bloga również jest zapisany wersalikami, tym razem jednak wyjustowałem go wraz z imieniem autora do linii podziału po jej lewej stronie, podczas gdy główny tekst został wyjustowany do linii podziału po jej prawej stronie. Tworzy to wrażenie kierunku i przyciąga wzrok do tekstu głównego tuż po tym, jak oko trafia na tytuł. Data wraz z sygnaturą czasową uzyskały w tej kompozycji wydzielony obszar, więc nie są zgrupowane z innymi metadanymi w rodzaju kategorii i licznika komentarzy. Zauważ, że zmienia to sposób, w jaki czytelnik postrzega datę. Teraz wygląda ona na ważny element, który rzeczywiście może (choć nie musi) być istotny w zależności od tego, w jaki sposób przedstawione treści mają być wykorzystywane. 190 DeSIgn DLA HAK ERóW RYSunEK 7.5. Kursywa jest kolejnym czynnikiem, którym można się posłużyć do odróżnienia informacji RYSunEK 7.6. W swojej kolejnej kompozycji obszar kompozycji dzielę na kolumny o równej szerokości Czterokolumnowa siatka W swojej kolejnej kompozycji wykorzystam nieco bardziej standardową siatkę niż poprzednio. Siatki często tworzy się poprzez podzielenie obszaru kompozycji na określoną liczbę kolumn. W tym przypadku są to cztery kolumny (rysunek 7.6). RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 191 Zauważ, że linie znajdujące się po obydwu stronach głównych linii podziału wskazują odstępy międzyłamowe, które wykorzystam jeszcze w innej kompozycji. Tworzy to marginesy wokół kolumn, dzięki czemu znajdujące się w nich elementy tekstowe nie ścierają się ze sobą. Równo podzielonymi siatkami stosunkowo łatwo jest uelastycznić projekt. Jak widać na rysunku 7.7, taką czterokolumnową siatkę można wykorzystać w standardowym layoucie bloga. Trzy kolumny można wypełnić głównym tekstem, a w jednej zamieścić informacje z paska bocznego. Można też stworzyć obszar głównej treści z dwóch kolumn, a pozostałe — albo sąsiadujące ze sobą, albo otaczające obszar główny — wykorzystać jako paski boczne. RYSunEK 7.7. Czterokolumnową siatkę można wykorzystać do zorganizowania treści na kilka różnych sposobów Grubość i wielkość pisma Poza starannym zarządzaniem negatywną przestrzenią dostosowanie grubości i wielkości tekstu może się znacząco przyczynić do wyróżnienia różnych typów informacji. Niedoświadczeni designerzy często palą się do wprowadzania różnorodności poprzez zastosowanie innego kroju pisma, tymczasem zwrócenie uwagi w pierwszej kolejności na grubość i wielkość tekstu daje Ci elastyczność, a jednocześnie sprzyja elegancji projektu. Grubość pisma Jak widać na rysunku 7.8, do dalszego wypracowania hierarchii użyłem wytłuszczonej wersji kroju, wciąż jednak trzymam się jednego rozmiaru. Na tym etapie unikam stosowania kursywy, żeby w pełni zademonstrować Ci wpływ grubości pisma na hierarchię. 192 DeSIgn DLA HAK ERóW RYSunEK 7.8. Zastosowanie wytłuszczonej wersji kroju w projekcie pozwala na jeszcze silniejsze wyróżnienie niektórych elementów Ta kompozycja jest dość podobna do pierwszej, lecz występuje tu kilka różnic. Oto co zrobiłem: Wytłuściłem wersaliki, którymi zapisałem tytuł . W ten sposób tytuł bardziej się wyróżnia. Wytłuściłem również tekst główny, co łączy go graficznie z tytułem. Zwiększyłem też odstępy międzywierszowe (line-height w CSS-ie), aby rozrzedzić fakturę tekstu (o której przeczytasz więcej w dodatku A) i nie dopuścić, by tekst główny zdominował całą kompozycję. oddzieliłem licznik komentarzy od pozostałych metadanych . Bliskość licznika i tekstu zmienia sposób odbioru informacji. Wskazuje na silniejszy związek między komentarzami a właściwą treścią wpisu. Licznik komentarzy w pierwszej kompozycji jest zgrupowany z nazwą kategorii i sygnaturą czasową, co było wprost lekceważące wobec komentarzy czytelników. Dorównałem imię autora i tekst główny do pierwszej linii siatki . Połączyłem w ten sposób te dwie informacje. Imię autora wciąż znajduje się na tyle blisko tytułu, żeby być z nim powiązane, lecz sam tytuł rozciąga się teraz aż do lewego marginesu kompozycji, co zwiększa jego ważność. RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 193 Wielkość pisma Na tej samej siatce tworzę inną kompozycję (rysunek 7.9), lecz tym razem jedynym czynnikiem, który mogę zmodyfikować, jest wielkość pisma. Nie zmieniam nawet jego grubości. Powiększyłem tytuł tak bardzo, że dominuje nad całą kompozycją, choć nad nim znajdują się jeszcze metadane. Nad tytułem umieściłem imię autora, wyjustowałem je do lewej. Nazwa kategorii i data są zapisane kapitalikami, pismo jest jednak mniejsze i oba elementy zostały wyjustowane do prawej. RYSunEK 7.9. Drastyczna zmiana wielkości tytułu wpisu pozwala na umieszczenie metadanych ponad nim bez jednoczesnego zmniejszania jego ważności Choć te trzy metadane są wizualnie połączone poprzez wyrównanie ich względem siebie, imię autora zdecydowanie się wyróżnia. Nie zostało zapisane kapitalikami, za to jest większe, co — w tym kontekście — ma wyrażać, że autor jest osobą, a nie informacją. Licznik komentarzy oraz odnośnik Więcej różnią się od głównego tekstu tym, że są zapisane nieco mniejszym pismem, ale samymi kapitalikami. To jasne, że zmiana wielkości ma znaczący wpływ na hierarchię, lecz nie dobrałem tych rozmiarów przypadkowo. Wcześni drukarze musieli uwzględniać poważne ograniczenia związane nie tylko z liczbą czcionek, z jakich mogli korzystać (skoro ich produkcja wymagała tak dużych nakładów), ale też z liczbą różnych wielkości pisma. W rzeczy samej, każda wyprodukowana czcionka występowała w określonej skali rozmiarów. 194 DeSIgn DLA HAK ERóW Ograniczenie to było istnym błogosławieństwem, ponieważ przy zmianie wielkości tekstu warto wziąć pod uwagę kwestie proporcji. Jako że istnieje wiele innych sposobów odróżniania informacji, zmiana wielkości tekstu powinna być wyraźnie widoczna. Odróżnienie tekstu 13-pikselowego od tekstu 14-pikselowego nie jest ani skuteczne, ani atrakcyjne. Z tego właśnie względu, podobnie jak w przypadku okręgów składających się na logo MailChimp (o którym opowiadam w rozdziałach 5 i 6) i pozostających w relacji proporcjonalnej, warto dobrać jakąś proporcjonalną skalę rozmiarów pisma. Na rysunku 7.10 widnieją wielkości, których sam zwykle używam. RYSunEK 7.10. Te wielkości pisma pozostają w relacji proporcjonalnej 3 : 4 RYSunEK 7.11. Zmiany grubości i poważniejsze zmiany wielkości tekstu pozwalają na sprawniejsze odróżnienie informacji niż w przypadku drobniejszych zmian jego wielkości Rozmiary tekstu 5 i 7 są w zasadzie przeznaczone do użycia z aplikacjami drukarskimi i kapitalikami. Samą skalę jednak skonstruowałem, zaczynając od najmniejszego rozmiaru pisma, którego użycie mogłem sobie w ogóle wyobrazić — 5 pt. Następnie podzieliłem tę wartość (i jej pochodne) przez 0,75 i zaokrągliłem wynik. Rezultatem jest skala rozmiarów, które pozostają ze sobą w relacji proporcjonalnej. Niekiedy przechodzenie bezpośrednio między kolejnymi rozmiarami pisma nie przynosi takiego skutku, jakiego się oczekuje. Przykładowo różnica rozmiarów między tekstem 9-punktowym a 12-punktowym jest dość subtelna. Podobną zmianę hierarchii możesz uzyskać, trzymając się pisma 9-punktowego i jedynie wytłuszczając nagłówki (rysunek 7.11). Czasami warto przeskoczyć jeden poziom skali. Różnica rozmiaru między tekstem 9-punktowym a 16-punktowym może akurat wywrzeć znaczące wrażenie. RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 195 Wobec nieograniczonego dziś wyboru wielkości pisma praca z taką skalą ułatwia podejmowanie decyzji, a poza tym przypomina o innych metodach odróżniania informacji. Łączenie grubości z wielkością O ile zmiany grubości i wielkości mogą z osobna przynosić dramatyczne rezultaty, o tyle połączenie tych dwóch czynników pozwala na jeszcze większe odróżnianie informacji. Na rysunku 7.12 widać, że wytłuściłem tytuł, imię autora, liczbę komentarzy oraz datę i sygnaturę czasową. Połączenie dużego rozmiaru, kapitalików i pogrubienia sprawia, że tytuł dominuje nad całą kompozycją. To, że zajmuje on większą część lewej połowy kompozycji (czyli pierwszą, na którą pada wzrok), sprawia, że tytuł wygląda na tak ważny, że bardziej się nie da. RYSunEK 7.12. Zmiana grubości w połączeniu ze zmianą wielkości pozwala na uzyskanie jeszcze szerszego zakresu stopni ważności elementów Po drugiej stronie odstępu międzykolumnowego znajdują się: nazwa kategorii, tekst główny i odnośnik Więcej . „Wrzask” w internecie zazwyczaj nie bywa przejawem uprzejmości, ale tekst zajawki jest na tyle krótki (a odstępy międzyliterowe w nim są odpowiednio duże), że zastosowanie kapitalików okazuje się w tym przypadku dopuszczalne. Kolor Dodanie koloru również umożliwia wykonywanie pewnych akrobacji z hierarchią. Zwróć uwagę na rysunek 7.13: choć tekst główny i tytuł mają tę samą wielkość, tytuł i tak się wydaje ważniejszy. Wytłuszczony, czerwony tytuł jest bardziej wyrazisty niż szary tekst główny. 196 DeSIgn DLA HAK ERóW Tak intensywna czerwień naturalnie zwraca większą uwagę niż kolor jasnoszary, a nawet silnie kontrastuje z czystą czernią. Interakcje barw są jednak o wiele bardziej złożone i zniuansowane. (Więcej na temat interakcji barw przeczytasz w rozdziale 9). RYSunEK 7.13. Tytuł zapisany kolorem czerwonym wyróżnia się, mimo że ma taki sam rozmiar jak szary tekst główny Dekoracje Pomimo wszelkich kombinacji rozmiaru, grubości i koloru, którymi można określać hierarchię wizualną, jest dość duże prawdopodobieństwo, że lwia część Twoich projektów będzie zawierać coś więcej. Ikonki bywają nieodzowne przy oprowadzaniu użytkownika po projekcie, a na jakimś etapie obrazy często stają się konieczne z punktu widzenia komunikacji. Co więcej, wobec złożoności większości layoutów, poziome i pionowe linie, obszary jednolitych barw, a nawet gradienty przydają się w dzieleniu i ożywianiu stron. Zacząłem od możliwie najprostszej implementacji dekoracji (rysunek 7.14). Ta kompozycja jest przeróbką pierwszej kompozycji z rysunku 7.3 — tym razem jednak pod tytułem znajduje się bardzo cienka pozioma linia. RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 197 Linia pozioma ciągnie się od lewej krawędzi kompozycji, toteż wzrok samoistnie zaczyna oglądanie obrazu od niej. Ponieważ tytuł znajduje się tuż przy niej, jest jednym z elementów, na który zwraca się uwagę w pierwszej kolejności. Mimo że tytuł nie składa się już z samych wersalików, lecz z zarówno dużych, jak i małych liter, wciąż jest mocno wyeksponowany ze względu na położenie w lewym górnym rogu (od którego odbiorca zaczyna czytać) i sąsiadowanie z linią poziomą. RYSunEK 7.14. Prosta, lecz rozmyślnie postawiona linia pozioma wystarczy do wyszczególnienia tytułu Jak widać na rysunku 7.15, poza zamieszczeniem dekoracji postanowiłem również zróżnicować grubość, wielkość i kolor elementów. Jedyną dekoracją jest gruba, czarna, pozioma linia. Ten pasek samoistnie przyciąga wzrok ze względu na to, że dominuje nad kompozycją (z racji bycia wielkim i czarnym elementem), ale też dlatego, że ciągnie się od lewego krańca kompozycji. 198 DeSIgn DLA HAK ERóW RYSunEK 7.15. Ciemny, czarny pasek sprawia, że tytuł się wyróżnia, mimo że jest w rzeczywistości mniejszy od tekstu głównego wpisu Rozmiar tytułu celowo jest mniejszy od właściwego tekstu wpisu, by w pełni ukazać wpływ, jaki dekoracja może wywrzeć na odbiór. Ponieważ tytuł został zapisany czerwonym, pogrubionym drukiem, a przy tym wyraźnie kontrastuje z czernią (paska przyciągającego wzrok), łatwo go dostrzec właśnie ze względu na jego bliskie położenie. Tytuł jest otoczony imieniem autora oraz nazwą kategorii — obydwa elementy zostały inaczej obstylowane. Choć dekoracje bywają wartościowe, często się ich nadużywa. Kiedy prosty layout nie wygląda wystarczająco „czysto”, wielu początkujących designerów od razu wspomaga się dekoracjami. Tymczasem działają one tak samo jak inne środki graficznego wyróżniania informacji — można ich używać z umiarem, o ile inne czynniki wykorzystuje się odpowiednio umiejętnie. Z nadużyciem dekoracji możemy się najczęściej spotkać przy tabelach danych. Większość ludzi uważa, że składające się z rzędów i kolumn danych tabele powinny być okraszone wieloma pionowymi i poziomymi liniami. Prawdopodobnie przyświeca temu założenie, że linie miałyby ułatwiać odnajdowanie danych w poszczególnych komórkach. RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 199 Na rysunku 7.16 widnieje typowy przykład tego, jak przedstawia się dane w tabeli. Każda informacja jest zamknięta we własnej komórce i oddzielona od pozostałych czarną obwódką. Pozornie ułatwia to czytanie, ale w rzeczywistości jedynie zaśmieca kompozycję. RYSunEK 7.16. Dane często przedstawia się w tabelach takich jak ta — zabałaganionych niepotrzebnymi liniami Edward R. Tufte w książce Envisioning Information wytłumaczył, że dalsze wyróżnianie informacji w ten sposób jest przykładem zasady „1+1 = 3” w działaniu. Oznacza to, że dane rozmieszczone w takiej tabeli już są graficznie zróżnicowane ze względu na samą obecność pustej przestrzeni. Kiedy przełamujesz negatywną przestrzeń linią, uzyskujesz dwa obszary negatywnej przestrzeni i linię (czyli trzy elementy), które służą do rozróżnienia tych danych. Zatem: 1+1 = 3. Co gorsza, w ten sposób powstają nowe elementy (czyli linie), które w ogóle nie przekazują żadnych informacji, a tylko zaśmiecają kompozycję. Możesz się nie zgodzić i stwierdzić, że linie mają za zadanie poprowadzić wzrok. Jak jednak wykazałem w rozdziale 6 przy omówieniu zasady kierunku, samo rozmieszczenie elementów bywa niezwykle skutecznym sposobem prowadzenia wzroku. Na rysunku 7.17 widnieją te same dane, lecz bez żadnych dekoracji. Zamiast nich zastosowałem wytłuszczenie tytułu tabeli, a dane liczbowe zapisałem kursywą. Pomiędzy tytułem a pierwszym rzędem danych znajduje się z kolei więcej przestrzeni negatywnej niż między kolejnymi rzędami. 200 DeSIgn DLA HAK ERóW RYSunEK 7.17. Wykorzystując zasadę kierunku i odpowiednio układając elementy, znacznie klarowniej przedstawisz dane w tabeli RYSunEK 7.18. Zacieniowane rzędy niekiedy pomagają w poruszaniu się po tabeli, ale innego rodzaju dekoracji należy używać sporadycznie To rzecz jasna bardzo prosta tabela. Czasami trudno poruszać się po tabelach zawierających znacznie więcej danych. Mógłbyś się zdziwić, jak bardzo da się ograniczyć dekoracje w projekcie (niezależnie od tego, czy chodzi o tabelę, czy o rozbudowany layout), ale czasami warto wykorzystać nieco więcej wyróżników graficznych. Na rysunku 7.18 widnieje ta sama tabela — tym razem jej rzędy są naprzemiennie zacieniowane. W taki sposób można ułatwić wodzenie wzrokiem po bardzo szerokich rzędach, a także podwyższyć jakość estetyczną tabeli (co samo w sobie nie jest szczególnie istotnym powodem do cieniowania). RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 201 Zauważ, że linie i tak wykorzystałem tutaj w niewielkim stopniu. Samo cieniowanie jest dobrym wskaźnikiem, który oddziela kolejne rzędy danych, a linie nie są konieczne do wskazywania granic zacieniowanych obszarów. Zewnętrzne krawędzie tabeli są jasno zakreślone krawędziami zacieniowanych rzędów, które z kolei są wyrównane z końcowymi punktami linii poziomych wskazujących początek i koniec tabeli. Takie świadome wykorzystanie dekoracji pozwala na stworzenie tabeli zarówno łatwej w odczycie, jak i przejrzystej. Dane z tabel odgrywają tu rolę przykładu usprawiedliwionego zastosowania dekoracji, jako że takie dane służą konkretniejszym celom niż prawdopodobnie większość innych informacji, które znajdą się w Twoich projektach. Tę samą zasadę można zastosować przy projektowaniu layoutu bloga oraz interfejsów aplikacji społecznościowych czy mobilnych. Najważniejsze jest to, żeby nad zamieszczeniem każdego elementu kompozycji — każdej grafiki, dekoracji i połaci przestrzeni negatywnej niezależnie od wielkości — przynajmniej trochę się zastanowić. Hierarchia w działaniu Skoro już wiesz, jak wszelkie wpływające na hierarchię czynniki działają razem i z osobna, jesteś już lepiej przygotowany do zapoznania się z procesem myślowym stojącym za bardziej skomplikowanymi projektami. W zaprojektowanym przez agencję designerską Sleepover (http://sleepoversf.com) magazynie internetowym The Bygone Bureau (http://bygonebureau.com) mamy do czynienia z bardzo skutecznym i subtelnym zarządzaniem czynnikami decydującymi o hierarchii (rysunek 7.19). Rezultatem tego jest bardzo prosty i przejrzysty projekt, który zachęca czytelnika do zatrzymania się na dłużej przy właściwej treści. Jest w tym sens, ponieważ w deklaracji programowej pisma redaktorzy stwierdzili: „Wierzymy w publikowanie dobrych pomysłów i dopracowanej prozy”. Doceniają język, a cały projekt strony koncentruje się właśnie na słowie. 202 DeSIgn DLA HAK ERóW RYSunEK 7.19. Layout i projekt The Bygone Bureau charakteryzuje się przejrzystością, ponieważ zastosowana w nim typografia jest elegancka. Przedrukowano za pozwoleniem The Bygone Bureau Projekt The Bygone Bureau jest elegancki pod względem typograficznym. Zmiany krojów są bardzo subtelne i z założenia ograniczone. Główny krój to klasyczny już Baskerville, będący jednym z pierwszych krojów przejściowych (p. rozdział 3). Baskerville wykorzystano w nagłówku czasopisma, tytułach artykułów oraz wszędzie tam, gdzie znajduje się niewiele tekstu do przyswojenia. Ze względu na czytelność tekst główny został zapisany Georgią. Jest ona bardzo podobna do Baskerville’a, ale ponieważ zaprojektowano ją konkretnie z myślą o tekście ekranowym, zapisany nią tekst główny jest o wiele czytelniejszy. Kształty Baskerville’a bywają jednak subtelniejsze i właśnie dlatego bardzo dobrze się sprawdza jako krój nagłówkowy. (Więcej o zestawianiu krojów przeczytasz w dodatku B). uWaga korzystanie z dwóch różnych krojów szeryfowych lub bezszeryfowych zwykle uznaje się za błąd. Ponieważ jednak kroje, które odczytuje się dobrze w rozmiarach właściwych tekstowi głównemu, zazwyczaj nie wyglądają najlepiej w rozmiarach bardziej odpowiednich dla nagłówków, od tej reguły są wyjątki (o czym przeczytasz w punkcie „Wyjątek od reguły” w dodatku a). RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 203 Jako że Baskerville i Georgia są tak do siebie podobne, do odróżnienia różnych typów informacji zastosowano starannie wymierzone obszary negatywnej przestrzeni, a ponadto równie skrupulatnie rozważono zmiany wielkości i grubości tekstu. Spójrz na rysunek 7.20 i zwróć uwagę na to, że odległości między tytułem, podtytułem, linią poziomą i akapitami są takie same. RYSunEK 7.20. Przestrzeń negatywna pomiędzy elementami została starannie wymierzona RYSunEK 7.21. Helveticą zapisano niektóre z metadanych artykułów, wskazując tym samym na odmienny charakter tych informacji Jak widać na rysunku 7.21, skorzystano także z Helvetiki do odróżnienia pobocznych informacji (kategoria i data) od właściwych materiałów dostępnych na stronie. W ogólnym layoucie strony głównej przewidziano miejsce dla fragmentów owych materiałów. Strona jest oparta na pięciokolumnowej siatce. Ciemne i ciężkie pole nagłówka dominuje nad kompozycją, choć jest ono zaprojektowane równie prosto jak reszta strony głównej. 204 DeSIgn DLA HAK ERóW Najnowszy artykuł jest wskazany jako najważniejszy, ponieważ ciągnie się przez dwie kolumny, ponadto został opatrzony obrazem oraz umieszczony w lewym górnym rogu, czyli tam, gdzie użytkownik zaczyna czytać. Pozostałe fragmenty zajmują po jednej kolumnie i są oznaczone kolorystycznie według kategorii. Muszę przyznać, że pastelowe kolory są trochę mało czytelne, ale mimo to elegancka typografia robi wrażenie. Poszczególne fragmenty artykułów zostały od siebie oddzielone bardzo cienkimi i lekkimi liniami, zarówno poziomymi, jak i pionowymi. Ich obecność być może nie jest nieodzowna, ale z pewnością mniej kłują w oczy niż te, które wystąpiły we wcześniejszych przykładach tabel. Do oddzielenia paska bocznego od reszty layoutu użyto linii podwójnej zamiast grubszej lub ciemniejszej, co zwiększa elegancję stylistyczną kompozycji. Niezwykle ciekawą decyzję podjęto w sprawie hierarchii rządzącej layoutem stron wpisów The Bygone Bureau. Zamiast umieścić nagłówek w lewym górnym rogu strony — co jest w zasadzie powszechną konwencją internetową — umieszczono tam tytuł artykułu. To wskazuje na przekonanie twórców kompozycji o wartości rzeczywistych treści i podważa wspomnianą konwencję: czy nazwa strony zawsze jest ważniejsza od zawartości strony? Ponadto nadanie tytułowi większej rangi sprawia, że znajduje się on wyżej w pliku HTML niż nazwa strony, co wbrew pozorom ma sens z punktu widzenia SEO. W projekcie The Bygone Bureau zastosowano typografię w elegancki sposób — poprzez nanoszenie subtelnych hierarchicznych zmian i jednoczesne odzwierciedlenie założeń przyświecających tej stronie. Wiedza w praktyce Wyzwania stojące współcześnie przed designerami wiążą się z niezwykle złożonymi relacjami hierarchicznymi. Jednocześnie projektanci mogą formować te hierarchię, wykorzystując wiele różnych środków. Zrozumienie, jak takie środki i czynniki oddziałują pojedynczo na hierarchię, jest fundamentalnym warunkiem dalszej nauki designu. RoZDZIał SIóDMy OŻY WIć INFOR MACJE: HIER ARCHIA WIZUALNA 205 Kiedy będziesz miał styczność z atrakcyjnym interfejsem czy choćby plakatem, przyjrzyj się dokładnie, w jaki sposób projektant utworzył hierarchię informacji. Jakie czynniki wykorzystał do rozróżnienia poszczególnych typów informacji? Kiedy będziesz coś projektował, spróbuj pozbyć się nadmiaru dekoracji, używaj tylko jednego kroju oraz zacznij od zapisania wszystkiego pismem o jednakowym rozmiarze. Zobacz, jak sprawnie uda Ci się ustanowić hierarchię przy takich ograniczeniach. Poeksperymentuj trochę, po czym wprowadź dodatkowe czynniki, na przykład wytłuszczony druk lub tekst o innej wielkości. Spróbuj wykorzystać zróżnicowaną skalę rozmiarów pisma — na przykład taką, jaką opisałem w tym rozdziale. Możesz skorzystać z podanych przeze mnie wielkości tekstu lub poeksperymentować z tworzeniem własnej skali na podstawie proporcji przedstawionych w rozdziale 5. Kiedy już przyzwyczaisz się do korzystania z określonej skali, zagadnienie doboru właściwej wielkości tekstu będziesz mieć w małym palcu. 206 DeSIgn DLA HAK ERóW 0 1 1 0 1 0 1 1 0 1 0 1 0 1 0 1 0 1 1 0 1 0 1 0 1 0 0 1 0 1 0 1 0 1 0 0 1 0 1 0 1 0 1 0 0 1 0 0 1 0 0 1 0 1 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 1 1 0 1 1 1 0 1 0 1 0 1 0 0 1 0 1 0 0 1 0 1 1 0 1 1 1 0 1 0 1 0 1 0 0 1 0 1 0 0 1 0 1 0 1 0 1 1 0 1 1 1 0 1 0 1 0 1 0 0 1 0 1 0 0 1 0 1 0 1 1 0 1 0 1 0 1 0 1 1 1 0 1 0 1 0 1 0 0 1 0 1 0 0 1 0 1 0 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 0 1 0 1 0 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 1 0 1 0 0 1 1 0 0 1 0 1 0 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 1 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 1 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 1 1 0 1 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 1 1 0 1 1 1 0 1 0 1 0 1 0 0 1 0 0 1 0 1 0 1 0 0 1 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 1 1 0 1 1 1 0 1 0 1 0 1 0 0 1 0 1 0 0 1 0 1 0 1 1 0 1 0 1 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 1 1 0 1 1 1 0 1 0 1 0 1 0 0 1 0 1 0 0 1 0 1 0 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 1 1 0 1 1 1 0 1 0 1 0 1 0 0 1 0 1 0 0 1 0 1 0 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 0 1 Skorowidz A a, Patrz: znacznik a ADHD, 254 Adobe Garamond, Patrz: krój pisma Adobe Garamond Adobe Kuler, 296 AdWords, 107 AirBNB, 18, 40 akapit, 329 alfabet, 64 Amazee Labs, 284 Analytics, Patrz: Google Analytics anchor text, 114 antyaliasing, 57, 85 antykwa, Patrz: krój pisma antykwa apertura, 55 Apple, 40, 59, 81 Aqua, 98, 99, 100 Arial, Patrz: krój pisma Arial Art Nouveau, 73 Augereau Antoine, 79 autorytet, Patrz: PageRank B barwa, Patrz: kolor Baskerville, Patrz: krój pisma Baskerville Baskerville John, 71 Bazylika świętego Piotra, 27 blog, 100, 107, 115, 115, 154, 158, 169, 182 Blogger, 96 Bodoni, Patrz: krój pisma Bodoni Bodoni Giambattista, 305 bot, 109, 111 Brewer Cynthia, 229 Briey, 128 Bringhurst Robert, 145, 334 Brown Sam, 291 brutalizm, 129 Burj Khalifa, 59 C Caerwys View, 280 Caillebotte Gustave, 94 Carter Matthew, 83 Century Gothic, Patrz: Century Gothic cesarz Hadrian, 25 Chicago, Patrz: krój pisma Chicago Chir
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Design dla hakerów. Sekrety genialnych projektów
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ą: