Webdesign Trends 2014 Beispiele und Analyse – One Page Design

Im zweiten Artikel unserer Artikelserie „Webdesign Trends 2014 Beispiele und Analyse“ dreht sich alles um das sogenannte One-Page-Design. Viele haben davon sicherlich schon unter Namen wie Single Page oder Pageless Webdesign gehört. Der Trend besteht im Grunde darin, den gesamten Inhalt einer Webseite kompakt und gut verdaulich auf einer Seite unter zu bringen. In diesem Artikel werde ich mir ansehen, wie man eine One-Page Webseite am besten gestaltet und dazu einige wirklich gelungenen Themes für WordPress und Beispiele von anderen Webseiten zeigen.

Unter einer Webseite verstehen viele eine Startseite mit verschiedenen Unterseiten und Kategorien. Doch was jeder von uns als klassische Webseite kennt, stammt ursprünglich aus dem Printdesign. Ein aktuell sehr beliebter Webdesign Trend namens One-Page-Design sprengt diese Struktur. Häufig in Kombination mit minimalistischen Stilmitteln (wenige Elemente mit großen Abständen zueinander) werden Produkte oder Dienstleistungen auf nur einer Seite vorgestellt.

5 Regeln für eine erfolgreiche One-Page-Design Webseite

  • Übersichtlichkeit: Definieren Sie klar die Bereiche 

Die klare Struktur, die eine Webseite dem Besucher durch seine Unterseiten und Kategorien gibt, fehlt beim One-Page-Design. Deshalb ist es umso wichtiger Bereiche auf der Seite klar von einender zu trennen. Dazu kann man entweder mehr Abstand zwischen den einzelnen Sektionen lassen, große Überschriften nutzen oder breite Bilder zwischen den verschiedenen Bereichen einbauen.  Viele WordPress Templates verwenden auch verschiedene Hintergrundbilder und Farben zur Trennung.

  • Reihenfolge der Elemente

Ein weiterer wichtiger Punkt, den man bei One-Page Webseiten unbedingt beachten sollte, ist die Reihenfolge der Inhalte. Der Besucher der Website möchte meistens über etwas informiert werden. Sortieren Sie die Informationen , die Sie Ihren Besuchern bieten wollen also in einer sinnvollen Reihenfolge. Die Platzierung der Inhalte beim One-Page-Design ähnelt der Anordnung der Kategorie-Unterpunkte von normalen Webseiten, sodass man diese auch gut als Vorlage nutzen kann. Mit der Struktur von One-Page Webseiten lässt sich auch gut Storytelling betreiben. Einige tolle Beispiele finden sich weiter unten. Hier erst einmal drei Beispiele aus der Praxis:

LockitronLockitron-one-page-design-beispiel

Dropbox

Dropbox-one-page-design

Fling

Fling-one-page-design

  • Große Bilder und wenig Text

Ein Bild sagt mehr als tausend Worte, genau deshalb lautet auch beim One-Page-Design die Devise: Mehr große Bilder und weniger langweiliger Text. Ziel einer Single-Page Webseite ist es nicht den gesamten Inhalt, der normalerweise auf Zehn Unterseiten verteilt war auf eine Seite zu quetschen, sondern den Content reduziert und kompakt zu präsentieren. Das menschliche Gehirn verarbeitet Informationen indem es nach verwandten Daten sucht und diese damit in Verbindung bringt. Deshalb kann ein Bild von Besuchern und potentiellen Kunden viel Besser verarbeitet werden, als reiner Text. Bilder können auch mit Emotionen assoziiert werden und so den Besucher gezielt in eine Stimmungslage versetzen. Eine Webseite, die nur aus einer Seite besteht lebt von genau diesen Mitteln.

  • Responsive Webdesign

Responsive Webdesign war Anfang diesen Jahres noch ein Trend und hat sich mittlerweile zum Standard im Web entwickelt. Gerade One-Page-Design lebt davon, dass es auch auf mobilen Endgeräten ohne lästiges zoomen und hin-und-her scrollen auskommt.

  • Call-to-Action

Die klar strukturierte und durchdachte Platzierung der Inhalte sollte den Besucher zu einem Ziel führen – dem sogenannten Call-to-Action. Bei Dienstleistungen kann es das Kontaktformular, die Rufnummer oder die Anfahrtsskizze sein. Bei anderen Inhalten vielleicht ein Newsletter-Abo, ein Link zum Onlineshop oder ein Download. Wichtig ist es bei One-Page-Seiten eine klare Linie vorzugeben und am Ende einen Abschluss zu haben.

Vor und Nachteile von One-Page-Design

Wie jeder Webdesign Trend hat auch diese seine Vor und Nachteile und eignet sich auch nicht für Jedermann. Die Vorteile liegen klar auf der Hand. Mit der Reduktion seiner Inhalte auf eine Seite hält man sein Angebot maximal übersichtlich und kann so den Weg des Besuchers genau planen (es geht schließlich nur nach Unten :)). Weiterhin lässt sich eine Single-Page Webseite ideal auf eine bestimmte Keyword-Kombination optimieren und hat auch ziemlich übersichtliche OnPage-Maßnahmen. Zudem sind diese Seiten ideal für mobile Endgeräte geeignet, mobile Nutzer mit erhalten sofort alle notwendigen Informationen auf einer Seite und müssen sich nicht durch die Navigation klicken und auch keine langen Ladezeiten in Kauf nehmen.

Jedoch sind die Vorteile für die einen auch gleich die Nachteile für die anderen. Für Unternehmen mit viel Content ist eine One-Page-Design schlichtweg ungeeignet. Möchte man seine Webseite für mehrere Keywords optimieren, was bei mehreren Produkten durchaus sinnvoll ist, so reicht eine Seite ebenfalls nicht aus. Auch die Ladezeiten können darunter leiden, wenn Bilder und Texte alle auf einmal geladen werden müssen. Dafür gibt es mittlerweile jedoch Webdesign-Techniken, die die Inhalte erst dann einblenden, wenn der Nutzer bis zu der jeweiligen Stelle scrollt.

Für wen sich eine One-Page-Webseite besonders gut eignet

Der hier vorgestellte Webdesign Trend ist wie jeder Trend für bestimmte Zwecke entstanden und sollte daher nicht zum Selbstzweck eingesetzt werden. Hier sind einige Fragen, die man sich stellen sollte, bevor man sich für ein One-Page-Webdesign entscheidet:

  • Wie viele Inhalte habe ich?
  • Passen meine Inhalte zueinander?
  • Habe ich ein oder mehrere Produkte?
  • Auf welche Keywords optimiere ich jetzt oder in Zukunft?
  • Kann ich eine Geschichte zu meinem Produkt erzählen?

Diese und weitere Fragen sollten einem helfen sich für oder gegen den Webdesign Trend zu entscheiden. Nun noch einige schöne WordPress Themes, die auf OnePage-Design basieren:

Visia*

Visia-wordpress-theme-one-page-beispiel

 

Ronika*

Ronika-one-page-multi-site-wordpress-theme-beispiel

 

Renova*

Renova-wordpress-one-page-theme-beispiel

 

Profession*

profession-one-page-wordpress-theme-beispiel

 

Newave*

Newave-one-page-paralax-theme-beispiel

 

Floyd*

floyd-one-page-theme-beispiel

 

Booster

booster-one-page-wordpress-theme-beispiel


 

 

 

1 Antwort

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.