Startseite
Design 1 von Alena, umgesetzt und um die Handyansicht ergänzt. Der Einstieg führt vom Sortiment über die Bestseller zum Vertrauen, statt mit einem Werbe-Slider zu beginnen.
Im Termin gewählt. Vorlage futter-fundgrube.de/ · Figma-Frame 158:628
Kopfleiste
Die rote Leiste über dem Logo läuft jetzt beige
Gilt für alle vier Entwürfe. Weiß auf dem Aktionsrot ergibt bei 14 px einen Kontrast von 4,36:1 und bleibt unter den 4,5:1, die WCAG AA verlangt; beige mit dunkelbrauner Schrift erreicht 10,8:1. Dazu liest sich eine vollflächig rote Zeile ganz oben als Werbebanner und wird überblättert – große Nutzertests zeigen, dass schon eigene Promo-Flächen so gelesen werden. Auf der Live-Seite kommt hinzu, dass die Leiste am Handy nur die Hotline zeigt: die drei Zusagen sind dort ausgeblendet, und die Nummer ist nicht antippbar. Rot bleibt jetzt dem Preis, dem Sale-Badge und echten Aktionen vorbehalten, wo es wirken soll. Die Versandzusage verlässt sich nicht auf diese Leiste – sie steht mit Betrag und Freigrenze über dem Warenkorb-Button der Produktseite.
Aufbau
Vom Sortiment über die Bestseller zum Vertrauen
Hero mit zwei Einstiegen für Hund und Katze, danach Sortimentskacheln, die fünf Versandzusagen, Bestseller, Angebote und Neuheiten als Reihen. Dann folgen die Gründe für euch, der Einstieg für BARF-Anfänger, die Kundenstimmen, der Treueblock und die FAQs.
Abholmärkte
Die Abholung steht im Inhalt, nicht nur in der Fußzeile
Grevenbroich steht mit Adresse in der Reihe „So flexibel ist deine Bestellung“ und auf der Produktseite, Schmallenberg-Winterberg in der Fußzeile mit einem Neu-Hinweis. Solange die Adresse fehlt, bleibt der zweite Markt ein Platzhalter. Das Hauptmenü lassen die Mockups unberührt – der Burger am Handy bleibt ohne Funktion, weil der Menü-Umbau nicht Teil des Auftrags ist.
Produktdaten
Echte Produkte und Preise aus dem Shop
Bestseller, Sale und Neuheiten zeigen die Produkte, die aktuell auf der Live-Startseite rollen – inklusive Grundpreis und Bewertung. Reduzierte MHD-Ware bekommt ein eigenes Badge, weil sie einen großen Teil des Sale ausmacht. Karten mit „Ab“-Preis führen in die Auswahl auf der Produktseite statt in den Warenkorb, damit niemand eine Variante kauft, die er nie gesehen hat.
Noch offen
Die Bilder werden gegen die neuen Fotos getauscht
Der Entwurf arbeitet mit Platzhaltern. Aus dem Shooting liegen Fotos von Küche, Lokal und Shop im Drive bereit. Ziel ist, von Stockbildern wegzukommen.
Kategorieseite
Produkte zuerst, der SEO-Text danach. Wer kaufen will, sieht Ware, ohne an Text vorbeizuscrollen – und der Filter bleibt dabei immer in Reichweite.
Im Termin gewählt. Vorlage futter-fundgrube.de/barf-fleisch/ · Figma-Frame 158:2053, Variante „Produkte (Best Practice)“
Aufbau
Produkte zuerst, der SEO-Text danach
Filterspalte links, Produktraster rechts, darunter die Versandzusagen. Erst dann folgen die Textabschnitte im Wechsel mit Bildern und ein FAQ-Bereich.
Filter
Filter zeigen, was gerade aktiv ist
Aktive Kriterien stehen als Chips über der Spalte, einzeln löschbar. Neu gegenüber live und Entwurf: ein Filter nach Preis pro Kilogramm – bei Frostfleisch die eigentliche Vergleichsgröße.
Filter erreichbar
Der Filter läuft mit, statt oben liegen zu bleiben
Am Rechner bleibt die Filterspalte beim Scrollen stehen. Auf dem Handy sitzt sie als Leiste am unteren Bildschirmrand und öffnet ein Blatt über der Liste – wer bei Karte 40 nachbessern will, muss nicht zurück nach oben. Beides ist in Shopware 6 reine Theme-Arbeit: die stehende Spalte eine CSS-Zeile, die Leiste der Off-Canvas-Filter, den das Storefront-Theme schon mitbringt.
Produktkarte
Echte Produkte, Preise und Verfügbarkeiten
Das Raster zeigt die ersten Karten der Kategorie „Barf-Fleisch“ – inklusive Grundpreis pro Kilo und Bewertung. Nicht lieferbare Artikel erklären sich, statt stillschweigend zu verschwinden. Mengenwahl und Kaufen sitzen direkt in der Karte.
Noch offen
Die Bilder werden gegen die neuen Fotos getauscht
Die Redaktionsblöcke arbeiten mit Bestandsbildern aus dem Shop. Aus dem Shooting liegen Fotos von Küche, Lokal und Shop im Drive bereit – hier gehören sie hin.
Produktdetailseite
Die einzige der vier Seiten, die es in Figma noch nicht gibt. Sie ist als klickbarer Prototyp gebaut, weil Aufklapp-Logik, Wischgesten und Touch-Ziele sich nur am Gerät beurteilen lassen.
Neu im Auftrag, in Figma noch nicht angelegt. Vorlage futter-fundgrube.de/4-sorten-fleisch-unsagbar-guenstig/18430/
Aufklapp-Logik
Abschnitte klappen dort auf, wo sie stehen
Heute verliert man beim Antippen von „Bewertungen“ die Position auf der Seite. Im Entwurf bleibt die angetippte Überschrift stehen und der Inhalt schiebt sich darunter auf. Alle vier Abschnitte sind gleichwertig sichtbar, statt hinter zwei Tabs zu liegen.
„Normalerweise würde ich erwarten, dass es sich aufklappt, mindestens von unten nach oben.“ Can-Mert Hungenberg, 8. September
Flächen
Jeder Inhalt sitzt auf einer eigenen Fläche
Heute hat der untere Textblock einen Kasten, der obere nicht. Der Entwurf setzt Beige als Seitengrund und legt Preis, Beschreibung, Bewertungen und Cross-Selling auf je eine weiße Karte.
„Du siehst zum Beispiel, dass das alles einfach nur dahin geklatscht ist, ohne so ein Hintergrund irgendwie.“ Can-Mert Hungenberg, 8. September
Kaufweg
Preis, Menge und Warenkorb stehen in einem Block
Preis, Grundpreis, Steuerhinweis und Versandlink stehen heute als vier lose Zeilen untereinander. Im Entwurf sind sie eine Karte. Scrollt der Kaufbutton nach oben aus dem Bild, erscheint unten eine Leiste mit Preis und Warenkorb.
„Jeder Schritt ist immer ein unnötiger Schritt für den Kunden.“ Can-Mert Hungenberg, 8. September
Lieferversprechen
Versandtage und Kühlkette stehen neben dem Kaufbutton
Versandtage, Kühlkette und Bonuspunkte standen bisher verstreut in der Fußzeile und auf der Startseite. Der Entwurf zieht sie unter den Warenkorb-Button, weil das aus unserer Erfahrung die Fragen sind, die bei Tiefkühlware vor dem Klick offen bleiben.
Abholmarkt
Beide Standorte bekommen einen Platz auf der Seite
Der Abholmarkt war nur ein Link in der Fußzeile unter „Service“. Schmallenberg-Winterberg stand auf der Seite noch gar nicht. Adresse und Öffnungszeiten dort sind im Entwurf Platzhalter, weil sie uns noch fehlen.
Touch
Jedes Bedienelement misst mindestens 44 × 44 px
Nachgemessen im Entwurf: Mengensteuerung, Merkzettel, Akkordeon-Köpfe, Navigationssymbole und die kleinen Karten-Buttons erfüllen das Maß. Fließtext startet bei 16 px, damit iOS beim Antippen von Feldern nicht hineinzoomt.
Ratgeberbereich
Ein hervorgehobener Beitrag, danach Reihen nach Thema. Der Einstieg zum BARF-Rechner sitzt gleich im Kopfbereich statt in der Navigation.
Im Termin gewählt. Figma-Frame 158:5397, Version 1
Aufbau
Ein hervorgehobener Beitrag, dann Reihen nach Thema
Themenfilter und Suche oben, darunter der beliebteste Beitrag als breite Karte. Danach „Aktuelle Beiträge“ und je eine Reihe pro Thema mit eigenem „Alle anzeigen“.
Bei der Übergabe
Der heutige Ratgeber hat sichtbare Fehler
Die Pagination steht doppelt, in der Suchleiste sitzt ein Trennstrich und die Abstände wirken unruhig. Als Ursache habt ihr im Termin ungeprüft übernommenen KI-Code genannt. Das gehört mit den Mockups zusammen angesprochen.
Noch offen
Die Blindtext-Titel sind im Prototyp ersetzt
Die Beitragskarten tragen jetzt die echten Teasertexte der Live-Seite als Titel. In Figma steht weiterhin „Lorem ipsum“ – dort nachziehen, bevor freigegeben wird.
