Elisabeth Scheer Portfolio Interaktionsgestaltung

Colour Code – Trainiere deinen Farbgenerator

Im Kurs System Design ging es darum, mithilfe von Machine Learning die Verbindung zwischen Adjektiven und Farben zu untersuchen und am Ende einen Farbgenerator zu programmieren.

SYSTEM DESIGN // 4. SEMESTER // TEAM: JASMIN CZIBORRA, XINLEI QI, ELISABETH SCHEER // BETREUT VON PROF. BENEDIKT GROß UND PROF. HARTMUT BOHNACKER

sysdes-keyvisual-1


Die Feuerwehr ist rot, Banken sind blau, Bio ist grün. Farbcodes begegnen uns im Alltag immerzu. Wir sind umgeben von Produkten, deren Farben bewusst gewählt wurden. Es scheint, bestimmte Zusammenhänge zwischen Farben und der menschlichen Wahrnehmung zu geben. Auch die Farbpsychologie schreibt Farben bestimmte Bedeutungen zu.

 

Welche Farbe soll ich nehmen?

Vor allem für Designer ist die Frage nach der Wirkung von Farben entscheidend. Oft gibt es bestimmte Vorgaben dafür, wie ein Design wirken soll und die Frage ist, welche Farbe die richtige ist, um die gewünschten Eigenschaften des Designs widerzuspiegeln. Welche Farbe hat beispielsweise ein Logo, das modern wirken soll oder eines, das eine seriöse Marke verkörpert?

 

Ein Farbgenerator für Designer

Ausgangsidee war ein Tool für Desinger zu schaffen, mit dessen Hilfe bessere Farbentscheidungen getroffen werden können. Dieses Tool wollten wir mithilfe von Machine Learning trainieren.

real-slider

Anhand von Schiebereglern können die Farben beurteilt werden

real-konfetti

Gamification-Elemente ermuntern zum Weitermachen

farbgenerator

Im Farbgenerator-Interface können die Trainingsepochen bestimmt werden und die bewerteten Farben werden unten angezeigt

Machine Learning

Das Ziel war mit einem Neuronalen Netzwerk Gesetzmäßigkeiten zwischen Farben und deren Wirkung festzustellen. Zunächst brauchten wir Daten, die etwas darüber aussagten. Dafür entwarfen wir eine eigene Umfrage. Die Erstellung der Umfrage sowie der Launch auf der dazugehörigen Webseite nahmen einen großen Teil des Projektes ein. Anforderungen an die Umfrage waren, diese so zu gestalten, dass einerseits die richtigen Daten dabei herauskamen, andererseits sollten so viele Leute wie möglich gerne mitmachen, was wir durch einige Gamification-Elemente erreichten.

Mit den erhobenen Daten trainierten wir das Neuronale Netz und programmierten einen Farbgenerator. Das besondere: Jeder Nutzer kann den Farbgenerator anhand seiner eigenen Daten trainieren. Wie das funktioniert, am besten gleich selbst ausprobieren: www.colour-code.de

 

Featured by Fonts in Use: https://fontsinuse.com/uses/34345/colourcode-game

 

Meine Aufgaben
Research
Konzept
Frontend Gestaltung

Tools
JavaScript
node
CSS
HTML
Figma