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 02 Recherche

01.1 Plastik und Kunststoffe 02.1 Fakten

01.2 Herangehensweise 02.2 Plastic Planet

02.3 Fakten-Katalog

Konzeption

Wählen Sie eine Möglichkeit

Plastikkonsum Meeresverschmutzung Recycling

03 Konzeption 04 Design 05 Umsetzung

03.1 Idee 04.1 Pixel! 05.1 Script

03.2 Konsum vs. Recycling 04.2 Bottles 05.2 Touch

03.3 Automat 04.3 Buttons 05.3 Workshop

03.4 Interface 04.4 Stage

03.5 echte Flasche 04.5 Action!
digitale Flasche

03.6 Info-Filme

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

Thema

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

Plastik und Kunststoffe

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

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

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

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

Kunststoffe / Plastik Johannes Roth, Julian Schwarz
Recherche 02.1

Im Meer befindet sich 4* mehr Plastik als Plankton

Alle 30 min. werden 85 Millionen
Kunsstofflaschen verwendet
In Unserem Blut befindet sich nachweisbar Plastik - „Bisphenol A“

Im Jahr werden 240 Millionen Tonnen Plastik produziert


Substanzklasse Jahreproduktion in t Umsatz in Mio. €

Jahr Weltproduktion

Recherche 02.1

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


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

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

One Turtle found in New York had actually
consumed 590 feet of heavy duty fishing line
Im Atlantik, nördlich der karibischen Inseln
treiben bis zu 200.000 Plastikteile pro
Americans use 2.5 million plastic bottles Quadratkilometer im Wasser
every hour
1 recycled plastic bottle would save enough
energy to power a 60-watt light bulb for 3
Vor 40 J. wurden jährl. etwa 5 mio. Tonnen hours.
Plastik pro Jahr produziert. Heute sind es
etwa 60 mio. Tonnen
Der Müllteppich über dem Pazifik hat
mittlerweile die Größe Zentraleuropas
Plastic Pollution
Recycling 1 ton of plastic can save 1-2 Die Menge an Plastik in den Weltmeeren
thousand gallons of gas. reicht aus, um den gesamten Erdball sechs
mal mit Plastikfolie einzupacken

Today, Americans generate million tons of
In den Weltmeeren findet man mittlerweile plastic waste a year but recycle only 1 or 2 %
sechs mal mehr Plastik als Plankton of it. This is more than 10 pounds of plastic
for every person on the earth

Producing new plastic from recycled material
25 recycled PET bottles can be used to make uses only two-thirds of the energy required to
an adult's fleece jacket manufacture it from raw materials.

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

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

Zweite IdeeIdee
Zweite Konzeption 03.1

Erste Idee

Interaktive Kommunikationssysteme – Sommersemester 2010 – Julian Schwarz, Johannes Roth

Interaktive Kommunikationssysteme – Sommersemester 2010 – Julian Schwarz, Schwarz, Joh
Interaktive Kommunikationssysteme – Sommersemester 2010 – Julian Johannes Ro


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

me – Sommersemester 2010 – Julian Schwarz, Johannes Roth


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

Einwerfen Filme
Interaktion Information

Loch 1 Film 1

Flasche Loch 2 Film 2

Loch 3 Film 3


Einwerfen Touchscreen Filme
Interaktion Interaktion Information

Button 1 Film 1

Flasche Loch Button 2 Film 2

Button 3 Film 3

Einwerfen Drehschalter Filme
Interaktion Interaktion Information

Position 1 Film 1

Flasche Loch Position 2 Film 2

Position 3 Film 3

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 Bon

Button 1 Button 2 Button 3

Film 1 Film 2 Film 3


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.

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

Storyboards

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

Info-Filme

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

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

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 Typografie

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

0123456789

abcdefghijklmnopqrstuvwxyz
0123456789

Die Weltmeere verwandeln sich
in Meere von Müll


RGB: 255 / 0 / 255 RGB: 0 / 255 / 0

negativ / schlecht / Plastik / positiv / gut / Recycling / Plankton /
Verschmutzung / Müll ... Meeresbewohner ...

Design 04.1

Die Weltmeere verwandeln sich
in Meere von Müll

23.000.000 Tonnen
6 Stunden
Plankton steht am Anfang der
marinen Nahrungskette


Flaschen Varianten

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

Bottles


Button Varianten

dene Buttons für den Auswahlscreen.

Buttons


Bühnen Varianten

dene Varianten für die Bühne auf
der sich die Animationen abspielen
sollten.

Stage

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


Plastikkonsum

Design 04.5

Recycling

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

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

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

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

// Exit Button deklarieren mit // ExitButton deklarieren mit // Exit Button deklarieren mit
gotoAndStop(2); gotoAndStop(2); gotoAndStop(2);

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

Action Script
Exit Button
Film 3
Film 2
Film 1
Flasche 3
Flasche 2
Flasche 1
Vordergrund
Auswahl Buttons
Löcher
Hintergrund
Startscreen


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


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

Plastic Pollution Doku

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Plastic Pollution Doku