Webdesign und Umsetzung für Hubertus Heil

Da ein Bundestagsabgeordneter und Minister für eine breite Masse an Menschen spricht, sollte auch die Webseite eine breite Masse ansprechen.

Beim ReDesign von Webseiten mit vielen bereits vorhandenen Inhalten, ist es immer eine Herausforderung diese neu zu gestalten. So war es auch hier:

Bei den ersten Gesprächen mit dem Team von Hubertus Heil, konnten wir die Menge an Einzelseiten reduzieren und die Inhalte sinnvoller aufteilen. Frisch und seriös sollte der neue Auftritt im Web werden. 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 dann mit einem Ver­lauf unter dem Menü aus­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 z.B. 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 funktionieren, haben wir ein WordPress-Plugin benutzt, welches eine einfache 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 Text und Position selber einstellen können.

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 und 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

Wollen wir zusammenarbeiten?

Wir freuen uns sehr, wenn wir gemeinsam die Welt ein wenig besser gestalten können.

Jetzt Kontakt aufnehmen
Jetzt zum Newsletter anmelden