Interaktive Infografiken: Abschlusspräsentation mit SIEMENS

23. Juli 2010 — ralph

Abschlusspräsentation

Für das Projekt „Smart-Grids“ im Rahmen der LV Interaktive Infografiken hatten wir am 21.07.2010 die Abschlußpräsentation gemeinsam mit unserem Auftraggeber der SIEMENS AG, vertreten durch Herrn Platz. Die 10 Projektgruppen stellten ihre mit Flash, ActionScript 2/3 und Html umgesetzten interaktiven Ergebnisse vor. Jedes Projekt hatte einen eigenen didaktischen und gestalterischen Ansatz.

Besonders hervorzuheben ist wieder einmal, dass alle Gruppen den kompletten Prozess von Briefing, Recherche, Analyse über Konzeption, Entwurf und Programmierung selbständig umgesetzt haben. Anbei ein paar visuelle Eindrücke der Präsentation im Design-Center des Studienganges Informationsdesign der HdM Stuttgart sowie Screenshots der Ergebnisse.

IIG_Abschluss_01 IIG_Abschluss_02
(Bild 1: A.Harnisch & K.Huckele bei der Präsentation, Bild 2: V. Katsaros & J. Walz, allesamt Studierende der HdM am Studiengang Informationsdesign, sowie A. Platz, Siemens AG)

Beispiel-Screenshots

Eine nicht repräsentative Auswahl einiger Ergebnisse findet man auf den nachfolgenden Screenshots. Für weitere Detailinformationen bitte direkt auf die RSS-Einträge der entsprechenden Projekte im rechten Rand gehen.

vonJanczewski_Schweinbenz2Walz_Katsaros

(Netzinfrastruktur: Schweinbenz/von Janczewski, Netzinfrastruktur: Walz/Katsaros)

Hohl_Buck Huckele_Harnisch

(CO2-Effekt: Hohl/Buck, Netzinfrastruktur: Harnisch/Huckele)

Screenshot_2

(Erneuerbare Energien: Steinau/Soyter)

Vasys_Höfer2 scr_infografik

(Energieregelung: Vasys/Höfer, CO2-Effekt: Hess/Mangler)

Posted in Allgemein, Beispiele. Tags: , , . Kommentare deaktiviert für Interaktive Infografiken: Abschlusspräsentation mit SIEMENS »

The Story Of Stuff

25. Juni 2010 — ralph

Animiertes, scribbleartiges Erklärstück woher alle Produkte stammen. Die Perspektive der Objekte ist teilweise auch recht uneinheitlich. Dieser Stil spricht eventuell nur eine eingeschränkte Nutzergruppe an, oder?

Posted in Beispiele, Design. Tags: , , , . Kommentare deaktiviert für The Story Of Stuff »

Schriften auf dem Bildschirm

24. Juni 2010 — ralph

Screen-Typografie

Wir hatten in einigen Gruppen die Fragestellung, welche Schrift denn als Headline und Lesetext für die Interaktive Infografik geeignet wäre.

Ich verweise auf den Artikel „Schriften am Bildschirm“, aus dem Applicationdesign-Seminar im Wintersemester 09/10, bei dem ich grundsätzliche Aspekte dargestellt hatte.

In einer nicht repräsentativen Sammlung im Artikel von Stuart Brown aus 2006, fanden sich auch ein paar klassische Vertreter, die den Kriterien im oben angeführten Artikel entsprechen. Die Beispiele sind aus Wortmarken entsprechender Homepages entnommen, eignen sich aber auch sehr gut als Copy-Texte.

DIN-Engschrift aus Versalien gesetzt:

Frutiger (HdM-Haussschrift als HdM-Frutiger):

Die Officina von Erik Spiekermann:

Die Interstate, mit Ihren guten Entfernungs-Eigenschaften:

Und die Myriad:

Barrierefrei (weitgehend)

