dokumentation

dokumentation
transmediales gestalten

Transmediales Gestalten
Hochschule für Gestaltung
Schwäbisch Gmünd
4. Semester, SS 2013/2014
Studenten: Ann-Kathrin Rathgeb
Ulrike von Gemmingen
Betreuer: Daniel Utz

Inhaltsverzeichnis
5
13
25
53
Recherche I Analyse
Erste Entwürfe I Skizzen
Gestalterische Entwicklung
- Overlay
- Ökosystem Regewald
- Icons
- Typografie
-Farbgebung
Endprodukt I Animation

Aufgabenstellung
Lehrinhalt
Die Masse der verfügbaren Daten und Informationen ist längst unüberschaubar
geworden. Durch die zunehmende Virtualisierung der Medien geht dabei oft die
Übersicht und Orientierung verloren. Daten und Informationen sind zwar vorhanden,
aber zunächst unsichtbar und unstrukturiert, lediglich das Suchfenster
bringt punktuell etwas Licht in die „Black Box“. Im Rahmen des Kurses soll eine
Übersicht über ein frei gewähltes Themengebiet gestaltet werden. Dabei stehen
folgende Fragen im
Mittelpunkt:
– Was macht eine gute Übersicht aus ? Welche Grundtypen gibt es ?
– Nach welchen Kriterien können Informationen geordnet werden ?
– Welche Detailebenen sind sinnvoll ?
– Welche digitalen Werkzeuge können zum Filtern, Sortieren und
Betrachten eingesetzt werden ?
– Welche Menge an Informationen ist auf einen Blick überhaupt
lesbar und bekömmlich ?
– Welche Mediengröße ist ausgehend vom menschlichen Gesichtsfeld
ergonomisch sinnvoll ?
Mittelpunkt:
Als Endergebnis wird ein Entwurf prototypisch umgesetzt. Je nach
Medium können für die Realisierung unterschiedliche Werkzeuge genutzt
werden. Während dem Semester wird eine ausführliche Dokumentation erstellt.
Alle wichtigen Projektphasen mit Entwurfsvarianten und Zwischenschritten
müssen dargestellt und textlich beschrieben werden.

Recherche I Analyse

Themenfindung & Marktanalyse
| 6
Themenfindung I Recherche
Durch die freie Themenfindung standen zu Beginn des Semsters ein dutzend
Schwerpunkte zur Auswahl:
- Love Food - Hate Waste
- Made in Bangladesh - Textilfabriken und Unfälle
- Krebsforschung
- Vom Aussterben bedrohte Tiere
- Hohe Ziele: Extremklettern
- Zugvögel und das Zugverhalten
- Tiere essen I Massentierhaltung
- Bekannte Designer
In Absprache mit dem Dozenten wurde das Thema „Vom Aussterben bedrohte
Tiere“ als Schwerpunkt des Projektes favorisiert. Zum Einen stellte es für die
Gruppe eine große Herausforderung dar, ein „Konkurrenzprodukt“ zu WWF zu
gestalten. Desweiteren spielte auch die Zielgruppe eine wichtige Rolle. Nach
ausführlicher Recherche im Internet wurde deutlich, dass es momentan keine
interaktive Anwendung auf dem hartumkämpften Markt gibt, die besonders
junge Erwachsene anspricht. Hier wird somit von einer „Differenzierung am
Markt“ gesprochen.

Marktanalayse
Denkt man an bedrohte Tierarten fällt einem spontan die Organisation WWF
ein. Die World Wide Fund For Nature ist eine der größten internationalen Naturschutzorganisationen
der Welt. Auf der ganzen Welt arbeiten rund 4000 Mitarbeiter
für Natur- und Umweltschutzprojekte.In der iPad-App „WWF Together“
findet man interaktive Strories über Polarbären, Schneeleoparden und natürlich
dem Panda. Dabei wird auf kurze Texte, beeindruckende Fotografien und emotionale
Filme wert gelegt, die rund um die tiere und deren Feinde aufwendig
gestaltet werden. Ein interaaktiver Globus zeigt, wo gefährdete Tierarten leben
und wie groß die Populationen ist.
Merkmale von WWF:
- großflächige Darstellungen von bedrohten Tieren
(Seitenansicht oder Frontalansicht)
- kurz gehaltene Beschreibungstexte zum Thema / Tier
- einfache Navigation / wenige Buttons
- viel Wert wird auf eine interaktive Anwendung gelegt
- Fotos sehr farbig / weiteres Farbschema reativ schlicht gehalten
- App sollte am Besten alle Altersgruppen ansprechen WW
Nach dieser ausführlichen Recherche wurde für uns klar, dass wir eine App
gestalten wollten, die auch auf die Gründe des Aussterbens eingehen möchte.
Zwar finden wir die App von WWF echt super aufgebaut - leider wirkt sie häupig
zu interaktiv und verspielt. Ziel für uns war es eine App für einen Monitor zu
entwerfen, die zwar auch interaktiv aggiert, dennoch ohne viel schnick schnack
Informationen und Hintergrunndwissen aufzeigt.

Medienanalyse
| 8
Die Zeit / Bild
Nordisches Format
40 × 57 cm
Stuttgarter Zeitung
Rheinisches Format
35 × 52 cm
Handelsblatt
Tabloid
28,5 × 40 cm
iMac
60 ×
iPhone
4"
5 × 9 cm
Galaxy Note
5,5"
6,5 × 11,5 cm
Taschenbuch
11 × 18 cm
iPad mini
8"
12 × 16 cm
iPad
9,7"
15 × 20 mm

Medienanalyse
Unser leben wird in vielerlei Hinsicht von den Medien bestimmt: Fernsehen,
Radio und Internet sind allgegenwärtig und es scheint, als könnte man jede Informationen
immer finden. Doch auch jedes Medium hat seine Vor- und Nachteile.
Durch die Recherche wurde für uns klar, dass wir uns ausschließlich auf ein Onlinemedium
festlegen möchten. Favorisiert wurde dabei das iPad und der iMac.
27"
33 cm
Vergleich iPad und iMac:
iPad:
+ sehr gute Handhabung
+ leichte Bedienung / Informationen können
schnell gezeigt werden
- kleinere Darstellungfläche
- kann nur von einem bedient werden
Der Spiegel
brand eins
Geo …
21 × 28 cm
Interview
25,4 × 33 cm
iMac 21"
48 × 27 cm
iMac:
+ Touchfunktion auch hier möglich
+ sehr große Darstellungfläche
+ leichte Bedienung / Informationen können
schnell vermittelt werden
+ kann von mehreren gleichzeitig bedient werden
- nimmt großen Platz ein
Nach ausführlicher Analyse haben wir uns entgültig für das Medium „iMac“
entschieden, da es doch im Vergleich zum iPad einige gute Vorteile zeigt.
Auch wollten wir ein neues Produkt schaffen, dass nicht der WWF-App
Konkurrenz macht.

Zielgruppenanalyse | 10
Analyse „Kinder I Jugendliche im Umgang mit technischen Geräten“
Kinder und Jugendliche sind schnell von den Möglichkeiten fasziniert, die ein
Smartphone oder Tablet-PC bieten. Außerdem können selbst die Jüngsten die
Geräte mit einfachen Handbewegungen ohne Anleitung bedienen. Obwohl
Kinder unter 12 Jahren nur in Ausnahmefällen ein Smartphone besitzen, ist die
Auswahl an Apps für sie auf dem Markt groß.
Apps, die sich unter Jugendlichen derzeit großer Beliebtheit erfreuen, sind
in erster Linie Apps aus dem Bereich der Social Communities, gefolgt von
Instant-Messaging-Anwendungen wie WhatsApp, ICQ, MSN oder Skype, hin
zu diversen Spiele-Apps (JIM-Studie 2012). Entsprechend diesen Segmenten,
sind die Facebook-App und WhatsApp, mit Abstand die beiden beliebtesten
Angebote unter Jugendlichen. Eine zentrale Fragestellung dieser JIM-Studie
ist seit Anbeginn die Häufigkeit der Nutzung verschiedener Medien. Nimmt
man die tägliche Nutzung in den Blick, so liegt das Handy mit 81 Prozent an
erster Stelle. Auf Platz zwei folgt das Internet, das für drei Viertel eine tägliche
Freizeitbeschäftigung ist.
Mit dem deutlichen Zuwachs beim Smartphone-Besitz geht auch eine größere
Verbreitung des mobilen Zugangs zum Internet einher. Durch eine kostengünstige
Flatrate haben mittlerweile drei Fünftel der Handy-Besitzer die Möglichkeit,
das Internet vom Handy aus nahezu unbegrenzt zu nutzen. Analog zur Ausstattung
mit Smartphones hat sich die Verbreitung dieser Flatrates im Vergleich
zum Vorjahr deutlich gesteigert (2012: 34 %). Das Besondere an Smartphones
ist für viele Nutzer, dass diese Geräte durch die Installation von Apps um spezielle
Funktionalitäten und Anwendungen erweitert werden können. Jugendliche
haben durchschnittlich 19 dieser kleinen Programme auf ihrem Smartphone
installiert – etwas weniger als im Vorjahr (2012: 23 Apps).

