Das Projekt „Deutschland wird wieder Otterland" der Deutschen Umwelthilfe (DUH) verfolgt einen ganzheitlichen Ansatz: Konkrete Maßnahmen zur Lebensraumverbesserung des Fischotters werden mit wissenschaftlicher Begleitung und aktivem Wissenstransfer verbunden. Für dieses ambitionierte Verbundprojekt entwickelten wir eine zentrale Webseite, die Fachleute aus Behörden und Planungsbüros ebenso anspricht wie eine naturinteressierte Öffentlichkeit. Ziel war eine Plattform, die begeistert, informiert und zur Nachahmung anregt.
ZIELFORMULIERUNG:
Fachexpertise + regionale Projektdokumentation
Designentwicklung
Webdesign
Gestalterisch setzten wir auf ein selbstbewusstes, modernes Design – bewusst abseits der klassischen Grün-Braun-Ästhetik vieler Naturschutzseiten. Die CI-Farben der DUH wurden konsequent und konsistent eingesetzt. Wellenförmige Bereichstrenner, die je nach Hintergrundfarbe konfigurierbar sind, sorgen für eine unverwechselbare, fließende Optik, die das Thema Wasser und Feuchtbiotope visuell aufgreift. Hochwertige Otterfotos, die uns die Kund:in zur Verfügung stellte, unterstreichen die emotionale Wirkung der Seite.
Das Branding und ein erster Entwurf für die Startseite wurden von der Agentur Planet neun erstellt. Die weitere Ausarbeitung und die finale Gestaltung wurde dann von uns gemacht.
»Wir haben viele positive Rückmeldungen zur neuen Website bekommen – das Feedback war durchweg erfreulich. Die Zusammenarbeit mit FORMLOS Berlin war dabei von Anfang an klar strukturiert und verlässlich.«Anne Siegert | Projektkoordination Otterland Team | www.otterland.info
Besonders hilfreich war das gemeinsame Arbeiten über Asana: Deadlines, Aufgaben und automatische Updates waren jederzeit transparent. Die Kommunikation lief unkompliziert, und auf Fragen haben wir immer schnell eine Antwort bekommen. Auch die Übergabe war gut vorbereitet – dank der Erklär-Videos konnten wir direkt selbst loslegen. Inhalte im WordPress-Backend lassen sich problemlos pflegen, Texte sind leicht einzufügen. Die visuelle Umsetzung hat sich dabei stimmig an unser bestehendes Branding angeschlossen – ohne Schnickschnack, aber mit Blick fürs Wesentliche.
© C.Finke / DUH
Technische Besonderheiten
Wie üblich setzten wir die Seite mit WordPress um. Ein großer Fokus lag für uns darauf, dass das Otterland-Team die Inhalte selbst einfach bearbeiten, sowie neue Seiten und Beiträge anlegen kann. Dafür kam der Beaver Builder zum Einsatz, den wir mit eigenen Modulen – z. B. für wellenförmige Zeilentrenner – erweitert haben.
Für die Modellregionen entwickelten wir ein eigenes Seitenkonzept mit mitlaufendem Navigationsmenü: Beim Scrollen wird jeweils der aktuelle Abschnitt im Menü hervorgehoben – das erleichtert die Orientierung auf inhaltlich dichten Seiten erheblich. Die Webseite wurde kontinuierlich weiterentwickelt, etwa durch die nachträgliche Integration einer Podcast-Seite.
Die fertige Webseite kann man sich hier ansehen: https://www.otterland.info/
Projektablauf
Wie alle unsere Webprojekte haben wir auch hier mit einem Workshop begonnen. Dieser war notwendig, um sich zunächst kennenzulernen, sowie die Ziele der Webseite, die Zielgruppen und die Mitbewerber:innen zu betrachten. Außerdem erarbeiteten wir gemeinsam die Sitemap, also eine erste Struktur der Inhalte der Seite.
Auf diesem Grundgerüst aufbauend erstellten wir im nächsten Schritt sogenannte Wireframes bzw. ein Groblayout. Diese vereinfachte Darstellung ohne Farben oder Gestaltungselemente diente der Visualisierung, wie die zukünftigen Inhalte auf der Webseite angeordnet werden können. Der Schritt fand bereits direkt in WordPress statt, was den Vorteil mit sich bringt, dass die ersten Inhalte direkt eingebaut werden konnten.
Mit den Wireframes gingen wir anschließend in das Screendesign. An diesem Punkt hatten wir bereits eine genaue Übersicht, mit welchen Textlängen, notwendigen Bildern und Interaktionselementen zu rechnen ist. Auf dieser Grundlage konnten wir dann ein passendes Design sehr präzise ausarbeiten. Wie bereits oben beschrieben, gab es bei Otterland schon einen ersten Designentwurf für die Startseite. Den haben wir gestalterisch weiterentwickelt und anschließend das komplette Design für die Unterseiten erstellt.
Im letzten Schritt gingen wir in die Programmierung und Implementierung des Designs. Alle Elemente wurden nun auf der Webseite final ausgestaltet und sämtliche Interaktionselemente für die Nutzung fertiggestellt. Am Ende des Prozesses fand eine Schulung statt, in der wir alle Funktionen und Bearbeitungsmöglichkeiten vorgestellt haben, sodass das Otterland-Team die Webseite selbstständig pflegen kann.
Die Webseite ist natürlich, wie alle unsere Webseiten, vollständig responsive und in weiten Teilen so barrierearm wie möglich entwickelt worden.