Zurück

terroir f

Magische Orte des Frankenweins virtuell entdecken

Die terroir f Standorte sind weit mehr als nur Aussichtspunkte – sie sind die Seele der fränkischen Weinkultur. Hier vereinen sich die Schönheit der Natur, künstlerische Landschaftsarchitektur und die jahrhundertelange Tradition des fränkischen Weinbaus zu einem einzigartigen Gesamterlebnis. 

Mit der Vision, diese kulturellen Schätze für Weinliebhaber, Touristen und Einheimische gleichermaßen digital zugänglich zu machen, haben wir in Zusammenarbeit mit der Bayerischen Landesanstalt für Weinbau und Gartenbau eine Progressive Web-App entwickelt. Von faszinierenden Geschichten und Informationen rund um spezielle Weinthemen, die das Weinerlebnis vertiefen, bis hin zu interaktiven Funktionen für das Vor-Ort-Erlebnis, eröffnet die App neue Wege, Frankens Weinkultur in ihrer vollen Tiefe zu genießen.

Kunde
Bayerische Landesanstalt für Weinbau und Gartenbau (LWG)

Auftrag
Progressive Web-App

Services
Konzeption, UX-Design, Programmierung (Headless TYPO3), Barrierefreiheit, Inhaltspflege

Daten & Fakten
Projektzeitraum: 8 Monate
Veröffentlicht: 2024

Partner:
Atelier zudem

Plattformunabhängige und responsive Web-App

Die Website "terroir f" ist als Progressive Web-App umgesetzt und bietet den Besuchenden ohne Download ein App-ähnliches Erlebnis direkt im Browser. Das Responsive Design passt sich flexibel an alle Bildschirmgrößen an und sorgt für eine optimale Darstellung auf Mobilgeräten, Tablets und Desktops. Als plattformunabhängige Lösung funktioniert sie auf iOS, Android und Desktop gleichermaßen. Die Web-App wird so zum perfekten Begleiter – ein digitales Tor in die Welt des fränkischen Weins, jederzeit und auf jedem Gerät nutzbar.

„Hier in Franken ist mit den terroir f Punkten etwas Einzigartiges entstanden. Heute bringen wir die Magie des Frankenweins in das digitale Zeitalter.“

Artur Steinmann, Präsident des Fränkischen Weinbauverbands

Eine digitale Entdeckungsreise durch Frankens Weinkultur

Standortübersicht
Über die Startseite der Webanwendung können Nutzer:innen direkt in die Welt der fränkischen Weinerlebnisorte eintauchen. Eine interaktive Karte zeigt alle Standorte auf einen Blick - jeweils eingebettet in ihre geografische Umgebung. Mit verschiedenen Kartenmodi und der Möglichkeit zur Standortfreigabe macht die App die Planung individueller Touren einfach und flexibel. Zu jedem Standort bietet die App detaillierte Einführungstexte, die den Ort und sein Thema - von Wein-Geologie bis zur fränkischen Rebsortenvielfalt - informativ vorstellen. Ein Video zum Konzept der terroir f Orte fängt die besondere Atmosphäre und Vielfalt der Standorte ein und weckt Neugier auf die faszinierenden Geschichten und Themen dieser Orte.

Standortseiten
Auf den Standortseiten tauchen Nutzer:innen in die Besonderheiten der Standorte ein und erfahren über thematisches Wissen, einzigartigen Geschichten und regionalen Highlights, was sie unverwechselbar macht. Übersichtlich gestaltet und informativ aufgebaut, bieten die Standortseiten alle wichtigen Infos zur Anreise, aktuellen Wetterbedingungen und lokalen Besonderheiten.

Wein erleben, Region stärken

Die auf den Standortseiten angebotenen Weinbergbegehungen und Verkostungen laden Besucher:innen dazu ein, die Schätze der Region hautnah zu erleben und in die fränkische Weinkultur einzutauchen – mit allen Sinnen. Dabei geht es um mehr als nur Genuss: Die Plattform terroir f setzt gezielt Impulse, die regionale Identität und den Tourismus zu fördern und positioniert sich so als Wegbereiter für die nachhaltige Weiterentwicklung der fränkischen Weindestinationen.

Mit Augmented Reality durch den Weinberg

Die Augmented-Reality-Funktion bringt das Erlebnis des fränkischen Weins direkt in die Hände der Benutzer:innen. Über Smartphone oder Tablet öffnet sich eine Welt voller Einblicke, die Weinwissen interaktiv und lebendig werden lässt. Der Weinberg verwandelt sich zur Bühne für detailreiche 3D-Modelle: Nutzer:innen können diese virtuellen Objekte vor sich platzieren, aus jeder Perspektive erkunden und heranzoomen, um feinste Details zu entdecken. Durch die Visualisierungen und Infotexte erfahren sie zum Beispiel, wie moderne Maschinen den traditionellen Weinbau bereichern. Ein Erlebnis, das Wissen greifbar macht – und eine völlig neue Art, den fränkischen Weinbau zu erleben und zu verstehen.

Momente festhalten mit der interaktiven Fotofunktion

Jeder besondere Moment verdient es, unvergesslich zu bleiben. Das gilt natürlich auch für den Besuch eines terroir f Standortes. Mit der integrierten Fotofunktion können Besucher:innen der terroir f Standorte Augenblicke nicht nur festhalten, sondern sie auch kreativ gestalten.

Thematisch passende Sticker verleihen den Fotos eine individuelle Note und machen aus einfachen Schnappschüssen echte Erinnerungsstücke, die selbstverständlich gespeichert und über Social Media geteilt werden können.

"Mit terroir f haben wir eine interaktive Webanwendung entwickelt, welche die Schönheit Frankens digital vermittelt. Ein Projekt, das zeigt, wie sich regionaler Tourismus und kulturelles Bewusstsein durch den Einsatz digitaler Medien stärken lässt."

