1 Die richtige Ausrüstung

17

1.1 Was Sie brauchen

18

1.1.1 Stift und Papier

18

1.1.2 Software und Tools zum Gestalten und Entwickeln

18

1.1.3 Browser zum Testen

19

1.1.4 FTP-Software

20

1.1.5 Für Fortgeschrittene: Arbeitsschritte automatisieren

20

1.2 Denken Sie wie eine Webdesignerin oder ein Webdesigner!

21

1.2.1 Webdesignerinnen und Webdesigner sind kreativ

21

1.2.2 Webdesignerinnen und Webdesigner kennen das Web

24

1.3 Die wichtigsten Technologien

28

1.3.1 Inhalte mit HTML

29

1.3.2 Gestaltung mit CSS

29

1.3.3 Verhalten mit JavaScript

31

1.3.4 Dynamische Inhalte und CMS

32

1.4 Zusammenfassung

33

2 Grundlagen von gutem ­Webdesign

35

2.1 Usability und User Experience

36

2.1.1 Usability: die funktionalen Ziele der Nutzerinnen und Nutzer

36

2.1.2 Mehr als Usability: User Experience

38

2.1.3 Konventionen und Faustregeln für gute Usability

39

2.1.4 Usability und Inhalte

46

2.2 Accessibility – Zugänglichkeit und ­Barrierefreiheit

46

2.2.1 Warum Accessibility wichtig ist – immer

46

2.2.2 Hilfsmittel für Menschen mit Behinderungen

48

2.2.3 Barrierefreiheit per Gesetz

48

2.2.4 Web Content Accessibility Guidelines (WCAG)

49

2.2.5 Accessibility und Webstandards

49

2.2.6 WAI-ARIA

51

2.2.7 Accessibility und Inhalte

52

2.3 Responsive Webdesign

53

2.3.1 Möglichkeiten für mobile Websites

53

2.3.2 Mobile First und Desktop First

54

2.3.3 Technische Grundlagen von Responsive Webdesign

55

2.3.4 Meta-Viewport-Element

55

2.3.5 Media Queries

56

2.4 Nachhaltigkeit

58

2.4.1 Ein alltäglicher CO2-Abdruck eines Menschen

58

2.4.2 CO2-Verbrauch einer Website messen

59

2.4.3 Prinzipien von nachhaltigem Webdesign

59

2.5 Ethik im Webdesign

61

2.6 Die Entstehung einer Website

63

2.6.1 Das Was: Websites als lebendige Designsysteme

63

2.6.2 Das Wie: neue Workflows für Websites

65

2.6.3 Fazit: Grundlagen für modernes Webdesign

68

3 Konzeption und Design

69

3.1 Phasen von Konzeption und Kreation

70

3.2 Zielgruppe definieren und kennenlernen

71

3.2.1 Nutzerinnen und Nutzer kennenlernen

72

3.2.2 Personas

75

3.2.3 Customer Journey Maps

76

3.3 Grobkonzept entwickeln

77

3.3.1 Recherche

77

3.3.2 Richtung der Gestaltung festlegen

78

3.3.3 Marktanalyse

78

3.3.4 Designsprachen und -stile recherchieren

80

3.3.5 Zielformulierung

85

3.4 Der Weg zur richtigen Idee – ­Kreativitätstechniken

88

3.4.1 Brainstorming

88

3.4.2 Morphologische Matrix

90

3.4.3 Gegensatzpaare

90

3.4.4 Kreativität und Druck

91

3.5 Content-Strategie

91

3.5.1 Inhalte sammeln und bewerten

92

3.5.2 Informationsarchitektur festlegen

95

3.5.3 Seitentypen festlegen

100

3.5.4 Struktur von Seiten festlegen

100

3.5.5 UX-Writing und Wording

101

3.5.6 Content-Prototypen

103

3.6 Ideen ausarbeiten und visualisieren

104

