Der Auftrag

Ein Relaunch der Website der Landeshauptstadt Kiel war überfällig. Da das bestehende CMS weiter genutzt werden sollte, sollten vorgeschriebene Elemente in HTML und CSS angeliefert werden, mit denen die Stadt dann selbst die Seite aufbauen würde. Besondere Herausforderung war dabei die große Menge an Content.

Die Tat-Sachen

  • Zielgruppen- und Konzeptions-Workshops
  • Wireframes
  • Prototyping
  • Atomic Design
  • Barrierefreies Layout
  • HTML und CSS
  • Patternlab

Der Lösungsweg

Wir entschieden uns dafür, nicht nur die geforderten Elemente anzuliefern, sondern auch konzeptionelle Vorschläge für den Aufbau von Schlüsselseiten zu erarbeiten. Damit sich der User tortz der inhaltlichen Fülle eines Stadtportals trotzdem noch gut orientieren kann.

Um dies zu erreichen, und der Stadt für die weitere Konzeption eine gute Basis zu liefern, erarbeiteten wir in Workshops gemeinsam mit der Stadt die Ziele der Seite und die Zielgruppen.

Die Seite entsteht

In weiteren Workshops sammelten wir weitere Wünsche, das Design der Seite betreffend. Außerdem gelang es uns, mit einfachen Karten einen Aufriss der Startseite festzulegen. Auf dieser Basis leiteten sich die Wireframes der späteren Seite ab.

Atome und Moleküle

Basierend auf den konzeptionellen Vorüberlegungen, entschieden wir uns, die Bausteine der Website mit der Herangehensweise des „Atomic Design“ zu entwickeln. Wir skizzierten und wireframten alle benötigten Elemente, und bauten daraus nach und nach die definierten Seiten auf.

Patternlab

Alle Elemente flossen mit dem Styling im Patternlab zusammen. Dort kann der Code der Elemente eingesehen werden und Komponenten und Templates zusammen gebaut werden. Lego lässt grüßen.

Barrierefreiheit

Da es sich um eine Seite der Öffentlichkeit handelt, achteten wir penibel darauf, dass die Farben in allen Themes genügende Kontrastwerte aufwiesen.

Navigationsmechanik

Um die umfangreiche Navigation abbilden zu können, haben wir uns mit der Stadt für eine „Offcanvas-Navigation“ entschieden, die der User jederzeit über einen floatenden Menü-Button aufrufen und expandieren kann.

Dynamik und Bewegung

Kiel ist dynamisch wie das Wasser. Dies spiegelt sich auch in vielen kleinen Animationen wider, die sich auf der Seite finden.

Die Seite ist fertig

Die Mitarbeiter der Stadt integrierten die Elemente des Patternlab problemlos in ihr Content Management System integrieren.

Adaption für die Kieler Woche

Um einerseits das Layout für die Kieler Woche zu adaptieren, aber andererseits auch Eigenständigkeit für diese Seite zu gewährleisten, waren Modifikationen im Patternlab notwendig.

Grundlegende Herausforderung war, die Farbstimmung der jährlich wechselnden Kieler-Woche-Plakate auf die Website zu übertragen. Dazu analysierten wir vergangene Plakate und leiteten eine Farbsystematik für die Website ab.

Layoutanpassung

Auch im Layout gab es kleine Anpassungen, so musste das jährliche Plakatmotiv integriert werden, da die Kieler Woche kein separates Logo hat.

Der Effekt

Die Stadt ist glücklich, sie kommt sehr gut mit den Elementen zurecht. Das Grundgerüst wurde bereits für die Seite der Kieler Woche adaptiert. Für die digitale Ausrichtung der Stadt, zu der ausdrücklich die neue Website dazu gehört, wurde ein Preis verliehen (Anja weiß mehr).