die ausgangslage & challenge
Einen Online-Shop für eine Pen-&-Paper-Runde zu konzipieren und umzusetzen, ist eine faszinierende gestalterische Herausforderung. Die zentrale Frage bei Duskborn lautete: Wie schafft man es, dass sich ein Shop nicht nach schnödem, austauschbarem Massen-E-Commerce anfühlt, sondern direkt wie eine immersive, düstere Fantasy-Welt wirkt? Das primäre Ziel des Projekts war die Entwicklung eines Fan-Shops, der eine packende, detailreiche Lore nahtlos mit einem modernen, sauberen Interface verbindet, ohne dass die atmosphärische Dichte auch nur eine Sekunde lang verloren geht.
Design-Ansatz & visuelle Identität
Der visuelle Auftritt setzt ganz bewusst auf dunkle, satte Farbnuancen, tiefe Schatten und die markante Cinzel-Schrift für alle Überschriften. Das verleiht dem gesamten Shop sofort diesen authentischen Gilden- und Abenteuer-Vibe. Um die starren Raster klassischer Templates zu durchbrechen, wurde ein offenes, bildzentriertes Magazin-Layout gewählt.
Atmosphärischer Raum: Dunkle Flächen und feine Akzente erzeugen eine greifbare Tiefe.
Fokus auf Artwork: Epische Charakter-Artworks stehen im Mittelpunkt, statt in kleinen Produktkästchen unterzugehen.
Typografische Führung: Die gezielte Schriftwahl (Cinzel & Inter) transportiert den erzählerischen Charakter der Marke.
Aus dem Design-Prozess (Figma)
Dank der detaillierten Hi-Fi-Mockups in Figma konnte ich komplexe visuelle Hierarchien – wie die Mischung aus epischem Artwork und cleanen E-Commerce-Elementen – vorab komplett durchtesten und abstimmen. Das hat mir im Nachhinein extrem geholfen, den Styleguide und das Layout fehlerfrei und ohne langes Herumprobieren in WordPress, Elementor und Custom CSS zu erstellen.
Technische umsetzung und features
Damit das visuell reiche Erlebnis auch in der Praxis gut funktioniert, wurden clevere technische Kniffe integriert:
Das versteckte Such-Overlay: Um die Kopfzeile clean zu halten, gibt es kein permanentes Standard-Suchfeld. Ein Klick auf ein dezentes Icon öffnet stattdessen ein edles, nahtloses Overlay, was den UX-Faktor massiv erhöht.
Mobil-Optimierung: Da Fans oft mobil stöbern, wurde großer Wert darauf gelegt, dass komplexe Raster auf Smartphones absolut fehlerfrei und flüssig skalieren.
Technologischer Stack: Die Basis bildet WordPress in Kombination mit Elementor Pro, verfeinert durch Custom CSS und JavaScript für saubere Übergänge.
Fazit & Learnings
Duskborn beweist eindrucksvoll, wie viel kreatives Potenzial darin liegt, Branding, tiefgehendes Storytelling und moderne Webentwicklung eng miteinander zu verknüpfen. Das Projekt zeigt, dass der Mut zu unkonventionellen Designentscheidungen – wie thematisch angepassten UI-Elementen abseits starrer Standard-Templates – nicht auf Kosten der UX geht, sondern einer Marke erst recht einen unverwechselbaren, charakterstarken Auftritt verleiht.
© 2026 JasLen / Made with WordPress, Built with Elementor Pro