1 Prinzipien des modernen Webdesigns

23

1.1 Aspekte modernen Webdesigns

23

1.1.1 Die Entwicklung des Webdesigns

23

1.1.2 Gute Seiten, schlechte Seiten

26

1.1.3 Mehr als hübsch – das Design

28

1.1.4 Übersichtlich und lesbar

29

1.1.5 Struktur, Inhalte und Verhalten

30

1.2 Guter Quellcode – Webstandards

33

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

35

1.3.1 Zugänglichkeit und Technik

35

1.3.2 Zugänglichkeit und Inhalte

36

1.3.3 Zugänglichkeit und Design

36

1.4 Modernes Webdesign ist flexibel

37

1.4.1 Flexible und anpassungsfähige Webseiten

37

1.4.2 Benutzerfreundlich und bedienbar

39

1.4.3 Moderne Workflows

39

1.5 Das Webdesign und sein Umfeld

40

1.5.1 Die Märkte und der Wettbewerb

41

1.5.2 Content Marketing und die Informationsüberflutung der Konsumenten

42

1.5.3 Werteveränderung in der Gesellschaft

42

1.6 Fazit: Webdesign ist Coden, und Code ist Design

43

2 Projektmanagement

47

2.1 Das Projekt

47

2.1.1 Was macht ein Projekt zu einem Projekt?

48

2.1.2 Die Online-Branche

48

2.1.3 Das Projektdreieck

50

2.1.4 Die Aufgaben des Projektmanagers

52

2.2 Projektphasen

53

2.2.1 Der Projektstart

53

2.2.2 Das Lastenheft – die Sicht des Auftraggebers

54

2.2.3 Das Angebot

55

2.2.4 Alternative Leistungen

56

2.2.5 Projekte kalkulieren

57

2.2.6 Das Pflichtenheft – der Plan des Auftragnehmers

59

2.2.7 Der Zeitplan

60

2.2.8 Umsetzung

61

2.2.9 Spätere Änderungswünsche

61

2.2.10 Projektabschluss und Auswertung

62

2.2.11 Rechnung stellen

63

2.3 Projektkommunikation – wie sag ich es dem Kunden?

64

2.3.1 Erwartungshaltung an den Kunden

64

2.3.2 Erwartungshaltung des Kunden – Wünsche und Vorstellungen

65

2.3.3 Erstkontakt – Beratung vs. Verkauf

66

2.3.4 Präsentation

68

2.3.5 Externe/freie Mitarbeiter

69

2.3.6 Der Projektabschluss

69

2.4 Erfolg oder Misserfolg

69

2.4.1 Erfolgsfaktoren

70

2.4.2 Risikomanagement

71

2.4.3 Gründe für ein erfolgloses Webprojekt

71

3 Konzeption und Strategie

73

3.1 Briefing und Recherche

73

3.1.1 Das Briefing

74

3.1.2 Die Recherche

76

3.1.3 Briefing und Angebot

76

3.1.4 Das Treffen mit dem Kunden

77

3.1.5 Das Grobkonzept

77

3.1.6 Ziele und Strategie

78

3.2 Unternehmens- und Kundenanalyse

78

3.2.1 Produkte und Dienstleistungen

80

3.2.2 Die Vermarktung

80

3.2.3 Der Kundenkreis

80

3.2.4 Branche und Umfeld

81

3.3 Konkurrenten und Vorbilder

82

3.3.1 Vorbilder

82

3.4 Eine Strategie fürs Webprojekt entwickeln

83

3.4.1 Rahmenbedingungen für die strategische Ausrichtung

83

3.4.2 Mehr als Anfang und Ende

84

3.4.3 Corporate Identity und Image

84

3.4.4 Positionierung

85

3.4.5 Alleinstellungsmerkmal

86

3.4.6 Die Rolle des Webauftritts im Marketing-Mix

87

3.4.7 Fazit: Warum eine Strategie so wichtig ist

88

3.5 Webdesign ist Kommunikation

89

3.5.1 Das Kommunikationsmodell

89

3.5.2 Kommunikationsmodell für das Webdesign

90

3.6 Ziele der Webseite

94

3.6.1 Ziele formulieren

95

3.6.2 Aus Zielvorgaben Maßnahmen ableiten

95

3.6.3 Den Anwender nicht aus den Augen verlieren

96

3.7 Zielgruppenanalyse

98

3.7.1 Zielgruppenanalyse mit Fingerspitzengefühl

99

3.7.2 Sinus-Milieus

101

3.7.3 Verschiedene Zielgruppen

102

3.7.4 Es menschelt – die Personas

104

3.7.5 Nutzungsszenarien für Personas

106

3.8 Anforderungen Design

107

3.8.1 Design vs. Content

107

3.8.2 Look & Feel

108

3.9 Anforderungen an die Inhalte

110

3.9.1 Inhaltsarten: Texte, Bilder und Videos

111

3.9.2 Inhaltserstellung

112

3.9.3 Der Qualitätsanspruch

114

3.10 Anforderungen an Technik und Funktionalitäten

115

3.10.1 Content-Management-Systeme

115

3.10.2 Funktionalitäten

117

3.11 Usability im Webdesign

118

3.11.1 Don’t make me think

118

3.11.2 Effektivität, Effizienz und Zufriedenheit

119

3.11.3 Usability in allen Bereichen

120

3.11.4 Usability-Tests und -Tools

121

3.11.5 Technische Analyse

127

3.12 User Experience

128

3.12.1 Die Website als Erlebnis

128

3.12.2 Look & Feel, Joy of Use und die Usability

129

3.12.3 Emotionen wirken

131

3.12.4 Glaubwürdigkeit und Vertrauen

132

3.13 Fazit

133

4 Responsive Webdesign

135

4.1 Einleitung – und sie bewegen sich doch

135

4.1.1 Neue Geräte und Bildschirmgrößen

136

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

138

4.1.3 Ganzheitliche Flexibilität – es betrifft alle

138

4.2 Responsive Strategie – Mobile first und Content first

140

4.2.1 Adaptive Layout vs. Responsive Layout

140

4.2.2 Mobile oder Content – wer ist der Erste?

142

4.2.3 Graceful Degradation vs. Progressive Enhancement

143

4.3 Ein neuer Workflow

144

4.3.1 Der traditionelle Workflow

145

4.3.2 Der responsive Workflow

146

4.4.1 Flexible Raster

149

4.4.2 Media Queries

151

4.4.3 Flexible Bilder, Typografie und Weiteres

159

4.5 Tipps zur Umsetzung

161

4.5.1 HTML-Prototyping

161

4.5.2 Testen

162

5 Informationsarchitektur

165

5.1 Einführung

165

5.1.1 Ein Alltagsbeispiel und sein Webseitenpendant

166

5.1.2 Darum geht es

168

5.2 Die Bedeutung der Informationsarchitektur

168

5.2.1 Die drei Aspekte – Inhalte, Nutzer, Kontext

169

5.2.2 User first

170

5.2.3 Pageflow

171

5.2.4 Findability – vom Suchen und Finden von Informationen

172

5.3 Die Bedeutung der Navigation

173

5.3.1 Aufgaben einer gelungenen Navigation

173

5.4 Content-Strategie

176

5.4.1 Guter Content

176

5.4.2 Guter Content und die Rolle des Webdesigners

177

5.4.3 Sammeln und Strukturieren

178

5.4.4 Produktion und Aktualität

181

5.4.5 Storytelling

182

5.5 Inhaltsstruktur entwickeln

184

5.5.1 Methoden und Tools

185

5.5.2 Wording

188

5.5.3 Case Studies

189

5.5.4 Navigationsprinzipien – den Erwartungen entsprechen

192

5.6 Durch Inhalte navigieren

196

5.6.1 Navigationsmenüs

196

5.6.2 Alternative Navigationswege

200

5.7 Fazit

206

6 Gestaltungsgrundlagen

207

6.1 Webdesign und die menschliche Wahrnehmung

208

6.1.1 Sehen statt Lesen

208

6.1.2 Zwei Personen, zwei Meinungen

211

6.1.3 Selektive Wahrnehmung

211

6.2 Die äußere Form

214

6.2.1 Das Format

214

6.2.2 Formen

216

6.2.3 Die gute Gestalt

222

6.2.4 Texturen

223

6.2.5 Proportionen

224

6.3 Anordnung und Gewichtung

225

6.3.1 Das Gesetz der Nähe

225

6.3.2 Das Gesetz der Geschlossenheit

227

6.3.3 Symmetrie und Asymmetrie

229

6.3.4 Goldener Schnitt

231

6.3.5 Die Drittel-Regel

234

6.3.6 Der Rhythmus

235

6.3.7 Die Leserichtung

237

6.3.8 Visuelles Gewicht und Kontrast

239

6.4 Wahrnehmung und Gestaltung

245

6.4.1 Gesetz der Ähnlichkeit

245

6.4.2 Gesetz der Erfahrung

248

6.4.3 Gesetz der Kontinuität

249

6.4.4 Figur-Umfeld-Beziehung

250

6.4.5 Schwerkraft

252

6.4.6 Gesetz der Gleichzeitigkeit

252

6.5 Gute Webgestaltung

253

6.5.1 Einheit

254

6.5.2 Angemessenheit

255

6.5.3 Einfachheit

256

6.5.4 Die Liebe zum Detail

257

7 Screendesign

259

7.1 Grundlagen Screendesign

259

7.1.1 Aufgaben eines Screendesigns

259

7.1.2 Elemente eines Screendesigns

265

7.1.3 Screendesign-Prinzipien

269

7.1.4 Die Design-Prinzipien der »Großen«

273

7.2 Der Gestaltungsprozess

275

7.2.1 Der kreative Prozess

275

7.2.2 Moodboards

280

7.2.3 Style Tiles

283

7.2.4 Die Arbeit mit Design-Programmen

285

7.2.5 Design-Feedback

287

7.3 Vom Design zur Umsetzung

288

7.3.1 Modulares Design

289

7.3.2 Design-Styleguide

292

8 Layout und Raster

297

8.1 Anatomie einer Webseite

297

8.1.1 Der Header-Bereich

298

8.1.2 Der Inhaltsbereich

300

8.1.3 Die Fußleiste

302

8.1.4 Der umgebende Block

302

8.2 Wireframes erstellen

303

8.2.1 Papier-Wireframes

304

8.2.2 Gezeichnete Wireframes

304

8.2.3 Digitale Wireframes

305

8.2.4 Die Graue-Box-Methode

307

8.3 Raster – Grundlagen

309

8.3.1 Bedeutung

310

8.3.2 Layoutgrundlagen

311

8.3.3 Rastersysteme

321

8.4 Ein eigenes Raster anlegen

323

8.4.1 Spalten und Spaltenabstand

324

8.4.2 Rastergestaltung in Photoshop

325

8.4.3 Raster mit HTML und CSS umsetzen

329

8.4.4 Eigene Webseitenlayouts

339

8.4.5 Interaktive Prototypen

342

8.5 Layouts gestalten

343

8.5.1 Komposition und Hierarchie

343

8.5.2 Layoutstrukturen

344

8.5.3 Weißraum

351

8.5.4 Above the Fold

353

8.5.5 Scrollen oder klicken – das ist hier die Frage

356

8.5.6 Das Raster brechen – out of the Box

358

8.5.7 Layoutprinzipien

360

9 Farbe im Webdesign

363

9.1 Welche Rolle spielt die Farbe?

363

9.1.1 Farbe und Webdesign

364

9.2 Farbe: eine Wissenschaft für sich

365

9.2.1 Licht und Farbe

365

9.2.2 Wie unsere Farbwahrnehmung funktioniert

366

9.2.3 Farbpsychologie

367

