Grundkurs Gutes Webdesign: Alles, was Sie über Gestaltung im Web wissen sollten

Intro -- Vorwort -- 1 Die richtige Ausrüstung -- 1.1 Was Sie brauchen -- 1.1.1 Stift und Papier -- 1.1.2 Software und Tools zum Gestalten und Entwickeln -- 1.1.3 Browser zum Testen -- 1.1.4 FTP-Software -- 1.1.5 Für Fortgeschrittene: Arbeitsschritte automatisieren -- 1.2 Denken Sie wie eine Webdesignerin oder ein Webdesigner! -- 1.2.1 Webdesignerinnen und Webdesigner sind kreativ -- 1.2.2 Webdesignerinnen und Webdesigner kennen das Web -- 1.3 Die wichtigsten Technologien -- 1.3.1 Inhalte mit HTML -- 1.3.2 Gestaltung mit CSS -- 1.3.3 Verhalten mit JavaScript -- 1.3.4 Dynamische Inhalte und CMS -- 1.4 Zusammenfassung -- 2 Grundlagen von gutem ­Webdesign -- 2.1 Usability und User Experience -- 2.1.1 Usability: die funktionalen Ziele der Nutzerinnen und Nutzer -- 2.1.2 Mehr als Usability: User Experience -- 2.1.3 Konventionen und Faustregeln für gute Usability -- 2.1.4 Usability und Inhalte -- 2.2 Accessibility - Zugänglichkeit und ­Barrierefreiheit -- 2.2.1 Warum Accessibility wichtig ist - immer -- 2.2.2 Hilfsmittel für Menschen mit Behinderungen -- 2.2.3 Barrierefreiheit per Gesetz -- 2.2.4 Web Content Accessibility Guidelines (WCAG) -- 2.2.5 Accessibility und Webstandards -- 2.2.6 WAI-ARIA -- 2.2.7 Accessibility und Inhalte -- 2.3 Responsive Webdesign -- 2.3.1 Möglichkeiten für mobile Websites -- 2.3.2 Mobile First und Desktop First -- 2.3.3 Technische Grundlagen von Responsive Webdesign -- 2.3.4 Meta-Viewport-Element -- 2.3.5 Media Queries -- 2.4 Nachhaltigkeit -- 2.4.1 Ein alltäglicher CO2-Abdruck eines Menschen -- 2.4.2 CO2-Verbrauch einer Website messen -- 2.4.3 Prinzipien von nachhaltigem Webdesign -- 2.5 Ethik im Webdesign -- 2.6 Die Entstehung einer Website -- 2.6.1 Das Was: Websites als lebendige Designsysteme -- 2.6.2 Das Wie: neue Workflows für Websites -- 2.6.3 Fazit: Grundlagen für modernes Webdesign -- 3 Konzeption und Design.

3.1 Phasen von Konzeption und Kreation -- 3.2 Zielgruppe definieren und kennenlernen -- 3.2.1 Nutzerinnen und Nutzer kennenlernen -- 3.2.2 Personas -- 3.2.3 Customer Journey Maps -- 3.3 Grobkonzept entwickeln -- 3.3.1 Recherche -- 3.3.2 Richtung der Gestaltung festlegen -- 3.3.3 Marktanalyse -- 3.3.4 Designsprachen und -stile recherchieren -- 3.3.5 Zielformulierung -- 3.4 Der Weg zur richtigen Idee - ­Kreativitätstechniken -- 3.4.1 Brainstorming -- 3.4.2 Morphologische Matrix -- 3.4.3 Gegensatzpaare -- 3.4.4 Kreativität und Druck -- 3.5 Content-Strategie -- 3.5.1 Inhalte sammeln und bewerten -- 3.5.2 Informationsarchitektur festlegen -- 3.5.3 Seitentypen festlegen -- 3.5.4 Struktur von Seiten festlegen -- 3.5.5 UX-Writing und Wording -- 3.5.6 Content-Prototypen -- 3.6 Ideen ausarbeiten und visualisieren -- 3.6.1 Moodboards -- 3.6.2 Stylescapes -- 3.6.3 Scribbles: schnelle Skizzen -- 3.6.4 Papierprototypen: Mehr Low-Budget geht nicht -- 3.7 Ideen bewerten -- 3.7.1 Wireframes: strukturelle Skizzen -- 3.7.2 Prototypen: Interaktionen testen -- 3.7.3 Modular gestalten: Designsysteme, Pattern Libraries und Styleguides -- 3.7.4 Konzeption mit einer Projektmatrix auf den Punkt bringen -- 3.7.5 Ideen auswerten -- 3.8 Umsetzung und Ausarbeitung -- 3.8.1 Designentwürfe oder Mockups -- 3.8.2 HiFi-Prototypen: im Browser entscheiden -- 4 Layout und Komposition -- 4.1 Die Grundlagen moderner Gestaltung -- 4.1.1 Wahrnehmungsgesetze -- 4.1.2 Formen -- 4.2 Gestaltungsregeln für das Web -- 4.2.1 Klassische Gestaltungsregeln -- 4.2.2 Weißraum -- 4.2.3 Erkenntnisse aus der Nutzungsforschung -- 4.2.4 Psychologische Effekte -- 4.3 Das Box Model in CSS -- 4.3.1 Maßeinheiten in CSS -- 4.3.2 Breite und Höhe -- 4.3.3 Innenabstand -- 4.3.4 Rahmen -- 4.3.5 Ecken gestalten -- 4.3.6 Außenabstand -- 4.3.7 Das Box Model steuern -- 4.3.8 Schatten mit CSS.

