design dla hakerów. sekrety genialnych projektów pełna wersja.pdf

Spis treści

Wprowadzenie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Design jako nowa piśmienność . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Postawa hakera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Problem z designem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Część I Zrozumieć design

R o Z D Z I a ł 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

R o Z D Z I a ł 2

Funkcje designu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Projektowanie graiczne 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 graiczna . . . . . . . . . . . . . . . . . . . . . . . . 39

Oprawa graiczna 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

D e S I g n D L A H A K E R óW

Część II Medium i forma

R o Z D Z I a ł 3

Medium i forma w typograii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 typograii 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

R o Z D Z I a ł 4

Technologia i kultura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Jak powstają trendy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Narodziny impresjonizmu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Graika 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

S p I S T R E ś C I

Część III Kompozycja

R o Z D Z I a ł 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

R o Z D Z I a ł 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

D e S I g n D L A H A K E R ó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

R o Z D Z I a ł 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

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: