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

31

1.2.5 Guter Quellcode – Webstandards

33

1.2.6 Webseiten für alle – Zugänglichkeit und Barrierefreiheit

34

1.3 Modernes Webdesign ist flexibel

36

1.3.1 Flexible und anpassungsfähige Webseiten

36

1.3.2 Benutzerfreundlich und bedienbar

38

1.3.3 Moderne Workflows

38

1.4 Das Webdesign und sein Umfeld

39

1.4.1 Die Märkte und der Wettbewerb

39

1.4.2 Content-Marketing und die Informationsüberflutung der Konsumenten

40

1.4.3 Werteveränderung in der Gesellschaft

41

1.5 Webdesign ist Coden, und Code ist Design

42

1.6 Der Kontext zählt

44

2 Projektmanagement

47

2.1 Das Projekt

47

2.1.1 Was macht ein Projekt zu einem Projekt?

47

2.1.2 Die Online-Branche

48

2.1.3 Das Projektdreieck

50

2.1.4 Die Aufgaben des Projektmanagers

51

2.2 Projektphasen

52

2.2.1 Der Projektstart

53

2.2.2 Das Lastenheft – die Sicht des Auftraggebers

53

2.2.3 Das Angebot

54

2.2.4 Alternative Leistungen

55

2.2.5 Projekte kalkulieren

56

2.2.6 Das Pflichtenheft – der Plan des Auftragnehmers

58

2.2.7 Der Zeitplan

59

2.2.8 Umsetzung

60

2.2.9 Spätere Änderungswünsche

61

2.2.10 Projektabschluss und Auswertung

61

2.2.11 Rechnung stellen

62

2.3 Projektkommunikation – wie sag ich es dem Kunden?

63

2.3.1 Erwartungshaltung an den Kunden

63

2.3.2 Erwartungshaltung des Kunden – Wünsche und Vorstellungen

64

2.3.3 Erstkontakt – Beratung vs. Verkauf

65

2.3.4 Präsentation

67

2.3.5 Externe/freie Mitarbeiter

68

2.3.6 Der Projektabschluss

68

2.4 Erfolg oder Misserfolg

68

2.4.1 Erfolgsfaktoren

69

2.4.2 Risikomanagement

69

3 Konzeption und Strategie

71

3.1 Briefing und Recherche

71

3.1.1 Das Briefing

72

3.1.2 Die Recherche

73

3.1.3 Briefing

74

3.1.4 Das Grobkonzept

75

3.1.5 Ziele und Strategie

75

3.2 Unternehmens- und Kundenanalyse

76

3.2.1 Produkte und Dienstleistungen

77

3.2.2 Die Vermarktung

77

3.2.3 Der Kundenkreis

78

3.2.4 Branche und Umfeld

78

3.3 Konkurrenten und Vorbilder

79

3.3.1 Vorbilder

79

3.4 Eine Strategie fürs Webprojekt entwickeln

80

3.4.1 Rahmenbedingungen für die strategische Ausrichtung

80

3.4.2 Mehr als Anfang und Ende

81

3.4.3 Corporate Identity und Image

81

3.4.4 Positionierung

82

3.4.5 Alleinstellungsmerkmal

83

3.4.6 Die Rolle des Webauftritts im Marketing-Mix

84

3.4.7 Fazit: Warum eine Strategie so wichtig ist

85

3.5 Ziele der Webseite

86

3.5.1 Ziele formulieren

87

3.5.2 Aus Zielvorgaben Maßnahmen ableiten

87

3.5.3 Den Anwender nicht aus den Augen verlieren

88

3.6 Zielgruppenanalyse

90

3.6.1 Zielgruppenanalyse mit Fingerspitzengefühl

91

3.6.2 Verschiedene Zielgruppen

93

3.6.3 Es menschelt – die Personas

94

3.6.4 Nutzungsszenarien für Personas

96

3.7 Anforderungen Design

97

3.7.1 Design vs. Content

97

3.7.2 Look & Feel

98

3.8 Anforderungen an die Inhalte

99

