Manuela Hoffmann

Modernes Webdesign

Gestaltungsprinzipien, Webstandards, Praxis

• Buch

Produktbeschreibung

Sie möchten bessere und schönere Webseiten gestalten? Mit diesem Buch meistern Sie die Anforderungen an modernes Webdesign. Schritt für Schritt führt Sie Manuela Hoffmann durch den gesamten Gestaltungsprozess von der Idee über erste Entwürfe bis hin zur technischen Umsetzung mit Photoshop, (X)HTML und CSS. Sie lernen, worauf es bei Schriftwahl, dem Einsatz von Farben und unterschiedlichen Medien ankommt, gestalten Layouts und erfahren, wie mit Webstandards zukunftsfähige und zugängliche Webseiten erstellt werden.

Lassen Sie sich inspirieren: Anhand zahlreicher Beispiele aus dem Web erlernen Sie die Grundlagen der Gestaltung und setzen Farbe, Schrift und Medien gekonnt in ausgewogenen und attraktiven Website-Layouts ein. Standardkonformes Coding und Barrierefreiheit sind die Basis jeder modernen Website. Hier lesen Sie, worauf es ankommt und wie Sie diese Prinzipien in Ihren Layouts praktisch umsetzen - ohne dabei auf ein modernes Design verzichten zu müssen. Gestalten Sie individuelle Vorlagen für Ihre tägliche Praxis und setzen Sie Entwürfe so Schritt für Schritt in Photoshop, (X)HTML und CSS um. Dank zahlreicher Tipps und Tricks gelingt Ihnen das für alle wichtigen Browser. Damit Sie nichts vergessen, helfen Ihnen praktische Checklisten dabei, das Gelernte auf Ihre Websites zu übertragen. In einem Beispielprojekt schauen Sie der Autorin über die Schulter und arbeiten alle Schritte von der Planung bis zur Umsetzung mit ihr gemeinsam durch.

---

Prinzipien und Grundlagen guten Designs
Kreativ mit Webstandards, (X)HTML und CSS
Inkl. WordPress-Template und dynamische Inhalte

Die Anforderungen an professionelles und zeitgemäßes Webdesign sind hoch: Ansprechendes und stimmiges Layout, richtige Farbwahl, gute Typografie, Zugänglichkeit und nicht zuletzt Coding nach Webstandards. Dieses Buch zeigt Ihnen, wie Sie diese Anforderungen meistern. Es ist ein Wegweiser für modernes Webdesign, der gleichzeitig Praxis, Anleitung und Inspiration liefert. Die Grafikerin und Webdesignerin Manuela Hoffmann (pixelgraphix.de) führt Sie von der Idee über erste Entwürfe bis hin zur technischen Umsetzung mit HTML und CSS. Das Buch enthält außerdem zahlreiche Vorlagen und Templates für Photoshop und WordPress.

Produktdetails

• Verlag: Galileo Press
• Deutsch
• ISBN-13: 9783836211093
• ISBN-10: 3836211092
• Artikelnr.: 23114038

Autorenporträt

Manuela Hoffmann arbeitet als Grafikerin. Neben klassischem Design gehören auch professionelles Webdesign und Beratung im Bereich Content
Management zu ihrer täglichen Arbeit. Ihre Website www.pixelgraphix.de ist eine der wichtigsten Anlaufstellen in Sachen Webdesign in Deutschland.

Inhaltsangabe

Einleitung 11

Teil I: Das Design

1 Webdesign und Webstandards 17
1.1 Webdesign, was ist das eigentlich? 17
1.2 Wie funktionieren (X)HTML und CSS? 20
1.2.1 (X)HTML 21
1.2.2 CSS 21
1.3 Die Prinzipien modernen Webdesigns 23
1.3.1 "Seite" ist nicht gleich "Seite"! 23
1.3.2 Webseiten sehen nicht in jedem Browser gleich aus 26
1.3.3 Des Kaisers neue Kleider 30
1.3.4 Besser mit Standards 32
1.3.5 Sagt Ihr Quellcode, was Sie meinen? 37
1.3.6 Barrierefreiheit 40
1.3.7 Barrierearmut 42
1.3.8 Usability 43
1.3.9 Informationsarchitektur 46
1.4 Checklisten 47
1.4.1 Eine gute Startseite 47
1.4.2 Gute Praktiken für Navigationen 47
1.4.3 Webstandards, Zugänglichkeit und Usability 48

