abbildungsverzeichnis -...
TRANSCRIPT
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
Quizfrage 3.7.6 Lösung A Lernstoff nacharbeiten: Kap. 3.4.3
Quizfrage 3.7.7 Lösung A Lernstoff nacharbeiten: Kap. 3.5.2
Quizfrage 3.7.8 Lösung B Lernstoff nacharbeiten: Kap. 3.5.3
Quiz zu Kapitel 4 „Technische Grundlagen“Quizfrage 4.15.1 Lösung C Lernstoff nacharbeiten: Kap. 4.3.1
Quizfrage 4.15.2 Lösung A Lernstoff nacharbeiten: Kap. 4.3.1
Quizfrage 4.15.3 Lösung B Lernstoff nacharbeiten: Kap. 4.3.1
Quizfrage 4.15.4 Lösung A Lernstoff nacharbeiten: Kap. 4.3.1
Quizfrage 4.15.5 Lösung C Lernstoff nacharbeiten: Kap. 4.3.1
Quizfrage 4.15.6 Lösung C Lernstoff nacharbeiten: Kap. 4.3.2
Quizfrage 4.15.7 Lösung C Lernstoff nacharbeiten: Kap. 4.3.2
Quizfrage 4.15.8 Lösung A, F Lernstoff nacharbeiten: Kap. 4.3.2
Quizfrage 4.15.9 Lösung A Lernstoff nacharbeiten: Kap. 4.3.5
Quizfrage 4.15.10 Lösung D Lernstoff nacharbeiten: Kap. 4.3.7
Quizfrage 4.15.11 Lösung C Lernstoff nacharbeiten: Kap. 4.4.2
Quizfrage 4.15.12 Lösung B Lernstoff nacharbeiten: Kap. 4.4.1
Quizfrage 4.15.13 Lösung C Lernstoff nacharbeiten: Kap. 4.4.1
Quizfrage 4.15.14 Lösung A Lernstoff nacharbeiten: Kap. 4.4.3
Quizfrage 4.15.15 Lösung A Lernstoff nacharbeiten: Kap. 4.4.3
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.2 Lösung C Lernstoff nacharbeiten: Kap. 5.4.1
Quizfrage 5.10.3 Lösung C Lernstoff nacharbeiten: Kap. 5.6.1
Quizfrage 5.10.4 Lösung B Lernstoff nacharbeiten: Kap. 5.6.1
Quizfrage 5.10.5 Lösung C Lernstoff nacharbeiten: Kap. 5.6.2
Quizfrage 5.10.6 Lösung B Lernstoff nacharbeiten: Kap. 5.7.1
Quizfrage 5.10.7 Lösung A Lernstoff nacharbeiten: Kap. 5.7
Quizfrage 5.10.8 Lösung A Lernstoff nacharbeiten: Kap. 5.7.2
Quizfrage 5.10.9 Lösung B Lernstoff nacharbeiten: Kap. 5.7.2
Quizfrage 5.10.10 Lösung C Lernstoff nacharbeiten: Kap. 5.7.5
Quizfrage 5.10.11 Lösung B Lernstoff nacharbeiten: Kap. 5.7.11
336
Quiz zu Kapitel 6 „Designentwurf“Quizfrage 6.11.1 Lösung C Lernstoff nacharbeiten: Kap. 6.3
Quizfrage 6.11.2 Lösung C Lernstoff nacharbeiten: Kap. 6.4.1
Quizfrage 6.11.3 Lösung C Lernstoff nacharbeiten: Kap. 6.4.1
Quizfrage 6.11.4 Lösung A Lernstoff nacharbeiten: Kap. 6.4.2
Quizfrage 6.11.5 Lösung C Lernstoff nacharbeiten: Kap. 6.5
Quizfrage 6.11.6 Lösung B Lernstoff nacharbeiten: Kap. 6.6.1
Quizfrage 6.11.7 Lösung C Lernstoff nacharbeiten: Kap. 6.7.1
Quizfrage 6.11.8 Lösung A Lernstoff nacharbeiten: Kap. 6.7.5
Quizfrage 6.11.9 Lösung B Lernstoff nacharbeiten: Kap. 6.7.6
Quizfrage 6.11.10 Lösung B Lernstoff nacharbeiten: Kap. 6.7.8
Quizfrage 6.11.11 Lösung C Lernstoff nacharbeiten: Kap. 6.7.10
Quizfrage 6.11.12 Lösung B Lernstoff nacharbeiten: Kap. 6.8.2
Quizfrage 6.11.13 Lösung A Lernstoff nacharbeiten: Kap. 6.8.2
Quizfrage 6.11.14 Lösung B Lernstoff nacharbeiten: Kap. 6.8.3
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
Quizfrage 7.7.4 Lösung A Lernstoff nacharbeiten: Kap. 7.3
Quizfrage 7.7.5 Lösung A Lernstoff nacharbeiten: Kap. 7.3.6
Quizfrage 7.7.6 Lösung B Lernstoff nacharbeiten: Kap. 7.5
Quizfrage 7.7.7 Lösung C Lernstoff nacharbeiten: Kap. 7.4
Quizfrage 7.7.8 Lösung A Lernstoff nacharbeiten: Kap. 7.4
Quizfrage 7.7.9 Lösung B Lernstoff nacharbeiten: Kap. 7.5
Quiz zu Kapitel 8 „Assetdesign“Quizfrage 8.9.1 Lösung B Lernstoff nacharbeiten: Kap. 8.3
Quizfrage 8.9.2 Lösung A Lernstoff nacharbeiten: Kap. 8.4.2
Quizfrage 8.9.3 Lösung B Lernstoff nacharbeiten: Kap. 8.5
Quizfrage 8.9.4 Lösung C Lernstoff nacharbeiten: Kap. 8.5
Quizfrage 8.9.5 Lösung A Lernstoff nacharbeiten: Kap. 8.6
Quizfrage 8.9.6 Lösung A Lernstoff nacharbeiten: Kap. 8.6.1
Quizfrage 8.9.7 Lösung B Lernstoff nacharbeiten: Kap. 8.6.1
Quizfrage 8.9.8 Lösung A Lernstoff nacharbeiten: Kap. 8.6.1
Quizfrage 8.9.9 Lösung C Lernstoff nacharbeiten: Kap. 8.6.4
Quizfrage 8.9.10 Lösung A Lernstoff nacharbeiten: Kap. 8.6.4
Quizfrage 8.9.11 Lösung D Lernstoff nacharbeiten: Kap. 8.6.4
Quizfrage 8.9.12 Lösung B Lernstoff nacharbeiten: Kap. 8.6.4
Quizfrage 8.9.13 Lösung B Lernstoff nacharbeiten: Kap. 8.6.5
Quizfrage 8.9.14 Lösung A Lernstoff nacharbeiten: Kap. 8.6.5
Quizfrage 8.9.15 Lösung B Lernstoff nacharbeiten: Kap. 8.6.6
Quizfrage 8.9.16 Lösung C Lernstoff nacharbeiten: Kap. 8.6.7
Quizfrage 8.9.17 Lösung C Lernstoff nacharbeiten: Kap. 8.7.2
337
Quiz zu Kapitel 9 „Assetdesign“Quizfrage 9.8.1 Lösung A Lernstoff nacharbeiten: Kap. 9.5.1
Quizfrage 9.8.2 Lösung B Lernstoff nacharbeiten: Kap. 9.5.2
Quizfrage 9.8.3 Lösung C Lernstoff nacharbeiten: Kap. 9.4.1
Quizfrage 9.8.4 Lösung B Lernstoff nacharbeiten: Kap. 9.4.1
Quizfrage 9.8.5 Lösung B Lernstoff nacharbeiten: Kap. 9.4.1
Quizfrage 9.8.6 Lösung B Lernstoff nacharbeiten: Kap. 9.4.1
Quizfrage 9.8.7 Lösung A Lernstoff nacharbeiten: Kap. 9.6.2
Quiz zu Kapitel 10 „Tests und Launch“Quizfrage 10.9.1 Lösung C Lernstoff nacharbeiten: Kap. 10.3.1
Quizfrage 10.9.2 Lösung A Lernstoff nacharbeiten: Kap. 10.3.2
Quizfrage 10.9.3 Lösung A Lernstoff nacharbeiten: Kap. 10.3.3
Quizfrage 10.9.4 Lösung C Lernstoff nacharbeiten: Kap. 10.3.4
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.