Von Mobile zu Desktop

Full-responsive Relaunch einer komplexen und mehrsprachigen Website mit mehreren Schnittstellen zu Drittanwendungen. Ich begleitete dieses Projekt als Projektleiter und Frontend Designer.

Zunächst galt es zusammen mit dem Kunden, in diversen Meetings, die Ziele der neuen Website zu klären, abzustecken und die Zielgruppen sowie Stakeholder zu definieren. Die neue Website sollte verschiedenste Zielgruppen bedienen, Ihre Bedürfnisse abholen und Benutzern ein angenehmes und intuitives Besuchserlebnis vermitteln.

Der nächste Schritt galt dem Motto - Ballast abwerfen!
Über die Jahre hatte sich eine Menge Inhalt angesammelt.

"Welcher Inhalt ist für den Nutzer relevant?
Welche Informationen sucht der Besucher?
Wo sucht er diese Informationen?
Passt der Inhalt zu den Ausgabegeräten? "
Das sind die Fragen welche uns im Laufe der Konzeptionsphase als nächstes beschäftigten sollten.

Mindmap und Wireframe
Mindmaps und Wireframes helfen den Inhalt zu strukturieren und zu platzieren.

Erst nach Klärung dieser Fragen ging es darum einen Content Inventar aller Inhalte zu erstellen, Inhalte zu streichen und neue zu schaffen. Um den Benutzer die richtigen Inhalte an der richtigen Stelle finden zu lassen wurden nun Mindmaps und Navigationsstrukturen angelegt. Erste Wireframes dienten dem Kunden sich zu orientieren, welche Inhalte, auf welchem Gerät, wo zu finden sein würden und in welcher Form diese dargestellt werden könnten. Nachdem Mobile-First-Prinzip wurden alle Wireframes zu erst auf Mobilegeräte ausgelegt und dann bis zur Desktopgrösse skaliert.

Endlich kommt Farbe ins Spiel!

  • Erstellung eines Farbschemas
  • Definition von Schriftarten und typografischen Elementen
  • Ausarbeitung der bestehenden Wireframes in detailgetreue und farbige Wireframes
  • Definition der individuellen Content Elemente - Spezifisches Design für spezifischen Content!

Nun begann die Phase des Codings und der Frontend-Entwicklung. In enger Zusammenarbeit mit den Webentwicklern, wurde ein statischer, klickbarer Prototyp des Designs in HTML5/CSS3 und JS entwickelt.

“Dem Kunden das Look & Feel der neuen Website vermitteln”

Zu guter Letzt beteiligte ich mich intensiv an der Integration des statischen Templates in das Neos CMS, um den Kunden ein intuitives und einfaches Pflegen Ihrer Website zu ermöglichen.
In diesem Projekt nahm ich massgeblich folgende Rollen ein:

Landingpage der neuen Website auf verschiedenen Endgeräten.
Landingpage der neuen Website auf verschiedenen Endgeräten.
  • Kundenbetreuung und Beratung
  • Konzeption und Contentstrategie
  • Wireframing und Design
  • Template Prototyping
  • Unterstützung bei Integration ins Neos CMS
  • Projektleitung und Controlling