Multimedia-Systems: Design - Department Of Computer Science

http://www.kom.e-technik.tu-darmstadt.de http://www.ipsi.gmd.de © Ralf Steinmetz

Multimedia-Systems: Design Prof. Dr.-Ing. Ralf Steinmetz Dr. L.Wolf, Dr. S.Fischer TU Darmstadt - Darmstadt University of Technology, Dept. of Electrical Engineering and Information Technology, Dept. of Computer Science KOM - Industrial Process and System Communications, Tel.+49 6151 166151, Merckstr. 25, D-64283 Darmstadt, Germany, [email protected] Fax. +49 6151 166152 GMD - German National Research Center for Information Technology IPSI - Integrated Publication and Information Systems Institute, Tel.+49 6151 869869 Dolivostr. 15, D-64293 Darmstadt, Germany, [email protected] Fax. +49 6151 869870

D-design.fm 1 28.February.00

Usage Services

Content Processing

Basics D-design.fm 2 28.February.00

Applications Learning & Teaching

Systems


Scope

Documents

Design

Security

Opt. Memories

Group SynchroCommuninization cations

...

Databases Media-Server

User Interfaces

Programming

Operating Systems

Communications

Quality of Service

Networks

Compression Computer Architectures

Image & Graphics

Animation

Video

Audio


Contents 1. Grundlegende Eigenschaften 2. Visualisierungen Gegenständliche Visualisierungen Abstrakte Visualisierungen (Diagramme) Herstellung von Visualisierungen Richtige und falsche Visualisierungen 3. Zeichen: Logos, Icons, Piktogramme 4. Illustrationen 5. Typographie 5.1 Mikrotypographische Fehler 5.2 Makrotypographische (Layout) Fehler 6. Ästhetik 7. Gestaltungsprozeß



1. Grundlegende Eigenschaften Design betrachtet primär • visuelle Kommunikation • Entwicklung der Alphabete aus der Zeichensprache • schriftliche Kommunikation (inkl. typographische Gestaltung) Hier • Typographie • Layout • Herstellung von Bildern Anmerkung • Wissen über Grundprinzipien (was ist gut, warum) • bedeutet nicht, daß dies selber unmittelbar gestaltet werden kann



Klassifikation “abstrakt - konkret” Abstrakte Darstellung • wesentliche Eigenschaften des Objekts werden klar herausgearbeitet und auf eine größere Menge von Objekten verallgemeinert • sieht von "zufälligen" Details eines Objektes ab • Bsp: Darstellung von Emotionen Konkrete, gegenständliche Darstellung • basiert auf Projektion eines räumlichen Sachverhaltes • muß nicht naturalistisch sein • eigentlich wichtig ist, ob der Betrachter sie als konkrete akzeptiert • Bsp: Voxelman Anmerkung • Abstrakt/konkret keine absolut gültige Eigenschaft, sondern relativ, im Vergleich mit anderen Darstellungen



Klassifikation: “räumliche und zeitliche Dimension” räumlich • 2-dimensional • 3-dimensional zeitlich (4 te Dimension) • statisch • bewegt wobei u.a. folgendes zu beachten ist: • Bewegungszustand • Blickwinkel • Abstraktion



Klassifikation “Direktheit der Darstellung” Indirekte (metaphorische) Darstellung • Darstellung eines meist konkreten Gegenstandes ist nicht das eigentliche kommunikative Ziel • vielmehr: Information über einen anderen, meist abstrakten Gegenstand zu transportieren • d.h. beide Gegenstände müssen einige relevante Eigenschaften gemeinsam haben Beispiel für indirekt: • aus einem Vortrag über die “Entwicklung des Gebietes Hypertext” • Boot • das eine glatte Wasseroberfläche durchschneidet • Metapher für ungewisse, vielversprechende Zukunft • Metapher für Suche nach dem zukünftigen Standort der Disziplin



