Zurück zu allen Artikeln

FREITAG F-Cut, twice in a lifetime

Severin Klaus
Severin Klaus
Technical Director, Partner
Länge
6 Min. Lesezeit
Datum
31 Mai 2022

Der Background

Ein Projekt, das so unglaublich vielschichtig ist, voller anspruchsvoller Herausforderungen und auch noch von einer Kundin, die Vertrauen und Sinnhaftigkeit entgegenbringt, ein solches Projekt ist ein ganz ausserordentlicher Glücksfall, vielleicht so speziell, dass man sich schon glücklich schätzen darf, einmal im Leben dazu zu kommen. Ich hatte gar das Glück, meine Karriere mit so einem Projekt starten zu dürfen und gleichzeitig meine Ausbildung damit abzuschliessen.

Vor über 20 Jahren pendelte ich zwischen Wochenenden in Zürich und Studientagen in Augsburg. Dort wurde an der Fachhochschule ein damals noch frisches Studium angeboten, eine Verschmelzung von Informatik und Designkommunikation. Für mich, dessen Herz für beide Richtungen schlug, genau das richtige. Neben dem Studium sog ich alles über Flash auf, ich war damals gar im (zumindest bei Geeks wie mir) begehrten Beta-Pogramm von Macromedia, und hatte so auch frühen Einblick in neue Features. So war ich dann begeistert, als Actionscript lanciert wurde, das zusammen mit der Möglichkeit, externe Daten zu laden, viele Möglichkeiten öffnete. Vor allem schien es eine Idee zu ermöglichen, die in meinem Kopf herumschwirrte, seit ich zum ersten Mal von einer speziellen Aktion meines Lieblingsherstellers von Taschen gehört hatte: FREITAG ermöglichte es manchmal einigen Leuten, ihre FREITAG-Tasche selber aus Planen auszuschneiden.

Mein damaliger Arbeitsplatz zusammen mit Markus und Daniel Freitag im Maag Areal


Mein damaliger Arbeitsplatz zusammen mit Markus und Daniel Freitag im Maag Areal

Die Idee

FREITAG, das war für mich der Inbegriff von Design, die Kombination von Einfachheit mit Sinnhaftigkeit, Ästhetik mit Nutzbarkeit. Genial durchdachte Produkte, die einem jeden Tag Freude machen, und das für ganz lange Zeit, schön und individuell im Kern. Den kreativen Prozess, nämlich die Auswahl der Planenstücke, den Kund:innen zu ermöglichen, war genial. Meine Idee wollte das nun vielen ermöglichen, indem sie diesen Prozess in den digitalen Raum transportierte. Also schrieb ich einfach ein E-Mail an Markus und Daniel Freitag, die beiden Gründer, und ein paar Wochen später wohnte ich im ehemaligen WG-Zimmer von Markus und verbrachte die Tage mit einem Linux-PC und meinem MacBook in ihrem Atelier im Maag Areal. Wo ich aus der Idee eine Flash App zusammen bastelte: F-Cut.

Um den Preview für den ersten F-CUT zu erstellen, wurden die Planenstücke kartografiert. Die F-Worker von Freitag haben daraus dann diese Tasche erstellt. Heute machen wir das genauer mit 3D.


Um den Preview für den ersten F-CUT zu erstellen, wurden die Planenstücke kartografiert. Die F-Worker von FREITAG haben daraus dann diese Tasche erstellt. Heute machen wir das genauer mit 3D.

Revival

Die App war sehr erfolgreich und erhielt gar viele Awards, aber spätestens als Steve Jobs das iPad vorstellte, war Flash Geschichte, und damit auch F-Cut. Als Anna Kerschbaumer mich im Frühling 2021 kontaktierte, war das für mich dann aber der Beginn eines unglaublichen Revivals: ich sollte tatsächlich die Chance erhalten, diese Idee von damals noch einmal neu mit zu erfinden! Dieses Mal mit ganz vielen grossartigen Leuten, sowohl auf Seiten DEPT® als auch bei FREITAG und später in der Integration zu freitag.ch auch mit Liip. In einer konzeptionellen Phase entwickelten wir einen User Flow und diskutierten auch ganz viele Ideen, etwa ob eine Plane unterschiedlich bepreiste Flächen hat (weil Muster viel begehrter sind als monotone Farben) oder – sehr zentral – wann ein Ausschnitt als reserviert galt (und damit als nicht mehr verfügbar für die anderen). Ob man eine Tasche auf eine Plane begrenzen sollte (einfachere Produktion) und ganz viel mehr.

Einer unserer Workshops zusammen mit Freitag. Hier ging es konkret um die Ausarbeitung der User Journey.


