Kommunikation durch strategisches Design

Websiten ReDesign

Hubertus Heil

Bei dem ReDesign von Webseiten mit vielen bereits vorhandenen Inhalten, ist es immer eine Herausforderung diese in neuem Licht glänzen zu lassen. So auch hier: Frisch und Seriös musste es selbstverständlich sein. Da ein Bundestagsabgeordneter und Minister für eine breite Masse an Menschen spricht, sollte auch die Webseite eine breite Massen ansprechen. Bei den ersten Gesprächen mit dem Team von Hubertus Heil konnten wir die Menge an Einzelseiten reduzieren und die Inhalte sinnvoller aufteilen. Durch die Parteizugehörigkeit war das Farbschema klar: natürlich das SPD-Rot. Die Texte sollten mit einem starken Kontrast (weiß auf rot bzw. dunkelgrau auf weiß) möglichst gut zu lesen sein.
Technische Raffinessen: Text auf unterschiedlichen Fotos lesbar machen mittels smartem Verlauf
Damit sich die weiße Schrift des Menüs von den Bildern im Kopfbereich abhebt, haben wir ein Script verwendet welches die präsenteste Farbe aus dem Bild automatisch ermittelt und diese Farbe dann mit einem Verlauf unter dem Menü ausgespielt. Der Verlauf selbst bleibt fast unsichtbar, aber die Schrift ist immer gut lesbar. Auf Seiten ohne Hintergrund wird die Schrift und die Icons dann in einem dunklen Grau dargestellt.
Ordnung muss sein – die richtigen Inhalte an den richtigen Stellen
Die große Menge von bereits vorhandenen Artikeln (über 500) machte es notwendig eine Einordnung in verschiede Kategorien durchzuführen. So können diese Kategorien an verschiedenen Stellen auf der Seite ausgespielt werden. Neben den von WordPress zu Verfügung stehenden Typen/Templates für Artikel haben wir auch eigene Inhaltstypen, wie die Termine erstellt.
Webseite selbst Pflegen können – ganz einfach
Damit das Einsetzen von neuen Inhalten und das aktualisieren bestehender Inhalte möglichst einfach funktioniert haben wir ein WordPress-Plugin benutzt, welches eine Frontend-Bearbeitung von Texten und Bildern ermöglicht.
Auch der Slider auf der Startseite ist ein eigens angefertigtes Modul mit dem die Administrator*innen der Seite den Text und die Position des Textes auf dem Bild selber einstellen können. So kann für jedes Bild eine passende Position ausgewählt werden.
Mobile Optimierung – bis ins Detail
Für eine optimale Darstellung der Seite auch auf mobilen Endgeräten (Smartphones & Tablets) haben wir die Inhalte auf die verschiedenen Browser und Größen optimiert. Das Mobile Menü ist eigenhändig nur für diese Seite erstellt worden: Damit man schnell auf einem Blick hat was auf der Webseite zu finden ist – inklusive Social Media Verlinkung.
Microanimationen als Navigationshilfe
Um den Nutzer*innen anzuzeigen welchen Blogartikel er*sie gerade sieht, wird beim rüberfahren mit der Maus/Curser in Artikelübersichten der rote Textblock leicht angehoben. Diese Microanimationen geben der Webseite etwas lebhaftes und dienen gleichzeitig als Navigationshilfe. Solche Elemente finden sich an verschiedenen Stellen auf der Webseite.