← zurück zur Website

AVIPONIK HOF + MARKET · Konzept v1 · Oktober 2026

Konzept & Design System

Die Grundlage hinter der Website: Markenidee, Architektur, Customer Journey, Designsprache und die Selbstprüfung. Gedacht für alle, die die Website weiterbauen – an diesem und an jedem weiteren Ort.

Phase 1 · Markenidee

Ein Haus, in dem man sieht, wie aus einer Farm Alltag wird.

AVIPONIK HOF + MARKET macht einen Kreislauf betretbar: Der Hof erzeugt Potenzial, FOOD macht daraus Produkte, der MARKET bringt sie zu den Menschen, und LEARNING führt die Erfahrungen zurück zur Farm. Digital übersetzen wir das physische Haus – EG, 1.OG, 2.OG – in eine ruhige Scroll-Erzählung. Die Website spricht wie ein Gastgeber: Sie lädt ein, zeigt Zusammenhänge und lässt Besucher selbst entdecken. Sie duzt – warm, modern und auf Augenhöhe. Sie behauptet nie, fertig zu sein, denn AVIPONIK ist ein lernender, regenerativer Pfad.

Phase 2 · Sitemap
aviponik.com → DISCOVER (Geschichte & Erfahrung) ├── / Home – der kurze Film ├── /farm Herkunft, Kreisläufe, Tiere, Wasser, Pflanzen │ └── /farm/egg Every egg has a beginning ├── /food Produktentwicklung, Noodles, Ready Meals, Farm Kitchen ├── /market FARM · FOOD · SELECT, Etikettensystem ├── /learning Learning House, Lernnotizen, Workshops, Events ├── /circle CONNECT – Silver · Gold · Platinum ├── /visit Standort, Öffnungszeiten, 3 Etagen, Anfahrt │ └── /visit/[standort] lokale Seite je Ort (ONE COMPASS – MANY PLACES) ├── /about Kompass, Stewardship, Team, Geschichte ├── /contact └── /de · /en · /vi Sprachpfade, identische Struktur shop.aviponik.com → BUY (Transaktion) ├── /produkte · /farm · /food · /select ├── /warenkorb · /checkout └── /circle Login, Circle-Vorteile werden automatisch berücksichtigt my.aviponik.com (später) → CONTINUE └── My Circle · My Orders · My Benefits · My Events · My Farm Experiences · My Learning

Hauptnavigation zweigeteilt: DISCOVER (Farm · Food · Market · Learning · Circle · Visit) und, optisch abgesetzt als Kontur-Pill, SHOP. Der Shop öffnet im selben Tab in derselben Markenwelt, mit eigener Navigation.

Phase 3 · Customer Journey
1 Entdecken„Was ist das?“Hero mit Hausschnitt, Formel Farm + Food + Market + Learning
2 Verstehen„Wie funktioniert AVIPONIK?“Interaktiver Kreislauf, Farm-Kreisläufe
3 Erleben„Was gibt es dort?“Food, Market, drei Etagen
4 Vertrauen„Woher kommen die Produkte?“Egg-Story mit Nest-Nummer, Herkunftsetiketten
5 Entscheiden„Was möchte ich probieren?“Produktkarten mit Status, Visit, Shop
6 Wiederkommen„Warum zurückkehren?“Wechselnde Gerichte, Probiertage, Lernnotizen
7 Mitmachen„Wie werde ich Teil davon?“Circle, Newsletter, Learning House

Dramaturgie der Startseite: Compass-Gedanke im Hero → Wald/Kreislauf → Farm → Egg → Food → Market → Learning → Compass & Stewardship → Circle → Visit → Next Cycle (Footer: One compass – many places).

Phase 5–6 · Farben
WaldgrünPrimary · #1F3A2E
Off-WhiteGrund · #F1EFE8
Sand / PapierSecondary · #E4DFD2
AnthrazitText · #222621
Holz / ErdeSecondary · #8A6A4A
DotterAccent, sparsam · #C08A2E
GlasIllustration · #BFD0C6
EischaleEtiketten · #F6F2E8

