|
 |
|
Galileo Design. Know-how für Kreative.
|
 |
Modernes Webdesign
Gestaltungsprinzipien, Webstandards, Praxis
978-3-8362-1109-3 |
| Inhaltsverzeichnis |
|---|
Teil I: ... Das Design
1 ... Webdesign und Webstandards ...
17
1.1 ... Webdesign, was ist das
eigentlich? ... 17
1.2 ... Wie funktionieren (X)HTML und
CSS? ... 20
... 1.2.1 ... (X)HTML ... 21
... 1.2.2 ... CSS ... 21
1.3 ... Die Prinzipien modernen
Webdesigns ... 23
... 1.3.1 ... »Seite« ist nicht gleich
»Seite«! ... 23
... 1.3.2 ... Webseiten sehen nicht in
jedem Browser gleich aus ... 26
... 1.3.3 ... Des Kaisers neue Kleider
... 30
... 1.3.4 ... Besser mit Standards ...
32
... 1.3.5 ... Sagt Ihr Quellcode, was
Sie meinen? ... 37
... 1.3.6 ... Barrierefreiheit ... 40
... 1.3.7 ... Barrierearmut ... 42
... 1.3.8 ... Usability ... 43
... 1.3.9 ... Informationsarchitektur
... 46
1.4 ... Checklisten ...47
... 1.4.1 ... Eine gute Startseite ...
47
... 1.4.2 ... Gute Praktiken für
Navigationen ... 47
... 1.4.3 ... Webstandards,
Zugänglichkeit und Usability ... 48
2 ... Gestaltung und Layout ... 51
2.1 ... Die visuelle Wahrnehmung und
ihre Gesetze ... 51
... 2.1.1 ... Umfeld und Figur-Trennung
... 52
... 2.1.2 ... Der Goldene Schnitt ...
52
... 2.1.3 ... Gute Gestalt und Prägnanz
... 54
... 2.1.4 ... Nähe ... 54
... 2.1.5 ... Gleichheit oder
Ähnlichkeit ... 55
... 2.1.6 ... Geschlossenheit ... 56
... 2.1.7 ... Erfahrung und Vertrautheit
... 57
... 2.1.8 ... Einfachheit und Harmonie
... 57
... 2.1.9 ... Symmetrie und Asymmetrie
... 58
... 2.1.10 ... Visuelles Gewicht ...
59
... 2.1.11 ... Linien und Flächen ...
60
2.2 ... Website-Layouts und ihre
Elemente ... 62
... 2.2.1 ... Weißraum ... 64
... 2.2.2 ... Klassische Spaltenlayouts
... 64
... 2.2.3 ... Sonderfall
Gestaltungsraster ... 65
... 2.2.4 ... Breite und Höhe eines
Layouts ... 66
... 2.2.5 ... Ein CSS-Layout zu
gestalten heißt, Boxen auszurichten ...
68
... 2.2.6 ... Zusammenfallende
Außenabstände ... 74
... 2.2.7 ... Positionierung von
Layoutelementen ... 75
... 2.2.8 ... Die
Positionierungsmöglichkeiten in der
Praxis ... 79
... 2.2.9 ... Gestaltungsraster in
Theorie und Praxis ... 95
2.3 ... So geht's: ein Gestaltungsraster
in CSS umsetzen ... 99
3 ... Typografie ... 105
3.1 ... Klassifikation von Schrift ...
106
3.2 ... Lesbarkeit ... 107
... 3.2.1 ... Schriftempfinden und
Schriftmischung ... 107
... 3.2.2 ... Schriften für das Web ...
109
... 3.2.3 ... Zeilenbreite und Satz ...
110
... 3.2.4 ... Zeilenabstand ... 113
... 3.2.5 ... Kontrast und Farbe ...
114
3.3 ... Schriftformatierung für das Web
... 115
... 3.3.1 ... Schriftgrößen und Abstände
für moderne Webseiten ... 115
... 3.3.2 ... Große Schriften und
Schriftglättung ... 117
... 3.3.3 ... Welche Möglichkeiten der
Formatierung sind möglich und sinnvoll?
... 117
... 3.3.4 ... Warum Sie die
Basisschriftgröße nicht in Pixel
definieren sollten ... 119
... 3.3.5 ... Der vertikale Rhythmus
einer Webseite ... 122
3.4 ... Schreibweisen ... 125
3.5 ... Checkliste: Das ist gute
Web-Typografie ... 126
4 ... Farbe ... 129
4.1 ... Farbe am Monitor und im Web ...
130
4.2 ... Farbwirkung ... 131
4.3 ... Farbkontrast und Farbabstufungen
... 131
4.4 ... Hürden für die Farbwahrnehmung
... 133
4.5 ... Farbe für Webseiten ... 135
... 4.5.1 ... Ein Farbschema entwickeln
... 136
... 4.5.2 ... Aktuelle Richtungen und
Entwicklungen ... 138
4.6 ... Checkliste: Farbe für Webseiten
... 142
5 ... Medien ... 145
5.1 ... Mediennutzung und Rechte ...
145
5.2 ... Wo Sie Grafiken, Illustrationen
und Fotos finden ... 146
5.3 ... Animationen, Sounds und Musik
finden ... 148
5.4 ... Dateiformate und ihr Einsatz auf
Webseiten ... 150
... 5.4.1 ... Bilder, Grafiken und Fotos
... 150
... 5.4.2 ... Flash auf Websites ...
151
... 5.4.3 ... Animationen und Ton ...
153
... 5.4.4 ... Tabellen, Briefe,
Handbücher und andere Dokumente ...
156
5.5 ... Checkliste Medien ... 157
6 ... Werkzeugkasten ... 159
6.1 ... Inspiration am Arbeitsplatz ...
159
6.2 ... Bildbearbeitungsprogramme ...
160
6.3 ... Wireframes gestalten ... 161
6.4 ... Editoren für Windows, Mac OS X
und Unix im Überblick ... 163
6.5 ... Eine komfortable Arbeitsumgebung
... 167
6.6 ... Firefox als Arbeitsbrowser und
dessen Erweiterungen ... 169
6.7 ... Ein Testbrowserpaket schnüren
... 171
6.8 ... Workflow für modernes Webdesign
... 172
... 6.8.1 ... Projektdefinition ...
173
... 6.8.2 ... Analyse ... 174
... 6.8.3 ... Konzept ... 174
... 6.8.4 ... Entwurf ... 174
... 6.8.5 ... Präsentation ... 174
... 6.8.6 ... Umsetzung ... 175
... 6.8.7 ... Test und Korrektur ...
176
... 6.8.8 ... Browserspezifisches
Vorgehen ... 179
... 6.8.9 ... Abschluss ... 183
Teil II: ... Die Technik
7 ... (X)HTML im Überblick ... 187
7.1 ... Mit Basisvorlagen schneller
arbeiten ... 187
7.2 ... (X)HTML ... 188
... 7.2.1 ... DOCTYPE ... 189
... 7.2.2 ... HEAD ... 190
... 7.2.3 ... BODY ... 191
... 7.2.4 ... Kommentare ... 192
... 7.2.5 ... Identifizierung mit
»class« und »id« ... 192
... 7.2.6 ... DIV ... 193
7.3 ... Die wichtigsten (X)HTML-Elemente
... 194
... 7.3.1 ... H1 bis H6 ... 194
... 7.3.2 ... P, EM, STRONG und CODE ...
195
... 7.3.3 ... Zitate mit BLOCKQUOTE ...
196
... 7.3.4 ... Hyperlinks mit A ... 197
... 7.3.5 ... Aufzählungen in Listen ...
197
... 7.3.6 ... Bilder im Quelltext mit
IMG ... 200
... 7.3.7 ... Formulare mit FORM ...
201
... 7.3.8 ... Praxis: Blindtexte für die
Vorlagen erstellen ... 208
7.4 ... Mikroformate ergänzen (X)HTML
... 209
8 ... CSS im Überblick ... 213
8.1 ... CSS einbinden ... 214
8.2 ... Werte in CSS definieren ...
215
8.3 ... Die Rangfolge von Formatvorlagen
... 216
8.4 ... Ordnung im Stylesheet ... 219
8.5 ... Pseudoklassen und -elemente ...
223
8.6 ... Farben und Hintergründe ...
224
8.7 ... Die Verwendung transparenter
PNGs ... 228
8.8 ... Schrift und Text ... 232
... 8.8.1 ... Praktische Beispiele für
die Formatierung von Texten und
Überschriften ... 234
... 8.8.2 ... Exkurs:
Image-Replacement-Techniken ... 240
8.9 ... Listen ... 241
... 8.9.1 ... Praxis: Gestaltung einer
vertikalen Navigationsleiste ... 241
... 8.9.2 ... Praxis: Gestaltung einer
horizontalen Navigationsleiste ... 244
... 8.9.3 ... Praxis: Reiter-Navigation
per Sliding Doors ... 245
8.10 ... Tabellen ... 248
9 ... Arbeitsvorlagen gestalten ...
253
9.1 ... Basisvorlage (X)HTML ... 253
9.2 ... Basisvorlage CSS ... 256
9.3 ... Basisvorlage für das
Druckstylesheet ... 261
9.4 ... Photoshop ... 263
9.5 ... Basisvorlage Photoshop ... 263
... 9.5.1 ... Ebenengruppe »content« ...
265
... 9.5.2 ... Ebenengruppe »sidebar« ...
265
... 9.5.3 ... Ebenengruppe »footer« ...
266
... 9.5.4 ... Ebenengruppe »header« ...
266
... 9.5.5 ... Ebenengruppe »tools« ...
266
... 9.5.6 ... Mit der Basisvorlage in
Photoshop arbeiten ... 267
... 9.5.7 ... Mögliche Erweiterungen
dieser Vorlage ... 267
Teil III: ... Die Praxis
10 ... Ein Beispielprojekt ... 271
10.1 ... Brainstorming für den
Projektstart ... 271
10.2 ... Die Konfiserie »Schokoladen«
... 272
10.3 ... Konzept ... 273
10.4 ... Entwürfe ... 275
10.5 ... Das Farbschema gestalten ...
276
10.6 ... Umsetzung des Entwurfs in
(X)HTML und CSS ... 286
... 10.6.1 ... Schritt 1: Umbenennen und
einfärben ... 288
... 10.6.2 ... Schritt 2: Der
Kopfbereich ... 291
... 10.6.3 ... Schritt 3: Der
Hauptinhaltsbereich ... 295
... 10.6.4 ... Schritt 4: Der
Seitenleistenbereich ... 300
... 10.6.5 ... Schritt 5: Der Seitenfuß
... 307
... 10.6.6 ... Schritt 6: Finetuning ...
307
... 10.6.7 ... Schritt 7: Eine
Unterseite gestalten ... 316
10.7 ... Reflexion ... 318
11 ... Ein WordPress-Theme gestalten
... 321
11.1 ... Was ist WordPress? ... 321
11.2 ... Technische Voraussetzungen für
WordPress ... 322
11.3 ... Die wichtigsten Bestandteile
eines WordPress-Themes ... 322
... 11.3.1 ... Templates ... 322
... 11.3.2 ... Template-Tags ... 324
11.4 ... Vom Template zum Theme ...
327
... 11.4.1 ... WordPress lokal
installieren ... 327
... 11.4.2 ... Das Template wird zum
Theme ... 329
... 11.4.3 ... Plug-ins installieren ... 340
12 ... Ausblick: Was bringt die
Zukunft? ... 347
12.1 ... CSS 3 ... 347
... 12.1.1 ... Selektoren ... 347
... 12.1.2 ... Ein alternatives
Box-Modell kommt hinzu ... 350
... 12.1.3 ... Neuerungen im Umgang mit
Bildern ... 352
12.2 ... Das Web 2.0, »Eye Candy« und
jQuery ... 356
Index ... 363
 Zurück zu »Modernes Webdesign«
|
|
|
|
|
|