4.3.9 Box Model bei Inline-Elementen -- 4.3.10 Umgang mit zu viel Inhalt -- 4.4 Layouts mit CSS -- 4.4.1 Elemente per »float« links und rechts fließen lassen -- 4.4.2 Elemente frei mit »position« anordnen -- 4.4.3 Anzeige mit »display« steuern -- 4.5 Raster - Inhalte im Layout anordnen -- 4.5.1 Pro und Kontra von Rastern -- 4.5.2 Inhalte im Raster verteilen -- 4.5.3 Aus Rastern ausbrechen -- 4.5.4 Grundlinienraster -- 4.6 Layout im Responsive Web -- 4.6.1 Typen von Layouts -- 4.6.2 Der Breakpoint, das (noch) unbekannte Wesen -- 4.6.3 Breite ist nicht alles -- 4.6.4 Strategien für responsive Darstellungen -- 4.7 Raster in CSS -- 4.7.1 Statische Raster in CSS -- 4.7.2 Einfaches responsives Raster mit float:left -- 4.7.3 Frontend-Frameworks und fertige Grids -- 4.7.4 Flexbox -- 4.7.5 CSS Box Alignment -- 4.7.6 Grid Layouts -- 5 Typografie im Web -- 5.1 Was ist Typografie? -- 5.1.1 Anatomie einer Schrift -- 5.1.2 Kategorien von Schriften -- 5.2 Websichere Schriften -- 5.3 Webfonts -- 5.3.1 Kleine Geschichte der Webfonts -- 5.3.2 Aktuelle Lizenzmodelle für Webfonts -- 5.3.3 Webfonts einbinden -- 5.3.4 Angriff des FO(U/I)T -- 5.4 Die richtige Schrift auswählen -- 5.4.1 Die Funktionen von Schrift -- 5.4.2 Auf die richtigen Assoziationen achten -- 5.4.3 Recherche zur gewählten Schrift -- 5.4.4 Schriftfamilien -- 5.4.5 Nachhaltige Typografie und Performance -- 5.4.6 Visuelle Effekte -- 5.5 Texte in HTML und CSS gestalten -- 5.5.1 Typografische Auszeichnungen -- 5.5.2 Schriftgröße -- 5.5.3 Typografische Varianten -- 5.5.4 Unterstreichungen und andere Dekorationen -- 5.5.5 Laufweite -- 5.5.6 Zeilenlänge -- 5.5.7 Textschatten -- 5.5.8 Textspalten -- 5.5.9 Textausrichtung -- 5.5.10 Zeilenabstand -- 5.5.11 Mikro-Weißraum -- 5.6 Variable Fonts -- 5.6.1 Variable Font mit CSS-Attributen steuern -- 5.6.2 Variable Fonts zu einer Website hinzufügen.

