Abbildungsverzeichnis - link.springer.comlink.springer.com/content/pdf/bbm:978-3-540-85234-6/1.pdf · 317 AbbildungsverzeichnisAbbildungsverzeichnis Abbildungsverzeichnis 1. gVorbemerkun

317

AbbildungsverzeichnisAbbildungsverzeichnisAbbildungsverzeichnis

Vorbemerkun1. gAbb. 1a: Zitat Tim Berners-Lee (Grafik: Bensmann) ............................................................................13Abb. 1.1.1a: Kapitelaufbau (Grafik: Hammer / Bensmann) ................................................................14Abb. 1.1.1b: Startseite der Web Design Gazette (Design: Bensmann) ................................................15

Einführun2. g Abb. 2a: Zitat Bill Clinton (Grafik: Bensmann) ...................................................................................17

Grundlagen des Webdesign3. s Abb. 3a: Zitat Antoine de Saint-Exupéry (Grafik: Bensmann) .............................................................31Abb. 3.2a: Von der Aufmerksamkeit zur Aktion (Grafik: Hammer) ......................................................32Abb. 3.3.1a: Der Acid-Test, durchgeführt mit 5 gängigen Browsern. ..................................................33Abb. 3.3.2a: Sichere Webfonts (Grafik: Bensmann) ...........................................................................36Abb. 3.4.1a: ABES Public Design (www.abes-online.de ) ...................................................................38Abb. 3.4.2a: Online-Angebot der Wochenzeitung „Die Zeit“ (http://www.zeit.de) .............................39Abb. 3.4.3a: Vorzeige-Webshop: Amazon.de (http://www.amazon.de) ..............................................40Abb. 3.4.3b: Bestellvorgang bei Amazon.de (http://www.amazon.de) ...............................................42Abb. 3.4.4a: Beispiel für ein Auktionshaus im World Wide Web: hood.de (http://www.hood.de) ........42Abb. 3.4.5a: Das Browser-Game Wurzelimperium (http://www.wurzelimperium.de) ..........................43Abb. 3.4.6a: Das Lernmodul „Webdesign“ (http://www.mediendesign-online.net) ............................44Abb. 3.5.1a: Die Howatec-Website (http://www.howatec-online.de.de) .............................................44Abb. 3.5.1b: Erinnerung an Zomtec (http://www.zomtec.de) .............................................................45Abb. 3.5.2a: Das Portal von rewirpower.de, CMS-Lösung (http://www.rewirpower.de) .......................45Abb. 3.5.2b: Wikipedia ist das wohl bekannteste Wiki weltweit (http://de.wikipedia.org) ..................46Abb. 3.5.3a: Das WM-Team stellt sich vor (http://www.wmteam.de) .................................................47Abb. 3.5.3b: Flashbasierte Website im HTML-Look (http://www.designpartner.de/flash/index.html) ...47Abb. 3.5.3c: Flash-basiertes Online-Lernmodul (http://www. mediendesign-online.net) .....................48

Technische Grundlage4. n Abb. 4a: Anonymes Zitat (Grafik: Bensmann) ....................................................................................51Abb. 4.3.1a, b: Valider HTML-Quelltext im Vergleich zu validem XHTML-Quelltext .............................54Abb. 4.3.2a: XML- und DOCTYPE-Deklaration ..................................................................................55Abb. 4.3.2b: Das <html>-Element beherbergt Kopf- und Seitenbereich der Website. .........................55Abb. 4.3.2c: Das title-Element im <head>-Bereich des Quelltextes ...................................................56Abb. 4.3.2d, e: Ansicht des Quelltextes und der Datei im Browser .....................................................56Abb. 4.3.3a, b: Valide Anordnung von Elementen (Grafik: Bensmann) ...............................................58Abb. 4.3.3c: Ungültige Anordnung von Elementen (Grafik: Bensmann)..............................................58Abb. 4.3.4a: Eine Auswahl von HTML-Entities ...................................................................................58Abb. 4.3.7a: Drei verschiedene <a>-Elemente ..................................................................................59Abb. 4.3.7b: Einbinden eines Stylesheets ..........................................................................................59Tab. 4.4.2a, b: Beispiele für einen Universal- und einen Typselektor ...................................................65Tab. 4.4.2c: Beispiele für einen Klassen- und einen ID-Selektor .........................................................66Tab. 4.4.2d: Beispiele für Attributselektoren ......................................................................................67Tab. 4.4.2e: Beispiele für kombinierte Selektoren ..............................................................................68Tab. 4.4.2f: Beispiele für Pseudoelemente .........................................................................................69Tab. 4.4.2g: Beispiele für Pseudoklassen ...........................................................................................70Abb. 4.4.3a: DOM-Tree Ihrer XHTML-Übungsaufgabe .......................................................................71Abb. 4.4.3b, c: Vererbung in CSS ......................................................................................................71Abb. 4.4.4a: Das Boxmodell von CSS ................................................................................................73Abb. 4.4.4b: margin-collapse bei angrenzenden und bei ineinander verschachtelten Boxen ...............74Abb. 4.4.5a: CSS Farbdefinitionen ....................................................................................................75Abb. 4.4.5b: Appearance Values .......................................................................................................76Abb. 4.4.7a: Wirkweise der Parameter bei Rahmen- und Abstandsangaben ......................................79Abb. 4.4.8a: Standardmäßig werden die (X) HTML-Elemente im Textfluss positioniert. .......................82Abb. 4.4.8b: Relative Positionierung. ................................................................................................83Abb. 4.4.8c: Absolute Positionierung. ...............................................................................................84Abb. 4.4.8d, e: Fixierte Positionierung...............................................................................................85Abb. 4.4.8f: Schwebende Elemente. ..................................................................................................86Abb. 4.5a: Startseite der Web Design Gazette mit Blindtext ..............................................................88Abb. 4.5.1a: Strukturierung der Seite mit Hilfe von Textauszeichnungen ............................................89

318

Abbildungsverzeichnis

Abb. 4.5.2a: Die in XHTML realisierte Seite .......................................................................................90Abb. 4.5.3a: Weiter gehende Struktur mit <div>-Containern ............................................................91Abb. 4.5.3b: Die eingefügten <div>-Container wurden hier farbig markiert ......................................93Abb. 4.5.4a: Auswirkungen des Stylesheets auf das <body>-Element ..............................................94Abb. 4.5.5a: Der die gesamte Seite umfassende Container wurde formatiert .....................................94Abb. 4.5.6a: Die Positionierung von 3 Spalten mittels float. ..............................................................95Abb. 4.5.6b: Die fertig positionierten Spalten....................................................................................97Abb. 4.5.7a: Der fertige Kopfbereich .................................................................................................98Abb. 4.6a: Beispiel für ein Tabellenlayout mit transparenten GIFs: Die Amazon-Startseite ................100Abb. 4.7.5a: Die fertige Startseite der Web Design Gazette .............................................................107Abb. 4.7.6a: Beispiel für eine Ajax-Webanwendung (http://maps.google.com).................................108Abb. 4.7.7a: Der Google Reader: Ansicht im Browser (http://reader.google.de) ................................111Abb. 4.7.7b: Der Google Reader:: Ansicht auf einem Mobiltelefon ..................................................112Abb. 4.7.7c Der Google Reader: Ansicht auf dem iPhone ................................................................112Abb. 4.8.1a-d: Beispiele für Web 2.0-Angebote: Flickr, Gliffy, kuler, Aviary( http://flickr.com/, http://www.gliffy.com/, http://kuler.adobe.com/, http://aviary.com/) .................................................114Abb. 4.9.2a: Webfonts-Demo im Safari ...........................................................................................117Abb. 4.9.3a: Silbentrennung im Browser mit (Grafik: Bensmann) ...........................................118Abb. 4.10.1a-c: Indizierte GIF-Bilder (Foto: Bensmann) ...................................................................119Abb. 4.10.1d: Banding-Effekt (Foto: Bensmann) .............................................................................119Abb. 4.10.1e, f: Indiziertes Bild mit und ohne Dithering (Foto: Bensmann) .......................................120Abb. 4.10.2a: Artefaktbildung mit abnehmender Bildqualität (Grafik: Bensmann) ............................120Abb. 4.10.3a: In Photoshop gespeicherte PNG-Dateien (oben: 24-bit, unten: 8-bit). ........................121Abb. 4.10.5a: Beispiel für eine SVG-Grafik (Quelle: Wikipedia) ........................................................122Abb. 4.12.1a: Editor mit Syntax-Highlighting (Quelle: http://marketshare.hitslink.com/) ...................129Abb. 4.13.2b: Monitorscreen und Browserfläche ............................................................................129Abb. 4.16a: Vorlage Tragamin Webseite ..........................................................................................133

Siteplanun5. g Abb. 5a: Zitat Douglas Adams (Grafik: Bensmann) ..........................................................................135Abb. 5.3.1a: Formblatt für eine Briefing-Checkliste (Quelle: hammer.runge) ....................................137Abb. 5.3.1b: Inhalt einer Briefing-Checkliste ...................................................................................138Abb. 5.3.3a: Projektplan Webdesign (Beispiel: Eschenröder, Ausschnitt aus MS Project) ...................140Abb. 5.3.4a: Angebotsbeispiel (Quelle: hammer.runge) ...................................................................142Abb. 5.4.2a: Polaritätenprofile (Grafik: Klettke) ...............................................................................144Abb. 5.4.2: Mögliche Fragestellungen für eine Online-Umfrage (Beispiel: Hammer) .........................145Abb. 5.4.4a: Logo, Farben und Hausschrift der Deutschen Post AG .................................................146Abb. 5.5.1a: Top-Level-Domains weltweit (Design: John Yunker) .....................................................148Abb. 5.6.1a: Navigationsbegriffe (http://www.manufactum.de) .......................................................152Abb. 5.6.2a,b: Linearstruktur (Grafik: Ruske) ...................................................................................153Abb. 5.6.2c, d: Leiterstruktur (Grafik: Ruske) ...................................................................................154Abb. 5.6.2e, f: Baumstruktur (Grafik: Ruske) ...................................................................................154Abb. 5.6.2g, h: Matrixstruktur (Grafik: Ruske, Screenentwurf: Jägers) ..............................................155Abb. 5.6.2i, j: Netzstruktur (Grafik: Ruske) ......................................................................................156Abb. 5.6.2k, l: Mischform aus den o. g. Strukturmodellen (Grafik: Ruske) ........................................156Abb. 5.6.3a: Grafisches Strukturlayout (Grafik: Hammer) .................................................................157Abb. 5.6.3b,c: Strukturlayouts als Mindmap und als Strukturkaskade (Grafik: Hammer) ...................158Abb. 5.7a: Seitentitel, Dateiname auf der Website von Manufactum (http://www.manufactum.de) ..159Abb. 5.7.1a: Interaktionselemente (Websiteentwurf FH-Gelsenkirchen, Projektteam Märdian, Gessner, Bellendorf, Leitung Prof. Dr. Hammer, ca. ab Sommer 2009 online) ....................................160Abb. 5.7.1b, c: Vorseitennavigation auf älteren Webseiten (hammer.runge-Website 1996) ...............161Abb. 5.7.2a, b: Persistente Navigation auf der Manufactum-Site (http://www.manufactum.de) .......162Abb. 5.7.3a: Dynamisch generierte nutzerbezogene Navigation (http://www.amazon.com) .............163Abb. 5.7.4a: Themennavigation und Zielgruppennavigation (Websiteentwurf FH-Gelsenkirchen) .....164Abb. 5.7.5a: Teaser: Manche Portale bestehen fast nur aus Teasern (http://www.rewirpower.de/) ....164Abb. 5.7.6a: Beispiele: Quicklinks (Websiteentwurf FH-Gelsenkirchen) ............................................165Abb. 5.7.7a, b: Beispiele: Sitemaps: Manufactum (http://www.manufactum.de) und Deutsche Post (http://www.deutschepost.de) ..................................................................................165Abb. 5.7.7c: Alphabet (http://www2.fh-gelsenkirchen.de/FH-Sites/verwaltung/index.php?id=39) ....166Abb. 5.7.7d: Beispiel: Yahoo-Startseite aus dem Jahr 2000 (http://de.yahoo.com/) ...........................166Abb. 5.7.8a: Brotkrümelnavigation (Projektteam Websiteentwurf FH-Gelsenkirchen) .......................167

319

AbbildungsverzeichnisABBILDUNGS-VERZEICHNIS

Abb. 5.7.9a: Designbeispiele: Suchfunktion ....................................................................................167Abb. 5.7.10a, b: Hilfefunktion und Guided Tour in der Flash-Lerneinheit „Bildgestaltung" (Design und Inhalt: Hammer, Ruske, Einsatz in der virtuellen Fachhochschule vfh)............................168Abb. 5.7.11a: Websiteuntergliederung (Grafik: Hammer) ................................................................168Abb. 5.7.11b: Dropout Menü im Flash-Lernmodul „Webdesign" der virtuellen Fachhochschule(Design und Inhalt: Hammer, Ruske) ...............................................................................................169Abb. 5.7.11c: „Floating menus“ in der Web Design Gazette (Design und Umsetzung: Bensmann) ...169Abb. 5.7.11d: Arbeiten am Papierprototyp (Projektteam FH-Gelsenkirchen Website, Foto: Hammer) 170Abb. 5.7.11e: Beispiele: Navigationslayouts (Websiteprojekt FH-Gelsenkirchen, Grafiken: Hammer) 171Abb. 5.8.1a: Screenshot Adobe Version Cue ...................................................................................172Abb. 5.8.2a: Bild mit Textinhalt .......................................................................................................173Abb. 5.8.2b: Foto der pixographen .................................................................................................173Abb. 5.8.2c: Schmuckgrafik ............................................................................................................173Abb. 5.11b: Das Logo der „pixographen“ (Design: Agnes Bülhoff) ..................................................178

Designentwur6. fAbb. 6a: Zitat Jimmy Wales (Grafik: Bensmann) ..............................................................................179Abb. 6.3a-f: css Zen Garden (http://www.csszengarden.com) ..........................................................181Abb. 6.3g-l: Das Look & Feel unterschiedlicher Websites: essanelle, Jung von Matt, foliafloresund Marchand de Trucs (http://www.essanelle.de, http://www.jvm.de, http://www.foliaflores.dehttp://www.marchanddetrucs.com).................................................................................................182Abb. 6.3k: Yello-Website (http://www.yellostrom.de) ......................................................................183Abb. 6.4.1a: Treppchen-Effekt (Grafik: Bensmann) ..........................................................................185Abb. 6.4.1b: Antialiasing (Grafik: Hammer) .....................................................................................185Abb. 6.4.1c: Browserabhängige Kantenglättung im Vergleich (Grafik: Bensmann) ..........................186Abb. 6.4.1d: Zeilenbandwürmer (http://www.hebammenhilfe.de) ...................................................187Abb. 6.4.2a: Farbkontraste (Grafik: Bensmann) ...............................................................................189Abb. 6.5a, b: Beispiele mit Biene Award ausgezeichneter barrierefreier Websites:(http://www.ble.de, https://banking.postbank.de) ...........................................................................190Abb. 6.5c,d: Beispiele mit Biene Award ausgezeichneter barrierefreier Websites:(http://www.duesselenergie.de, http://www.darmkrebs.at/) .............................................................191Abb. 6.5e,f: Barrierefreie Sites öffentlicher Institutionen: .................................................................192(http://www.ldi.nrw.de, Design: Team Prof. Hammer) (http://www.mediendesign-online.net, Design: D. Hayenga) ............................................................192Abb. 6.6.2a-d: Metaphern im Web .................................................................................................194Abb. 6.6.3a, b: Webseitenunterteilung in funktional unterschiedliche Bereiche (Beispiel: Websiteneuentwurf FH- Gelsenkirchen) ............................................................................195Abb. 6.6.3c: Seitenposition im Browser (http://www.hammer.informatik.fh-gelsenkirchen.de) .........195Abb. 6.6.3d, e: Mehrspaltige Websites (http://www.eon.com, http://www.vodafone.de/) .................196Abb. 6.6.4a: Gestalterische Differenzierung funktional unterschiedlicher Bereiche(http://www.mediendesign-online.net, Design: Hammer, Ollas) .......................................................197Abb. 6.6.4b, c: Zu enge (links) und großzügige Zwischenräume (Websiteentwurf FH-Gelsenkirchen) 197Abb. 6.6.4d: Ausrichtung an Bezugslinien (http://hammer.informatik.fh-gelsenkirchen.de/)..............198Abb. 6.6.5a: Website der frühen neunziger Jahre ............................................................................199Abb. 6.6.5b, c: Bildraster (http://hammer.informatik.fh-gelsenkirchen.de) ........................................199Abb. 6.6.5d: Texte in Bildern (Foto: LKE) .........................................................................................200Abb. 6.7.1a: Beziehungsgefüge Interface (Grafik: Hammer nach Bonsiepe 1996) ............................200Abb. 6.7.2b: Designvarianten von Breadcrumtrails (http://www.ldi.nrw.de, http://www.fh-gelsenkirchen.de, Websiteneuentwurf FH-Gelsenkirchen, http://www.manufactum.de) ..........................................................................................................202Abb. 6.7.3a, b: Farbkodierung (http://www.abes-online.de) ...........................................................202Abb. 6.7.3c: Farbkodierung im Navigationsbalken (Websiteentwurf FH-Gelsenkirchen)....................203Abb. 6.7.3d: Originalfarbe und angepasste Farbe in unterschiedlichen Gestaltungeselementen .......203Abb. 6.7.3e: Gelb wird zum gelblichen Grau abgetönt, wenn es lesbar sein soll ..............................203Abb. 6.7.4a, b: Kulturbedingte Seitenorgani sation (http://www.osrammiddleeast.com/) ..................205Abb. 6.7.5a: Navigationskaskaden (http://www.online-studies.net) .................................................206Abb. 6.7.5b: Navigationskaskaden (http://www.baumergroup, Diplomarbeit K. Pryzybilla,Webprojekt FH-Gelsenkirchen, http://www.mediendesign-online.net) .............................................206Abb. 6.7.5c: Navigationsgrafiken zur Anzeige eines Aktivierungszustandes, (http://www.ldi.nrw.de, http://.hammer.informatik.fh-gelsenkirchen.de, http://www.hebammenhilfe.de) ..............................207Abb. 6.7.5d: Navigationsbalken und Aktivierungsdesign (Grafik: Hammer, Gegenmantel) ................208

320

Abbildungsverzeichnis

Abb. 6.7.5e: Horizontallisten mit und ohne vertikale Trennstriche ....................................................209Abb. 6.7.6a: Typische frühere Buttonleiste (http://www.abes-online.de1996, nicht mehr im Netz) ...209Abb. 6.7.6b: Website (2000) mit vielen Bildbuttons und Bildtypografie (http://www.kriegergmbh.de, Design: hammer.runge) .....................................................................209Abb. 6.7.6c: Unterschiedliche Aktivierungszustände von Buttons (Grafik: Hammer) .........................210Abb. 6.7.6d: Buttons in Anlehnung an das Corporate Logo (http://www.magellan-buch.de/) ...........210Abb. 6.7.6e: Buttondesigns (Studienentwürfe) ................................................................................211Abb. 6.7.6f: Buttondesigns im Web 2.0 Designstil (Grafik: Duzynski) ...............................................211Abb. 6.7.7b: Terminplaner als Websitekulisse (frühere Site des IOT, nicht mehr im Netz)...................212Abb. 6.7.8a: Deutliche Bildlinks (Grafik: Gasch, Hammer) ................................................................213Abb. 6.7.9a: Textunterstreichung mit Rahmenlinie ..........................................................................213Abb. 6.7.9b: Designalternativen zur Textlink-Gestaltung .................................................................214Abb. 6.7.9c, d: Designs von vorangestellten Ankerlisten (http://de.wikipedia.org,http://hammer.informatik.fh-gelsenkirchen.de) ...............................................................................214Abb. 6.7.10a: Designs von Favicons ...............................................................................................215Abb. 6.7.10a-c: Icons in den Größen 16 x16, .................................................................................216Abb. 6.8.1a: Scribbeln im Browserscreenshot (Grafik: Bensmann) ...................................................216Abb. 6.8.2a: Die Web Design Gazette im Photoshop-Entwurf (Design: Bensmann) ..........................218Abb. 6.8.2b: Abschalten der Schriftglättung in Photoshop ...............................................................218Abb. 6.8.3a: Rasterentwicklung ......................................................................................................219Abb. 6.8.3e,f: Sitemapdesigns (http://www.hammer-runge.de) ........................................................220Abb. 6.8.4a, b: Formulardesign mit CSS-Formatierung (http://www.hebammenhilfe.de, http://www.rapid-html.de, Design: Martina Plawer) ........................................................................221Abb. 6.8.4c: Formulardesign (http://www.qwertcity.com, Design: Mason Yarnell) .............................221Abb. 6.9a: Präsentationsmodus in Photoshop .................................................................................222

Prototypin7. gAbb. 7a: Zitat Larry Wall (Grafik: Bensmann) ...................................................................................227Abb. 7.3.1a, b: Webdeveloper Tools (Beispielseite: http://hammer.informatik.fh-gelsenkirchen.de) ...229Abb 7.3.2a: Markierungen im Quellcode .......................................................................................229Abb 7.3.5a, b: Browsererweiterungen Web Developer Extension .....................................................232Abb 7.3.6a, b: Standard-Stylesheet und nach Eric Meyer resettetes Stylesheet im Firefox-Browser ...234Abb. 7.4a, b: Styleguide des Neuentwurfs der FH-Gelsenkirchen Website (Beispiel: Märdian) ...........236

Assetdesig8. nAbb. 8a: Zitat Eric Auchard (Grafik: Bensmann) ...............................................................................243Abb. 8.3a, b: Storyboard-Formblatt und einfache Datenliste (Originale: hammer.runge) ...................245Abb. 8.3c: Film-Storyboard (Beispiel Ruske) ....................................................................................246Abb. 8.4.1a: Das Prinzip der umgekehrten Pyramide (Grafik: Hammer nach Häusermann/Käppeli) ...247Abb. 8.4.2a: Zweizeilige Headlines (Grafik: Hammer) .....................................................................248Abb. 8.4.2b-d: Designs von Aufzählungen (Beispiele: Hammer) .......................................................248Abb. 8.4.2e, f: Zeichen der „guten Typografie“ und ihre Umsetzung im Web ...................................249Abb. 8.4.2g: Typografische Anführungszeichen im Browser (Grafik: Bensmann) ...............................249Abb. 8.5a, b: Bildtypografie als Corporate-Design-Element (http://www.aral.de) http://www.mercedes-benz.de) ......................................................................................................250Abb. 8.5c: Pixelschriften, z. B. Binary und Silkscreen ........................................................................250Abb. 8.5d: Logos mit Innenbereichen: Transparent oder weiß? (http://www.steinhaus.de) ...............251Abb. 8.5.1a: Bildtypografie in Headlines (Showroom Mediendesign, Krieger Gewächshäuser, LKE) ..251Abb. 8.5.2a: Bildtypografie mit Ebenenstilen und typosemantische Schriftgestaltung im Themenbezug (Beispiele: Hammer und Studienentwürfe) ................................................................252Abb. 8.6.1a: Hemisphärentheorie (Grafik: Hammer) ........................................................................254Abb. 8.6.1b, c: Atmosphärische Einstimmung durch Bilder: „Erfrischend“ (http://www.gerolsteiner.de) „Gute alte Zeit“ (http://www.dallmayr.de) ....................254Abb. 8.6.1d: Auflockerung von textarmen Seiten (ehem. Website FB Informatik, FH-Gelsenkirchen) .255Abb. 8.6.2a: Konstante Fotoauffassung (http://www.manufactum.de) .............................................257Abb. 8.6.2b-d: Der Ausschnitt bestimmt die Bildwirkung. (Foto: Hammer) .......................................257Abb. 8.6.2e, f: Der Ausschnitts macht's, Originalbild und Ausschnitte (Foto: Hammer) ......................258Abb. 8.6.2g: Ungewöhnliche Bildformate mit Kohärenz zur Navigation (http://www.tep-ruhr.de) .....258Abb. 8.6.2h: Unterschiedlich leicht gedrehte Fotos (http://www.hebammenhilfe.de, Foto: Rickal) .....258Abb. 8.6.3a, b: Bildmanipulation. Wie sieht der Seehund wirklich aus? (Quelle: Adobe) ...................260Abb. 8.6.3c, d, e: Bildoptimierung (Foto: Hammer) ..........................................................................260

321

AbbildungsverzeichnisABBILDUNGS-VERZEICHNIS

Abb. 8.6.4a: Freistellen als „letzte Rettung“ bei ungeeignetem Ausgangsmaterial (Foto: LKE) .........261Abb. 8.6.4b: „Erden“ durch Horizontlinie (Grafik: Hammer, Foto: Funk) ...........................................261Abb. 8.6.4c: Körperschatten erzeugen in Photoshop (Grafik: Hammer, Foto: Funk) ...........................262Abb. 8.6.4d-f: Freistellen durch Anpassung an die Hintergrundfarbe (Grafik: Hammer, Foto: Funk) ...262Abb. 8.6.4g-i: GIF-Transparenz (Grafik: Hammer) ............................................................................263Abb. 8.6.4j: Eingrenzung des Aktivierungsbereichs durch Imagemaps (Grafik: Hammer, Foto: Funk) .264Abb. 8.6.4k: Einziehen neuer Hintergründe (Beispiele: Hammer, Foto: Funck) ..................................264Abb. 8.6.5a: Bildrandgestaltung durch Eckenabrundung (Foto: Jennrich/Auerbach) .........................265Abb. 8.6.5b: Bildrandgestaltung mit Ebenenstilen (Beispiele: Hammer, Foto: Jennrich/Auerbach) .....265Abb. 8.6.5c: Das Bild im Bildrahmen (frühere hammer.runge-Website) ............................................266Abb. 8.6.5d: Rahmen durch Filteranwendung (Beispiel: Hammer, Foto: Jennrich/Auerbach) ............266Abb. 8.6.5e: Bildrandauflösung (Beispiel: Hammer, Foto: Jennrich/Auerbach) ...................................266Abb. 8.6.6a: Abgestimmte Vorder- und Hintergrundbilder (http://www.abes-online.de) ...................267Abb. 8.6.6b-d: Zurückgenommene Hintergrundbilder mit Textüberlagerung (Beispiele: Hammer) .....267Abb. 8.6.6e, f: Singuläre Hintergrundbilder (http://www.juliakroener.de/, http://oui-ja.de)................268Abb. 8.6.7a: Das Prinzip der Kachelung (Grafik: Hammer) ...............................................................268Abb. 8.6.7b, c: Kacheldesigns mit überlagernden Vordergrundbildern (http://www.viget.com/extend, http://www.lanikaiproperties.com/) .................................................269Abb. 8.6.7d, e: Erweiterbares Headerbild durch Kacheltechnologie (http://www. howatec-online.de) 270Abb. 8.6.7f-h: Unsichtbare Kachelübergänge (Foto und Bearbeitung: Hammer) ...............................270Abb. 8.6.7i, j: Hintergrundstruktur aus Filterfunktionen (Grafiken: Hammer, Bensmann) ...................271Abb. 8.6.7k: Kachelstreifen zur Erzeugung eines Streifenmusters (Beispiel: Hammer) .......................271Abb. 8.6.8a: Headerbild (Websiteentwurf FH-Gelsenkirchen, Foto: Pressestelle der FH) ...................272Abb. 8.6.8b: Bildcollage als Headerbild (http://www.fbm.htwk-leipzig.de/, Design: http://www.and-advertising.de) .........................................................................................272Abb. 8.6.9a: Navigationsbuttons im Farb- und Formbezug zum Logo (Design: Hammer) ..................273Abb. 8.7.1a: Videos oder Hörproben an (http://www.amazon.de) ....................................................274Abb. 8.7.2a: Bildplayer (http://www.mediendesign-online.net) ........................................................275Abb. 8.7.3a: Logoanimation per animated GIF (www.online-studies.net) ........................................276Abb. 8.7.4a, b: Flash-Animationen (http://www.sensisoft.com/, http://www.littlebigplanet.com/) ....276

Technische Umsetzun9. gAbb. 9a: Zitat Douglas Adams (Grafik: Bensmann) ..........................................................................283Abb. 9.4.1a, b: Die Web Design Gazette ohne (links) und mit separatem Druckstylesheet (rechts) ....286Abb. 9.4.1c: Druckansicht Web Design Gazette: Serifenschrift und schwarz-weiße Farbgebung ........288Abb. 9.4.1d: Druckansicht Web Design Gazette: Navigation ausgeblendet ......................................288Abb. 9.4.1e: Druckansicht Web Design Gazette: Zusätzliche Link-URLs............................................289Abb. 9.4.1f: Druckansicht Web Design Gazette: Das Logo ...............................................................290Abb. 9.4.1g: Druckansicht Web Design Gazette: Typografische Anführungszeichen ..........................290Abb. 9.4.1h: Druckansicht Web Design Gazette: Die fertige Druckausgabe ......................................291Abb. 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) ................................................292Abb 9.4.2e: Aufruf des JavaScripts im Quelltext der Seite ................................................................292Abb. 9.5.1a: Interaktionselemente in Formularen: Eingabefelder, Radiobuttons, Checkboxen, Auswahllisten und Schaltflächen ....................................................................................................293Abb. 9.5.1b-e: Unterschiedliche Captchas .......................................................................................294

Tests und Launc10. hAbb. 10a: Zitat Arnold Glasgow (Grafik: Bensmann) .......................................................................299Abb. 10.3.2a, b: Browsershots (http://browsershots.org/). ...............................................................301Abb. 10.3.2c, d: Der Link-Checker des W3C (http://validator.w3.org/checklink) ...............................302Abb. 10.3.3a: Usability-Fragebogen 1. Teil ......................................................................................303Abb. 10.3.3b: Usability-Fragebogen 2. Teil ......................................................................................304Abb. 10.3.4a, b: Web Design Gazette im Textbrowser Lynx und in Braille-Ansicht ............................306Abb. 10.7a: Logfiles als Textdatei nach W3C-Standard ....................................................................312Abb. 10.7b-d: Grafische Aufarbeitung durch den Provider. ..............................................................312Abb. 10.7e-j: Auswertungstool Google Analytics (http://www.google.com/analytics/de) ..................313

323

LinkverzeichnisLinkverzeichnisLinkverzeichnis

Das Linkverzeichnis enthält Verweise auf Online-Dokumente zu den gezeigten Praxisbeispielen sowie Linkempfehlungen zu weitergehenden Informationen zu den jeweiligen Themen.Alle Links datieren auf einen Stand von Mai 2009.

Vorbemerkun1. gOnlinematerial: http://mediendesign-online.net/xmediapress ............................................................16

Einführun2. g

Grundlagen des Webdesign3. sAcid-Test: http://acid3.acidtests.org/ .................................................................................................33Lynda Weinman: http://lynda.com .....................................................................................................35Bundesministerium der Justiz: http://www.gesetze-im-internet.de/bgb/__312e.html .........................40Online-Quiz: http://www.mediendesign-online.net/xmediapress/ .......................................................49

Technische Grundlage4. nDarstellung von selbstgebauten Seiten: http://groups.google.de/group/de.comp.sys.mac.internet/msg/7c32f5c541dfb051 ...................................................................................................................52Lorem ipsum: http://www.loremipsum.de/ ........................................................................................62css Zen garden: http://www.csszengarden.com/................................................................................63CSS Naked Day: http://naked.dustindiaz.com/ ...................................................................................63SELFHTML: http://de.selfhtml.org/. ....................................................................................................63CSS 3 Color Module: http://www.w3.org/TR/css3-color/ ...................................................................75Appearance values: http://www.w3.org/TR/css3-ui/#appearance-val ................................................76Datumsformate: http://dev.mysql.com/ ...........................................................................................107Ajax: A New Approach: http://www.adaptivepath.com/ideas/essays/archives/000385.php ..............108CSS 3-Stand:http://www.w3.org/Style/CSS/current-work .................................................................115CSS Selektoren: http://www.w3.org/TR/css3-selectors/ ...................................................................115Boxmodell: http://www.w3.org/TR/css3-box/ ..................................................................................116Mehrspaltigkeit: http://www.w3.org/TR/css3-multicol// ...................................................................116calc(): http://www.w3.org/TR/css3-values/#calc ..............................................................................116MathML: http://www.w3.org/TR/mathml-for-css/ ............................................................................116Hintergrund-Eigenschaften: http://www.w3.org/TR/css3-background/ .............................................116Text-Eigenschaften: http://www.w3.org/TR/css3-text/#decoration ...................................................116Progressive Enhancement: http://dev.opera.com/articles/view/ progressive-enhancement-with-css-3-a-be/ ....................................................................................116Webfonts: http://www.w3.org/TR/css3-webfonts/#font-descriptions ...............................................117Freie Fonts: http://www.fontsquirrel.com/, http://www.webfonts.info/ .............................................117Hyphenator: http://code.google.com/p/hyphenator/ ........................................................................118PNGQuant: http://www.libpng.org/pub/png/apps/pngquant.html ...................................................121PNGNQ: http://pngnq.sourceforge.net/ ...........................................................................................121PDF-Erstellung: http://www.pdfforge.org/, http://de.openoffice.org/, https://www.webpdf.net/, http://www.dmoz.org/World/Deutsch/Computer/Datenformate/Dokumente/PDF/ ............................125CMS-Übersicht: http://en.wikipedia.org/wiki/List_of_Content_Management_Systems ....................126Web Developer: https://addons.mozilla.org/de/firefox/addon/60 .....................................................126Internet Explorer Developer Toolbar: http://www.microsoft.com/downloads/ details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038 ...............................................127Firebug: https://addons.mozilla.org/de/addon/1843 ........................................................................127Html Validator: https://addons.mozilla.org/de/firefox/addon/249 .....................................................127CSS validator: https://addons.mozilla.org/de/firefox/addon/2289.....................................................127Total Validator: https://addons.mozilla.org/de/firefox/addon/2318 ...................................................127Favelets: http://tantek.com/favelets/ ...............................................................................................127MeasureIt: https://addons.mozilla.org/de/firefox/addon/539 ...........................................................127ColorZilla: https://addons.mozilla.org/de/firefox/addon/271 ............................................................127Browser-Ranking: http://marketshare.hitslink.com/ .........................................................................128Tragamin-Übung: http://mediendesign-online.net/xmediapress .......................................................133

324

Linkverzeichnis

Siteplanun5. gKünstlersozialkasse: http://www.kuenstlersozialkasse.de ................................................................141Freemind: http://www.SmartDraw.com ...........................................................................................157Mindmeister: http://www.mindmeister.com ....................................................................................157Stylesheet-Tausch: http://www.mezzoblue.com/archives/2004/04/01/sickening/ und http://stopdesign.com/archive/2004/04/01/change.html .................................................................173Logo: http://mediendesign-online.net/xmediapress .........................................................................178

Designentwur6. fLinktipps zu Usability: http://www.useit.com/, http://www.sensible.com/ .........................................183Linktipps zur Barrierefreiheit:, http://www.wob11.de, http://www.einfach-fuer-alle.de,http://www.abi-projekt.de, http://www.bieneaward.de, http://www.w3.org/WAI/ ............................190Defender: http://www.p01.org/releases/DHTML_contests/files/DEFENDER_of_the_favicon/ ............215Favicon-Generator: http://www.favicon-generator.de/ .....................................................................215Bilder in Favicons umwandeln: http://www.html-kit.com/favicon .....................................................215

Prototypin7. gBrowser-Reset nach Eric Meyer: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ ....233Styleguide WDG: http://www.webdesigngazette.de/uebungen/kapitel8/WDG_StyleGuide.pdf .........235Styleguide der Bundeswehr: http://www.styleguide.bundeswehr.de/v3/styleguide/ ..........................235Styleguide des BBC: http://www.bbctraining.com/pdfs/newsstyleguide.pdf ......................................235Styleguide des WDR: http://www.wdrdesign.de/_media/pdf/WDRinternet.pdf .................................235http://vischeck.homeip.net/vischeck/imageEngine.php ....................................................................238

Assetdesign8. ..................................................................................243Quellen für kostenlose Fotos: http://www.lorm.de/2008/01/02/102-quellen-fuer-kostenlose-fotos/,http://arcagility.wordpress.com/2007/09/26/100-legal-sources-for-free-stock-images/,http://www.cekay.de/2007-12-24-48-seiten-im-netz-mit-kostenlosen-stock-fotos...........................253Auflösung berechnen: http://members.ping.de/~sven/dpi.html .......................................................259Lightbox V1.0: http://www.huddletogether.com/projects/lightbox/ ..................................................275Lightbox V2.0: http://www.lokeshdhakar.com/projects/lightbox2/....................................................275Lighbox-Klone: http://fortysomething.ca/mt/etc/archives/005400.php .............................................275

Technische Umsetzun9. gHommingberger Gepardenforelle: http://de.wikipedia.org/wiki/Hommingberger_Gepardenforelle ...295

Tests und Launc10. hWeb Site Test Tools: http://www.softwareqatest.com/qatweb1.html ................................................307Exploit-Me: http://labs.securitycompass.com/index.php/exploit-me/ .................................................307

325

LiteraturverzeichnisLiteraturverzeichnisLiteraturverzeichnis

In diesem Literaturverzeichnis sind sowohl die verwendeten Quellen als auch Literaturempfehlungen zusammengestellt.

Bonsiepe, G.:, Interface, Design neu begreifen, Bollmann Verlag, Mannheim 1996Breßler, F., Hübner und Rohlof: Was kostet Web-Design?, Birkhäuser Verlag, Basel 2003Butter, R. und Krippendorf, K.: Die semantische Wende: Eine Neue Grundlage für das Design, Birkhäuser Verlag, Basel 1999

Franz, K. Handbuch zum Testen von Web-Applikationen, Springer X.media.press, Berlin, Heidelberg 2007

Hammer, N.: Mediendesign für Studium und Beruf, Springer X.media.press, Berlin, Heidelberg 2008Heinecke , A. M. : Mensch-Computer-Interaktion, Fachbuchverlag Leipzig, Leipzig 2004

Koppelmann, U.: Produktmarketing, Kohlhammer Verlag, Stuttgart, Berlin, Köln, Mainz 1987Krug, S. und Dubau, J.: Don't Make Me Think!, Mitp-Verlag, Heidelberg 2006

Lakehoff, G. und Johnson, M.: Metaphors we live by, The University of Chicago Press, Chicago1980Licklider, J. C. R.: Man-Computer Symbiosis, 1960

Nielsen, J.: Designing Web Usability, Verlag Markt und Technik, München 2001

Paivio, A.: Imagery and Verbal Processes, Rinehart and Winston Inc., New York 1971

Stapelkamp, T. : Interfacedesign, Springer X.media.press, Berlin, Heidelberg 2007

Thissen, F. : Screendesign, Springer X.media.press, Berlin, Heidelberg 2003

Ziefle, M.: Lesen am Bildschirm, Münster, New York, Waxmann Verlag, München, Berlin 2001

327

IndexIndexIndex

Symbole3D-Button 2107 +/- 2-Regel 160

A<abbr>-Element 60

title-Attribut 60Ablaufplanung 139Abonnementendienst 111Absatz 59Accessibility 189Accessibility-Test 306Acid-Browsertest 34<acronym>-Element 60

xml:lang-Attribut 60ActionScript 101Active Server Pages. Siehe ASP<a>-Element 59

titel-Attribut 214Ajax 108, 109Aktivierungszustände 207, 210, 272Alternativnavigation 160Analyse 136Analysephase 143Anführungszeichen

typografische 249Angebot 141Angebotsbeispiel 142Angebotskalkulation 141Animierter Button 211Ankerlink 165Ankerlinkliste 164, 214Anmutung 181Antialiasing 47, 185Arbeitsserver 172ASP 103Assetdesign 21, 244Asynchronous JavaScript and XML. Siehe AjaxAtom-Feed 112Attribut 57Attributselektor 66, 115Attributswert 57Auflösung 129, 185, 259

absolut 259relativ 259

Aufzählung 220, 248Auktionsplattform 42Ausschnitt 257Außenabstand 73, 80Auswahlliste 293Auszeichnungssprache 34, 53

Bbackground-Eigenschaft 78Banding 119Barrierefreie Informationstechnik-Verordnung. Siehe BITVBarrierefreiheit 189, 207

Baumstruktur 154<b>-Element 60Benutzerinteraktion 293Bereiche

funktional unterschiedlich 195Berners-Lee, Tim 27Bildauflösung 259Bildausrichtung 258Bildausschnitt 257Bildbutton 209, 212, 272Bilddefinition 256Bilder 60

im Web 253Bildformat 118, 257Bildfunktionen 254Bildgröße 259Bildheadline 251Bildkacheln 268Bildkonzept 198, 258Bildlegende 200Bildlink 213Bildoptimierung 260Bildplayer 275Bildrandgestaltung 264Bildschirmauflösung. Siehe AuflösungBildsprache 193Bildtypografie 185, 188, 207, 250BITV 190, 191Blickleitfunktion 255Blickregistrierung 305Blindtext 62Blockelement 58<blockquote>-Element 61, 249Blocksatz 36, 117, 187<body>-Bereich 56<body>-Element 55, 93border-Eigenschaft 73, 79Boxmodell 73, 116Braillezeile 285, 307Brand-Color 183Branding-Site 37Breadcrumbtrail 155, 159, 160, 166, 208<br />-Element 59Briefing 136Briefing-Checkliste 137, 138Brotkrümelpfad. Siehe BreadcrumbtrailBrowser 27, 128Browseranpassung 231Browser-Fließtext

simulieren 218Browser-Hacks 87Browsermodus

Almost Standards Mode 55Compatible Mode 55Full Standards Mode 55Quirks Mode 55Standards Compliance Mode 55

Browser-Ranking 128Browser-Reset

nach Eric Meyer 233Browsertest 301Browsertools 126

328

Index

Browser-Weiche 87Browserweichen 87Bush, Vannevar 26Button 209, 272

CCaptcha 294Cascading Stylesheets. Siehe CSSCFML 103CGI 102Character Entities. Siehe EntitiesCheckbox 293class-Attribut 66clear-Eigenschaft 95, 96CMS 45, 126<code>-Element 60Code Review 234Cold Fusion Markup Language. Siehe CFMLCombobox 293Common Gateway Interface. Siehe CGIconfirmed decision 32Content

dynamischer 284Contentbereich 170Content-Management-System. Siehe CMSContent-Management-Systeme. Siehe CMCContent Syndication 112Cookies 163, 294Cookie-Test 302Core fonts for the Web 36Corporate Color 183, 203Corporate Design 146, 182, 210Cross Media Design 24, 182Cross-Site Scripting. Siehe XSSCSS 24, 28, 34, 63

Deklaration 64Deklarationsblock 64Eigenschaften 64, 78Farben 78Positionierung 80Regel 64Schritt für Schritt 88Selektoren 64

kombiniert 68CSS 3 115, 117CSS-Flag 231CSS Level 3. Siehe CSS 3

DDatenaustausch

asynchroner 108Datenbank 103<dd>-Element 61Dead End 153Dedicated Server 151Dedicated Virtual Hosting 151Denial of Service. Siehe DoSDesign 52

Designbegriff 18Detailentwurf 220Diashow 275Dimensionen 80display-Eigenschaft 82Dithering 119<div>-Container 90<div>-Element 62, 90, 229<dl>-Element 60DNS 149DOCTYPE-Deklaration 54Doctype Sniffing. Siehe Doctype SwitchingDoctype Switching 55Document Object Model. Siehe DOMDocument Type Definition. Siehe DTDDokumentation 244, 246Dokumententest 300Dokumentrumpf. Siehe <body>-BereichDOM 70Domain 147

Top-Level-Domain 148Domain Name Server. Siehe DNSDoppelkodierung 199, 254DoS 308dots per inch. Siehe dpidpi 185, 259Drehbuch 246Dropdown-Liste 293Dropdown-Menü 48Dropout-Menü 169Druckstylesheet 285, 286, 287Druckversion

einer Webseite 285DTD 55<dt>-Element 61

EEbenenstile 265E-Learning 43<em>-Element 60Endgerät

mobiles 291End-Tag 57Engelbart, Douglas 27Entität. Siehe EntitiesEntities 58, 118, 249Entwicklerwerkzeuge 125Ergonomie 180Extended Hyper Text Markup Language. Siehe XHTMLExtensible 3D. Siehe X3DExtensible Markup Language. Siehe XMLExtensible Stylesheet Language. Siehe XSLEye-Movement Recording. Siehe Blickregistrierung

FFarben

am Bildschirm 188CSS 74, 78

329

Index INDEX

websicher 35, 147Farbkodierung 202Farb-Schlüsselwörter 75favicon 215Favorite-Icon. Siehe faviconFeasibility 228Feed. Siehe NewsfeedFilm 276Flash 28, 46, 101, 122, 123, 276float-Eigenschaft 85, 95floating menu 169Flow 81Flowchart 152, 157font-Eigenschaft 79@font-face-Regel 117Footer 170Format 257Formatentscheidung 122Formular 221, 293Frames 100Freigabe

Umsetzung 237Freistellen 261

durch Hintergrundanpassung 262durch Transparenz 263

Funktionslayout 159. Siehe NavigationslayoutFunktionstest 301

GGestaltgesetz der Gleichartigkeit 206Gestaltung

ästhetische und anmutungsbezogene 180typosemantische 182

Geviertbreite 77GIF 118, 215, 250

animiertes 120, 276blindes 100Transparenz 263

Gitterstruktur 155Grafiken

im Web 253optimieren 285

grafischer Prototyp 180, 221Graphics Interchange Format. Siehe GIFGraubild 197Guided Tour 167, 168

H<h1>-Element 58<h2>-Element 58<h3>-Element 58<h4>-Element 58<h5>-Element 58<h6>-Element 58Halbtransparenz 264Halo-Effekt 263handleResponse()-Funktion 110Hauptnavigation 160

Hauptsektionen 162<head>-Bereich 56

Style-Angaben 63<head>-Element 55, 56Headerbild 272Hemisphärentheorie 254Hilfefunktion 167Hintergrund 78Hintergrundbild 78

singuläres 267Hintergrundstruktur 271HTML 27, 53

Framset 53Strict 53Transitional 53Varianten 53

HTML-Editor 125<html>-Element 55HTML-Prototyp 228, 237Hyperlink 26, 34, 59Hypertext 27, 34Hypertext Markup Language. Siehe HTML

IICO 215Icon 215Icon-Button 210id-Attribut 66ID-Selektor 66<i>-Element 60Imagemaps 264Image-Site 37<img />-Element 60, 173

alt-Attribut 60, 173height-Attribut 60src-Attribut 60width-Attribut 60

!important 72Impressum 160Indizierung 119Industrial Design 18information chunk 160Informationsdarstellung

andere Medien 285Informationsdesign 21Informationsfunktion 254Informationsphase 143Informationsplattform 38Informationszugang

zielgruppenorientierter 163inhärent 70inherit 71Inline-Element 58Innenabstand 73, 80Interaktion 293Interaktionsdesign 21, 158, 195Interaktionselement 160Interface 200Interfacedesign 19, 200inverted pyramid style 246

330

Index

JJava 123JavaScript 34, 103, 109JavaScript Object Notation. Siehe JSONJava Server Pages. Siehe JSPJoint Photographic Experts Group. Siehe JPEGJPEG 120, 251

Artefakte 121JSON 109JSP 34, 102

KKacheln

ohne Übergang 269Kachelstreifen 271Kaskaden 70Kind-Selektor 68Klassenselektor 66Klickmodell 228Kombinierte Selektoren 68Kommunikationsdesign 18Konformitätsstufe 190Kontrast 188Konventionen

externe 204interne 204

Koppelmann, Udo 181Kostenplanung 141Krippendorff, Klaus 181Kunden-Briefing 136, 137Künstlersozialversicherung 141

LLaufweite 186Launch 308Layer 100Layoutgrafik 173Layoutraster 218Layout-Styleguide 235Layouttabellen 100Leiterstruktur 154Leitidee. Siehe Main IdeaLesegeschwindigkeit 23Leserichtung 205Lichtfarben 188Licklider, J. C. R. 26<li>-Element 60Lightbox 275Linearstruktur 153Link 59<link />-Element 59, 63

rel-Attribut 59, 215rev-Attribut 59

Link-Icon 213Links 27Link-Test 301Liste 60, 248

Logfile 311Logfile-Auswertung 145Logo 251Logo-Rücklink 162Look & Feel 181, 193Lorem ipsum. Siehe BlindtextLSD-Design 166

MMain Idea 136, 139Man-in-the-Middle-Angriff 308Marginalienspalte 170Marginalnavigation 160margin-collapse 74margin-Eigenschaft 73, 80Maßeinheiten

absolut 76Schlüsselwörter 77

Pixel 78relativ 76

Materialsichtung 145Matrixstruktur 155Maus 27Mediendesign 19Mehrspaltigkeit 116Memowirkung 199Mengentext 197<meta />-Element 295

description-Attribut 296keyword-Attribut 295

Metanavigation 160, 163Metapher 193, 194Meta-Tag 295Meyer, Eric 233Mitmach-Medium 29Monitor 129Motiv 256Mouseover 204, 272Multimediafähigkeit 23MySQL 104

NNachbar-Selektoren 68Nachfahren-Selektor 68Namenskonventionen 172Namensraum 56Navigation

dynamisch generiert 163dynamisch generierte 163persistent 162seiteninterne 160zielgruppenorientiert 163

Navigationsbalkenhorizontal 208

Navigationsbereich 170Navigationsgrafik 207Navigationsicon 220

331

Index INDEX

Navigationskaskade 206Navigationskonventionen 204Navigationskonzept 159Navigationskulisse 211Navigationslayout 159, 168, 170, 195Navigationsleiste 205Navigationsmenü 206

vertikal 208Navigationspfad 159, 286Netzstruktur 156Newsfeed 38, 111Nielsen, Jakob 167, 184Nutzerbindung 32Nutzungsrechte 141

O<ol>-Element 60Online-Lernmodul 43Online-Shop 39

rechtliche Anforderungen 40Online-Umfrage 144, 304Oracle 104O‘Reilly, Tim 113Orientierung 201OWL 115

Ppadding-Eigenschaft 73, 80Papierprototyp 159, 171PDF 124<p>-Element 59Penetrationstest 308Persistente Navigation 162Pfadnavigation 160, 166, 202, 208Pflege

eines Webangebotes 310Photoshop-Layout 217PHP 34, 102, 104Pipe-Zeichen 209Pixel 78, 259Pixeldichte 259pixel per inch. Siehe ppiPixelschrift 250pixographen 16, 173, 176, 225, 241, 281, 298, 315, 339

Logo 178Plattform 128Platzhalterbild 217Plugin 46, 123Plugin-Test 302PNG 28, 121, 215, 231, 250, 264Polaritätenprofil 144Pop-up-Menü 169Portable Document Format. Siehe PDFPortable Network Graphics. Siehe PNGPortal 46position-Eigenschaft 83, 84, 85Positionierung 80

absolut 84fixiert 85

relativ 83schwebend 85, 95Tipps und Tricks 87

PostgreSQL 104ppi 185, 259Präsentation

HTML-Prototyp 238Printdesign 19, 22Printmedien 22Printtypografie 186Produktsemantik 181Programmiersprache

clientseitig 103serverseitig 34, 101

Progressive Enhancement 116Projektbeschreibung 139Projektdokumentation 173Projektformulierung 147Projektorganisation 172Projektplan 136, 139, 140Prototyp-Styleguide 235Pro-und-Contra-Argumentation 144Pseudo-Selektoren 68Pulldown-Menü 169

Q<q>-Element 61, 249Quelltexteditor 125Quicklink 160, 165quotes-Eigenschaft 249

RRadiobutton 293Rahmen 73, 78Raster 195Rasterentwicklung 218Rausatz 36, 117RDF 114Really Simple Syndication. Siehe RSSRedesign 137, 143Registerschema 212Resource Description Framework. Siehe RDFRootserver 151RSS 112RSS-Feed 112

SSatzbreite 186Satzregeln 188Scalable Vector Graphics. Siehe SVGSchaltfläche 293Schmuckrahmen 265Schrifteinbettung 117Schriftformatierung 79Schriftglättung. Siehe AntialiasingScreendesign 19, 180, 193Screenreader 307

332

Index

Scribble 216Scribble-Storyboard 246Search Engine Optimization. Siehe SEOSecurity-Test 307Seitenheader 169Seitenkomposition 196Seitentitel 159Seitenunterteilung 195Semantik 58, 60, 62, 115, 252Semantisches Differenzial 144Semantisches Web 114sendRequest()-Funktion 109SEO 294

Relevanz 295Serendipity 164Serifen 36Servicenavigation 160Servlet 102Session 294SGML 27Shared Virtual Hosting 151Shockwave Flash. Siehe FlashSicherheitstest 307Silbentrennung 117Silverlight 101, 123Site-Kennung 162Sitemap 160, 165, 220Sitestrukturmodelle 153Skripte 285<span>-Element 62Spezifität 72SQL 103, 104SQL-Injection 308Standardablaufplan 24Standard Generalized Markup Language. Siehe SGMLStandardinhaltsseite 196Stapelkamp, Torsten 201Start-Tag 57

Style-Angaben 63Stockfoto 253Storyboard 244, 245, 246<strong>-Element 60Structured Query Language. Siehe SQLStrukturdesign 21, 152Strukturdiagramm 152, 157Strukturlayout 156<style>-Element 63

@import 64Styleguide 147, 235, 244Stylesheet

Autoren-Stylesheet 72Browser-Stylesheet 72extern 63für mobile Endgeräte 291intern 63Kommentar 64organisieren 230Schritt für Schritt 88User-Stylesheet 72

Subnavigation 208Suchformular 167Suchfunktion 163, 167

Suchmaschinenoptimierung. Siehe SEOSVG 101, 122Syndikation 112

TTabelle 61, 100, 236<table>-Element 61<tbody>-Element 61<td>-Element 61

colspan-Attribut 61rowspan-Attribut 61

Teaser 164, 165Technologien

alte vs. neue 100Testphase 300Text

erstellen 246gestalten 248

Textausrichtung 187Textauszeichnung 60, 89

logisch 60physische 60

Textbrowser 307Textbutton 210Texteingabefeld 293Textlink 160, 204, 213<tfoot>-Element 61<thead>-Element 61<th>-Element 61Toolbar 126, 128Tooltips 212Transparenz 120, 122

echte 121<tr>-Element 61Trennprogramme 36Trennung von Inhalt und Design 52, 100Typografie 185

im Web 35Typosignal 249Typselektor 65

UÜberschrift 58<ul>-Element 60Universalattribut 66Universalselektor 65Unterhaltungs-Website 43Unternehmenslogo 160Unternehmensrepräsentation 37Usability 167, 183Usability-Test 303

VValiditätskontrolle 284VBScript 103Vererbung 70Verhalten 52

333

Index INDEX

Veröffentlichung 308Verteilseite 196Verzeichnis 165Video 276Virtual Reality Modeling Language. Siehe VRMLVorlesegerät 285Vorplanung

technische 147Vorseitennavigation 161VRML 124

WW3C 28Wartung

eines Webangebotes 310WCAG-Richtlinien 190Web 2.0 112, 113, 115

Button 211Web Content Accessibility Guidelines. Siehe WCAG-RichtlinienWebdesign 24

barrierefrei 36Kompromisse 34

Web Design Gazette 15, 51, 53, 88, 169, 218, 235, 287, 306, 315, 339Webhosting 149Webhosting-Paket 151Weblog 46Web Ontology Language. Siehe OWLWebprojektmanagement 136Webserver 27, 151Website

Bekanntmachung 309dynamische 45flashbasierte 46statische 44

Websiteanalyse 144Websitestrategien 37Websiteuntergliederung 168Webstandards 32Webtypografie 35Wert 64Wiki-System 46World Wide Web 26, 115World Wide Web Consortium. Siehe W3CWYSIWYG-Editor 125

XX3D 124x-Höhe 77XHTML 34, 53

Code 89Container 62Element 57Grundgerüst 57Kommentare 56Schritt für Schritt 88Sonderzeichen 58Struktur 54, 62Umstieg von HTML 53

XHTML-Quelltext 229

XML 28, 101, 112, 114root element 55Wurzelelement 55

XML-Deklaration 54XMLHttpRequest 108, 109XSL 101XSLT 101XSL-Transformation. Siehe XSLTXSS 308

ZZeichen guter Typografie 249Zeilenabstand 186, 187, 197Zeilenumbruch 59Zielanker 59, 66Zielgruppe

Navigation 160Zielgruppenanalyse 143Zielgruppenorientierte Navigation 163Zitat 61Zugänglichkeit 189Zugänglichkeitstest 306

335

Quizlösungen

Lösungen aller QuizfragenPrüfen Sie, wie viele Quizfragen Sie richtig beantwortet haben. Sollte die abschließende Auswertung ergeben, dass Ihr Kennt-nisstand lückenhaft ist, wird empfohlen, die relevanten Kapitel nachzuarbeiten.

Quiz zu Kapitel 3 „Grundlagen des Webdesigns“Quizfrage 3.7.1 Lösung A Lernstoff nacharbeiten: Kap. 3.3.2

Quizfrage 3.7.2 Lösung B Lernstoff nacharbeiten: Kap. 3.3.1

Quizfrage 3.7.3 Lösung C, E Lernstoff nacharbeiten: Kap. 3.3.2

Quizfrage 3.7.4 Lösung A Lernstoff nacharbeiten: Kap. 3.3.2

Quizfrage 3.7.5 Lösung C Lernstoff nacharbeiten: Kap. 3.3.2




Quiz zu Kapitel 4 „Technische Grundlagen“Quizfrage 4.15.1 Lösung C Lernstoff nacharbeiten: Kap. 4.3.1







Quizfrage 4.15.8 Lösung A, F Lernstoff nacharbeiten: Kap. 4.3.2


Quizfrage 4.15.10 Lösung D Lernstoff nacharbeiten: Kap. 4.3.7






Quizfrage 4.15.16 3, 4, 2, 1, 5 Lernstoff nacharbeiten: Kap. 4.10.1

Quizfrage 4.15.17 A-c, B-a, C-b Lernstoff nacharbeiten: Kap. 4.10.6

Quiz zu Kapitel 5 „Siteplanung“Quizfrage 5.10.1 Lösung B Lernstoff nacharbeiten: Kap. 5.3.1






Quizfrage 5.10.7 Lösung A Lernstoff nacharbeiten: Kap. 5.7





336

Quiz zu Kapitel 6 „Designentwurf“Quizfrage 6.11.1 Lösung C Lernstoff nacharbeiten: Kap. 6.3




Quizfrage 6.11.5 Lösung C Lernstoff nacharbeiten: Kap. 6.5










Quizfrage 6.11.15 Lösung B Lernstoff nacharbeiten: Kap. 6.9

Quiz zu Kapitel 7 „Prototyping“Quizfrage 7.7.1 Lösung C Lernstoff nacharbeiten: Kap. 7.3

Quizfrage 7.7.2 Lösung C, D Lernstoff nacharbeiten: Kap. 7.3

Quizfrage 7.7.3 Lösung E Lernstoff nacharbeiten: Kap. 7.3







Quiz zu Kapitel 8 „Assetdesign“Quizfrage 8.9.1 Lösung B Lernstoff nacharbeiten: Kap. 8.3










Quizfrage 8.9.11 Lösung D Lernstoff nacharbeiten: Kap. 8.6.4







337

Quiz zu Kapitel 9 „Assetdesign“Quizfrage 9.8.1 Lösung A Lernstoff nacharbeiten: Kap. 9.5.1







Quiz zu Kapitel 10 „Tests und Launch“Quizfrage 10.9.1 Lösung C Lernstoff nacharbeiten: Kap. 10.3.1




339

Online-MaterialOnline-MaterialOnline-Material

Allen Leserinnen und Lesern dieses Buches steht auch die Website http://www.mediendesign-online.net/xmediapress zur Verfügung.Dort finden Sie eine elektronische Version aller Multiple Choice-Quizfragen mit direkter Online-Auswertung. Bei nicht oder falsch beantworteten Fragen erhalten Sie Hinweise auf die zugehörigen Inhaltskapitel zur Nacharbeit.

Über diese Website erreichen Sie auch die „Web Design Gazette“, die Ihnen zusätzliche Online-Tutorials zum Erlernen der technischen Webdesign Grundlagen bietet.Nicht zuletzt erreichen Sie darüber auch den Downloadservice für benötigte Materialien für Ihr „pixographen“ Übungsprojekt.

Beispiel einer Quizfrageim elektronischen Quiz

Beispiel einer Quizauswertungim elektronischen Quiz

Link zur Begleitwebsite zu diesem Buch:http://mediendesign-online.net/xmediapress

341

Die AutorenDie AutorenDie Autoren

Professor Dr. Norbert Hammer ist seit 1997 Professor für Medien-design am Fachbereich Informatik der Fachhochschule Gelsenkirchen. Seine Arbeitsschwerpunkte umfassen Webdesign, Interfacedesign und E-Learning-Anwendungen.Er studierte Design an der Folkwangschule für Gestaltung/ Universi-tät Essen und an der SHBK Braunschweig. In der Industrie arbeitete er als Produktplaner bei Krups, bevor er sich an der Universität Essen der Designforschung und dem Thema Designmanagement widmete.In seinem derzeitigen Tätigkeitsfeld entwickelt er u. a. die Online-Lernmodule für das Fach Mediendesign für die virtuelle Fachhoch-schule (vfh).Prof. Dr. Hammer ist Mitinhaber des Designbüros hammer.runge und dort im Bereich Industrial Design und Webdesign aktiv.

Karen Bensmann ist Diplom-Informatikerin (FH) und seit 2008 an der Fachhochschule Gelsenkirchen als wissenschaftliche Mitarbeiterin tätig. Während ihres Studiums der Medieninformatik an der Fach-hochschule Gelsenkirchen war sie unter anderem als freiberufliche Webdesignerin tätig und leitete das Java-Tutorium für die Studen-tinnen und Studenten der Medien- und Angewandten Informatik. Darüber hinaus hat sie im Berufsbildungszentrum Gladbeck als Dozentin in der Erwachsenenbildung in den Bereichen Webdesign, Grafikbearbeitung, Film und Videoschnitt gearbeitet.

Documents

Abbildungsverzeichnis - link.springer.comlink.springer.com/content/pdf/bbm:978-3-540-85234-6/1.pdf · 317 AbbildungsverzeichnisAbbildungsverzeichnis Abbildungsverzeichnis 1. gVorbemerkun