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 2. 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 3. 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 4. 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 5. 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 6. 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 7. 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 8. 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 9. Testen und optimieren ... 442 9.1 ... Funktionalitäten sicherstellen ... 442 9.2 ... Usability und Accessibility testen ... 449 9.3 ... Performance: Ladezeiten im Griff ... 453 10. 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 Skryť popis