1 Die richtige Ausrüstung

16

1.1 Was Sie für diesen Kurs brauchen

16

Stift und Papier

16

Bildbearbeitungs- und Layoutsoftware

16

Software zum Entwickeln

17

Browser zum Testen

18

FTP-Software

20

1.2 Denken Sie wie ein Webdesigner!

20

Webdesigner sind kreativ

21

Webdesigner kennen das Web

26

1.3 Die wichtigsten Technologien

31

Inhalte mit HTML

32

Gestaltung mit CSS

32

Verhalten mit JavaScript

33

Dynamische Inhalte mit PHP und anderen Sprachen

34

1.4 Zusammenfassung

36

2 Website-Konzeption

38

2.1 Konzeptionsphasen

38

2.2 Projektstart: Die Zielgruppe definieren

39

Personas

40

Design Personas

41

2.3 Das Konzept entwickeln: Analysephase

42

Recherche

43

Marktanalyse

43

Zielformulierung

44

2.4 Der Weg zur richtigen Idee – ­Kreativitätstechniken

45

Moodboards

45

Brainstorming

46

Morphologische Matrix

48

»The Four R’s«

49

Gegensatzpaare

49

Kreativität und Druck

50

2.5 Die Ideen bewerten

51

Konzeption mit einer Projektmatrix auf den Punkt bringen

52

Ideen bewerten

55

2.6 Inhalte sammeln und ordnen

55

Informationsarchitektur festlegen

56

Seitentypen festlegen

57

Strukturen mit Wireframes visualisieren

58

2.7 Auf die richtige Ordnung kommt es an – Webstandards

59

Ein wenig HTML-Theorie

60

2.8 Beispielprojekt – Konzeption

69

Phase 1: Analyse

69

Phase 2: Ideenfindung

71

Phase 3: Bewerten und ausarbeiten

74

Phase 4: Durchführung

80

3 Benutzerfreundliche Websites

82

3.1 Usability

82

Konventionen und Faustregeln für gute Usability

83

Usability und Inhalte

92

3.2 Accessibility – Zugänglichkeit und ­Barrierefreiheit

93

Warum Accessibility wichtig ist – immer

93

Hilfsmittel für behinderte Menschen

94

Barrierefreiheit per Gesetz

95

Initiativen für Barrierefreiheit

95

Accessibility und Webstandards

96

Accessibility und Navigation

97

Accessibility und Inhalte

98

3.3 Responsive Webdesign

99

Möglichkeiten für mobile Websites

100

Meta-Viewport-Element

101

Media Queries

102

Kritik am Responsive Webdesign

105

4 Layout und Komposition

108

4.1 Die Grundlagen moderner Gestaltung

108

Wahrnehmungsgesetze

108

Formen

113

Gestaltungsregeln

121

Psychologische Effekte

125

4.2 CSS-Layouts und -Elemente

128

CSS-Spezifizität

128

Pseudoklassen und Pseudo-Elemente in CSS

132

CSS-Reset

133

Maßeinheiten in CSS

135

4.3 Typen von CSS-Layouts

135

Fixes Layout

136

Fluides Layout

136

Elastisches Layout

137

Mischformen

137

4.4 Gestaltung mit CSS

138

Elemente anordnen mit CSS

138

Weißraum in CSS3

146

Das Box Model

148

4.5 Raster – Inhalte im Layout anordnen

156

Pro und Contra von Rastern

156

Fertige Raster verwenden

158

Ein eigenes Raster entwickeln

158

Inhalte im Raster verteilen

159

Rastergestaltung in Photoshop

162

4.6 Raster als Grundlage für ­Responsive ­Webdesign

166

Vorüberlegungen – wie viele Spalten für welche Monitorgröße?

166

Umsetzung mit CSS3

168

4.7 Beispielprojekt – Media Queries und CSS-Grundgestaltung

173

Verhalten der Media Queries festlegen

174

Grundgestaltung in CSS

178

5 Typografie im Web

182

5.1 Was ist Typografie?

182

Anatomie einer Schrift

182

5.2 Kategorien von Schriften

183

Antiqua-Schriften oder Serifen-Schriften

184

Grotesk oder serifenlose Linear-Antiqua

186

Schreibschriften

188

Schriften für Lifestyle und Postmoderne

188

Computerlesbare Schriften

190

Hybridschriften oder moderne Klassiker

190

5.3 Schriften in CSS

191

5.4 Websichere Schriften

192

5.5 Webfonts

199

Kleine Geschichte der Webfonts

200

Aktuelle Lizenzmodelle für Webfonts

201

Webfonts einbinden

206

5.6 Die richtige Schrift auswählen

208

Die Funktionen von Schrift

209

5.7 Texte mit CSS gestalten

214

Typografische Auszeichnungen

214

Schriftgröße

218

Laufweite

222

Zeilenlänge

224

Textausrichtung

226

Zeilenabstand

228

Mikro-Weißraum

229

5.8 Detailtypografie

229

Sonderzeichen in HTML

229

Sonderzeichen auf der Tastatur

231

Sonderzeichen in deutscher Sprache

232

Typografische Anführungszeichen

