Grundkurs Gutes Webdesign

Vorwort . . . 15
1. Die richtige Ausrüstung . . . 17

1. 1 . . . Was Sie brauchen . . . 18
1. 2 . . . Denken Sie wie eine Webdesignerin oder ein Webdesigner! . . . 21
1. 3 . . . Die wichtigsten Technologien . . . 28
1. 4 . . . Zusammenfassung . . . 33

2. Grundlagen von gutem Webdesign . . . 35

2. 1 . . . Usability und User Experience . . . 36
2. 2 . . . Accessibility -- Zugänglichkeit und Barrierefreiheit . . . 46
2. 3 . . . Responsive Webdesign . . . 53
2. 4 . . . Nachhaltigkeit . . . 58
2. 5 . . . Ethik im Webdesign . . . 61
2. 6 . . . Die Entstehung einer Website . . . 63

3. Konzeption und Design . . . 69

3. 1 . . . Phasen von Konzeption und Kreation . . . 70
3. 2 . . . Zielgruppe definieren und kennenlernen . . . 71
3. 3 . . . Grobkonzept entwickeln . . . 77
3. 4 . . . Der Weg zur richtigen Idee -- Kreativitätstechniken . . . 88
3. 5 . . . Content-Strategie . . . 91
3. 6 . . . Ideen ausarbeiten und visualisieren . . . 104
3. 7 . . . Ideen bewerten . . . 107
3. 8 . . . Umsetzung und Ausarbeitung . . . 119

4. Layout und Komposition . . . 121

4. 1 . . . Die Grundlagen moderner Gestaltung . . . 122
4. 2 . . . Gestaltungsregeln für das Web . . . 136
4. 3 . . . Das Box Model in CSS . . . 150
4. 4 . . . Layouts mit CSS . . . 159
4. 5 . . . Raster -- Inhalte im Layout anordnen . . . 166
4. 6 . . . Layout im Responsive Web . . . 168
4. 7 . . . Raster in CSS . . . 180

5. Typografie im Web . . . 207

5. 1 . . . Was ist Typografie? . . . 208
5. 2 . . . Websichere Schriften . . . 216
5. 3 . . . Webfonts . . . 219
5. 4 . . . Die richtige Schrift auswählen . . . 228
5. 5 . . . Texte in HTML und CSS gestalten . . . 236
5. 6 . . . Variable Fonts . . . 251
5. 7 . . . Typografische Details . . . 255

6. Navigationen und Interaktionen . . . 263

6. 1 . . . Grundlagen nutzungsfreundlicher Interaktionen . . . 264
6. 2 . . . Links: Usability und Accessibility . . . 271
6. 3 . . . Buttons . . . 272
6. 4 . . . Navigationen . . . 279
6. 5 . . . Responsive Navigationen . . . 295
6. 6 . . . Formulare . . . 307
6. 7 . . . Animationen . . . 313

7. Farbe im Web . . . 325

7. 1 . . . Kleine Farblehre . . . 326
7. 2 . . . Farben und Farbschemata für Websites . . . 346
7. 3 . . . Farben am Monitor und im Web . . . 360
7. 4 . . . Barrierefreiheit und Usability -- auch bei der Farbwahl . . . 371

8. Grafiken, Bilder und Multimedia . . . 373

8. 1 . . . Tipps für Bildwahl und Bildgestaltung . . . 374
8. 2 . . . Grafiken und Bilder: frei oder lizenziert? . . . 387
8. 3 . . . Bilder für das Web vorbereiten . . . 392
8. 4 . . . Bilder in Websites einbauen . . . 399
8. 5 . . . Ein Pixel ist ein Pixel . . . Oder? . . . 404
8. 6 . . . Lösungen für responsive Bilder in der Praxis . . . 406
8. 7 . . . Icons einsetzen und gestalten . . . 414
8. 8 . . . Nachhaltigkeit durch weniger Bilder . . . 426
8. 9 . . . Video und Audio in HTML einbinden . . . 427

9. Testen und optimieren . . . 435

9. 1 . . . Funktionalitäten sicherstellen . . . 436
9. 2 . . . Usability, User Experience und Accessibility testen . . . 442
9. 3 . . . Performance: Lade- und Renderingzeiten im Griff . . . 448
9. 4 . . . Nachhaltigkeit bei der Webentwicklung . . . 466
9. 5 . . . Nachhaltigkeit beim Webhosting . . . 470

Index . . . 473