Zielgruppenanalyse
Bevor die Konzeption der App „Bedrohte Tiere“ gestaltet werden kann, muss
als erster Schritt die Zielgruppe analysiert und festgelegt werden. Hierbei wurde
ein Alterspanne von 10-15 Jahren ausgewählt. Jedes Kind und jeder Jugendliche
hat heutzutage jedoch andere Vorlieben und Geschmäcker. Zusammenfassend
wurden zwei Jugendliche definiert, die zur weiteren Entwicklung der App
berücksichtigt wurden:
Maximilian (10 Jahre)
4. Klasse Grundschule
Hobbys: Fussball, Freunde treffen, Playstation und Wii spielen
Merkmale: mag keine Bücher, steht auf interaktive Medien und Spiele,
mag kein Mädchenkram
Charakterzüge: probiert gleich neues aus, sehr offen zu Menschen
Greta (12 Jahre)
6. Klasse Realschule
Hobbys: Reiten, Freundinnen treffen, Tierclub gründen
Merkmale: liest sehr gerne Pferde- und Mädchenbücher, hat ein Smartphone,
ihre Lieblingsfarben sind rot und pink.
Charakterzüge: relativ schüchtern, auf den ersten Blick zurückhaltend
Ziel war es nun im nächsten Schritt, eine Konzeption zu entwickeln,
die beide Charaktere ansprechen sollte.

Erste Entwürfe I Skizzen

Erste Ideen & Scribbles | 14
Scribble 1 –Periodensystem der bedrohten Tiere

Erste Ideen
Die erste Idee war ein Periodensystem für die bedrohten Tiere zu gestalten.
Es sollte als Unterrichtsmaterial in Plakatform und als interaktive App umgesetzt
werden. Die zusätzliche Idee war ein Kartenspiel / Quartett für Kinder zu
gestalten. Dieses Spiel beinhaltet dann eine Verpackung, Einleitung und die
Spielkarten. Wie man bereits bei den ersten Entwürfen sieht, werden die Tiere
illustrativ nachgestellt und auf eine andere Weise dargestellt. Unter jedem Tier
stehen dann die Gründe, der aktuelle Bestand und Allgemeinwissen.
Scribble 2 –Quartett der bedrohten Tiere

Mind-Map | 16
Erstelltes Mind-Map zur Animation der App „Bedrohte Tiere“

Mind-Map
Wir entschieden uns das Ökosystem so darzustellen, dass durch die Funktion
„Scrollen nach rechts“ (eine Art: Paralax-Effekt) immer mehr Informationen in
Form von Typografie, Grafiken oder kleine Animation angezeigt werden. So
erhält die Zielgruppe einen schnellen Überblick über das komplette und sehr
komplexe Ökosystem auf der Welt. Er kann jedoch auch weitere Informationen
erhalten. Durch das Anwählen des Info-Buttons werden noch mehr Informationen
zum jeweiligen Thema angezeigt. Dadurch besteht auch die Möglichkeit
weiterführende Informationen zu erhalten.

Erste Scribbels & Icons | 18
Erste Entwürfe für die „Ursachen“ des Aussterbens
Erste Ideen für Animationen und Icons

Erste Scribbles
Auf dieser Seite sind erste Versuche zu sehen, wie man die relevanten Informationen
des Aussterbens darstellen könnte. Da wir uns für eine relativ junge
Zielgruppe entschieden haben, wollten wir einfach verständliche Animationen
oder Grafiken gestalten. Diese Illustrationen sollten nicht den bekannten und
üblichen Darstellungen entsprechen, sondern frei entfaltet werden.
Erste Ideen zur „Grad der Gefährdung“ und „Lebensraumgefährdung“

Erzählstruktur | 20
Festgelegte Erzählstruktur „Bedrohte Tiere“

Erzählstruktur
Zu Beginn wollten wir einleitend eine Animation oder Grafik zeigen die die
Frage beantwortet ob Aussterben normal ist. Weiterhin sollte es einleitend
Information geben bis hin zu den Gründen der Gefährdung. Der Betrachter
sollte einen schnellen Weg gehen können und eine ausführlichern mit mehr
Informationen.

Erzählstruktur | 22
Navigation von Ökosystem zu Startscreen

Erzählstruktur
Nach verschiedenen und unterschiedlichen Ansätzen entschieden wir uns, die
Weltkarte als Startscreen zu verwenden und darüber hinaus unsere Erzählstruktur
damit aufzubauen. Der Nutzer kann in den Startscreen reinzoomen und
erhält dann weitere Informationen zu den jeweiligen Regionen der Welt. Außerdem
erscheinen diverse Buttons für die bedrohten Tiere, die anwählbar sind.
Nach Anwählen eines Tier-Buttons erscheint ein Overlay mit grundlegenden
Informationen zu dem ausgewählten Tier. Gründe der Gefährdung, Grad der
Bedrohung etc. Weitere Buttons führen zu den verschiedenen Ökosystemen.
Diese Ökosysteme sind jederzeit scrollbar. Wenn man sich durch das jeweilige
Ökosystem scrollt erscheinen weitere Informationen und Grafiken.

Gestalterische Entwicklung

