1 Der Status quo im Webdesign

23

1.1 Die Entwicklung des Webdesigns

23

1.2 Aspekte modernen Webdesigns

27

1.2.1 Gute Seiten, schlechte Seiten

27

1.2.2 Mehr als hübsch – das Design

28

1.2.3 Übersichtlich und lesbar

29

1.2.4 Struktur, Inhalte und Verhalten

30

1.2.5 Valider Quellcode – Webstandards

33

1.2.6 Websites für alle – Zugänglichkeit bzw. Accessibility und Barrierefreiheit

34

1.3 Modernes Webdesign ist flexibel

36

1.3.1 Responsiv: Flexible und anpassungsfähige Websites

36

1.3.2 Usability: Benutzerfreundlich und bedienbar

37

1.3.3 User Experience: Die Erlebnisse des Users

38

1.3.4 Moderne Workflows

39

1.3.5 Website-Tools

39

1.3.6 Künstliche Intelligenz als nächster Quantensprung

40

1.4 Das Webdesign und sein Umfeld

41

1.4.1 Content-Marketing und die Informationsüberflutung der Konsumenten

42

1.4.2 Werteveränderung in der Gesellschaft

43

1.5 Webdesign ist Coden, und Code ist Design

44

1.6 Der Kontext zählt

46

2 Webdesign-Projektmanagement

49

2.1 Das Projekt

49

2.1.1 Kriterien eines Projekts

49

2.1.2 Die Online-Branche

50

2.1.3 Das Projektdreieck

52

2.1.4 Die Aufgaben des Projektmanagers

53

2.2 Projektphasen

55

2.2.1 Der Projektstart und das Briefing

55

2.2.2 Das Lastenheft – die Sicht des Auftraggebers

56

2.2.3 Das Angebot

56

2.2.4 Alternative Leistungen

57

2.2.5 Projekte kalkulieren

58

2.2.6 Das Pflichtenheft – der Plan des Auftragnehmers

60

2.2.7 Der Zeitplan

61

2.2.8 Umsetzung

62

2.2.9 Spätere Änderungswünsche

63

2.2.10 Projektabschluss und Auswertung

63

2.2.11 Rechnung stellen

64

2.3 Projektkommunikation – wie sag ich es dem Kunden?

65

2.3.1 Erwartungshaltung an den Kunden

65

2.3.2 Erwartungshaltung des Kunden – Wünsche und Vorstellungen

66

2.3.3 Erstkontakt – Beratung vs. Verkauf

67

2.3.4 Die Angebotsphase

67

2.3.5 Kommunikation während des Projekts

68

2.3.6 Präsentation

69

2.3.7 Externe/freie Mitarbeiter

69

2.3.8 Der Projektabschluss

70

2.4 Erfolg oder Misserfolg

70

2.4.1 Erfolgsfaktoren

71

2.4.2 Risikomanagement

71

3 Konzeption und Strategie

73

3.1 Briefing und Recherche

73

3.1.1 Das Briefing

74

3.1.2 Das Grobkonzept

76

3.1.3 Ziele und Strategie

77

3.2 Die Analysephase

77

3.2.1 Unternehmens- und Kundenanalyse

77

3.2.2 Der Kundenkreis

80

3.2.3 Konkurrenten und Vorbilder

80

3.3 Eine Strategie fürs Webprojekt entwickeln

81

3.3.1 Rahmenbedingungen für die strategische Ausrichtung

81

3.3.2 Corporate Identity und Image

82

3.3.3 Positionierung

83

3.3.4 Alleinstellungsmerkmal

83

3.3.5 Die Rolle des Webauftritts im Marketing-Mix

84

3.3.6 Fazit: Warum eine Strategie so wichtig ist

86

3.4 Ziele der Website

86

3.4.1 Ziele formulieren

87

3.4.2 Aus Zielvorgaben Maßnahmen ableiten

88

3.4.3 Den Anwender nicht aus den Augen verlieren

88

3.5 Zielgruppenanalyse

90

3.5.1 Zielgruppenanalyse mit Fingerspitzengefühl

91

3.5.2 Verschiedene Zielgruppen

93

3.5.3 Personas: es menschelt

94

3.6 Anforderungen an das Design

