{"id":17770,"date":"2025-08-27T14:11:33","date_gmt":"2025-08-27T12:11:33","guid":{"rendered":"https:\/\/www.centigrade.de\/?post_type=blog&p=17770"},"modified":"2025-08-27T14:36:03","modified_gmt":"2025-08-27T12:36:03","slug":"mein-weg-zur-frontend-entwicklung-des-continuous-product-toolkit","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/mein-weg-zur-frontend-entwicklung-des-continuous-product-toolkit\/","title":{"rendered":"Mein Weg zur Frontend-Entwicklung des Continuous Product Toolkit"},"content":{"rendered":"

\"Flie\u00dfbandIm Rahmen meines Sch\u00fclerjobs bei Centigrade durfte ich in den vergangenen Monaten an einem spannenden Projekt mitarbeiten: dem Continuous Product Toolkit (CPT)<\/strong>. Dieses Toolkit vereint hilfreiche UX-Tools \u2013 etwa ein Modul, das pr\u00fcft, ob ein hochgeladener Screen auch f\u00fcr Menschen mit Farbenblindheit barrierefrei nutzbar ist.<\/p>\n

Besonders spannend f\u00fcr mich war die Aufgabe, die Frontend-Visualisierung des Generierungsprozesses<\/strong> zu entwickeln. W\u00e4hrend ein Tool \u2013 oft mit Unterst\u00fctzung von KI \u2013 seine Ergebnisse berechnet, soll der Nutzer den Prozess spielerisch und visuell nachvollziehen<\/strong> k\u00f6nnen, statt nur auf ein Ergebnis zu warten.<\/p>\n

Vom Plattenspieler zur Pipeline<\/h2>\n

Vor der Umsetzung stand die Frage: Wie l\u00e4sst sich ein abstrakter Prozess anschaulich darstellen?<\/i> Gemeinsam im Team diskutierten wir verschiedene Metaphern: von einem Plattenspieler<\/strong>, bei dem jedes Tool eine eigene Schallplatte ist, bis hin zu einer Murmelbahn<\/strong>, in der eine Kugel den Prozess durchl\u00e4uft.<\/p>\n

Entschieden haben wir uns schlie\u00dflich f\u00fcr die Pipeline-Metapher<\/strong> \u2013 ein Flie\u00dfband mit einzelnen Stationen. Sie passte am besten zur industriellen N\u00e4he von Centigrade, gepr\u00e4gt durch Partner wie Bosch, und lie\u00df zugleich Raum f\u00fcr spielerische Elemente<\/strong>, die unser Joyful-Mindset betonen.<\/p>\n

Eine Box auf Reisen<\/h2>\n

Die Umsetzung sieht so aus:<\/p>\n

Eine kleine Box bewegt sich auf einem 3D-Flie\u00dfband<\/strong> von Station zu Station. Jede Station symbolisiert einen Schritt im Workflow \u2013 vom Hochladen der Daten<\/strong> \u00fcber die Anwendung von Farbfiltern<\/strong> bis hin zur Arbeit mit KI-Modellen<\/strong>. In der Box stecken die individuellen Parameter und Dateien, die den Prozess antreiben.<\/p>\n

Eintauchen in neue Technologien<\/h2>\n

F\u00fcr die Entwicklung nutzte ich React Three Fiber<\/strong>, eine React-Integration f\u00fcr Three.js. Die 3D-Modelle habe ich in Blender<\/strong> erstellt und mit gebackenen Texturen optimiert, um die Web-App performant zu halten. Spannend war f\u00fcr mich, dass ich vor diesem Projekt noch nie mit Blender gearbeitet hatte. Umso mehr hat mir geholfen, den React Three Fiber Kurs von Bruno Simon zu absolvieren, der mir den Einstieg erleichtert hat.<\/p>\n

Auch beim Coding<\/strong> habe ich Neues gelernt. Viele Teile des Frontends entstanden mit Cursor<\/strong>, wodurch ich erste Erfahrungen im \u201eVibe-Coding\u201c sammeln konnte. So entstanden schnelle Prototypen, und ich gewann ein besseres Verst\u00e4ndnis f\u00fcr Best Practices<\/strong> in der Nutzung von KI-Programmierung-Tools.<\/p>\n

Vom Figma-Design zur lebendigen Anwendung<\/h2>\n

Die Basis bildete unser Figma-Design<\/strong>, das wir intensiv diskutierten. Besonders spannend war die Frage, wie verspielt das Interface sein darf, ohne von der Funktionalit\u00e4t abzulenken. Am Ende entschieden wir uns f\u00fcr eine verspielte Variante des Centigrade-Themes<\/strong>, die das Gamification-Element hervorhebt und gleichzeitig die Klarheit der Anwendung bewahrt.<\/p>\n

Pers\u00f6nliche Learnings und Fazit<\/h2>\n

Das Projekt war f\u00fcr mich eine Reise durch verschiedene Disziplinen:<\/p>\n

    \n
  1. 3D-Modelling mit Blender<\/strong> \u2013 vom Einstieg bis zur produktiven Nutzung in kurzer Zeit.<\/li>\n
  2. React Three Fiber<\/strong> \u2013 lernen, 3D-Welten performant ins Web zu bringen.<\/li>\n
  3. Frontend-Architektur<\/strong> \u2013 den Spagat zwischen schnellem Prototyping und sauberem Code meistern.<\/li>\n
  4. Designentscheidungen verstehen<\/strong> \u2013 erleben, wie eng Gestaltung und Technik verbunden sind.<\/li>\n<\/ol>\n

    Am meisten hat mich begeistert, wie kreativ-technische Arbeit<\/strong> und UX-Design<\/strong> in diesem Projekt ineinandergreifen. So wurde mein Sch\u00fclerjob bei Centigrade zu einer wertvollen M\u00f6glichkeit, fr\u00fch echte Projekterfahrung<\/strong> zu sammeln und gleichzeitig die Design-Philosophie von Centigrade mitzuerleben: Komplexes sichtbar machen \u2013 und dabei Freude schaffen.<\/strong><\/p>\n","protected":false},"author":83,"featured_media":0,"template":"","tags":[984,1034,839,515],"class_list":["post-17770","blog","type-blog","status-publish","hentry","tag-ai-de","tag-frontend","tag-ki","tag-web-engineering"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/17770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/83"}],"version-history":[{"count":2,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/17770\/revisions"}],"predecessor-version":[{"id":17779,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/17770\/revisions\/17779"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=17770"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=17770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}