Entwicklung Icongestaltung | 26
Iconentwicklung “Bedrohte Tiere“
Ions unterstützen die ganzheitliche User Experience und fördern die Identität
mit der Applikation. Darüber hinaus war es in dieser App-Entwicklung wichtig,
dass diese Icons zu einer schnellen Auffassung und visuelle Orientierung der
Funktionen erhöht und so die zügige Erlernbarkeit der Software unterstützt.
Hier wurden klassische Funktionsicons im Flatdesign entwickelt, die auch für
die Kinder und Jugendliche leicht zu verstehen sind. Zusätzlich war es wichtig
eine klare Differenzierung unter den Ions zu schaffen, um Übereinstimmungen
und Verwechslungen vermeiden zu können.
icons “Ökosystem“
Zwar wurden alle Ions mit einem gemeinsamen Nenner, also einen Stil, geschaffen,
dennoch sind klare Unterscheidung zu erkennen. Auf den folgenden
Seiten ist die Entwicklung von Anfang bis Ende des Projektes zu sehen:
Icons “Ursachen“
Als erste Idee wurden Icons entworfen, die sowohl Dreidimensional, als auch
eckig sein sollten. Allerdings wirkten diese sehr elegant und konnten aufgrund
der Farbigkeit und Größe nicht für die Karte genommen werden. Sie wirkten
wie ein Fremdkörper im Bild. Zusätzlich stimmte die Kombination von Icons
„Ökosystem“ und Icons „Ursachen“ nicht. Der nächste Schritt war es, eine
einheitliche Gestaltung zu entwickeln, damit eine harmonische Atmosphäre im
Screen entstehen kann.

Iconentwicklung „Bedrohte Tiere“
Icons “Ökosystem“
Der nächste Versuch war es Flat-Design Icons zu entwerfen, die sowohl von der
Form, als auch von der Farbe, perfekt zusammenpassen. Zu jeder Kategorie
wurde eine eindeutige Illustration entworfen, die klar verständlich macht, was
hinter diesem Icon zu verstehen ist. Besonders für diese Zielgruppe stellt dies
bei der Kreation eine große Herausforderung dar. Ganzheitlich wurde hier mit
abgeschwächten Farben gearbeitet. Ziel war es, Icons zu entwerfen, die zwar im
ersten Blick beim Betrachter ins Auge fallen, dennoch nicht zu sehr knallen.
Icons “Ursachen“
Besonders die Icons für die Ursachen stellten eine große Herausforderung dar,
da sie von der Form einfach sein sollten, dennoch die Bedeutung nicht in den
Hintergrund drehten sollte. Auch hier wurde mit Flächen gearbeitet, um einen
klaren Unterschied zum Hintergrund zu schaffen.
Icons “Navigationssystem“
Auf eine andere Art und Weise stellten auch die Icons für die Navigationssysteme
eine Herausforderung dar. Hier sollte ein größerer Unterschied zwischen
„Auswählen“ und „Nicht-Auswählen“ entstehen. Dadurch wurde beim Anfangsbutton
ausschließlich auf eine Kontur Wert gelegt, die beim „Auswählen“
an Dicke und Schatten zunimmt. Zudem entsteht ein klarer Kontrast bei den
Farben.

Iconentwicklung “Tiere“ | 28
Iconentwicklung “Tiere“
Ein Tier als Logo-Symbol ist sehr beliebt und wird nicht nur bei Organisationen
(z.B. WWF) und Firmen (BOXER, papirus), die direkt etwas mit Tieren zu tun haben
gerne verwendet. Tiere sind Sympathieträger und strahlen Unschuld, Treue,
Hilfsbedürftigkeit, manchmal auch Humor aus. Das berühmte Logo von WWF
zeigt das Symbol eines Pandabärs, das fast unverändert seit 1961 besteht.
Ziel in dieser Konzeptionsphase war es Tiere zu entwickeln, die in erster Linie
nicht süß aussehen. Zwar wird diese App für Kinder und Jugendliche entwickelt,
jedoch sollte das Aussehen der Tiere nicht vom ernsten Thema des Aussterbens
ablenken.
Erste Versuche der Iconentwicklung
Die erste Konzeptionsphase erwies sich als sehr schwierig. Nach einigen
Versuchen, zeigte sich dass alle Tiere einen hohen Grad der „Niedlichkeit“ aufweisen.
Diese Motive würden perfekt für die Zielgruppe „Kleinkinder“ passen,
jedoch würde es bei Kindern und Jugendlichen von 10-16 Jahren sehr schwierig
werden.
Weiterer Versuch der Iconentwicklung
Bei der weiteren Entwicklung wurde besonders auf eine detailierte Darstellung
der Tier-Icons geachtet. Diese Abbildungen wurden ausschließlich aus runden
Formen gestaltet. Nach Abschluss der Entwicklung wurde schnell deutlich, dass
auch hier der Niedlichkeitsfaktor bei der Zielgruppe sehr hoch ist. Zudem wirken
diese Icons durch die große Darstellungsfläche sehr mächtig und enorm.
Resultierend sollte beim nächsten Konzept mehr mit Outlines gearbeitet werden,
damit mächtige Flächen verhindert und eleganter wirken.

