Webdesign für den Weingärtnerverein Rottenburg / Wendelsheim e.V.

Die Herausforderung bestand darin, dass eine vollständig neue Website entwickelt werden sollte, da es bislang keine Präsenz im Internet gab. Zum Einen sollte eine Online-Präsenz entstehen, welche die Aufgaben des Vereins und die Arbeit seiner Mitglieder präsentiert. Zum anderen steht der Verein vor der Herausforderung, neuen Nachwuchs im Weingärtnern zu gewinnen. In Summe sollte die Website daher sowohl klassische Werte vermitteln als auch einen modernen Kick vermitteln. Zusätzlich sollte die Website barrierearm gestaltet werden.

Um die Arbeit des Vereins vorzustellen und den potentiellen Nachwuchs auf den Geschmack zu bringen, sollte das Thema Weinbau hinreichend in Form von gut lesbaren Texten und ansprechenden Bildern beschrieben und illustriert werden. Durch meine Erfahrungen mit meinem eigenen Weinberg im Rottenburger Weggental und die Unterstützung durch den Vorstand des Vereins konnte ich die gewünschten Inhalte mit dem dafür notwendigen Fachwissen optimal umsetzen. Die erstellten Textinhalte kommen überdies auch der Suchmaschinenoptimierung (SEO) zugute.

Eine weitere Herausforderung bestand in Bezug auf das Branding: Bislang lag lediglich ein einfarbiges Logo vor. Um das Web-Design ansprechend umzusetzen, musste daher ein abgestimmtes Farbprofil entwickelt werden.

Ausgehend vom Logo des Vereins wurden mehrere, miteinander harmonisierende Grundfarben über Adobe Color definiert, von denen final insgesamt drei Farben zum Einsatz kamen. Das, an das natürliche im Weinberg angelehnte Farbenspiel sollte sowohl klassische Werte als auch einen modernen Kick vermitteln. Zusätzlich mussten die Farben im Kontrastverhältnis weiter zueinander angepasst werden, um den aktuellen Anforderungen an die Barrierefreiheit zu genügen.

• Schriftfamilie für Überschriften: Merriweather Sans (Google Font)
• Schriftfamilie für Fließtexte: Merriweather (Google Font)
• Schriftgrößen: 16px, 18px, 24px, 48px

Der Google Font Merriweather wurde von Erben Sorkin entwickelt und erschien im Jahr 2010. Die Antiqua-Schrift mit barocken Zügen ermöglich robuste Fließtexte, die auf Bildschirmen angenehm zu lesen sind.

Die Texte sollten im Sinne der Barrierefreiheit gut lesbar sein. Daher wurde für die Fließtexte ein fetter Schriftschnitt (700) eingesetzt.

• CMS: WordPress / OceanWP
• Stil: Retro-Futurismus
• Zusätzliche Design-Elemente: Animationen, Hover-Effekte

Allgemeine Gestaltung

Im Vorfeld wurde ein Wireframe/Mockup erstellt, welches das Website-Layout in den Grundzügen festlegte.

Das Seitenlayout (Framework) zur Strukturierung der Website wurde klassisch gestaltet: Als Backbone-Elemente zum Einsatz kommen eine Top Bar, ein großer Header, der Body/Content-Bereich und der Footer in vertikaler Anordnung zum Einsatz.

Der Body/Content-Bereich wurde klassisch einspaltig gestaltet. Im Header stellt ein Hero zusammen mit dem Logo des Vereins above the fold den Verein und das Thema Weingärtnerei prominent in den Fokus. Noch above the Fold befindet sich auch das Navigationsmenü im Sinne einer effizienten User Experience (UX) und des User Interface (UI) Design.

Die Startseite enthält vier wesentliche Elemente, die den Weg der User Journey initial unterstützt: eine Zusammenfassung zur Weinlage des Vereins, einen Überblick mit Quicklinks zu allen Inhalte der Website, einen News-Block zu aktuellen Themen und einen Call To Action.

Besondere Merkmale

In der Darstellung des Logos, in den Überschriften und den Menüs kommen leichte 3D-Effekte zum Einsatz, wie sie in den 1980er und 1990er Jahren aufkamen und heute in einer leichten, retro-futuristischen Variante wieder modern sind. Mit dem Ansatz unterstrichen werden sollte das Thema der integralen respektive holistischen und tief in der Natur verwurzelten Arbeit im Weinberg mit seinen vielen Aspekten.

Ein Call To Action (CTA) soll als Handlungsaufforderung potentielle Weingärtner im Nachwuchs zur Kontaktaufnahme animieren.

Zur Untermalung der sechs Hauptthemen wurden als Experiment durch den Einsatz künstlicher Intelligenz passende Sub-Logos entworfen.

Über OpenStreetMap wurde eine individuelle Karte entworfen, welche die einzelnen Anbauflächen innerhalb der Einzellage Kapellenberg im Anbaugebiet Neckar-Alb (Weinanbaugebiet Württemberg) zeigt.

Barrierefreiheit

Zusätzlich wurden wichtige Bestandteile des Barrierefreiheitsstärkungsgesetz (BFSG) (für private Unternehmen) respektive des BITV 2.0 (für öffentliche Stellen des Bundes) und der hierin erforderlichen Web Content Accessibility Guidelines (WCAG) 2.2 Level AA erfüllt: Das Kontrastverhältnis der Hintergrundfarben zu den Schriften erfüllt die Bedingungen von WCAG 2.2 auf dem darüber hinausgehenden Level AAA (bestanden für alle Schriften).

Zusätzlich sind die Bedingungen des neueren Accessible Perceptual Contrast Algorithm (APCA) auf dem Level Silver erfüllt (auch als Fließtext erlaubt). APCA wurde für WCAG 3 entwickelt und könnte das bisherige Modell in Zukunft ablösen. Als weiterer Schritt zur Barrierefreiheit kann über ein Menü am rechten Seitenrand die Schrift zusätzlich vergrößert als auch ein hoher Kontrast eingestellt werden.

Um den Verein vorzustellen und die umfangreichen Aspekte des Weinbaus in der kleinteiligen Steilhanglage hinreichend zu beleuchten, wurde mit knapp 30000 Zeichen inklusive Leerzeichen umfangreich getextet. Im Mittelpunkt stehen sechs Themenblöcke, die aufgrund der notwendigen Textlastigkeit in mehrere Unterseiten aufgeteilt wurden.