3.6.1 Moodboards

104

3.6.2 Stylescapes

105

3.6.3 Scribbles: schnelle Skizzen

106

3.6.4 Papierprototypen: Mehr Low-Budget geht nicht

107

3.7 Ideen bewerten

107

3.7.1 Wireframes: strukturelle Skizzen

107

3.7.2 Prototypen: Interaktionen testen

109

3.7.3 Modular gestalten: Designsysteme, Pattern Libraries und Styleguides

111

3.7.4 Konzeption mit einer Projektmatrix auf den Punkt bringen

116

3.7.5 Ideen auswerten

118

3.8 Umsetzung und Ausarbeitung

119

3.8.1 Designentwürfe oder Mockups

119

3.8.2 HiFi-Prototypen: im Browser entscheiden

120

4 Layout und Komposition

121

4.1 Die Grundlagen moderner Gestaltung

122

4.1.1 Wahrnehmungsgesetze

122

4.1.2 Formen

127

4.2 Gestaltungsregeln für das Web

136

4.2.1 Klassische Gestaltungsregeln

136

4.2.2 Weißraum

140

4.2.3 Erkenntnisse aus der Nutzungsforschung

141

4.2.4 Psychologische Effekte

147

4.3 Das Box Model in CSS

150

4.3.1 Maßeinheiten in CSS

151

4.3.2 Breite und Höhe

152

4.3.3 Innenabstand

152

4.3.4 Rahmen

153

4.3.5 Ecken gestalten

154

4.3.6 Außenabstand

155

4.3.7 Das Box Model steuern

155

4.3.8 Schatten mit CSS

157

4.3.9 Box Model bei Inline-Elementen

158

4.3.10 Umgang mit zu viel Inhalt

158

4.4 Layouts mit CSS

159

4.4.1 Elemente per »float« links und rechts fließen lassen

159

4.4.2 Elemente frei mit »position« anordnen

163

4.4.3 Anzeige mit »display« steuern

165

4.5 Raster – Inhalte im Layout anordnen

166

4.5.1 Pro und Kontra von Rastern

166

4.5.2 Inhalte im Raster verteilen

166

4.5.3 Aus Rastern ausbrechen

167

4.5.4 Grundlinienraster

167

4.6 Layout im Responsive Web

168

4.6.1 Typen von Layouts

168

4.6.2 Der Breakpoint, das (noch) unbekannte Wesen

171

4.6.3 Breite ist nicht alles

173

4.6.4 Strategien für responsive Darstellungen

175

4.7 Raster in CSS

180

4.7.1 Statische Raster in CSS

180

4.7.2 Einfaches responsives Raster mit float:left

181

4.7.3 Frontend-Frameworks und fertige Grids

182

4.7.4 Flexbox

183

4.7.5 CSS Box Alignment

187

4.7.6 Grid Layouts

192

5 Typografie im Web

207

5.1 Was ist Typografie?

208

5.1.1 Anatomie einer Schrift

209

5.1.2 Kategorien von Schriften

210

5.2 Websichere Schriften

216

5.3 Webfonts

219

5.3.1 Kleine Geschichte der Webfonts

219

5.3.2 Aktuelle Lizenzmodelle für Webfonts

220

5.3.3 Webfonts einbinden

223

5.3.4 Angriff des FO(U/I)T

226

5.4 Die richtige Schrift auswählen

228

5.4.1 Die Funktionen von Schrift

228

5.4.2 Auf die richtigen Assoziationen achten

231

5.4.3 Recherche zur gewählten Schrift

233

5.4.4 Schriftfamilien

234

5.4.5 Nachhaltige Typografie und Performance

234

5.4.6 Visuelle Effekte

235

5.5 Texte in HTML und CSS gestalten

236

5.5.1 Typografische Auszeichnungen

236

5.5.2 Schriftgröße

237

5.5.3 Typografische Varianten

239

5.5.4 Unterstreichungen und andere Dekorationen

240

5.5.5 Laufweite

241

5.5.6 Zeilenlänge

243

5.5.7 Textschatten

243

5.5.8 Textspalten

244

5.5.9 Textausrichtung

248

5.5.10 Zeilenabstand

249

5.5.11 Mikro-Weißraum

251

5.6 Variable Fonts

251

5.6.1 Variable Font mit CSS-Attributen steuern

252

5.6.2 Variable Fonts zu einer Website hinzufügen

254

5.7 Typografische Details

255

5.7.1 Sonderzeichen in HTML

256

5.7.2 Typografische Anführungszeichen

257

5.7.3 Gedankenstrich, Apostroph und Ellipse

258

5.7.4 Silbentrennung und geschützte Leerzeichen

259

5.7.5 Gliedern von Zahlen

260

6 Navigationen und ­Interaktionen

263

6.1 Grundlagen nutzungsfreundlicher Interaktionen

264

6.1.1 Usability und Interaktionen

264

6.1.2 Accessibility und Interaktionen

265

6.2 Links: Usability und Accessibility

271

6.3 Buttons

272

6.3.1 Usability und Accessibility gewährleisten

272

6.3.2 Buttons gestalten

276

6.3.3 Social-Media-Buttons und der Datenschutz

277

6.4 Navigationen

279

6.4.1 Arten von Navigationen

279

6.4.2 Gestaltung und Positionierung von Navigationen

280

6.4.3 Interaktionsdesign bei Navigationen

288

6.5 Responsive Navigationen

295

6.5.1 Grundregeln responsiver Navigationen

295

6.5.2 Responsive Navigation mit stets sichtbaren Menüs

296

6.5.3 Responsive Navigation mit versteckten Menüs

298

6.5.4 Design-Patterns für responsive Navigationen mit versteckten Menüs

302

6.6 Formulare

307

6.6.1 HTML-Eingabefelder für Formulare

307

6.6.2 Optimieren von Formularen

308

6.7 Animationen

313

6.7.1 Bessere User Experience durch Animationen

313

6.7.2 Gestaltungsgrundsätze für Animationen der Benutzeroberfläche

314

6.7.3 Animationen als inhaltliches Gestaltungsmittel

316

6.7.4 Umsetzung in CSS

318

6.7.5 Reduced Motion Media Queries

321

6.7.6 Zugängliche Animationen

322

7 Farbe im Web

325

7.1 Kleine Farblehre

326

7.1.1 Grundbegriffe: Farbton, Helligkeit, Sättigung

326

7.1.2 Farbtemperatur

327

7.1.3 Primär-, Sekundär- und Tertiärfarben

328

7.1.4 Farbkontraste

329

7.1.5 Farbassoziationen

334

7.1.6 Die Farben im Detail

336

7.1.7 Farbharmonien

343

7.2 Farben und Farbschemata für Websites

346

7.2.1 Erste Schritte zu einem Farbschema

347

7.2.2 Der Winkelkontrast – Farben im Farbkreis

348

7.2.3 Die Methode der maximalen Kontraste

350

7.2.4 Stile und Vorbilder nutzen

354

7.2.5 Mit Assoziationen zu einem Farbschema

355

7.2.6 Farbe in Designsystemen

356

7.2.7 Dunkle Gestaltungen und Dark Mode

357

7.3 Farben am Monitor und im Web

360

7.3.1 Additive und subtraktive Farbmischung

360

7.3.2 Farben in CSS angeben

360

7.3.3 Farben mit Custom Properties definieren (CSS-Variablen)

363

7.3.4 Verläufe in CSS angeben

367

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.1.1 Fotografie oder Illustration?

374

8.1.2 Mit Bildern informieren

376

8.1.3 Bilder mit Texten kombinieren

377

8.1.4 Aufmerksamkeit mit Bildern steuern

379

