Der Ausgangspunkt
Dieselbe Produktseite, heute und im Entwurf
Links steht die heutige Seite auf dem Handy: Beschreibung ohne Fläche, Preis als lose Zeilen, der Cookie-Hinweis darüber. Rechts der Entwurf. Zieh den Regler.
Ziehen, tippen oder mit den Pfeiltasten verschieben.
Erster Eindruck
Der Cookie-Hinweis liegt über dem Produktbild
Wer heute aus einer Anzeige auf die Produktseite kommt, sieht als Erstes einen Kasten über dem Fleisch. Preis und Kaufbutton stehen dahinter.
Suche
Auf dem Handy fehlte das Suchfeld
Bei über hundert Fleischsorten führte der einzige Weg ins Sortiment über das Menü. Im Entwurf steht die Suche als eigene Zeile unter dem Logo, auf allen vier Seiten.
Fläche
Beschreibung und Preis bekommen einen Grund
Heute steht der Text frei im Weiß, während der untere Block einen Kasten hat. Im Entwurf liegt alles auf weißen Karten über beigem Grund – dieselbe Sprache wie auf Start- und Kategorieseite.
Entwurf 1 · neu im Auftrag
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.
Vorlage: futter-fundgrube.de/4-sorten-fleisch-unsagbar-guenstig/18430/
Im Rahmen scrollen · 390 px
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.
Dieselbe Seite am Rechner, 1440 px.
Entwurf 2 · gewählt
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.
Vorlage: futter-fundgrube.de/ · Figma-Frame 158:628
Im Rahmen scrollen · 390 px
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 und Kundenstimmen.
Abholmärkte
Grevenbroich und Schmallenberg stehen zweimal auf der Seite
Der Abholmarkt in Grevenbroich steckt in der Reihe „So flexibel ist deine Bestellung“ und in der Fußzeile, Schmallenberg-Winterberg in der Fußzeile mit einem Neu-Hinweis. Solange die Adresse fehlt, bleibt es ein Platzhalter.
Produktdaten
Echte Produkte und Preise aus dem Shop
Bestseller, Sale und Neuheiten zeigen die Produkte, die aktuell auf der Live-Startseite rollen – inklusive Grundpreis. Reduzierte MHD-Ware bekommt ein eigenes Badge, weil sie einen großen Teil des Sale ausmacht.
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.
Dieselbe Seite am Rechner, 1440 px.
Entwurf 3 · gewählt
Kategorieseite
Produkte zuerst, der SEO-Text danach. Wer kaufen will, sieht Ware, ohne an Text vorbeizuscrollen – auf dem Handy klappt die Filterspalte hinter einem Button auf.
Vorlage: futter-fundgrube.de/barf-fleisch/ · Figma-Frame 158:2053, Variante „Produkte (Best Practice)“
Im Rahmen scrollen · 390 px
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.
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.
Dieselbe Seite am Rechner, 1440 px.
Entwurf 4 · gewählt
Ratgeberbereich
Ein hervorgehobener Beitrag, danach Reihen nach Thema. Der Einstieg zum BARF-Rechner sitzt gleich im Kopfbereich statt in der Navigation.
Figma-Frame 158:5397, Version 1
Im Rahmen scrollen · 390 px
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.
Dieselbe Seite am Rechner, 1440 px.
Nächste Schritte
Was bis zur Freigabe noch offen ist
Sechs Punkte, vier davon brauchen etwas von euch.
- Fotoauswahl aus dem Drive-Ordner „Fotos bei Mel und Kurt“ treffen und die Platzhalter in allen Entwürfen ersetzen.
- Adresse und Öffnungszeiten für Schmallenberg-Winterberg von euch einholen.
- Den Abholmarkt-Block auch für die Startseite entwerfen, nicht nur für die Produktseite.
- Die Handyansichten in Figma nachziehen. Sie stehen bisher nur in diesen Prototypen, nicht in der Datei.
- Blindtext in den Ratgeber-Karten durch echte Beitragstitel ersetzen.
- Übergabe an euren Entwickler, zusammen mit dem Hinweis auf Pagination und Abstände im heutigen Ratgeber.