Klassifikation: “Funktional” Obwohl die vorgestellten Klassifikationskriterien relevant für den Gebrauch von Bildern und die Bedeutung der Gestaltung in Multimediaprodukten sind, (und in den weiteren Ausführungen wiederholt auftauchen werden) werden wir hier unterscheiden: Darstellung nach ihrer Funktion • Visualisierungen • Darstellung eines Sachverhalts • Bsp: Explosionszeichnung eines Fahrzeugs, Gebäudeplan • Zeichen • Gegenstand wird nicht erklärt, sondern lediglich identifiziert • Bsp: Logos, Icons, Piktogramme für “Radioaktivität” • Illustrationen • mehr als reine Darstellung, Analogie zu einem anderen Gebiet, kann “einen ironischen Kommentar abgeben”, oft subjektiv • Bsp: Bild für Tagung zu Höchstleistungskommunikation mit Formel-1 Rennwagen auf einer Rennstrecke im Universum



2. Visualisierungen Eigenschaften (der Visualisierungen, auch als Infografiken bezeichnet) • dienen der Abbildung eines Sachverhalts • Vielfalt von Informationen in eine Form gebracht • so daß einem Betrachter entsprechende Interpretationen, Such-, und Vergleichsoperationen wesentlich erleichtert werden Anforderungen • Relationen zwischen grafischen Objekten entsprechen (=) Relationen zwischen den abzubildenden Gegenständen • d.h. beide haben gleiche / ähnliche grundlegende Eigenschaften • Beziehungen zwischen Werten ausgedrückt durch • neue Symbole, Zeichen, Attribute • aber: • Mit immer neuen Definitionen entfernt sich die Darstellung jedoch immer weiter von einer Visualisierung “Deren intuitive, unmittelbare Verständlichkeit begründet sich in der Tatsache, daß die Information mit Hilfe weniger, im Gegensatz zur Sprache weder arbiträrer noch diskreter Vereinbarungen kommuniziert wird”



Visualisierungen: Kritische Aspekte grafische Aussagen • zu relativieren • miteinander in Beziehung zu setzen oft notwendig • Einführung neuer grafischer Vokabulare (Bedeutungsvereinbarungen) Beispiel • ausgefüllte Rechtecke im entsprechenden Teilgebiet können z. B. für die Minimalkonzentration eines Schadstoffs stehen (Farbsättigung = Menge) • Vergleich • Farbsättigung gelb (Schadstoff 1) und • rot (Schadstoff 2)



Gegenständliche Visualisierungen Eigenschaften • Projektion eines räumlichen Sachverhalts • oft schematisch • oft abstrakte Daten (wie Temperaturverteilung) enthalten Beispiele: • hier: Darstellung des Workflows und der Vernetzung innerhalb eines Unternehmens; den Hintergrund bildet ein Plan des Firmengebäudes • Lage der Walzen in einem Kopiergerät • relative Position, Bewegung der Beteiligten an einem Verkehrsunfall • Landkarten, Stadtplan U-Bahnkarte, Gebäude • Querschnitt- und Explosionszeichnungen



Abstrakte Visualisierungen (Diagramme) Eigenschaften • stellen rein abstrakte relationale Daten dar • enthalten keine geometrische (von Natur aus graphische) Information • d.h. „geometrische“ Verteilung muß individuell “gefunden” werden • Bekannte Formen • Balken, Torten, Netzwerk- oder Liniendiagramme • auf Koordinatensystemen beruhende Darstellungen Beispiel • Verwendung von Diagrammen als Navigationsmittel in einem multimedialen Kunstlexikon “Allgemeiner gesprochen kommunizieren Diagramme Sachverhalte mit Hilfe von grafischen Ausdrucksmitteln wie Farbe, Form, Größe, relativer Position der grafischen Objekte, Verbindungen zwischen ihnen etc.”

Anmerkungen • seltener Bewegtbilder eingesetzt • häufig sind die Darstellungen interaktiv D-design.fm 12 28.February.00


Herstellung von Visualisierungen Eigenschaften • oft aus dem Gebiet “Scientific Visualisation” • große Datenmenge • sehr komplexe Zusamenhänge Automatisierung • es kann z.B. automatisch in eine für eine bestimmte Kombination von Datentypen geeignete Visualisierungsform "eingefüllt" werden • interessant bei sich ständig ändernden konkreten Daten Beispiel für eine dynamische Visualisierung • hier quantitative Informationen in Balkendiagramme umgesetzt • Fischer Weltalmanach 99



Richtige und falsche Visualisierungen: Beispiel Inhalt • „was man unter (et)was“ versteht • als • Teilgebiet • Teilbereich • Teildisziplin Beispiel 1:

Beispiel 2: Applied Arts Architecture

Product Design

Building Design

Product Design


Architecture

Urban Planning