Im Artikel von Denis Potschien finden sich aktuelle Hinweise zum Einbinden von hochwertigen Schriften in Html – endlich könnte man meinen, ist es möglich wirkliche Typografie auf Webseiten zu erstellen, ohne Bitmaps zu verwenden.

Posted in Beispiele, Design, Literatur. Tags: , , . Kommentare deaktiviert für Schriften auf dem Bildschirm »

Zielgruppenadäquate Illustrations-Stile finden

19. Juni 2010 — ralph

Ein Illustrations-Fundstück aus der Glotze: Die Serie „Böse Mädchen“ von RTL hat vereinzelte, animierte (Comic-)Illustrationen während manchen Sketchen.

Der Stil der Illustration passt natürlich nicht für alle Kontexte, doch die collagierte, leicht unpräzise, mit deutlichen Strichtärkenunterschieden skizzierte und wenig realistisch wirkende Darstellung hat eine positive und dynamische Anmutung.

Auch die Farbperspektive, die den Vorder-, Mittel- und Hintergrund verortet, kann als Anschauung dienen.

BM_03 BM_02

Ein Ziel der Illustration ist es, eine individuelle Formensprache zu entwickeln. Das wiederum bedeutet, die basalen Möglichkeiten von Illu/Flash, also Fläche und Kontur (ggf. Textur), entsprechend des Kontextes und des visuellen Konzeptes individuell und zielgruppenadäquat zu interpretieren.

Ein Beispiel für zielgruppenadäquate Illustration innerhalb interaktiver Infografiken findet sich auch in einer älteren Arbeit von N. Schurr (2007) aus unserem Studiengang:

schurr

A. Müller und J. Röhm haben in Ihrer Interaktiven Infografik zum Thema „Virtuelles Wasser“ (2009) ebenfalls hochwertige Illustrationen eingebunden. Das „bestätigte“ der AttrakDiff in einer kleinen  Stichprobe während einer Studie vom 3.Semester im letzten Winter:

Zu welchen Illustrationen Infodesign-Studierende innerhalb interaktiver Infografiken fähig sind, haben auch S. Schröder und A. Petri in Ihrer „Green Sea Turtle“-Infografik (2009) gezeigt:

greenseaturtle01 greenseaturtle02

Zuletzt noch zwei völlig unterschiedliche „statische“ Beispiele von grafisch individuell und hochwertig erstellten Illustrationen:

Beispiel_clean_abstrahierter_stil_Torsten_Schaefer

(Bild: T. Schäfer)

Beispiel_Allardyce_Limette

(Bild: J. Allardyce)

Posted in Beispiele, Design. Tags: , , , , . Kommentare deaktiviert für Zielgruppenadäquate Illustrations-Stile finden »

Beispiel: Hinweise zum Gestaltungskonzept

18. Juni 2010 — ralph

Die Produktionsfirma xkopp aus Berlin, welche die im vorigen Posting vorgestellte ZDF-Doku über Atomwirtschaft erstellt hat, hat weitere interessante Beispiele auf der Homepage.

Eines davon , der „Gläserne Deutsche“ (siehe Bild ganz unten), thematisch und grafisch vergleichbar mit der  „Paul“-Infografik von Johannes Widmer aus 2007 bei Spiegel-Online, bekannt aus den Studien dazu im WiSe 09/10 bei meinem Kollegen Prof. Dr. Burmester.

Eine kleine Formalanalyse wesentlicher Aspekte des Gestaltungskonzeptes:

  • Farbklima: dunkle, düstere Grundstimmung (schwarz, blau…)
  • harte Kanten, Scherenschnitt unterstützt die Dramatik
  • Komplementärkontraste (blau, rot, violett)
  • „geheimnisvolle Tiefe“ durch Vorder- Mittel- Hintergrund
  • unkonkrete, anonyme  Darstellung der Protagonisten

Die präzisen Animationen entstanden mit Sicherheit wieder mit After-Effects, die Gestaltungsaspekte und -Fragestellungen sind jedoch grundsätzlicher Natur und selbstverständlich plattformunabhängig.

