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.

Tech­ni­sche Raf­fi­nessen

TEXT AUF UNTER­SCHIED­LI­CHEN FOTOS LESBAR MACHEN MIT­TELS SMARTEM VERLAUF

 

Damit sich die weiße Schrift des Menüs von den Bil­dern im Kopf­be­reich abhebt, haben wir ein Script ver­wendet wel­ches die prä­sen­teste Farbe aus dem Bild auto­ma­tisch ermit­telt und diese Farbe dann mit einem Ver­lauf unter dem Menü aus­ge­spielt. Der Ver­lauf selbst bleibt fast unsichtbar, aber die Schrift ist immer gut lesbar. Auf Seiten ohne Hin­ter­grund wird die Schrift und die Icons dann in einem dunklen Grau dargestellt.

Ord­nung muss sein

DIE RICH­TIGEN INHALTE AN DEN RICH­TIGEN STELLEN

 

Die große Menge von bereits vor­han­denen Arti­keln (über 500) machte es not­wendig eine Ein­ord­nung in ver­schiede Kate­go­rien durch­zu­führen. So können diese Kate­go­rien an ver­schie­denen Stellen auf der Seite aus­ge­spielt werden. Neben den von Wor­d­Press zu Ver­fü­gung ste­henden Typen/Tem­plates für Artikel haben wir auch eigene Inhalts­typen, wie die Ter­mine erstellt.

»Vielen herzlichen Dank an euch für die Arbeit im Namen des gesamten Teams von Hubertus Heil. Es sieht super aus und wir sind absolut zufrieden mit dem Ergebnis.«

Farisa Al Ahmad, Büroleiterin Berlin │ Wissenschaftliche Mitarbeiterin

Sommertour-16_Farisa-3

Simpel und ein­fach

DIE WEBSITE SELBST PFLEGEN 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.

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