Archiv

Autor Archiv

Screendesign Weiterentwicklung

3. Juni 2009

Screendesign VergleichsebeneScreendesign KaffeeherstellungUnsere ersten Entwürfe haben wir inzwischen angepasst, weiterentwickelt und grafisch aufgewertet. Die Formen sind abgerundet, halbtransparent und wurden zum Teil mit einem Glanz-Effekt versehen. Zum Beispiel bei den Produkt-Icons lässt sich so besser visualiseren, dass die Objekte mit der Maus bewegt werden können. Die abgerundeten Formen schaffen eine Zusammengehörigkeit zwischen den Objekten. Insgesamt wurde außerdem ein Raster verwendet, was sich über beide Bereiche der Infografik erstreckt. Die Farbcodierung hilft bei der Navigation und schafft eine passende “Atmosphäre” für die Nutzung.

Verschiedenes , , ,

Prototypen in Flash

3. Juni 2009

Parallel zum Screendesign kümmern wir uns um verschiedene Prototypen für die spätere Umsetzung in Flash. Hier zwei Beispiele für eine Umsetzung der Wassersäulen für die Vergleichsebene. Die “Balkendiagramme” sollen animiert werden, dabei aber trotzdem möglichst gut vergleich- und lesbar bleiben. Die Idee ist ein leeres Gefäß, was sich mit Wasser füllt, je nach dem welches Produkt ausgewählt wurde.

Get Adobe Flash player

Get Adobe Flash player

Umsetzung , , ,

Screendesign

31. Mai 2009

Erster Entwurf für das Screendesign

Erste Entwürfe

Nach einer langen Recherche- und Konzeptionszeit geht’s jetzt an die Gestaltung.  Ziel für das Screendesign ist die Kombination eines zurückhaltenden, seriösen Stils mit ansprechender, moderner Gestaltung (in Anlehnung an typische Web 2.0 Designs). Hier einer der ersten Entwürfe in Photoshop für die Vergleichs-Ebene mit Drag n’ Drop Funktion.

Format

Das Format unserer interaktiven Infografik wird 800×600 Pixel sein. So kann die Grafik, parallel zu einem Artikel über virtuelles Wasser, in einem externen Fenster geöffnet werden. Das 800×600-Format bietet genug Platz für unsere Inhalte, verdeckt aber nicht den ganzen Bildschirm und ist somit bestens für diesen Zweck geeignet.

Gestaltung , , , ,

Noch mehr Scribbles …

22. Mai 2009

Hier verschiedene Skizzen (Wireframes) zur Verlgeichs- und Prozessebene. Außerdem die Visualisierung, wie die Wassermengen für unsere Produkte “greifbar” gemacht werden können (Vgl. “Produktwahl“).

Scribble zur ProzessebeneScribble zur ProzessebeneScribble zur Vergleichsebene mit Drag n' DropVisualisierung der Mengenangaben in Liter

Gestaltung, Storyboard , , ,

Virtuelles Wasser bei der Kaffeeherstellung

19. Mai 2009

Anhand von Kaffee möchten wir die Zusammensetzung der Zahlen für das virtuelle Wasser einzelner Produkte (140L für eine Tasse Kaffee) demonstrieren (Vgl. Eintrag vom 12. Mai). Allerdings ergaben sich bei der Recherche verschiedene Schwierigkeiten, wie die Thematik visualisiert und erklärt werden kann.

Wasser steckt fast nur in der Pflanze

Fast alles Wasser, was für die Herstellung von Kaffee benötigt wird, steckt in der Kaffeepflanze. Die einzelnen Schritte in der Weiterverarbeitung benötigen selbst kaum Wasser. Im Verlauf verlieren die anfänglichen Kaffeekirschen allerdings immer mehr an Masse und damit auch an virtuellem Wasser. Am Schluss bleiben von den Kaffeekirschen nur noch die gerösteten Bohnen (die Kerne der Kirschen) übrig. Der enorme Wasserverbrauch hängt also damit zusammen, dass viel Pflanze für wenig Kaffee gebraucht wird.

Infografik muss “Verlust” erklärenAbnahme der Masse von Kaffee(-kirschen) währrend der Kaffeeherstellung