Einer unserer Workshops zusammen mit FREITAG. Hier ging es konkret um die Ausarbeitung der User Journey.

Herzblut

Eine gute Konzeptphase ist sehr wichtig. Mindestens so wichtig ist aber die eigentliche Umsetzung, die grossen und kleinen, zentralen und unsichtbaren Details. Dass sich eine Bedienung geschmeidig und intuitiv anfühlt. Dass sich komplexe Abläufe spielerisch anfühlen, egal wie komplex der Weg dahin. Diese Phase der Umsetzung steht für mich persönlich im Zentrum und macht einen oft vernachlässigten Unterschied zwischen herausragenden und mittelmässigen Ergebnissen aus. Dass ich hier eine zentrale Rolle einnehmen konnte, trotz meiner Position im Management von DEPT®, war ein grosses Privileg, das ich mit viel Herzblut und Überstunden ausfüllte.

Flash eröffnete früher Möglichkeiten, die im Browser undenkbar waren. Heute aber sind die Möglichkeiten im standardisierten Web weit grösser. F-Cut besteht aus einem Zusammenspiel verschiedener Bausteine. Im Zentrum der Benutzer:in steht eine Frontend-App, die mit Vue 3 (Composition, TypeScript, Pinia) umgesetzt ist, ein grossartiges Framework, das dank Vite und Volar auch richtig viel Spass beim Coden machte. SVG beim Editor, WebGL fürs 3D-Preview – schon dieser Part war voller spannender Herausforderungen.

Vermutlich von wenigen gesehen, doch von diesen sicher umso mehr geschätzt: F-Cut lässt sich komplett via Tastatur bedienen. Accessibility und Pro-Feature in einem.


Vermutlich von wenigen gesehen, doch von diesen sicher umso mehr geschätzt: F-Cut lässt sich komplett via Tastatur bedienen. Accessibility und Pro-Feature in einem.

Techno

Bei DEPT® durften wir schon ganz viele Projekte mit hohem Anspruch an die Zugänglichkeit umsetzen. Wir konnten uns so ganz viel Wissen in diesem Bereich aneignen. Häufig lag der Fokus hier bei Screenreadern – bei F-Cut nicht wirklich sinnvoll, weil visuell im Kern. Ich habe hier aus Eigeninitiative eine Tastatur-Bedienung umgesetzt, nebenbei auch immer ein cooles Pro-Feature.

Für die Datenhaltung haben wir uns für DatoCMS entschieden, ein herausragendes Headless CMS, das wir auch gerne für Websites verwenden. Dazwischen steht backendseitig eine Node-Express-Applikation, die das Frontend mit Daten versorgt, sowohl initial als auch live (Server Sent Events) bei Änderungen, insbesondere wenn neue Taschen ausgeschnitten wurden (also Planen neue Löcher aufweisen müssen). Und hier werden auch die Bestellungen entgegengenommen, ausgiebig validiert und an den FREITAG Shop weitergeleitet. Hier wird aber etwa auch die Hauptfarbe eines Planenfotos ermittelt, die wir für die Hinterseite im 3D-Modell verwenden (eine Nebensache, aber stimmt zu 99%).

Aus den Bestellungen wir pro Plane ein DXF mit Anweisungen für den Laser-Cutter erstellt: Ausrichtung, Schnitt, Stanzierungen, Markierungen.


Aus den Bestellungen wird pro Plane ein DXF mit Anweisungen für den Laser-Cutter erstellt: Ausrichtung, Schnitt, Stanzierungen, Markierungen.

DXF & Laser

Und hier werden auch Produktionsprozesse angestossen. Für eine nahtlose Integration importieren wird DXF-Dateien zusammen mit Planenfotos, verschmelzen diese Informationen dann mit den Kreationen der Kund:innen, um wiederum pro Plane ein DXF zu generieren, das speziell für einen riesigen Laser-Cutter aufbereitet wurde, mit Informationen zu Schnitt, Ausrichtung und Zuordnung.


Fluid, responsiv und extrem vielschichtig – der neue F-Cut, ein Privileg, ihn nochmals neu erfinden zu dürfen.

Privileg: danke!

Ausserdem wurde noch eine Administration-App entwickelt, ebenfalls auf Vue-Basis, wo Planen und Produktion geplant und Informationen vermittelt werden. Alles, was ich jetzt erwähnt habe, macht nur einen kleinen Teil dieses unglaublich vielschichtigen Projekts aus. Und darum waren die Herausforderungen auch so vielseitig und spannend. Für dieses Privileg nochmals ein grosses Dankeschön an alle, die das mit ermöglicht haben!

Case Study lesen

FREITAG F-Cut selbst erleben

Mehr Artikel?

Alle Artikel ansehen

Fragen?

Technical Director, Partner

Severin Klaus