Interior Design

Textile Design Furniture Design

Applied Arts

Textile DesignFurniture Design

BuildingUrban Design Planning Interior Design


Richtige und falsche Visualisierungen eher subjektiv, wenn Visualisierung ihre Aufgabe nicht erfüllt • regelrecht falsch ("nicht expressiv") • “häßlich” und “wenig einprägsam” Beispiel „was man unter was“ als Teilgebiet, -bereich, -disziplin versteht Applied eher richtig Applied Arts Arts

Architecture Product Design

Building Design

Product Design

Architecture

Urban Planning

Interior Design

Textile Design Furniture Design

• “Interior Design” erscheint als

Textile DesignFurniture Design

eher falsch

BuildingUrban Design Planning Interior Design

• konsistente Richtung der Pfeile Oberbegriff von “Furniture Design” (von oben nach unten) nicht • die implizit zu visualisierende eingehalten „Transitivität“ bezüglich der • eine nicht (real) vorhandene Beziehungen zwischen den Knoten Symmetrie erzwungen ist richtig visualisiert D-design.fm 15 28.February.00


Richtige und falsche Visualisierungen (2) Fehler durch Interferenzen • Interferenz: rein formal-grafischer Vergleich von Größen, Längen oder Farben • vor allem bei Diagrammen Beispiel • Darstellungen, in denen das Hinzufügen von Perspektive oder Volumen die Größenwahrnehmung der grafischen Objekte beeinflußt • damit fehlerhafte Assoziationen suggeriert • größer, wichtiger, mehr, obwohl dies nicht stimmt



3. Zeichen: Logos, Icons, Piktogramme Zeichen (Logos, Icons und Piktogramme) • sollen Gegenstand identifizieren • sollen Gegenstand nicht beschreiben • in der Regel über eine schematische gegenständliche Darstellung Eigenschaften • abgebildeter Gegenstand wird zum Zeichen für anderen Gegenstand • indirekte Abbildung • wichtig: Entwicklung einer kohärenten Formensprache • Qualität eines Zeichens hängt ab von • Unverwechselbarkeit, Originalität, Eindeutigkeit, • Einfachheit der grafischen Form • Gestalt- oder Anmutungsqualitäten als Gegensatzpaare • dynamisch/statisch, streng/locker, weich/hart, traditionell/modern Beispiel • Drucker-Icon muß für einen generischen Drucker stehen • Visuelle Eigenheiten eines bestimmten Druckertyps oder -modells haben im Icon nichts zu suchen



4. Illustrationen Ziel • Aufmerksamkeit auf einen Text lenken • Text dekorieren, auflockern • mit starkem Bezug zu einem schriftlichen Text Eigenschaften • meist gegenständlich • sehr oft indirekter Charakter • kann eine Analogie zu einem anderen Gebiet sichtbar machen • kann einen neuen Aspekt herausarbeiten • kann “ironischen Kommentar abgeben” • subjektiv geprägt, originell • sollten • Stimmung erzeugen • Assoziationen wecken Beispiel • siehe Buchumschlag



5. Typographie Eigenschaften • visuelle Umsetzung von Aussagen (und Textinhalten) • Positionierung über Spalten und Zeilen • Wahl der Schriftarten und deren Attribute • Randbedingungen • Konventionen der lateinischen Schrift • an Regeln der Lesbarkeit gebunden Bereiche • Makrotypographie (Layout) • Gesamtgestaltung einer “Publikation” • als ästhetisches Objekt • Gestaltungsraster, bestimmte Seitenaufteilung • Mikrotypographie (Detailtypographie) • Details von Schrift und Schriftsatz



„Typographisch korrekte“ Darstellung: Beispiel



5.1 Mikrotypographische Fehler



Beschreibung zum Beispiel Problem - inkohärente • Schriften • Zeichenabstände • Zeilenabstände • Schriftattribute (fett, Größe, etc.) Eindruck / Resultat (u.a.) • Unruhe • Unklarheit wichtig - unwichtig



5.2 Makrotypographische (Layout) Fehler



Beschreibung zum Beispiel Problem • alle Elemente werden gleich behandelt Eindruck - Resultat (u.a.) • die Seite zeigt Rezept ohne Zutatenliste und Beschreibung • das erste Foto scheint sich nur auf den ersten Schritt des Rezeptes zu beziehen