3.8.1 Inhaltsarten: Texte, Bilder und Videos

100

3.8.2 Inhaltserstellung

101

3.8.3 Der Qualitätsanspruch

102

3.9 Anforderungen an Technik und Funktionalitäten

104

3.9.1 Content-Management-Systeme

104

3.9.2 Funktionalitäten

105

3.10 Fazit

106

4 Responsive Webdesign

107

4.1 Einleitung – und sie bewegen sich doch

107

4.1.1 Neue Geräte und Bildschirmgrößen

108

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

109

4.1.3 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

112

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

116

4.3.2 Der responsive Workflow

117

4.4 Wireframes erstellen

120

4.4.1 Papier-Wireframes

121

4.4.2 Gezeichnete Wireframes

121

4.4.3 Digitale Wireframes

122

4.4.4 Die Graue-Box-Methode

124

4.4.5 Vorteile und Grenzen von Wireframes

125

4.5 Das Design – der Gestaltungsprozess

126

4.5.1 Der kreative Prozess

126

4.5.2 Moodboards

131

4.5.3 Style Tiles

134

4.5.4 Design-Feedback

136

4.5.5 Die Arbeit mit Design-Programmen

137

4.6 Vom Design zur Umsetzung

138

4.6.1 Modulares Design

138

4.6.2 Interaktive Prototypen

141

4.6.3 Design-Styleguide

142

4.6.4 Design-Tools

146

4.6.5 Testen und Debuggen

149

4.6.6 Code-Feintuning

152

4.7 Bestandteile einer responsiven Webseite

155

4.7.1 Flexible Raster

156

4.7.2 Media Queries

158

4.7.3 Flexible Bilder, Typografie und Weiteres

166

5 Informationsarchitektur

169

5.1 Einführung

169

5.1.1 Ein Alltagsbeispiel und sein Webseitenpendant

170

5.1.2 Darum geht es

172

5.2 Die Bedeutung der Informationsarchitektur

172

5.2.1 Die drei Aspekte – Inhalte, Nutzer, Kontext

173

5.2.2 User first

174

5.2.3 Pageflow

175

5.2.4 Findability – vom Suchen und Finden von Informationen

176

5.3 Die Bedeutung der Navigation

177

5.3.1 Aufgaben einer gelungenen Navigation

177

5.4 Content-Strategie

179

5.4.1 Guter Content

179

5.4.2 Guter Content und die Rolle des Webdesigners

180

5.4.3 Sammeln und Strukturieren

182

5.4.4 Produktion und Aktualität

184

5.4.5 Storytelling

185

5.5 Inhaltsstruktur entwickeln

187

5.5.1 Methoden und Tools

188

5.5.2 Wording

191

5.5.3 Case Studies

192

5.5.4 Navigationsprinzipien – den Erwartungen entsprechen

195

5.6 Durch Inhalte navigieren

199

5.6.1 Navigationsmenüs

199

5.6.2 Alternative Navigationswege

201

5.7 Fazit

207

6 Screendesign und User Interface Design

209

6.1 Grundlagen Screendesign

209

6.1.1 Aufgaben eines Screendesigns

210

6.2 Webdesign und die menschliche Wahrnehmung

215

6.2.1 Sehen statt Lesen

216

6.2.2 Zwei Personen, zwei Meinungen

219

6.2.3 Selektive Wahrnehmung

220

6.3 Wahrnehmungs- und Gestaltgesetze

221

6.3.1 Das Gesetz der Nähe

222

6.3.2 Das Gesetz der Geschlossenheit

224

6.3.3 Gesetz der Ähnlichkeit

226

6.3.4 Gesetz der Erfahrung

229

6.3.5 Gesetz der Kontinuität

230

6.3.6 Gesetz der Gleichzeitigkeit

231

6.4 User Interface Gestaltung

231

6.4.1 Die Leserichtung

231

6.4.2 Der Rhythmus

232

6.4.3 Visuelles Gewicht und Kontrast

234

6.4.4 Symmetrie und Asymmetrie

239

