Plastic Pollution Doku

Hochschule für Gestaltung Schwäbisch Gmünd Sommersemester 2010 Interaktionsgestaltung Interaktive Kommunikationssysteme Johannes Roth Julian Schwarz Prof. Steffen Süpple

Konzeption Interaktive Kommunikationssysteme | Sommersemester 2010 | Prof. Steffen Süpple | Johannes Roth, Julian Schwarz

01 Thema 01.1 Plastik und Kunststoffe 01.2 Herangehensweise

02 Recherche 02.1 Fakten 02.2 Plastic Planet 02.3 Fakten-Katalog

Konzeption

03 Konzeption 03.1 Idee 03.2 Konsum vs. Recycling 03.3 Automat 03.4 Interface 03.5 echte Flasche digitale Flasche 03.6 Info-Filme

04 Design 04.1 Pixel! 04.2 Bottles 04.3 Buttons 04.4 Stage 04.5 Action!

05 Umsetzung 05.1 Script 05.2 Touch 05.3 Workshop

Wählen Sie eine Möglichkeit

Plastikkonsum Meeresverschmutzung Recycling

Interaktive Kommunikationssysteme | Sommersemester 2010 | Prof. Steffen Süpple | Johannes Roth, Julian Schwarz01.1 Thema

Thema Unser Thema, das wir aus dem Buch „Technik und Wissenschaft“ durch Zu-fall aufgeschlagen hatten, war „Plastik und Kunststoffe“.

Plastik und Kunststoffe

Thema 01.1

Interaktive Kommunikationssysteme | Sommersemester 2010 | Prof. Steffen Süpple | Johannes Roth, Julian Schwarz01.2 Thema

Herangehensweise Nach dem wir das Thema einmal grob untersucht hatten, wurde schnell klar, dass wir es unter dem Gesichtspunkt Umweltverschmutzung weiterbearbei-ten werden. Die Belastung durch Plastikabfälle, speziell in den Meeren ist unvorstell-bar groß und es gibt unzählige Studi-en, Daten- und Zahlenerhebungen zu dem Thema. Somit Eignete sich diese Herangehensweise sehr gut für ein Kommunikations- / Informationssys-tem.

Start

Thema 01.2

Interaktive Kommunikationssysteme | Sommersemester 2010 | Prof. Steffen Süpple | Johannes Roth, Julian Schwarz02.1 Recherche

Fakten sammeln Für die erste „Mini-Präse“ mit der wir unser Thema vorstellten sammelten wir erste Zahlen und Fakten zur Um-weltbelastung, Plastikmüll-Vorkom-men, Ansammlungen im Meer, Plastik-produktion und -Konsumverhalten.

Fakten

Recherche 02.1

Kunststoffe / Plastik Johannes Roth, Julian Schwarz

Alle 30 min. werden 85 Millionen Kunsstofflaschen verwendet

Im Meer befindet sich 4* mehr Plastik als Plankton

Im Jahr werden 240 Millionen Tonnen Plastik produziert

In Unserem Blut befindet sich nachweisbar Plastik - „Bisphenol A“


Kunststoffe / Plastik Johannes Roth, Julian Schwarz

Jahr Weltproduktion

Substanzklasse Jahreproduktion in t Umsatz in Mio. €

Recherche 02.1Kunststoffe / Plastik Johannes Roth, Julian Schwarz

Marktführer in der Plastik und Kunststoffherstellung:


