Projektthema
Der Kurs befasst sich mit der Gestaltung und Entwicklung einer interaktiven Anwendung,
die im Kontext von Ausstellungen, Museen oder Messen Wissensgebiete verständlich
erfahrbar macht.
Inhalt des Faches Ziel ist das Kennenlernen grundlegender Zusammenhänge im Bereich der Mensch-Computer-Interaktion und der Informationsgestaltung. Die Studenten befassen sich mit grundlegenden Interaktionsformen und medienspezifischen Gestaltungsproblemen, der Beziehung von Text, Bild und Animation sowie der protoypischem Umsetzung oder Simulation solcher Anwendungen.
Im Kurs Interaktive Kommunikationssysteme ging es darum, ein System zu gestalten, das Menschen ermöglicht, Inhalte eigenständig zu entdecken und zu verstehen. Ziel war es, ein Thema so aufzubereiten, dass es in einem Ausstellungsrahmen anschaulich, interessant und für Menschen mit unterschiedlichem Vorwissen zugänglich ist.
Zu Beginn wurden uns zwei Themen aus einem Lexikon zugelost, aus denen wir eines auswählen sollten. Wir entschieden uns als Gruppe für das Thema Pilze, da uns die Verbindung zu Natur und Nachhaltigkeit besonders angesprochen hat. Unser Ziel war es, ein interaktives System zu entwickeln, das die Vielseitigkeit von Pilzen zeigt und deren mögliche zukünftige Nutzung auf verständliche und visuell ansprechende Weise vermittelt.
Projektform und Ziel
Wir haben ein interaktives Informationsmodul für einen großen Bildschirm entwickelt. Nutzerinnen und Nutzer können sich per Klick eigenständig durch die Inhalte bewegen und diese im eigenen Tempo entdecken.
Das Format erlaubt eine klare Darstellung komplexer Themen, ohne alle Inhalte gleichzeitig zeigen zu müssen. So können sich die Besucherinnen und Besucher gezielt mit Aspekten des Themas Pilze beschäftigen.
Da das Thema sehr vielfältig ist, war eine gute Struktur zentral. Unsere Informationsarchitektur haben wir im Laufe des Projekts mehrfach überarbeitet und weiterentwickelt.
Illustrationen
Pilz Prozess
Ein zentrales Element unseres visuellen Konzepts war die Gestaltung eines Pilzmotivs, das sich durch das gesamte Informationsmodul zieht. Wir haben uns bewusst für den Austernpilz entschieden, da er zu den wenigen Pilzarten gehört, die Lignin abbauen können.
Die Abbildung zeigt den gestalterischen Entwicklungsprozess: von einer ersten, detaillierten Zeichnung bis hin zur finalen, reduzierten Form. Schritt für Schritt haben wir den Pilz vereinfacht, Farben angepasst und die Linienführung überarbeitet, um ihn stilistisch an das restliche Design anzupassen. Diese Entscheidung war wichtig, um ein klares, ruhiges Gesamtbild zu schaffen und gleichzeitig die Wiedererkennbarkeit zu erhalten.
Hintergrund Prozess
Nachdem wir den Illustrationsstil für unseren Austernpilz definiert hatten, setzten wir den Gestaltungsprozess mit dem Startbildschirm fort. Dafür erstellten wir zunächst digitale Zeichnungen, die anschließend in Adobe Illustrator ausgearbeitet wurden.
Im weiteren Verlauf des Gestaltungsprozesses entwickelten wir mehrere Varianten mit unterschiedlichen Hintergrundfarben, da die erste Version durch ihre dunklen Farbtöne zu schwer wirkte. Daher entschieden wir uns für eine hellere Farbpalette und ergänzten den finalen Screen um animierte Elemente wie Wolken und Sonnenstrahlen, um Bewegung zu erzeugen und die visuelle Wirkung zu steigern.
Icon Prozess
Nachdem die finale Informationsarchitektur festgelegt war, widmeten wir uns der Gestaltung unserer Icons. Auf Basis eines zuvor definierten Illustrationsstils entwickelten wir verschiedene Varianten, die diesen Stil konsequent aufgriffen.
Da wir uns frühzeitig auf eine feste Farbpalette festgelegt hatten, entschieden wir uns bewusst gegen einen bunten Hintergrund. Stattdessen gestalteten wir den Hintergrund aller Komponenten einheitlich, um gestalterische Konsistenz und Klarheit im Design zu gewährleisten.
Auch für die Darstellung der Schadstoffe, die später per Drag & Drop in den Boden gezogen werden sollten, wendeten wir dasselbe gestalterische Prinzip an.
Während des gesamten Entwicklungsprozesses arbeiteten wir konsequent mit Komponenten und folgten dabei einem klar definierten Gestaltungsprinzip: Interaktive beziehungsweise klickbare Elemente wurden mit einem matten Grünton hinterlegt, während nicht interaktive Elemente durch einen helleren Grünton in Kombination mit einer schlichten Kontur gekennzeichnet wurden.
Somit entstand eine einheitliche Darstellung, um die Benutzeroberfläche möglichst intuitiv und für alle Zielgruppen zugänglich zu gestalten.
Endergebnis
Das Endergebnis ist ein interaktiver Prototyp, der mit Protopie realisiert und klickbar umgesetzt wurde.
Die folgenden Screens stellen die finalen und wichtigsten Ansichten unseres Prototyps dar: