Webdesign - Webseiten planen, gestalten - Free-Hack Library

338
Abbildungsverzeichnis
Abb. 6.7.3c: Farbkodierung im Navigationsbalken (Websiteentwurf FH-Gelsenkirchen)....................219
Abb. 6.7.3d: Originalfarbe und angepasste Farbe in unterschiedlichen Gestaltungeselementen .......219
Abb. 6.7.3e: Gelb wird zum gelblichen Grau abgetönt, wenn es lesbar sein soll ..............................219
Abb. 6.7.4a, b: Kulturbedingte Seitenorgani sation (http://www.osrammiddleeast.com/) ..................221
Abb. 6.7.5a: Navigationskaskaden (http://www.online-studies.net, nicht mehr im Netz) ..................222
Abb. 6.7.5b: Navigationskaskaden (http://www.baumergroup, Diplomarbeit K. Pryzybilla,
Webprojekt FH-Gelsenkirchen, http://www.mediendesign-online.net) .............................................222
Abb. 6.7.5c: Navigationsgrafiken aus einfachen geometrischen Formen ..........................................223
Abb. 6.7.5d: Navigationsgrafiken zur Anzeige eines Aktivierungszustandes (http://www.ldi.nrw.de,
http://.hammer.informatik.fh-gelsenkirchen.de, http://www.hebammenhilfe.de) ..............................223
Abb. 6.7.5e: Navigationsbalken und Aktivierungsdesign (Grafik: Hammer, Gegenmantel) ...............224
Abb. 6.7.5f: Horizontallisten mit und ohne vertikale Trennstriche.....................................................225
Abb. 6.7.6a: Typische frühere Buttonleiste (http://www.abes-online.de1996, nicht mehr im Netz) ...225
Abb. 6.7.6b: Website (2000) mit vielen Bildbuttons und Bildtypografie
(http://www.kriegergmbh.de, Design: hammer.runge) .....................................................................225
Abb. 6.7.6c: Unterschiedliche Aktivierungszustände von Buttons (Grafik: Hammer) .........................226
Abb. 6.7.6d: Buttons in Anlehnung an das Corporate Logo (http://www.magellan-buch.de/) ...........226
Abb. 6.7.6e: Buttondesigns (Studienentwürfe) ................................................................................227
Abb. 6.7.6f: Buttondesigns im Web 2.0 Designstil (Grafik: Duzynski) ...............................................227
Abb. 6.7.7b: Terminplaner als Websitekulisse (frühere Site des IOT, nicht mehr im Netz)...................228
Abb. 6.7.8a: Deutliche Bildlinks (Grafik: Gasch, Hammer) ................................................................228
Abb. 6.7.9a: Textunterstreichung mit Rahmenlinie ..........................................................................229
Abb. 6.7.9b: Designalternativen zur Textlink-Gestaltung .................................................................230
Abb. 6.7.9c, d: Designs von vorangestellten Ankerlisten (http://de.wikipedia.org,
http://hammer.informatik.fh-gelsenkirchen.de) ...............................................................................230
Abb. 6.7.10a: Designs von Favicons ...............................................................................................231
Abb. 6.7.10a-c: Icons in den Größen 16 x16, .................................................................................232
Abb. 6.8.1a: Scribbeln im Browserscreenshot (Grafik: Bensmann) ...................................................232
Abb. 6.8.2a: Die Web Design Gazette im Photoshop-Entwurf (Design: Bensmann) ..........................233
Abb. 6.8.2b: Abschalten der Schriftglättung in Photoshop ...............................................................234
Abb. 6.8.3a: Rasterentwicklung ......................................................................................................235
Abb. 6.8.3e,f: Sitemapdesigns (http://www.hammer-runge.de) ........................................................236
Abb. 6.8.4a, b: Formulardesign mit CSS-Formatierung (http://www.hebammenhilfe.de,
http://www.rapid-html.de, Design: Martina Plawer) ........................................................................237
Abb. 6.8.4c: Formulardesign (http://www.qwertcity.com, Design: Mason Yarnell) .............................237
Abb. 6.9a: Präsentationsmodus in Photoshop .................................................................................238
7. Prototyping ..................................................................................243
Abb. 7a: Zitat Larry Wall (Grafik: Bensmann) ...................................................................................243
Abb. 7.3.1a: Webdeveloper Tools (Beispielseite: http://hammer.informatik.fh-gelsenkirchen.de) .......245
Abb 7.3.2a: Markierungen im Quellcode .......................................................................................245
Abb 7.3.5a, b: Browsererweiterungen ...........................................................................................248
Abb 7.3.6a, b: Standard-Stylesheet und nach Eric Meyer resettetes Stylesheet im Firefox-Browser ...249
Abb. 7.4a, b: Styleguide des Neuentwurfs der FH-Gelsenkirchen Website (Beispiel: Märdian) ...........252
Assetdesign
8. ..................................................................................259
Abb. 8a: Zitat Eric Auchard (Grafik: Bensmann) ...............................................................................259
Abb. 8.3a, b: Storyboard-Formblatt und einfache Datenliste (Originale: hammer.runge) ...................261
Abb. 8.3c: Film-Storyboard (Beispiel Ruske) ....................................................................................262
Abb. 8.4.1a: Das Prinzip der umgekehrten Pyramide (Grafik: Hammer nach Häusermann/Käppeli) ...263
Abb. 8.4.2a: Zweizeilige Headlines (Grafik: Hammer) ......................................................................264
Abb. 8.4.2b-d: Designs von Aufzählungen (Beispiele: Hammer) .......................................................264
Abb. 8.4.2e, f: Zeichen der „guten Typografie“ und ihre Umsetzung im Web ...................................265
Abb. 8.4.2g: Typografische Anführungszeichen im Browser (Grafik: Bensmann) ...............................265
Abb. 8.5a, b: Bildtypografie als Corporate- Design-Element (http://www.aral.de,
http://www.mercedes-benz.de) ......................................................................................................266
Abb. 8.5c: Pixelschriften, z. B. Binary und Silkscreen ........................................................................266
Abb. 8.5d: Logos mit Innenbereichen: Transparent oder weiß? (http://www.steinhaus.de) ...............267
Abb. 8.5.1a: Bildtypografie in Headlines (Showroom Mediendesign, Krieger Gewächshäuser, LKE) ..267