232

Gedankenstrich, Apostroph und Ellipse

234

Silbentrennung und geschützte Leerzeichen

235

5.9 Beispielprojekt – Typografie

236

Typekit einrichten

236

Schriften aus Typekit für die Website vorbereiten

238

Typografie in CSS

241

6 Farbe im Web

244

6.1 Kleine Farblehre

244

Grundbegriffe: Farbton, Helligkeit, Sättigung

244

Farbtemperatur

246

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

247

6.2 Farbkontraste

248

Komplementärkontrast

248

Hell-Dunkel-Kontrast

250

Grey-Box-Methode

250

Bunt-Unbunt-Kontrast

252

Quantitätskontrast

252

Warm-Kalt-Kontrast

253

6.3 Farbassoziationen

254

Die Farben im Detail

256

6.4 Farbharmonien

264

Nur eine Farbe

265

Mehrere Farben kombinieren

265

6.5 Farben am Monitor und im Web

271

Additive und subtraktive Farbmischung

271

Farben in CSS angeben

272

Verläufe in CSS3 angeben

275

Barrierefreiheit – auch bei der Farbwahl

279

6.6 Farben und Farbschemata für Webseiten

283

Erste Schritte zu einem Farbschema

283

Der Winkelkontrast – Farben im Farbkreis

285

Die Methode der maximalen Kontraste

286

Stile und Vorbilder nutzen

289

Mit Assoziationen zu einem Farbschema

290

6.7 Beispielprojekt – Farbe

291

Stimmige Helligkeiten – die Grey-Box-Methode

291

Ein Farbschema aus Assoziationen ableiten

292

Umsetzung in CSS

294

7 Grafiken und Bilder

298

7.1 Tipps für die Bildwahl

298

Fotografie oder Illustration?

298

Emotionalität über Bilder herstellen

300

Bildwirkung

301

Perspektiven

303

Stile

304

7.2 Freie Grafiken und Bilder verwenden

306

Bilder als Zitate verwenden

306

Portale mit freien Bildern

307

Gemeinfreiheit und Public Domain

307

7.3 Creative-Commons-Inhalte verwenden

308

7.4 Grafiken und Bilder einkaufen

313

7.5 Bilder für das Web optimieren

315

Der 72-dpi-Mythos

315

»Für Web speichern« in Photoshop

317

Das .gif-Format

318

Das .jpg-Format

319

Das .png-Format

320

sRGB: Den richtigen Farbraum einstellen

321

7.6 Retina: Die Auflösung kehrt zurück

322

Crashkurs Bildschirm-Technologie

322

Die Retina-Bild-Problematik

323

Lösungen für Retina-Bilder in der Praxis

324

7.7 Looks kreieren – Hintergründe, Effekte und Spiegelungen

326

Der Grunge-Look

326

Der Web 2.0-Look

328

Haptik – Websites zum »Anfassen«

332

7.8 Buttons gestalten

338

Usability und Accessibility gewährleisten

338

Buttons in Photoshop gestalten

341

7.9 Icons einsetzen und gestalten

343

Wichtiges über Symbole

344

Wichtiges über Metaphern

346

Stile von Zeichen

347

Grundregeln für die Gestaltung von Icons

349

Favicons und Touch-Icons

350

7.10 Bilder in Websites einbauen

352

Inhaltliche Bilder per HTML einfügen

352

Schmückende Bilder per CSS einfügen

357

7.11 Grafik-Vermeidungsstrategien

360

Schatten mit CSS3

360

7.12 Beispielprojekt – Grafiken

362

Fertige Grafiken ins Projekt einbauen

363

8 Testen und optimieren

368

8.1 Funktionalitäten in allen Browsern ­sicher­stellen

368

Browserstatistiken abfragen

368

Testumgebung vorbereiten

369

Conditional Comments für den Internet Explorer

370

HTML5 für den Internet Explorer

372

Funktionen mit IE-Filtern nachbilden

374

Responsive Webdesign testen

376

8.2 Usability und Accessibility testen

377

Accessibility mit Tools testen

377

Websites ohne CSS und Bilder analysieren

378

Usability-Tests

379

8.3 Ladezeiten im Griff

380

Schmuckbilder mit CSS-Sprites optimieren

380

Icon-Fonts

383

HTML validieren

385

8.4 Suchmaschinenoptimierung

386

Keyword-Recherche

386

Meta-Informationen

388

8.5 Beispielprojekt – letzte Schritte

390

Feinschliff

390

Browser-Tests

391

Responsive Webdesign testen

393

Validierung der Netzschreibstube

394

Usability

395

Die Assoziationen prüfen: Die Projektmatrix

396

9 Weitere Neuerungen in HTML5 und CSS3

400

9.1 HTML5

400

Video und Audio

400

Formulare in HTML5

403

Sonstige wichtige Neuerungen von HTML5

405

9.2 CSS3

406

CSS-Selektoren

406

CSS3-Transitions

409

CSS3-Animationen

411

A Anhang

413

A.1 Quellen

413

A.2 Linktipps für Webdesigner

415

A.3 Die DVD zum Buch

416