In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Manche Lebewesen können mittels chemischer Reaktionen ihr eigenes Licht erzeugen. In „Lumisense“ können die Nutzenden in die leuchtende Welt dieses Phänomens eintauchen. Die interaktive Website lädt dazu ein, die verschiedenen Ausprägungen der Biolumineszenz eigenständig aufzuspüren und Details zu den individuellen Nutzungsweisen und dem evolutionären Vorteil in der Natur zu erfahren.
Scroll-Through: dieser Screencast zeigt alle Stellen, an denen Tiere entdeckt werden können.
Click-Through: dieser Screencast umfasst alle Tiere mit Unterseiten, die entdeckt werden können.
Nachdem ich im Pitchdeck bereits eine erste Idee für ein mögliches Exponat hatte, habe ich diese und noch alternative Umsetzungen in dieser Woche ausgearbeitet (siehe Bild).
Ich war thematisch noch sehr offen und habe sowohl in Richtung rein spekulatives Design in Bezug auf die bionischen Potentiale der Biolumineszenz gedacht als auch in Richtung evolutionärer Vorteile für bestimmte Tierarten.
In dieser Woche habe ich mich für den thematischen Umfang meines Exponats festgelegt. Ich habe mir überlegt, dass ich in der Umsetzung sowohl den evolutionären Aspekt als auch die bionischen Potentiale der Biolumineszenz verarbeiten möchte. Dabei sollte die menschliche Faszination für das natürliche Leuchten die beiden Aspekte auf interaktive Weise verbinden und nahbar für die Besuchenden machen (siehe Bild).
Ende April habe ich außerdem begonnen meine Recherche für die Bionik zusammenzustellen, um zu sehen, wie viel dieses Themengebiet im Bereich Biolumineszenz überhaupt hergibt.
Dabei bin ich auf sechs verschiedene Disziplinen gekommen (siehe Bild).
In dieser Woche habe ich Recherche betrieben für die einzelnen Tierarten, an deren Beispiel ich den evolutionären Nutzen der Biolumineszenz aufzeigen möchte, sowie für bionische Umsetzungen für den Menschen.
Im Mai habe ich begonnen einen Prototypen meiner Website bei Figma zu visualisieren.
Ich habe zunächst eine Unterseite ausgearbeitet und mit Inhalten befüllt, um zu sehen, wie ich die Informationen spannend aufbereiten kann.
Da viele der zur Verfügung stehenden Fotografien der Lebewesen sehr unterschiedliche Qualitäten hatten, habe ich mir überlegt diese einheitlich in einer Bitmap-Optik zu verfremden. Bei Mouse-Hover sollte der User aufgrund der Informationsvermittlung dennoch das unbearbeitete Bild sehen. Die Bitmap-Optik habe ich gewählt, da ich mir diese gut in futuristischen Science-Fiction Kontexten vorstellen konnte.
In dieser Woche habe ich weiter prototypisch in Figma gearbeitet und mir erste Gedanken zu meiner Homepage gemacht, auf welcher man die Lebewesen am Ende aufspüren soll. Dort habe ich zum ersten Mal die Skala angedacht, welche die derzeitige Tiefe anzeigen sollte.
Nach Rücksprache habe ich bei den Unterseiten nun Videos als Starter-Section eingebaut, die das Interesse der User wecken sollen. Auch die Bitmap-Optik zur Bildverfremdung habe ich wieder verworfen, und habe Bearbeitungen ausprobiert, die besser mit den Videos harmonieren würden.
In dieser Woche habe ich endlich meine Umsetzung in Webflow in Angriff genommen. Ich habe mit dem wichtigsten Aspekt begonnen, nämlich dem Custom Cursor in Form eines Lichtkegels, mit dem man die Home-Seite erkunden kann. Nach dem ich ein bisschen herumprobiert habe, hat mein Lichtkegel jetzt eher einen bläulichen Rand, der die Farben der Unterseiten wieder aufgreift.
Ich habe zudem begonnen meine Webflow-Sections und Classes für die Home-Seite und die Unterseiten anzulegen.
Varianten Lichtkegel bei Webflow
In dieser Woche habe ich vor Allem an meinen Texten gearbeitet. Für das User-Testing an diesem Tag habe ich meine Home-Seite und eine Unterseite weiter ausgearbeitet.
Mich hat beim Testing vor Allem die Home-Seite interessiert. Folgende Fragen hatte ich mir überlegt:
Ich habe das Feedback bekommen, dass mein bisheriges Hover-Signal hilfreich ist, aber es ein bisschen abgewandelt werden muss. Ich habe zwei Effekte angewendet (der Lichtkegel verändert seine Größe und das gefundene Tier flackert -> das Flackern war zu viel)
Der Hintergrund braucht mehr differenzierbare Elemente, damit man bei der Suche mit dem begrenzten Sichtfeld des Lichtkegels nicht die Orientierung verliert.
Ein 1:1 Maßstab ist nicht möglich, da die Tiere stark in der Körpergröße variieren.
Eine Lösung, die wir diskutiert hatten, wäre die Proportionen der Tiere zueinander anzudeuten. Neben den realen Größen in cm bzw. m-Angabe, die bereits auf den Unterseiten existieren, könnte man noch Illustrationen ergänzen, die eine Person in Relation zu dem jeweiligen Tier zeigen. So können sich die Besucher mehr unter der wahren Größe der Tiere vorstellen.
Ich habe zudem gemerkt, dass es teilweise nicht sofort verständlich war, dass sich der Lichtkegel mit der Maus bewegt. Das werde ich in den kommenden Wochen berücksichtigen und evtl. eine Art Signal einbauen, damit der User das versteht. Vermutlich wird sich das jedoch in der Ausstellungssituation von alleine lösen, da die Besuchenden dort eine Computermaus vor sich liegen haben werden. Bei dem Testing an meinem Privat-PC war das Mousepad wahrscheinlich verwirrend.
In der Woche habe ich alle benötigten Bilder, sowie Videos für meine Unterseiten zusammengetragen und mir die Quellen vorgemerkt.
Außerdem habe ich mich für die Bildbearbeitung final festgelegt.
Für die Homepage wollte ich einen diffusen Look, welcher speziell die Leuchtorgane der Tiere hervorheben sollte.
Für die Unterseiten hatte ich mir eine Bildbearbeitung überlegt, die wie die Ansicht auf einem alten Screen mit Rauscheffekt wirken sollte. Das sollte den geplanten SciFi-Charakter meiner Website betonen.
Im Gespräch hat sich herausgestellt, dass sich die Gestaltung der Fotografien auf der Homepage mit der auf den Unterseiten beißt, sodass ich mich für eine Art der Bearbeitung festlegen musste.
Ende Juni habe ich meine Recherche finalisiert und gleichzeitig an meiner Website weitergearbeitet.
Zudem habe ich mein Konzept in dem Prozess leicht abgewandelt. Zu Beginn wollte ich neben den biolumineszierenden Tierarten auch noch existierende und spekulative bionische Anwendungen als klickbare Elemente einbauen. Um Verwirrung für die Besuchenden zu vermeiden, habe ich mich entschieden die bionischen Anwendungen an passenden Stellen in den Unterseiten der Tiere einzubauen.
Die Natur und Technik auf der Homepage zu trennen, hat sich stimmiger angefühlt, als diese Bereiche zu sehr zu vermischen. Diese Entscheidung hängt auch damit zusammen, dass im Bereich der Biolumineszenz-Bionik noch viele Projekte auf spekulativer Ebene ablaufen.
In dieser Woche habe ich außerdem die Tiefenzonen für die maritimen Organismen meiner Website recherchiert und festgelegt, und prototypisch bei Figma in einer sinnvollen Reihenfolge angeordnet.
Anfang Juli habe ich bei Webflow weitere Features für die Homepage hinzugefügt:
In der Woche vor der Werkschau habe ich meine gesamten Inhalte in die Unterseiten eingepflegt und meine Sections noch einmal angepasst.
Außerdem musste ich die gesamte Website noch einmal für meinen finalen Ausstellungsscreen anpassen, da dieser erheblich größer ist, als der Bildschirm meines Privat-PCs auf welchem ich die Website bis dahin bearbeitet habe.
Für die Ausstellungssituation habe ich noch ein kleines Teaserplakat entworfen, auf welchem kurz das Exponat sowie das vereinfachte Prinzip der Biolumineszenz erklärt wird.
PDF Plakat (komprimiert für Incom)
Als Goodies für die Besuchenden habe ich zudem drei verschiedene Sticker- und zwei Postkartenmotive erstellt. Auf den Rückseiten der Postkarten lassen sich verschiedene Kurzinformationen zu Biolumineszenz finden.
Postkarten:
Stickermotive: