< Portfolio | Alicia Hardegen
Back
cover photo colorvariator

Colorvariator

Design Tool

Tools: Atom (Text-Editor), Illustrator, Figma, Miro
Team: Alicia Hardegen, Bianca Tillmann
Kurs: System Design
Ziel: Ein bestehendes Tool zu verbessern oder neu zu kreieren.

original App

Idee

Je nach Farbigkeit kann eine Illustration ganz anders wirken. Um die Beste Farbpalette für ein bestimmtes Projekt zu wählen, wurden in den vorigen Semestern mithilfe von Illustrator und Referenzbildern schon zahlreiche Farbvarianten gebildet. Dieser Prozess ist jedoch sehr umständlich und zeitintensiv. Deshalb war unsere Idee, ein Tool zu generieren, das automatisch Vektorillustrationen anhand von Referenzbildern umfärbt.

Analyse

Um eine Logik zum Umfärben zu entwickeln, führten wir zwei verschiedene Analysen durch. Zum einen betrachteten wir den Aufbau von Bildern genauer, mit der Fragestellung, wodurch ein Fokus entsteht, und zum anderen analysierten wir den Prozess der bisherigen Umfärbungen. Eine der zentralen Erkenntnisse aus den den beiden Analysen war, dass die Sättigung und Helligkeit einzelner Elemente maßgeblich über den Fokus und die Wirkung eines Bildes entscheiden. Die Farbe (Hue) an sich spielt dabei keine große Rolle. Mit diesen Erkenntnissen kreierten wir unsere Logik zum Umfärben.

design principles
information architecture

Interface

Während der Automatismus der Umfärbung kreiert wurde, entstand das Interface. Nach Überlegungen, welche Elemente implementiert werden sollten, wurden erste Wireframes erstellt.

Coding

Um herauszufinden, ob unsere Überlegungen zur Umfärbung funktionieren, setzten wir unser Tool um. In vielen kleinen Schritten schrieben wir ein Programm, das die Farbwerte aus PNG- und der Vektordateien herausliest, ordnet und auf Basis der neuen Systematik die Vektordatei umfärbt.

wireframing sketch
variations statistics

Produkt

Im Rahmen des Kurses Systemdesign wurde ein Grundgerüst für ein Tool entwickelt, das es ermöglicht, Farben aus einem Bild zu filtern und diese auf eine SVG-Datei übertragen. Die Programmierung lässt neue harmonische Farbkombination entstehen. Es wurde ein Arbeitsumfeld geschaffen, das dem Nutzer zusätzliche Einstellungsmöglichkeiten gibt und die Weiterverwendung der Variation ermöglicht.

lightbulb

Learnings

Durch dieses Projekt habe ich mich sehr intensiv mit Farbmodellen beschäftigt. Auch meine Codingskills konnte ich erweitern. So habe ich mich z.B. mit jQuery und Regular Expression beschäftigt.