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