2 Gestaltung und Layout 51
2.1 Die visuelle Wahrnehmung und ihre Gesetze 51
2.1.1 Umfeld und Figur-Trennung 52
2.1.2 Der Goldene Schnitt 52
2.1.3 Gute Gestalt und Prägnanz 54
2.1.4 Nähe 54
2.1.5 Gleichheit oder Ähnlichkeit 55
2.1.6 Geschlossenheit 56
2.1.7 Erfahrung und Vertrautheit 57
2.1.8 Einfachheit und Harmonie 57
2.1.9 Symmetrie und Asymmetrie 58
2.1.10 Visuelles Gewicht 59
2.1.11 Linien und Flächen 60
2.2 Website-Layouts und ihre Elemente 62
2.2.1 Weißraum 64
2.2.2 Klassische Spaltenlayouts 64
2.2.3 Sonderfall Gestaltungsraster 65
2.2.4 Breite und Höhe eines Layouts 66
2.2.5 Ein CSS-Layout zu gestalten heißt, Boxen auszurichten 68
2.2.6 Zusammenfallende Außenabstände 74
2.2.7 Positionierung von Layoutelementen 75
2.2.8 Die Positionierungsmöglichkeiten in der Praxis 79
2.2.9 Gestaltungsraster in Theorie und Praxis 95
2.3 So geht's: ein Gestaltungsraster in CSS umsetzen 99

3 Typografie 105
3.1 Klassifikation von Schrift 106
3.2 Lesbarkeit 107
3.2.1 Schriftempfinden und Schriftmischung 107
3.2.2 Schriften für das Web 109
3.2.3 Zeilenbreite und Satz 110
3.2.4 Zeilenabstand 113
3.2.5 Kontrast und Farbe 114
3.3 Schriftformatierung für das Web 115
3.3.1 Schriftgrößen und Abstände für moderne Webseiten 115
3.3.2 Große Schriften und Schriftglättung 117
3.3.3 Welche Möglichkeiten der Formatierung sind möglich und sinnvoll? 117
3.3.4 Warum Sie die Basisschriftgröße nicht in Pixel definieren sollten 119
3.3.5 Der vertikale Rhythmus einer Webseite 122
3.4 Schreibweisen 125
3.5 Checkliste: Das ist gute Web-Typografie 126

4 Farbe 129
4.1 Farbe am Monitor und im Web 130
4.2 Farbwirkung 131
4.3 Farbkontrast und Farbabstufungen 131
4.4 Hürden für die Farbwahrnehmung 133
4.5 Farbe für Webseiten 135
4.5.1 Ein Farbschema entwickeln 136
4.5.2 Aktuelle Richtungen und Entwicklungen 138
4.6 Checkliste: Farbe für Webseiten 142

5 Medien 145
5.1 Mediennutzung und Rechte 145
5.2 Wo Sie Grafiken, Illustrationen und Fotos finden 146
5.3 Animationen, Sounds und Musik finden 148
5.4 Dateiformate und ihr Einsatz auf Webseiten 150
5.4.1 Bilder, Grafiken und Fotos 150
5.4.2 Flash auf Websites 151
5.4.3 Animationen und Ton 153
5.4.4 Tabellen, Briefe, Handbücher und andere Dokumente 156
5.5 Checkliste Medien 157

6 Werkzeugkasten 159
6.1 Inspiration am Arbeitsplatz 159
6.2 Bildbearbeitungsprogramme 160
6.3 Wireframes gestalten 161
6.4 Editoren für Windows, Mac OS X und Unix im Überblick 163
6.5 Eine komfortable Arbeitsumgebung 167
6.6 Firefox als Arbeitsbrowser und dessen Erweiterungen 169
6.7 Ein Testbrowserpaket schnüren 171
6.8 Workflow für modernes Webdesign 172
6.8.1 Projektdefinition 173
6.8.2 Analyse 174
6.8.3 Konzept 174
6.8.4 Entwurf 174
6.8.5 Präsentation 174
6.8.6 Umsetzung 175
6.8.7 Test und Korrektur 176
6.8.8 Browserspezifisches Vorgehen 179
6.8.9 Abschluss 183

Teil II : Die Technik

