INDUSTRIE
UI/UX Design
Tool
Figma
YEAR
2023
Code Ivy Webdesign
Über Code Ivy
Als Werkstudent im Bereich Webdesign bei Code Ivy war ich für die Gestaltung der unternehmenseigenen Website in Figma verantwortlich – von der Seitenstruktur bis zum visuellen Aufbau. Die Entwicklung übernahm ein separates Team, aber ich leitete den Designprozess und sorgte für eine reibungslose Übergabe.
Ziel war es, eine Website zu entwickeln, die die Werte von Code Ivy widerspiegelt: Kreativität, Funktionalität und Geschwindigkeit. Statt auf ein Standard-Template zurückzugreifen, haben wir ein individuelles Design erstellt, das klar kommuniziert und auf Conversion ausgerichtet ist.
Meine Aufgaben umfassten:
Gestaltung responsiver Layouts in Figma
Aufbau eines modularen Designsystems mit wiederverwendbaren Komponenten
Strukturierung von Inhalten für Klarheit und Nutzerführung
Vorbereitung entwicklergerechter Dateien zur Übergabe
Herausforderung
Eine der größten Herausforderungen im Projekt war die Abstimmung zwischen Design und Entwicklung.
Mir war wichtig, dass das visuelle Konzept nicht nur gut aussieht, sondern auch präzise und funktional umgesetzt wird – pixelgenau und nutzerfreundlich.
In der Praxis bedeutete das jedoch einen hohen Abstimmungsaufwand mit dem Entwicklerteam. Kleine Missverständnisse führten zu unnötigen Schleifen, und der Übergang vom Design zur finalen Website dauerte länger als geplant.
Diese Erfahrung hat mir gezeigt, wie entscheidend klare Kommunikation, saubere Übergabedokumente und gemeinsame Standards im Design-to-Dev-Prozess sind. Sie hat mein Interesse an Designsystemen und effizienter Zusammenarbeit noch einmal deutlich verstärkt.
Lösung
Um die langen Abstimmungsprozesse zwischen Design und Entwicklung zu verkürzen, habe ich ein Designsystem auf Basis des Atomic-Design-Prinzips eingesetzt.
Ich lernte, ein bestehendes System gezielt zu erweitern – mit Komponenten, Varianten und Farbwerten, die exakt auf unsere Anforderungen abgestimmt waren.
Da wir als kleines Team mit begrenztem Budget gearbeitet haben, war es besonders wichtig, ein System zu nutzen, das Tempo, Konsistenz und Struktur bietet – ohne unnötige Komplexität.
Das Atomic-Design-Modell hat mir geholfen, die Gestaltung in Atoms, Molecules und Organisms zu denken. Dadurch wurde die Zusammenarbeit mit dem Entwickler deutlich klarer und zielgerichteter.
Diese Herangehensweise hat nicht nur unsere Effizienz gesteigert, sondern auch dafür gesorgt, dass Design und Code nahtlos zusammenspielen – ein echter Mehrwert für kleine, agile Teams.
