Webdesign und Umsetzung für 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 Masse 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.

Simpel und einfach

DIE WEBISTE SELBST PFELEGN KÖNNEN

 

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.

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.

Mobile Optimierung

BIS INS KLEINSTE 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.

Website-Design-Webdesign-Hubertus-Heil-FORMLOS-Berlin-mobil-1
Website-Design-Webdesign-Hubertus-Heil-FORMLOS-Berlin-mobil-3
Website-Design-Webdesign-Hubertus-Heil-FORMLOS-Berlin-mobil-2

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.
Website-Design-Webdesign-Hubertus-Heil-FORMLOS-Berlin-6
Website-Design-Webdesign-Hubertus-Heil-FORMLOS-Berlin-5
Website-Design-Webdesign-Hubertus-Heil-FORMLOS-Berlin-3
Website-Design-Webdesign-Hubertus-Heil-FORMLOS-Berlin-1
Website-Design-Webdesign-Hubertus-Heil-FORMLOS-Berlin-2
Website-Design-Webdesign-Hubertus-Heil-FORMLOS-Berlin-4