![Page 1: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/1.jpg)
Screen-Design
Definition – Organisation – Typographie - Bildfunktion
![Page 2: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/2.jpg)
Screen-Design-Definition
Gestaltung von Bildschirminhalten
• Screen-Design verstehen wir nicht nur als ästhetische „Verschönerung“ multimedialer Produkte, sondern v. a. als Interface-Design.
• Interface: Schnittstelle zwischen Werkzeug und Mensch; Interface hilft, das Werkzeug zu bedienen.
![Page 3: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/3.jpg)
Benutzer
Aufgabe Werkzeug
Interface
Gui Bonsiepe Ontologisches Designdiagramm
![Page 4: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/4.jpg)
Elemente des Screendesign
• Orientierungselemente• Navigationselemente• Interaktionselemente• Emotionselemente• Inhaltselemente
![Page 5: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/5.jpg)
Hypertext = Dokumente und ihre Verknüpfungen
In einem Multimediasystem werden Informationen in kleinen Einheiten präsentiert, die miteinander verknüpft sind. Wir sprechen von
• Knoten (autonome, abgeschlossene Einheit)• Kante (Verbindung von zwei
Informationseinheiten )• Anker (Anfang- und Endpunkt eines Hyperlinks)
![Page 6: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/6.jpg)
Geschichte des Hypertextes
Im späten 18. Jh. werden Informationen zum ersten Mal modularisiert und aufeinander bezogen:
• 1751 Encyclopédie, ou dictionnaire raisonnée des sciences, des arts et des métiers – Herausgeber Denis Diderot und Jean Le Rond d‘Alembert
![Page 7: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/7.jpg)
Geschichte des Hypertextes
• 1945 MEMEX – Vannevar Bush: Maschine speichert Informationen in Form von Notizen ab. Zugriff erfolgt assoziativ.
• 1962 NLS (oN-Line System) – Douglas Engelbart = erster Hypertext
• 1965 Xanadu – Ted Nelson: verwendet erstmals Begriffe wie „Hypertext“, „Hypermedia“, soll weltweites Netzwerk von Texten, Bildern und Grafiken sein. Nie in ursprünglich gedachter Form realisiert.
![Page 8: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/8.jpg)
Geschichte des Hypertextes
• 1978 Aspen Movie Map – Architecture Machine Group: erste hypermediale Videodisk.
• 1983 Knowledge Management Systems (KMS) – hierarchische Struktur
• 1983 Hyperties – Ben Shneiderman, sehr einfach gestaltet, leicht bedienbar
![Page 9: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/9.jpg)
Geschichte des Hypertextes
• 1987 HyperCard – Bill Atkinson: ausfüllen virtueller Karten, die gestapelt werden
• 1987 Association für Computing Machinery (ACM) veranstaltet erste Konferenz zum Thema Hypertext
• 1989 Worl Wide Web (www) – Tim Berners-Lee wollte Kommunikation unter CERN-Wissenschaftlern fördern.
![Page 10: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/10.jpg)
Benutzerorientiertes Design
„If you don‘t know who you‘re talking to, how the heck do you know what to say?“ Nick Usborne
• Für wen ist das Produkt?• Wozu verwendet der Benutzer das
Multimediaprodukt?• Wie will er es nutzen?
![Page 11: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/11.jpg)
Benutzerorientiertes Design
Je genauer und konkreter die Zielgruppe berücksichtigt wird, umso erfolgreicher wird sie erreicht.
![Page 12: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/12.jpg)
Arten von Multimediaprodukten
• Multimediale Informationssysteme
• Kommunikation• Werbung• Verkauf
• Virtuelle Gemeinschaft
• Multimediales Lernen• Erlebnis (virtuelle
Realität)• Spiele
![Page 13: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/13.jpg)
Aufbereitung von Informationen
• Lt. Studien ist die Lesegeschwindigkeit am Monitor um 25 – 30% langsamer.
• Der Leser liest ungenauer und unkonzentrierter.• Monitorgerechte Optimierung des Textes:
weniger TextTypographieInhalt
![Page 14: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/14.jpg)
Bildschirm-Typografie
• Schrifttypen mit einfachen, klaren Formen sind besonders geeignet:
• Microsoft: Verdana, Georgia• Adobe: Myriad, Minion
• linksbündig statt Blocksatz• Zeilenabstand größer als auf dem Papier:
eineinhalb- bis zweizeilig
![Page 15: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/15.jpg)
Bildschirm-Typografie• Zwischen den Absätzen etwas mehr Platz
lassen – Absätze werden als „optische Einheiten“ (visual chunks) wahrgenommen
• „Luft“ (leere Flächen) neben dem Text – gewinnt mehr Aufmerksamkeit und wird leichter lesbar
• Hintergrundbilder erschweren das Lesen, wenn der Kontrast zwischen Bild und Text zu gering ist.
• Lesbarkeit wird durch hohen Kontrast erleichtert; geringe Kontraste wirken angenehm
![Page 16: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/16.jpg)
Merkmale scannbarer Texte
• wenig Text• pro Absatz eine Idee• aussagekräftige Überschriften • Inverted Pyramide Style verwenden• Schlüsselwörter hervorheben • optisch strukturieren
![Page 17: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/17.jpg)
Merkmale scannbarer Texte
• Listen und Tabellen verwenden• kurze Sätze • klare, verständliche, knappe Sprache• Bilder, Videos, Animationen und Töne
integrieren• Text für Monitor und Text für Druck
trennen
![Page 18: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/18.jpg)
Bilder als Informationsträger
Bilder werden schneller wahrgenommen als Texte: sie „springen“ sofort ins Auge.
• In 1/100 Sekunde erkennen wir das Thema eines klaren Bildes.
• Die Gedächtniskapazität für Bilder ist größer als jene für Texte.
• Bilder erhöhen die Gedächtnisleistung.• Bilder wirken unbewusst auf unser Verhalten.
![Page 19: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/19.jpg)
Funktionen von Bildern
1. Veranschaulichung: Bild hat inhaltlichen Bezug
2. Strukturierung: Bilder strukturieren ein Thema bzw. dienen zur Orientierung oder als Navigationselemente
3. Emotion: ästhetisch auf Kontext abgestimmte Bilder wirken motivierend
![Page 20: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/20.jpg)
Bildwirkung
• Nah rangehen• Reduktion auf das Wesentliche• Kombination von Vertrautem mit
Unbekanntem• So wenig Farbtöne wie möglich gezielt,
konzentriert und zueinander passend einsetzen.
![Page 21: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/21.jpg)
Bildwirkung
• Bilder verwenden, die Emotionen auslösen (Menschen, Situationen)
• Räumliche Tiefe: mit Vorder-, Mittel- und Hintergrund arbeiten.
• Hauptmotiv bewusst platzieren um Spannung zu erzeugen.
![Page 22: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/22.jpg)
Iconsikonos = griechisch „Bild“
„Icons allein erleichtern noch nicht den Einsatz eines Computers. Schlecht entworfene oder angewandte Icons können genau das Gegenteil bewirken. …Es sind nicht die Icons, die den Einsatz eines Produktes erleichtern, sondern eine gute Gestaltung.“ William Horton
• 2 Arten:– Icons, die Objekte repräsentieren– Icons, die Funktionen repräsentieren
![Page 23: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/23.jpg)
Icons
• effektiv ist der Einsatz von Icons mit Text
• Zu viele Icons erschweren die Nutzung
• Gruppierung erleichtert die visuelle Übersicht einer Menge an Icons
![Page 24: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/24.jpg)
Icons
• Kontext beeinflusst die Interpretation durch den Nutzer
• Icon soll auf das Wesentliche reduziert und rasch erkennbar sein
• wenig Farben und klare Formen
• Icons haben oft unterschiedliche kulturelle Bedeutungen
![Page 25: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/25.jpg)
Icons
• Vorteile– geringer Platzbedarf– wenn bekannt, rasch
erkennbar– sprach- (nicht kultur-)
unabhängig– verständlich für Kinder
und Analphabeten– einprägsam und somit
leicht erinnerbar
• Darstellungsfehler– zu viele Icons am
Bildschirm– zu geringe
Unterschiede– fotorealistische
Darstellung– nicht zu Gruppen
zusammengefasst
![Page 26: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/26.jpg)
Ideogrammeideo = griechisch „Idee“
• Zeichen, die für einen Begriff stehen
• abstrakt• weder bildliche
Ähnlichkeit noch realer Bezug zwischen Ideogramm und seiner Bedeutung
• Interpretation wird erlernt
Ziege
![Page 27: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/27.jpg)
PiktogrammLateinisch: „pictus“ = Bild, „gramm“ = Geschriebenes
• stilisiertes Abbild eines realen Gegenstandes oder einer Tätigkeit
![Page 28: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/28.jpg)
Symbol
• repräsentiert eine Sache oder einen Inhalt
![Page 29: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/29.jpg)
Video, Animation und Ton
Video• Möglichkeit der Steuerung durch den
Benutzer• Zeitabhängige Medien kurz halten (bis 30
Sekunden o. k., sonst mehrere kurze Videosequenzen)
• Einführungsvideos „überspringbar“ halten
![Page 30: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/30.jpg)
Video, Animation und Ton
Animation: Bewegung zieht Aufmerksamkeit auf sich
• nur ein blinkendes Objekt am Bildschirm• Dauer zwischen Verschwinden und
Wiedererscheinen höchstens eine halbe Sekunde
• Blinkverhältnis: Bilder 1:1, Text ca. 1/3 : 2/3• nur einzelne Wörter blinkend darstellen
![Page 31: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/31.jpg)
Video, Animation und Ton
Ton• Benutzer soll steuern und wählen können• Ton soll ergänzen nicht konkurrieren
![Page 32: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/32.jpg)
Flash
• Mit dem Flash-Format von Macromedia können Ton, interaktive Elemente, Videos und Animationen miteinander kombiniert werden
• Flash MX: ergonomische Standards
![Page 33: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/33.jpg)
Flash
• Vorteil:– Verdeutlicht komplexe
Zusammenhänge– Hervorhebung
angewählter Navigationselemente
– Darstellung übersichtlicher Pulldown-Menüs
• Nachteil– Längere Ladezeiten– Installation eines Plug-
ins nötig– Viele Nutzer haben
langsamen Zugriff aufs Web
![Page 34: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/34.jpg)
Quellen• Literatur
– Thissen, Frank: Kompendium Screen-Design. Effektiv informieren und kommunizieren mit Multimedia, 3. Auflage, Berlin 2003
– Zitat Folie 10 s. o. S. 32– Zitat Folie 22 s. o. S. 124
• Links– http://www.theochem.uni-duisburg.de/DC/
material/virtklas/chemie/flash.htm# in der Fassung vom 11.8.2006
![Page 35: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/35.jpg)
Quellen• Links
– http://www.kiwilogic.de/ in der Fassung vom 10.8.2006 http://www.aol-verlag.de/ in der Fassung vom 10.8.2006
– http://www.bauhaus.de/ in der Fassung vom 10.8.2006
– http://www.bauhaus.de/bauhausarchiv/index.htm in der Fassung vom 10.8.2006
![Page 36: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/36.jpg)
Quellen• Links
– http://www.artemide.com/ in der Fassung vom 10.8.2006 http://www.ilfordphoto.com/home.asp in der Fassung vom 10.8.2006
– http://www.ftd.de/ in der Fassung vom 10.8.2006
– http://www.useit.com/alertbox/9710a.html in der Fassung vom 10.8.2006
![Page 37: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/37.jpg)
Quellen• Links
– http://www.shiseido.co.jp/e/story/html/sto30100.htm in der Fassung vom 10.8.2006 http://www.spiegel.de/unispiegel/wunderbar/0,1518,421823,00.html in der Fassung vom 10.8.2006
– http://www.spiegel.de/unispiegel/wunderbar/0,1518,druck-421823,00.html in der Fassung vom 10.8.2006
![Page 38: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/38.jpg)
Quellen• Links
– http://www.world-direct.at/meraner/ in der Fassung vom 10.8.2006
– http://www.uk.thebodyshop.com/web/tbsuk/index.jsp in der Fassung vom 10.8.2006
– http://www.babyservice.de/alete in der Fassung vom 10.8.2006
![Page 39: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/39.jpg)
![Page 40: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/40.jpg)
![Page 41: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/41.jpg)
![Page 42: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/42.jpg)
![Page 43: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/43.jpg)
![Page 44: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/44.jpg)
![Page 45: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/45.jpg)
![Page 46: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/46.jpg)
![Page 47: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/47.jpg)
![Page 48: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/48.jpg)
![Page 49: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/49.jpg)
![Page 50: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/50.jpg)
![Page 51: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/51.jpg)
![Page 52: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/52.jpg)
![Page 53: Screen-Design Definition – Organisation – Typographie - Bildfunktion](https://reader034.vdokument.com/reader034/viewer/2022042507/570491c91a28ab14218dcfcd/html5/thumbnails/53.jpg)