9.3 Farbsysteme

368

9.3.1 Farbkreise

369

9.3.2 RGB – das additive Farbmodell

371

9.3.3 CMYK – das subtraktive Farbmodell

372

9.3.4 Farbtiefe

373

9.3.5 Farbdefinition

373

9.3.6 Farbton, Sättigung, Helligkeit

375

9.4 Das Web-Farbmanagement

381

9.4.1 Mit Farbräumen & Farbprofilen arbeiten

381

9.5 Farbwirkung

385

9.5.1 Warme Farben

386

9.5.2 Rot

387

9.5.3 Orange

392

9.5.4 Gelb

395

9.5.5 Kalte Farben

399

9.5.6 Blau

399

9.5.7 Grün

402

9.5.8 Violett/Lila

406

9.5.9 Neutrale Farben

408

9.5.10 Schwarz

410

9.5.11 Weiß

412

9.5.12 Grau

414

9.5.13 Grell, greller, Neon

416

9.5.14 Zusammenfassung Farbwirkung

417

9.6 Farbkontraste

417

9.6.1 Farbe-an-sich-Kontrast

418

9.6.2 Hell-Dunkel-Kontrast

419

9.6.3 Kalt-Warm-Kontrast

420

9.6.4 Komplementärkontrast

421

9.6.5 Quantitätskontrast

422

9.6.6 Qualitätskontrast

423

9.6.7 Simultankontrast

424

9.6.8 Bunt-Unbunt-Kontrast

424

9.7 Farbschemata

425

9.7.1 Monochromes Farbschema

426

9.7.2 Analoges Farbschema

427

9.7.3 Komplementäres Farbschema

427

9.7.5 Tool-Empfehlung: Unterstützung bei der Farbfindung

429

9.8 Gelungener Farbeinsatz im Webdesign

430

9.8.1 Farbe, Corporate Design & Identität

430

9.8.2 Farbverläufe

433

9.9 Farbe und Usability

437

9.9.1 Hürden bei der Farbwahrnehmung

438

9.10 Ein eigenes Farbschema entwickeln

440

9.10.1 Inspiration sammeln und Vorbilder finden

441

9.10.2 Farbtrends und Inspirationsquellen

441

9.10.3 Tools, um Farbkombinationen zu erzeugen

442

9.10.4 Praktische Umsetzung: Farbschemata selbst gestalten

444

9.11 Fazit

449

10 Typografie

451

10.1 Typografie im Web

451

10.1.1 Neue Möglichkeiten

452

10.1.2 Und was ist gute Typografie?

452

10.2 Leseverhalten im Web

454

10.2.1 Prozess des Lesens

455

10.2.2 Lesen am Bildschirm

456

10.3 Schriftarten

457

10.3.1 Serifenschriften

458

10.3.2 Serifenlose Schriften

461

10.3.3 Andere Schriften

463

10.4 Schriftdarstellung im Web

465

10.4.1 Fontrendering – das Runde muss ins Eckige

465

10.4.2 Websichere Schriften

468

10.4.3 Webfonts

470

10.4.4 Webfonts-Anbieter

472

10.4.5 Text als Bild

476

10.5 Makrotypografie

477

10.5.1 Liniensystem

478

10.5.2 Schriftschnitte

479

10.5.3 Schriftgröße

482

10.5.4 Zeilenabstand

486

10.5.5 Schriftfarbe – Text- & Hintergrundkontrast

490

10.5.6 Zeilenlänge

492

10.5.7 Grundlinienraster

494

10.5.8 Textausrichtung & Silbentrennung

495

10.5.9 Abstände & Leerraum

498

10.5.10 Schriftdefinition mit CSS

500

10.6 Mikrotypografie

501

10.6.1 Buchstaben- & Wortabstand

501

10.6.2 Anführungszeichen

502

10.6.3 Trenn- und Gedankenstriche

503

10.6.4 Einrückungen Texteinzug

503

10.6.5 Versalien & Kapitälchen

504

10.6.6 Zahlengliederung