8.1.5 Emotionalität über Bilder herstellen

379

8.1.6 Hero-Images

381

8.1.7 Bildwirkung

382

8.1.8 Perspektiven

384

8.1.9 Fotografische Ästhetik

385

8.2 Grafiken und Bilder: frei oder lizenziert?

387

8.2.1 Freie Grafiken und Bilder verwenden

387

8.2.2 Grafiken und Bilder beauftragen und lizenzieren

391

8.3 Bilder für das Web vorbereiten

392

8.3.1 Export-Dialoge fürs Web

392

8.3.2 Wichtige Bildformate für das Web

393

8.3.3 Bilder optimieren

398

8.3.4 Den richtigen Farbraum einstellen

398

8.4 Bilder in Websites einbauen

399

8.4.1 Inhaltliche Bilder per HTML einfügen

399

8.4.2 Schmückende Bilder per CSS im Layout einfügen

402

8.5 Ein Pixel ist ein Pixel … Oder?

404

8.5.1 Geräte- und CSS-Pixel

404

8.5.2 Hochauflösende Monitore und Pixeldichte

404

8.5.3 Pixeldichte bei Bildern

406

8.6 Lösungen für responsive Bilder in der Praxis

406

8.6.1 Downsampling von inhaltlichen Bildern

406

8.6.2 Bilder flexibel machen

407

8.6.3 Bilder mit »img« und »srcset« responsiv machen

408

8.6.4 Responsive Hintergrundbilder mit CSS

413

8.7 Icons einsetzen und gestalten

414

8.7.1 Icons und Usability

416

8.7.2 Stile von Zeichen

417

8.7.3 Grundregeln für die Gestaltung von Icons

419

8.7.4 Favicons und Touch-Icons

420

8.7.5 Icon-Fonts

423

8.7.6 Icons als SVGs einbinden

425

8.8 Nachhaltigkeit durch weniger Bilder

426

8.9 Video und Audio in HTML einbinden

427

8.9.1 Webdesign mit bewegten Bildern

427

8.9.2 Video und Audio

428

8.9.3 Container und Codecs für Video- und ­Audio-Inhalte im Web

431

8.9.4 Zugänglichkeit von Video- und Audio-Inhalten

432

8.9.5 Videos und Nachhaltigkeit

433

9 Testen und optimieren

435

9.1 Funktionalitäten sicherstellen

436

9.1.1 Browser-Statistiken abfragen

436

9.1.2 Testumgebung vorbereiten

437

9.1.3 Feature-Unterstützung prüfen und reagieren

439

9.1.4 HTML und CSS validieren

441

9.2 Usability, User Experience und Accessibility testen

442

9.2.1 Accessibility mit Tools testen

442

9.2.2 Websites ohne CSS und Bilder analysieren

444

9.2.3 Analytics

444

9.2.4 Testen mit Nutzerinnen und Nutzern

444

9.2.5 Heuristische Evaluation und Cognitive Walkthroughs

446

9.3 Performance: Lade- und Renderingzeiten im Griff

448

9.3.1 Performance als Designentscheidung

449

9.3.2 Speed-Tests und Dev-Tools nutzen

450

9.3.3 Performance-Kennzahlen auswählen und verstehen

451

9.3.4 Ungenutzten Code entfernen

454

9.3.5 Server-Anfragen optimieren

455

9.3.6 Dateigröße optimieren

458

9.3.7 Webseiten so schnell wie möglich rendern

460

9.4 Nachhaltigkeit bei der Webentwicklung

466

9.4.1 Sustainability-Budgets

466

9.4.2 Sauberer und schlanker Code

467

9.4.3 Effiziente Programmiersprache wählen

467

9.4.4 Progressive Web Apps (PWAs)

469

9.4.5 Bots blockieren

469

9.5 Nachhaltigkeit beim Webhosting

470

9.5.1 Around the world

470

9.5.2 Green Webhosting

470