Abbildungsverzeichnis

Abbildungsverzeichnis Abbildungsverzeichnis Abbildungsverzeichnis 1. Vorbemerkung Abb. 1a: Zitat Tim Berners-Lee (Grafik: Bensmann) ....................

Author: Silvia Dressler

7 downloads 2 Views 272KB Size

Report

Download PDF

Recommend Documents

Abbildungsverzeichnis

Abbildungsverzeichnis:

Abbildungsverzeichnis

Abbildungsverzeichnis... 9

9 Abbildungsverzeichnis

19 Abbildungsverzeichnis

Inhaltsverzeichnis. Abbildungsverzeichnis

I Abbildungsverzeichnis

Abbildungsverzeichnis Abbildungsverzeichnis Abbildungsverzeichnis

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

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

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

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

317

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

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

318

Abbildungsverzeichnis

ABBILDUNGSVERZEICHNIS

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

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

319

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

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

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

320

Abbildungsverzeichnis

ABBILDUNGSVERZEICHNIS

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

9. Technische Umsetzung Abb. 9a: Zitat Douglas Adams (Grafik: Bensmann) ..........................................................................283 Abb. 9.4.1a, b: Die Web Design Gazette ohne (links) und mit separatem Druckstylesheet (rechts).... 286 Abb. 9.4.1c: Druckansicht Web Design Gazette: Serifenschrift und schwarz-weiße Farbgebung........ 288 Abb. 9.4.1d: Druckansicht Web Design Gazette: Navigation ausgeblendet ......................................288 Abb. 9.4.1e: Druckansicht Web Design Gazette: Zusätzliche Link-URLs............................................289 Abb. 9.4.1f: Druckansicht Web Design Gazette: Das Logo ...............................................................290 Abb. 9.4.1g: Druckansicht Web Design Gazette: Typografische Anführungszeichen ..........................290 Abb. 9.4.1h: Druckansicht Web Design Gazette: Die fertige Druckausgabe ......................................291 Abb. 9.4.2a-d: Reguläre Website im Vergleich zur vereinfachten Websiteversion für mobile Endgeräte (http://de.wikipedia.org, http://www.amazon.de) ................................................292 Abb 9.4.2e: Aufruf des JavaScripts im Quelltext der Seite ................................................................292 Abb. 9.5.1a: Interaktionselemente in Formularen: Eingabefelder, Radiobuttons, Checkboxen, Auswahllisten und Schaltflächen ....................................................................................................293 Abb. 9.5.1b-e: Unterschiedliche Captchas.......................................................................................294

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

321

Linkverzeichnis Linkverzeichnis Linkverzeichnis

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. 1. Vorbemerkung Onlinematerial: http://mediendesign-online.net/xmediapress ............................................................16

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

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

323

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

6. Designentwurf Linktipps zu Usability: http://www.useit.com/, http://www.sensible.com/ .........................................183 Linktipps 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/............................190 Defender: http://www.p01.org/releases/DHTML_contests/files/DEFENDER_of_the_favicon/ ............ 215 Favicon-Generator: http://www.favicon-generator.de/ .....................................................................215 Bilder in Favicons umwandeln: http://www.html-kit.com/favicon .....................................................215

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

8. Assetdesign ..................................................................................243 Quellen 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...........................253 Auflösung berechnen: http://members.ping.de/~sven/dpi.html .......................................................259 Lightbox V1.0: http://www.huddletogether.com/projects/lightbox/ ..................................................275 Lightbox V2.0: http://www.lokeshdhakar.com/projects/lightbox2/....................................................275 Lighbox-Klone: http://fortysomething.ca/mt/etc/archives/005400.php .............................................275

9. Technische Umsetzung Hommingberger Gepardenforelle: http://de.wikipedia.org/wiki/Hommingberger_Gepardenforelle ... 295

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

324

Literaturverzeichnis Literaturverzeichnis Literaturverzeichnis

In diesem Literaturverzeichnis sind sowohl die verwendeten Quellen als auch Literaturempfehlungen zusammengestellt. Bonsiepe, G.:, Interface, Design neu begreifen, Bollmann Verlag, Mannheim 1996 Breßler, F., Hübner und Rohlof: Was kostet Web-Design?, Birkhäuser Verlag, Basel 2003 Butter, 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 2008 Heinecke , A. M. : Mensch-Computer-Interaktion, Fachbuchverlag Leipzig, Leipzig 2004 Koppelmann, U.: Produktmarketing, Kohlhammer Verlag, Stuttgart, Berlin, Köln, Mainz 1987 Krug, 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, Chicago1980 Licklider, 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

325

Index Index Index

Symbole 3D-Button 210 7 +/- 2-Regel 160

A -Element 60 title-Attribut 60 Ablaufplanung 139 Abonnementendienst 111 Absatz 59 Accessibility 189 Accessibility-Test 306 Acid-Browsertest 34 -Element 60 xml:lang-Attribut 60 ActionScript 101 Active Server Pages. Siehe ASP -Element 59 titel-Attribut 214 Ajax 108, 109 Aktivierungszustände 207, 210, 272 Alternativnavigation 160 Analyse 136 Analysephase 143 Anführungszeichen typografische 249 Angebot 141 Angebotsbeispiel 142 Angebotskalkulation 141 Animierter Button 211 Ankerlink 165 Ankerlinkliste 164, 214 Anmutung 181 Antialiasing 47, 185 Arbeitsserver 172 ASP 103 Assetdesign 21, 244 Asynchronous JavaScript and XML. Siehe Ajax Atom-Feed 112 Attribut 57 Attributselektor 66, 115 Attributswert 57 Auflösung 129, 185, 259 absolut 259 relativ 259 Aufzählung 220, 248 Auktionsplattform 42 Ausschnitt 257 Außenabstand 73, 80 Auswahlliste 293 Auszeichnungssprache 34, 53

B background-Eigenschaft 78 Banding 119 Barrierefreie Informationstechnik-Verordnung. Siehe BITV Barrierefreiheit 189, 207

Baumstruktur 154 -Element 60 Benutzerinteraktion 293 Bereiche funktional unterschiedlich 195 Berners-Lee, Tim 27 Bildauflösung 259 Bildausrichtung 258 Bildausschnitt 257 Bildbutton 209, 212, 272 Bilddefinition 256 Bilder 60 im Web 253 Bildformat 118, 257 Bildfunktionen 254 Bildgröße 259 Bildheadline 251 Bildkacheln 268 Bildkonzept 198, 258 Bildlegende 200 Bildlink 213 Bildoptimierung 260 Bildplayer 275 Bildrandgestaltung 264 Bildschirmauflösung. Siehe Auflösung Bildsprache 193 Bildtypografie 185, 188, 207, 250 BITV 190, 191 Blickleitfunktion 255 Blickregistrierung 305 Blindtext 62 Blockelement 58 -Element 61, 249 Blocksatz 36, 117, 187 -Bereich 56 -Element 55, 93 border-Eigenschaft 73, 79 Boxmodell 73, 116 Braillezeile 285, 307 Brand-Color 183 Branding-Site 37 Breadcrumbtrail 155, 159, 160, 166, 208
-Element 59 Briefing 136 Briefing-Checkliste 137, 138 Brotkrümelpfad. Siehe Breadcrumbtrail Browser 27, 128 Browseranpassung 231 Browser-Fließtext simulieren 218 Browser-Hacks 87 Browsermodus Almost Standards Mode 55 Compatible Mode 55 Full Standards Mode 55 Quirks Mode 55 Standards Compliance Mode 55 Browser-Ranking 128 Browser-Reset nach Eric Meyer 233 Browsertest 301 Browsertools 126

327

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

C Captcha 294 Cascading Stylesheets. Siehe CSS CFML 103 CGI 102 Character Entities. Siehe Entities Checkbox 293 class-Attribut 66 clear-Eigenschaft 95, 96 CMS 45, 126 -Element 60 Code Review 234 Cold Fusion Markup Language. Siehe CFML Combobox 293 Common Gateway Interface. Siehe CGI confirmed decision 32 Content dynamischer 284 Contentbereich 170 Content-Management-System. Siehe CMS Content-Management-Systeme. Siehe CMC Content Syndication 112 Cookies 163, 294 Cookie-Test 302 Core fonts for the Web 36 Corporate Color 183, 203 Corporate Design 146, 182, 210 Cross Media Design 24, 182 Cross-Site Scripting. Siehe XSS CSS 24, 28, 34, 63 Deklaration 64 Deklarationsblock 64 Eigenschaften 64, 78 Farben 78 Positionierung 80 Regel 64 Schritt für Schritt 88 Selektoren 64 kombiniert 68 CSS 3 115, 117 CSS-Flag 231 CSS Level 3. Siehe CSS 3

D Datenaustausch asynchroner 108 Datenbank 103 -Element 61 Dead End 153 Dedicated Server 151 Dedicated Virtual Hosting 151 Denial of Service. Siehe DoS Design 52

328

Designbegriff 18 Detailentwurf 220 Diashow 275 Dimensionen 80 display-Eigenschaft 82 Dithering 119 -Container 90 -Element 62, 90, 229 -Element 60 DNS 149 DOCTYPE-Deklaration 54 Doctype Sniffing. Siehe Doctype Switching Doctype Switching 55 Document Object Model. Siehe DOM Document Type Definition. Siehe DTD Dokumentation 244, 246 Dokumententest 300 Dokumentrumpf. Siehe -Bereich DOM 70 Domain 147 Top-Level-Domain 148 Domain Name Server. Siehe DNS Doppelkodierung 199, 254 DoS 308 dots per inch. Siehe dpi dpi 185, 259 Drehbuch 246 Dropdown-Liste 293 Dropdown-Menü 48 Dropout-Menü 169 Druckstylesheet 285, 286, 287 Druckversion einer Webseite 285 DTD 55 -Element 61

E Ebenenstile 265 E-Learning 43 -Element 60 Endgerät mobiles 291 End-Tag 57 Engelbart, Douglas 27 Entität. Siehe Entities Entities 58, 118, 249 Entwicklerwerkzeuge 125 Ergonomie 180 Extended Hyper Text Markup Language. Siehe XHTML Extensible 3D. Siehe X3D Extensible Markup Language. Siehe XML Extensible Stylesheet Language. Siehe XSL Eye-Movement Recording. Siehe Blickregistrierung

F Farben am Bildschirm 188 CSS 74, 78

Index websicher 35, 147 Farbkodierung 202 Farb-Schlüsselwörter 75 favicon 215 Favorite-Icon. Siehe favicon Feasibility 228 Feed. Siehe Newsfeed Film 276 Flash 28, 46, 101, 122, 123, 276 float-Eigenschaft 85, 95 floating menu 169 Flow 81 Flowchart 152, 157 font-Eigenschaft 79 @font-face-Regel 117 Footer 170 Format 257 Formatentscheidung 122 Formular 221, 293 Frames 100 Freigabe Umsetzung 237 Freistellen 261 durch Hintergrundanpassung 262 durch Transparenz 263 Funktionslayout 159. Siehe Navigationslayout Funktionstest 301

G Gestaltgesetz der Gleichartigkeit 206 Gestaltung ästhetische und anmutungsbezogene 180 typosemantische 182 Geviertbreite 77 GIF 118, 215, 250 animiertes 120, 276 blindes 100 Transparenz 263 Gitterstruktur 155 Grafiken im Web 253 optimieren 285 grafischer Prototyp 180, 221 Graphics Interchange Format. Siehe GIF Graubild 197 Guided Tour 167, 168

H -Element 58 -Element 58 -Element 58 -Element 58 -Element 58 -Element 58 Halbtransparenz 264 Halo-Effekt 263 handleResponse()-Funktion 110 Hauptnavigation 160

INDEX Hauptsektionen 162 -Bereich 56 Style-Angaben 63 -Element 55, 56 Headerbild 272 Hemisphärentheorie 254 Hilfefunktion 167 Hintergrund 78 Hintergrundbild 78 singuläres 267 Hintergrundstruktur 271 HTML 27, 53 Framset 53 Strict 53 Transitional 53 Varianten 53 HTML-Editor 125 -Element 55 HTML-Prototyp 228, 237 Hyperlink 26, 34, 59 Hypertext 27, 34 Hypertext Markup Language. Siehe HTML

I ICO 215 Icon 215 Icon-Button 210 id-Attribut 66 ID-Selektor 66 -Element 60 Imagemaps 264 Image-Site 37 -Element 60, 173 alt-Attribut 60, 173 height-Attribut 60 src-Attribut 60 width-Attribut 60 !important 72 Impressum 160 Indizierung 119 Industrial Design 18 information chunk 160 Informationsdarstellung andere Medien 285 Informationsdesign 21 Informationsfunktion 254 Informationsphase 143 Informationsplattform 38 Informationszugang zielgruppenorientierter 163 inhärent 70 inherit 71 Inline-Element 58 Innenabstand 73, 80 Interaktion 293 Interaktionsdesign 21, 158, 195 Interaktionselement 160 Interface 200 Interfacedesign 19, 200 inverted pyramid style 246

329

Index

J Java 123 JavaScript 34, 103, 109 JavaScript Object Notation. Siehe JSON Java Server Pages. Siehe JSP Joint Photographic Experts Group. Siehe JPEG JPEG 120, 251 Artefakte 121 JSON 109 JSP 34, 102

K Kacheln ohne Übergang 269 Kachelstreifen 271 Kaskaden 70 Kind-Selektor 68 Klassenselektor 66 Klickmodell 228 Kombinierte Selektoren 68 Kommunikationsdesign 18 Konformitätsstufe 190 Kontrast 188 Konventionen externe 204 interne 204 Koppelmann, Udo 181 Kostenplanung 141 Krippendorff, Klaus 181 Kunden-Briefing 136, 137 Künstlersozialversicherung 141

L Laufweite 186 Launch 308 Layer 100 Layoutgrafik 173 Layoutraster 218 Layout-Styleguide 235 Layouttabellen 100 Leiterstruktur 154 Leitidee. Siehe Main Idea Lesegeschwindigkeit 23 Leserichtung 205 Lichtfarben 188 Licklider, J. C. R. 26 -Element 60 Lightbox 275 Linearstruktur 153 Link 59 -Element 59, 63 rel-Attribut 59, 215 rev-Attribut 59 Link-Icon 213 Links 27 Link-Test 301 Liste 60, 248

330

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

M Main Idea 136, 139 Man-in-the-Middle-Angriff 308 Marginalienspalte 170 Marginalnavigation 160 margin-collapse 74 margin-Eigenschaft 73, 80 Maßeinheiten absolut 76 Schlüsselwörter 77 Pixel 78 relativ 76 Materialsichtung 145 Matrixstruktur 155 Maus 27 Mediendesign 19 Mehrspaltigkeit 116 Memowirkung 199 Mengentext 197 -Element 295 description-Attribut 296 keyword-Attribut 295 Metanavigation 160, 163 Metapher 193, 194 Meta-Tag 295 Meyer, Eric 233 Mitmach-Medium 29 Monitor 129 Motiv 256 Mouseover 204, 272 Multimediafähigkeit 23 MySQL 104

N Nachbar-Selektoren 68 Nachfahren-Selektor 68 Namenskonventionen 172 Namensraum 56 Navigation dynamisch generiert 163 dynamisch generierte 163 persistent 162 seiteninterne 160 zielgruppenorientiert 163 Navigationsbalken horizontal 208 Navigationsbereich 170 Navigationsgrafik 207 Navigationsicon 220

Index Navigationskaskade 206 Navigationskonventionen 204 Navigationskonzept 159 Navigationskulisse 211 Navigationslayout 159, 168, 170, 195 Navigationsleiste 205 Navigationsmenü 206 vertikal 208 Navigationspfad 159, 286 Netzstruktur 156 Newsfeed 38, 111 Nielsen, Jakob 167, 184 Nutzerbindung 32 Nutzungsrechte 141

O -Element 60 Online-Lernmodul 43 Online-Shop 39 rechtliche Anforderungen 40 Online-Umfrage 144, 304 Oracle 104 O‘Reilly, Tim 113 Orientierung 201 OWL 115

P padding-Eigenschaft 73, 80 Papierprototyp 159, 171 PDF 124 -Element 59 Penetrationstest 308 Persistente Navigation 162 Pfadnavigation 160, 166, 202, 208 Pflege eines Webangebotes 310 Photoshop-Layout 217 PHP 34, 102, 104 Pipe-Zeichen 209 Pixel 78, 259 Pixeldichte 259 pixel per inch. Siehe ppi Pixelschrift 250 pixographen 16, 173, 176, 225, 241, 281, 298, 315, 339 Logo 178 Plattform 128 Platzhalterbild 217 Plugin 46, 123 Plugin-Test 302 PNG 28, 121, 215, 231, 250, 264 Polaritätenprofil 144 Pop-up-Menü 169 Portable Document Format. Siehe PDF Portable Network Graphics. Siehe PNG Portal 46 position-Eigenschaft 83, 84, 85 Positionierung 80 absolut 84 fixiert 85

INDEX relativ 83 schwebend 85, 95 Tipps und Tricks 87 PostgreSQL 104 ppi 185, 259 Präsentation HTML-Prototyp 238 Printdesign 19, 22 Printmedien 22 Printtypografie 186 Produktsemantik 181 Programmiersprache clientseitig 103 serverseitig 34, 101 Progressive Enhancement 116 Projektbeschreibung 139 Projektdokumentation 173 Projektformulierung 147 Projektorganisation 172 Projektplan 136, 139, 140 Prototyp-Styleguide 235 Pro-und-Contra-Argumentation 144 Pseudo-Selektoren 68 Pulldown-Menü 169

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

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

S Satzbreite 186 Satzregeln 188 Scalable Vector Graphics. Siehe SVG Schaltfläche 293 Schmuckrahmen 265 Schrifteinbettung 117 Schriftformatierung 79 Schriftglättung. Siehe Antialiasing Screendesign 19, 180, 193 Screenreader 307

331

Index Scribble 216 Scribble-Storyboard 246 Search Engine Optimization. Siehe SEO Security-Test 307 Seitenheader 169 Seitenkomposition 196 Seitentitel 159 Seitenunterteilung 195 Semantik 58, 60, 62, 115, 252 Semantisches Differenzial 144 Semantisches Web 114 sendRequest()-Funktion 109 SEO 294 Relevanz 295 Serendipity 164 Serifen 36 Servicenavigation 160 Servlet 102 Session 294 SGML 27 Shared Virtual Hosting 151 Shockwave Flash. Siehe Flash Sicherheitstest 307 Silbentrennung 117 Silverlight 101, 123 Site-Kennung 162 Sitemap 160, 165, 220 Sitestrukturmodelle 153 Skripte 285 -Element 62 Spezifität 72 SQL 103, 104 SQL-Injection 308 Standardablaufplan 24 Standard Generalized Markup Language. Siehe SGML Standardinhaltsseite 196 Stapelkamp, Torsten 201 Start-Tag 57 Style-Angaben 63 Stockfoto 253 Storyboard 244, 245, 246 -Element 60 Structured Query Language. Siehe SQL Strukturdesign 21, 152 Strukturdiagramm 152, 157 Strukturlayout 156 -Element 63 @import 64 Styleguide 147, 235, 244 Stylesheet Autoren-Stylesheet 72 Browser-Stylesheet 72 extern 63 für mobile Endgeräte 291 intern 63 Kommentar 64 organisieren 230 Schritt für Schritt 88 User-Stylesheet 72 Subnavigation 208 Suchformular 167 Suchfunktion 163, 167

332

Suchmaschinenoptimierung. Siehe SEO SVG 101, 122 Syndikation 112

T Tabelle 61, 100, 236 -Element 61 -Element 61 -Element 61 colspan-Attribut 61 rowspan-Attribut 61 Teaser 164, 165 Technologien alte vs. neue 100 Testphase 300 Text erstellen 246 gestalten 248 Textausrichtung 187 Textauszeichnung 60, 89 logisch 60 physische 60 Textbrowser 307 Textbutton 210 Texteingabefeld 293 Textlink 160, 204, 213 -Element 61 -Element 61 -Element 61 Toolbar 126, 128 Tooltips 212 Transparenz 120, 122 echte 121 -Element 61 Trennprogramme 36 Trennung von Inhalt und Design 52, 100 Typografie 185 im Web 35 Typosignal 249 Typselektor 65

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

V Validitätskontrolle 284 VBScript 103 Vererbung 70 Verhalten 52

Index Veröffentlichung 308 Verteilseite 196 Verzeichnis 165 Video 276 Virtual Reality Modeling Language. Siehe VRML Vorlesegerät 285 Vorplanung technische 147 Vorseitennavigation 161 VRML 124

INDEX XML 28, 101, 112, 114 root element 55 Wurzelelement 55 XML-Deklaration 54 XMLHttpRequest 108, 109 XSL 101 XSLT 101 XSL-Transformation. Siehe XSLT XSS 308

Z W W3C 28 Wartung eines Webangebotes 310 WCAG-Richtlinien 190 Web 2.0 112, 113, 115 Button 211 Web Content Accessibility Guidelines. Siehe WCAG-Richtlinien Webdesign 24 barrierefrei 36 Kompromisse 34 Web Design Gazette 15, 51, 53, 88, 169, 218, 235, 287, 306, 315, 339 Webhosting 149 Webhosting-Paket 151 Weblog 46 Web Ontology Language. Siehe OWL Webprojektmanagement 136 Webserver 27, 151 Website Bekanntmachung 309 dynamische 45 flashbasierte 46 statische 44 Websiteanalyse 144 Websitestrategien 37 Websiteuntergliederung 168 Webstandards 32 Webtypografie 35 Wert 64 Wiki-System 46 World Wide Web 26, 115 World Wide Web Consortium. Siehe W3C WYSIWYG-Editor 125

Zeichen guter Typografie 249 Zeilenabstand 186, 187, 197 Zeilenumbruch 59 Zielanker 59, 66 Zielgruppe Navigation 160 Zielgruppenanalyse 143 Zielgruppenorientierte Navigation 163 Zitat 61 Zugänglichkeit 189 Zugänglichkeitstest 306

X X3D 124 x-Höhe 77 XHTML 34, 53 Code 89 Container 62 Element 57 Grundgerüst 57 Kommentare 56 Schritt für Schritt 88 Sonderzeichen 58 Struktur 54, 62 Umstieg von HTML 53 XHTML-Quelltext 229

333

Quizlösungen

Lösungen aller Quizfragen Prüfen Sie, wie viele Quizfragen Sie richtig beantwortet haben. Sollte die abschließende Auswertung ergeben, dass Ihr Kenntnisstand lückenhaft ist, wird empfohlen, die relevanten Kapitel nachzuarbeiten. Quiz zu Kapitel 3 „Grundlagen des Webdesigns“ Quizfrage 3.7.1 Quizfrage 3.7.2 Quizfrage 3.7.3 Quizfrage 3.7.4 Quizfrage 3.7.5 Quizfrage 3.7.6 Quizfrage 3.7.7 Quizfrage 3.7.8

Lösung A Lösung B Lösung C, E Lösung A Lösung C Lösung A Lösung A Lösung B

Lernstoff nacharbeiten: Kap. 3.3.2 Lernstoff nacharbeiten: Kap. 3.3.1 Lernstoff nacharbeiten: Kap. 3.3.2 Lernstoff nacharbeiten: Kap. 3.3.2 Lernstoff nacharbeiten: Kap. 3.3.2 Lernstoff nacharbeiten: Kap. 3.4.3 Lernstoff nacharbeiten: Kap. 3.5.2 Lernstoff nacharbeiten: Kap. 3.5.3

Quiz zu Kapitel 4 „Technische Grundlagen“ Quizfrage 4.15.1 Quizfrage 4.15.2 Quizfrage 4.15.3 Quizfrage 4.15.4 Quizfrage 4.15.5 Quizfrage 4.15.6 Quizfrage 4.15.7 Quizfrage 4.15.8 Quizfrage 4.15.9 Quizfrage 4.15.10 Quizfrage 4.15.11 Quizfrage 4.15.12 Quizfrage 4.15.13 Quizfrage 4.15.14 Quizfrage 4.15.15 Quizfrage 4.15.16 Quizfrage 4.15.17

Lösung C Lösung A Lösung B Lösung A Lösung C Lösung C Lösung C Lösung A, F Lösung A Lösung D Lösung C Lösung B Lösung C Lösung A Lösung A 3, 4, 2, 1, 5 A-c, B-a, C-b

Lernstoff nacharbeiten: Kap. 4.3.1 Lernstoff nacharbeiten: Kap. 4.3.1 Lernstoff nacharbeiten: Kap. 4.3.1 Lernstoff nacharbeiten: Kap. 4.3.1 Lernstoff nacharbeiten: Kap. 4.3.1 Lernstoff nacharbeiten: Kap. 4.3.2 Lernstoff nacharbeiten: Kap. 4.3.2 Lernstoff nacharbeiten: Kap. 4.3.2 Lernstoff nacharbeiten: Kap. 4.3.5 Lernstoff nacharbeiten: Kap. 4.3.7 Lernstoff nacharbeiten: Kap. 4.4.2 Lernstoff nacharbeiten: Kap. 4.4.1 Lernstoff nacharbeiten: Kap. 4.4.1 Lernstoff nacharbeiten: Kap. 4.4.3 Lernstoff nacharbeiten: Kap. 4.4.3 Lernstoff nacharbeiten: Kap. 4.10.1 Lernstoff nacharbeiten: Kap. 4.10.6

Quiz zu Kapitel 5 „Siteplanung“ Quizfrage 5.10.1 Quizfrage 5.10.2 Quizfrage 5.10.3 Quizfrage 5.10.4 Quizfrage 5.10.5 Quizfrage 5.10.6 Quizfrage 5.10.7 Quizfrage 5.10.8 Quizfrage 5.10.9 Quizfrage 5.10.10 Quizfrage 5.10.11

Lösung B Lösung C Lösung C Lösung B Lösung C Lösung B Lösung A Lösung A Lösung B Lösung C Lösung B

Lernstoff nacharbeiten: Kap. 5.3.1 Lernstoff nacharbeiten: Kap. 5.4.1 Lernstoff nacharbeiten: Kap. 5.6.1 Lernstoff nacharbeiten: Kap. 5.6.1 Lernstoff nacharbeiten: Kap. 5.6.2 Lernstoff nacharbeiten: Kap. 5.7.1 Lernstoff nacharbeiten: Kap. 5.7 Lernstoff nacharbeiten: Kap. 5.7.2 Lernstoff nacharbeiten: Kap. 5.7.2 Lernstoff nacharbeiten: Kap. 5.7.5 Lernstoff nacharbeiten: Kap. 5.7.11

335

Quiz zu Kapitel 6 „Designentwurf“ Quizfrage 6.11.1 Quizfrage 6.11.2 Quizfrage 6.11.3 Quizfrage 6.11.4 Quizfrage 6.11.5 Quizfrage 6.11.6 Quizfrage 6.11.7 Quizfrage 6.11.8 Quizfrage 6.11.9 Quizfrage 6.11.10 Quizfrage 6.11.11 Quizfrage 6.11.12 Quizfrage 6.11.13 Quizfrage 6.11.14 Quizfrage 6.11.15

Lösung C Lösung C Lösung C Lösung A Lösung C Lösung B Lösung C Lösung A Lösung B Lösung B Lösung C Lösung B Lösung A Lösung B Lösung B

Lernstoff nacharbeiten: Kap. 6.3 Lernstoff nacharbeiten: Kap. 6.4.1 Lernstoff nacharbeiten: Kap. 6.4.1 Lernstoff nacharbeiten: Kap. 6.4.2 Lernstoff nacharbeiten: Kap. 6.5 Lernstoff nacharbeiten: Kap. 6.6.1 Lernstoff nacharbeiten: Kap. 6.7.1 Lernstoff nacharbeiten: Kap. 6.7.5 Lernstoff nacharbeiten: Kap. 6.7.6 Lernstoff nacharbeiten: Kap. 6.7.8 Lernstoff nacharbeiten: Kap. 6.7.10 Lernstoff nacharbeiten: Kap. 6.8.2 Lernstoff nacharbeiten: Kap. 6.8.2 Lernstoff nacharbeiten: Kap. 6.8.3 Lernstoff nacharbeiten: Kap. 6.9

Quiz zu Kapitel 7 „Prototyping“ Quizfrage 7.7.1 Quizfrage 7.7.2 Quizfrage 7.7.3 Quizfrage 7.7.4 Quizfrage 7.7.5 Quizfrage 7.7.6 Quizfrage 7.7.7 Quizfrage 7.7.8 Quizfrage 7.7.9

Lösung C Lösung C, D Lösung E Lösung A Lösung A Lösung B Lösung C Lösung A Lösung B

Lernstoff nacharbeiten: Kap. 7.3 Lernstoff nacharbeiten: Kap. 7.3 Lernstoff nacharbeiten: Kap. 7.3 Lernstoff nacharbeiten: Kap. 7.3 Lernstoff nacharbeiten: Kap. 7.3.6 Lernstoff nacharbeiten: Kap. 7.5 Lernstoff nacharbeiten: Kap. 7.4 Lernstoff nacharbeiten: Kap. 7.4 Lernstoff nacharbeiten: Kap. 7.5

Quiz zu Kapitel 8 „Assetdesign“ Quizfrage 8.9.1 Quizfrage 8.9.2 Quizfrage 8.9.3 Quizfrage 8.9.4 Quizfrage 8.9.5 Quizfrage 8.9.6 Quizfrage 8.9.7 Quizfrage 8.9.8 Quizfrage 8.9.9 Quizfrage 8.9.10 Quizfrage 8.9.11 Quizfrage 8.9.12 Quizfrage 8.9.13 Quizfrage 8.9.14 Quizfrage 8.9.15 Quizfrage 8.9.16 Quizfrage 8.9.17

336

Lösung B Lösung A Lösung B Lösung C Lösung A Lösung A Lösung B Lösung A Lösung C Lösung A Lösung D Lösung B Lösung B Lösung A Lösung B Lösung C Lösung C

Lernstoff nacharbeiten: Kap. 8.3 Lernstoff nacharbeiten: Kap. 8.4.2 Lernstoff nacharbeiten: Kap. 8.5 Lernstoff nacharbeiten: Kap. 8.5 Lernstoff nacharbeiten: Kap. 8.6 Lernstoff nacharbeiten: Kap. 8.6.1 Lernstoff nacharbeiten: Kap. 8.6.1 Lernstoff nacharbeiten: Kap. 8.6.1 Lernstoff nacharbeiten: Kap. 8.6.4 Lernstoff nacharbeiten: Kap. 8.6.4 Lernstoff nacharbeiten: Kap. 8.6.4 Lernstoff nacharbeiten: Kap. 8.6.4 Lernstoff nacharbeiten: Kap. 8.6.5 Lernstoff nacharbeiten: Kap. 8.6.5 Lernstoff nacharbeiten: Kap. 8.6.6 Lernstoff nacharbeiten: Kap. 8.6.7 Lernstoff nacharbeiten: Kap. 8.7.2

Quiz zu Kapitel 9 „Assetdesign“ Quizfrage 9.8.1 Quizfrage 9.8.2 Quizfrage 9.8.3 Quizfrage 9.8.4 Quizfrage 9.8.5 Quizfrage 9.8.6 Quizfrage 9.8.7

Lösung A Lösung B Lösung C Lösung B Lösung B Lösung B Lösung A

Lernstoff nacharbeiten: Kap. 9.5.1 Lernstoff nacharbeiten: Kap. 9.5.2 Lernstoff nacharbeiten: Kap. 9.4.1 Lernstoff nacharbeiten: Kap. 9.4.1 Lernstoff nacharbeiten: Kap. 9.4.1 Lernstoff nacharbeiten: Kap. 9.4.1 Lernstoff nacharbeiten: Kap. 9.6.2

Quiz zu Kapitel 10 „Tests und Launch“ Quizfrage 10.9.1 Quizfrage 10.9.2 Quizfrage 10.9.3 Quizfrage 10.9.4

Lösung C Lösung A Lösung A Lösung C

Lernstoff nacharbeiten: Kap. 10.3.1 Lernstoff nacharbeiten: Kap. 10.3.2 Lernstoff nacharbeiten: Kap. 10.3.3 Lernstoff nacharbeiten: Kap. 10.3.4

337

Online-Material Online-Material Online-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 ChoiceQuizfragen mit direkter Online-Auswertung. Bei nicht oder falsch beantworteten Fragen erhalten Sie Hinweise auf die zugehörigen Inhaltskapitel zur Nacharbeit.

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

Beispiel einer Quizfrage im elektronischen Quiz

Beispiel einer Quizauswertung im elektronischen Quiz

Ü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.

339

Die Autoren Die Autoren Die Autoren

Professor Dr. Norbert Hammer ist seit 1997 Professor für Mediendesign am Fachbereich Informatik der Fachhochschule Gelsenkirchen. Seine Arbeitsschwerpunkte umfassen Webdesign, Interfacedesign und E-Learning-Anwendungen. Er studierte Design an der Folkwangschule für Gestaltung/ Universitä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 OnlineLernmodule für das Fach Mediendesign für die virtuelle Fachhochschule (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 Fachhochschule Gelsenkirchen war sie unter anderem als freiberufliche Webdesignerin tätig und leitete das Java-Tutorium für die Studentinnen 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.

341