Minimalistischer Versuche der Iconentwicklung
Nach unterschiedlichen Ansätzen wird hier ausschließlich mit Kreisen und
Linien gearbeitet. Ziel war es Tiere in sehr abstrakten Formen darzustellen.
Durch die klaren Merkmale sind die unterschiedlichen Gattungen noch klar zu
differenzieren. Dennoch wird schnell die Problematik dieser Darstellung klar:
Zum Einen ist es sehr wichtig die genaue Haltung des Tieres zu definieren, d.h.
wird es von vorne oder von der Seite gezeigt. Zudem wirken auch hier die Tiere
immer noch sehr niedlich und unpassend für die Zielgruppe. Nach umfassender
Entwicklung wurde jetzt klar, dass Icons entstehen sollen, die durch klare Linien
und neutralen Aussehen definiert werden. Hierbei wurden als Richtlinie 4 unterschieliche
Tiergattungen ausgewählt: Säugetier (Nashorn, Elefant, Affe) und
Amphibie (Frosch).
Schlussendlich wurden Tier-Icons aus Outlines entwickelt, die die Nuancen des
Tieres wiederspiegeln. Diese Darstellungen zeichnen sich durch klare
und einfachen Linien aus. Durch ihre Einfachheit ist der Grad der „Niedlichkeit“
sehr gering gehalten und passt sich der definierten Zielgruppe an. Zusätzlich
können diese Icons mit oder ohne Hintergrundfarbe dargestellt werden.
Entgültiges Ergebnis der “Tiericons“

Farbentwicklung & Schriftdefinition
| 30
Farben Icons
RGB 190 I 114 I 115
RGB 156 I 155 I 155
RGB 156 I 155 I 155
Farbentwicklung
Bei der endgültigen Festlegung der Farben, haben wir uns auf hauptsälich auf
gesättigte Töne entschieden. Wir wollten keine Bilder definieren die brutal aus
dem Bildschirm herausknallen. Passend zum Thema haben wir uns größtenteils
auf Grünt- und Orangetöne entschieden, wie in unterschiedlichen Nuancen und
Sättigungen dargestellt werden.
Farben Navigation / Startscreen
RGB 139 I 162 I 35
RGB 139 I 162 I 35 80%
RGB 0 I 0 I 100 80%
RGB 0 I 0 I 100 20%
Farben Regenwald
RGB 160 I 177 I 0 RGB 124 I 112 I 0
RGB 152 I 155 I 0 RGB 194 I 108 I 0
RGB 160 I 155 I 0 RGB 203 I 121 I 48
RGB 130 I 134 I 0 RGB 210 I 147 I 58
RGB 251 I 251 I 231
Farben Overlay

Schriftdefinition
Überschrift Netto FF
Passend zu unseren neutralen und einfachen Illustrationen haben wir eine Schrift
gesucht, die sich geeignet in das Gesamtbild der App ergänzt. Nach Gesprächen
mit dem Dozenten und nach eigenen Recherchen hatten wir uns auf 3 Schriften
festgelegt: Meta Pro, Netto FF und DIN Pro. Schlussendlich wurde es die Netto FF.
Diese Schrift ist sauber und simpel genug um recht umfangreiche Texte auch
perfekt setzen zu können. Zudem ist sie wunderbar mit unseren festgelegten
Icons kombinierbar.
Fließtext Netto FF

Dschungel
Dschungel
Dschungel
Entwicklung Kartengestaltung
| 32
Entwicklung der Kartengestaltung
Eine große Herausforderung stellte die Gestaltung der Weltkarte dar. Uns war
es sehr wichtig, dass es zu einer klaren Abgrenzung zwischen dem Ökosystem
und der Weltkarte auf dem Startscreen kommt. Während dieser Entwicklung
entstanden viele Experimente mit unterschiedlicher Typografie, Formen und
farblichen Hintergrund.
Dschungel Dschungel
Dschungel
Dschungel
Dschungel Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Dschungel
Typografie als Abtrennung Bienenwaben als Abtrennung Strichhintergrund 20% Deckkraft
50 Linien

Entwicklung der Kartengestaltung
Abschließend haben wir uns für eine farbliche Unterscheidung zwischen Ökosystem
und Welt entschieden. Durch den farblichen Kontrast kommt es zu einer
eindeutigen Abtrennung beider Bereiche. Der Hintergrund wird in weiss gehalten,
dadurch wirkt der Startscreen in der kompletten App sehr einfach und klar.
RGB 161 I 176 I 0
Finale Gestaltung der Weltkarte