Makrotypographische Fehler (2)



Beschreibung zu Beispiel Problem • 5 isolierte, autarke / unterschiedliche Elemente/Bereiche Eindruck - Resultat (u.a.) • es handele sich um die Beschreibung 5 verschiedener Gerichte • ohne spezielle Beziehungen untereinander • ohne vorgegebene Lesereihenfolge Anmerkung: Fehlinterpretationen beziehen sich • auf die Struktur des Dokumentes • nicht auf den Inhalt



6. Ästhetik Ästhetik (im Graphik-Design) untrennbar verbunden mit entsprechender Stilgeschichte dieser Disziplin Beispiele • Funktionale Gestaltung • Expressive Gestaltung



Ästhetik: Funktionale Gestaltung Eigenschaften • Strukturierung der Textbotschaft im Vordergrund • strebt nach Klarheit und Neutralität • Stilelemente • serifenlose (selten serifenbetonte) Schriften • asymetrische Ausrichtung des Materials (oft gesteuert durch ein Gestaltungsraster) • Vorliebe für Photographien (wenn es um illustrierende Bilder geht) Beispiel • (siehe Abb.) Wandel • bisher „extrem kühle“, streng konstruierte Schriften • wie Helvetica • Inzwischen zunehmend andere serifenlose Schriften wie • Syntax, Frutiger oder Meta



Ästhetik: Expressive Gestaltung Eigenschaften • verfremdende Mittel wie Störung und Verzerrung von Schrift • vielfach ist nicht Ausgewogenheit das Ziel dieser Gestaltung, sondern im Gegenteil Spannung, Ungleichgewicht • oft in Opposition zu den Gesetzen der Lesbarkeit Beispiel • Text mutiert zum grafischen oder bildhaften Element Anwendungsfeld wenn • Aufmerksamkeit und ganzheitlicher Eindruck wichtiger sind als • die Strukturierung und verständliche Aufbereitung komplexer Inhalte



7. Gestaltungsprozeß Stufen einer Multimedia-Produktion Entwurf Prototypentwicklung Analyse der techn. Rahmenbedingungen

Audio-/VideoProduktion

Text-/GraphikProduktion

Design und Prototypentwicklung Steuerungsprogramms

Videodatenkompression

Digitalisierung von: Einzelbildern Graphiken Audio

Programmierung des Steuerungsprogramms

Testen



Multimedia-Produktionsteam Produktionsteam Produzent Projekt-Manager Anwendungsspezialist Drehbuchautor Graphik-Designer Anwendungs-Designer Audio-/Video-Produzent Programmierer



Interaktion mit Designteam Aufgabe des Auftraggebers • Aussagen formulieren • Randbedingungen formulieren • Beispiel • Flyer ist für Zielgruppe Forschungsmanagement, Fachpublikum • Gültigkeitsdauer 2-3 Jahre, ... • Eigenschaften: seriös und dynamisch wichtig • etc.... Aufgabe des Designers, Art Director • Kenntnis des Umfelds des Auftraggebers • Umsetzung der Aussagen in mediale Elemente • Beispiel • Farbenkombination blau und abstrakte technische Bilder • Textlängen vorgegeben • etc. ... Achtung häufiger Fehler • Auftraggeber kommuniziert über Layout, Farben, etc.


Multimedia-Systems: Design - Department Of Computer Science

Multimedia-Systems: Design - Department Of Computer Science

Suggest Documents

Design - Computer Science Department

Shared Design Space - Department of Computer Science

for Design Patterns - Department of Computer Science

Intelligence by Design - Department of Computer Science

Design Guidelines - Department of Computer Science - Rochester ...

Department of Computer Science

DEPARTMENT OF COMPUTER SCIENCE, FACULTY OF SCIENCE ...

TurboBLAST - Computer Science Department

Computer Science Department - UCA

collision - Computer Science Department

Slides - Department of Computer Science

Department of Computer science - Technion

bioinformatics - Department of Computer Science

Solution - Department of Computer Science

Syllabus - Department of Computer Science

EigenJournal - Department of Computer Science

Interviews - Department of Computer Science

KAOS - Department of Computer Science

Syllabus - Department of Computer Science

Dictionaries - Department of Computer Science

Paper - Department of Computer Science

Department of Computer Science & Engineering

Publications - Department of Computer Science

monkeysort - Department of Computer Science