In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Im Rahmen dieses Kurses habe ich mich für die Verwirklichung eines Brandings entschieden. Dabei soll JEKYLHYDE als Tool fungieren, das Nutzern dabei hilft, sich online ein Outfit zusammenzustellen. Auf Basis einiger Persönlichkeitsfragen wird ein „Ratio“ ermittelt, das die Auswahl der angezeigten Klamotten bestimmt. In einem digitalen Schrank wird Nutzern das Onlineshopping erlebbar gemacht.
Link zum Tool (Desktop):
https://www.figma.com/proto/Fae5GBNvJDAzuMW4ByuqFI/KD3_Brand_myJnH?page-id=650%3A13113&node-id=2239-54934&t=JOj45ZpsUGXTbdUJ-0&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=2239%3A54934
Zu Beginn dieses Projektes hatte ich noch eine ganz andere Vorstellung als das, was am Ende des Semesters bei diesem Projekt entstanden ist.
Anfangs wollte ich eine Brand schaffen, die Kleidung anbietet, und zwar primär für Männer, die einen flexiblen Kleidungsstil für ihren Berufsalltag und zugleich in ihrer Freizeit benötigen. Der Kerngedanke, dass JekylHyde eine Dualität mit sich bringt, war überwiegend auf die Verbindung zwischen Arbeits- und Privatleben bezogen. Die Möglichkeit, mit einem Konfigurator ein Outfit zu gestalten, galt hier überwiegend als praktisches „Add-On“.
In einem längeren Feedback mit Alexey habe ich dann mein Branding neu ausgerichtet und ein neues Identitätsprisma angefertigt. Nun widme ich mich vollends dem Outfit- Tool und versuche eine interessante Story einzubinden und einen Konfigurator zu bauen, der Spaß in der Benutzung macht.
Folglich habe ich das Identitätsprisma überarbeitet und auch die Zielgruppe angepasst. JekylHyde ist nun ein Tool für Menschen, die gewillt sind, sich mit ihren inneren Prozessen zu beschäftigen und sich auf ein Tool einlassen, dass sie bei der Wahl der Klamotten an die Hand nimmt.
Seit Anfang an wollte ich eine Dualität in meinem Stil ausdrücken. Schnell war klar, dass der Jekyl-Stil, der sich aus dem ähnlichnahmigen Roman ableiten ließ, für Eleganz und Seriösität steht. Der Hyde-Stil sollte für Chaos und dem Explorativem stehen.
Die Schwierigkeit bestand nun darin, beide Stile zu vereinen, weshalb ich mehrere Moodboards anfertigte.
*Zusätzlich war ich zum Zeitpunkt der Erstellung dieser Moodboards noch der Auffassung, eine Brand zu schaffen, die eigene Klamotten anbietet, weshalb einige „Mockupähnliche“ Klamotten zu sehen sind
Schlussendlich habe ich mich auf eine Kombination der beiden Moodboards geeinigt. Ich habe nach Klamotten gesucht die die jeweiligen Stile repräsentieren und dennoch sich ergänzen.
©Niklas Möller
Die freigestellte Klamotten sind ein präsentes Thema auf Tool/Website und bestimmten später auch stark die Bildwelt.
Zunächst ist das ratio „70% Jekyl und 30% Hyde“ beispielhaft abgebildet. Anzugshosen , Lackschuhe und Mäntel sind typisch für diesen Stil.
Dann folgt das ratio „50% Jekyl und 50% Hyde“.
Lässige Hemden werden hier mit trendigen Sneakern kombiniert.
Und dann ist das ratio „70% Hyde und 30% Jekyl“ beispielhaft abgebildet. Kleidung in urban-techlook mit besonderen Schnitt ist typisch für den Stil.
Bei der Entwicklung des Logos habe ich mich einige Zeit in Illustrator aufgehalten. Darin habe ich zunächst mit Schriftarten experimentiert, auf der Suche nach zwei sich ergänzenden Schriften, die die Verbundenheit der beiden Stile dieses Brandings ausdrücken.
Der erste Screenshot zeigt das Ergebnis dieser Experimente. Die Kombination aus einer Serifenschrift für „Jekyl“ und einer serifenlosen Schrift für „Hyde“ erwies sich dabei als ästhetisch uns sinnhaftig passend.
Bemerkung: Bei einigen Logos wurde „Jekyl“ noch mit einem zweiten „L“ geschrieben, später habe ich mich auf die Variante mit nur einem dieser Konsonanten festgelegt.
©Niklas Möller
Da die vorherigen Logoideen noch zu unruhig waren habe ich mich an die Entwicklung eines cleaneren Logos gesetzt. Dafür habe ich mit den Schriften Garamond Premiere Pro und Roboto Light gearbeitet.
Um zu betonen, dass die Verwendung des Tools nicht auf ein bestimmtes Geschlecht beschränkt ist, habe ich zwei Silloutten erstellt.
Außerdem habe ich ein anfängliches Logo, das auf einem isometrischen Raster basierte, weiter entwickelt.
©Niklas Möller
Als finales Logo dient nun der Schriftzug
JEKYLHYDE.
Für den ersten Bestandteil des Wortes habe ich Garamond Premiere Pro Regular gewählt, eine Schrift die dank ihrer Serifen eine Eleganz und Seriösität austrahlt.
Für den zweiten Bestandteil fand die Schrift Roboto Light ihre Verwendung, die sich durch ihre Serifenlosigkeit zwar grundlegend von Garamond unterscheidet, durch die Wahl des Schriftschnittes dennoch einen Übergang darstellt.
Für weitere Anwendungszwecke, z.B. auf der Handyversion, habe ich weitere Logos entwickelt, die auf dem vorherigen basieren.
©Niklas Möller
Neben den Logos habe ich auch in Illustrator damit begonnen ansprechende Schriften und font pairings zu finden. Hier ist mir aufgefallen, dass die Kombination der Schriften Garamond Premiere Pro und Roboto viel Spielraum für Varianten bieten.
©Niklas Möller
Die primären Schriftarten sind Garamond Premiere Pro und Roboto Light. Ähnlich wie beim Logo wird bei „Jekyl“ Garamond Premiere Pro verwendet, während bei „Hyde“ Roboto Light genutzt wird. Um die Dualität und zentrale Verbundenheit beider Stile zu verdeutlichen, habe ich manchmal bewusst die obige „Regel“ missachtet.
Mit der Intention, Elemente zu entwickeln, die das Tool dekorativ aufwerten, aber nicht zu störend wirken, sind die folgenden entstanden.
Diese Elemente kommen stets in den Farben 6563EC oder CEFE5E vor. Der Stern steht dafür dass das Tool unisex genutzt werden kann. Die Zahnräder treten beim Konfigurator auf. Der Glitch steht auch für die verrückte Persönlichkeit, die der Hydestil verkörpert. Die Gesichter werden subtil eingesetzt und betonen, dass das Tool unisex genutzt werden kann.
©Niklas Möller
Gerade bei Bereichen des Konfigurators finden die in Ilustrator angefertigten Münzen ihre Verwendung. Sie symbolisieren die Dualität der beiden Tools und implizieren einen schnellen Wechsel zwischen beiden Stilen.
©Niklas Möller
Auch in Illustrator und mit dem Onlinetoool Coloors habe ich Farbpaletten generiert. Für mich und das visuelle Erscheinungsbild des Tools stand fest, dass es einige schlichte Grundfarben geben soll, die dann um auffällige Akzentfarben ergänzt werden.
©Niklas Möller
Weiteres Feedback hat dazu beigetragen, dass die finale Farbpalette entstanden ist. Das Tool verwendet nun eine Farbpalette aus 6 Farben. Die Farben 6563EC und CEFE5E stehen für den energetischen Hydestil. Farben wie FDF7E6 betonen die ruhige Präsenz des Jekylstils.
Für eine Grundstruktur dienen schwarz, weiß und ein schlichter Grauton (A1A1A1).
©Niklas Möller
Hier sieht man noch erste Skizzen zu dem Aufbau der Website. Dieser damalige Stand – zum Zeitpunkt der Zwischenpräsentation – zeigt noch die Idee einer Brand, die Kleidung verkauft und zusätzlich ein Outfit-Tool anbietet. Die Skizze zeigt zunächst einen Konfigurator und im Anschluss unter „Products“ eigene Klamotten der Marke. Die ursprüngliche Idee bestand darin, Kleidungsstücke wie einen Hoodie durch drehen eines Schiebereglers entweder in den Jekyl-Stil oder in den Hyde-Stil ausrichten kann.
Die Skizze dieser Wireframes habe ich anschließend in FIGMA umgesetzt.
Dabei habe ich mich endlich auf einen Stil festgelegt, mit dem ich die Dualität zwischen Jekyl und Hyde ausdrücken konnte: Während buttons mit eine comicähnlichen Schatten den Hydestil repräsentierten, sorgten filigrane Linien für die gewisse Implementierung des seriösen Jekylstils.
Stilistisch und farblich habe ich an dieser Idee weitergearbeitet, jedoch war das Feedback der Zwischenpräsentation Auslöser dafür, das Konzept dieses Brandings etwas zu verändern.
Unter „Our Products“ hatte ich nämlich damit begonnen, eigene Klamotten zu designen, die dann mithilfe eines Schiebereglers verändert werden sollten. Von diesem Gedanken habe ich mich folglich allerdings gelöst.
©Niklas Möller
Hier sieht man die ersten Designs, die ich anfänglich in Photoshop entwickelt hatte.
Dass ich mich von der Absicht, eigene Klamotten zu designen, entfernt hatte, war ein großer Meilenstein für den Fortschritt in diesem Branding.
Nun war klar für mich, dass ich mit einer Kombination aus freigestellten Klamotten, dekorativen Elementen und farbigen Gradienten den typischen visuellen Charakter dieses Tools erzeugen will.
Da das Tool nun deutlich an Komplexitität zunahm, habe ich mich erneut an ein skizziertes Website Wireframe gesetzt.
©Niklas Möller
Die Frage, wie ich es schaffe, ein interaktives Tool technisch in FIGMA umzusetzen, hat mich einige Zeit beschäftigt. Anfangs habe ich mit properties gearbeitet, hatte jedoch Schwierigkeiten damit, dieses mit Variablen zu verknüpfen, was dazu führte, dass man die Klamotten vorerst nur im Design-Modus wechseln konnte.
Also erhielt jede Klamotte ihren eigenen frame, die ich dann zu einem komplexen component set zusammengeführt habe.
Diese 3 Screenshots zeigen wie sich das Tool in der Desktopvariante schrittweise in den letzten 5 Wochen verändert hat. Dank der obigen Papierskizze des Wireframes konnte ich mich vollends auf Interaktionen und Prototyping in FIGMA fokussieren, während ich die Wireframes „abarbeite“.
Nun war ich weitesgehend fertig mit der Desktop-Variante des JekylHyde-Tools. Also habe ich den „JH-Ratio“-Screen sowie den „Generator“-Screen noch in die mobile Variante übertragen, die später auch unter den Touchpoints Verwendung fanden.
©Niklas Möller
Da JekylHyde ein Tool sein soll, das den Alltag seiner Nutzer angenehmer gestaltet, folgen nun Touchpoints im „Real Life, zum Beispiel beim Warten am Gleis in der U-Bahn.
Auch in der Innenstadt selbst gibt es einige „Billboards“ und „Signboards“, die den Nutzer auf das Tool aufmerksam machen sollen.
Werbeaufsteller und Werbegeschenke
Über einen sich bewegenden Screen mit QR Codes wird die Aufmerksamkeit der Passanten gewonnen. Sie können dann den QR-Code scannen.
©Niklas Möller
Benutzung des Tools am Desktop
Verwendung des Tool in mobiler Ansicht
©Niklas Möller
Hinweis: Da die PDF durch die zahlreichen Images zu groß geworden ist, folgt hier ein Link zur FIGMA-Präsentation.
Ein Projekt von
Niklas Möller
Fachgruppe
KommunikationsdesignArt des Projekts
Keine Angabe
Zugehöriger Workspace
Designprojekt 1: Brand (Gruppe A)Entstehungszeitraum
Wintersemester 2025 / 2026