97

3.6.1 Design vs. Content

97

3.6.2 Look & Feel

97

3.7 Anforderungen an die Inhalte

100

3.7.1 Inhaltstypen

100

3.7.2 Inhaltserstellung

101

3.7.3 Der Qualitätsanspruch

102

3.7.4 Bedeutung der Inhalte

103

3.8 Anforderungen an Technik und Funktionalitäten

103

3.8.1 Content-Management-Systeme

103

3.8.2 Funktionalitäten im Angebot definieren

105

3.9 Fazit zur Konzeption

106

4 Responsive Webdesign

107

4.1 Einleitung – und sie bewegen sich doch

107

4.1.1 Die Geschichte

107

4.1.2 Neue Geräte und Bildschirmgrößen

108

4.1.3 Zurück in die Zukunft – von flexibel zu statisch zu flexibel

109

4.1.4 Ganzheitliche Flexibilität – es betrifft alle

110

4.2 Responsive Strategie – Mobile first und Content first

111

4.2.1 Adaptive Layout vs. Responsive Layout

111

4.2.2 Mobile oder Content – wer ist der Erste?

113

4.2.3 Graceful Degradation vs. Progressive Enhancement

114

4.3 Ein neuer Workflow

115

4.3.1 Der alte Workflow

115

4.3.2 Der responsive Workflow

116

4.4 Die Arbeit mit Wireframes

119

4.4.1 Wireframes erstellen

119

4.4.2 Die Graue-Box-Methode

122

4.4.3 Vorteile und Grenzen von Wireframes

123

4.5 Das Design – der Gestaltungsprozess

124

4.5.1 Der kreative Prozess

124

4.5.2 Research

126

4.5.3 Ideenfindung/Brainstorming

127

4.5.4 Design-Feedback

133

4.6 Die Umsetzung

135

4.6.1 Modulares Design bzw. Atomic Design

135

4.6.2 Interaktive Prototypen

138

4.6.3 Design-Styleguide

139

4.6.4 Design-Tools

143

4.6.5 Testen und Debuggen

145

4.6.6 Code-Feintuning

147

4.7 Bestandteile einer responsiven Website

150

4.7.1 Flexible Raster

151

4.7.2 Media Queries

152

4.7.3 Flexible Bilder, Typografie und Weiteres

160

5 Informationsarchitektur

163

5.1 Einführung

163

5.1.1 Ein Alltagsbeispiel und sein Website-Pendant

164

5.1.2 Darum geht es

165

5.1.3 Die Bedeutung der Informationsarchitektur

166

5.1.4 User first

167

5.1.5 Pageflow

168

5.1.6 Findability – vom Suchen und Finden von Informationen

169

5.2 Aufgaben einer gelungenen Navigation

170

5.3 Content-Strategie

172

5.3.1 Guter Content

172

5.3.2 Guter Content und die Rolle des Webdesigners

173

5.3.3 Sammeln und Strukturieren

175

5.3.4 Produktion und Aktualität

176

5.3.5 Storytelling

178

5.4 Inhaltsstruktur entwickeln

179

5.4.1 Methoden und Tools

181

5.4.2 Gliederung

183

5.4.3 Wording

183

5.4.4 Navigationsprinzipien – den Erwartungen entsprechen

185

5.5 Durch Inhalte navigieren

187

5.5.1 Navigationsmenüs

188

5.5.2 Alternative Navigationswege

190

5.6 Fazit

195

6 Screendesign und User Interface Design

197

6.1 Die Aufgaben eines Screendesigns

197

6.1.1 Ästhetik

198

6.1.2 Orientieren und Leiten

199

6.1.3 Motivation

200

6.1.4 Interaktion

201

6.1.5 Qualität und Professionalität

201

6.1.6 Glaubwürdigkeit

202

6.2 Webdesign und die Wahrnehmung

203

6.2.1 Die menschliche Wahrnehmung

203

6.2.2 Wahrnehmungs- und Gestaltgesetze

209

6.3 User-Interface-Gestaltung

218

6.3.1 Die Leserichtung

218

6.3.2 Der Rhythmus

218

6.3.3 Visuelles Gewicht

220

6.3.4 Kontrast

