Tuning für Auto und Shop

Dbilas dynamic ist Spezialist wenn es um schnelle Autos und Performance geht. Um deren Kompetenz auch im Web angemessen darzustellen, trat das Unternehmen mit der Aufgabe an uns heran, ein übersichtliches aber dennoch spezielles Webdesign zu konzipieren und den bereits vorhandenen Onlineshop sowie die Unternehmenswebsite zu verbinden, sodass Kunden sowohl Infos als auch Produkte schnell erfassen können. Für den Shop wurde eine Migration von Shopware 5 auf Shopware 6 durchgeführt.
Screenshot dbilas shopware 6 Shop

Reduziert, prägnant & auffallende Dynamik

Im Design bildet ein schlichter übersichtlicher Aufbau die Basis für eine den User leitende Website. Gepaart mit dynamischen Elementen wirkt die Webseite spannend und lädt den User dazu ein, sich spielerisch auf der Seite zu verweilen, da es viel durch Klicken zu erkunden gibt.


dbilas shopware6 onlineshop detailseite

Zielführende informative und verspielte Infoboxen

Da einige Produkte kombiniert werden können, kann es die Darstellung des Hauptproduktes im Rahmen geben, um dieses in den Vordergrund zu stellen und daneben sieht man die dazugehörigen anderen Produkte. Hier sieht man z. B. im Rahmen die Hauptkategorie Ansaugtrakte, welche aber immer in Kombination mit Doppelvergasern beziehungsweise Einzeldrosselklappenteilen zu gebrauchen sind. So sieht der Kunde optisch verdeutlicht – was schneller vom Gehirn aufzunehmen ist als Texte – welche Kategorien und Produkte miteinander kombinierbar sind. Bei Mouse Over auf die Punkte der Nebenkategorien gelangt der Kunde zur Produktübersicht dieser Artikel. Bei Mouseover auf den Tool-Tipp bzw. Punkt im Rahmen öffnet sich ein Overlay über den Freisteller und der Kunde erhält einige Infos über Besonderheiten des Produktes.


weiterführende Informationen und Kombinationen grafisch dargestellt

Kategorienseiten – neu gedacht

Die Kategorieseite beginnt untypischerweise mit Contentelementen, die die Produkte der Kategorie vorstellen und erklären, da es sich um erklärungsbedürftige Produkte handelt. Dennoch wird es innerhalb der Kategorieseite eine Darstellung einer Produktübersicht geben, inkl. Filterleiste zum Sortieren von Eigenschaften sowie einer Seitennavigation aller Kategorien für einen besseren Überblick. Diese Darstellung kann je nach Produkttyp variieren und entweder als Kachelansicht mit
Produktboxen oder als Listenansicht ausgegeben werden.


dbilas Shopware 6 Onlineshop Kagegorieansicht

So muss eine Produktdetailseite das Produkt präsentieren

Da Produktbilder meist als Fotografie anstelle von Freistellern dargestellt werden, werden diese mit den rechts daneben stehenden Infos in einem Farbbalken zu einem Element zusammengefasst. So hat der Kunde nicht den Eindruck einer optischen Trennung. Ähnlich wie bei dem Konfigurator hat der User hier die Möglichkeit, seine Marke und Modell einzugeben, um das passende Produkt zu erhalten und weitere Einstellungen vorzunehmen. Außerdem gibt es einen Verweis direkt über dem Warenkorb-Button auf passendes Zubehör, um dieses gleich mit den Warenkorb zu legen und sich somit lästiges hin und her klicken und Zusammensuchen zu ersparen.

Detailseite mit Zubehör
passende Artikel im Crossselling
passende Filter
weiterführende Informationen

Startseite eines Markenshops nach Maß

Die Startseite beginnt mit einem Video, welches sich in Zwei-Dritteln der Startseite abspielt. Ein konstruiertes Auto, was eine Assoziation mit dem Leistungsspektrum – nämlich das Aufbereiten von Fahrzeugen – von dbilas dynamics hervorruft, fährt ins Bild, stoppt einen Moment und fährt sehr schnell aus dem Bild heraus. Hier wird verdeutlich, dass Kunden, nachdem sie die Leistungen von dbilas in Anspruch genommen haben, eine wesentliche Leistungssteigerung erfahren. Dies wird verdeutlicht, indem das Auto zuerst langsam ins Bild hinein und deutlich schneller heraus fährt. Daher wird das Video mit dem Konfigurator verknüpft, durch welchen der Kunde zu passenden Produkten für sein Fahrzeug gelangt.