T. Vießmann, UI/UX-Designerin bei bueroparallel

Technische Umsetzung: Flexibel, schnell, zukunftssicher

Die technische Umsetzung von terroir f basiert auf einer Headless-TYPO3-Lösung sowie modernsten Javascript-Frameworks. Durch die Trennung von Frontend und Backend profitiert die Webanwendung von schnellen Ladezeiten, hoher Skalierbarkeit und einer flexibel anpassbaren Softwarearchitektur.

Das TYPO3 liefert als headless-CMS strukturierte Inhalte über eine JSON-Schnittstelle, während die Vue.js/Nuxt.js-Frontend-Frameworks für eine performante mobile-first Benutzererfahrung sorgen. Diese Technologiekombination garantiert ein flüssiges, intuitives und zukunftssicheres digitales Erlebnis und erfüllt zudem alle Anforderungen einer Progressive-Web-App (PWA) erfüllt. Dementsprechend ist die Anwendung schnell, responsiv und bietet ein App-ähnliches Nutzererlebnis mit flüssigen Übergängen und modernen UI-Elementen.

Der große Vorteil einer Umsetzung als Progressive Web App ist, dass die Anwendung auf jedem Gerät mit Browser - egal ob Smartphone, Tablet oder Desktop - läuft und nicht über einen App Store installiert werden muss. Erweiterungen und Updates werden direkt auf dem Server bereitgestellt, ohne dass die Nutzer:innen eine neue Version aus einem App Store herunterladen müssen. Darüber hinaus sind PWAs wie herkömmliche Websites indexierbar und über Suchmaschinen auffindbar, was ihre Reichweite deutlich erhöht.

Barrierefreie Anwendung

Trotz der hohen Komplexität der interaktiven Webanwendung wurde bei der Gestaltung und der technischen Umsetzung von Anfang an ein besonderes Augenmerk auf die Barrierefreiheit gelegt, sodass die Anwendung auch für Menschen mit Beeinträchtigungen problemlos zugänglich ist. Dies beinhaltet unter anderem die Unterstützung von Screenreadern, eine einfache Tastaturnavigation und die Bereitstellung alternativer Texte, Untertitel und Audiobeschreibungen für visuelle Inhalte wie Bilder und Videos. Plugins oder Browser-Erweiterungen, die versprechen, Webanwendungen barrierefrei zu machen, erfüllen meist nur wenige Anforderungen und ersetzen keine saubere Implementierung. Zielführender ist es, die nativen Browserfunktionen zu nutzen und Barrierefreiheit direkt im Code umzusetzen. Daher lautet unser Prinzip: “Barrierefreiheit by Default und nicht als Add-On.”

Zur Gewährleistung der Anforderungen führte unser Designteam bereits beim Interface-Design die notwendigen Tests und Prüfungen durch, um sicherzustellen, dass die Designentwürfe den Ansprüchen der Barrierefreie-Informationstechnik-Verordnung (BITV) entsprechen. Zudem wurde die technische Umsetzung in enger Kooperation mit einer zertifizierten Prüfstelle realisiert und begleitet. So vereint die interaktive Web-Anwendung Benutzerfreundlichkeit und Inklusion und macht terroir f dadurch für alle erlebbar.


Kontraste & Farben

Im Rahmen des Projekts wurden alle Farben der Web-App auf Barrierefreiheit geprüft und optimiert. Besondere Aufmerksamkeit galt den Kontrasten der einzelnen Elemente, um die Lesbarkeit für alle Nutzer:innen sicherzustellen. So erhielten z.B. Fließtexte unter 18 Punkt ein Kontrastverhältnis von mindestens 4,5:1, sodass alle Textelemente den Anforderungen an barrierefreie Darstellung entsprechen.

Schrift

Gemäß den Vorgaben lassen sich alle Texte der Seite um bis zu 200 Prozent vergrößern, ohne dass dabei Inhalt oder Funktionalität verloren geht. Ebenso können die Zeilenhöhe, die Abstände nach Absätzen und die Buchstabenabstände vergrößert werden.

Bedienelemente

Erweiterte Bedienelemente für den Videoplayer ermöglichen es auch Menschen mit Hör- und/oder Sehbehinderungen, zusätzliche Untertitel einzublenden oder Audiodeskriptionen abzuspielen, um alle Inhalte interaktiv erleben zu können. Zu diesem Zweck wurden für alle relevanten Videos zusätzliche barrierefreie Versionen erstellt.

Navigation

Neben der Hauptnavigation in Form der Karte auf der Startseite können die terroir f Standorte auch über eine QR-Code-Suche an den Standorten sowie über mehrere Standortlisten gefunden werden. Spontane Besucher:innen haben zudem die Möglichkeit, sich über die Ortungsfunktion eine Route zum nächstgelegenen Standort anzeigen zu lassen.

"Mit der neuen terroir f  Web-App können alle Genuss- menschen Historie erleben & die fränkische Kultur- landschaft noch bewusster genießen. Ich bin als Tourismus- ministerin echt stolz, dass uns die App gelungen ist."

Michaela Kaniber, Bayerische Landwirtschaftsministerin

Feierliche Release-Veranstaltung

Im Rahmen einer feierlichen Veranstaltung gab die bayerische Landwirtschaftsministerin Michaela Kaniber den offiziellen Startschuss für die neue Web-App. Zahlreiche Bürgermeister:innen der Weinbaugemeinden und Mitglieder der Weinbauverbände begleiteten die Veranstaltung und unterstrichen die Bedeutung dieses digitalen Angebots, das den Wert der fränkischen Kulturlandschaft neu und zeitgemäß vermittelt.

Kooperationspartner

Ähnliche Projekte