Grundkurs gutes Webdesign - Alles, was Sie über Gestaltung im Web wissen müssen
von: Björn Rohles
Rheinwerk Design, 2017
ISBN: 9783836261029
Sprache: Deutsch
511 Seiten, Download: 66190 KB
Format: PDF, auch als Online-Lesen
geeignet für:
| Vorwort | 15 | ||
| 1 Die richtige Ausrüstung | 18 | ||
| 1.1 Was Sie für diesen Kurs brauchen | 18 | ||
| Stift und Papier | 18 | ||
| Software und Tools zum Visualisieren und Entwickeln | 18 | ||
| Browser zum Testen | 19 | ||
| FTP-Software | 21 | ||
| Für Fortgeschrittene: Arbeitsschritte automatisieren | 21 | ||
| 1.2 Denken Sie wie ein Webdesigner! | 21 | ||
| Webdesigner sind kreativ | 22 | ||
| Webdesigner kennen das Web | 26 | ||
| 1.3 Die wichtigsten Technologien | 32 | ||
| Inhalte mit HTML | 33 | ||
| Gestaltung mit CSS | 33 | ||
| Verhalten mit JavaScript | 35 | ||
| Dynamische Inhalte mit PHP und anderen Sprachen | 36 | ||
| 1.4 Zusammenfassung | 37 | ||
| 2 Grundlagen von gutem Webdesign | 40 | ||
| 2.1 Usability und User Experience | 40 | ||
| Konventionen und Faustregeln für gute Usability | 41 | ||
| Usability und Inhalte | 48 | ||
| Mehr als Usability: User Experience | 49 | ||
| 2.2 Accessibility – Zugänglichkeit und Barrierefreiheit | 50 | ||
| Warum Accessibility wichtig ist – immer | 50 | ||
| Hilfsmittel für behinderte Menschen | 51 | ||
| Barrierefreiheit per Gesetz | 52 | ||
| Initiativen für Barrierefreiheit | 52 | ||
| Accessibility und Webstandards | 53 | ||
| ARIA Roles | 54 | ||
| Accessibility und Inhalte | 55 | ||
| 2.3 Responsive Webdesign | 56 | ||
| Möglichkeiten für mobile Websites | 56 | ||
| Mobile First und Desktop First | 57 | ||
| Technische Grundlagen von Responsive Webdesign | 58 | ||
| Meta-Viewport-Element | 58 | ||
| Media Queries | 59 | ||
| 2.4 Die Entstehung einer Website | 61 | ||
| Das Was: Websites als lebendige Design-Systeme | 61 | ||
| Das Wie: neue Workflows für Websites | 67 | ||
| 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 | ||
| Nutzer kennenlernen | 74 | ||
| Personas | 76 | ||
| 3.3 Das Konzept entwickeln: Analysephase | 77 | ||
| Recherche | 77 | ||
| Richtung der Gestaltung festlegen | 78 | ||
| Marktanalyse | 78 | ||
| Design-Sprachen und -Stile recherchieren | 79 | ||
| Zielformulierung | 83 | ||
| 3.4 Der Weg zur richtigen Idee – Kreativitätstechniken | 85 | ||
| Brainstorming | 86 | ||
| Morphologische Matrix | 87 | ||
| The Four R’s | 89 | ||
| Gegensatzpaare | 89 | ||
| Kreativität und Druck | 90 | ||
| 3.5 Content-Strategie | 91 | ||
| Inhalte sammeln und bewerten | 91 | ||
| Informationsarchitektur festlegen | 95 | ||
| Struktur von Inhalten festlegen | 97 | ||
| Seitentypen festlegen | 99 | ||
| Content-Prototypen | 99 | ||
| 3.6 Ideen ausarbeiten und visualisieren | 100 | ||
| Scribbles: schnelle Skizzen | 101 | ||
| Papier-Prototypen: Mehr Low-Budget geht nicht | 101 | ||
| Moodboards | 102 | ||
| Style Tiles | 103 | ||
| Element Collages | 104 | ||
| 3.7 Ideen bewerten | 104 | ||
| Wireframes: strukturelle Skizzen | 105 | ||
| Prototypen: Interaktionen testen | 106 | ||
| Pattern Library & Styleguides | 108 | ||
| Konzeption mit einer Projektmatrix auf den Punkt bringen | 112 | ||
| Ideen bewerten | 116 | ||
| 3.8 Umsetzung und Ausarbeitung | 116 | ||
| Design-Entwürfe oder Mockups | 117 | ||
| HiFi-Prototypen: im Browser entscheiden | 118 | ||
| 4 Layout und Komposition | 120 | ||
| 4.1 Die Grundlagen moderner Gestaltung | 120 | ||
| Wahrnehmungsgesetze | 120 | ||
| Formen | 126 | ||
| 4.2 Gestaltungsregeln für das Web | 135 | ||
| Klassische Gestaltungsregeln | 135 | ||
| Erkenntnisse aus der Nutzerforschung | 141 | ||
| Psychologische Effekte | 148 | ||
| 4.3 Das Box Model in CSS | 151 | ||
| Maßeinheiten in CSS | 151 | ||
| Breite und Höhe | 152 | ||
| Innenabstand | 153 | ||
| Rahmen | 154 | ||
| Außenabstand | 154 | ||
| Das Box Model steuern | 155 | ||
| Box Model bei Inline-Elementen | 157 | ||
| Umgang mit zu viel Inhalt | 157 | ||
| 4.4 Layouts mit CSS | 158 | ||
| Elemente per float links und rechts fließen lassen | 158 | ||
| Elemente frei mit »position« anordnen | 163 | ||
| Anzeige mit »display« steuern | 165 | ||
| 4.5 Raster – Inhalte im Layout anordnen | 166 | ||
| Pro und Kontra von Rastern | 166 | ||
| Inhalte im Raster verteilen | 167 | ||
| Aus Rastern ausbrechen | 169 | ||
| Exkurs: Grundlinienraster | 169 | ||
| 4.6 Layout im Responsive Web | 170 | ||
| Typen von Layouts | 170 | ||
| Der Breakpoint, das (noch) unbekannte Wesen | 175 | ||
| Breite ist nicht alles | 177 | ||
| Strategien für responsive Darstellungen | 179 | ||
| 4.7 Raster in CSS3 | 184 | ||
| Statische Raster in CSS | 184 | ||
| Einfaches responsives Raster in CSS | 185 | ||
| Frontend-Frameworks und fertige Grids | 187 | ||
| Flexbox | 189 | ||
| Grid Layouts | 197 | ||
| 5 Typografie im Web | 206 | ||
| 5.1 Was ist Typografie? | 206 | ||
| Anatomie einer Schrift | 207 | ||
| 5.2 Kategorien von Schriften | 208 | ||
| Antiqua-Schriften oder Serifen-Schriften | 208 | ||
| Grotesk oder serifenlose Linear-Antiqua | 210 | ||
| Schreibschriften | 212 | ||
| Schriften für Lifestyle und Postmoderne | 212 | ||
| Computerlesbare Schriften | 214 | ||
| Hybridschriften oder moderne Klassiker | 214 | ||
| 5.3 Websichere Schriften | 215 | ||
| 5.4 Webfonts | 221 | ||
| Kleine Geschichte der Webfonts | 221 | ||
| Aktuelle Lizenzmodelle für Webfonts | 222 | ||
| Webfonts einbinden | 226 | ||
| Angriff des FO(U/I)T | 229 | ||
| 5.5 Die richtige Schrift auswählen | 232 | ||
| Die Funktionen von Schrift | 232 | ||
| Auf die richtigen Assoziationen achten | 235 | ||
| Recherche zur gewählten Schrift | 238 | ||
| Schriftfamilien | 239 | ||
| Performance | 240 | ||
| Visuelle Effekte | 240 | ||
| 5.6 Texte in HTML und CSS gestalten | 241 | ||
| Typografische Auszeichnungen | 241 | ||
| Schriftgröße | 242 | ||
| Laufweite | 246 | ||
| Zeilenlänge | 249 | ||
| Textschatten | 250 | ||
| Textspalten | 251 | ||
| Textausrichtung | 256 | ||
| Zeilenabstand | 258 | ||
| Mikro-Weißraum | 260 | ||
| 5.7 Detailtypografie | 261 | ||
| Sonderzeichen in HTML | 261 | ||
| Sonderzeichen in deutscher Sprache | 262 | ||
| Sonderzeichen auf der Tastatur | 263 | ||
| Typografische Anführungszeichen | 263 | ||
| Gedankenstrich, Apostroph und Ellipse | 265 | ||
| Silbentrennung und geschützte Leerzeichen | 266 | ||
| Gliedern von Zahlen | 267 | ||
| Fortgeschrittene Detailtypografie | 269 | ||
| 6 Navigationen&Interaktionen | 272 | ||
| 6.1 Grundlagen nutzerfreundlicher Interaktionen | 272 | ||
| Usability und Interaktionen | 272 | ||
| Accessibility und Interaktionen | 273 | ||
| 6.2 Links | 278 | ||
| Usability- und Accessibility-Konventionen von Links | 278 | ||
| 6.3 Buttons | 279 | ||
| Usability und Accessibility gewährleisten | 279 | ||
| Buttons gestalten | 283 | ||
| 6.4 Navigationen | 284 | ||
| Visuelle Gestaltung und Positionierung von Navigationen | 285 | ||
| Interaktionen | 293 | ||
| 6.5 Responsive Navigationen | 299 | ||
| Grundregeln responsiver Navigationen | 299 | ||
| Responsive Navigation mit stets sichtbaren Menüs | 300 | ||
| Responsive Navigation mit versteckten Menüs | 302 | ||
| Lösungsstrategien responsiver Navigationen mit versteckten Menüs | 306 | ||
| Responsive Navigationen, die sich anpassen | 310 | ||
| 6.6 Formulare | 313 | ||
| Formulare in HTML5 | 313 | ||
| Formulare, die man gerne ausfüllt | 315 | ||
| 6.7 Animationen | 317 | ||
| Bessere User Experience durch Animationen | 317 | ||
| Gestaltungstipps für Animationen der Benutzeroberfläche | 319 | ||
| Animationen als inhaltliches Gestaltungsmittel | 321 | ||
| Umsetzung in CSS | 323 | ||
| Zugängliche Animationen | 326 | ||
| 7 Farbe im Web | 330 | ||
| 7.1 Kleine Farblehre | 330 | ||
| Grundbegriffe: Farbton, Helligkeit, Sättigung | 330 | ||
| Farbtemperatur | 332 | ||
| Primär-, Sekundär- und Tertiärfarben | 333 | ||
| 7.2 Farbkontraste | 334 | ||
| Simultankontrast | 334 | ||
| Komplementärkontrast | 334 | ||
| Hell-Dunkel-Kontrast | 336 | ||
| Grey-Box-Methode | 336 | ||
| Bunt-Unbunt-Kontrast | 337 | ||
| Quantitätskontrast | 338 | ||
| Warm-Kalt-Kontrast | 339 | ||
| 7.3 Farbassoziationen | 339 | ||
| Die Farben im Detail | 341 | ||
| 7.4 Farbharmonien | 350 | ||
| Nur eine Farbe | 351 | ||
| Mehrere Farben kombinieren | 351 | ||
| 7.5 Farben und Farbschemata für Webseiten | 356 | ||
| Erste Schritte zu einem Farbschema | 356 | ||
| Der Winkelkontrast – Farben im Farbkreis | 358 | ||
| Die Methode der maximalen Kontraste | 359 | ||
| Stile und Vorbilder nutzen | 362 | ||
| Mit Assoziationen zu einem Farbschema | 364 | ||
| 7.6 Farben am Monitor und im Web | 364 | ||
| Additive und subtraktive Farbmischung | 364 | ||
| Farben in CSS angeben | 365 | ||
| Verläufe in CSS3 angeben | 368 | ||
| Barrierefreiheit und Usability – auch bei der Farbwahl | 372 | ||
| 8 Grafiken, Bilder und Multimedia | 376 | ||
| 8.1 Tipps für Bildwahl und Bildgestaltung | 376 | ||
| Fotografie oder Illustration? | 376 | ||
| Mit Bildern informieren | 378 | ||
| Bilder mit Texten kombinieren | 379 | ||
| Aufmerksamkeit mit Bildern steuern | 381 | ||
| Emotionalität über Bilder herstellen | 381 | ||
| Hero-Images | 384 | ||
| Bildwirkung | 384 | ||
| Perspektiven | 386 | ||
| Fotografische Ästhetik | 387 | ||
| 8.2 Freie Grafiken und Bilder verwenden | 390 | ||
| Bilder als Zitate verwenden | 390 | ||
| Portale mit freien Bildern | 390 | ||
| Gemeinfreiheit und Public Domain | 391 | ||
| Creative-Commons-Inhalte verwenden | 391 | ||
| 8.3 Grafiken und Bilder einkaufen | 394 | ||
| 8.4 Bilder für das Web optimieren | 396 | ||
| Export-Dialoge fürs Web | 396 | ||
| Das GIF-Format | 398 | ||
| Das JPG-Format | 399 | ||
| Das PNG-Format | 400 | ||
| Bilder optimieren | 401 | ||
| Das SVG-Format | 402 | ||
| sRGB: den richtigen Farbraum einstellen | 404 | ||
| 8.5 Bilder in Websites einbauen | 404 | ||
| Inhaltliche Bilder per HTML einfügen | 405 | ||
| Schmückende Bilder per CSS einfügen | 407 | ||
| 8.6 Ein Pixel ist ein Pixel … Oder? | 409 | ||
| Geräte- und CSS-Pixel | 409 | ||
| Hochauflösende Retina-Monitore und Pixeldichte | 410 | ||
| Pixeldichte bei Bildern | 411 | ||
| 8.7 Lösungen für responsive Bilder in der Praxis | 412 | ||
| Downsampling von inhaltlichen Bildern | 412 | ||
| Bilder flexibel machen | 413 | ||
| Bilder mit »img« und »srcset« responsiv machen | 414 | ||
| 8.8 Icons einsetzen und gestalten | 419 | ||
| Wichtiges über Symbole | 420 | ||
| Wichtiges über Metaphern | 421 | ||
| Icons und Usability | 422 | ||
| Stile von Zeichen | 423 | ||
| Fertige Icons | 425 | ||
| Grundregeln für die Gestaltung von Icons | 426 | ||
| Favicons und Touch-Icons | 427 | ||
| Icon-Fonts | 429 | ||
| Icons als SVGs einbinden | 432 | ||
| 8.9 Grafik-Vermeidungsstrategien | 433 | ||
| Schatten mit CSS3 | 433 | ||
| Runde Ecken erzeugen | 434 | ||
| 8.10 Video und Audio | 436 | ||
| Webdesign mit bewegten Bildern | 436 | ||
| Video und Audio in HTML einbinden | 437 | ||
| Zugänglichkeit von Video- und Audio-Inhalten | 439 | ||
| 9 Testen und optimieren | 442 | ||
| 9.1 Funktionalitäten sicherstellen | 442 | ||
| Browser-Statistiken abfragen | 442 | ||
| Testumgebung vorbereiten | 443 | ||
| Feature-Unterstützung prüfen und reagieren | 447 | ||
| 9.2 Usability und Accessibility testen | 449 | ||
| Accessibility mit Tools testen | 449 | ||
| Websites ohne CSS und Bilder analysieren | 450 | ||
| Analytics | 451 | ||
| Usability überprüfen | 451 | ||
| HTML und CSS validieren | 452 | ||
| 9.3 Performance: Ladezeiten im Griff | 453 | ||
| Performance als Design-Entscheidung | 453 | ||
| Eine Frage des Protokolls | 454 | ||
| Speed-Tests nutzen | 455 | ||
| Ungenutzten Code entfernen | 455 | ||
| Requests reduzieren | 456 | ||
| Dateigröße optimieren | 459 | ||
| Webseiten so schnell wie möglich rendern | 461 | ||
| 10 Beispielprojekt | 468 | ||
| 10.1 Konzeption | 468 | ||
| Analyse | 469 | ||
| Schwerpunkte und Ansätze für die Gestaltung | 470 | ||
| Zielformulierung | 472 | ||
| Ideensuche | 472 | ||
| Content-Strategie | 474 | ||
| 10.2 Layout | 475 | ||
| 10.3 Stimmige Helligkeiten und Makro-Weißraum mit der Grey-Box-Methode | 479 | ||
| 10.4 Typografie | 481 | ||
| Auswahl der Schriften | 481 | ||
| Webfonts in Content-Prototyp einbinden | 482 | ||
| Schriften einbetten und beurteilen | 483 | ||
| Typografie in CSS | 484 | ||
| Styleguide | 485 | ||
| 10.5 Farben | 486 | ||
| 10.6 Bilder | 488 | ||
| Logo und Header-Gestaltung | 488 | ||
| 10.7 Interaktionen | 494 | ||
| Usability-Verbesserungen in der Hauptnavigation | 495 | ||
| Responsives Menü | 495 | ||
| Gestaltung von Links | 497 | ||
| 10.8 Optimieren | 499 | ||
| Layout testen | 499 | ||
| Styleguide und Projektmatrix prüfen | 502 | ||
| Performance prüfen | 503 | ||
| Index | 505 |