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

Transkript

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

2 Einleitung 11 TEIL I: Das Design 1 Webdesign und Webstandards Webdesign, was ist das eigentlich? Wie funktionieren (X)HTML und CSS? (X)HTML CSS Die Prinzipien modernen Webdesigns »Seite«ist nicht gleich»seite«! Webseiten sehen nicht in jedem Browser gleich aus Des Kaisers neue Kleider Besser mit Standards Sagt Ihr Quellcode, was Sie meinen? Barrierefreiheit Barrierearmut Usability Informationsarchitektur Checklisten Eine gute Startseite Gute Praktiken für Navigationen Webstandards, Zugänglichkeit und Usability 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 Visuelles Gewicht Linien und Flächen Website-Layouts und ihre Elemente Weißraum Klassische Spaltenlayouts Sonderfall Gestaltungsraster Breite und Höhe eines Layouts 66

3 2.2.5 Ein CSS-Layout zu gestalten heißt, Boxen auszurichten Zusammenfallende Außenabstände Positionierung von Layoutelementen Die Positionierungsmöglichkeiten in der Praxis Gestaltungsraster in Theorie und Praxis So geht's: ein Gestaltungsraster in CSS umsetzen 99 3 Typografie Klassifikation von Schrift Lesbarkeit Schriftempfinden und Schriftmischung Schriften für das Web 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 Möglichkeiten der Formatierung 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 Web-Typografie Farbe Farbe am Monitor und im Web Farbwirkung Farbkontrast und Farbabstufungen Hürden für die Farbwahrnehmung Farbe für Webseiten Ein Farbschema entwickeln Aktuelle Richtungen und Entwicklungen Checkliste: Farbe für Webseiten Medien Mediennutzung und Rechte Wo Sie Grafiken, Illustrationen und Fotos finden Animationen, Sounds und Musik finden 148

4 5.4 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 Inspiration am Arbeitsplatz Bildbearbeitungsprogramme Wireframes gestalten Editoren für Windows, Mac OS X und Unix im Überblick Eine komfortable Arbeitsumgebung Firefox als Arbeitsbrowser und dessen Erweiterungen Ein Testbrowserpaket schnüren Workflow für modernes Webdesign Projektdefinition Analyse Konzept Entwurf Präsentation Umsetzung Test und Korrektur Browserspezifisches Vorgehen Abschluss 183 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 196

5 7.3.4 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 CSS einbinden 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 Exkurs: /mage-/?ep/acemenf-techniken Listen Praxis: Gestaltung einer vertikalen Navigationsleiste Praxis: Gestaltung einer horizontalen Navigationsleiste Praxis: Reiter-Navigation per Sliding Doors Tabellen 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 267 Inhalt 9

6 TEIL IM: Die Praxis 10 Ein Beispielprojekt Brainstorming für den Projektstart Die Konfiserie»Schokoladen« Konzept Entwürfe Das Farbschema gestalten Umsetzung des Entwurfs in (X)HTAAL 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 ist Word Press? 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 Plug-ins installieren Ausblick: Was bringt die Zukunft? CSS Selektoren Ein alternatives Box-Modell kommt hinzu Neuerungen im Umgang mit Bildern Das Web 2.0,»Eye Candy«und jquery 356 Die DVD zum Buch 361 Index 363