Aus dem Inhalt:

Gestaltungsgrundlagen Ideen finden und bewerten Typografie, Webfonts Farblehre, Farbe im Web Grafiken, Bilder, Icons Buttons, Links, Navigation Website-Konzeption Informationsarchitektur CSS-Layouts, Raster HTML5 und CSS3 Retina-Displays, Responsive Webdesign Usability, Barrierefreiheit Testen und optimieren Suchmaschinenoptimierung

Vorwort ... 15

1. Die richtige Ausrüstung ... 18

1.1 ... Was Sie für diesen Kurs brauchen ... 18

1.2 ... Denken Sie wie ein Webdesigner! ... 21

1.3 ... Die wichtigsten Technologien ... 32

1.4 ... Zusammenfassung ... 37

1. Grundlagen von gutem Webdesign ... 40

2.1 ... Usability und User Experience ... 40

2.2 ... Accessibility -- Zugänglichkeit und Barrierefreiheit ... 50

2.3 ... Responsive Webdesign ... 56

2.4 ... Die Entstehung einer Website ... 61

2.5 ... Grundlagen für modernes Webdesign ... 69

1. Konzeption & Design ... 72

3.1 ... Phasen von Konzeption und Kreation ... 72

3.2 ... Zielgruppe definieren und Nutzer kennenlernen ... 74

3.3 ... Das Konzept entwickeln: Analysephase ... 77

3.4 ... Der Weg zur richtigen Idee -- Kreativitätstechniken ... 85

3.5 ... Content-Strategie ... 91

3.6 ... Ideen ausarbeiten und visualisieren ... 100

3.7 ... Ideen bewerten ... 104

3.8 ... Umsetzung und Ausarbeitung ... 116

1. Layout und Komposition ... 120

4.1 ... Die Grundlagen moderner Gestaltung ... 120

4.2 ... Gestaltungsregeln für das Web ... 135

4.3 ... Das Box Model in CSS ... 151

4.4 ... Layouts mit CSS ... 158

4.5 ... Raster -- Inhalte im Layout anordnen ... 166

4.6 ... Layout im Responsive Web ... 170

4.7 ... Raster in CSS3 ... 184

1. Typografie im Web ... 206

5.1 ... Was ist Typografie? ... 206

5.2 ... Kategorien von Schriften ... 208

5.3 ... Websichere Schriften ... 215

5.4 ... Webfonts ... 221

5.5 ... Die richtige Schrift auswählen ... 232

5.6 ... Texte in HTML und CSS gestalten ... 241

5.7 ... Detailtypografie ... 261

1. Navigationen & Interaktionen ... 272

6.1 ... Grundlagen nutzerfreundlicher Interaktionen ... 272

6.2 ... Links ... 278

6.3 ... Buttons ... 279

6.4 ... Navigationen ... 284

6.5 ... Responsive Navigationen ... 299

6.6 ... Formulare ... 313

6.7 ... Animationen ... 317

1. Farbe im Web ... 330

7.1 ... Kleine Farblehre ... 330

7.2 ... Farbkontraste ... 334

7.3 ... Farbassoziationen ... 339

7.4 ... Farbharmonien ... 350

7.5 ... Farben und Farbschemata für Webseiten ... 356

7.6 ... Farben am Monitor und im Web ... 364

1. Grafiken, Bilder und Multimedia ... 376

8.1 ... Tipps für Bildwahl und Bildgestaltung ... 376

8.2 ... Freie Grafiken und Bilder verwenden ... 390

8.3 ... Grafiken und Bilder einkaufen ... 394

8.4 ... Bilder für das Web optimieren ... 396

8.5 ... Bilder in Websites einbauen ... 404

8.6 ... Ein Pixel ist ein Pixel ... Oder? ... 409

8.7 ... Lösungen für responsive Bilder in der Praxis ... 412

8.8 ... Icons einsetzen und gestalten ... 419

8.9 ... Grafik-Vermeidungsstrategien ... 433

8.10 ... Video und Audio ... 436

1. Testen und optimieren ... 442

9.1 ... Funktionalitäten sicherstellen ... 442

9.2 ... Usability und Accessibility testen ... 449

9.3 ... Performance: Ladezeiten im Griff ... 453

1. Beispielprojekt ... 468

10.1 ... Konzeption ... 468

10.2 ... Layout ... 475

10.3 ... Stimmige Helligkeiten und Makro-Weißraum mit der Grey-Box-Methode ... 479

10.4 ... Typografie ... 481

10.5 ... Farben ... 486

10.6 ... Bilder ... 488

10.7 ... Interaktionen ... 494

10.8 ... Optimieren ... 499

Index ... 505