Webdesign - Webseiten planen, gestalten - Free-Hack Library

Abbildungsverzeichnis
Abb. 8.5.2a: Bildtypografie mit Ebenenstilen (links) und typosemantische Schriftgestaltung im
Themenbezug (Beispiele: Hammer und Studienentwürfe) ................................................................268
Abb. 8.6.1a: Hemisphärentheorie (Grafik: Hammer) ........................................................................270
Abb. 8.6.1b, c: Atmosphärische Einstimmung durch Bilder: ............................................................270
„Erfrischend“ (http://www.gerolsteiner.de), „Gute alte Zeit“ (http://www.dallmayr.de) ...................270
Abb. 8.6.1d: Auflockerung von textarmen Seiten (ehem. Website FB Informatik, FH-Gelsenkirchen) .271
Abb. 8.6.2a: Konstante Fotoauffassung (http://www.manufactum.de) .............................................273
Abb. 8.6.2b-d: Der Ausschnitt bestimmt die Bildwirkung. (Foto: Hammer) .......................................273
Abb. 8.6.2e, f: Der Ausschnitts macht's, Originalbild und Ausschnitte (Foto: Hammer) ......................274
Abb. 8.6.2g: Ungewöhnliche Bildformate mit Kohärenz zur Navigation (http://www.tep-ruhr.de) .....274
Abb. 8.6.2h: Unterschiedlich leicht gedrehte Fotos (http://www.hebammenhilfe.de, Foto: Rickal) .....274
Abb. 8.6.3a, b: Bildmanipulation. Wie sieht der Seehund wirklich aus? (Quelle: Adobe) ...................276
Abb. 8.6.3c, d, e: Bildoptimierung (Foto: Hammer) ..........................................................................276
Abb. 8.6.4a: Freistellen als „letzte Rettung“ bei ungeeignetem Ausgangsmaterial (Foto: LKE) .........277
Abb. 8.6.4b: „Erden“ durch Horizontlinie (Grafik: Hammer, Foto: Funk) ...........................................277
Abb. 8.6.4c: Körperschatten erzeugen in Photoshop (Grafik: Hammer, Foto: Funk) ...........................278
Abb. 8.6.4d-f: Freistellen durch Anpassung an die Hintergrundfarbe (Grafik: Hammer, Foto: Funk) ...278
Abb. 8.6.4g-i: GIF-Transparenz (Grafik: Hammer) ............................................................................279
Abb. 8.6.4j: Eingrenzung des Aktivierungsbereichs durch Imagemaps (Grafik: Hammer, Foto: Funk) .280
Abb. 8.6.4k: Einziehen neuer Hintergründe (Beispiele: Hammer, Foto: Funck) ..................................280
Abb. 8.6.5a: Bildrandgestaltung durch Eckenabrundung (Foto: Jennrich/Auerbach) .........................281
Abb. 8.6.5b: Bildrandgestaltung mit Ebenenstilen (Beispiele: Hammer, Foto: Jennrich/Auerbach) .....281
Abb. 8.6.5c: Das Bild im Bildrahmen (frühere hammer.runge-Website, nicht mehr im Netz) .............282
Abb. 8.6.5d: Rahmen durch Filteranwendung (Beispiel: Hammer, Foto: Jennrich/Auerbach) ............282
Abb. 8.6.5e: Bildrandauflösung (Beispiel: Hammer, Foto: Jennrich/Auerbach) ...................................282
Abb. 8.6.6a: Abgestimmte Vorder- und Hintergrundbilder (http://www.abes-online.de) ...................283
Abb. 8.6.6b-d: Zurückgenommene Hintergrundbilder mit Textüberlagerung (Beispiele: Hammer) .....283
Abb. 8.6.6e, f: Singuläre Hintergrundbilder (http://www.juliakroener.de/, http://oui-ja.de)................284
Abb. 8.6.7a: Das Prinzip der Kachelung (Grafik: Hammer) ...............................................................284
Abb. 8.6.7b, c: Kacheldesigns mit überlagernden Vordergrundbildern
(http://www.viget.com/extend, http://www.soulcore.de/) ................................................................285
Abb. 8.6.7d, e: Erweiterbares Headerbild durch Kacheltechnologie (http://www. howatec-online.de) 286
Abb. 8.6.7f-h: Unsichtbare Kachelübergänge (Foto und Bearbeitung: Hammer) ...............................286
Abb. 8.6.7i, j: Hintergrundstrukturen aus Filterfunktionen (Grafiken: Hammer, Bensmann) ...............287
Abb. 8.6.7k: Kachelstreifen zur Erzeugung eines Streifenmusters (Beispiel: Hammer) .......................287
Abb. 8.6.8a: Headerbild (Websiteentwurf FH-Gelsenkirchen, Foto: Pressestelle der FH) ...................288
Abb. 8.6.8b: Bildcollage als Headerbild (http://www.fbm.htwk-leipzig.de/,
Design: http://www.and-advertising.de) .........................................................................................288
Abb. 8.6.9a: Navigationsbuttons im Farb- und Formbezug zum Logo (Design: Hammer) ..................289
Abb. 8.7.1a: Videos oder Hörproben (http://www.amazon.de) ........................................................290
Abb. 8.7.2a: Bildplayer (http://www.mediendesign-online.net) ........................................................291
Abb. 8.7.3a: Logoanimation per animated GIF (www.online-studies.net, nicht mehr im Netz)..........292
Abb. 8.7.4a, b: Flash-Animationen (http://www.sensisoft.com/, http://www.littlebigplanet.com/) ....292
Technische Umsetzung
9. ................................................................299
Abb. 9a: Zitat Douglas Adams (Grafik: Bensmann) ..........................................................................299
Abb. 9.4.1a, b: Die Web Design Gazette ohne (links) und mit separatem Druckstylesheet (rechts) ....302
Abb. 9.4.1c: Druckansicht Web Design Gazette: Serifenschrift und schwarz-weiße Farbgebung ........304
Abb. 9.4.1d: Druckansicht Web Design Gazette: Navigation ausgeblendet ......................................304
Abb. 9.4.1e: Druckansicht Web Design Gazette: Zusätzliche Link-URLs............................................305
Abb. 9.4.1f: Druckansicht Web Design Gazette: Das Logo ...............................................................306
Abb. 9.4.1g: Druckansicht Web Design Gazette: Typografische Anführungszeichen ..........................306
Abb. 9.4.1h: Druckansicht Web Design Gazette: Die fertige Druckausgabe ......................................307
Abb. 9.4.2a-d: Reguläre Website im Vergleich zur vereinfachten Websiteversion
für mobile Endgeräte, (http://de.wikipedia.org, http://www.amazon.de) ..........................................308
Abb 9.4.2e: Proxy-Zwang bei manchen Mobilfunkanbietern ...........................................................308
Abb. 9.5.1a: Interaktionselemente in Formularen: Eingabefelder, Radiobuttons, Checkboxen,
Auswahllisten und Schaltflächen ....................................................................................................309
Abb. 9.5.1b: Neue Formularfunktionen in HTML5 ...........................................................................310
Abb. 9.5.1c-e: Unterschiedliche Captchas .......................................................................................310
ABBILDUNGS-
VERZEICHNIS
339