Für das jeweilige Thema bedeutet das, sich hinsichtlich der formalen Gestaltung ähnliche Gedanken zu machen (ein Auszug):

  • welche Stimmung soll durch welche Stilmittel erzeugt werden?
  • Farbcodierung vs. Farbstimmung
  • Kennzeichnung wesentlicher Aspekte und Interaktionselemente bspw. durch Akzentfarbe und Formhervorhebung (Dicke, Struktur…)
  • Aufbau der Szene (für das Intro) und des Interaktionsfeldes: Vorder-, Mittel-, Hintergrund, Bewegungsmuster von Informationselementen
  • Konsistenz der Navigations- und Interaktionsbereiche und-Elemente.
  • Wichtiges hervorheben, unwichtiges abschwächen (Stichwort Fensterrahmen oder Gitter-Streben bei Strommasten…)

xkopp_glas

Posted in Beispiele, Design. Tags: , , , , . Kommentare deaktiviert für Beispiel: Hinweise zum Gestaltungskonzept »

Animierte Infographik zu Atomwirtschaft beim ZDF

17. Juni 2010 — ralph

In einem interessanten Bericht des ZDFs über die Hintergründe heutiger und zukünftiger Atomkraftambitionen fand sich auch eine animierte Infografik als Netzwerk-Visualisierung (Circle Graph Visualization/Relation Circle) der Stakeholder der Atomwirtschaft.

Hochwertig wirken die Zooms mit extremen Unschärfen auf die unterschiedlichen Technologien während der Animation, die Übersichtlichkeit leidet in der Gesamtansicht durch das Farbkonzept etwas. Wie im Screenshot zu sehen, ist die Positionierung des Knotens der Banken nicht konsistent auf dem grauen Kreis. Typografie und Position im Format bedingen die Inkonsistenz. Naja, gestalterische Freiheit…

zdf_infografik_atomkraft

Eine weitere Animierte Infografik zeigt die „Renaissance der Atomkraft“.
Kurzanalyse:

  • kräftige, serifenbetonte Typo
  • flächige, kräftige Farb-Piktogramme
  • Details wie „im Bau“ (grün), „in Planung“ (rot) weniger deutlich
  • Farbkonzept kritisch: grün = Planung ?
  • der einfache, weiche Grauverlauf im Hintergrund bietet genügend Tiefe und Halt für den Content

zdf_infografik_atomkraft2

Posted in Beispiele, Design. Tags: , , , , , . 2 Comments »

Smart Grids-Infografik: altes Netz – neues Netz

12. Juni 2010 — ralph

Ein Infografik-Fundstück (Darstellungsart: Schematische Grafik)  beim Unternehmen ABB zur Darstellung des herkömmlichen Stromnetzes und des Smart-Grids.

Kleine Analyse der Gestaltung:
Die Piktogramme sollte man sich hinsichtlich Erkennbarkeit genauer anschauen – ordentlich gelöst im Sinne der Unterscheidbarkeit finde ich die blauen Piktos der Häuser, Hochhäuser und Fabriken. Man benötigt keine roten Ziegeldächer (ausser ganz unten mit Orange als Akzentfarbe) und extravagante Glasflächen oder Anbauten. Das orange Wasserkraft-Pikto ist schwerer erkennbar, ohne Kontext wärs kritisch.

Posted in Beispiele, Design. Tags: , , . Kommentare deaktiviert für Smart Grids-Infografik: altes Netz – neues Netz »

Auch eine Interaktive Infografik: Der Verbrennungsmotor

11. Juni 2010 — ralph

Interaktive Infografik mit haptisch hochwertigem Tastfeld

Auf dem sehr umfangreichen und informativen wiki des Studienganges Interaktionsdesign der HfG Schwäbisch-Gmünd fand sich das Projektbeispiel von Mariella Molter, Nicole Möbus und Mark Lukas zum Thema Verbrennungsmotor. Anbei das Video und der Link zu der Projektbeschreibung.