Kinofilm „Plastic Planet“ Zufällig lief gerade zu unserer Recher-che Phase der Film „Plastic Planet“ von Werner Boote in einigen Pro-grammkinos. Praktischerweise auch in Schwäbisch Gmünd im KKF. (... In PLASTIC PLANET sucht Regis-seur Werner Boote, dessen eigener Großvater ein Pionier der Plastikin-dustrie war, weltweit nach Antworten und deckt erstaunliche Fakten und unglaubliche Zusammenhänge auf. Er stellt Fragen, die uns alle angehen: Schadet Plastik unserer Gesundheit? Wer ist verantwortlich für die Müll-berge in Wüsten und Meeren? Wer gewinnt dabei? Wer verliert? Wenn Sie diesen Film gesehen haben, werden Sie nie wieder aus einer Plastikflasche trinken! ...) (http://plastic-planet.de)

Plastic Planet

Recherche 02.2


Mehr Fakten Da Fakten und Zahlen die Grundlage unseres Kommunikationssystems werden sollten sammelten wir aussa-gekräftige Aussagen, Wissenschaftli-che Ergebnisse und Erhebungen. Man findet im Internet unheimlich viele „facts“ dazu und zum Teil auch einige in verschiedenen Varianten (einmal ist vier mal so viel Plastik wie Plakton im Meer und einmal sechs mal so viel...). Aber irgendwann hatten wir dann einen ordentlichen „Fakten-Katalog“ zusammen, den wir als Grundlage und immer wieder als Nachschlagewerk für unser Projekt verwenden konnten.

Fakten-Katalog

Recherche 02.3

Plastic Pollution

In den Weltmeeren findet man mittlerweile sechs mal mehr Plastik als Plankton

Die Menge an Plastik in den Weltmeeren reicht aus, um den gesamten Erdball sechs mal mit Plastikfolie einzupacken

Americans use 2.5 million plastic bottles every hour

Today, Americans generate million tons of plastic waste a year but recycle only 1 or 2 % of it. This is more than 10 pounds of plastic for every person on the earth

One Turtle found in New York had actually consumed 590 feet of heavy duty fishing line

An estimated 14 billion pounds of trash, much of it plastic is dumped in the worlds oceans every year

Im Atlantik, nördlich der karibischen Inseln treiben bis zu 200.000 Plastikteile pro Quadratkilometer im Wasser

Der Müllteppich über dem Pazifik hat mittlerweile die Größe Zentraleuropas

Vor 40 J. wurden jährl. etwa 5 mio. Tonnen Plastik pro Jahr produziert. Heute sind es etwa 60 mio. Tonnen

1 recycled plastic bottle would save enough energy to power a 60-watt light bulb for 3 hours.

Producing new plastic from recycled material uses only two-thirds of the energy required to manufacture it from raw materials.

Recycling 1 ton of plastic can save 1-2 thousand gallons of gas.

25 recycled PET bottles can be used to make an adult's fleece jacket

Interaktive Kommunikationssysteme | Sommersemester 2010 | Prof. Steffen Süpple | Johannes Roth, Julian Schwarz03.1 Konzeption

Gesamtkonzept In der ersten Phase der Konzeption, überlegten wir uns, wie wir die gesam-melten Fakten vermitteln wollten. Schnell kam uns die Idee, das Ganze in einen Automaten zu integrieren, der in irgendeiner Weise etwas mit dem täg-lichen Plastikkonsum zu tun hat. Wir dachten, so könnte man den Benutzer direkt am „Ort des Geschehens“ abho-len und für das Thema interessieren.

Die Automat-Idee

Konzeption 03.1

Erste Idee

Interaktive Kommunikationssysteme – Sommersemester 2010 – Julian Schwarz, Johannes Roth

Zweite Idee


Zweite Idee



Von welcher Seite her erzählen? Die beiden Möglichkeiten Getränke-automat und Pfandautomat standen zur Wahl. Wir mussten uns überlegen von welcher Seite her wir das Thema vermitteln wollten. Der Vorgang etwas aus Plastik zu kaufen unterscheidet sich grundlegend von dem etwas aus Plastik zurückzubringen. Wir überlegten uns für beide Varianten mögliche Abläufe und entschieden uns dann für den Pfandautomat.

Konsum vs. Recycling

Konzeption 03.2

- Benutzer will eigentlich etwas kaufen --> konsumieren! - Informationen werden als zusätzliches „Produkt“ angeboten - reales Produkt? Vergammelte Plastikflasche? - Geschichten zu den regulären Produkten / deren Verpackung? - Erhält der Benutzer am Ende das eigentlich gewünschte Produkt? - Wie Informationen darstellen? Screen? Beamer?

- Benutzer will eigentlich etwas zurückgeben --> recyceln! - Benutzer ist eher empfänglich für die Informationen - Infos könnten während des Rückgabevorgangs laufen - Interessante Interaktionsmöglichgeiten mit der Flasche - Nutzer sind einen Screen am Automat gewohnt

Zweite Idee



Informations-Automat Als nächstes überlegten wir uns, wie der Pfandautomat sein müsste, um darüber unsere Informationen zu ver-mitteln. Wir wollten einen möglichst detailgetreuen Automaten-Dummy bauen, der Einwurfmöglichkeiten und einen Screen hat, auf dem die Infor-mationen zu sehen sind. Wir spielten mehrere Möglichkeiten durch, wie man das Einwerfen der Flasche als Interaktion integrieren könnte und überlegten, welche Art Screen passen wäre. Kurz dachten wir auch an eine Kombi-nation mit dem Interface-Kurs, ver-warfen die Idee aber wieder, da wir zu keinem passenden Ergebnis kamen.

Der Automat

Konzeption 03.3

Loch 1 Film 1

Loch 2 Film 2Flasche

Loch 3 Film 3

Einwerfen Interaktion

Filme Information


Button 1

Position 1

Button 2

Position 2

Button 3

Position 3

Film 1

Film 1

Film 2

Film 2

Flasche

Flasche

Loch

Loch

Film 3

Film 3

Touchscreen Interaktion

Drehschalter Interaktion



Filme Information

Filme Information

Konzeption 03.3

Entschluss Wir entschieden uns am Ende für die Variante mit dem Touch-Interface und einem Einwurfloch. Wir wollten die Interaktion lieber am Screen haben als allein die unter-schiedlichen Löcher als Interaktions-elemente zu nehmen. Und die Variante mit der Drehregler-Interaktion brachte und auch nicht zu einem wirklich inter-essanten Ergebnis.


Interface-Ablaufplan Da die Informationen, die wir vermit-teln wollten in Form von drei Filmen dargestellt werden sollten, brauchten wir ein Auswahl-Interface durch das man die Filme starten konnte. Interface

Konzeption 03.4

Flasche einwerfen

Auswahlscreen

Button 2

Film 2

Button 1

Film 1

Button 3

Film 3

Bon


Auswahl-Animation Wir wollten die Flasche die in Wirklich-keit ja in den Automat geworfen wird, auf dem Screen wieder auftauchen lassen und entwarfen verschiedene Möglichkeiten wie die Flasche in der Szene auftreten könnte.

echte Flasche digitale Flasche

Konzeption 03.5

In dieser Variante sollte die Flasche auf dem Screen „schweben“ und man könnte sie dann per drag & drop in einen der Körbe „werfen“.


In dieser Variante sollte die Flasche über einer Weltkarte fliegen. Auf der Karte sind an den entsprechend thematisch passenden Orten Icons angezeigt. beim Drücken auf die Icons fliegt die Flaschen dann dort hin und der jeweilige Film wird abgespielt.

Konzeption 03.5

In unserer endgültigen Version befin-det sich die Flasche am unteren Bild-schirmrand. Beim Drücken auf einen der Buttons fliegt die Flasche in das darunterliegende Loch. Wir fanden, das war die beste Assozi-ation zu der realen Flasche, die man ja vorher in den Automat gesteckt hat.

Interaktive Kommunikationssysteme | Sommersemester 2010 | Prof. Steffen Süpple | Johannes Roth, Julian Schwarz03.6 – Konzeption

Storyboards Nachdem die Fakten, zu drei Filmen zusammengestell wurden, zeichneten wir Storyboards, in denen wir unsere Ideen zur visuellen Darstellung skiz-zierten.

Info-Filme

Konzeption 03.6


Konzeption 03.6

Interaktive Kommunikationssysteme | Sommersemester 2010 | Prof. Steffen Süpple | Johannes Roth, Julian Schwarz04.1 Design

Farbe, Form, Typografie Jetzt ging es an die Umsetzung. Dazu legten wir erst mal Gestaltungsricht-linien was Farben, Typografie, Form-sprache, etc. angeht fest.

Pixel!

Design 04.1

Typografie Wir entschieden uns für die DIN in den Schnitten Light, Medium und Bold.

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Die Weltmeere verwandeln sich in Meere von Müll


RGB: 255 / 0 / 255 negativ / schlecht / Plastik / Verschmutzung / Müll ...

RGB: 0 / 255 / 0 positiv / gut / Recycling / Plankton / Meeresbewohner ...

Design 04.1

Die Weltmeere verwandeln sich in Meere von Müll

Plankton steht am Anfang der marinen Nahrungskette

23.000.000 Tonnen

6 Stunden


Flaschen Varianten Wir entwarfen und testeten verschie-dene Flaschen-Grafiken für die Anima-tion am Auswahlscreen.

Bottles

Design 04.2


Button Varianten Wir entwarfen und testeten verschie-dene Buttons für den Auswahlscreen.

Buttons

Design 04.3


Bühnen Varianten Wir entwarfen und testeten verschie-dene Varianten für die Bühne auf der sich die Animationen abspielen sollten.

Stage

Design 04.4




Design 04.4




Filme Die Informationsfilme setzten wir in Adobe After Effects um.

Action!

Design 04.5

Screenshots aus dem Film über Plastikbelastung im Meer


Screenshots aus dem Film über Plastikkonsum

Design 04.5

Screenshots aus dem Film über Recycling

Interaktive Kommunikationssysteme | Sommersemester 2010 | Prof. Steffen Süpple | Johannes Roth, Julian Schwarz05.1 Umsetzung

Umsetzung Alle Elemente wurden am Schluss in Adobe Flash zusammengesetzt, ani-miert und alle nötigen Funktionen in ActionScript 3.0 programmiert. Wir erstellten zuerst einen „Flash-Fahrplan“ nach dem wir die nötigen Schlüsselbilder und Code-Teile setzen mussten. Script

Umsetzung 05.1

Exit Button

Action Script

stop(); // bei KeyboardEvent.KEY_DOWN gotoAndStop(2);

stop(); // Alle Buttons deklarieren mitgotoAndPlay(*/ zu den jeweiligen Animationen springen /*);

Film 2

Film 1

Flasche 3

Flasche 2

Flasche 1

Auswahl Buttons

Vordergrund

Löcher

Hintergrund

Startscreen

Film 3

// Exit Button deklarieren mitgotoAndStop(2);

// ExitButton deklarieren mitgotoAndStop(2);

// Exit Button deklarieren mitgotoAndStop(2);

gotoAndStop(2); gotoAndStop(2); gotoAndStop(2);


Hardware Als Ausgabe-Hardware verwendeten wir einen Asus eePC touch. Man kann den Bildschirm des Mini-Notebooks einfach umdrehen, wieder zuklappen und hat eine Art Tablet-PC. Außerdem ermöglicht die Touch-Oberfläche eine einfache Bedienung im Eingebauten zustand. Touch

Umsetzung 05.2


Automat bauen Das Grundgerüst des Pfandautoma-ten-Dummy bauten wir aus Holzplat-ten und Kanthölzern. Vorne wurde er mit Blauschaum verkleidet und eine, derer echten Pfandautomaten nachempfundenen Form versehen. Zwei Löcher vorne für den Flascheneinwurf und den Screen wurden mit Metallschienn verkleidet und der Ganze Automat mit Dispersi-onsfarbe angestrichen. Innen wurde unterhalb des Flaschen-einwurfs eine Tastatur installiert, bei der ein Tastendruck von der eingewor-fenen Flasche ausgelöst wurde. Dieser startet dann das Interface am Screen.

Workshop

Umsetzung 05.3


Umsetzung 05.3

Documents

Plastic Pollution Doku