6.5 Gute Webgestaltung

241

6.5.1 Einheit

242

6.5.2 Angemessenheit

243

6.5.3 Einfachheit

244

6.5.4 Die Liebe zum Detail

245

6.5.5 Design-Prinzipien

246

6.5.6 Die Design-Prinzipien der »Großen«

250

7 Usability und User Experience

253

7.1 Alles beginnt mit Usability

253

7.1.1 Don’t make me think

253

7.1.2 Effektivität, Effizienz und Zufriedenheit

254

7.1.3 Usability in allen Bereichen

255

7.1.4 Usability-Tests und -Tools

256

7.1.5 Technische Analyse

262

7.2 User Experience

263

7.2.1 Die Website als Erlebnis

264

7.2.2 Look & Feel, Joy of Use und die Usability

264

7.2.3 Psychologische Trigger

266

8 Layout und Raster

271

8.1 Anatomie einer Webseite

271

8.1.1 Der Header-Bereich

272

8.1.2 Der Inhaltsbereich

274

8.1.3 Die Fußleiste

276

8.1.4 Der umgebende Block

277

8.2 Layouts gestalten

277

8.2.1 Erwartungskonforme Websites

278

8.2.2 Komposition und Hierarchie

281

8.2.3 Weißraum

282

8.2.4 Layoutprinzipien

283

8.2.5 Card Design

287

8.2.6 Das Raster brechen – out of the Box

288

8.2.7 Above the Fold

291

8.3 Scrollen

293

8.4 Raster erstellen

299

8.4.1 Bedeutung

299

8.4.2 Layoutgrundlagen

301

8.4.3 Rastersysteme

309

8.5 Ein eigenes Raster anlegen

312

8.5.1 Spalten und Spaltenabstand

313

8.5.2 Rastergestaltung in Photoshop

314

8.5.3 Raster mit HTML und CSS umsetzen

318

8.5.4 Eigene Webseitenlayouts

328

8.5.5 Das Flexbox-Model

330

8.5.6 Raster mit CSS Grids

332

9 Farbe im Webdesign

337

9.1 Welche Rolle spielt die Farbe?

337

9.1.1 Farbe und Webdesign

338

9.2 Farbe: eine Wissenschaft für sich

339

9.2.1 Licht und Farbe

339

9.2.2 Wie unsere Farbwahrnehmung funktioniert

340

9.2.3 Farbpsychologie

340

9.3 Farbsysteme

342

9.3.1 Farbkreise

342

9.3.2 RGB – das additive Farbmodell

344

9.3.3 CMYK – das subtraktive Farbmodell

345

9.3.4 Farbtiefe

346

9.3.5 Farbdefinition

347

9.3.6 Farbton, Sättigung, Helligkeit

351

9.4 Das Web-Farbmanagement

357

9.4.1 Mit Farbräumen & Farbprofilen arbeiten

357

9.5 Farbwirkung

358

9.5.1 Warme Farben

359

9.5.2 Rot

360

9.5.3 Orange

365

9.5.4 Gelb

369

9.5.5 Kalte Farben

372

9.5.6 Blau

373

9.5.7 Grün

376

9.5.8 Violett/Lila

379

9.5.9 Neutrale Farben

381

9.5.10 Schwarz

383

9.5.11 Weiß

385

9.5.12 Grau

387

9.5.13 Grell, greller, Neon

389

9.5.14 Zusammenfassung Farbwirkung

389

9.6 Farbkontraste

390

9.6.1 Farbe-an-sich-Kontrast

390

9.6.2 Hell-Dunkel-Kontrast

392

9.6.3 Kalt-Warm-Kontrast

393

9.6.4 Komplementärkontrast

394

9.6.5 Quantitätskontrast

395

9.6.6 Qualitätskontrast

396

9.6.7 Simultankontrast

397

9.6.8 Bunt-Unbunt-Kontrast

397

9.7 Tool-Empfehlung: Unterstützung bei der Farbfindung

398

9.8 Gelungener Farbeinsatz im Webdesign

400