505

10.6.7 Sonderzeichen

507

10.7 Gelungene Webtypografie – Textformatierungen und Gestaltungstipps

507

10.7.1 Die Schriftauswahl

508

10.7.2 Die Gestaltung von Überschriften

513

10.7.3 Fließtext

516

10.7.4 Links

517

10.7.5 Listen

518

10.7.6 Tabellen

519

10.7.7 Zitate

520

10.7.8 Kaufmanns-Und

522

10.7.9 »Text-shadow«

523

10.7.10 Typografische HTML-Elemente

525

10.8 Typografische Inspiration: Best Cases

525

10.8.1 Minimalistisch

525

10.8.2 Bold Typo

528

10.8.3 Verspielt

529

11 Bilder und Grafiken

531

11.1 Einführung: Die Macht der Bilder

531

11.1.1 Eigenschaften von Bildern

532

11.1.2 Konsequenzen für die Auswahl von Bildern

533

11.1.3 Bilder im Einsatz

535

11.2 Bilder im Web

537

11.2.1 Bilder als Layoutelemente

538

11.2.2 Bilder als Orientierungselemente

539

11.2.3 Bilder als Inhaltselemente

540

11.2.4 Bilder als emotionale Elemente

541

11.3 Bilderquellen

542

11.3.1 Urheberrecht

542

11.3.2 Creative-Commons-Bilder

543

11.3.3 Bilder vom Kunden

544

11.3.4 Fotos und Grafiken selbst erstellen

544

11.3.5 Fotoagenturen

546

11.3.6 Fotografen beauftragen

550

11.4 Motive & Bildstimmung

550

11.4.1 Menschen, Mitarbeiter und das Team

550

11.4.2 Porträts

554

11.4.3 Profilbilder

557

11.4.4 Räumlichkeiten

558

11.4.5 Inszenierung von Produktfotos

559

11.4.6 Austauschbare Bilderwelten

561

11.5 Bildgestaltung

563

11.5.1 Der Bildausschnitt

563

11.5.2 »Unrechteckige« Formate und andere geometrische Formen

564

11.5.3 »Out of the Box«

569

11.5.4 Graustufen/Duplexfarben

570

11.5.5 Montagen/Collagen

573

11.5.6 Großformatige Bilder/Hintergrundbilder

574

11.6 Icons

577

11.6.1 Icons bringen Inhalte auf den Punkt

578

11.6.2 Aufmerksamkeit steuern und Struktur geben

579

11.7 Icon-Fonts

580

11.8 Illustrationen

582

11.8.1 Thematische Illustrationen

583

11.8.2 Dekorative Illustrationen

584

11.8.3 Illustrativer Text

585

11.8.4 Informative Illustrationen (Infografiken)

585

11.9 Bildbearbeitung

586

11.9.1 Die nicht destruktive Bildbearbeitung

587

11.10 Bildformate

588

11.10.1 Die Bildgröße

589

11.10.2 Die Bildkomprimierung

589

11.10.3 Die Auswahl des richtigen Bildformats

590

11.10.4 Für Web speichern

593

11.10.5 Bildgrößen optimieren

593

11.11 Bilder in HTML und CSS

594

11.11.1 Bilder in HTML

594

11.11.2 Bilder in CSS

596

11.11.3 Responsive Bilder

598

11.11.4 Retina-Displays

601

11.12 Weitere Bilder-Tools

604

11.13 Fazit

605

12 Navigations- und Interaktionsdesign

607

12.1 Die Gestaltung der Hauptnavigation

607

12.1.1 Position

608

12.1.2 Umsetzung

612

12.1.3 Gestaltung

615

12.1.4 Dropdown-Menü

616

12.1.5 Mega-Dropdown-Menü

619

12.1.6 Kreative Navigationen

620

12.1.7 Feste Navigation

625

12.2 Die Gestaltung der Subnavigation

628

12.3 Die Gestaltung der Metanavigation

629

12.4 Die Gestaltung der Footer-Navigation