Daraus ergibt sich, dass die Prozess-Ebene erklären muss, in welcher Station wieviel Masse der Kaffeekirschen verloren geht. Beim Prozessschritt “Fruchtfleisch entfernen” fallen z.B. 50% der Kaffeekirsche weg, wodurch das Wasser verloren geht, was darin steckt. Man benötigt für eine Tasse Kaffee (125ml) 52g Kaffeekirschen. Im Laufe der Weiterverarbeitung werden daraus aber nur 7g geröstete Kaffeebohnen (Vgl. Grafik ‘Abnahme der Masse’).

Wasserverbrauch und -Verlust  bei der Kaffeeherstellung

Tabelle mit Berechnung zum Wasserverbrauch und ProduktverlustBasierend auf der wissenschaftlichen Arbeit von A.K. Chapagain und A.Y. Hoekstra, “The water needed to have the Dutch drink coffee” (Vgl. Eintrag vom 14.April) haben wir die Werte für eine einzelne Tasse Kaffee errechnet. Dabei entstand eine Tabelle, welche die einzelnen Stationen, den Verlust an Masse und den Wasserverbrauch enthält (Vgl. Grafik). Diese Tabelle wird Grundlage für unsere interaktive Infografik sein.

Die Originaltabelle gibt es hier zum Download (XSLX-Format, 48Kb).

Storyboard , , , , ,

Links zur Kaffeeherstellung

19. Mai 2009

Folgendes Video zeigt die Herstellung von Kaffee mit animierten, anschaulichen Infografiken:

Außerdem gibt es weitere Weblinks zu Quellen, die sich ausführlich mit diesem Thema beschäftigen:

Ein interessantes Projekt mit spannenden Interaktionsmöglichkeiten haben vier Studenten der HfG Gmünd realisiert:

Recherche, Storyboard , , ,

Kampagne des FAO

11. Mai 2009


Auch die ‘Water Developement and Management Unit’ des FAO (Food and Agriculture Organization of the United Nations) bietet zahlreiche Informationen zum Thema Wasser und Ressourcen. Unter anderem gibt es eine Kampagne um die Öffentlichkeit über virtuelles Wasser zu informieren.

Plakat des FAOTeil der Kampagne ist eine (ansatzweise interaktive) Animation auf dieser Seite: http://www.fao.org/nr/water/infores_multimedia.html (Vgl. YouTube Video oben).

Außerdem bietet das FAO verschiedene kate, Flyer und E-Cards auf dieser Seite an: http://www.fao.org/nr/water/promotional.html

Auf YouTube finden sich außerdem noch weitere Videos unter http://www.youtube.com/faowater

Kritik

Unserer Meinung nach sind die Medien der Kampagne zwar schön gestaltet, Informationsgehalt und Behaltensleistung lassen aber sehr zu wünschen übrig. Die Animation verfälscht die grafische Repräsentation von Daten, ist nur minimal interaktiv (Play/Pause) und wirkt wenig ansprechend auf den Nutzer.

Recherche, Verschiedenes , , , ,

Interaktionskonzept Vergleichsebene

8. Mai 2009

Das Ziel für die Vergleichsebene ist relativ einfach: Der Nutzer soll die Möglichkeit erhalten verschiedene Produkte in Bezug auf ihren virtuellen Wassergehalt miteinander zu vergleichen (Vgl. Einträge ‘Storytelling’ und ‘Flowchart’).

Dabei haben wir uns entschieden (mehr oder weniger) klassische Säulendiagramme zu verwenden. Diese Art der Darstellung hat den Vorteil, dass sie sehr bekannt und äußerst funktional ist. Zahlenwerte lassen sich in Form von Säulendiagrammen sehr gut veranschaulichen und innerhalb von Sekunden vergleichen. Die traditionelle (langweilige) Darstellung von Säulendiagrammen wollen wir aber durch eine schön gestaltete, multimediale Komponente durchbrechen. So sollen die Betrachter auch emotional angesprochen und dazu motiviert werden, die interaktive Infografik weiter zu entdecken.