7 (X)HTML im Überblick 187
7.1 Mit Basisvorlagen schneller arbeiten 187
7.2 (X)HTML 188
7.2.1 DOCTYPE 189
7.2.2 HEAD 190
7.2.3 BODY 191
7.2.4 Kommentare 192
7.2.5 Identifizierung mit "class" und "id" 192
7.2.6 DIV 193
7.3 Die wichtigsten (X)HTML-Elemente 194
7.3.1 H1 bis H6 194
7.3.2 P, EM, STRONG und CODE 195
7.3.3 Zitate mit BLOCKQUOTE 196
7.3.4 Hyperlinks mit A 197
7.3.5 Aufzählungen in Listen 197
7.3.6 Bilder im Quelltext mit IMG 200
7.3.7 Formulare mit FORM 201
7.3.8 Praxis: Blindtexte für die Vorlagen erstellen 208
7.4 Mikroformate ergänzen (X)HTML 209

8 CSS im Überblick 213
8.1 CSS einbinden 214
8.2 Werte in CSS definieren 215
8.3 Die Rangfolge von Formatvorlagen 216
8.4 Ordnung im Stylesheet 219
8.5 Pseudoklassen und -elemente 223
8.6 Farben und Hintergründe 224
8.7 Die Verwendung transparenter PNGs 228
8.8 Schrift und Text 232
8.8.1 Praktische Beispiele für die Formatierung von Texten und Überschriften 234
8.8.2 Exkurs: Image-Replacement-Techniken 240
8.9 Listen 241
8.9.1 Praxis: Gestaltung einer vertikalen Navigationsleiste 241
8.9.2 Praxis: Gestaltung einer horizontalen Navigationsleiste 244
8.9.3 Praxis: Reiter-Navigation per Sliding Doors 245
8.10 Tabellen 248

9 Arbeitsvorlagen gestalten 253
9.1 Basisvorlage (X)HTML 253
9.2 Basisvorlage CSS 256
9.3 Basisvorlage für das Druckstylesheet 261
9.4 Photoshop 263
9.5 Basisvorlage Photoshop 263
9.5.1 Ebenengruppe "content" 265
9.5.2 Ebenengruppe "sidebar" 265
9.5.3 Ebenengruppe "footer" 266
9.5.4 Ebenengruppe "header" 266
9.5.5 Ebenengruppe "tools" 266
9.5.6 Mit der Basisvorlage in Photoshop arbeiten 267
9.5.7 Mögliche Erweiterungen dieser Vorlage 267

Teil III : Die Praxis

10 Ein Beispielprojekt 271
10.1 Brainstorming für den Projektstart 271
10.2 Die Konfiserie "Schokoladen" 272
10.3 Konzept 273
10.4 Entwürfe 275
10.5 Das Farbschema gestalten 276
10.6 Umsetzung des Entwurfs in (X)HTML und CSS 286
10.6.1 Schritt 1: Umbenennen und einfärben 288
10.6.2 Schritt 2: Der Kopfbereich 291
10.6.3 Schritt 3: Der Hauptinhaltsbereich 295
10.6.4 Schritt 4: Der Seitenleistenbereich 300
10.6.5 Schritt 5: Der Seitenfuß 307
10.6.6 Schritt 6: Finetuning 307
10.6.7 Schritt 7: Eine Unterseite gestalten 316
10.7 Reflexion 318

11 Ein WordPress-Theme gestalten 321
11.1 Was ist WordPress? 321
11.2 Technische Voraussetzungen für WordPress 322
11.3 Die wichtigsten Bestandteile eines WordPress-Themes 322
11.3.1 Templates 322
11.3.2 Template-Tags 324
11.4 Vom Template zum Theme 327
11.4.1 WordPress lokal installieren 327
11.4.2 Das Template wird zum Theme 329
11.4.3 Plug-ins installieren 340

12 Ausblick: Was bringt die Zukunft? 347
12.1 CSS 3 347
12.1.1 Selektoren 347
12.1.2 Ein alternatives Box-Modell kommt hinzu 350
12.1.3 Neuerungen im Umgang mit Bildern 352
12.2 Das Web 2.0, "Eye Candy" und jQuery 356

Die DVD zum Buch 361
Index 363

Rezensionen

"Empfehlung der Redaktion!" Highlights-Magazin, 2008