One-Page-Design: Alles andere als einseitig

Design und Layout sind nach wie vor wichtige Erfolgsfaktoren im Onlinebusiness. Das Design bestimmt nicht nur maßgeblich die Corporate Identity, es sorgt außerdem für den zentralen Wiedererkennungswert. Der ist wiederum wichtiger Faktor in der Kundenkommunikation – egal ob im E-Commerce oder als Dienstleister.

Dafür muss zuallererst die Website professionell und attraktiv gestaltet sein. Als Online-Aushängeschild eines Unternehmens ist sie erste Anlaufstelle, wenn ein potenzieller Kunde nach Informationen und Angeboten sucht. Je nach Branche sind mehr oder weniger innovative Design-Lösungen angebracht. Wem die konventionelle Website-Gestaltung nicht genügt, könnte Gefallen am Single-Page-Design finden – als Alternative zu Standard-Website-Lösungen bietet sie viele Vorteile.

In der Regel sind Websites ähnlich wie ein klassisches Printmedium aufgebaut. Auf der Suche nach Informationen und Inhalten springt der Nutzer von Seite zu Seite – wie er im Print durch das Magazin blättert, klickt er sich online durch die Navigation.

Beim One-Page-Webdesign, auch Single-Page-Design oder Pageless-Design genannt, durchbricht man diesen Usus des „Von-Seite-zu-Seite-Springens“ und wählt eine andere Struktur: Der Website-Aufbau beschränkt sich auf eineeinzige Seite. Alle relevanten Informationen, die man normalerweise auf verschiedenen Unterseiten findet, sind auf einer einzigen untergebracht. Ohne weitere Klicks sehen Nutzer alle wichtigen Inhalte, eine einfache Navigation führt sie intuitiv durch das Ein-Seiten-Konzept.

Eine Website im One-Page-Design besteht aus einem einzigen HTML-Dokument. Die Inhalte werden dynamisch nachgeladen. Bei einer klassischen Website hat man in der Regel viele HTML-Dokumente, die untereinander verlinkt sind. Da die übliche Navigation über Unterseiten ausfällt, bedarf es bei One-Pagern spezieller Navigationskonzepte, die den Nutzer an die Hand nehmen und eine intuitive Bedienung ermöglichen.

• Eine fixierte Navigationsleiste gehört bei den meisten One-Pagern dazu. Dabei bleibt die Navigation immer im Bild fixiert, der Nutzer kann jederzeit zu einem anderen Element auf der Seite springen.

• Durch Sprungmarken oder andere Call-to-Actions springt der Nutzer außerdem innerhalb des HTML-Dokuments an verschiedene Stellen.

• Mithilfe eines sogenannten Scroll-Spy weiß der Nutzer zu jeder Zeit, an welchem Punkt der Website er sich befindet.

• Durch den sogenannten Smooth-Scroll-Effekt wirkt das Springen zwischen verschiedenen Elementen oder zurück zum Seitenanfang nicht abrupt. Eine Demo des Effekts sehen Sie hier.

• Oft stehen interaktive Infografiken und Animationen im Mittelpunkt eines One-Pagers. Gutes Beispiel für interaktive Grafiken ist diese Website zur Olympia-Geschichte.

• Häufig setzt man auch Parallax-Scrolling ein. Im Gegensatz zum herkömmlichen Scrolling bewegen sich einzelne Elemente und Ebenen der Website in unterschiedlichem Tempo. Webseiten sollen durch den Einsatz der Technik mehr Tiefe bekommen. Ein klassisches Beispiel für Parallax-Scrolling ist diese Themenseite der Aktion Mensch.

• Auch Flat-Design verwendet man oft in Kombination mit One-Page-Design.Hier verzichtet man als Webdesigner bewusst auf Schatten, Verläufe, dreidimensionale Elemente und realistisch wirkende Texturen im Allgemeinen. Das Flat-Design soll den reduzierten, minimalistischen Charakter des One-Page-Layouts verstärken, indem es die wenigen Inhalte in ihrer Einfachheit und Strukturiertheit in den Mittelpunkt rückt. Zudem bringt das reduzierte Design kürzere Ladezeiten und bessere Website-Performance mit sich. Einige Beispiele für gutes Flat-Design finden Sie unterhalb dieses Artikels von t3n.

Die simple, einseitige Struktur bringt viele Vorteile mit sich, ist aber nicht für jede Art von Website geeignet. Für wen kommt der aktuelle Webdesign-Trend in Frage?

Der erste Ausschlussfaktor ist der Inhalt. Möchte man viele Informationen, vielleicht sogar in unterschiedlichen Kategorien darstellen, ist ein One-Pager eher ungeeignet. Hier empfiehlt es sich, eine klare Struktur und Navigation mit Unterkategorien bzw. Unterseiten zu schaffen, um dem Nutzer die Informationen auch übersichtlich bereitzustellen. Ein Nachrichten-Portal wäre z. B. schwer umsetzbar mit dem One-Page-Webdesign, herkömmliche Multiseiten-Lösungen ergeben aufgrund der Fülle von Informationen und Kategorien mehr Sinn.

Abgesehen von der Menge der Information kommt es auf die Intention an, die dahinter steckt. One-Pager eignen sich gut, wenn man vor allem eines im Sinn hat: Verkaufen. Mit einer Unternehmens-Website im Single-Page-Design hat man die ideale Möglichkeit, den Besuchern die Kernaussagen und Kernkompetenzen klar und übersichtlich zu übermitteln. Sind die Informationen in sinnvoller Reihenfolge aufbereitet, muss sich der potenzielle Kunde die einzelnen Infos nicht aus verschiedenen Unterseiten zusammensuchen, sondern hat alles Relevante auf einen Blick.

Man führt den Besucher im Idealfall in eine Richtung – direkt hin zur Conversion. Am Seitenende befindet sich auf One-Pagern deshalb fast immer ein entsprechender CTA (Call-to-Action), der zu Kauf, Anmeldung, Bestellung, Teilnahme o. Ä. auffordert. Um den Nutzer in die gewollte Richtung zu führen, müssen die Inhalte auch passend aufbereitet sein und einen Bezug zueinander haben. Stichwort Storytelling: Wer den Nutzer überzeugen will, muss eine Geschichte erzählen. One-Page-Designs bieten eine hervorragende Möglichkeit, die Geschichte eines Produkts, einer Anwendung oder einer Kampagne zu erzählen. Das Zusammenspiel von Text und multimedialen Inhalten schafft eine besondere User-Experience, der Lesefluss wird nicht unterbrochen. Wie man Storytelling mit Interaktivität kombiniert, hat Mercedes mit der GLA-Kampagne gezeigt. Mit verschiedenen klickbaren, interaktiven Elemente und Video-Beiträgen schickt das Unternehmen Nutzer gemeinsam mit der Hauptperson auf eine Reise.