Kernstück der Vergleichsebene ist aber die „Bühne“ auf welcher der Vergleich stattfindet. Der Nutzer hat hier selber die Möglichkeit zu entscheiden, welche Produkte ihn interessieren und welche er miteinander vergleichen möchte (Vgl Eintrag ‘Produktwahl‘). Mittels Drag n’ Drop können zwei Produkte (bzw. Diagramme) aus einer Art „Bibliothek“ auf die Bühne gezogen werden. Daneben gibt es eine Säule, die den durchschnittlichen Wasserverbrauch einer Person pro Tag darstellt. So soll der Betrachter ein Gefühl dafür entwickeln, wie die Zahlen von virtuellem und direktem Wasserverbrauch miteinander in Beziehung stehen.

Das Konzept folgt den Ansichten des Konstruktivismus in der Lernpsychologie. Im Sinne der konstruktiven Seite ist Lernen dann am effektivsten, wenn die Lernenden ihren Lernprozess umfassend selbst steuern können.

Storyboard , , ,

Links, Infos und Quellen zum Thema

25. April 2009

Zum Thema virtuelles Wasser gibt es zahlreiche Abhandlungen, Berichte und Artikel.  Einige davon sind hier aufgelistet und dienten uns bei der Konzeption der interaktiven Infografik als Quellen:

Water Footprint Network: DIE Quelle für Informationen rund um das Thema “virtuelles Wasser”. Das WFN wurde unter anderem von Prof. Arjen Y. Hoekstra gegründet, dem Erfinder des Water-Footprint-Konzepts zu dem auch der Aspekt des virtuellen Wasser gehört. Die non-profit Organisation arbeitet mit Partnern wie z.B. WWF und UNESCO zusammen. Auf der Website www.waterfootprint.org (Engl.) finden sich zahlreiche wissenschaftlich fundierte Fakten und Publikationen. Die Zahlen und Fakten unserer interaktiven Infografik beziehen sich auf diese Arbeiten und Veröffentlichungen des WFN!

WWF Plakat zu Virtuellem Wasser, (c) WWFWWF: Auch WWF Deutschland bietet Informationen zum virtuellen Wasser. Die Organisation versucht auch die Öffentlichkeit darauf aufmerksam zu machen und publiziert z.B. ein Plakat, das die (virtuellen) Wassermengen von verschiedenen Produkten darstellt (Vgl. Abbildung links, (C) WWF Deutschland). Dieses Plakat und die dazugehörige Pressemeldung gibt es unter http://www.wwf.de/presse/details/news/185_liter_wasser_in_einer_tuete_chips/.

Süddeutsche Zeitung: Der Artikel der Süddeutschen Zeitung führt sehr gut in die Thematik des virtuellen Wassers ein und beleuchtet auch den Zusammenhang mit gobalen (Wasser-)Problemen. Zu lesen gibt’s den Artikel unter  http://www.sueddeutsche.de/wissen/552/325417/text/

World Water Forum: Das World Water Forum beschäftigt sich ebenfalls mit dem Thema “virtuelles Wasser”. Auf der Website http://worldwatercouncil.org/index.php?id=866&L=1%2Fp…ent.by.ru%2Fr57.php%3F%3F%2Finclude%2Finc_ext%2Fspaw%2Fdialogs%2Ftable.php%3Fspaw_root%3Dhttp%3A finden sich zahlreiche Informationen und Berichte. Der Fokus liegt dabei auf der globalen Sicht, wobei z.B. der Handel mit virtuellem Wasser (also Wasser-intensiven-Produkten) beleuchtet wird. Außwirkungen des Water-Footprint-Konzepts und die damit zusammenhängenden Lösungsmöglichkeiten für das Problem der Wasserknappheit werden dort ebenfalls diskutiert.

Insgesamt ist zu sagen, dass wir uns bei Recherche und Konzept unserer interaktiven Infografik am Ziel orientiert haben den (evtl. unwissenden) Nutzer für dieses Thema zu sensibilisieren. In die Konzeption sind deswegen nur die Informationen eingeflossen, die mit dem Alltag der Nutzer zu tun haben. Beispielsweise die Problematik des weltweiten Handels mit virtuellem Wasser haben wir aus diesem Grund außen vor gelassen.