224

6.3.5 Symmetrie und Asymmetrie

226

6.4 Die Prinzipien guter Webgestaltung

227

6.4.1 Einheitlichkeit

228

6.4.2 Angemessenheit

229

6.4.3 Einfachheit und Reduktion

230

6.4.4 Die Liebe zum Detail

231

6.4.5 Designprinzipien

232

6.4.6 Die Designprinzipien der »Großen«

236

7 Usability und User Experience

239

7.1 Alles beginnt mit Usability

239

7.1.1 Don’t make me think

239

7.1.2 Effektivität, Effizienz und Zufriedenheit

240

7.1.3 Usability in allen Bereichen

241

7.1.4 Usability-Tests und -Tools

242

7.1.5 Technische Analyse

246

7.2 User Experience

247

7.2.1 Die Website als Erlebnis

247

7.2.2 Look & Feel, Joy of Use und die Usability

248

7.2.3 Psychologische Trigger

250

8 Layout und Raster

255

8.1 Anatomie einer Website

255

8.1.1 Der Header-Bereich

256

8.1.2 Der Inhaltsbereich

258

8.1.3 Die Fußleiste

262

8.1.4 Der umgebende Block

263

8.2 Layouts gestalten

264

8.2.1 Erwartungskonforme Websites

264

8.2.2 Komposition und Hierarchie

267

8.2.3 Weißraum

268

8.2.4 Layoutprinzipien

269

8.2.5 Card-Design

273

8.2.6 Das Raster brechen – out of the Box

274

8.2.7 Above the Fold

276

8.3 Scrollen

278

8.3.1 Scrolleffekte und Parallax

280

8.3.2 Horizontales Scrollen

281

8.3.3 Endless Scrolling

282

8.3.4 One-Pager

282

8.4 Raster

283

8.4.1 Layoutgrundlagen

284

8.4.2 Rastersysteme

292

8.5 Ein eigenes Raster anlegen

294

8.5.1 Spalten und Spaltenabstand

295

8.5.2 Rastergestaltung in Grafikprogrammen

296

8.5.3 Raster mit HTML und CSS umsetzen

297

8.5.4 Eigene Websitelayouts

308

8.5.5 Das Flexbox-Modell

310

8.5.6 Raster mit CSS Grids

312

9 Farbe im Webdesign

317

9.1 Welche Rolle spielt die Farbe?

317

9.2 Farbe: eine Wissenschaft für sich

319

9.2.1 Licht und Farbe

319

9.2.2 Wie unsere Farbwahrnehmung funktioniert

319

9.2.3 Farbpsychologie

320

9.3 Farbsysteme

321

9.3.1 Farbkreise

322

9.3.2 RGB – das additive Farbmodell

324

9.3.3 CMYK – das subtraktive Farbmodell

324

9.3.4 Farbtiefe

325

9.3.5 Farbdefinition

326

9.3.6 Farbton, Sättigung, Helligkeit

330

9.4 Farbmanagement für das Web

336

9.4.1 Mit Farbräumen und Farbprofilen arbeiten

336

9.5 Farbwirkung

337

9.5.1 Warme, kalte und neutrale Farben

338

9.5.2 Rot

339

9.5.3 Orange

343

9.5.4 Gelb

346

9.5.5 Blau

349

9.5.6 Grün

352

9.5.7 Violett/Lila

354

9.5.8 Braun

356

9.5.9 Schwarz

358

9.5.10 Weiß

359

9.5.11 Grau

361

9.5.12 Grell, greller, Neon

363

9.5.13 Zusammenfassung Farbwirkung

364

9.6 Farbkontraste

364

9.6.1 Farbe-an-sich-Kontrast

364

9.6.2 Hell-Dunkel-Kontrast

366

9.6.3 Kalt-Warm-Kontrast

366

9.6.4 Komplementärkontrast

367

9.6.5 Quantitätskontrast

368

9.6.6 Qualitätskontrast

369

9.6.7 Simultankontrast

370

9.6.8 Bunt-Unbunt-Kontrast

370

9.6.9 Tool-Empfehlung: Unterstützung bei der Farbfindung

371

9.7 Gelungener Farbeinsatz im Webdesign

372

