Embed Size (px)
Citation preview
Webdesign mit PhotoshopAktuell zu CS4
Philip Fuchslocher, René Schulze
1242.indb 11242.indb 1 08.06.2009 10:49:5908.06.2009 10:49:59
Auf einen Blick | 3
AU
F E
INE
N B
LIC
K
Auf einen Blick
GrundlagenTeil I .............................................................. 19
1 Einführung ................................................................... 21
2 Bildbearbeitung mit Photoshop CS4 ............................. 37
3 Exemplarischer Ablauf einer Website-Erstellung ............ 85
Planung der WebsiteTeil II .............................................. 89
4 Vorüberlegungen .......................................................... 91
5 Raster ........................................................................... 105
6 Farbe ............................................................................ 145
7 Typografi e..................................................................... 185
8 Ausarbeiten des Screendesigns ..................................... 205
AusgabeTeil III ................................................................. 253
9 Layoutübergabe............................................................ 255
10 Umsetzung ................................................................... 277
11 Veröffentlichung einer Website ..................................... 321
12 Automatisierung ........................................................... 331
PraxisworkshopsTeil IV ................................................... 347
13 Interface und Animation ............................................... 349
14 Bild & Symbolik ............................................................ 373
AnhangTeil V .................................................................... 407
15 Ausblicke...................................................................... 409
16 Die DVD zum Buch ...................................................... 421
1242.indb 31242.indb 3 08.06.2009 10:49:5908.06.2009 10:49:59
4 | Inhalt
Inhalt
GrundlageTeil I n
1 Einführung ......................................................................... 21
1.1 Warum Webdesign über optisches Gefallen hinausgeht ........ 211.2 Wandel im Netz (Web 2.0) .................................................. 23
1.2.1 Die Technik ............................................................. 231.2.2 Das Design .............................................................. 25
1.3 Software für jeden Zweck ..................................................... 311.4 Webdesign mit Photoshop oder Fireworks? .......................... 32
1.4.1 Photoshop als Marktstandard .................................. 331.4.2 Uneingeschränkte Möglichkeiten ............................. 331.4.3 Vor- und Nachteile von Photoshop .......................... 341.4.4 Vor- und Nachteile von Fireworks ............................ 341.4.5 Fazit ........................................................................ 35
2 Bildbearbeitung mit Photoshop CS4 ................................ 37
2.1 Pixel- und Vektorgrafi ken ..................................................... 372.1.1 Pixelgrafi ken ............................................................ 372.1.2 Vektorgrafi ken ......................................................... 39
2.2 Aufl ösung ............................................................................ 402.2.1 Ändern der Aufl ösung ............................................. 41
2.3 Neue Funktionen in Photoshop CS4 ..................................... 422.3.1 64-Bit-Unterstützung ............................................... 422.3.2 Unterstützung der GPU ........................................... 422.3.3 Überarbeitete Oberfl äche ........................................ 432.3.4 Masken- und Korrekturen-Palette ............................ 442.3.5 Verbesserte Montagefunktionen .............................. 442.3.6 Farbenblindheit simulieren ...................................... 452.3.7 Online-Anbindung ................................................... 452.3.8 Weitere Neuerungen ............................................... 46
2.4 Einrichten von Photoshop .................................................... 462.4.1 Die Voreinstellungen ............................................... 462.4.2 Arbeitsbereich einrichten ......................................... 48
2.5 Mal- und Retuschewerkzeuge .............................................. 552.6 Zeichenstift und Objekte ...................................................... 62
2.6.1 Der Aufbau von Pfadobjekten .................................. 622.6.2 Vektorformen erstellen ............................................ 632.6.3 Formobjekte ............................................................ 672.6.4 Smart-Objekte ......................................................... 68
1242.indb 41242.indb 4 08.06.2009 10:49:5908.06.2009 10:49:59
Inhalt | 5
INH
ALT
2.7 Ebenen ................................................................................ 702.8 Einfache Auswahltechniken .................................................. 78
2.8.1 Auswahlrechteck und Auswahlellipse ....................... 782.9 Schrift in Photoshop ............................................................ 802.10 Zusammenfassung ................................................................ 83
2.10.1 Pixel, Vektor und Aufl ösung ..................................... 832.10.2 Arbeitsumgebung Photoshop .................................. 832.10.3 Basisfunktionen in Photoshop .................................. 83
3 Exemplarischer Ablauf einer Website-Erstellung ............. 85
3.1 Planung ............................................................................... 853.2 Gestaltung ........................................................................... 863.3 Umsetzung .......................................................................... 863.4 Veröffentlichung .................................................................. 87
Planung der WebsitTeil II e
4 Vorüberlegungen ............................................................... 91
4.1 Bedarfsanalyse ..................................................................... 914.1.1 Ziele des Projekts .................................................... 924.1.2 Zielgruppe ............................................................... 934.1.3 Inhalte .................................................................... 954.1.4 Gestaltung ............................................................... 964.1.5 Technik ................................................................... 984.1.6 Marketing ............................................................... 99
4.2 Informationsarchitektur und Sitemap ................................... 1004.3 Zusammenfassung ................................................................ 104
4.3.1 Bedarfsanalyse ......................................................... 1044.3.2 Informationsarchitektur und Sitemap ....................... 104
5 Raster ................................................................................ 105
5.1 Rahmenbedingungen im Webdesign .................................... 1055.1.1 Grundlagen und Anforderungen .............................. 1055.1.2 Standards ................................................................ 1085.1.3 Vorteile von Standards ............................................. 1135.1.4 Heute und morgen .................................................. 1155.1.5 Praxisbezug ............................................................. 117
5.2 Gliederung logischer Bereiche .............................................. 1275.2.1 Rahmenelemente .................................................... 1275.2.2 Navigation ............................................................... 1275.2.3 Inhaltsbereiche ........................................................ 129
5.3 Gestaltungsgrundlagen ......................................................... 1315.3.1 Raster ...................................................................... 131
1242.indb 51242.indb 5 08.06.2009 10:49:5908.06.2009 10:49:59
6 | Inhalt
5.3.2 Aufmerksamkeitsgesetze .......................................... 1395.3.3 Formale Regeln ....................................................... 141
5.4 Zusammenfassung ................................................................ 1435.4.1 Rahmenbedingungen im Webdesign ........................ 1435.4.2 Gliederung logischer Bereiche .................................. 1435.4.3 Gestaltungsgrundlagen ............................................ 143
6 Farbe .................................................................................. 145
6.1 Farbmischung und Farblehre ................................................ 1456.1.1 Farblehren ............................................................... 1456.1.2 Additive Farbmischung (RGB) .................................. 1466.1.3 Subtraktive Farbmischung (CMYK) ........................... 1506.1.4 Der Farbkreis in Photoshop ..................................... 151
6.2 Farbmodi und Farbtiefe ........................................................ 1526.2.1 Farben im Internet .................................................. 1536.2.2 Bitmap .................................................................... 1536.2.3 Graustufen .............................................................. 1546.2.4 CMYK ..................................................................... 1546.2.5 RGB ........................................................................ 1556.2.6 Farbtiefe .................................................................. 155
6.3 Farbmanagement ................................................................. 1576.3.1 Das Problem: Farbinkonsistenz ................................ 1576.3.2 Die Lösung: Kalibrierung und Profi lierung ................ 1586.3.3 Webdesign und Farbmanagement ........................... 1596.3.4 Farbeinstellungen in Photoshop ............................... 160
6.4 Arbeiten mit Farbe in Photoshop ......................................... 1616.4.1 Pipette .................................................................... 1616.4.2 Farbwähler .............................................................. 1626.4.3 Die Farbe-Palette .................................................... 1646.4.4 Die Farbfelder-Palette .............................................. 1656.4.5 Farbfl ächen und Verläufe ......................................... 1666.4.6 Adobe Kuler ............................................................ 171
6.5 Farbharmonien und Kontraste .............................................. 1726.5.1 Harmonien und Disharmonien ................................. 1726.5.2 Farbkontraste .......................................................... 1736.5.3 Farbklänge .............................................................. 177
6.6 Farbpsychologie ................................................................... 1786.6.1 Bedeutung von Farben ............................................ 1786.6.2 Multikulturelle Websites .......................................... 179
6.7 Farbe und Barrierefreiheit .................................................... 1816.7.1 Farbfehlsichtigkeiten und Farbblindheit ................... 1816.7.2 Planen für Barrierefreiheit ........................................ 182
6.8 Zusammenfassung ................................................................ 1846.8.1 Grundlagenwissen Farbe .......................................... 184
1242.indb 61242.indb 6 08.06.2009 10:49:5908.06.2009 10:49:59
Inhalt | 7
6.8.2 Arbeiten mit Farbe in Photoshop ............................. 1846.8.3 Harmonien, Kontraste und Barrierefreiheit ............... 184
7 Typografie .......................................................................... 185
7.1 Schriftaufbau und Klassifi kation ............................................ 1857.1.1 Zeichenmaße ........................................................... 1857.1.2 Schriftklassifi kation .................................................. 1877.1.3 Stimmungsvermittlung durch Schriften .................... 1887.1.4 Schriftschnitte und Schriftfamilien ........................... 189
7.2 Text- und Absatzformatierung .............................................. 1917.2.1 Satzausrichtung ....................................................... 1917.2.2 Schriftbild anpassen ................................................. 1937.2.3 Ziffern ..................................................................... 1957.2.4 Allgemeine Hinweise zu Schrift am Monitor ............. 1967.2.5 Weiterführende Literatur ......................................... 197
7.3 Schrift und Webdesign ......................................................... 1987.3.1 Schriftfamilien ......................................................... 1987.3.2 Antialiasing .............................................................. 2017.3.3 Einheiten ................................................................. 2017.3.4 Umbruchverhalten .................................................. 202
7.4 Zusammenfassung ................................................................ 2047.4.1 Grundlagen Typografi e ............................................. 2047.4.2 Schrift und Webdesign ............................................ 204
8 Ausarbeiten des Screendesigns ......................................... 205
8.1 Inhalte sammeln und gliedern .............................................. 2068.2 HTML-Elemente und deren grafi sche Möglichkeiten ............. 207
8.2.1 Liste der Elemente ................................................... 2098.2.2 Formatierung .......................................................... 213
8.3 Gestalten einer Website ....................................................... 2238.3.1 Allgemeines zum Workshop-Projekt ........................ 2278.3.2 Navigation ............................................................... 2278.3.3 Inhaltsbereich .......................................................... 2368.3.4 Footer ..................................................................... 2468.3.5 Ebenenkompositionen ............................................. 248
8.4 Zusammenfassung ................................................................ 2518.4.1 Inhalte sammeln und gliedern ................................. 2518.4.2 HTML-Elemente und deren grafi sche Möglichkeiten 2518.4.3 Liste der Elemente ................................................... 2518.4.4 Formatierung .......................................................... 2518.4.5 Beispielprojekt ......................................................... 252
1242.indb 71242.indb 7 08.06.2009 10:50:0008.06.2009 10:50:00
8 | Inhalt
AusgabTeil III e
9 Layoutübergabe ................................................................. 255
9.1 Slicen des Layouts ................................................................ 2559.1.1 Nutzen und Nachteile von Slices ............................. 2559.1.2 Benutzer-Slices ........................................................ 2569.1.3 Ebenenbasierte Slices .............................................. 2579.1.4 Slices bearbeiten ..................................................... 2589.1.5 Slice-Informationen konfi gurieren ............................ 261
9.2 Dateiformate im Web .......................................................... 2629.2.1 JPEG ....................................................................... 2629.2.2 PNG ........................................................................ 2639.2.3 GIF .......................................................................... 2639.2.4 Größenunterschiede ................................................ 264
9.3 Für Web und Geräte speichern ............................................ 2659.3.1 Der Export-Dialog in der Übersicht .......................... 2659.3.2 Arbeiten mit dem Web-Export ................................ 266
9.4 Übergabe der Photoshop-Daten ........................................... 2719.4.1 Fireworks ................................................................ 2719.4.2 Dreamweaver .......................................................... 2729.4.3 Dateibenennungen .................................................. 274
9.5 Zusammenfassung ................................................................ 2769.5.1 Slicen ...................................................................... 2769.5.2 Dateiformate im Web .............................................. 2769.5.3 Übergabe der Photoshop-Daten .............................. 276
10 Umsetzung ........................................................................ 277
10.1 Ordnerstruktur ..................................................................... 27910.2 Aufbau der Dokumentenstruktur .......................................... 280
10.2.1 Doctypes und das HTML-Element ............................ 28210.2.2 Head ....................................................................... 28410.2.3 Entitäten, Kommentare und Quelltext-
formatierung ........................................................... 28610.2.4 Vom Layout zur Struktur .......................................... 287
10.3 Formatierung per Stylesheet ................................................. 29610.3.1 Formaler Aufbau ..................................................... 29610.3.2 Selektoren ............................................................... 29910.3.3 Vererbung und Kaskade ........................................... 30110.3.4 Projektumsetzung .................................................... 302
10.4 Implementierung dynamischer Elemente mittels JavaScript ............................................................................. 316
10.5 Weiterverwendung .............................................................. 31710.6 Zusammenfassung ................................................................ 319
10.6.1 Arbeitsumgebung einrichten .................................... 319
1242.indb 81242.indb 8 08.06.2009 10:50:0008.06.2009 10:50:00
Inhalt | 9
10.6.2 HTML-Dokument aufbauen ..................................... 31910.6.3 Stylesheet erstellen .................................................. 320
11 Veröffentlichung einer Website ........................................ 321
11.1 Die richtige Serverumgebung ............................................... 32111.2 Datenupload per FTP ........................................................... 32411.3 Werbung und Auffi ndbarkeit ................................................ 32811.4 Zusammenfassung ................................................................ 330
12 Automatisierung ............................................................... 331
12.1 Stile ..................................................................................... 33112.2 Aktionen .............................................................................. 334
12.2.1 Aktionen erstellen ................................................... 33412.2.2 Aktionen verwalten ................................................. 33612.2.3 Tipps zum Erstellen von Aktionen ............................ 338
12.3 Stapelverarbeitung und Droplets .......................................... 33912.4 Skripten ............................................................................... 34112.5 Variablen ............................................................................. 34112.6 Zusammenfassung ................................................................ 346
12.6.1 Stile ........................................................................ 34612.6.2 Aktionen und Stapelverarbeitung ............................. 34612.6.3 Skripten und Variablen ............................................ 346
PraxisworkshopTeil IV s
13 Interface und Animation ................................................... 349
13.1 Animation ............................................................................ 34913.2 Navigation ........................................................................... 35313.3 Buttons ................................................................................ 36013.4 Zoomify ............................................................................... 369
14 Bild & Symbolik ................................................................. 373
14.1 Miniaturbilder ...................................................................... 37314.1.1 Icons ....................................................................... 37314.1.2 Favicons .................................................................. 38114.1.3 Bildminiaturen (Thumbnails) .................................... 383
14.2 Hintergründe ....................................................................... 38614.2.1 Rapporte erstellen ................................................... 38614.2.2 Flächenfüllende Bilder ............................................. 388
14.3 Bildeffekte ........................................................................... 39214.3.1 Grunge-Look ........................................................... 39214.3.2 Stanzeffekt .............................................................. 39514.3.3 Text-Banderole ........................................................ 397
1242.indb 91242.indb 9 08.06.2009 10:50:0008.06.2009 10:50:00
10 | Inhalt
14.3.4 Schwarz-Bunt-Effekt ................................................ 40114.3.5 Neoneffekt aus Bildern ............................................ 403
AnhanTeil V g
15 Ausblicke ........................................................................... 409
15.1 Rechtliche Hinweise ............................................................. 40915.1.1 Impressumspfl icht ................................................... 40915.1.2 Bildrechte ................................................................ 41115.1.3 Kartenmaterial ......................................................... 41215.1.4 Shopsysteme ........................................................... 412
15.2 Nützliche Werkzeuge ........................................................... 41315.2.1 Firebug .................................................................... 41315.2.2 Web Developer ....................................................... 41415.2.3 ColorSchemer Studio (Windows/OS X) .................... 41415.2.4 xScope (OS X) ......................................................... 416
15.3 Weblinks .............................................................................. 41615.3.1 Gestaltung ............................................................... 41715.3.2 Entwicklung ............................................................ 41715.3.3 Blogs und Inspiration ............................................... 418
16 Die DVD zum Buch ............................................................ 421
16.1 Software .............................................................................. 42116.1.1 Grafi k ...................................................................... 42116.1.2 Entwicklung ............................................................ 422
16.2 Goodies ............................................................................... 42216.3 Linksammlung ...................................................................... 42316.4 Workshops .......................................................................... 42316.5 Video-Lektionen .................................................................. 423
Index ............................................................................................ 425
1242.indb 101242.indb 10 08.06.2009 10:50:0008.06.2009 10:50:00
Workshops | 11
WO
RK
SH
OP
S
Workshops
Bildbearbeitung mit Photoshop CS4
Mit verschiedenen Pinselspitzen arbeiten � .................................. 56Ein einfaches Objekt nachzeichnen � ............................................ 65Weiche Bildübergänge � ............................................................... 74
Raster
Template erstellen � ..................................................................... 119Logische Bereiche vorbereiten � ................................................... 130Photoshop-Raster einrichten � ..................................................... 133Manuelles Raster einrichten (optional) � ....................................... 135Inhaltsbereich im goldenen Schnitt � teilen .................................. 137
Farbe
Farbkanäle in Photoshop � ........................................................... 147Farben für das Projekt defi nieren � ............................................... 168Farbklänge in Photoshop erstellen � ............................................. 177
Ausarbeiten des Screendesigns
Navigationshintergrund erstellen � ............................................... 228Navigationselemente einfügen � .................................................. 230Header vervollständigen � ............................................................ 235Inhaltsbereich vorbereiten � ......................................................... 236Die Teaserbox entsteht � .............................................................. 237News-Bereich erstellen � .............................................................. 241Forenbeiträge anlegen � ............................................................... 245Abschließende Ergänzungen � ...................................................... 246Navigationszustände in Ebenenkompositionen speichern � ........... 250
Automatisierung
Defi nieren einer Stil-Serie � .......................................................... 332Wasserzeichen � erstellen ............................................................. 335Eine einfache Variablen-Datei erstellen � ...................................... 342
Interface und Animation
Animiertes Banner � ..................................................................... 3503D-Navigation � .......................................................................... 353Dropdown-Navigation � .............................................................. 356
1242.indb 111242.indb 11 08.06.2009 10:50:0008.06.2009 10:50:00
12 | Workshops
Glasbutton � ................................................................................ 361Rollover-Button � ......................................................................... 363Ein skalierbarer Button � .............................................................. 365Ein Bild mit Zoomify exportieren � ............................................... 369
Bild & Symbolik
Ein Icon erstellen � ....................................................................... 374Ein Favicon in Photoshop erstellen � ............................................ 382Methoden zur Bildverkleinerung � ................................................ 384Einen Rapport erstellen � ............................................................. 386Hintergrundbilder fl exibel einbinden � ......................................... 388Bilder im Grunge-Stil � ................................................................. 392Bildelemente stanzen � ................................................................ 395Banderole als Zierelement � ......................................................... 397Partielle Farbanpassung � ............................................................. 401Neon-Outlines � .......................................................................... 403
1242.indb 121242.indb 12 08.06.2009 10:50:0108.06.2009 10:50:01
Video-Lektionen | 13
VID
EO
-LE
KT
ION
EN
Video-Lektionen
Auf der Buch-DVD fi nden Sie einige ausgesuchte Video-Lektionen aus dem Video-Training »Adobe Photoshop CS4 für Fortgeschrittene« von Pavel Kaplun (ISBN 978-3-8362-1267-0). Sie fi nden folgende Filme:
Kapitel 1: Ebenen-Basiswissen1.1 Mit Ebenenmasken arbeiten (05:53 min)1.2 Ebenenfüllmethoden (12:44 min)1.3 Ebenenstile (09:39 min)
Kapitel 2: Freistellen für Fortgeschrittene2.1 Eine komplexe Lasso-Auswahl erstellen (06:25 min)2.2 Pfad-Auswahl erstellen (12:01 min)2.3 Auswahl in Pfad umwandeln (11:01 min)
Kapitel 3: Vektoren und Pfade3.1 Formebenen (05:49 min)3.2 Eigene Formen erstellen (04:57 min)3.3 Texte erstellen und bearbeiten (08:36 min)
1242.indb 131242.indb 13 08.06.2009 10:50:0108.06.2009 10:50:01
5.2 Gliederung logischer Bereiche | 127
Voraussetzungen auskommt. Allerdings ist auch dies mit ein wenig Übung zu meistern, zumal Sie stets im Hinterkopf behalten sollten, dass sich die Optik den strukturellen Möglichkeiten unterzuordnen hat.
Abweichende Farbdarstellung | Grundsätzlich sind Grafi ken für das Internet im sRGB -Modus anzulegen, dem kleinsten, gemeinsamen Farbraum aller halbwegs modernen Bildschirme. Dennoch kann es zu Abweichungen kommen. Röhrenmonitore werden mit der Zeit unscharf und verlieren an Helligkeit, günstige TFTs sind vom Her-steller aus marktschreierischen Gründen oft viel zu kontrastreich und gesättigt eingestellt worden. Selten ist vorauszusetzen, dass ein Nut-zer einen farbkalibrierten Monitor sein Eigen nennt. Hinzu kommt, dass die wenigsten Browser Farbmanagement unterstützen. Vor-reiter sind Safari und Firefox 3 (sofern im Letzteren manuell in der »about:confi g« aktiviert), der große Rest kommt ohne aus.
Auch betriebssystembedingte Ungleichheiten sind zu beachten, so nutzt Apple einen anderen Standardgammawert für OS X als Microsoft für Windows. Die Folge: Farben wirken am Mac blasser. (In OS X Snow Leopard soll das übrigens an Windows angepasst werden.) Mehr zum Thema Farbmanagement fi nden Sie in Kapitel 6, »Farbe«.
Gliederung logischer Bereich5.2 e
Eine Website besteht aus verschiedenen Informationseinheiten, die unterschiedliche Funktionalitäten abdecken. Ihre Zuordnung ist ein wesentlicher Faktor dafür, ob sich eine Website gut navigieren und inhaltlich erfassen lässt.
Rahmenelement5.2.1 eSich auf jeder Seite wiederholende Bereiche ohne primäre Navigati-onsfunktion zählen zu den Rahmenelementen. Dazu gehören der Sei-tenkopf (Header ) und der Seitenfuß (Footer ). Ihre Aufgabe besteht hauptsächlich darin, die auf den Unterseiten dargebotenen Informa-tionen in einem zusammenhängenden Kontext zu binden und dem Nutzer ein Gefühl von Orientierung zu verschaffen. Logo, Copyright-Angaben, Links zu RSS-Feeds und feststehende Vermerke wie Spon-soren zählen beispielsweise dazu.
Navigation5.2.2 Navigationsbereiche können ebenfalls den Rahmenelementen zuge-ordnet sein, jedoch haben sie die essenzielle Aufgabe der Leitung des Nutzers durch den gesamten Webauftritt. Sie werden nach ihrer
Farbmanagement in Firefox 3
Wie Sie Farbmanagement im Firefox 3 einrichten, erfahren Sie in Abschnitt 6.3.3, »Webdesign und Farbmanagement«.
1242.indb 1271242.indb 127 08.06.2009 10:50:3708.06.2009 10:50:37
128 | 5 Raster
Wichtigkeit für die Führung in Primär-, Sekundär- und Tertiärnaviga-tion unterteilt. Zu ihnen gehören
horizontale und vertikale Menüs, �
Pulldown-Liste � n,Page-Browser (Seitenzahlen), �
generische Menüs (zum Beispiel die Wiederholung der ersten �
Menüebene im Footer),Textlinks (im Inhaltsbereich), �
Navigationspfade (Breadcrums – eine Abbildung der aktuellen �
Seitenposition),Imagemap � s (Bilder mit verlinkten Bereichen),Ankermenüs (bzw. Sprungmarken zu bestimmten Inhaltsberei- �
chen auf derselben Seite),Suchfelder, �
alphabetische Indexe, �
Baumnavigation, �
Sitemaps � undindividuelle Navigationstypen (Begriffswolken/Tag-Clouds, Tabs). �
Abbildung 5.24 �
Eine kleine Zusammenstellung ver-schiedener Navigationstypen: alpha-betischer Index (1, http://www.w3.org), horizontale Navigation (2, http://freelanceswitch.com), Begriffs-wolke (3, http://www.mister-wong.de), vertikale Navigation (4, http://www.jquery.com), Baumnavigation (5, http://www.fotocommunity.de), Pulldown-Listen (6, http://iconfac-tory.com), Suchfeld (7, http://www.einfach-fuer-alle.de), Page-Browser (8, http://www.designsociety.de), Tabs (9, http://www.24ways.org) und ein individueller Produktwähler (j, http://www.apple.de)
1
4
5
2
3
6
7
8
9
j
1242.indb 1281242.indb 128 08.06.2009 10:50:3808.06.2009 10:50:38
5.3 Gliederung logischer Bereiche | 129
Primäre Navigationspunkte (das Hauptmenü mit seinen Unterebenen) sollten eine höhere Wichtigkeit und optische Präsenz erfahren als die sekundären (Page-Browser, generische Menüs) oder Hilfskonstrukte wie die Breadcrum-Navigation (tertiär), die lediglich die Nutzung ver-einfachen. Welche Art hierbei jeweils zum Einsatz kommt, hängt von der Konzeption und den gestalterischen Vorlieben ab.
Die Darstellung der Menüebenen erfolgt idealerweise in abstei-gender, optischer und struktureller Wichtigkeit. Es sollte immer klar ersichtlich sein, in welcher Überkategorie sich eine Unterseite befi n-det. Ebenfalls nicht zu vernachlässigen ist die Darstellung der aktuel-len Position des Nutzers im Kontext der gesamten Website.
� Abbildung 5.25Die Inhalte auf der Seite http://www.photozauber.de sind stark untergliedert, so dass die Anzeige der aktuellen Position durch eine Breadcrumb-Navigation gelöst wurde.
Inhaltsbereiche5.2.3 Der Inhaltsbereich (Content ) umfasst die eigentlichen Informationen des Dokuments, in Text-, Bild- und multimedialer Form. Eine Unter-teilung in mehrere Spalten (zumeist zwei) wird häufi g dann einge-setzt, wenn zum generellen Inhalt weitere Zusätze vermittelt werden
1242.indb 1291242.indb 129 08.06.2009 10:50:3808.06.2009 10:50:38
130 | 5 Raster
sollen. Bilderspalten und Linkmenüs sind an dieser Stelle als Beispiele zu nennen.
Logische BereicheWorkshop: vorbereitenDie aufgezeigte Strukturierung einer Website lässt sich gut auf die Ebenen-Palette von Photoshop übertragen. Somit behält man beim Gestalten einen besseren Überblick und erleichtert auch anderen Per-sonen, die an dem Projekt arbeiten, zum Beispiel dem Webentwick-ler, das Verständnis des Aufbaus.
Öffnen Sie die Datei »template-1024.psd«. Markieren Sie in der Ebenen-Palette die Ebene Hintergrund und erstellen insgesamt vier Ebenenordner. Klicken Sie dazu mit gedrückter (Alt)-Taste auf das entsprechende Symbol in der Ebenen-Palette, und benennen Sie die einzelnen Gruppen mit Header, Navigation, Content und Footer. Weisen Sie beim Erstellen den verschiedenen Ordnern zudem noch unterschiedliche Farben zu, um sie optisch noch besser voneinander zu trennen. Auch das erleichtert später das Auffi nden der gewünsch-ten Inhalte.
Bringen Sie abschließend die Hierarchie der einzelnen Gruppen in der Ebenen-Palette in die Reihenfolge, die Abbildung 5.28 zeigt.
Abbildung 5.26 �
Eines sehr klaren Layouts mit zwei-spaltigem Inhalt bedient sich die Seite der Stiftung Moritzburg (http://www.stiftung-moritzburg.de). Bilder und dem Text zugeordnete Zusatzinformationen fi nden in der rechten Spalte Platz.
00-Beispielprojekt/Template-Er-
stellen/template-1024.psd.
Abbildung 5.27 �
Benennung und Farbmarkierung der Ebenengruppen
1242.indb 1301242.indb 130 08.06.2009 10:50:3808.06.2009 10:50:38
5.3 Gestaltungsgrundlagen | 131
Gestaltungsgrundlage5.3 n
»Ordnung braucht nur der Dumme, das Genie beherrscht das Chaos.«Wenn wir dieser Weisheit von Albert Einstein folgten, hätten wir
es mit jeglicher Gestaltung leichter. Da man allerdings nicht davon ausgehen kann, dass jeder Mensch ein Genie ist, welches das Chaos versteht, das andere produzieren, gibt es sinnvolle Gestaltungsregeln, die es erleichtern, dargestellte Inhalte zu erfassen.
Eine klare Strukturierung und der optische Bezug der dargebote-nen Informationen zueinander erleichtert es dem Leser, sich schnell zurechtzufi nden und das gewünschte Wissen ohne langes Suchen aufzufi nden und zu erfassen.
Neben Farbe und Kontrast – beides Themen, auf die wir im nächs-ten Kapitel eingehen werden – gibt es die Möglichkeit, durch den for-malen Aufbau und die räumliche Verteilung der Elemente den Leser gezielt zu führen.
Raster5.3.1 Beim Gestalten von Websites sollten gleiche Elemente immer wieder an der gleichen Stelle auftauchen. Die Navigation besitzt einen fes-ten Platz innerhalb des Layouts, der sich nicht ändern sollte, egal auf welcher Unterseite man sich gerade befi ndet. Auch der Hauptinhalt liegt innerhalb einer vorgegebenen Fläche, ebenso wie zum Beispiel der Footer . Auf diese Weise lernt der Besucher einer Internetseite schnell, wo er nach welchen Informationen bzw. Steuerelementen zu suchen hat, und wird nicht mit jedem Seitenwechsel innerhalb der-selben Webpräsenz aufs Neue vor Unbekanntes gestellt.
Um diese Konsistenz zu wahren, arbeitet man mit so genannten Rastern. Dieses ist im Grunde nichts anderes als eine horizontale und vertikale Zerlegung der Arbeitsfl äche durch Linien oder Balken. Diese
� Abbildung 5.28 Ebenengruppen anordnen
Die fertige Vorlage fi nden Sie als Photoshop-Datei auf der Buch-DVD: 00-beispielprojekt/startseite/start-
seite-01.psd
Hinweis
Auf seiner Blog-Site www.subtrac-tion.com hat Khoi Vinh ein PDF mit dem Titel »Grids Are Good« veröf-fentlicht, das in Zusammenarbeit mit Mark Boulton verfasst wurde und in vielen kleinen Schritten das konsequente Aufbereiten eines Rasters beschreibt.
1242.indb 1311242.indb 131 08.06.2009 10:50:3908.06.2009 10:50:39
132 | 5 Raster
Unterteilungen werden bei der anschließenden Gestaltung als Hilfs-konstrukte zum Ausrichten der verschiedenen Elemente verwendet. Wichtig ist die Betonung auf »Hilfskonstrukt«. Das Raster darf nicht als Gitter betrachtet werden, hinter dem das Design wie ein Gefan-gener eingekerkert sitzt, sondern als nützliche Stütze während der Gestaltung.
Dokumentraster | Die einfachste Variante, Inhalte geordnet zueinan-der zu platzieren, führt über die Verwendung eines Dokumentrasters. Hierbei erfolgt eine gleichmäßige Zerlegung der Arbeitsfl äche in beide Richtungen. In Photoshop lässt sich dieses Raster in Form gepunkte-ter Linien ohne große Vorbereitung einblenden und ermöglicht somit eine schnelle, grundlegende Lösung.
Gestaltungsraster | Um die Unzahl verschiedener Inhalte, wie Logo, Buttons, Navigationen, Überschriften, Textblöcke, Zwischenüber-schriften, Formulare, Grafi ken etc. besser zu organisieren, empfi ehlt es sich gerade bei umfangreichen Seiten, anstatt des Dokumentras-ters bzw. basierend auf ihm mit einem Gestaltungsraster zu arbeiten, das die Platzierung der verschiedenen Inhaltsbereiche genau festlegt. Innerhalb dieser Bereiche kann es dann zu Variationen kommen, die jedoch immer wieder das gleiche Schema aufweisen und somit beim Betrachter für eine verbesserte Orientierung sorgen.
Erzwungene Scrollbalken
Viele Designer bevorzugen es, die Scrollbalken per Formatierung ständig einzublenden, selbst wenn es keine weiteren Inhalte zu sehen gibt, nur um das Springen des In-halts zu vermeiden. Das ist aus Nutzerführungssicht vollkommen falsch, da es dem Besucher ver-meintliche weitere Inhalte vorgau-kelt, die nicht existieren.
Abbildung 5.29 �
Die Seite der Volkswagen AG unter-teilt sich in das Service-Menü (grün), den Header-Bereich (gelb), den Navigationsblock (rot) und den Inhaltsbereich (lila). Der Inhalt ist dabei in weitere vier Spalten geglie-dert, die eine fl exiblere Positionie-rung verschiedener Elemente ermöglichen.
1242.indb 1321242.indb 132 08.06.2009 10:50:3908.06.2009 10:50:39
5.3 Gestaltungsgrundlagen | 133
Registerhaltigkeit
Im Printbereich sollte neben dem Raster zudem auf die Registerhaltigkeit geachtet werden. Die Grundlinie des Textes muss dabei auf der Vorder- und Rückseite eines Blattes identisch sein, um ein hässliches Durchscheinen versetzter Zeilen zu vermeiden. Diese Problematik existiert am Bildschirm in dieser Form zwar nicht, dennoch sollte zwingend darauf geachtet werden, dass beständig dargestellte Bild- oder Textobjekte stets an exakt gleicher Position liegen. Selbst ein Pixel Verschiebung führt zu auffälligen und unschönen Sprüngen beim Seitenwechsel.
� Abbildung 5.30 Unsauber positionierte Elemente können hässlich springen.
Abbildung links: Folgen zwei Seiten mit ähnlichem Inhalt, wie in diesem Fall zwei Tutorial-Seiten direkt aufeinander, werden unsaubere Positionierungen sofort sichtbar.Abbildung rechts: Oben: Der Text im oberen Abschnitt wurde versehentlich leicht versetzt positioniert. Bei einem Wechsel zwischen beiden Seiten kommt es zu einem hässlichen Sprung. Das fällt insbesondere bei Bildschirmpräsen-tationen sofort auf. Unten: Die Texte stehen identisch übereinander.
Photoshop-RasterWorkshop: einrichtenÖffnen Sie in Photoshop über Bearbeiten/Photoshop � Voreinstel-
lungen � Hilfslinien, Raster und Slices... den Dialog zum Einrich-ten des Rasters.
Die Farbe 1 des Rasters sollte, wie bei Hilfslinien auch, immer in gutem Kontrast zu der dominierenden Farbe des Dokuments stehen. Im Fall unseres Projekts belassen wir sie erst einmal bei dem Stan-dardgrau. Die Art 2 bleibt ebenfalls auf der voreingestellten Auswahl Linien.
Den Wert für Rasterlinie alle 3 legen Sie auf 16 Pixel fest. Jedes Rasterfeld misst damit 16 Pixel in Breite und Höhe. Den Wert für Unterteilungen 4 setzen Sie auf »1«.
� Abbildung 5.31 Einstellmöglichkeiten für das Dokumentraster
a c db
1242.indb 1331242.indb 133 08.06.2009 10:50:3908.06.2009 10:50:39
134 | 5 Raster
Um das Raster einzublenden, wählen Sie Ansicht � Einblenden � Raster oder gehen den Weg über das Icon Extras anzeigen in der Anwendungsleiste.
Im Dokument sieht das dann so aus:
8er und 16er Raster für Screendesigns
Gestaltet man für die Ausgabe auf einem Display, bietet sich ein Raster mit einer Kantenlänge von 8 oder 16 Pixeln an. Alle gängigen Aufl ösungen von Mobiltelefonen, Smartphones, Notebooks und Monitoren haben diesen Wert als gemeinsamen Teiler. Somit erhält man jederzeit eine perfekt sit-zende und fl ächendeckende Aufteilung.Stellt man in Photoshop den Wert für Rasterlinie alle auf 16 Pixel, hat man ein Raster mit feiner und fl exibler Dichte, die sich bei Bedarf durch Erhö-hung des Wertes Unterteilungen auf »2« optisch differenziert noch genauer als 8er Raster darstellen lässt.
� Abbildung 5.3416er Raster ohne weitere Unterteilung (links) und mit Unterteilung (rechts).
� Abbildung 5.32Raster ein- und ausblenden über die Anwendungsleiste
Sie fi nden die Workshop-Datei mit dem aktuellen Stand unter 00-Bei-
spielprojekt/startseite/start-
seite-02.psd.
Abbildung 5.33 �
Arbeitsdokument mit eingeblende-tem Raster
Browserrahmen und Raster
Verwendet man ein 8er bzw. 16er Raster zum Gestalten, empfi ehlt es sich, ohne das umschließende Browserfenster zu arbeiten. Das Raster in Photoshop beginnt immer am linken Dokumentrand und wird, bezogen auf die eigentliche Arbeitsfl äche, durch den Browser-rahmen falsch dargestellt. In unse-rem Workshop arbeiten wir den-noch mit dem Photoshop-Raster. Zum einen stellt die Verschiebung bei unserem zentrierten Layout kein großes Problem dar, zum an-deren sollen die Funktionen des programmeigenen Rasters erklärt werden.
1242.indb 1341242.indb 134 08.06.2009 10:50:4008.06.2009 10:50:40
5.3 Gestaltungsgrundlagen | 135
Manuelles RasterWorkshop: einrichten (optional)Im Tippkasten »Browserrahmen und Raster« wurde auf die Problema-tik hingewiesen, dass das Photoshop-Raster, ausgehend vom linken oberen Eck, eine fi xe Position hat. Wünscht man sich hier mehr Flexi-bilität, lässt sich schnell ein manuelles Raster einrichten.
1 Muster anlegenErstellen Sie dazu ein neues Dokument in den Abmessungen der gewünschten Rastergröße mit einem transparenten Hintergrund. In diesem Beispiel greifen wir erneut die 16 Pixel auf.
Füllen Sie am oberen und rechten Rand eine 1 Pixel starke Aus-wahl mit der Farbe, die Ihr Raster zeigen soll 1, und legen Sie dieses Dokument über Bearbeiten � Muster festlegen... als Muster fest. In dem erscheinenden Muster-Dialog geben Sie eine passende Bezeich-nung ein, z. B. »16er Raster« 2.
2 Gitterdatei erstellenLegen Sie eine neue Datei mit einer Breite von 2 000 Pixeln, einer Höhe von 5 000 Pixeln und transparentem Hintergrund an.
Über Bearbeiten � Fläche füllen � Verwenden � Muster weisen Sie die zuvor erstellte Grafi k als Füllmuster zu. Wählen Sie dazu im noch geöffneten Dialog Fläche füllen unter Eigenes Muster 3 die entsprechende Miniatur und bestätigen mit OK.
HINWEIS
Um ein Muster festlegen zu kön-nen, darf keine aktive Auswahl vor-handen sein. Über Auswahl � Aus-
wahl aufheben oder kurz (Strg)/(°)+(D) heben Sie alle bestehen-den Selektionen auf.
� � Abbildung 5.35 Muster erstellen 1 und festlegen 2
� Abbildung 5.36 Das zuvor erstellte Muster anwenden
a
b
c
1242.indb 1351242.indb 135 08.06.2009 10:50:4108.06.2009 10:50:41
136 | 5 Raster
Abschließend kopieren Sie die Ebene mit dem erstellten Raster in Ihr eigentliches Arbeitsdokument, wo es sich frei positionieren, ein- und ausblenden lässt.
Der Haken an dieser Variante: Im Gegensatz zum nativen Pho-toshop-Raster lässt sich die Größe nur durch erneutes Anlegen des Musters ändern. Zudem können Objekte nicht magnetisch an den Linien ausgerichtet werden.
Der goldene Schnitt | Ursprünglich stellte der goldene Schnitt das Verhältnis zweier Zahlen zueinander dar. Heute ist er vorrangig aus der Kunst oder Fotografi e bekannt und beschreibt die Aufteilung von Streckenverhältnis sen, die wir als besonders harmonisch betrachten.
Die ersten Beschreibungen zum goldenen Schnitt gehen auf den Mathematiker Euklid zurück, der noch vor Christus lebte. Damals hatte er noch die Bezeichnung »proportio habens medium et duo extrema«, was frei übersetzt in etwa »Teilung im äußeren und mitt-leren Verhältnis« bedeutet. Unter dem Theologen und Mathematiker Luca Pacioli, der im 15. Jahrhundert lebte, änderte sich die Bezeich-nung zu »divina proportione«, also dem »göttlichen Verhältnis«. Mit dem 19. Jahrhundert wurde dann die endgültige Bezeichnung »gol-dener Schnitt« übernommen und bis heute behalten.
Das korrekte Teilungsverhältnis für den goldenen Schnitt beträgt in etwa 1:1,618.
Um von der Gesamtstrecke die beiden Teilstrecken zu erhalten, geht man folgendermaßen vor:
Gesamtstrecke geteilt durch 1,618 = Große StreckeGesamtstrecke minus große Strecke = Kleine Strecke
Am Beispiel einer Strecke von 1000 Pixeln würde sich also eine große Strecke von 618 Pixeln ergeben (1000/1,618) und eine kurze Strecke von 382 Pixeln (1000 – 618).
Im Bereich der Gestaltung, speziell für das Entwerfen von Websites, lassen sich mit dem goldenen Schnitt schnell Richtwerte für die har-monische Raumaufteilung des Inhaltsbereichs schaffen. Sehen wir uns das einmal in der Praxis an unserem Beispielprojekt an.
Fibonacci -Zahlenfolge
Die um 1200 von dem Mathemati-ker Leonardo Fibonacci (eigentlich Leonardo von Pisa) entwickelte Zahlenfolge 1, 1, 2, 3, 5, 8, 13, 21, 34, ... wird häufi g mit dem golde-nen Schnitt in Verbindung ge-bracht. Man erhält jeweils die Fol-gezahl durch die Addition der beiden vorhergehenden Zahlen. Werden die Verhältnisse von zwei aufeinander folgenden Zahlen er-mittelt, ergibt sich annähernd der Wert des goldenen Schnitts: 3:2=1,5; 5:3=1,66667; 34:21=1,61905.
Die grafi sche Umsetzung dieser Zahlenfolge ist überraschend häufi g in der Natur zu fi nden, zum Bei-spiel in der Anordnung der Kerne einer Sonnenblume oder auf Tan-nenzapfen.
� Abbildung 5.37Oben: Gesamtstrecke; unten: im goldenen Schnitt (1:1,618) geteilte Strecken
1242.indb 1361242.indb 136 08.06.2009 10:50:4108.06.2009 10:50:41
5.3 Gestaltungsgrundlagen | 137
Inhaltsbereich im goldenen SchnittWorkshop: teilenVerwenden Sie die Vorlage »startseite-01.psd« von der DVD.
Der Inhaltsbereich soll in zwei Spalten aufgeteilt werden: den Hauptbereich und eine Seitenleiste mit weiterführenden Informatio-nen und Interaktionsmöglichkeiten. Gehen Sie dazu vor wie folgt:
1 Dokument ausmessenDie gesamte Breite des Layouts ohne Hintergrund soll 880 Pixel betragen. Wenden Sie den goldenen Schnitt auf diesen Wert an, erhalten Sie zwei Streckenabschnitte mit einer Länge von etwa 544 Pixeln (880/1,618) und 336 Pixeln (880 – 544).
Setzen Sie den Nullpunkt zuerst auf die Standardeinstellung (siehe Tippkasten »Nullpunkt zurücksetzen«) und ziehen ihn danach aus dem Linealkreuz an die Position X = 18, Y = 90 1, um das linke obere Eck innerhalb des Viewports als Referenzpunkt für die Lineale zu bestimmen.
2 Hilfslinien positionierenErstellen Sie nun drei vertikale Hilfslinien an den Positionen 44, 588 und 924. Die erste und die dritte Hilfslinie defi nieren die Breite des gesamten Inhaltsbereichs. Die zweite Hilfslinie teilt diese Breite im goldenen Schnitt und trennt den Inhalt in die gewünschten Spalten.
So angenehm die Proportionen des goldenen Schnitts auch sind, bieten sie sich ohne Anpassung für die Inhaltsgliederung nur bedingt an. Die Seitenspalte ist für unsere Zwecke ein Stück zu breit. Aus diesem Grund verwenden wir die jetzige Teilung nur als Orientierung und verschieben die zweite Hilfslinie dezent auf die Position 620.
00-Beispielprojekt/startseite/start-
seite-01.psd
Nullpunkt zurücksetzen
Sollten die Lineale nicht im linken oberen Eck mit dem Wert 0 begin-nen, setzen Sie den Nullpunkt auf die Ursprungswerte zurück, indem Sie doppelt auf das Linealkreuz kli-cken.
� Abbildung 5.38 Nullpunkt wiederherstellen
� Abbildung 5.39 Nullpunkt auf den Viewport justieren
Goldener Schnitt als Richtwert
Betrachten Sie den goldenen Schnitt nicht als Zwang, sondern mehr als Richtwert, um den herum Sie sich bewegen können. Im Laufe der Zeit werden Sie ein Gespür da-für bekommen.
a
1242.indb 1371242.indb 137 08.06.2009 10:50:4208.06.2009 10:50:42
138 | 5 Raster
Speichern Sie das für die Gestaltung endgültig vorbereitete Doku-ment ab.
Die Drittelregel | Es ist mitunter schwer, aus dem Kopf heraus den goldenen Schnitt genau zu treffen. Beim Gestalten auf Papier oder am Computer lassen sich die gewünschten Verhältnisse leicht berechnen, beim Fotografi eren hingegen sieht es anders aus. Um dennoch einen Richtwert für einen harmonischen Bildaufbau zu haben, lässt sich die Drittelregel anwenden. Sie besagt, dass ein Bild zu drei gleichen Teilen aufgeteilt wird. Das Hauptmotiv (bzw. die Hauptmotive) legt man auf eine der Achsen. Die Schnittpunkte einer Horizontalen und einer Ver-tikalen bieten sich dabei als optisch besonders starkes Zentrum an.
Abbildung 5.40 �
Das fertig vorbereitete Dokument
Sie fi nden die fertige Datei auf der Buch-DVD im Ordner 00-beispiel-
projekt/startseite/startseite-02.
psd.
Kamera-Hilfsgitter
Die meisten Digitalkameras bieten heutzutage die Option, sich ein Gitter im Sucher anzeigen zu las-sen, anhand dessen sich die Bild-aufteilung gemäß der erwähnten Drittelregel beurteilen lässt.
Abbildung 5.41 �
Die roten Linien unterteilen das Motiv in drei gleiche Bereiche. Man erkennt, dass die Wassergischt direkt aus dem Schnittpunkt unten links austritt und sich um die linke Vertikale verteilt. Im Vergleich dazu die Aufteilung im goldenen Schnitt, symbolisiert durch die gelben Linien.
1242.indb 1381242.indb 138 08.06.2009 10:50:4208.06.2009 10:50:42
5.3 Gestaltungsgrundlagen | 139
Aufmerksamkeitsgesetz5.3.2 eWenn wir Informationen aufnehmen, egal von welcher Quelle, ist es naturgegeben, die für uns wichtige Information zu erfassen und unwichtige auszublenden (selektive Aufmerksamkeit , sehr schön an diesem lustigen Beispiel zu erkennen: http://www.youtube.com/watch?v=47LCLoidJh4). Wie gut das funktioniert, wird zum einen von der Gestaltung beeinfl usst und zum anderen von den Erfahrungswer-ten des Besuchers mit dem verwendeten Medium.
Unter Einbeziehung der Aufmerksamkeitsgesetze kann der Desig-ner die Gesetzmäßigkeiten der menschlichen Interessen nutzen, um dem Leser sowohl die Suche nach den gewünschten Informationen zu erleichtern als auch ihn gezielt zu den Inhalten steuern, die der Betreiber der Seite als wichtig erachtet.
Das Intensitätsgesetz | Da nicht alle Elemente gleichzeitig betrachtet werden können, reagiert der Mensch zuerst auf solche, die besonders intensive Sinnesreize auslösen. Das kann zum Beispiel durch schnelle Bewegungen (Animation), hohe Kontraste, laute Geräusche oder hel-les Licht geschehen.
� Abbildung 5.42 Intensitätsunterschiede: 1 Kontrast, 2 Größe, 3 Schärfe
Farbgesetz e | Farben können je nach Eigenfarbe und ihrer Umge-bung unterschiedliche Anmutungen und Wirkungen hervorrufen. Eine ausführliche Beschreibung zu den verschiedenen Kontrasten und Farbwirkungen fi nden Sie im Folgekapitel zur Farbe.
Das Ausnahmegesetz | Ein Element, dessen Eigenschaft sich deutlich von der Umgebung abhebt, wird als Erstes wahrgenommen. Diese Eigenschaft macht man sich im Webdesign häufi g zunutze, beispiels-weise um im Text einen bestimmten Abschnitt als Link 4 zu markie-ren (andere Farbigkeit, Unterstrich) oder das momentan aktive Navi-gationselement 5 zu verdeutlichen.
� Abbildung 5.44 Links: http://www.romanik.de, rechts: http://www.geo.de
Chunking
George A. Miller formuliert 1956 die Chunking-Hypothese, die be-sagt, dass das menschliche Kurz-zeitgedächtnis 7 + /– 2 Chunks speichern kann und genetisch de-terminiert ist. Bezogen auf Webde-sign lässt sich ein Chunk auf ein Inhaltselement reduzieren. Durch das optische Gliedern von Inhalten können gleiche Einheiten, wie zum Beispiel eine Aufzählung von Stich-punkten, zu einem Chunk zusam-mengefasst werden. In Verbindung mit Navigationen im weiteren Ver-lauf des Buches gehen wir noch näher auf dieses Thema ein.Weitere Informationen fi nden Sie unter http://www.coaching-kiste.de/index.html?chunking.htm.
� Abbildung 5.43 Die Listenpunkte stehen oben logisch beisammen und werden als eine Einheit wahrgenommen. Die unstrukturierte Anordnung unten erschwert das Erfassen.
1 2 3
ed
1242.indb 1391242.indb 139 08.06.2009 10:50:4308.06.2009 10:50:43
140 | 5 Raster
Das Gewöhnungsgesetz | Erfährt man einen bestimmten Reiz immer und immer wieder, gewöhnen wir uns daran und nehmen ihn nicht mehr als auffällig wahr. Wenn wir beispielsweise aus dem nassgrauen deutschen Winter nach Australien fl iegen, nehmen wir die dortige Wärme als etwas Besonderes und Wohltuendes wahr. Nach einiger Zeit betrachten wir sie jedoch als Selbstverständlichkeit, der Reiz daran geht verloren.
Das Größengesetz | Wenn man es genau betrachtet, ist das Größen-gesetz bereits Bestandteil des Intensitätsgesetzes. Ein großes Element wird gegenüber einem kleinen Element schneller wahrgenommen (siehe auch Abbildung 5.43).
Das Dissonanzgesetz | Im Laufe unseres Lebens ordnen wir einem Begriff, einem Ding etc. ein bestimmtes Aussehen zu. Die Sonne ist gelb, ein Hund hat vier Beine usw.
Widerspricht das, was wir sehen, unseren Gewohnheiten, hat dies eine erhöhte Aufmerksamkeit zur Folge.
� Abbildung 5.45Die Katze rechts fällt aufgrund ihres dritten Auges sofort auf, während die linke Abbildung das gelernte Aussehen einer Katze darstellt.
Das Positionsgesetz | Werden Objekte im zentralen Blickfeld positio-niert, ist die Wahrscheinlichkeit höher, dass sie zuerst wahrgenommen werden. Inhalte, die am Rand oder auf einer Website sogar außerhalb des Viewports, also außerhalb des sicheren sichtbaren Bereichs liegen und erst ein Scrollen an diese Position verlangen, fi nden wenig bis gar keine Beachtung.
HINWEIS
Auf der Webseite http://www.kommdesign.de/texte/ befi nden sich ausführliche weiterführende Infor-mationen zur Aufmerksamkeits-regulierung und Wahrnehmung.
1242.indb 1401242.indb 140 08.06.2009 10:50:4308.06.2009 10:50:43
5.4 Gestaltungsgrundlagen | 141
Formale Regel5.3.3 nAnknüpfend an die Regeln zur Aufmerksamkeitssteuerung fi nden Sie im folgenden Abschnitt einige Grundlagen, wie Gestaltungselemente durch ihren formalen Bezug zueinander auf den Betrachter wirken.
Gesetz der Ähnlichkeit | Das menschliche Gehirn bildet aus dicht bei-einanderliegenden ähnlichen Elementen automatisch eine Gruppe, die als Gesamtheit aufgefasst wird. So wird im unterhalb gezeigten Beispiel sowohl die Hauptnavigation (weiß und in Großbuchstaben geschrieben) als auch die aufgeklappte Sekundärnavigation (grau, Groß- und Kleinschreibung) jeweils als eigener inhaltlicher Block erkannt und nicht jeder Listenpunkt im Einzelnen.
� Abbildung 5.47 Die Primär- und Sekundärnavigation, gelb bzw. türkis markiert, werden als getrennte, aber in sich geschlossene Einheiten aufgefasst.
Gesetz der Nähe | Elemente mit gleichem Aussehen werden, ent-sprechend Ihrer räumlichen Distanz zueinander, in Gruppen einge-teilt. Obwohl die Blumen im nachstehenden Beispiel optisch keinerlei Unterschied aufweisen, erkennen wir im blauen Block vertikale und im grünen Block horizontale Linien.
� Abbildung 5.46Links: normaler Google-Startbild-schirm. Rechts: Das Eingabeformular wurde an den unteren rechten Rand gesetzt und rutscht sofort aus dem automatisch anvisierten Blickfeld.
1242.indb 1411242.indb 141 08.06.2009 10:50:4308.06.2009 10:50:43
142 | 5 Raster
Gesetz der Geschlossenheit | Elemente, die von einer geschlossenen Form umgeben werden, fassen wir als eine Gruppe auf. Betrachtet man die blauen Linien in der linken Bildhälfte 1, sieht man darin mehrere vertikale Striche. Verbindet man jeweils zwei Linien an ihren oberen und unteren Enden, sind es nicht mehr vier einzelne Striche, sondern eine geschlossene, rechteckige Gesamtform, die als eine Ein-heit gedeutet wird 2.
Im Bereich des Webdesigns lässt sich dieser Umstand beim Gestalten von Tabellen, Infoboxen oder auch Schaltfl ächen zunutze machen.
� Abbildung 5.50 Einzelne Linien wirken als trennende Elemente. Verbunden ergeben Sie in sich geschlossene Einheiten.
Im Umkehrschluss gilt, dass Elemente, die durch Linien getrennt oder in zwei verschiedenen geschlossenen Formen platziert werden, unweigerlich zwei Einheiten bilden, die sich kaum mehr in direktem Kontext betrachten lassen.
Trennung von Figur und Grund | Ein Motiv besteht aus der Eigenform (Figur) und der Umgebung (Grund). In der Regel ist die Figur klar als solche erkennbar. In manchen Fällen aber, ob bewusst eingesetzt oder unabsichtlich, kann es zu einer visuellen Täuschung kommen, dem so genannten Kippbild. Dem Betrachter bieten sich dann zwei Möglichkeiten, das Bild wahrzunehmen. Figur und Grund können sich in ihrer Bedeutung tauschen, so dass die invertierte Darstellung einen völlig neuen Sinn ergibt.
Abbildung 5.48 �
Der leicht erhöhte Abstand zu den Nachbarelementen lässt uns die For-men als Gruppen sehen. Die Einzel-form wird aufgelöst.
� Abbildung 5.49Die Darstellung der Optionen in der rechten Spalte der Seite http://www.freelens.com demonstriert, wie sich unterschiedliche Bereiche anhand des Gesetzes der Geschlos-senheit sauber voneinander trennen lassen.
� Abbildung 5.51 Klassisches Kippbild: die Rubin’sche Vase
a 2
1242.indb 1421242.indb 142 08.06.2009 10:50:4408.06.2009 10:50:44
5.4 Zusammenfassung | 143
Zusammenfassung5.4
Rahmenbedingungen im Webdesign5.4.1 Websites sind keine statischen Gebilde, die auf jedem Medium �
gleichartig dargestellt werden (können). Vielmehr bilden sie in ihrer Erscheinung fl exible Informationsträger, deren übergeord-nete Aufgabe eine optimale Übertragung und medienspezifi sche Wiedergabe der Inhalte ist.Die Anordnung und Strukturierung der Inhalte im Dokument �
selbst erfolgt nach semantischen und nicht nach optischen Aspek-ten. Letztere werden erst mit der Formatierung per ausgelagerte Stilangaben realisiert.Das Einhalten von etablierten und anerkannten Standards sorgt für �
eine nachhaltig nutzbare Qualität in der webspezifi schen Daten-aufbereitung. Vorteile spiegeln sich auch in reduzierten Kosten und Aufwand wider.Noch gibt es Unterschiede in der Interpretation der Standards �
(z. B. HTML, CSS und JavaScript) zwischen den marktführenden Browsern. Einzelanpassungen und Kompromisse sind notwendi-ger Alltag.Viewport, Skalierbarkeit, nutzerspezifi sche Einstellungen sowie die �
Layoutart müssen bereits im Designprozess Beachtung fi nden.
Gliederung logischer Bereiche5.4.2 Die optische Gliederung erfolgt nach der Funktionalität und �
Wichtigkeit der einzelnen Inhaltsbereiche. So sollte die Naviga-tion einen klar erkennbaren Mechanismus aufweisen und dem Nutzer stets zur Verfügung stehen.Hauptsächlich unterteilt man in Rahmenelemente, Navigation �
und Inhaltsbereich.
Gestaltungsgrundlagen5.4.3 Das Verwenden von Rastern erleichtert das konsequente und ein- �
heitliche Gestalten von Websites. Das Raster sollte jedoch mehr als Orientierung denn als Zwang betrachtet werden.Harmonische Raumaufteilungen erhält man durch den goldenen �
Schnitt (Streckenverhältnis 1:1,618) oder auch vereinfacht durch die Drittelregel, die eine Fläche horizontal und vertikal in drei glei-che Teile gliedert.Der gezielte Einsatz der Aufmerksamkeitsgesetze beeinfl usst den �
Besucher in der Art und Weise, wie er die Inhalte wahrnimmt.Die Beachtung formaler Gesetze gliedert verschiedene Inhaltsele- �
mente in zugehörige Gruppen und erleichtert dem Besucher die Orientierung.
1242.indb 1431242.indb 143 08.06.2009 10:50:4408.06.2009 10:50:44
Index | 425
Index
64-Bit-Unterstützung 42.htm, .html 279(X)HTML 108, 282
AAbsatztext 81absolute 218Achromatopsie 181Acid-Test 116Adobe Connect Now 45Adobe Gamma 158Adobe Kuler 45, 171Adobe RGB 157AGB 412Ähnlichkeit
Gesetz der 141Ajax 112Aktion 334, 346, 422
Abspieloptionen 337aufzeichnen 335Befehl 334erstellen 334modales Bedienfeld 337Protokoll erstellen 339Ressourcen 339Tipps zum Erstellen 338Unterbrechung 337verwalten 336Wert 334
Aktionen-Palette 334Aktionsset 334Alleinstellungsmerkmal (USP) 99Alphakanal 77alt-Element 293Alternativer Text 293Anfasser 63Animation 98, 349
Timing 352Ankerpunkt
löschen 65Ankerpunkt-hinzufügen-Werkzeug 64Ankerpunkt-löschen-Werkzeug 64Ansicht
einrichten 377Ansichtdrehung-Werkzeug 44Antialiasing 201Antiqua-Varianten 187Anweisungsblock 110Anwendungsleiste 43AOL 115Aqua 26Arbeitsbereich 44
als Datei speichern 54
Arbeitsbereich (Forts.)einrichten 48speichern 53
Arbeitsflächeerweitern 236Farbe 54
Arbeitspfad 374Arbeitsvolume 47ASCII 274Attribut 282
alternativer Text 282Aufgabenteilung 105Auflösung 117
Bildschirm 40Digitalkamera 41Webdesign 41
Aufmerksamkeitselektive 139
Aufmerksamkeitsgesetz 139Aufnahmebereich 161Ausnahmegesetz 139Ausrichten 232Auswahl
laden 77Auswahlellipse 78Auswahlrechteck 78Auswahltechnik 78Auswahlwerkzeug
einzelne Spalte 124Auszeichnungssprache 108Automatisierung 331
Stapelverarbeitung 339
BBanderole 397
Schattierung 399wölben 400
Banding 168Banner 349
animiertes 350Formate 350
Barrierearmut 112Barrierefreie Informationstechnik-Verord-
nung 112Barrierefreiheit 112
planen 182Baumstruktur 100Beamer 110Bedienfeld 50Behindertengleichstellungsgesetz 112Benutzeroberfläche 47Bézier 39BGG 112
BIENEAward 113
Bild 212, 373alt-Tag 261flächenfüllendes 388im Quellcode platzieren 292Kompression 267nachschärfen 385verkleinern 384
Bildbearbeitung 37Bildeffekt 392
Grunge 392Stanzeffekt 395
Bildinterpolation 47bikubisch 47Pixelwiederholung 47
Bildminiatur 383Bildprozessor 341Bildrechte 411Bildschirm 110Bildschirmfreigabe 45Bildschirmmodus 54
Standardmodus 54Vollbildmodus 54Vollbildmodus mit Menüleiste 54
Bit 155Bitmap 37, 153BITV 112Blindtext 240Blockelement 215Blocksatz 191, 192
im Web 192optimale Zeilenbreite 192
Blog 24Bot 114Box-Modell 215Braille-Reader 110Brainstorming 92, 206Browser
Adressleiste 381Button 349, 360, 422
Glas 361Rollover 363skalierbarer 365
CCache 47
Stufen 47Card-Sorting 102Cascading Style Sheet 296Checkbox 210Chunk 102, 139Clearfix 308
1242.indb 4251242.indb 425 08.06.2009 10:52:1708.06.2009 10:52:17
426 | Index
Cloud Sourcing 24CMS � Content-Management-SystemCMYK 150, 154, 162Collage 28Colorieren 378Colorimeter 158ColorSchemer 414Composite 150Conditional Comment 286Content 129Content-Management-System 24Copyright-Hinweis 335Corporate Design 86, 97Corporate Identity 86Cross Site Scripting 112CSS 87, 106, 110
Einheit 298Farbwerte 298Formatname 296Formatwert 296Hacks 117Kaskade 301Kleinschreibung/Sonderzeichen 297Kommentar 297Kurzform 297Quelltextformatierung 297Selektoren 299Vererbung 301
CSV 345Cyan 150
DDarstellungsmodus 122Dateibenennung 274Dateiformat
Größenunterschied 264im Web 262
Dateigrößeoptimieren 270
Dateirechte 326Datenupload 324Deckkraft 56Dedicated Server 322Demoszene 205Demoversion 421Deuteranopie 181Dickte 186, 187Direktauswahl-Werkzeug 64Dissonanzgesetz 140Dither 167, 268
und Verlaufshintergrund 168DIV 209Dock 50Doctype 282Dokument
anordnen 54Dokumentenbaum 111
Dokumentraster 132dpi 40Dreamweaver 32, 272, 278Drittelregel 138
Kamera 138Droplet 339, 340Drucker 110DTP 198Duplizieren
dokumentübergreifend 244DVD 421
Urheberrecht 421Dynamik 46
EEbene 70
automatisch auswählen 243Deckkraft 73Eigenschaften 71Stapelreihenfolge 71
Ebeneneigenschaften 71Ebenenenmaske
ausblenden 74Ebenengruppe 72Ebeneninhalt
duplizieren 232Ebenenkomposition 248
erstellen 248exportieren 249verwalten 249
Ebenenmaske 73bearbeiten 73
Ebenen-Palette 71Ebenenstil
speichern 238zuweisen 229
Eckeabgerundete 224
Eckpunkt 63Editor 277Effekt 331Eingabefeld 210em 202Endlosmuster 386Entität 286Entsättigen 401Expert-Font 195Export
für Web und Geräte speichern 265Zoomify 369
FFarbbestimmung
mit Pipette 164numerische 163visuelle 162
Farbblindheit 181Farbe 145
als HTML exportieren 164Bedeutung 178definieren 161, 168gruppieren 169Hintergrund- 162im Internet 153in Photoshop 161Leuchtkraft 174tauschen 163und Barrierefreiheit 181verwalten 161Vordergrund- 162websichere 163, 164
Farbeinstellung 160in Photoshop 160
Farben 96Farbenblindheit 45Farbe-Palette 164Farbfehlsichtigkeit 181Farbfeld
Austauschformat 166Vorgaben 165
Farbfeldbibliothek 166Farbfelder-Palette 165Farbfläche 166Farbgesetz 139Farbharmonie 172, 423Farbinkonsistenz 157Farbkanal 147Farbklang 177
erstellen 177Pentagramm 177Tetrade 177Triade 177
Farbkombination 171Farbkontrast 173
prüfen 182Farbkontrolle 157Farbkreis 151Farblehre 145Farbmanagement 127, 157
im Browser 159im Firefox 159und Webdesign 159
Farbmischung 145additive 146, 152, 184subtraktive 150, 184
Farbmodus 152Farbpalette
websichere 153Farbprofil 158Farbproof 155Farbpsychologie 178Farbraum 127
Adobe RGB 157sRGB 157
1242.indb 4261242.indb 426 08.06.2009 10:52:1708.06.2009 10:52:17
Index | 427
Farbtiefe 152, 155Farbumfang 155, 157Farbumfang-Warnung 155Farbverlauf 167Farbwähler 46, 152, 162Faux Fett 189Favicon 381
einbinden 382erstellen 382Größe 382
Feed 24Fibonacci
Leonardo 136Zahlenfolge 136
Fieldset 210Figur und Grund
Trennung von 142Filter
letzter Filter 355Rauschfilter 393Scharfzeichnungsfilter 385Stilisierungsfilter 403Verblassen 386Verschiebungseffekt 386
Firebug 413Firefox 116, 159Firefox-Plug-in 413, 414Fireworks 31, 32, 271
Positionierung 32Vor- und Nachteile 34
fixed 218Fläche füllen 167Flash 32, 98, 119, 200, 212Flattersatz 191
linksbündig 191rechtsbündig 191
Fleisch 186float 218, 220Fluss 56Footer 131Formale Regel 141
Gesetz der Ähnlichkeit 141Gesetz der Geschlossenheit 141Gesetz der Nähe 141Trennung von Figur und Grund 141
Formatierung 213, 251Formobjekt 62, 67, 228
Formebene 67Pfade 67Pixel füllen 67
Formular 210Fotorecht 412Fraktur 188Framerate 349Framework 24FTP 324Fülleimer 166Fülloption 331
Vorteil 229
Für Web und Geräte speichern 265Futurismus 27
GGamma-Wert 127, 268Gebrochene Schrift 188Gemeine 186Geschlossenheit
Gesetz der 142Gestaltungsgrundlage 131Gestaltungsraster 132Geviert 195Gewöhnungsgesetz 140GIF 263, 268
animiertes 350stufige Kanten 269
Goldener Schnitt 136aufteilen (Photoshop) 137
Google 328GPU 42, 48Graustufe 154Graustufenmodus 154Grauwert 195Größengesetz 140Grundfarben 146Grundlinie 186, 193Grunge-Look 29, 392
HHalo-Effekt 93Haltegriff 63Handheld 110Hardwarekalibrierung 158Harmonie
Bunt/Unbunt 173der Nachbarfarbe 172warme bzw. kalte Farbe 173
HDR 156Header 127, 224HEX 162Hexadezimal-Code 153Hierarchie 100Hintergrund 216, 386
flächenfüllendes Bild 388gekachelter 386
Hintergrundebene 72Hintergrundgrafik
fixe 216Hintergrundinhalt 121Hosting 87HTML 87, 98, 106, 108, 109
Auszeichnung 209Footer 295Formatierung per Stylesheet 296Menü 291
HTML (Forts.)Quelltextformatierung 287Sonderzeichen 287Titel der Website 284Umsetzung 277Verweis auf Stylesheet 285
HTML-Auszeichnung 207, 251body 287Container 209End-Tag 281Formatierung 213Formular 210head 284Hintergrund 216link 211, 285Media 212Start-Tag 281title 284Tabelle 211Text 211Textauszeichnung 211Überschrift 211Umrandung 217
Hurenkind 194Hypertext 21
IICC-Profil 158ICO-Format 382Icon Builder 381Icon erstellen 373Illustration 30Imagemap 128Image-Replacement 200Impressum
Angaben 410Impressumspflicht 409Informationsarchitektur 86, 95Inhalt 106
gliedern 206sammeln 206, 251
Inhaltsbereich 129Inline-Element 215Inspiration 97Intensitätsgesetz 139Interaktion 106, 111Interaktivität 349Interface 349Internationalisierung 95Internet Explorer 115, 159Internet Service Provider � ISPInterpolieren 41ISO-Norm 108ISP 321
1242.indb 4271242.indb 427 08.06.2009 10:52:1708.06.2009 10:52:17
428 | Index
JJavaScript 106, 111, 316Jitter 59
Deckkraft 60Größen 60
JPEG 262, 267jQuery 317
KKachel 386Kalibrierung 158Kalibrierungs-Assistent 158Kantenglättung 196, 201Kartenmaterial 412Kerning 194Keyframe 350Klassenname 291Kleinschreibung 274Kolorieren 380Kommentar 287Komplementärfarbe 182Kompression
JPEG 267Kontrast 172
Hell/Dunkel 176Komplementär- 174Prüfung 176Qualität 175Quantität 174Unbunt/Bunt 176Warm/Kalt 174
Konzeption 85, 91Korrekturen
Farbton/Sättigung 392Gradationskurven 393
Korrekturen-Palette 44Kuler
Farben bearbeiten 172Farben finden 171
LLadezeit 99LAMP-Umgebung 322Laufweite 193Layout 96
elastisches 125, 221fixes 125flexibles 221liquides 125, 221zentriertes 220zerlegen 255
Layoutart 125Layoutübergabe 255Leistung 47Lichtmischung 146Lightbox 95
Lineal 48Mittelpunkt 123
Linealkreuz 137Linksbündig 191Live-Filter 272Logischer Bereich 127, 130, 206Lokalisierung 95
MMagenta 150Majuskel 186Malabstand 60Malwerkzeuge 55Managed Server 322Marginalie 191Markup-Sprache 106Masken-Palette 44Maßeinheiten 48Mediävalziffer 195Meilenstein 91Memex 23Menü 102Menüpunkt
Tastaturbefehl 52versteckte einblenden 53
Metadaten 285Mikrotypografie 193Minimalismus 25Minuskel 186Minuskelziffer 195Mittellänge 186ModX 318MSN 328Muster
definieren 388MVC 105MySQL 322
NNachbreite 186Nähe
Gesetz der 141Namespace 283Navigation 127, 131, 224, 227, 349, 353, 422
3D 353Dropdown 356Erweiterbarkeit 228
Neoneffekt 403Netscape 115Netzplan 92Neuanordnen tatsächlicher Pixel 41Neu-Dialog 120Neutrales Grau 148Newsfeed 109Nullpunkt
zurücksetzen 137
OOberfläche 43Oberlänge 186Objektmodell 111Online-Anbindung 45Online-Datenspeicherung 24OpenType-Funktion 195Opera 116Ordnerstruktur 279
layout 279media 279script 279style 279
Ornamente 25
PPalette 50
ausblenden 51Dock 50Optionsmenü 51Registerkarten 51schwebend 51
PDF 119Pentagramm 177Pfad
modifizieren 64Pfadobjekt 62Pfadwerkzeug 62Phark-Methode 307Photomerge 44Photoshop 31, 32
Vor- und Nachteile 34Photoshop CS4
neue Funktionen 42PHP 322Pinselform 60Pinselspitze
arbeiten mit 56Durchmesser 59dynamisch anpassen 58Härte 59Rundheit 59weiche Kanten 58Winkel 59
Pinselwerkzeug 56Pipette 161Pixel 38
ausrichten an 229füllen 67
Pixelersetzung 342Pixelgrafik 37Pixelraster 46, 355Pixelstil 30Planung 85Plug-ins 45PNG 263, 268, 269Popup 112
1242.indb 4281242.indb 428 08.06.2009 10:52:1708.06.2009 10:52:17
Index | 429
Positionierung 217absolute 218fixe 219relative 218
Positionsgesetz 140ppi 40Primärfarbe 146Primitive 67
Ellipse 67Polygon 67Rechteck 67
Profilierung 158Projektmanagement 91Proportionen
gleiche 78Protanopie 181Protokollobjekte 47PSD-Datei
Speicherbedarf 48Pulldown-Liste 128Punkttext 81Punkt-umwandeln-Werkzeug 64Punze 186
QQuelltext 277Quelltextformatierung 287
RRadiobutton 210Rahmenelement 127Rapport 216, 386Raster 105, 131, 207
einrichten (Photoshop) 133manuelles (Photoshop) 135Registerhaltigkeit 133Screendesign 134
Rastern 154Rauhsatz 191Raumaufteilung 136RDF � Resource Description FrameworkRechtsbündig 191Redaktionssystem 96Redesign 114Referenzpunkt 233Registerhaltigkeit 133Registerkarten 51relative 218Relief 395Resource Description Framework 117Retro 28Retuschewerkzeuge 55RGB 146, 155, 162RGB-Wert 153, 163Robot 114Rollover 363, 365
RSS 108RSS-/News-Reader 109Rundheit 60
SSafari 159Satzausrichtung 191
in Photoshop 193Scanline 363Schatten 395Schnellauswahlwerkzeug 79Schnittmaske
erstellen 239Schreibregel 195
Kontonummer und Bankleitzahl 196Postleitzahl 196Telefon und Telefax 195
Schreibschrift 188Schrift 80
arbeiten mit (im Team) 236Bezugsquelle 189Einheit 201erkennen 189Familie 189Klassifikation 187mischen 190Schnitt 189Stimmungsvermittlung 188typografische Sünden 196Umbruchverhalten 202und Webdesign 198
Schriftart 82Schriftbild 81
anpassen 193Schriftfamilie 189, 198Schriftgröße 82, 118, 186, 207Schriftklassifikation 187Schriftschnitt 82, 189Schriftverwandt 199Schwarz-Bunt-Effekt 401Schwarzweiß 401Screendesign 22, 86, 117, 157Screenreader 110Scribble 97Scrollbalken 117
erzwungener 132Scrollen 117Seitenfluss 218Seitenfuß 127Seitenkopf 127Selektor 110, 296, 299
class 299ID 300Mehrfachnennung 300Pfade 300Pseudoformat 300Typ 299Universal 299
Semantik 106semantische Suche 114semantisches Web 117Serifenlose 187Serifenschrift 187Serverumgebung 321Shared Hosting 321Shopsystem 412sIFR 200Sitemap 100, 128, 206Skalierbarkeit 118Skalieren (Inhalt bewahren) 44, 236Skalierungsmethode 384Skip-Link 289Skripten 341, 346Skriptsprache 111Slice
bearbeiten 258Benutzer 256ebenenbasiertes 257kombinieren 260konfigurieren 261löschen 261umwandeln 259unterteilen 259Zeichenordnung 258
Slicen 255Nachteile 255Nutzen 256
Slice-Werkzeug 256Optionen 257
Smartfilter 357Smart-Objekt 68, 230, 273
arbeiten mit 69Duplikate erstellen 69erstellen 69Vorteile 68
Social Bookmark 328Softwarekalibrierung 158Sonderzeichen 275Soundbooth 32Soziale Netzwerke 24Speichern
für Web und Geräte 265Speichernutzung 47Sperren 193Spider 114Sprungmarke
Skip-Link 289sRGB 127, 157, 159, 184Standard 108
Vorteile 113Standardfarbe 163
wiederherstellen 166Standardfarben 75Standardhörigkeit 113Standardschrift 198Stanzeffekt 395
1242.indb 4291242.indb 429 08.06.2009 10:52:1708.06.2009 10:52:17
430 | Index
Stapeln 44Stapelverarbeitung 339, 346static 218Steuerungsbedienfeld 43Stil 96, 331, 346
definieren 332kombinieren 334zuweisen 333
Stile-Palette 331Streckenverhältnis 136Stützpunkt 62Stylesheet 107
einbinden 285Suche
semantische 114Suchmaschine 99
Platzierung 114Suchmaschinenoptimierung 285, 328SVG 38, 264Symbolik 373Syntax-Highlighting 277Systemschrift 198
TTab-Ansicht 43Tabelle 211Tab-Navigation 43Tag 109, 209
End-Tag 109Start-Tag 109
Tastaturbefehle 52Template 86, 119
erstellen 119Tetrade 177Text
Absatztext 81Punkttext 81
Textausrichtung 82Text-Banderole 397Texteingabe
abschließen 233Textersetzung 342Textfläche 210Textoptionen 47Text-Werkzeug 81Thumbnail 383Toleranzwert 80Top Level Domain 279Traffic 114, 323Transparenz 162, 263, 268Triade 177TV-Gerät 110Tweening 351Typo3 318Typografie 27, 96, 185
Grundlage 185weiterführende Literatur 197
UÜbergabe
Photoshop-Daten 271Übergangspunkt 63Umbruch 212Umlaut 275Umrandung 217Umsetzung
Ordnerstruktur 279Unobtrusive 112Unterlänge 186Unterschneiden 194Unterschneidungstabelle 194
VValidator 278Variable 341, 346
Datensatz erstellen 343Datensatz exportieren 345Datensatz importieren 345definieren 342erstellen 342Pixelersetzung 342Sichtbarkeit 342Textersetzung 342
Vektorform 63erstellen 63Kurvenform 63Linien 63Polygon 63
Vektorgrafik 37, 39Vektorisieren 40Verblassen 386Verkrümmen 400Verlauf 47, 166Verlaufsüberlagerung 229Verlaufswerkzeug 167, 170Veröffentlichung 87, 321Versal-Eszett 284Versalhöhe 186Versalie 186Versalziffer 195Verschieben-Werkzeug 82Versionierungsangabe 275Vertikaler Rhythmus 193Viewport 117, 207, 219
definieren 122Vorbreite 186Voreinstellungen 46Vorgabe 120
WW3C 108Wasserfarbe 29Wasserzeichen
digitales 335
Wasserzeichen (Forts.)erstellen 335
Websemantisches 117
Web 2.0 23, 422Web Content Accessibility Guidelines 112Webcrawler 114Webdesign 21, 32Web Developer 414Web-Export 266Webhoster 321Webkatalog 328Webserver 321Website 21
dynamische 24gestalten 205, 223Gliederung 106multikulturelle 179Ordnerstruktur 279statische 23veröffentlichen 321
Web-Software 24Weiche Bildübergänge 74Werkzeuge 49
Fach 49Tastaturkürzel 49temporär aufrufen 49
Werkzeugleiste 49Werkzeugspitze 56
Airbrush 56Deckkraft 56Fluss 56Modus 56
Werkzeugvorgaben 56Wireframes 102WordPress 317Workshop
Daten 421Wrapper 209, 288
Xx-Höhe 186XML 106, 108, 282XSL 106, 110XSS 112
YYahoo 328Yellow 150YouTube 212
ZZauberstab 79
Toleranz 123Zeichenkodierung 284
UTF-8 284
1242.indb 4301242.indb 430 08.06.2009 10:52:1808.06.2009 10:52:18
Index | 431
Zeichenmaß 185Zeichenstift 62
Ankerpunkt 62Pfadsegment 62Stützpunkt 62Tangente 62Tipps zur Arbeit 66
Zeilenabstand 193Zeilenbreite 192Zentriert 191Zentrierter Text 192Ziel 85Zielgruppe 85, 93
Ziffer 195Zoomify 369
exportieren 369Quelltext verarbeiten 370Versionen 369
1242.indb 4311242.indb 431 08.06.2009 10:52:1808.06.2009 10:52:18
