Vom Wireframe zur Shopware-6-Seite: Wie Styling, Designsystem und Content zusammenspielen

Dafür hilft es, drei Bereiche zu verstehen, die im Entwurf zusammenkommen: Struktur, Gestaltung und Inhalte.

Wireframe: Was steht wo?

Der Wireframe beschreibt den Aufbau der Seite: Welche Abschnitte brauchen wir? In welcher Reihenfolge? Wo stehen Texte, Bilder und Buttons? Texte und Bilder können zunächst als Platzhalter enthalten sein. Der Wireframe ist der Grundriss. Die Wandfarbe darf noch warten.

Styling und Designsystem: Wie sieht es aus?

Das Styling bestimmt Farben, Schriften, Formen und Abstände. Ein Designsystem hält diese Gestaltungsregeln zusammen. Damit gehören die Seiten sichtbar zum selben Shop und sehen nicht aus, als hätten fünf verschiedene Menschen unabhängig voneinander renoviert.

Content: Was kommt hinein?

Content bedeutet Inhalt. Gemeint sind die konkreten Texte und Bilder: Überschriften, Beschreibungen, Fotos und Grafiken. Sie füllen die vorgesehenen Bereiche mit Leben und vermitteln, was Deine Besucher wissen sollen.

Drei Bereiche, ein gemeinsamer Entwurf

Natürlich darf ein Entwurf alle drei Bereiche vereinen. Das hilft, die spätere Seite zu verstehen und Wünsche abzustimmen. Wenn eine KI Texte, Gestaltung und HTML gemeinsam erzeugt, sieht das Ergebnis oft schon ziemlich fertig aus. Dass Du damit möglichst direkt weiterarbeiten möchtest, ist verständlich.

Struktur, Styling und Content können gemeinsam entstehen oder einzeln ausgearbeitet werden. Wichtig ist, dass Du jeden Bereich gezielt beurteilen und ändern kannst: Passt die Anordnung? Entspricht die Gestaltung Deinem Shop? Sind Texte und Bilder richtig?

Auch wenn eine KI alles auf einmal erzeugt, sollte das Ergebnis getrennt bearbeitbar bleiben. Ein neues Foto soll sich austauschen lassen, ohne dass dabei die Buttons plötzlich eine neue Lieblingsfarbe entdecken.

Die Bereiche bleiben dabei im Gespräch: Wenn aus einer kurzen Überschrift ein kleiner Roman wird, braucht auch das Layout etwas mehr Platz. Getrennte Bearbeitung bedeutet deshalb, dass jeder Bereich eine klare Aufgabe und eigene Vorgaben hat.

Vom KI-Entwurf zu den Bausteinen in Shopware 6

Ein KI-Entwurf kann Deine Ideen schnell sichtbar machen und viele Entscheidungen erleichtern. Für die Verwendung in Shopware 6 wird er anschließend in die passenden Bausteine übersetzt. Eine eigenständige HTML-Datei ist dabei eine Vorlage. Ihre Abschnitte sind noch keine einzeln pflegbaren Erlebniswelt-Elemente.

Bei dieser Übersetzung wird geprüft: Welche Teile passen in vorhandene Erlebniswelt-Blöcke? Welche Gestaltung lässt sich über das Theme umsetzen? Und wo werden zusätzliche Bausteine benötigt? Vorhandene Elemente und Einstellungen bilden dafür die erste Grundlage.

In Shopware 6 sind die Hauptaufgaben so verteilt:

• Theme: Hier wird das übergreifende Styling umgesetzt, beispielsweise Farben, Schriften, Buttons und einheitliche Darstellungsregeln.
• Erlebniswelt: Hier wird die Seitenstruktur aus Sektionen, Blöcken und Elementen aufgebaut. In die vorgesehenen Bereiche werden die Texte und Bilder eingesetzt.

Das beschreibt die Hauptaufgaben. Einzelne Einstellungen für Abstände oder Hintergründe liegen auch in der Erlebniswelt. Besondere Strukturen können zusätzliche Bausteine oder Anpassungen erfordern. Anschließend wird geprüft, ob alles auf Desktop und Smartphone gut aussieht und funktioniert.

Ein Beispiel: Dein Entwurf zeigt einen Abschnitt mit einem Foto, einer Überschrift, einem Text und einem Button. In der Erlebniswelt wird dafür ein passender Block aufgebaut und mit den Inhalten gefüllt. Der Button erhält seine gemeinsame Gestaltung aus dem Theme. So kannst Du später das Foto oder den Text wechseln, ohne den gesamten Abschnitt als HTML bearbeiten zu müssen.

Warum sich die Trennung lohnt

Bei späteren Änderungen wird die Trennung besonders greifbar:

• Content: Du möchtest ein neues Foto einsetzen oder einen Text ändern.
• Styling: Alle Buttons sollen eine andere Farbe bekommen.
• Struktur: Die Vorteile sollen vor den Bewertungen stehen.

Texte und Bilder lassen sich später in der Erlebniswelt pflegen. Gemeinsame Gestaltungsregeln werden zentral im Theme angepasst. Und der Seitenaufbau kann gezielt weiterentwickelt werden. So muss bei einer Textänderung nicht jedes Mal die gesamte Gestaltung neu abgestimmt werden.

Ob Du eine Seite gemeinsam mit einem Entwickler planst oder mit KI erzeugst: Struktur, Styling und Inhalte können gemeinsam entstehen. Entscheidend ist, dass das Ergebnis in die passenden Shopware-Bausteine übertragen wird und die drei Bereiche getrennt bearbeitbar bleiben. So kannst Du Texte, Bilder und den Seitenaufbau später direkt in Shopware ändern, ohne den gesamten KI-Entwurf neu erstellen zu müssen.