Shopdesign & Bildwelten
Für Bello Cards entstand aus einer priorisierten Kategorienavigation, zugelieferten Bildwelten und individuell programmierten Shopansichten ein eigenständiger Sammelkarten-Shop. Der Praxisfall zeigt, wie visuelle Markenräume, Produktmerkmale und Filter gemeinsam im Joomla-Template organisiert werden.
Aus einer vorhandenen Shopbasis wird eine neue visuelle Ordnung
Der Shop für Bello Cards begann nicht mit einer leeren Joomla-Installation. Eine bestehende Shopumgebung wurde als Entwicklungsgrundlage übernommen, anschließend wurden nicht benötigte Produkte und Kategorien entfernt. Damit blieb die technische Basis erhalten, während Sortiment, Nutzerführung und Erscheinungsbild neu aufgebaut werden konnten.
Die visuelle Ordnung musste unterschiedliche Themenwelten erkennbar machen, ohne Navigation und Shoplogik zu zersplittern.
Das Gestaltungskonzept verbindet Kategorie, Navigation und Filter
Im Grobkonzept wurden Produktkategorien und Navigation nach drei Prioritätsstufen geordnet. Parallel entstanden das Konzept für das visuelle Markenerlebnis, ein Hero-Bild-Konzept für die Kategorien sowie die Logik für Suche und Filter.
Kategorie, Navigation, Produktmerkmale und Filter wurden deshalb als zusammenhängende Nutzerführung geplant.
Zugelieferte Markenelemente werden Teil des Templates
Logo und Hintergrundbilder wurden kundenseitig geliefert. Im Joomla-Template mussten sie jedoch für unterschiedliche Aufgaben aufbereitet und integriert werden. Aus dem Logo entstanden auch Favicons; Header und Logo erhielten eine responsive Anordnung. Die Schriften wurden lokal eingebunden.
Aus den gelieferten Motiven entstanden Kategorie-Hintergründe. Das Template der Produktdetailseite wurde so programmiert, dass es den jeweils passenden Kategorie-Hintergrund ausgibt. Dadurch bleibt die Zuordnung zur Themenwelt auch dann sichtbar, wenn Nutzer von einer Kategorie zu einem einzelnen Produkt wechseln.
Redaktioneller Inhalt und Produktdaten teilen sich eine Oberfläche
Die Produktkategorieseiten wurden nicht nur als Listen programmiert. Joomla-Beiträge lassen sich gezielt in die jeweilige Kategorieansicht integrieren. Ein erster Beitrag zu Pokémon- und One-Piece-Sammelkarten diente dabei direkt zur Entwicklung der Ausgabe.
Zusätzlich erhielten Demo-Produkte Merkmale für das Such- und Filtersystem. Diese Merkmale wurden später auch auf Produktdetailseiten ausgegeben. Redaktionelle Einordnung, Filterbedienung und Produktinformation erscheinen damit nicht als getrennte Systeme, sondern als abgestimmte Ebenen derselben Shopansicht.
Responsive Gestaltung bedeutet Umbau, nicht Verkleinerung
Das Startseiten-Template wurde von einer Tabellenstruktur auf ein responsives DIV-Layout umgestellt. Für Startseite, Kategorieübersichten, Produktkategorien und Produktdetails entstanden eigene CSS-Anpassungen. Auch Header, Logo, Produktmerkmale und großformatige Hintergründe wurden für verschiedene Bildschirmbreiten geprüft.
Auf kleineren Displays werden Inhalte, Filter und Produktinformationen neu angeordnet, während die visuelle Kategoriezuordnung erhalten bleibt.
Große Bildwelten brauchen eine technische Strategie
Die Kategorie-Hintergründe prägen den Auftritt, erzeugen aber zugleich zusätzliche Datenlast. Deshalb wurde für Start-, Kategorie- und Produktdetailseiten ein Preload-Mechanismus entwickelt. Nach dem Launch wurden Bildgrößen und Komprimierung weiter angepasst.
PageSpeed-Messungen begleiteten die Arbeit an Kategorie- und Produktdetailseiten. Gestaltung und Performance wurden damit nicht nacheinander behandelt: Dateigröße, Ladezeitpunkt und CSS-Ausgabe gehörten zur technischen Umsetzung der Bildidee.
Der Bestellablauf gehört zum Gestaltungssystem
Vor und nach dem Launch am 27. November 2025 wurden Warenkorb und Checkout kontrolliert und visuell angepasst. Auch News auf der Startseite, Rechnungsmail und PDF-Rechnung wurden getestet. Damit reicht die gestaltete Nutzungskette von der Themenwelt über Filter und Produktdetail bis zum Bestellabschluss.
Was sich aus dem Projekt ableiten lässt
- Kategorien sind Gestaltungsräume: Navigation, Hintergrundmotiv, Text und Produktmerkmale müssen dieselbe Themenordnung vermitteln.
- Zugelieferte Gestaltung braucht technische Übersetzung: Logo und Motive werden erst durch responsive Einbindung, Zuordnung und Ausgabe Teil eines Joomla-Systems.
- Redaktion und Shop zusammen planen: Kategoriebeiträge, Filter und Produktdaten sollten innerhalb derselben Nutzerführung funktionieren.
- Responsive Layouts strukturell entwickeln: Tabellen werden nicht nur umformatiert, sondern durch eine flexible Seitenstruktur ersetzt.
- Bildwirkung und Ladeverhalten gemeinsam prüfen: Preload, Komprimierung und Bildgröße entscheiden mit darüber, ob eine großformatige Markenwelt funktioniert.
Von der Bildwelt zum bedienbaren Sammelkarten-Shop
Bei Bello Cards wurde eine vorhandene Joomla-Shopbasis nicht bloß neu dekoriert. Kategorien, Navigation, redaktionelle Inhalte, Produktmerkmale und zugelieferte Motive wurden in ein gemeinsames responsives Gestaltungssystem übersetzt.
Der vollständige Projektverlauf ist in der Fallstudie Bello Cards zusammengefasst.