Analyse Navigation
| 34
Entwicklung Navigation
Wo sollen die Buttons stehen? Wie erkennt die Zielgruppe die Navigation? Mit
diesen Fragen hatten wir es bei der nächsten Projektphase zu tun. In diesem
Abschnitt war es für uns wichtig, die unterschiedlichen Möglichkeiten der Einblendungen
zu analysieren. Als Ziel definierten wir eine feste Navigation ohne
interaktive Anwendung. Es war uns wichtig, dass diese auf dem Startscreen,
das heißt gleich auf der ersten Seite für die Betrachter leicht zu erkennen ist.
Zusätzlich sollte sich die Navigation auf der linken Seite befinden, da sofort das
menschliche Auge dorthin wandert. Interaktionen wie das Ein- oder Ausklappen
könnte eher störend wirken oder einfach zu Beginn übersehen werden.
Deshalb war es wichtig eine klare, feste Navigation zu definieren.

Entwicklung Navigation
Ein Overlay ist zunächst nur eine von vielen Gestaltungsmöglichkeiten für
App-Oberflächen und wird häufig für eingeblendete Dialoge etc. verwendet.
Oft wird der Hintergrund halbtransparent eingeblendet. Wir wollten gerne
Overlays einsetzen, da sie Anwendern einen schnellen Überblick verschaffen
und und jede Art von Grafiken zeigen können. Dennoch sollte bei der App eine
Schließen-Schaltfläche verfügbar sein, da vielen Anwendern sonst nicht klar ist,
wie sie wieder zurück zum Start kommen. Zusätzlich musste bei den Overlays
die Transparenz und Schriften berücksichtigt werden, damit die Leserlichkeit
weiterhin vorhanden bleibt. Auf der linken Seite sieht man die Analyse zu dieser
Problematik. Schlussendlich favorisierten wir bei dem Tier-Overlay eine mittige
Platzierung. Bei kleinen Animationen-Overlays verändert sich die Platzierung je
nach ausgewähltem Link.

Entwicklung Navigation | 36
Entwicklung Navigation
Zurück, Weiter, Fertig, Beenden - alles muss richtig abgestimmt sein. Deshalb
war es für uns im Entwicklungsprozess eine große Herausforderung perfekte
Icons für diese Schaltflächen zu definieren. Allein die Festlegung von der
richtigen Farbe und Symbol nahm sehr viel Zeit in Anspruch. Ziel war es Navigationsicons
zu entwickeln, die sich perfekt an das bisher festgelegte Raster
anpassen.
Erste Navigationsvarianten
Zuerst wurden Buttons für den üblichen Gebrauch an der App gestaltet. Dazu
gehören ein Home-Button, ein Button für Tiermusik, ein Scroll-Button, ein
Beenden-Button und ein Informations-Button. Diese sind sowohl auf dem
Startscreen, als auch im Overlay oder im Regenwald eingesetzt
Finales Navigationsystem I 26p
>
+
>
-
Erste Varianten
Finales Navigationsystem I 40p
Dieser Button dient zur Orientierung in der Weltkarte und zum “Rein-/Auszoomen“
aus dem Startscreen. Zuerst wurde hier ein recht reckige Variante
gestaltet. Im Vergleich zu den anderen Icons passte dieser jedoch nicht
in das Gesamtbild. Nach langer Entwicklungsphase wurde ein vollkommen
rundes System gestaltet, dass sich durch die vollflächige Form und Farbe an die
gesamte App anpasst. Zusätzlich handelt es sich hier bei der Anwendung um
eine „kinderleichte“ Bedienung.

Entwicklung Navigation
Bestand des
Regenwaldes
2060
Damit der Betrachter auch den Bestand des Regenwaldes ohne Probleme auf
der App vergleichen kann, wurde eine Navigation entwickelt, die es ermöglicht
die Veränderungen des Regenwaldes nach Jahreszahl aufzuzeigen. In den ersten
Entwürfen wurde dabei viel Wert auf die Kombination von Punkten und Strichen
gelegt. Diese Entwürfe funktionierten zwar gut - dennoch passte es nicht in das
Gesamtbild der App. Zusätzlich konnte kein Platz für eine waagrechte Navigation
im Startscreen gefunden werden.
Heute
Letztendlich wurde eine senkrechte Variante entwickelt. Wir verzichteten dabei
vollkommen auf kleinste Linien als Orientierung, sondern marktierten besondere
Jahreszahlen mit einem grauen Kreis.
2012
1982
Erste “Scroll-Versuche“
Finaler Scroll-Button

Entwicklung Ökosystem Regenwald | 38
Ökosystem Regenwald
Und was an ihm so besonders ist.
Tropische Tegenwälder sind
hoher und vielschichter als
unsere Wälder. Dies ist einer
der Gründe für ihren enormen
Artentreichtum
Info
Welche Tiere leben auf welcher Höhe
Regenwälde
7% Fläche
Regenwald
recycelt Regenwasser
30m
Obere Baumschicht
Restliche Landmas
93% Fläche
20m
Untere Baumschicht
10m
Strauchschicht
Die Klimafunktion
Wälder erfüllen zw
1. sind sie ein gig
2. funktionieren v
flächen wie riesig
Krautschicht
Info