5.7 Typografische Details -- 5.7.1 Sonderzeichen in HTML -- 5.7.2 Typografische Anführungszeichen -- 5.7.3 Gedankenstrich, Apostroph und Ellipse -- 5.7.4 Silbentrennung und geschützte Leerzeichen -- 5.7.5 Gliedern von Zahlen -- 6 Navigationen und ­Interaktionen -- 6.1 Grundlagen nutzungsfreundlicher Interaktionen -- 6.1.1 Usability und Interaktionen -- 6.1.2 Accessibility und Interaktionen -- 6.2 Links: Usability und Accessibility -- 6.3 Buttons -- 6.3.1 Usability und Accessibility gewährleisten -- 6.3.2 Buttons gestalten -- 6.3.3 Social-Media-Buttons und der Datenschutz -- 6.4 Navigationen -- 6.4.1 Arten von Navigationen -- 6.4.2 Gestaltung und Positionierung von Navigationen -- 6.4.3 Interaktionsdesign bei Navigationen -- 6.5 Responsive Navigationen -- 6.5.1 Grundregeln responsiver Navigationen -- 6.5.2 Responsive Navigation mit stets sichtbaren Menüs -- 6.5.3 Responsive Navigation mit versteckten Menüs -- 6.5.4 Design-Patterns für responsive Navigationen mit versteckten Menüs -- 6.6 Formulare -- 6.6.1 HTML-Eingabefelder für Formulare -- 6.6.2 Optimieren von Formularen -- 6.7 Animationen -- 6.7.1 Bessere User Experience durch Animationen -- 6.7.2 Gestaltungsgrundsätze für Animationen der Benutzeroberfläche -- 6.7.3 Animationen als inhaltliches Gestaltungsmittel -- 6.7.4 Umsetzung in CSS -- 6.7.5 Reduced Motion Media Queries -- 6.7.6 Zugängliche Animationen -- 7 Farbe im Web -- 7.1 Kleine Farblehre -- 7.1.1 Grundbegriffe: Farbton, Helligkeit, Sättigung -- 7.1.2 Farbtemperatur -- 7.1.3 Primär-, Sekundär- und Tertiärfarben -- 7.1.4 Farbkontraste -- 7.1.5 Farbassoziationen -- 7.1.6 Die Farben im Detail -- 7.1.7 Farbharmonien -- 7.2 Farben und Farbschemata für Websites -- 7.2.1 Erste Schritte zu einem Farbschema -- 7.2.2 Der Winkelkontrast - Farben im Farbkreis -- 7.2.3 Die Methode der maximalen Kontraste -- 7.2.4 Stile und Vorbilder nutzen.

7.2.5 Mit Assoziationen zu einem Farbschema -- 7.2.6 Farbe in Designsystemen -- 7.2.7 Dunkle Gestaltungen und Dark Mode -- 7.3 Farben am Monitor und im Web -- 7.3.1 Additive und subtraktive Farbmischung -- 7.3.2 Farben in CSS angeben -- 7.3.3 Farben mit Custom Properties definieren (CSS-Variablen) -- 7.3.4 Verläufe in CSS angeben -- 7.4 Barrierefreiheit und Usability - auch bei der Farbwahl -- 8 Grafiken, Bilder und Multimedia -- 8.1 Tipps für Bildwahl und Bildgestaltung -- 8.1.1 Fotografie oder Illustration? -- 8.1.2 Mit Bildern informieren -- 8.1.3 Bilder mit Texten kombinieren -- 8.1.4 Aufmerksamkeit mit Bildern steuern -- 8.1.5 Emotionalität über Bilder herstellen -- 8.1.6 Hero-Images -- 8.1.7 Bildwirkung -- 8.1.8 Perspektiven -- 8.1.9 Fotografische Ästhetik -- 8.2 Grafiken und Bilder: frei oder lizenziert? -- 8.2.1 Freie Grafiken und Bilder verwenden -- 8.2.2 Grafiken und Bilder beauftragen und lizenzieren -- 8.3 Bilder für das Web vorbereiten -- 8.3.1 Export-Dialoge fürs Web -- 8.3.2 Wichtige Bildformate für das Web -- 8.3.3 Bilder optimieren -- 8.3.4 Den richtigen Farbraum einstellen -- 8.4 Bilder in Websites einbauen -- 8.4.1 Inhaltliche Bilder per HTML einfügen -- 8.4.2 Schmückende Bilder per CSS im Layout einfügen -- 8.5 Ein Pixel ist ein Pixel … Oder? -- 8.5.1 Geräte- und CSS-Pixel -- 8.5.2 Hochauflösende Monitore und Pixeldichte -- 8.5.3 Pixeldichte bei Bildern -- 8.6 Lösungen für responsive Bilder in der Praxis -- 8.6.1 Downsampling von inhaltlichen Bildern -- 8.6.2 Bilder flexibel machen -- 8.6.3 Bilder mit »img« und »srcset« responsiv machen -- 8.6.4 Responsive Hintergrundbilder mit CSS -- 8.7 Icons einsetzen und gestalten -- 8.7.1 Icons und Usability -- 8.7.2 Stile von Zeichen -- 8.7.3 Grundregeln für die Gestaltung von Icons -- 8.7.4 Favicons und Touch-Icons -- 8.7.5 Icon-Fonts -- 8.7.6 Icons als SVGs einbinden.