Modernes Webdesign - Gestaltungsprinzipien, Webstandards, Praxis

Inhalt

Einleitung

TEIL I Das Design

1 Webdesign und Webstandards

1.1 Webdesign, was ist das eigentlich?

1.2 Wie funktionieren (X)HTML und CSS?

1.2.1 (X)HTML

1.2.2 CSS

1.3 Die Prinzipien des modernen

1.3.1 »Seite« ist nicht gleich »Seite«!

1.3.2 Webseiten sehen nicht in jedem Browser gleich aus

1.3.3 Mobiles Webdesign

1.3.4 Des Kaisers neue Kleider

1.3.5 Besser mit Standards unterwegs

1.3.6 Sagt Ihr Quellcode, was Sie meinen?

1.3.7 Barrierefreiheit

1.3.8 Usability

1.3.9 Informationsarchitektur

1.4 Checklisten

1.4.1 Eine gute Startseite

1.4.2 Gute Praktiken für Navigationen

1.4.3 Checkliste: Webstandards, Zugänglichkeit und

2 Gestaltung und Layout

2.1 Die visuelle Wahrnehmung und ihre

2.1.1 Umfeld und Figur-Trennung

2.1.2 Der Goldene Schnitt

2.1.3 Gute Gestalt und Prägnanz

2.1.4 Nähe

2.1.5 Gleichheit oder Ähnlichkeit

2.1.6 Geschlossenheit

2.1.7 Erfahrung und Vertrautheit

2.1.8 Einfachheit und Harmonie

2.1.9 Symmetrie und Asymmetrie

2.1.10 Visuelles Gewicht

2.1.11 Linien und Flächen

2.2 Website-Layouts und ihre Elemente

2.2.1 Weißraum

2.2.2 Klassische Spaltenlayouts

2.2.3 Sonderfall Gestaltungsraster

2.2.4 Breite und Höhe eines Layouts

2.2.5 Ein CSS-Layout zu gestalten heißt Boxen auszurichten

2.2.6 Zusammenfallende Außenabstände

2.2.7 Positionierung von Layoutelementen

2.2.8 Dokumentfluss und Positionierung

2.2.9 Die Positionierungsmöglichkeiten in der Praxis

2.2.10 Gestaltungsraster in Theorie und Praxis

2.3 So geht’s: ein Gestaltungsraster in CSS

2.4 Frameworks

2.4.1 Einige Frameworks im Überblick

2.4.2 Wie sinnvoll ist der Einsatz von CSS- bzw. Grid-Frame-works

3 Typografie

3.1 Klassifikation von Schrift

3.2 Lesbarkeit

3.2.1 Schriftempfinden und Schriftmischung

3.2.2 Schriften für das Web

3.2.3 Webfonts

3.2.4 Dynamische Schriftersetzung auf Webseiten mit Cufón

3.2.5 Zeilenbreite und Satz

3.2.6 Zeilenabstand

3.2.7 Kontrast und Farbe

3.3 Schriftformatierung für das Web

3.3.1 Schriftgrößen und Abstände für moderne Webseiten

3.3.2 Große Schriften und Schriftglättung

3.3.3 Welche Formatierungen sind möglich und sinnvoll?

3.3.4 Warum Sie die Basisschriftgröße nicht in Pixel

3.3.5 Der vertikale Rhythmus einer Webseite

3.4 Schreibweisen

3.5 Checkliste: Das ist gute Webtypografie

4 Farbe

4.1 Farbe am Monitor und im Web

4.2 Farbwirkung

4.3 Farbkontrast und Farbabstufungen

4.4 Hürden für die Farbwahrnehmung

4.4.1 Werkzeuge zum Testen auf potenzielle Probleme bei

4.5 Farbe für Webseiten

4.5.1 Ein Farbschema entwickeln

4.5.2 Aktuelle Richtungen und Entwicklungen

4.6 Checkliste: Farbe für Webseiten

5 Medien

5.1 Mediennutzung und Rechte

5.1.1 Musik

5.2 Wo Sie Grafiken, Illustrationen und

5.3 Animationen, Sounds und Musik finden

5.4 Dateiformate und ihr Einsatz auf

5.4.1 Bilder, Grafiken und Fotos

5.4.2 Flash auf Websites

5.4.3 Animationen und Ton

5.4.4 Tabellen, Briefe, Handbücher und andere Dokumente

5.5 Checkliste Medien

6 Werkzeugkasten

6.1 Ideenfindung

6.2 Recherche

6.3 Sammeln und ordnen

6.4 Beispiele und Kataloge

6.5 Gedanken in Mindmaps ordnen

6.6 Bildbearbeitungsprogramme

