Vom Onepager zur umfangreichen Website

Die Ausgangssituation war ein Onepager, auf dem sämtliche Informationen innerhalb einer einzigen, längeren Seite untergebracht waren. Die Navigation führte direkt zu den jeweiligen Inhaltsabschnitten, ohne dass Besucher zwischen verschiedenen Unterseiten wechseln mussten.

Mit der Weiterentwicklung des Internetauftritts sollte sich das ändern. Die vorhandenen Inhalte benötigten mehr Raum und eine übersichtlichere Struktur. Gleichzeitig sollte das Erscheinungsbild modernisiert werden, ohne den bisherigen Charakter der Website vollständig aufzugeben.

Dabei kamen drei wesentliche Anforderungen zusammen:

• Eine neue Seitenstruktur: Die bisherigen Inhalte sollten sinnvoll auf eigenständige Unterseiten verteilt werden. Die Startseite sollte künftig einen übersichtlichen Einstieg bieten und zu den weiterführenden Themen führen.
• Eine angepasste Navigation: Aus dem bisherigen Abschnittsmenü sollte eine Navigation entstehen, die auch bei mehreren Unterseiten eine einfache Orientierung ermöglicht. Gleichzeitig sollten Header und Menü weniger Raum einnehmen.
• Individuelle Gestaltungselemente: Neben dem strukturellen Umbau sollte die Website auch visuell weiterentwickelt werden. Dazu gehörte eine animierte SVG-Karte, bei der sich einzelne grafische Elemente bewegen.

Für uns bestand die Aufgabe deshalb nicht einfach darin, aus einer Seite mehrere zu machen. Die unterschiedlichen Anforderungen mussten so miteinander verbunden werden, dass am Ende ein stimmiger Internetauftritt entsteht.

Die neue Seitenstruktur bildete dafür die Grundlage. Wir haben die Inhalte thematisch geordnet und überlegt, welche Informationen auf der Startseite bleiben und welche auf eigenen Unterseiten besser aufgehoben sind.

Damit war allerdings erst der erste Schritt geschafft. Denn mit dem neuen Aufbau musste sich auch die Navigation verändern. Und schließlich sollte die individuelle Animation als gestalterisches Element in das Gesamtkonzept eingebunden werden.

Mit der neuen Seitenstruktur mussten wir auch die Navigation überdenken.

Ein Menü, das ursprünglich nur zwischen einzelnen Abschnitten einer Seite wechselte, erfüllt bei einer mehrseitigen Website eine andere Aufgabe. Es soll nun eine klare Orientierung zwischen den verschiedenen Themenbereichen ermöglichen.

Dabei wollten wir verhindern, dass Header und Navigation zu viel Raum einnehmen oder die eigentlichen Inhalte optisch in den Hintergrund drängen.

Deshalb haben wir die Gestaltung bewusst reduziert und die Navigation auf ihre wesentliche Funktion konzentriert: Besucher sollen schnell erkennen, wo sie sich befinden und wie sie zum gewünschten Inhalt gelangen.

Gerade bei umfangreicheren Websites zeigt sich, dass eine zurückhaltende Navigation oft mehr bewirkt als zusätzliche gestalterische Effekte.

Neben der strukturellen Überarbeitung gab es auch eine besondere gestalterische Anforderung: Eine grafische Karte sollte nicht einfach nur als statisches Bild dargestellt werden.

Stattdessen sollten einzelne Elemente der Illustration in Bewegung geraten. Dazu gehörten unter anderem eine animierte Strecke, wechselnde Markierungen und ein kleines Fahrzeug, das sich entlang eines vorgegebenen Weges bewegt.

Für diese Aufgabe bot sich das SVG-Format an. Anders als bei einem gewöhnlichen Bild lassen sich einzelne Bestandteile einer SVG-Grafik unabhängig voneinander bearbeiten und animieren.

Wir haben die Grafik deshalb so aufgebaut, dass die verschiedenen Elemente gezielt angesprochen werden können. Das Fahrzeug bewegt sich entlang eines definierten Pfades, seine Räder drehen sich und weitere Details verändern sich während des Ablaufs.

Der Vorteil dieser Umsetzung liegt vor allem in ihrer Flexibilität. Die Grafik bleibt auch bei unterschiedlichen Darstellungsgrößen scharf und die Animation lässt sich direkt in die Website integrieren, ohne dafür ein Video oder eine umfangreiche Animationsbibliothek zu benötigen.

So wurde aus einer einfachen Illustration ein eigenständiges Gestaltungselement, das die Inhalte visuell ergänzt.

Vielleicht ist Deine Website ursprünglich als kleiner Internetauftritt gestartet und inzwischen kommen immer mehr Inhalte, Leistungen oder neue Ideen hinzu. Oder Du wünschst Dir besondere Funktionen und individuelle Gestaltungselemente, die mit einer Standardlösung nicht ohne Weiteres umsetzbar sind.

Wir unterstützen Dich dabei, bestehende Websites weiterzuentwickeln oder neue Internetauftritte von Anfang an so zu planen, dass sie zu Deinen Anforderungen passen. Von einer durchdachten Seitenstruktur bis zu individuellen technischen Lösungen.