Dein persönliches Retro-Shirt

customizet vorschaubild

Eigentlich war ich nur auf der Suche nach dem perfekten Geschenk: einem coolen Bootleg-Shirt. Doch das, was online angeboten wurde, war eher enttäuschend: billig produziert, unpersönlich gestaltet und zero Personality. Diese Enttäuschung wurde zu meiner Motivation: Das kann ich besser! So entstand ein umfangreiches Projekt mit allem Drum und Dran: Von der Namensfindung über das Branding bis hin zur Website habe ich alles mit ganz viel Herzblut umgesetzt.

Alles selber gemacht

Für mich war von Anfang an klar: Ich möchte alles selbst machen. Logo, Branding, Website – alles stammt von mir. Mein Ziel war es, eine Marke zu schaffen, die nicht wie ein Massenprodukt wirkt, sondern persönlich und nahbar ist. Ein Projekt, bei dem der Kunde nicht einfach schnell abgefertigt wird, sondern das Gefühl hat, dass ihm zugehört wird und dass sich jemand Mühe gibt.

Branding aus den 90ern

Die Brand basiert auf einem klaren, visuellen Konzept im Retro-Stil. Sie ist von der Hip-Hop-Ästhetik der 90er-Jahre inspiriert, wurde aber modern umgesetzt. Ich habe das Logo, die Farben, Schriften und Design-Elemente selbst entworfen und später im Brandguide zusammengefasst.

Den Brandguide kannst du dir hier anschauen.

Einfacher Bestellprozess

Bevor ich mit dem Coden angefangen habe, habe ich das gesamte Website-Konzept zunächst einmal heruntergebrochen. Welche Seiten braucht meine Website? Wie bestellt man ein Shirt? Was muss der Kunde alles eingeben? Wie läuft die Zahlung ab? Auf Basis dieser Überlegungen habe ich entschieden, dass ein einfaches Formular die beste Lösung ist. Auf Basis dieser Erkenntnisse habe ich das Webdesign entworfen. Erst dann ging es an die technische Umsetzung.

Die finale Website besteht aus einer informativen Startseite, die den Prozess und mich als Person präsentiert. Die Bestellung des Shirts erfolgt dann über ein einfaches Formular, in dem alle personalisierten Elemente des Shirts festgelegt und auch die Bilder hochgeladen werden. In einem zweiten Schritt werden nur noch die persönlichen Daten abgefragt. Die Seite wurde mit HTML, CSS, JavaScript und PHP programmiert – alles von Hand geschrieben (mit der Unterstützung von ChatGPT). Zusätzlich habe ich eine Datenbank aufgesetzt, die alle Bestellungen speichert. Im Backend kann ich im einfachen Admin-Bereich eine Übersicht aller Bestellungen sehen und mir die hochgeladenen Bilder direkt herunterladen, um mit dem jeweiligen Shirt-Design zu starten.

Hier geht’s zur Website – und wer weiss: Vielleicht landet schon bald dein Gesicht auf einem stylischen Retro-Shirt! 😉🤍

Eine Brand mit Seele

Am Ende soll customizet genau das sein: eine kleine, liebevoll gemachte Marke, die coole, einzigartige Shirts macht, für Menschen, die Wert auf Stil und ganz viel Personality legen. Nicht nur die Shirts selbst sollen sich toll anfühlen, sondern auch der Prozess bis dahin!

(abb)

Branding und Gestaltung

Mit dem visuellen Ergebnis meines Projekts bin ich sehr zufrieden. Die Gestaltung orientiert sich konsequent an meiner Zielgruppe und transportiert die Markenidentität überzeugend. Der Brandguide war ursprünglich nicht eingeplant, wurde dann aber als ergänzendes Element realisiert, um das Projekt inhaltlich wie formal zu vervollständigen und die geforderte Projektzeit zu erfüllen. Rückblickend war der Brandguide vor allem eine Dokumentation meiner Überlegungen und weniger ein Werkzeug im Entstehungsprozess.

Website und technische Umsetzung

Die technische Umsetzung war mit Abstand der aufwändigste Teil des Projekts – und zugleich der lehrreichste. Besonders das Bestellformular mit Bild-Upload, Drag & Drop, Vorschau, Mehrfachauswahl und Validierung stellte eine grosse Herausforderung dar. Das Zusammenspiel zwischen JavaScript, PHP und Datenbank war komplex, da ich die Backend-Logik (wie das Speichern von Bildpfaden in der Datenbank) zum ersten Mal umsetzte. Dabei traten wiederholt Fehler auf, deren Behebung teils sehr zeitaufwendig war.

Auch das responsive Verhalten der Seite erwies sich als anspruchsvoller als anfangs angenommen. Gerade der Hero-Bereich funktioniert auf dem Desktop sehr gut, auf mobilen Geräten wirkt er aber nicht optimal. Diese Erfahrung zeigt mir deutlich, dass das Responsive Design von Anfang an berücksichtigt und nicht erst im Nachhinein angepasst werden sollte – insbesondere, wenn man selbst gestaltet und programmiert.

Allgemeines

Zu Beginn des Semesters war mein Zeitmanagement noch optimistisch. Ich hatte sogar geplant, ein zweites Projekt zu realisieren. Doch während der intensiven Entwicklungsphase wurde mir bewusst, wie umfangreich customizet tatsächlich ist – nicht zuletzt wegen meines eigenen Perfektionismus. Ich wollte jedes Element auf allen Bildschirmgrössen sauber gestalten, was in der Umsetzung sehr zeitintensiv war.

Ein wichtiger Lernmoment war daher: Zuerst die Funktionalität sauber umsetzen, dann das Design optimieren. In Zukunft würde ich gezielter priorisieren und mir vornehmen im frühen Stadium bewusst funktionale Prototypen «unperfekt» zu lassen.