1 Spalte mobil · 2 auf Tablet · bis 6 im breiten Raster
Designsystem 1.0 · Blöcke 101–150
Schön, klar und verlässlich bedienbar.
Ein gemeinsames System macht Suche, Hofprofile, Produkte, Erlebnisse und Wissen auf jedem Gerät verständlich. Hier sind die Regeln nicht nur beschrieben: Sie werden als echte Komponenten und Zustände gezeigt.
Komponenten ausprobierenRaster · Raum · Farbe · Schrift
Ein ruhiges Gerüst für jede Bildschirmgröße.
Das Layout nutzt eine begrenzte Lesebreite, fließende Abstände und klare Überschriftenstufen. Preise, Entfernungen, Mengen, Uhrzeiten und Prüfdaten folgen einheitlichen deutschen Formaten.
8 · 16 · 24 · 40 Pixel als ruhiger Grundrhythmus
Seitentitel
Kapitelüberschrift
Fließtext bleibt in einer angenehm lesbaren Zeilenlänge und erhält genügend Zeilenabstand.
Interaktive Komponenten
Jeder Zustand erklärt sich selbst.
Farbe unterstützt die Aussage, ersetzt aber nie Text, Symbol oder Statusbegriff.
112–114
Aktionen & Eingaben
120–126
Systemzustände
Noch keine bestätigten Treffer
Umkreis erweitern, Filter lösen oder einen fehlenden Anbieter melden.
Modalregel: Unterbrechungen nur für notwendige Bestätigungen und kurze Aufgaben. Kein Dialog öffnet automatisch.
Titelbild 16:9Echtes, rechtegeklärtes Hofmotiv erforderlich
◇ Verfügbarkeit offenStand: noch nicht bestätigt
Profilvorlage · kein echter Hof
Hofname und Ort
MilchartÖffnungZahlung
Produktname
- Art
- offen
- Preis
- nicht bestätigt
- Einheit
- offen
- Herkunft
- Hofangabe nötig
Titel des Angebots
- Zielgruppe
- offen
- Dauer
- offen
- Termin
- offen
- Buchung
- noch nicht verfügbar
Karte & Legende
Orientierung ohne erfundene Standorte.
Die Kartenfläche bleibt ein ehrlicher Strukturentwurf. Pins werden erst gesetzt, wenn ein Standort belastbar vorliegt.
HHofladenAMilchautomatKKäsereiEErlebnisbetrieb+Mehrere Angebote
KartenstrukturKeine veröffentlichten PinsCluster, Status und Sonderkennzeichnungen sind in der Legende vorbereitet.
Responsive Ansichten
Vergleichen, merken und unterwegs nutzen.
Desktop verbindet Liste und Karte. Tablet wechselt kontrolliert in den Fokusmodus. Mobil hält die Aktionsleiste wichtige Wege erreichbar, ohne Inhalte zu verdecken.
Ergebnisliste
Profilvorlage 1Status und Entfernung offen
Profilvorlage 2Status und Entfernung offen
Profilvorlage 3Status und Entfernung offen
KartenbereichKeine echten Standorte
Ausgewählte Profile nach denselben Merkmalen
EntfernungÖffnungMilchartenAusstattung
Noch keine Profile ausgewählt.
Höfe, Produkte, Routen und Hinweise geordnet merken
Keine Nutzerdaten werden gespeichert.
Standortsuche, Portalversprechen und aktuelle Orientierung
Orte, Angebote, Wege und regionale Einordnung
Entfernung, Öffnung und erreichbare Alternativen
Kerndaten, Status, Produkte, Geschichte und Kontakt
Art, Herkunft, Preis, Einheit und Verfügbarkeit
Zielgruppe, Termin, Dauer, Preis und Buchungsstatus
Kurzantwort, Inhaltsübersicht, Merkkästen und Quellen
Porträt 4:5Rechtegeklärtes Bild nötig
Hofgeschichte 139
Große Bilder. Persönliche Stimme. Überprüfbare Fakten.
„Ein echtes Zitat erscheint erst nach einem tatsächlichen Gespräch und einer redaktionellen Freigabe.“
Bildunterschrift: Motiv · Hofzuordnung · Fotografin/Fotograf · Rechteinhaber
Wissensartikel 140
Vom schnellen Verständnis zur belastbaren Quelle.
Kurzantwort
Der Inhalt bleibt ein Layoutbeispiel. Fachinformationen werden erst mit Quelle und Prüfdatum veröffentlicht.
Druckansicht: Navigation, Dekoration und unnötige Flächen werden beim Drucken ausgeblendet.
Qualitätsprüfung 144–150
Jede Seite durchläuft denselben sichtbaren Check.
Die technische Gestaltung orientiert sich an WCAG 2.2. Diese Pilotfassung behauptet noch keine vollständige Konformität; eine belastbare Erklärung setzt systematische Tests voraus.
W3C: WCAG 2.2 verstehen ↗Seitenraster und Abstände konsistentIm Designsystem umgesetzt
Text, Bedienelemente und Fokus gut erkennbarIm Designsystem umgesetzt
Status nie nur durch Farbe vermitteltIm Designsystem umgesetzt
Smartphone, Tablet und Desktop berücksichtigtIm Designsystem umgesetzt
Tastaturreihenfolge und Beschriftungen nachvollziehbarVor Veröffentlichung jedes echten Inhalts prüfen
Bilder nur mit Zuordnung, Credit und geklärtem RechtVor Veröffentlichung jedes echten Inhalts prüfen
TastaturDeutlicher Fokus für Links, Buttons und FelderBewegungReduzierte Bewegung wird respektiertScreenreaderSemantische Überschriften, Labels und Live-Status
Designbibliothek 1.0
Ein verbindliches System – bereit für echte Inhalte.
Die Komponenten, Zustände, Bildregeln und sieben Seitentemplates bilden jetzt den Standard für den weiteren Ausbau. Echte Höfe, Bilder und Angebote werden weiterhin erst nach belastbarer Zuordnung und Freigabe veröffentlicht.
Im Gesamtportal ansehen