Recherche , , , , ,

Benchmark

23. April 2009

Hier eine Sammlung von verschiedenen Projekten, Grafiken, Fotos, etc. zum Thema “virtuelles Wasser” als eine Art Benchmark und als Ideenpool für unser eigenes Projekt:

Infografik von Timm Kekeritz

Infografik von Timm Kekeritz

Der Grafikdesigner Timm Kekeritz hat bereits ein vielbeachtetes Plakat zum Thema “virtuelles Wasser” gestaltet (Vgl. Eintrag vom 10. April). Sein “The Virtual Water Project” basiert auf dem Bericht von A.K. and Hoekstra, A.Y. (2004), »Water footprints of nations«, der UNESCO-IHE in den Niederlanden. Das doppelseitige Plakat zeigt auf einer Seite die virtuellen Wassermengen von Produkten, auf der anderen Seite den virtuellen Wasserverbrauch (“Water footprint”, inkl. Im- und Export) verschiedener Nationen. Mehr Infos zu Plakat, Projekt und den Reaktionen in der Presse gibt es auf http://www.traumkrieger.de/virtualwater/.

General Electric: Plug Into the Smart Grid

General Electric Grafik

Mit der interaktiven Infografik (eigentlich eher Microsite) zum Thema “Smart grid” (Intelligentes Stromnetz) setzt General Electric neue Maßstäbe in Gestaltung und Programmierung. Die Seite ist Teil der Kampagne “Ecomagination” und wirb dafür ins Stromnetz von General Electric zu wechseln. Die Nutzer werden dabei sehr stark emotional angesprochen und zur Interaktion aufgefordert (simulativ und explorativ). Zu sehen gibt’s die Grafik auf http://ge.ecomagination.com/smartgrid/

Visualisierung von Stefan Stubbe

Visualisierung von Stefan Stubbe

Die Installation des Grafikdesign-Studenten Stefan Stubbe soll die versteckten, schwer vorstellbaren Volumenwerte von täglich verbrauchtem Wasser veranschaulichen und den Menschen im Umgang mit Wasser sensibilisieren. Sie ist als vierteiliges Ausstellungsobjekt gedacht und demonstriert die benötigte Menge an virtuellem Wasser für Orangensaft, Milch, Kaffee und Tee. Nach Knopfdruck beginnt Wasser durch das Gefäß zu fließen, ein Display zeigt den aktuellen Wasserstand an. Mehr gibt’s auf http://www.stefanstubbe.com/pr_vwasser.php.

‘art meets science’-Project

Art meets Science - Projekt

Die Künstler des Art meets Science Projekts sind der Meinung, dass der Blick auf das unsichtbare Wasser sich hervorragend für eine künstlerische Umsetzung eignet, ohne dabei den wissenschaftlichen Kontext verlieren zu müssen. In der Ausstellung zum Thema “virtual water” gab es viele kreative Ansätze, die dieses Thema aus den verschiedensten Perspektiven beleuchten. Mehr gibt’s auf der Projekt Website http://www.artmeetsscience.de/austellung/index.html.


Fotostrecke von The Guardian

Foto des Guardian

Neben verschiedenen Artikeln bietet die englische Tageszeitung The Guardian eine Fotostrecke. Dabei werden die Zahlen des virtuellen Wassers mit zahlreichen Bildern verknüpft. Die Fotostrecke gibt es auf der Website des Guardian (Engl.) unter http://www.artmeetsscience.de/austellung/index.html.


Microsite von www.H2ouse.org

Navigationselement von H2ouse.org

Die Website H2ouse.org bietet jede Menge Informationen, wie Wasser gespart werden kann. Dazu gibt es unter Anderem eine Microsite in der sich der Nutzer durch den Grundriss eines Hauses navigieren kann. Bei Klick auf eines der Zimmer erscheint dieses als Grafik und der Nutzer kann wählen zu welchen Geräten (z.B. Wasserhahn …) er nähere Informationen will. Diese Art der Navigation erinnert an eine Art interaktive Infografik und ist auf der Seite http://www.h2ouse.org/tour/index.cfm zu sehen.

Recherche, Verschiedenes , , , , , , , ,