Regel: 80 % Papier- und Sandflächen, 15 % Waldgrün als ruhige Kapitel (Learning, Footer), höchstens 5 % Dotter – nur für den einen Punkt, der zählt (aktiver Schritt, das Ei, die Nadel). Keine Verläufe in Bio-Grün, kein Gold, keine Nationalfarben. Jede Farbe existiert als Token mit Dark-Mode-Pendant.

Typografie
H1 DisplayFrom farm potential
H2 StatementA farm is never finished.
H3 LabelAVIPONIK FOOD
BodyHanken Grotesk 17/1.6 – klar, international, leicht lesbar.
CaptionIBM PLEX MONO · NEST 07 · 1.OG

Newsreader (Serif) nur für emotionale Statements, Hanken Grotesk für Navigation und Information, IBM Plex Mono für Herkunftsdaten, Etagen und Etiketten – die „Hofbuch“-Ebene. Alle Schriften unterstützen vietnamesische Diakritika.

Buttons

Primary (Waldgrün, gefüllt) – ein pro Abschnitt. Secondary (Kontur) – Alternativen. Text – weiterführende Links. CTA-Wörter: DISCOVER · VISIT · EXPLORE · TASTE · LEARN. Nie: Buy now, Limited offer, Act now.

Cards
FarmHerkunft · Bild + Nest-/Ernte-Daten
FoodProdukt · Status: Im Sortiment / Im Test
MarketLinie FARM · FOOD · SELECT + Etikett
LearningNotiz: funktioniert / nicht / verändert
Icons · Symbolwelt
Kompass
Wald
Ei
Herz
Learning House
Keimling · 初心
Balance
Respekt

Linienstärke 1.2–1.3, abgerundete Enden, keine Füllungen. Symbole erscheinen gebündelt im Kompass-Kapitel und als ruhige Einzelzeichen (Ei, Kompass im Logo) – nie als Dekoration verstreut, keine Emojis.

Fotografie

Farm

Morgenlicht, Hennen im Auslauf, Wasser, Beete. Dokumentarisch, Augenhöhe der Tiere.

Food

Hände am Teig, Dampf, die Glasscheibe. Nahe, warm, ungestellt.

People

Echte Kundinnen, Team, Schulkinder beim Workshop. Kein Stock-Lächeln.

Product

Auf Holz, Papier, Stein. Seitliches Tageslicht, ruhiger Hintergrund.

Architecture

Der Schnitt durchs Haus, Treppen, Blickachsen zwischen den Etagen.

Look

Leicht entsättigt, warme Lichter, tiefe Grüns. Kein HDR, keine Filter.

In der Website markieren Bildplätze mit Bildunterschrift, welches echte Motiv dort hingehört.

Spacing, Grid, Breakpoints

Grid

  • Max. Breite 1240 px, 12 Spalten, Gutter 24 px
  • Seitenrand fluid: 16 px (Mobil) bis 56 px
  • Spacing-Skala 4 · 8 · 12 · 16 · 24 · 32 · 48 · 72 · 104 · 140
  • Kapitelabstand 72–140 px, fluid

Breakpoints

  • ≤ 520 px – Mobil, eine Spalte
  • ≤ 760 px – Mobil mit Dock
  • ≤ 1060 px – Tablet, Menü statt Navigation
  • > 1060 px – Desktop, volle Navigation
Animation

Mit Bedeutung

  • Kompassnadel pendelt langsam (14 s) – Richtung statt Dogma
  • Baum und Dachgarten bewegen sich im Wind (7 s)
  • Kreislauf läuft selbst weiter, bis man ihn berührt
  • Waldlicht wandert über Bildflächen (18 s)
  • Das Ei „atmet“ kaum sichtbar

Regeln

  • Easing cubic-bezier(.2,.7,.2,1), 0,3–1,1 s
  • Inhalte sind ohne Animation vollständig sichtbar
  • prefers-reduced-motion schaltet alles ab
  • Keine Parallax-Effekte, keine Zähler, keine Pop-ups
Navigation & Footer

Desktop: Logo · DISCOVER: Farm, Food, Market, Learning, Circle, Visit · | · SHOP (Kontur-Pill) · DE/EN/VI. Sticky, halbtransparent.