Folgend hat der Besucher auch die Möglichkeit Produkte nach Baugruppe bzw. Kategorie zu wählen. Eine eigens entwickeltes CMS-Erweiterung sorgt hier für automatische Darstellung der gewünschten Unterkategorien. Diese Erweiterung ist auf allen Folgeseiten einsetzbar und erzielt ohne große aufwendige Konfigurationsmöglichkeiten den gewünschten Effekt.

Tooltips zeigen a Beispiel eines Autos detaillierte Informationen zu Produkten und Prozessen

Tooltips für mehr Detailtiefe

Mithilfe von Tooltips können Bilder oder Elemente mit Infos versehen werden. Angewandt kann dies so aussehen, dass z. B. sich im Fahrzeug an bestimmten Stellen befindende Elemente, die es im Shop zu kaufen gibt oder zu denen dbilas Leistungen anbietet, mit Punkten getaggt werden, die bei Mouse-Over eine Infobox öffnen. In dieser lassen sich Infos oder auch das passende Produkt integrieren. So bietet die Website zum einen den Lerneffekt für Kunden und gibt dem User gleichzeitig die benötigten Infos an die Hand.

Neben der Angabe von Detailinformationen können hier auch Produkte, Videos, Contentelemente oder einfache Links hinterlegt werden. Die Positionierung erfolgt in Prozent auf der X- und Y-Achse auf Basis der Bildbreite. So steht einer responsiven Darstellung nichts im Weg.

grafische Darstellung von zusätzlichen Infoboxen

Prägnante Infoboxen

Das in den Unternehmensfarben gehaltene Fahrzeug deutet dem Besucher an, dass hier die wichtigsten Keyfacts zum Produkt oder der vorhergehenden Information optisch aufbereitet dargestellt werden. Die Rahmen der Keyfacts finden sich in nahezu jeder Seite wieder. Seien es Auswahlcontainer, Buttons, Headlines oder eben einfach immer wiederkehrende Keyfacts.


Du suchst einen absolut in dividuellen Markenshop auf Basis von Shopware 6?

Schreib uns jetzt!

eingesetzte Technologien

Das könnte Dich auch interessieren

Headergrafik Referenz Präsentation smartes-licht.com smarter Onlineshop mit Shopware

Ein neues Corporate Design mit einer Logo-Entwicklung sowie ein übersichtliches Webdesign für einen Onlineshop wünschte sich ...mehr erfahren

Maric Airclean corporate design preview with desktop Saubere Luft durch klare Kommunikation

Die Maric Service GmbH ist ein nationaler Anbieter für die Reinigung raumlufttechnischer Anlagen aus dem rheinland-pfälzische...mehr erfahren

Individuelles Shopware 6 Theme Design Shopware 6 Theme

Ein Shopware 6 Theme, so klar strukturiert und schnörkellos wie es die Produkte - die hier ganz klar im Vordergrund stehen - ve...mehr erfahren

individuelles Webdesign Präsentationsbild in SW6 für Naturmetall.de Webshoprelaunch mit Shopware 6

Ein neues Webdesign und dessen Umsetzung wünschte sich die Max Blank GmbH, welche sich auf den Verkauf von Naturmetall-Produkte...mehr erfahren

Wohlfeeling in Deinem Garten

Immer wichtiger wird die lokale Präsenz, vor allem wenn es um individuelle und preisintensive Produkte geht. Die InHa24 Interne...mehr erfahren

Voodoo Croo Logogestaltung Werbeagentur Rheinland Pfalz Logoumsetzung und Corporate Design

Mit einer Skizze kam Iris Bley - Inhaberin der Voodoo Croo aus Erding - auf uns zu und wünschte die Entwicklung und Umsetzung i...mehr erfahren

Webseitenerstellung Alex Lambertz Referenz Vorschau Webdesign Webagentur Rheinland Pfalz Relaunch Webseite für Alex Lambertz

Die Motorsportsaison 2018 bewegt sich in die heiße Phase. Das legendäre 24h-Rennen am Nürburgring – der Langstreckenrennen-...mehr erfahren

Sponsorenmappe Corporate Design Printdesign Konzeption Underdog Racing Sponsorenmappe

Das Underdog Racing Team fragte um Hilfe bei der Konzeption und Umsetzung der zukünftigen Sponsorenmappe an.Sponsorenmappen...mehr erfahren