9.8.1 Farbe, Corporate Design & Identität

400

9.8.2 Farbverläufe

403

9.9 Farbe und Usability

407

9.9.1 Hürden bei der Farbwahrnehmung

408

9.10 Ein eigenes Farbschema entwickeln

410

9.10.1 Inspiration sammeln und Vorbilder finden

410

9.10.2 Praktische Umsetzung: Farbschemata selbst gestalten

410

9.11 Fazit

416

10 Typografie

417

10.1 Typografie im Web

417

10.1.1 Neue Möglichkeiten

418

10.1.2 Was ist gute Typografie?

418

10.2 Leseverhalten im Web

420

10.2.1 Prozess des Lesens

421

10.2.2 Lesen am Bildschirm

422

10.3 Schriftarten

423

10.3.1 Serifenschriften

424

10.3.2 Serifenlose Schriften

427

10.3.3 Andere Schriften

429

10.4 Schriftdarstellung im Web

431

10.4.1 Fontrendering – das Runde muss ins Eckige

432

10.4.2 Websichere Schriften

434

10.4.3 Webfonts

436

10.4.4 Webfonts-Anbieter

438

10.4.5 Text als Bild

442

10.5 Makrotypografie

443

10.5.1 Liniensystem

444

10.5.2 Schriftschnitte

445

10.5.3 Schriftgröße

448

10.5.4 Zeilenabstand

453

10.5.5 Schriftfarbe – Text- und Hintergrundkontrast

457

10.5.6 Zeilenlänge

459

10.5.7 Textausrichtung und Silbentrennung

461

10.5.8 Abstände und Leerraum

464

10.5.9 Schriftdefinition mit CSS

465

10.6 Mikrotypografie

467

10.6.1 Buchstaben- und Wortabstand

467

10.6.2 Anführungszeichen

468

10.6.3 Texteinzug

469

10.6.4 Versalien und Kapitälchen

470

10.6.5 Zahlengliederung

471

10.6.6 Sonderzeichen

473

10.7 Gelungene Webtypografie – Textformatierungen und Gestaltungstipps

473

10.7.1 Die Schriftauswahl

474

10.7.2 Die Gestaltung von Überschriften

479

10.7.3 Fließtext

481

10.7.4 Links

482

10.7.5 Listen

483

10.7.6 Tabellen

484

10.7.7 Zitate

485

10.7.8 Kaufmanns-Und

486

10.7.9 »Text-shadow«

487

10.7.10 Typografische HTML-Elemente

489

10.8 Typografische Inspiration: Best Cases

489

10.8.1 Minimalistisch

490

10.8.2 Bold Typo

491

10.8.3 Verspielt/künstlerisch

492

11 Bilder und Grafiken

495

11.1 Einführung: Die Macht der Bilder

495

11.1.1 Bilderauswahl

496

11.1.2 Bilder im Einsatz

498

11.2 Bilder im Web

500

11.2.1 Bilder als Layoutelemente

500

11.2.2 Bilder als Orientierungselemente

501

11.2.3 Bilder als Inhaltselemente

502

11.2.4 Bilder als emotionale Elemente

503

11.3 Bilderquellen

504

11.3.1 Urheberrecht

504

11.3.2 Creative-Commons-Bilder

505

11.3.3 Bilder vom Kunden

506

11.3.4 Fotos und Grafiken selbst erstellen

506

11.3.5 Fotoagenturen

508

11.3.6 Fotografen beauftragen

512

11.4 Motive und Bildstimmung

512

11.4.1 Menschen, Mitarbeiter und das Team

512

11.4.2 Porträts

516

11.4.3 Profilbilder

519

11.4.4 Räumlichkeiten

519

11.4.5 Inszenierung von Produktfotos

520

11.4.6 Austauschbare Bilderwelten

522

11.5 Bildgestaltung

524

11.5.1 Bildausschnitt und -perspektive

524

11.5.2 »Out of the Box«

526

11.5.3 Graustufen/Duplexfarben

526

11.5.4 Montagen/Collagen

528