Mobil: Logo · SHOP · MENÜ. Das Menü ist ein ganzseitiges waldgrünes Blatt mit großen Serif-Einträgen und der Frage hinter jedem Bereich („Woher kommt es?“). Unten ein festes Dock mit Live-Status „Heute geöffnet bis 19:00“, Entdecken und Besuchen – die drei Fragen des mobilen Nutzers in einem Griff.

Footer: One compass – many places · Standort-Chips (Pilot + nächste Orte) · Newsletter/Circle · Navigation Discover / Connect / Buy / About · Leitsatz.

Multiplikation

Global bleibt: Logo, Farben, Typografie, Kreislauf, Kompass, Circle, Shop. Lokal wechselt: Standortname, Fotos, Öffnungszeiten, Etagenbelegung, Lernnotizen, SELECT-Partner. Jede Standortseite liegt unter /visit/[standort] und wird über ein CMS-Template befüllt – Platzhalter wie [STANDORT] in der Website markieren genau diese lokalen Felder.

SEO
SeiteTitle-Tag (DE)Suchintention
/AVIPONIK HOF + MARKET · Hofladen, Farm Food & Learning HouseAVIPONIK, Hof + Market, Hofladen [Ort]
/farmRegenerative Landwirtschaft · AVIPONIK Farmregenerative / nachhaltige Landwirtschaft
/farm/eggFrische Eier vom eigenen Hof · AVIPONIKEier vom Hof, Eier kaufen [Ort]
/foodFrische Eiernudeln & Ready Meals · AVIPONIK FOODNoodles, Ready Meals, Farm Food
/marketHofladen & Farm Shop · lokale LebensmittelHofladen, Farm Shop, lokale Lebensmittel
/visit/[ort]AVIPONIK HOF + MARKET [Ort] · Öffnungszeiten & Anfahrtlokal: Öffnungszeiten, Adresse

Technik: hreflang für de/en/vi, LocalBusiness-Schema (GroceryStore + Cafe) je Standort mit Öffnungszeiten, Product-Schema im Shop, sprechende URLs pro Sprache. SEO-Texte stehen in den Kapiteln, nicht als Textblöcke am Seitenende.

Phase 10 · Prüfung
FrageErgebnisWas wir dafür getan / korrigiert haben
In 5 Sekunden verständlich?jaHero zeigt den Hausschnitt mit drei Etagen und die Formel FARM + FOOD + MARKET + LEARNING direkt unter dem Claim.
HOF + MARKET klar erkennbar?jaIm Logo, in der Eyebrow und im Erdgeschoss der Illustration. Korrigiert: Logo trägt „HOF + MARKET“ dauerhaft als Unterzeile.
Unterschied zum normalen Hofladen?jaGläserne Produktion, Learning House, Lernnotizen, „Wir entwickeln. Du entscheidest.“ – ein System statt eines Regals.
Kreislauf verständlich?jaInteraktiver Kreis mit Mensch in der Mitte; Rückführung Learning → Farm wird explizit benannt.
Emotional ohne Kitsch?jaEin einziges Ei, ruhig inszeniert, mit Nest-Nummer als Fakt statt Symbolik. Keine Trachten, Flaggen, Holzschilder.
Modern ohne kalt?jaPapier- und Holztöne, Serif-Statements, Waldlicht in Bildflächen; die Technik bleibt im Hintergrund.
International mit regionaler Identität?jaVollständig auf Deutsch, Englisch und Vietnamesisch umschaltbar; englische Leitsätze bleiben in allen Sprachen als Markenclaims; regionale Fotos und Partner pro Standort.
Multiplizierbar?jaPlatzhalter [STANDORT], Standort-Chips im Footer, /visit/[ort]-Template.
Langfristige Markenentwicklung?jaKompass mit allen acht Prinzipien, Circle als Beziehungsebene, Shop und My AVIPONIK als eigene, verbundene Ebenen.

Offene Punkte für den Livegang: echte Fotografie, Adresse und Öffnungszeiten, konkrete Circle-Vorteile, muttersprachliche Prüfung der EN- und VI-Texte, Shop-Plattform, Impressum und Datenschutz.