Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Screen-Design Definition – Organisation – Typographie - Bildfunktion.

Ähnliche Präsentationen


Präsentation zum Thema: "Screen-Design Definition – Organisation – Typographie - Bildfunktion."—  Präsentation transkript:

1 Screen-Design Definition – Organisation – Typographie - Bildfunktion

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

3 Benutzer AufgabeWerkzeug Interface Gui Bonsiepe Ontologisches Designdiagramm

4 ElementeElemente des Screendesign Orientierungselemente Navigationselemente Interaktionselemente Emotionselemente Inhaltselemente

5 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)

6 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

7 Geschichte des Hypertextes 1945 MEMEX – Vannevar Bush: Maschine speichert Informationen in Form von Notizen ab. Zugriff erfolgt assoziativ 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.

8 Geschichte des Hypertextes 1978 Aspen Movie Map – Architecture Machine Group: erste hypermediale Videodisk Knowledge Management Systems (KMS) – hierarchische Struktur 1983 Hyperties – Ben Shneiderman, sehr einfach gestaltet, leicht bedienbar

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

10 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?

11 Benutzerorientiertes Design Je genauer und konkreter die Zielgruppe berücksichtigt wird, umso erfolgreicher wird sie erreicht.Zielgruppe

12 Arten von Multimediaprodukten Multimediale Informationssysteme Kommunikation Werbung Verkauf Virtuelle Gemeinschaft Multimediales Lernen Erlebnis (virtuelle Realität) Spiele

13 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 Text  Typographie  Inhalt

14 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

15 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

16 Merkmale scannbarer Texte wenig TextText pro Absatz eine IdeeAbsatz aussagekräftige Überschriften Inverted Pyramide Style verwendenInverted Pyramide Schlüsselwörter hervorhebenSchlüsselwörter optisch strukturieren

17 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 trennenMonitor

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

19 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

20 Bildwirkung Nah rangehen Reduktion auf das WesentlicheReduktion Kombination von Vertrautem mit Unbekanntem So wenig Farbtöne wie möglich gezielt, konzentriert und zueinander passend einsetzen.wenig Farbtöne

21 Bildwirkung Bilder verwenden, die Emotionen auslösen (Menschen, Situationen)Emotionen Räumliche Tiefe: mit Vorder-, Mittel- und Hintergrund arbeiten. Hauptmotiv bewusst platzieren um Spannung zu erzeugen.

22 Icons ikonos = 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

23 Icons effektiv ist der Einsatz von Icons mit Text Zu viele Icons erschweren die Nutzung Gruppierung erleichtert die visuelle Übersicht einer Menge an Icons

24 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

25 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

26 Ideogramme ideo = 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

27 Piktogramm Lateinisch: „pictus“ = Bild, „gramm“ = Geschriebenes stilisiertes Abbild eines realen Gegenstandes oder einer Tätigkeit

28 Symbol repräsentiert eine Sache oder einen Inhalt

29 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

30 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

31 Video, Animation und Ton Ton Benutzer soll steuern und wählen können Ton soll ergänzen nicht konkurrieren

32 Flash Mit dem Flash-Format von Macromedia können Ton, interaktive Elemente, Videos und Animationen miteinander kombiniert werden Flash MX: ergonomische Standards

33 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

34 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 http://www.theochem.uni- duisburg.de/DC/material/virtklas/chemie/flash. htm#

35 Quellen Links –http://www.kiwilogic.de/ in der Fassung vom in der Fassung vom http://www.kiwilogic.de/http://www.aol-verlag.de/ –http://www.bauhaus.de/ in der Fassung vom http://www.bauhaus.de/ –http://www.bauhaus.de/bauhausarchiv/index.h tm in der Fassung vom http://www.bauhaus.de/bauhausarchiv/index.h tm

36 Quellen Links –http://www.artemide.com/ in der Fassung vom in der Fassung vom http://www.artemide.com/ –http://www.ftd.de/ in der Fassung vom http://www.ftd.de/ –http://www.useit.com/alertbox/9710a.html in der Fassung vom http://www.useit.com/alertbox/9710a.html

37 Quellen Links –http://www.shiseido.co.jp/e/story/html/sto htm in der Fassung vom ,421823,00.html in der Fassung vom http://www.shiseido.co.jp/e/story/html/sto htm 1518,421823,00.html –http://www.spiegel.de/unispiegel/wunderbar/0, 1518,druck ,00.html in der Fassung vom http://www.spiegel.de/unispiegel/wunderbar/0, 1518,druck ,00.html

38 Quellen Links –http://www.world-direct.at/meraner/ in der Fassung vom http://www.world-direct.at/meraner/ –http://www.uk.thebodyshop.com/web/tbsuk/in dex.jsp in der Fassung vom http://www.uk.thebodyshop.com/web/tbsuk/in dex.jsp –http://www.babyservice.de/alete in der Fassung vom http://www.babyservice.de/alete

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53


Herunterladen ppt "Screen-Design Definition – Organisation – Typographie - Bildfunktion."

Ähnliche Präsentationen


Google-Anzeigen