11.5.5 Großformatige Bilder/Hintergrundbilder

530

11.6 Icons

530

11.6.1 Icons bringen Inhalte auf den Punkt

531

11.6.2 Aufmerksamkeit steuern und Struktur geben

532

11.7 Icon-Fonts

533

11.7.1 Vor- und Nachteile von Icon-Fonts

534

11.8 Illustrationen

535

11.9 Bildbearbeitung

537

11.9.1 Die nicht destruktive Bildbearbeitung

538

11.10 Bildformate

539

11.10.1 Die Bildgröße

540

11.10.2 Die Bildkomprimierung

540

11.10.3 Die Auswahl des richtigen Bildformats

541

11.11 Bilder in HTML und CSS

543

11.11.1 Bilder in HTML

544

11.11.2 Bilder in CSS

546

11.11.3 Responsive Bilder

547

11.11.4 Retina-Displays

550

11.12 Weitere Bilder-Tools

553

11.13 Fazit

554

12 Navigations- und Interaktionsdesign

557

12.1 Die Gestaltung der Hauptnavigation

557

12.1.1 Position

558

12.1.2 Umsetzung

563

12.1.3 Gestaltung

567

12.1.4 Dropdown-Menü

568

12.1.5 Mega-Dropdown-Menü

570

12.1.6 Kreative Navigationen

572

12.1.7 Feste Navigation

576

12.2 Die Gestaltung der Subnavigation

579

12.3 Die Gestaltung der Metanavigation

580

12.4 Die Gestaltung der Footer-Navigation

581

12.5 Navigation auf mobilen Endgeräten – responsive Navigation

583

12.5.1 Top-Nav – alles so lassen

584

12.5.2 Footer-Navigation – ganz ans Ende

586

12.5.3 Einfaches Toggle-Menü – Ein- und Ausblenden

588

12.5.4 Multi-Toggle

591

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

593

12.5.6 Navigation am unteren Rand

594

12.5.7 Weitere allgemeine Gestaltungstipps für eine mobile Navigation

595

12.6 Weitere Navigationsmittel

599

12.6.1 Links

599

12.6.2 Individuelle Linkunterstriche

599

12.6.3 Buttons

602

12.6.4 Die Suchfeld-Navigation

607

12.6.5 Weitere Navigationselemente

611

12.7 Formulare

613

12.7.1 Die Komponenten eines Formulars

614

12.7.2 Eingabefelder

615

12.7.3 Rückmeldungen

616

12.7.4 Validierung

617

12.7.5 Die User Experience bei Formularen

617

12.7.6 Formulare mit HTML5

618

13 Animationen

621

13.1 Animationen mit CSS

621

13.1.1 »hover«-Effekte mit CSS3-Transitions

621

13.1.2 CSS3-Transform – Verzerren, Skalieren und Drehen

626

13.2 Animationen und Interaktivität mit JavaScript

629

13.2.1 JavaScript-Bibliotheken

630

13.3 Interaktive Elemente

631

13.3.1 Bildergalerie

631

13.3.2 Tabs

632

13.3.3 Accordion

635

13.3.4 Content-Slider

636

13.3.5 Header-Slideshow

637

13.3.6 Modalboxen

638

13.3.7 Tooltip

639

13.3.8 Preloader & Ladebalken

641

13.3.9 Weitere Animationen und Effekte

642

13.4 Audiovisuelle Elemente

642

13.4.1 Das HTML5-Videoelement

642

13.4.2 Das HTML5-Audioelement

644

13.5 Fazit

645

14 Website-Typen und -Stile

647

14.1 Website-Typen

647

14.1.1 Corporate Website

647

14.1.2 Portfolio

653

14.1.3 Shop

656

14.1.4 Blog

662

14.1.5 Landing Page

667

14.1.6 Microsite

670

14.1.7 Web-Apps

671

14.1.8 Newsletter

672

14.2 Webdesign-Stile und -Trends

674

14.2.1 Skeuomorphismus

677

14.2.2 Flat-Design

678

14.2.3 Material-Design

681