6.7 Wireframes gestalten

6.8 Editoren für Windows, Mac OS X und

6.9 Eine komfortable Arbeitsumgebung

6.10 Firefox als Arbeitsbrowser und dessen

6.11 Ein Testbrowserpaket schnüren

6.12 Workflow für modernes Webdesign

6.12.1 Projektdefinition

6.12.2 Tests und Korrekturen

6.12.3 Browserspezifisches Vorgehen

6.12.4 Abschluss

TEIL II Die Technik

7 (X)HTML im Überblick

7.1 Mit Basisvorlagen schneller arbeiten

7.2 (X)HTML

7.2.1 DOCTYPE

7.2.2 HE AD

7.2.3 BODY

7.2.4 Kommentare

7.2.5 Identifizierung mit CLASS und ID

7.2.6 DIV

7.3 Die wichtigsten (X)HTML-Elemente

7.3.1 H1 bis H6

7.3.2 P, EM, STRONG und CODE

7.3.3 Zitate mit BLOCK QUOTE

7.3.4 Hyperlinks mit A

7.3.5 Aufzählungen in Listen

7.3.6 Bilder im Quelltext mit IMG

7.3.7 Formulare mit FORM

7.3.8 Praxis: Blindtexte für die Vorlagen erstellen

7.4 Mikroformate ergänzen (X)HTML

8 CSS im Überblick

8.1 CSS einbinden

8.2 Werte in CSS definieren

8.3 Die Rangfolge von Formatvorlagen

8.4 Ordnung im Stylesheet

8.5 Pseudoklassen und -elemente

8.6 Farben und Hintergründe

8.7 Die Verwendung transparenter PNGs

8.8 Schrift und Text

8.8.1 Praktische Beispiele für die Formatierung von Texten

8.9 Listen

8.9.1 Praxis: Gestaltung einer vertikalen Navigationsleiste

8.9.2 Praxis: Reiternavigation per Sliding Doors

8.10 Tabellen

8.11 Tipps und Tricks für Fortgeschrittene

8.11.1 100 % Mindesthöhe

8.11.2 Fußzeile immer unten

8.11.3 Parallax-Scrolling

9 Arbeitsvorlagen gestalten

9.1 Basisvorlage (X)HTML

9.2 Basisvorlage CSS

9.3 Basisvorlage für das Druckstylesheet

9.4 Photoshop

9.5 Basisvorlage Photoshop

9.5.1 Ebenengruppe »content«

9.5.2 Ebenengruppe »sidebar«

9.5.3 Ebenengruppe »footer«

9.5.4 Ebenengruppe »header«

9.5.5 Ebenengruppe »tools«

9.5.6 Mit der Basisvorlage in Photoshop arbeiten

9.5.7 Mögliche Erweiterungen dieser Vorlage

TEIL III Die Praxis

10.1 Brainstorming für den Projektstart

10.2 Die Konfiserie »Schokoladen«

Projektdefinition und Analyse | In der Projektdefinition werden

10.3 Konzept

10.4 Entwürfe

10.5 Das Farbschema gestalten

10.6 Umsetzung des Entwurfs in (X)HTML und CSS

10.6.1 Schritt 1: Umbenennen und einfärben

10.6.2 Schritt 2: Der Kopfbereich Header | Zurück zu Photoshop: Blenden Sie Logo, Teaserfoto und

10.6.3 Schritt 3: Der Hauptinhaltsbereich

10.6.4 Schritt 4: Der Seitenleistenbereich

10.6.5 Schritt 5: Der Seitenfuß

10.6.6 Schritt 6: Finetuning

10.6.7 Schritt 7: Eine Unterseite gestalten

Navigationsleiste | Als Nächstes steht eine Überarbeitung der

Seien Sie kreativ | Ändern Sie den Text im Hauptteil Ihren Ideen

10.7 Reflexion

11 Ein WordPress-Theme gestalten

11.1 Was ist WordPress?

11.2 Technische Voraussetzungen für

11.3 Die wichtigsten Bestandteile eines

11.3.1 Templates

11.3.2 Template-Tags

11.4 Vom Template zum Theme

11.4.1 WordPress lokal installieren

11.4.2 Das Template wird zum Theme

11.4.3 Plugins installieren

12 Ausblick: Was bringt die

12.1 CSS 3

12.1.1 Selektoren

12.1.2 Ein alternatives Box-Modell kommt hinzu

12.1.3 Neuerungen im Umgang mit Bildern

12.2 HTML5

12.2.1 Was Sie über HTML5 wissen sollten

12.3 »Eye Candy« und JavaScript

A Literatur

B Die DVD zum Buch

Index