Kleine Anmerkung zur Gestaltung:
Als Steuerungscodes werden u.a. die oft verwendeten Bezugslinien zur Kennzeichnung der Motorbauteile verwendet. Gestalterisch wirkt es sehr ruhig und geordnet (gute Gmünder Grundlehre), jedoch kommt hier „der Klassiker“ Split Attention Effect zur Geltung – der Betrachter muß afu dem Screen zusätzlich infolge der Bewegung des Kolbens/Pleuels mit dem Blick sehr weit von Bauteil zu Bezeichnung springen. Sollte man optimieren.

combustion engine (interactive installation) from marklukas on Vimeo.

Posted in Beispiele, Design. Tags: , , . Kommentare deaktiviert für Auch eine Interaktive Infografik: Der Verbrennungsmotor »

Geoengineering: gegen den Klimawandel

8. Juni 2010 — ralph

„Schon heute sehen die Menschen kaum einen Sinn darin, ihr Verhalten wegen des wenig bedrohlich erscheinenden Klimawandels zu ändern“

Das Zitat entstammt laut dem Artikel von Alexander Stirn in der Süddeutschen von der Physikerin Ulrike Potzel der TU München. Geeoengineering könnte Ihrer Meinung nach diese Haltung der Menschen bestärken und den Klimawandel fördern.

Um was geht es? Nun, wenn man so will, geht es auch hier wieder um den Versuch, technologiegetrieben das zu ver(schlimm-)bessern, was der Mensch über Generationen angerichtet hat. Letztlich bedeutet das aber auch wie in anderen Bereichen: Der Mensch versucht zu manipulieren und sich in ein komplexes System einzumischen.

Schreckensszenarien (Überschwemmungen, Dürre, Stürme, Eiszeit…) bieten eine kurzfristige Aufmerksamkeit, wirken aber unglaubwürdig. Aus meiner Sicht nachhaltiger ist es, Achtsamkeit durch Hintergrundwissen zu erzeugen. Ähnlich scheinen wohl auch die teilweise durch Infografiken unterstützten Szenarien des Geoengineering zu wirken. Nur in die falsche Richtung.

Weitere Hintergründe finden sich im Dossier der Süddeutschen:
http://www.sueddeutsche.de/thema/Geoengineering

Ein Geoengineering-Beispiel: „Künstliche Wolken“. Gefunden auf http://farm2.static.flickr.com/1240/1272351732_56ffcd74ab.jpg. Original von D. Constantine/A. Granberg/NYT

Posted in Beispiele. Tags: . Kommentare deaktiviert für Geoengineering: gegen den Klimawandel »

Interaktive Infografik: Solarthermisches Kraftwerk

4. Juni 2010 — ralph

Ein weiteres Beispiel wie man einen technischen Prozess darstellen kann, findet sich auf den Seiten der Solar Millenium AG. Die dargestellte Anlage bildet die Abläufe in großen Solarparks wie Andasol 1, 2 und 3 in Spanien ab.

Die Interaktive Infografik besteht aus einer großen Übersichtsgrafik. Die Navigation findet man links unten sowie je nach Auswahl auch als MouseOver oder verlinkten Textbausteinen im Textfeld unten. Animationen zeigen die Vorgänge an vielen Stellen.

Gestalterisch wirkt die Grafik ein wenig lieblos und nüchtern. Die dargestellten Objekte haben unterschiedliche Perspektiven, was irritieren kann. Man fragt sich, für welche Zielgruppe diese Grafik erstellt wurde und ob die damit zufrieden sind. Ein nettes Detail ist die Bewegung der Schatten bei den Panels.
Ich würde daher hinsichtlich der User Experience die Variante von Studierenden unseres Studienganges vorziehen.

http://www.solarmillennium.de/upload/Animationen/andasol_blue.swf

andasol

Posted in Beispiele. Tags: , , . Kommentare deaktiviert für Interaktive Infografik: Solarthermisches Kraftwerk »
« Older posts «
»