GEFRO Wireframes

Low-Fidelity Mobile-First E-Commerce Wireframes

Projekt-Übersicht

Stil
Low-Fidelity
Ansatz
Mobile-First
Framework
Tailwind CSS

Strategische Grundlage

Duale UX-Strategie:
  • Suchende (60+): Effizienz, Vertrauen, einfacher Bestellprozess
  • Entdecker (30-50): Inspiration, Food-Ästhetik, Relevanz
USP-Anker:
  • Fakten: 100 Jahre Tradition, Direktvertrieb, Qualität
  • Emotion: Stolz, Respekt, Verbundenheit

Design-System Hinweise

Farben (Graustufen)

bg-gray-50 - Hintergrund
bg-gray-200 - Input Fields
bg-gray-300 - Text Placeholder
bg-gray-400 - Buttons & Headlines

Komponenten

  • ✓ Produktkacheln mit Buy-Button & Tags
  • ✓ Filter-Sidebar (Nach Kategorie vs. Nach Bedarf)
  • ✓ Rezeptkacheln mit Meta-Informationen
  • ✓ 3-Schritte-Anleitung
  • ✓ Trust-Badges & Bewertungen
  • ✓ Sticky Header & Buy-Section
  • ✓ Cross-Selling Module
  • ✓ Probierpaket-Banner