Entwicklung - Ökosystem Regenwald
Wir entschieden uns das Ökosystem so darzustellen, daß man durch scrollen
nach rechts immer weitere Informationen erhält in Form von Typografie,
Grafiken oder mit Hilfe von kleine Animation die ab einem bestimmten Punkt
automatisch ablaufen. So erhält der Betrachter einen schnellen Überblick über
das Ökosystem. Er kann jedoch auch weitere Informationen erhalten wenn er
die Info - Buttons anwählt wodurch noch mehr Informatiion zum jeweiligen
Thema angezeigt wird. Dadurch besteht auch die Möglichkeit weiterführende
Informationen zu erhalten.
Erster Entwurf zur Veranschaulichung der geplanten Animation
r
Regenwälder
90% Arten
Info
se
Restliche Landmasse
10% Arten
CO²
Jährliche CO²-Speicherung
durch intakte Wälder
8,8 Milliarden Tonnen CO²
Nährstoffkreislauf:
Im Regenwald zersetzten Pilze
die herabfallenden Blätter.
Info
CO²
Jährliche CO²-Freisetzung durch
Waldzertörung
10,6 Milliarden Tonnen CO²
der Wälder
ei wichtige Klimafunktionen:
antischer Kohlenstoffspeicher.
or allem große zusammenhängende Walde
Klimaanlagen.
Info
Besonderer Boden
Humus, Gesteinsschicht...
zurück zur Karte

Entwicklung Ökosystem Regenwald | 40
Ökosystem Regenwald
Und was an ihm so besonders ist.
Erster Entwurf mit Illustration in
Kombination mit Text und Grafiken
Zwischenschritt im Regenwald
Der Regenwald der Erde nimmt nur 7% ihrer Landmasse ein
und doch lebend dort 90% aller Arten
Regenwälder sind Schatzkammern der Natur.
Kein anderer Lebenraum beherbergt nur
annähernd so viele Tier- und Pflanzenarten.
Regenwälder kommen immer am Äquator
vor. Es herrschen dort das ganze Jahr konstante
Temperaturen. Deswegen sind diese
Areale so fruchtbar.
7% Fläche
93% Fläche
90% Arten
10% Arten

Überarbeitete Variante
der Illustrationen
Der Regenwald
recycelt Regenwasser
Illustrationen Regenwald
Nach dem ersten groben Entwurf, überarbeiteten wir die Illustrationen für den
Regenwald. Zunächst lag die Typografie direkt auf dem Hintergrund zwischen
den Pflanzen. Um eine eindeutigere Abgrenzung zu schaffen, gestalteten wir
Overlays auf denen die Informationen zu lesen sind. So können alle Informationen
plaziert werden und sind dennoch gut für den Betrachter lesbar. Bei einem
Überhälter
weiteren Zwischenschritt haben wir versucht Typografie auf dem Hintergrund
und Layout zu mischen. Das ging leider schief und war zu unübersichtlich. Tropische Tegenwälder Da-
sind
höher und vielschichter als
Die Klimafunktion her entschieden der Wälderwir uns für die Variante, dass schlussendlich alle unsere Information
Wälder. Dies ist einer
Wälder erfüllen auf Overlays zwei wichtige gezeigt Klimafunktionen:
werden.
der Gründe für ihren enor-
1. sind sie ein gigantischer Kohlenstoffspeicher.
men Artentreichtum
2. funktionieren vor allem große zusammenhängende
Waldflächen wie riesige Klimaanlagen.
30m
Obere Baumschicht
20m
Lebensraum für Tiere
Welche Tiere leben auf welcher Höhe ?
Untere Baumschicht
10m
Krautschicht
Besonderer Boden
Humus, Gesteinsschic

Entwicklung Ökosystem Regenwald | 42
Farbgebung Regenwald
Entgültige visuelle Darstellung
des Regenwaldes

Animation Regenwald
Nach der Weiterentwicklung der Illustrationen haben wir die Animation nach
einer ausführlichen Recherche mit Keynote gestartet. Keynote erschien uns
als einfachstes und effektivstes Umsetzungsmittel für Apple. In den ersten
Animationen konnte man noch genauer sehen was an welcher Stelle passiert
und konnte Punkte anwählen, die miteinander verlinkt waren. So wurde uns ein
erster Eindruck geschaffen, wie das Ökosystem endgültig aussehen könnte.

Entwicklung Overlay für Tiere | 44
Erster gestalterischer
Entwurf zum Tier-Overlay

Overlay für die Tiere
Wählt man auf dem Startscreen einen der Tierbuttons an erscheint ein Overlay
das die Informationen zu dem gewählten Tier enthält. Desweiteren habe wir
uns entschieden an dieser Stelle mit Fotografien zu arbeiten um einen realen
Bezug zum Tier herzustellen und um es von verschiedenen Seiten zu beleuchten.
In einem ersten Entwurf sammelten wir alle wichtigen Informationen und platzierten
diese auf einem quadratischem Overlay. Jedoch entstand dabei ein sehr
unübersichtliches Overlay. Seitlich gibt es eine Fotoleiste, bei der das jeweils
angewählte Bild größer abgebildet wird als die anderen Fotos.
Die
Entwurf des Countdowns:
Hier sollte nach Aufrufen des Overlays die Anzahl der
Tiere rückwärts laufen von der ursprünglichen Zahl bis zur
aktuellen Anzahl der Tiere
Entwurf Kategorisierung
der Gefährdung

