Kommunikation durch strategisches Design

Websiten für das Forschungsprojekt "GoingVis"

Das Projekt GoIngVis des Forschungszentrums für Umweltpolitik an der FU Berlin durften wir mit der Gestaltung der Außenkommunikation bzw. Brandings begleiten. Den Entwicklungsprozess zu Logo und visuellen Elementen haben wir bereits hier detailliert beschrieben. Ein besonderes Merkmal des Projekts: es findet in zwei Städten statt – mit dem möglichem Ausblick auf Ausweitung auf mehrere Städte.

Die Webseiten für die beiden Partnerstädte und die Projektseite sollen als Hauptkommunikationsmittel für das Projekt dienen. Die Städteseiten sollen die Besucher mit aktuellen Informationen zu Veranstaltungen, mit Blogartikeln und einem Wissensbereich zu den Themen Klimawandel und Wärmeereignissen informieren. Zukünftig soll zusätzlich ein Experimentierbereich entstehen, welcher zur direkten Kommunikation mit den Bürger*innen dient.

Das Design ist so entworfen, dass eine breitere Menge an Menschen verschiedener Altersgruppen angesprochen wird. Da vor allem die Vermittlung von Informationen im Mittelpunkt steht, sind die Schriften gut leserlich gehalten und zwischen Schriftfarbe und Hintergrund immer für einen guten Kontrast gesorgt.

Im Design der Webseite finden sich viele kleine Details wieder, welche wir aus dem Logo und dem Branding für dieses Projekt erstellt haben. So ist zum Beispiel die Hervorhebung unter den Menüpunkten ein Punkt, welcher auf der Linie sitzt. Dies ist aus dem Logo entnommen, in dem die Striche ihren Endpunkt in einem kleinen Kreis finden. Die Farbgestaltung entwickelte sich ebenfalls aus dem Logo. Die Verwendung von rot und orange sollen zusätzlich das Thema Hitze in die Gestaltung mit einbringen.

 

mockup-handy-laptop-webdesign-formlos-berlin-corporate-design

Technische Raffinesse

Der Unterbau

Damit das Team von Goingvis selbstständig die Seite nutzen und eigene Inhalte publizieren kann braucht es einen technischen Unterbau zur Inhaltsverwaltung (engl. Content Management System, kurz CMS). Wir haben diese Webseite mit WordPress umgesetzt. Dieses – relativ einfache – CMS bringt schon einige Funktionen mit und kann mit eigenen Gestaltungsvorlagen und Zusatzfunktionen erweitert werden. Für diese Projekt  wurde eine eigene Gestaltungsvorlage (sogenanntes Theme) von uns erstellt.

Logo

Das Logo wird mit tagesaktuellen Daten vom Deutschen Wetterdienst automatisch aktualisiert. Jeder einzelne Strich mit Kreis aus dem Logo stellt die Tagesmitteltemperatur  für die jeweilige Stadt dar. Der aktuellste Wert befindet sich unten rechts und die Entwicklung der Temperatur für die letzten 30 Tage baut sich im Uhrzeigersinn auf.

Menühintergrund

Wer genauer hinschaut stellt fest das der Hintergrund des Menüs entweder transparent oder rot ist. Je nachdem ob ein Hintergrund Bild im Kopfbereich ist oder nicht wird das Menü mit oder ohne Hintergrundfarbe ausgespielt. Damit die Menüpunkte auf jedem Hintergrundbild gut lesbar sind wird ein Verlauf welcher sich aus der prominentesten Farbe des Hintergrundbildes errechnet über den oberen Teil des Bildes gelegt.

web-kalender-01

Veranstaltungen

Veranstaltungen benötigen einige Eigenschaften, welche über die normalen Einstellungsmöglichkeiten eines Artikels hinausgehen. Um dies zu erreichen, haben wir für die Veranstaltungen einen eigenen Inhaltstypen erstellt. Dieser Inhaltstyp wurde mit zusätzlichen Feldern bestückt z.B. Anfangs- und Enddatum, Start- und Endzeit und der Veranstaltungsort. Dies ist zum Einen notwendig um ausreichend Informationen für die Besucher bereitzustellen und zum Anderen damit wir in unserem Template die Veranstaltungen sortiert nach Aktualität ausgeben und nach deren Ablauf wieder ausblenden können.

Damit Veranstaltungen und Blogartikel sortiert und filtriert ausgegeben werden können, wurden Kategorien genutzt, welche den Inhalten zugewiesen werden können. So kann man für jede Veranstaltung oder jeden Beitrag eine oder mehrere Kategorien vergeben. Wenn man auf eine Kategorie klickt, werden einem nur Beiträge aus dieser Kategorie ausgegeben.

Ein weiteres optisches Element sind die vergangenen Veranstaltungen, welche unten in einer Art Zeitstrahl ausgegeben werden. Hier kann nachvollzogen werden, was bereits alles passiert ist. Die Darstellung mit den Kreisen und Linien greifen auch wieder die Elemente aus dem Logo auf.

Suche

Eine Suchfunktion soll ebenfalls dazu beitragen das man sich als Besucher*in besser auf der Webseite zurecht findet und Inhalte filtern kann.