9.7.1 Farbe, Corporate Design und Identität

373

9.7.2 Farbverläufe

375

9.8 Farbe und Usability

379

9.8.1 Hürden bei der Farbwahrnehmung

380

9.9 Ein eigenes Farbschema entwickeln

381

9.9.1 Inspiration sammeln und Vorbilder finden

381

9.9.2 Farbinspiration in einer Farbgalerie suchen

382

9.9.3 Ein Farbschema aus einer Bildvorlage finden

383

9.9.4 Farbinspiration aus einer vorhandenen Website finden

385

9.9.5 Farbinspiration aus einer App

386

9.9.6 Einen gelungenen Bunt-Unbunt-Kontrast finden

386

9.10 Fazit

387

10 Typografie im Web

389

10.1 Grundlagen

389

10.1.1 Neue Möglichkeiten

390

10.1.2 Was ist gute Typografie?

391

10.2 Leseverhalten im Web

392

10.2.1 Prozess des Lesens

393

10.2.2 Lesen am Bildschirm

394

10.3 Schriftarten

395

10.3.1 Serifenschriften

396

10.3.2 Serifenlose Schriften

399

10.3.3 Andere Schriften

400

10.4 Schriftdarstellung im Web

403

10.4.1 Fontrendering – das Runde muss ins Eckige

403

10.4.2 Websichere Schriften

406

10.4.3 Webfonts

407

10.4.4 Webfonts-Anbieter

409

10.4.5 Text als Bild

413

10.5 Makrotypografie

414

10.5.1 Die Grundlagen: das Liniensystem

415

10.5.2 Schriftschnitte

415

10.5.3 Schriftgröße

418

10.5.4 Zeilenabstand

423

10.5.5 Schriftfarbe – Text- und Hintergrundkontrast

427

10.5.6 Zeilenlänge

429

10.5.7 Textausrichtung und Silbentrennung

430

10.5.8 Abstände und Leerraum

433

10.5.9 Schriftdefinition mit CSS

435

10.6 Mikrotypografie

436

10.6.1 Buchstaben- und Wortabstand

436

10.6.2 Anführungszeichen

437

10.6.3 Trenn- und Gedankenstriche

438

10.6.4 Texteinzug

438

10.6.5 Versalien und Kapitälchen

439

10.6.6 Zahlengliederung

441

10.6.7 Sonderzeichen

442

10.7 Gelungene Webtypografie – Textformatierungen und Gestaltungstipps

443

10.7.1 Die Schriftwahl

443

10.7.2 Die Gestaltung von Überschriften

447

10.7.3 Fließtext

450

10.7.4 Links

451

10.7.5 Listen

453

10.7.6 Tabellen

453

10.7.7 Zitate

454

10.7.8 Kaufmanns-Und

456

10.7.9 »Text-shadow«

457

10.7.10 Typografische HTML-Elemente

459

10.8 Typografische Auszeichnungen und Inspirationen

459

10.8.1 Minimalistisch

460

10.8.2 Bold Typo

461

10.8.3 Zweifarbige Headlines

462

10.8.4 Zwei Fonts in den Headlines

462

10.8.5 Lauftext

463

10.8.6 Verlaufstexte

463

10.8.7 Textkontur

464

11 Bilder und Grafiken

465

11.1 Einführung: Die Macht der Bilder

465

11.1.1 Bildauswahl

466

11.1.2 Bilder im Einsatz

468

11.1.3 Aufgaben von Bildern im Web

470

11.2 Bildquellen

473

11.2.1 Urheberrecht

473

11.2.2 Creative-Commons-Bilder

474

11.2.3 Bilder vom Kunden

475

11.2.4 Fotos und Grafiken selbst erstellen

475

11.2.5 Fotoagenturen

476

11.2.6 Fotografen beauftragen

479

11.2.7 KI-generierte Bilder

480

11.3 Motive und Bildstimmung

484

11.3.1 Menschen, Mitarbeiter und das Team

484

11.3.2 Porträts

486

11.3.3 Räumlichkeiten

489

11.3.4 Inszenierung von Produktfotos

490

11.3.5 Austauschbare Bilderwelten

492

11.4 Bildgestaltung

493