Entwicklung Overlay für Tiere | 46
Zwergelefanten
Merkmale
Geschichte und Lebensraum
Anzahl heute
Die Zwergelefanten sind vor allem durch die Jagd,
den Verlust ihres Lebensraumes und den dadurch
entstehenden Konflikt mit den Menschen bedroht:
Vor allem für die Errichtung von Palmöl-
Plantagen wird ihr Lebensraum abgeholzt.
Zwergelefanten
Zwergelefanten sind
„stark gefährdet !“!
Mehr Informationen zu:
Ökosystem Regenwald
Entwurfsvariante „Olive“

Anzahl Heute
Die Zwergelefanten leben in
kleinen Rudeln zwischen 5 und
15 Tieren. in der Regel gibt es
einen Leitbullen der das Sagen
hat...
8650 Tiere (Anzahl 1900)
Bedrohung
Die Zwergelefanten sind
vor allem durch die Jagd,
den Verlust ihres Lebensraumes
und den dadurch
entstehenden Konflikt mit
den Menschen bedroht:
Vor allem für die Errichtung
von Palmöl- Plantagen
wird ihr Lebensraum
abgeholzt.
350 Tiere (Anzahl Heute)
Bedrohung
Die Zwergelefanten sind
vor allem durch die Jagd,
den Verlust ihres Lebensraumes
und den dadurch
entstehenden Konflikt mit
den Menschen bedroht:
Vor allem für die Errichtung
von Palmöl- Plantagen
wird ihr Lebensraum
abgeholzt.
╳
Overlay für die Tiere
Wir vereinfachten das Overlay, Reduzierten die angezeigten Informationen.
Bei der neuen Variante erscheint nur jeweils zu einem Foto eine passende
Information. Scrollt man sich durch die Bildleiste kommen Texte und erklärende
Grafiken, so erhält man die Informationen „häppchenweise“ nicht wie vorher
alle auf einmal. Wir spielten mit den Farben und der besseren sichtbarmachung
des Overlays durch Abdunklung des Hintergrund bzw. Transparenter werden
des Hintergrundes.Des Weiteren erstellten wir verschiedene Anordnungen von
Text und Bild.
Zwergelefanten Sind Stark gefährdet !!!
Gründe der Gefährdung
Geschichte und Lebensraum
Merkmale
Zwergelefanten
Gefährdungsgrad
Entwurfsvariante „Orange“ Entwurfsvariante „Dunkel-Olive“ Entwurfsvariante „Schwarz“

Entwicklung Overlay für Tiere | 48
Japan
Zwergelefanten
Anzahl Heute 387
stark gefährdet
Merkmale
Gewicht
bis zu 5 Tonnen
Größe
2 bis 3 Meter hoch
Nahrung
Gras, Früchte, Blätter...
Anzahl Junge 1
Tragezeit
22 Monate
Alter
55 bis 70 Jahre
Lebensraum Insel Borneo (Indonesien)
Bedrohung
Die Zwergelefanten sind vor
allem durch die Jagd, den
Verlust ihres Lebensraumes
und den dadurch entstehenden
Konflikt mit den
Menschen bedroht: Vor
allem für die Errichtung von
Palmöl- Plantagen wird ihr
Lebensraum abgeholzt.
Westghats
Sri Lanka
Philippinen
Indonesien
Madagaskar und Inseln
des Indischen Ozeans

Overlay für die Tiere
Zum Schluss entstanden Overlays mit einem weißen schlichten Hintergrund
und schwarzer Font im Vordergrund. Farbliche Akzente werden durch die olivegrünen
Buttons geschaffen. Durch dieses relativ ruhige Design wirkt der
Vordergrund harmonisch mit dem Hintergrund und es kommt zu keiner
Differenzierung zwischen beiden Ebenen.

Endprodukt Animation

Animation “Bedrohte Tierarten“ | 52
App-Startseite “Bedrohte Tierarten“
Bildschirmgröße: 24 Zoll
Startscreen mit Weltkarte und Navigation

Auswahl “Bestand Regenwald“
Navigationsbutton “Ist Aussterben normal?“

Animation “Bedrohte Tierarten“ | 54
Navigationsbutton “Mensch als Ursache“
Zoomstufe 1

Zoomstufe 2
“Tier-Overlay“

Animation “Bedrohte Tierarten“ | 56
Overlay Regenwald
Detailansicht Overlay

Detailansicht Overlay
Startscreen “Bedrohte Tierarten“

| 58

| 60