01Überblick
immoposter ist ein Online-Shop für Immobilienwerbung: Poster, Planen, Banner, Schilder und Maklernasen®. Für die Druckerei habe ich den Shop unter Erhalt aller Funktionen neu gestaltet und entwickelt, mit eigenem Konfigurator und eigener Bestellverwaltung.
02Ausgangslage
Das bisherige Shopsystem basierte auf veralteter PHP-Technik. Rabattstaffeln waren nirgends veröffentlicht und steckten nur im alten Konfigurator, die Datenschutzerklärung nannte nicht mehr gültige Grundlagen.
03Herausforderung
Jedes Poster ist ein Einzelstück mit beliebigem Kundentext. Der Text muss sich automatisch ins Layout fügen, ohne zu überlappen, auch mit Foto und QR-Code. Preise müssen serverseitig geprüft werden, und personalisierte Ware stellt eigene Anforderungen an das Widerrufsrecht.
04Strategie
Der Shop ist vom Gestalten her gedacht: Wer ein Poster konfiguriert, sieht sofort das Ergebnis und den Preis.
AVorschau in Echtzeit
Jede Änderung erscheint sofort auf dem Poster. Das ersetzt lange Erklärtexte.
BRabatt sichtbar machen
Die Mengenrabatt-Staffel wurde aus dem alten Konfigurator rekonstruiert und wird automatisch nach Menge und Format berechnet.
CBestellung auf Rechnung
Makler bestellen wie gewohnt auf Rechnung. Das hält den Kaufweg kurz und passt zum bestehenden Geschäftsmodell.
05Gestaltung
Gestaltet nach einer vom Kunden gewählten Designvorlage, übertragen auf die bestehende Marke: Navy und Orange bleiben, das Logo wurde als Vektor neu gezeichnet. Orange erhält für Text eine dunklere Variante, damit Kontraste stimmen.
Typografie
Arimo für Überschriften, Inter für Fließtext
Farben
- Navy#000035
- Orange#FF6600
- Orange für Text#B34700
- Sand#F6F4EE
06Nutzerführung
Vom Produkt über die Gestaltung bis zur Bestellung ohne Umweg.
- Poster-Konfigurator mit 10 Vorlagen und 21 Fotomotiven
- Eigener Foto-Upload und QR-Code direkt aufs Poster
- Automatische Mengenrabatt-Staffel
- Warenkorb und Gastbestellung auf Rechnung
- QR-Code-Generator als eigenes Werkzeug
07Entwicklung
Umgesetzt mit Next.js und TypeScript auf Vercel in Frankfurt. Die Vorschau entsteht per Canvas im Browser, Bestellungen landen in einer geschützten Verwaltung, die Rechnungen als PDF erzeugt. End-to-End-Tests prüfen den Weg von der Bestellung bis zur Rechnung, inklusive Manipulationsversuch am Preis.
Technologie
Next.js, TypeScript, Tailwind CSS, Canvas API, Vercel (Frankfurt)
Besondere Funktionen
- Live-Vorschau mit automatischer Textanpassung
- Serverseitige Preisprüfung
- Bestellverwaltung mit Rechnungs-PDF
- Newsletter mit Double-Opt-in
08Ergebnis
Ein Maklershop, in dem das Produkt beim Gestalten entsteht und der Preis jederzeit nachvollziehbar ist. Die Umstellung der Domain ist vorbereitet.
09Wirkung
10 + 21
Vorlagen und Fotomotive
dazu eigener Foto-Upload
Quelle: Konfigurator, 07/2026
13 / 13
End-to-End-Tests bestanden
Bestellung bis Rechnung, inklusive Preismanipulation
Quelle: Testlauf, 11.07.2026
Konkret entstanden
- Rabattstaffel erstmals für Kunden sichtbar
- Bestellungen zentral in einer eigenen Verwaltung
- Überarbeitete Datenschutz-, AGB- und Widerrufstexte