11.4.1 Bildausschnitt und -perspektive

494

11.4.2 Bildformat

494

11.4.3 Graustufen/Duplexfarben

495

11.4.4 Montagen/Collagen

498

11.4.5 Großformatige Bilder/Hintergrundbilder

498

11.4.6 Bildbearbeitung

499

11.5 Icons

501

11.5.1 Icons bringen Inhalte auf den Punkt

501

11.5.2 Aufmerksamkeit steuern und Struktur geben

502

11.5.3 Icon-Fonts

503

11.5.4 Inline-SVGs

504

11.6 Illustrationen

505

11.7 Dateiformate

507

11.7.1 Die Bildgröße

507

11.7.2 Die Bildkomprimierung

507

11.7.3 Die Auswahl des richtigen Dateiformats

508

11.7.4 Tools für die Bildoptimierung

510

11.8 Bilder in HTML und CSS

511

11.8.1 Bilder in HTML

511

11.8.2 Bilder in CSS

513

11.8.3 Responsive Bilder

514

11.8.4 Bilder auf Retina-Displays

517

11.8.5 Bildertools

520

11.9 Fazit

521

12 Navigations- und Interaktionsdesign

523

12.1 Die Hauptnavigation

523

12.1.1 Position

524

12.1.2 Umsetzung

528

12.1.3 Gestaltung

532

12.1.4 Dropdown-Menü

532

12.1.5 Mega-Dropdown-Menü

535

12.1.6 Kreative Navigationen

536

12.2 Die Subnavigation

541

12.3 Die Metanavigation

542

12.4 Die Footer-Navigation

543

12.4.1 Go-to-Top-Link

544

12.5 Navigation auf mobilen Endgeräten – responsive Navigation

545

12.5.1 Top-Nav – alles so lassen

545

12.5.2 Das »select«-Menü

548

12.5.3 Einfaches Toggle-Menü – Ein- und Ausblenden

549

12.5.4 Multi-Toggle

552

12.5.5 Off-Canvas-Menü – Rein- und Rausfahren

553

12.5.6 Navigation am unteren Rand

555

12.5.7 Gestaltungstipps für eine mobile Navigation

556

12.6 Links, Buttons und die Suche

558

12.6.1 Links

558

12.6.2 Buttons

561

12.6.3 Die Suchfeld-Navigation

566

12.6.4 Weitere Navigationselemente

569

12.7 Formulare

571

12.7.1 Eingabefelder

573

12.7.2 Rückmeldungen

574

12.7.3 Validierung

575

12.7.4 Die User Experience bei Formularen

575

12.7.5 Formulare mit HTML5

576

13 Animationen

579

13.1 Animationen mit CSS

579

13.1.1 Hover-Effekte mit CSS-Transitions

579

13.1.2 CSS-Transform – Verzerren, Skalieren und Drehen

583

13.2 Animationen und Interaktivität mit JavaScript

586

13.3 Interaktive Elemente

587

13.3.1 Bildergalerie

587

13.3.2 Tabs

588

13.3.3 Accordion

590

13.3.4 Content-Slider

591

13.3.5 Header-Slideshow

592

13.3.6 Modalboxen

593

13.3.7 Tooltip

594

13.3.8 Preloader & Ladebalken

596

13.3.9 Weitere Animationen und Effekte

597

13.4 Audiovisuelle Elemente

597

13.4.1 Das HTML5-Videoelement

597

13.4.2 Das HTML5-Audioelement

599

13.5 Fazit

600

14 Websitetypen und -stile

601

14.1 Websitetypen

601

14.1.1 Corporate Website

601

14.1.2 Portfolio

608

14.1.3 Shop

611

14.1.4 Blog

616

14.1.5 Landing Page

620

14.1.6 Microsite

622

14.1.7 Web-Apps

623

14.1.8 Newsletter

624

14.2 Webdesign-Stile und -Trends

626

14.2.1 Die ersten Webdesign-Stile

626

14.2.2 Das Web 2.0

628

14.2.3 Skeuomorphismus

628

14.2.4 Flat-Design

630

14.2.5 Material-Design

632

14.2.6 Standarddesigns

632

14.2.7 Webdesign 3.0

634

14.2.8 Fazit

635