630

12.5 Navigation auf mobilen Endgeräten – responsive Navigation

632

12.5.1 Top-Nav – alles so lassen

633

12.5.2 Footer-Navigation – ganz ans Ende

635

12.5.3 Einfaches Toggle-Menü – Ein- und Ausblenden

638

12.5.4 Multi-Toggle

641

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

643

12.5.6 Weitere allgemeine Gestaltungstipps für eine mobile Navigation

644

12.6 Weitere Navigationsmittel

648

12.6.1 Links

648

12.6.2 Individuelle Linkunterstriche

649

12.6.3 Buttons

652

12.6.4 Die Suchfeld-Navigation

656

12.6.5 Weitere Navigationselemente

660

12.7 Formulare

663

12.7.1 Die Komponenten eines Formulars

663

12.7.2 Eingabefelder

664

12.7.3 Rückmeldungen

666

12.7.4 Validierung

666

12.7.5 Die User Experience bei Formularen

667

12.7.6 Formulare mit HTML5

668

13 Webdesign-Stile und -Trends

671

13.1 Die Webdesign-Stile

671

13.1.1 Frühere Webdesign-Stile

671

13.1.2 Skeuomorphismus

674

13.1.3 Flat-Design

675

13.1.4 Material-Design

678

13.1.5 Minimalismus

679

13.1.6 Typografie

681

13.1.7 Illustrationen

682

13.1.8 Der Vintage- oder auch Retro-Stil

683

13.1.9 Fazit

685

13.2 Webdesign-Trends

685

13.2.1 Scrollen

685

13.2.2 Versteckte Navigation

691

13.2.3 Grafische Effekte

692

14 Animationen

703

14.1 Animationen mit CSS

703

14.1.1 »hover«-Effekte mit CSS3-Transitions

703

14.1.2 CSS3-Transform – Verzerren, Skalieren und Drehen

708

14.2 Animationen und Interaktivität mit JavaScript

711

14.2.1 JavaScript-Bibliotheken

712

14.3 Interaktive Elemente

713

14.3.1 Bildergalerie

713

14.3.2 Tabs

714

14.3.3 Accordion

717

14.3.4 Content-Slider

718

14.3.5 Header-Slideshow

719

14.3.6 Modalboxen

720

14.3.7 Tooltip

722

14.3.8 Weitere Animationen und Effekte

723

14.4 Audiovisuelle Elemente

724

14.4.1 Das HTML5-Videoelement

724

14.4.2 Das HTML5-Audioelement

726

14.5 Fazit

727

15 Website-Typen

729

15.1 Corporate Website

729

15.1.1 Die Corporate Website als Türöffner

730

15.1.2 Analyse einer Corporate Website

731

15.1.3 Das Website-Branding

732

15.2 Portfolio

733

15.2.1 Der Ausdruck von Persönlichkeit

734

15.2.2 Präsentation der eigenen Arbeit

735

15.3 Shop

737

15.3.1 Vertrauen schaffen

738

15.3.2 Konkurrenz und Shop-Vielfalt

742

15.4 Blog

742

15.4.1 Das Corporate Blog

743

15.4.2 Das Infoblog

744

15.4.3 Aufbau eines Blogs

744

15.5 Landing Page

746

15.5.1 Aufbau einer Landing Page

747

15.6 Microsite

749

15.7 Web-Apps

750

15.8 Newsletter

751

16 Tipps, Tricks und Tools

755

16.1 Wichtiger »Kleinkram«

755

16.1.1 Zum Ausdrucken – Print-Stylesheet

755

16.1.2 Das Webseitensymbol – Favicon

759

16.1.3 Webseite nicht gefunden – die 404-Meldung

760

16.2 Code-Feintuning

762

16.2.1 Responsibility

762

16.2.2 Performance

762

16.2.3 Testen und Debuggen

766

16.3 In Kontakt bleiben

767

16.3.1 Weiterbildung

768

16.3.2 Netzwerk

768

16.3.3 Lesenswert

769