Jason Beaird niezawodne zasady web designu. projektowanie spektakularnych witryn internetowych. wydanie ii full version.pdf

Spis treści

Przedmowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

Dla kogo jest ta książka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Co tu znajdziesz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Strona internetowa książki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Errata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Podziękowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Konwencje typograiczne użyte w książce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Przykładowy kod. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Wskazówki, ciekawostki i ostrzeżenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Rozdział 1 Układ i kompozycja . . . . . . . . . . . . . . . . . 17

Proces projektowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Poznawanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Poszukiwanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Implementacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Wyznaczanie dobrego stylu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21

Anatomia stron internetowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Teoria siatki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Reguła trójpodziału. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

960 Grid System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Równowaga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31

Równowaga symetryczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31

Równowaga asymetryczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Jedność . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Bliskość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Powtórzenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Wyróżnienie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Rozmieszczenie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Ciągłość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Izolacja. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Kontrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Proporcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Podstawowe układy stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41

Układ lewokolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Układ prawokolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Układ trójkolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

W poszukiwaniu natchnienia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Teczka z pomysłami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Nowoczesne trendy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Styl beznawigacyjny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Ekspansywna stopka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Minimalizm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Zmiana rozmiaru: układy stałe, płynne i reaktywne . . . . . . . . . . . . . . . . . . . . . . 48

Stała szerokość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Szerokość płynna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Alternatywa: układ reaktywny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Rozdzielczość ekranu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Praktyczne wykorzystanie: Southern Savers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Początek. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Rozdział 2 Kolor . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Psychologia koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Kolorystyczne skojarzenia — symbolika koloru . . . . . . . . . . . . . . . . . . . . . . . 60

Temperatura barwowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Wartość chromatyczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Saturacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Podstawy teorii koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Czerwony, żółty i niebieski czy CMYK? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Schematy kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71

Monochromatyczny schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Analogiczny schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Dopełnieniowy schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Inne schematy kolorów — dopełnieniowy rozdzielony, triada i tetrada . . . . . 83

Inne możliwości . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Tworzenie palety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Notacja szesnastkowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Narzędzia i zasoby . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Color Scheme Designer 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Adobe Kuler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

COLOURlovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Color Stream — aplikacja na iPhone’a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Pictaculous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91

Colour Contrast Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Praktyczne wykorzystanie: kolor oszczędności. . . . . . . . . . . . . . . . . . . . . . . . . . 93

Spis treści

Rozdział 3 Tekstura . . . . . . . . . . . . . . . . . . . . . . . . . 97

Punkt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Linia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Figury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101

Zaokrąglone wierzchołki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103

Obrót . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105

Figury a kompozycja. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106

Objętość i głębia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108

Perspektywa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108

Proporcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109

Światło i cień . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Deseń. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113

Tworzenie faktury. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118

Podstarzały, znoszony, nostalgiczny styl . . . . . . . . . . . . . . . . . . . . . . . . . . .118

Czysto — ziarnisto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121

Własnoręcznie zrobiony album . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123

Kapryśny styl kreskówkowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125

Tekstura minimalistyczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127

Wyznaczanie nowych trendów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128

Praktyczne wykorzystanie: wycinanie i oszczędzanie . . . . . . . . . . . . . . . . . . . . .129

Rozdział 4 Typograia. . . . . . . . . . . . . . . . . . . . . . . 133

Font a sieć . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135

Zastępowanie fontu obrazem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .137

Deklaracja @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139

Samodzielne hostowanie fontów. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139

Hosting fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140

sIFR i Cufón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141

Anatomia liter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142

Odstępy w tekście . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144

Odstępy w poziomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144

Odstępy w pionie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146

Wyrównanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146

Kroje pisma — różnice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148

Kroje szeryfowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149

Kroje bezszeryfowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151

Kroje odręczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153

Krój stały . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych

Kroje dekoratywne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157

Dingbaty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159

W poszukiwaniu fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160

Darmowe galerie fontów. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160

Komercyjne galerie fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160

Artyści indywidualni i wydawnictwa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160

Wybieranie właściwego fontu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161

Wielkość fontu i wysokość linii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163

Interpunkcja i znaki specjalne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164

Praktyczne wykorzystanie: dobrym drukiem . . . . . . . . . . . . . . . . . . . . . . . . . . .166

Rozdział 5 Obraz . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Czego szukać? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170

Potencjalne źródła obrazów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173

Brać czy robić? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173

Fotograia stockowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .174

Pomoc profesjonalisty. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .180

Skąd nie czerpać. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182

Google grabież . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182

Hotlinkowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183

Clipart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184

Twórcze wycinanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185

Transformacje obrazu w Photoshopie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189

Format plików i rozdzielczość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194

Pomysłowe stosowanie obrazów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195

Ulepszanie obrazu obrazem. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196

Podkręcanie obrazów za pomocą CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199

Praktyczne wykorzystanie: dobrym drukiem . . . . . . . . . . . . . . . . . . . . . . . . . . .202

Naprzód, w drogę! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205

Skorowidz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: