KuBS.3 Blueprints, zwei Renderer und der Spruch der Woche

Vom Textfeld zum Formular

Nach Version 1 war klar: Ein einzelnes Textfeld für den Vornamen ist ein guter Anfang, aber das reicht nicht. Unsere Produkte sind vielfältiger als das. Mal soll ein Name drauf, mal ein eigenes Bild, mal ein KI-generiertes Motiv. Manchmal alles zusammen. Also musste das Klick & Bügelstudio lernen, mit verschiedenen Eingabetypen umzugehen.

Für Version 2 habe ich drei Typen implementiert: Text, Bilder und KI-Bilder.

Text ist das Einfachste. Ein Textfeld, du tippst was rein, die Vorschau zeigt es dir sofort im Layout an. Name, Spruch, Vereinsbezeichnung. Alles, was aus Buchstaben besteht.

Bilder sind auch nicht kompliziert. Du lädst ein Foto oder eine Grafik hoch. Ein Logo zum Beispiel, oder ein Vereinswappen. Das System nimmt die Datei entgegen und setzt sie ins Layout ein.

KI-Bilder hatten wir schon aus V1. Das Besondere: Du gibst Text ein, bekommst aber eine Bilddatei zurück. Die KI generiert aus deiner Beschreibung ein Motiv. Das Textfeld sieht genauso aus wie bei "Text", aber im Hintergrund passiert etwas komplett anderes.

Blueprints: Die Bauanleitung für jedes Layout

Jetzt wurde es richtig interessant. Denn drei Feldtypen sind schön, aber wie sage ich dem System, wo auf dem Bügelbild die Eingaben landen sollen? Wo steht der Name? Wo sitzt das Bild? Wie groß ist es? Welche Schriftart, welche Farbe?

Dafür habe ich die Blueprints eingeführt. Ein Blueprint ist im Grunde die Bauanleitung für ein Layout. Er beschreibt, aus welchen Elementen ein Bügelbild-Design besteht. Jedes Element ist an ein Formularfeld gebunden. Wenn der Kunde im Shop seinen Namen eingibt, weiß der Blueprint genau: Den Text setzt du an diese Position, in dieser Größe, mit dieser Schrift.

Das klingt trocken, ist aber die Grundlage für alles Weitere. Ohne Blueprints wäre jedes neue Produkt ein Programmieraufwand. Mit Blueprints ist es Konfiguration. Ich beschreibe einmal das Layout, der Rest läuft automatisch. Neues Produkt? Neuer Blueprint, fertig.

Zwei Renderer: Schnell im Shop, scharf im Druck

Hier kam eine Herausforderung, die ich unterschätzt hatte. Ich musste an zwei Stellen rendern. Im Shop für den Kunden. Damit er sieht, was er kauft. Eine Vorschau, die schnell laden muss. Und im Backend für den Druck. Damit ich eine druckfähige Datei bekomme, die gestochen scharf ist.

Das Problem: Was im Shop schnell laden soll, darf nicht groß sein. Niedrige Auflösung, kleine Dateigröße, damit die Seite nicht ewig lädt. Was im Druck perfekt aussehen soll, muss groß sein. Hohe Auflösung, jedes Detail sichtbar, keine Kompromisse.

Also hab ich zwei Renderer gebaut. Einen für den Shop, der schnelle, niedrig aufgelöste Vorschauen erzeugt. Einen fürs Backend, der die volle Druckauflösung liefert. Gleicher Blueprint, gleiche Logik, aber andere Ausgabeparameter. Im Shop bekommst du ein knackiges Vorschaubild. Im Druck bekomme ich alles, was die Datei hergibt 😉

Klingt nach doppelter Arbeit? War es auch. Zwei Renderer synchron zu halten ist nicht trivial. Wenn ich am Blueprint etwas ändere, muss das an beiden Stellen stimmen. Aber es funktioniert. Der Kunde sieht im Shop sofort, wie sein Bügelbild aussehen wird. Ich bekomme hinten raus eine Druckdatei, die perfekt in die Bogenmontage passt.

Der Spruch der Woche und die Idee der Fixen Blueprints

Version 2 ging online. Lief gut. Aber im Alltag fiel mir etwas auf, das mich jedes Mal genervt hat.

Wir haben Produkte, die gar nicht personalisiert werden. Unser "Spruch der Woche" zum Beispiel. Das ist ein fertiges Motiv, der Kunde wählt es aus, bestellt es, fertig. Keine Eingabe nötig. Aber die Druckdatei musste ich trotzdem manuell raussuchen. In unserer Ordnerstruktur. Ein paar Klicks hier, ein paar Klicks da. Nicht tragisch, aber bei zwanzig Bestellungen am Tag summiert sich das.

Da dachte ich: Warum liefert mir der Shop die Druckdaten nicht einfach direkt mit? Bei personalisierten Produkten funktioniert das ja schon. Der Renderer erzeugt die Druckdatei automatisch. Warum nicht auch bei fixen Produkten?

Also kam das Konzept der Fixen Blueprints dazu. Ein Blueprint ohne Formularfelder. Keine Kundeneingabe, kein Rendern. Das System liefert einfach die fertige Druckdatei mit der Bestellung aus. Kein Suchen mehr, kein Klicken. Die Datei ist da, wenn ich sie brauche.

Das klingt nach einer kleinen Sache. Ist es auch. Aber genau diese kleinen Sachen machen den Unterschied. Wenn du jeden Tag fünf Minuten sparst, sind das im Jahr über dreißig Stunden. Dreißig Stunden, die ich für Besseres nutzen kann als Ordner zu durchklicken.

Wo Version 2 an ihre Grenzen kam

V2 lief im Alltag richtig rund. Formulare, Blueprints, zwei Renderer, Fixe Blueprints. Das System hat uns das Leben deutlich leichter gemacht. Aber dann kam ein Produkt, das alles über den Haufen geworfen hat.

Unser BFF-Set mit dem geteilten Herz. Kennst du vielleicht: Zwei beste Freundinnen, jede bekommt eine Hälfte des Herzens. Süße Idee, technisch ein Albtraum. Denn plötzlich hatte ich ein Produkt mit zwei Folien. Zwei separate Bügelbilder, die zusammengehören, aber einzeln gedruckt werden.

Meine Blueprint-Logik war darauf nicht vorbereitet. Ein Blueprint, ein Layout, eine Folie. So war es gedacht. Für zwei Folien brauchte ich eine neue Ebene darüber. Eine Instanz, die mehrere Blueprints zusammenfasst.

Und genau an diesem Punkt wusste ich: Hier flicken bringt nichts. Es wird Zeit für Version 3. Aber dazu erzähle ich dir im nächsten Beitrag. Es wird die Geschichte davon, warum manchmal Abreißen schneller ist als Sanieren.

Du willst dir ansehen, was mit den Blueprints alles möglich ist? In unserem Shop findest du personalisierbare Bügelbilder, bei denen du direkt siehst, wie dein Motiv aussehen wird. Einfach ausprobieren.