Manuela Hoffmann. Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press

Transkript

1 Manuela Hoffmann Modernes Webdesign Gestaltungsprinzipien, Webstandards, Praxis Galileo Press

2 Auf einen Blick Teil I Das Design 17 1 Webdesign und Webstandards 19 2 Gestaltung und Layout 61 3 Typografie Farbe Medien Werkzeugkasten 177 Teil II Die Technik (X)HTAAL im Überblick CSS im Überblick Arbeitsvorlagen gestalten 279 Teil III Die Praxis Ein Beispielprojekt Ein WordPress-Theme gestalten Ausblick: Was bringt die Zukunft? 373 Teil IV Anhang 387 A Literatur 389 B Die DVD zum Buch 391 Auf einen Blick 5

3 Inhalt Einleitung 13 Teil I Das Design 1 Webdesign und Webstandards Webdesign, was ist das eigentlich? Wie funktionieren (X)HTML und CSS? (X)HTML CSS Die Prinzipien des modernen Webdesigns »Seite«ist nicht gleich»seite«! Webseitensehen nicht in jedem Browser gleich aus Mobiles Webdesign Des Kaisers neue Kleider Besser mit Standards unterwegs Sagt Ihr Quellcode, was Sie meinen? Barrierefreiheit Usability Informationsarchitektur Checklisten Eine gute Startseite Gute Praktiken für Navigationen Checkliste: Webstandards, Zugänglichkeit und Usability 58 2 Gestaltung und Layout Die visuelle Wahrnehmung und ihre Gesetze Umfeld und Figur-Trennung Der Goldene Schnitt Gute Gestalt und Prägnanz Nähe Gleichheit oder Ähnlichkeit Geschlossenheit Erfahrung und Vertrautheit Einfachheit und Harmonie Symmetrie und Asymmetrie 69 6 Inhalt

4 Visuelles Gewicht Linien und Flächen Website-Layouts und ihre Elemente Weißraum Klassische Spaltenlayouts Sonderfall Gestaltungsraster Breite und Höhe eines Layouts Ein CSS-Layout zu gestalten heißt Boxen auszurichten Zusammenfallende Außenabstände Positionierung von Layoutelementen Dokumentfluss und Positionierung Die Positionierungsmöglichkeiten in der Praxis Gestaltungsraster in Theorie und Praxis So geht's: ein Gestaltungsraster in CSS umsetzen Frameworks Einige Frameworks im Überblick Wie sinnvoll ist der Einsatz von CSS- bzw. Grid-Frameworks in der Praxis? Typografie Klassifikation von Schrift Lesbarkeit Schriftempfinden und Schriftmischung Schriften für das Web Webfonts Dynamische Schriftersetzung auf Webseiten mit Cufön Zeilenbreite und Satz Zeilenabstand Kontrast und Farbe Schriftformatierung für das Web Schriftgrößen und Abstände für moderne Webseiten Große Schriften und Schriftglättung Welche Formatierungen sind möglich und sinnvoll? Warum Sie die Basisschriftgröße nicht in Pixel definieren sollten Der vertikale Rhythmus einer Webseite Schreibweisen Checkliste: Das ist gute Webtypografie 147 Inhalt 7

5 4 Farbe Farbe am Monitor und im Web Farbwirkung Farbkontrast und Farbabstufungen Hürden für die Farbwahrnehmung Werkzeuge zum Testen auf potenzielle Probleme bei Farbfehlsichtigkeit Farbe für Webseiten Ein Farbschema entwickeln Aktuelle Richtungen und Entwicklungen Checkliste: Farbe für Webseiten Medien Mediennutzung und Rechte Musik Wo Sie Grafiken, Illustrationen und Fotos finden Animationen, Sounds und Musik finden Dateiformate und ihr Einsatz auf Webseiten Bilder, Grafiken und Fotos Flash auf Websites Animationen und Ton Tabellen, Briefe, Handbücher und andere Dokumente Checkliste Medien Werkzeugkasten Ideenfindung Recherche Sammeln und ordnen Beispiele und Kataloge Gedanken in Mindmaps ordnen Bildbearbeitungsprogramme Wireframes gestalten Editoren für Windows, Mac OS X und Linux im Überblick Eine komfortable Arbeitsumgebung Firefox als Arbeitsbrowser und dessen Erweiterungen Ein Testbrowserpaket schnüren Workflow für modernes Webdesign Projektdefinition Tests und Korrekturen Browserspezifisches Vorgehen Abschluss 206 Inhalt

6 Teil II Die Technik 7 (X)HTML im Überblick Mit Basisvorlagen schneller arbeiten (X)HTML DOCTYPE HEAD BODY Kommentare Identifizierung mit CLASS und ID DIV Die wichtigsten (X)HTML-Elemente H1 bis H P, EM, STRONG und CODE Zitate mit BLOCKQUOTE Hyperlinks mit A Aufzählungen in Listen Bilder im Quelltext mit IMG Formulare mit FORM Praxis: Blindtexte für die Vorlagen erstellen Mikroformate ergänzen (X)HTML CSS im Überblick CSSeinbinden Werte in CSS definieren Die Rangfolge von Formatvorlagen Ordnung im Stylesheet Pseudoklassen und -elemente Farben und Hintergründe Die Verwendung transparenter PNGs Schrift und Text Praktische Beispiele für die Formatierung von Texten und Überschriften Listen Praxis: Gestaltung einer vertikalen Navigationsleiste Praxis: Reiternavigation per Sliding Doors Tabellen Tipps und Tricks für Fortgeschrittene % Mindesthöhe Fußzeile immer unten Parallax-Scrolling 274 Inhalt 9

7 9 Arbeitsvorlagen gestalten Basisvorlage (X)HTML Basisvorlage CSS Basisvorlage für das Druckstylesheet Photoshop Basisvorlage Photoshop Ebenengruppe»content« Ebenengruppe»sidebar« Ebenengruppe»footer« Ebenengruppe»header« Ebenengruppe»tools« Mit der Basisvorlage in Photoshop arbeiten Mögliche Erweiterungen dieser Vorlage 295 Teil III Die Praxis 10 Ein Beispielprojekt Brainstorming für den Projektstart Die Konfiserie»Schokoladen« Konzept Entwürfe Das Farbschema gestalten Umsetzung des Entwurfs in (X)HTML und CSS Schritt 1: Umbenennen und einfärben Schritt 2: Der Kopfbereich Schritt 3: Der Hauptinhaltsbereich Schritt 4: Der Seitenleistenbereich Schritt 5: Der Seitenfuß Schritt 6: Finetuning Schritt 7: Eine Unterseite gestalten Reflexion Ein WordPress-Theme gestalten Was istwordpress? Technische Voraussetzungen für WordPress Die wichtigsten Bestandteile eines WordPress-Themes Templates Template-Tags Vom Template zum Theme WordPress lokal installieren Das Template wird zum Theme Plugins installieren Inhalt

8 12 Ausblick: Was bringt die Zukunft? CSS Selektoren Ein alternatives Box-Modell kommt hinzu Neuerungen im Umgang mit Bildern HTML Was Sie über HTML5 wissen sollten »Eye Candy«und JavaScript 382 Literatur 387 Die DVD zum Buch 389 Index 393 Inhalt I 11