Eine einseitige Website bietet keine Auswege. Es gibt kein Menü, unter dem man einen schwachen Abschnitt verstecken könnte, und keine zweite Seite, um die Inhalte abzulegen, die nicht auf die Seite passten.
Alles, was der Besucher benötigt, befindet sich auf einer einzigen Schriftrolle, in einer festgelegten Reihenfolge. Diese Reihenfolge ist das gesamte Design.
Wenn es gelingt, liest sich die Website wie eine gute Präsentation. Wenn es schiefgeht, wirkt sie wie ein endloser Text.
Die acht unten aufgeführten Beispiele für einseitige Websites machen es alle auf unterschiedliche Weise richtig. Einige sind Seiten zur Selbstvermarktung, die darauf abzielen, einen Job zu finden. Eine andere präsentiert ein komplettes Innenarchitekturbüro auf einer einzigen Seite.
Gemeinsam ist ihnen, dass jedem Bildschirm eine klare Aufgabe zugewiesen wird. Übernehmen Sie die Teile, die zu Ihrer Arbeit passen.
Was ist eine einseitige Website?
Eine einseitige Website präsentiert ihren gesamten Inhalt auf einer einzigen, durchgehenden Seite. Anstatt zwischen Startseite, Über uns, Arbeit und Kontakt zu klicken, scrollt der Besucher nacheinander durch diese Abschnitte.
Eine feste Navigation führt üblicherweise zu jeder einzelnen Seite. Diese Art von Website, auch Single-Page- oder Single-Scroll-Website genannt, ist die einfachste Struktur im Web: eine URL, ein Ladevorgang, ein Pfad.
Einseitige Websites eignen sich für eine fokussierte Botschaft. Denken Sie an einen Freelancer, der eine Dienstleistung anbietet, einen Designer, der eine Auswahl seiner Arbeiten präsentiert, oder ein Studio, das die Bilder für sich sprechen lassen möchte.
Wenn Sie fünf verschiedene Dienstleistungen anbieten und einen Blog mit 40 Beiträgen führen, ist dieses Format nicht mehr zeitgemäß. Wenn Sie jedoch eine klare Botschaft haben und diese gut vermitteln wollen, ist es kaum zu übertreffen.
Die fokussierteste Version des Formats ist eine Zielseite, aufgebaut um eine einzelne Handlung und nicht um eine vollständige persönliche oder Studiogeschichte.
Was eine großartige einseitige Website ausmacht
In jedem überzeugenden Beispiel tauchen dieselben wenigen Entscheidungen auf:
- Eine Nachricht, die auf dem ersten Bildschirm angezeigt wird. Der Besucher sollte wissen, wer Sie sind und was Sie tun, bevor er weiterscrollt. Keine Aufwärmphase.
- Eine Scrollreihenfolge, die etwas bedeutet. Die besten Single-Page-Websites sind wie eine Argumentation aufgebaut: Aufhänger, Beweis, Persönlichkeit, Frage.
- Eine primäre Maßnahme. Engagieren Sie mich, sehen Sie sich meine Arbeit an und kontaktieren Sie mich. Ein wiederholter Call-to-Action ist wirkungsvoller als fünf konkurrierende.
- Visuelle Unterbrechungen, die den Scrollvorgang unterbrechen. Farbblöcke, randabfallende Bilder oder großzügige Abstände verhindern, dass eine lange Seite wie ein einziger grauer Streifen wirkt.
- Schnelles Laden. Eine Seite bedeutet nur eine Chance für den ersten Eindruck. Aufwändige Hero-Videos und unkomprimierte Bilder sind der Grund, warum einseitige Websites Besucher verlieren.
Halten Sie die Beispiele beim Lesen an die Liste.
Persönliche Marken-One-Pager, die mit Typografie überzeugen
Wenn es sich bei dem Produkt um eine Person handelt, spielt der Text eine entscheidende Rolle. Auf beiden Websites steht die Rolle, nicht der Name, im Vordergrund.
Jon Kirschner
Jon Kirschner ist Marken- und Wachstumsstratege, und seine Website verrät Ihnen das in Buchstaben, die viermal so groß sind wie sein eigener Name.
Der Name steht klein in einem pillenförmigen Navigationsfeld, und die Worte „Brand & Growth Strategist“ füllen den Bildschirm.
Unterhalb der Falz gibt eine Einleitung in einfacher Sprache („Ich baue Marken, die konvertieren“) den Ton an.
Abschnitte wie „Was ich wirklich gut kann“ und „Was ich gerade lese“ verleihen der Seite eine persönliche Note, die den meisten Strategie-Websites fehlt. Sie wirkt authentisch und nicht wie eine Vorlage.
Leihen Sie sich das aus: Sorgen Sie dafür, dass der Besucher mehr mitnimmt als nur Ihren Namen. Er ist gekommen, um herauszufinden, was Sie anbieten, also stellen Sie das in den Vordergrund – in einer unübersehbaren Schriftart.
Jordon Melo
Jordon MeloEin Media-Planungs- und Einkaufsstratege aus Toronto löst das klassische Problem einer einzelnen Seite: Wie navigiert man durch einen langen Scrollvorgang? Er nummeriert die Navigation.
Die Abschnitte „01. Über mich“, „02. Kurzer Lebenslauf“, „03. Arbeiten“, „04. Referenzen“, „05. Kontakt“ entsprechen exakt der Scrollreihenfolge, sodass das Menü gleichzeitig als Inhaltsverzeichnis dient.
Eine Serifenschrift für die Überschrift und ein geschwungenes Porträt verleihen einer professionellen Webseite eine gewisse Freundlichkeit. Es handelt sich um ein einseitiges Webdesign, das sich wie eine mehrseitige Webseite verhält, ohne dass die Seiten geladen werden müssen.
Leihen Sie sich das aus: Nummerieren Sie Ihre Navigationselemente entsprechend der Scrollreihenfolge. Eine lange Seite wirkt nicht mehr so lang, wenn der Besucher sofort erkennt, wo er sich auf der Seite befindet.
Split-Screen- und Portrait-First-One-Pager
Zwei Websites, eine Idee: Person und Handlung auf dem ersten Bildschirm platzieren, damit ein vielbeschäftigter Besucher nicht scrollen muss, um zu handeln.
Simrran Benvait
Simrran Benvait ist Marketingspezialistin in British Columbia, und ihr Held erledigt die gesamte Arbeit auf einem einzigen Bildschirm.
Ein Porträt füllt die linke Hälfte und geht mit einer sanften Welle in ein cremefarbenes Feld auf der rechten Seite über. Dieses Feld enthält die Begrüßung, die Berufsbezeichnung und drei Kontaktmöglichkeiten: E-Mail, LinkedIn und Telefonnummer.
Ein Personalvermittler kann ihre Identität erkennen und sie kontaktieren, ohne einmal scrollen zu müssen. Die Wellenform sorgt dafür, dass die Aufteilung nicht wie zwei zusammengeklebte Kisten wirkt.
Leihen Sie sich das aus: Platzieren Sie Ihre Funktion, Ihren Standort und Ihre Kontaktdaten auf der ersten Seite. Bei einem One-Pager ist Ihre Visitenkarte das Herzstück – behandeln Sie sie also auch so.
Noor Harajli
Noor Harajli, eine Social-Media- und Marketingkoordinatorin aus London, gestaltet ihre einzelne Bildlaufleiste aus übergroßen roten Karten auf schwarzem Hintergrund.
Jeder Abschnitt – Profil, Fähigkeiten, Arbeit – befindet sich in einem eigenen abgerundeten Block, sodass die Seite eher wie eine Reihe von Räumen als wie ein langer Streifen wirkt.
Die Monospace-Schriftart signalisiert eine kreativ-technische Identität, und die Kategorien „Content-Produktion“ und „Grafik & Design“ verlinken direkt zu realen Projekten. Dies beweist, dass eine Website mit nur einem Scrollen einen vollständigen Lebenslauf und ein Portfolio übersichtlich darstellen kann.
Leihen Sie sich das aus: Unterteilen Sie eine lange Schriftrolle in abgerundete Farbblöcke. Durch die klare visuelle Trennung kann eine Seite viele Informationen vermitteln, ohne dass der Leser die Orientierung verliert.
Bildorientierte Portfolio-Einseiten
Wenn die Arbeit selbst im Mittelpunkt steht, dominieren die Bilder die Seite, und der Text tritt in den Hintergrund. In beiden Fällen wird mit einem randabfallenden Bild begonnen.
Dillan Vanner
Dillan Vanner ist Fotografin, und die Website öffnet sich so, wie ein guter Druck: ein randloses Bild, von Kante zu Kante, bevor ein einziges Wort Text erscheint.
Ein dokumentarisches Bild füllt den ersten Bildschirm, das Logo ist zentriert und klein platziert, und der Slogan „Die Welt und alles, was darin ist, einfangen“ unterstreicht die Aussage.
Eine minimalistische Navigation (Startseite, Portfolio, Über uns) und eine Reihe von Kontaktsymbolen sind das einzige Designelement. Das Foto spricht für sich.
Leihen Sie sich das aus: Bei einer einseitigen Fotografie-Präsentation sollte ein aussagekräftiges Bild die erste Seite füllen. Das beste Bild ist ein besserer Aufhänger als jede Überschrift.
cmc designworks
cmc designworks, ein Architektur- und Innenarchitekturstudio, verzichtet auf den Text und lässt die Arbeit für sich sprechen.
Die Startseite öffnet sich mit einem randlosen, asymmetrischen Fotoraster: Gebäuderenderings, Innenaufnahmen, Beschilderungen, darüber schwebt eine nahezu unsichtbare Navigation.
Für eine visuelle Disziplin ist dies die richtige Entscheidung. Die Bilder verkaufen sich gut, daher gibt es keine Konkurrenz. Es ist eines der übersichtlichsten Beispiele für eine Website mit Scrollfunktion, die Sie finden werden, gerade weil sie auf die Fotografie vertraut.
Leihen Sie sich das aus: Wenn Ihre Arbeit visuell ist, verzichten Sie auf Worte. Ein randloses Bildraster als Hauptmotiv sagt mehr als ein ganzer Absatz.
Service- und Talent-Kurzprofile
Eine einseitige Website eignet sich nicht nur für Einzelpersonen, die ein Portfolio präsentieren. Diese beiden Elemente gestalten den Scrollvorgang wie eine Präsentation, sodass der gesamte Inhalt beim ersten Lesen vermittelt wird.
Arrowood Design
Arrowood DesignEin Inneneinrichtungsunternehmen aus der Bay Area präsentiert sein gesamtes Dienstleistungsangebot auf einer einzigen Seite. Der Scrollvorgang ist wie eine Verkaufspräsentation aufgebaut.
Über einem gemalten Schleiereulen-Wandbild prangt das Versprechen „Zeitloser Luxus“, gefolgt von den Dienstleistungen, der Positionierung „Nicht nur Dekoration“, der Gründergeschichte („Wer ist Lisa?“), Projekten und Kontaktmöglichkeiten.
Die redaktionellen Überschriften in Großbuchstaben halten den Text zusammen. Am Ende haben Sie ein vollständiges Verkaufsgespräch in der richtigen Reihenfolge gelesen, ohne auch nur einmal klicken zu müssen.
Leihen Sie sich das aus: Ein einseitiges Dokument kann ein ganzes Dienstleistungsunternehmen repräsentieren. Strukturieren Sie den Inhalt wie eine Verkaufspräsentation: Versprechen, Leistungen, Nachweise, Ansprechpartner, dann die Preisforderung.
Kaitlyn Barry
Kaitlyn Barry ist Schauspieler, Regisseur und Darsteller in Perth. Die Website beginnt mit dem Namen in voller Breite über einem einzelnen Porträt im goldenen Licht der Abenddämmerung, ähnlich wie ein Headshot ein Castingprofil einleitet.
Von dort geht es direkt zur Sache: ein kurzes Profil, dann eine Liste der jüngsten Film- und Fernsehrollen wie zum Beispiel The Twelve und CephalopodDann kontaktieren Sie uns.
Die Schriftrolle ist so aufgebaut, wie ein Castingbrief gelesen wird: Wer die Person ist, was sie bisher gemacht hat, wie man sie erreichen kann. Nichts steht dem im Wege.
Leihen Sie sich das aus: Wenn Sie aufgrund eines Lebenslaufs eingestellt werden, fügen Sie diesen auf derselben Seite ein. Stellen Sie Ihre Position in den Vordergrund, listen Sie Ihre Referenzen auf und machen Sie den Hinweis „Ab sofort verfügbar“ unübersehbar.
Gemeinsamkeiten der besten One-Page-Websites
Betrachtet man alle acht Seiten zusammen, so ist das Muster eindeutig. Die besten One-Page-Websites sind nicht die schönsten. Sie zeichnen sich dadurch aus, dass jede Seite eine Aufgabe erfüllt und diese Aufgaben in der richtigen Reihenfolge ablaufen.
Sie konzentrieren sich auf eine einzige Botschaft und wiederholen eine einzige Aktion. Sie verwenden ein klares visuelles System, um dem Scrollen Struktur zu verleihen: nummerierte Navigation, farblich abgesetzte Karten, ein Bildraster, ein geteilter Hero-Bereich.
Sie stellen das Wichtigste in den Vordergrund: Rolle und Ansprechpartner für die Jobsuchenden, Arbeit für die Studios.
Und sie halten es schlicht, denn eine einseitige Website bedeutet nur einen Download und einen ersten Eindruck. Einfache Webseiten sind hier oft erfolgreicher als aufwendige. Zurückhaltung ist die Kunst.
Wann eine einseitige Website funktioniert (und wann Sie mehr als eine Seite benötigen)
Das Format hat seine Grenzen. Eine einseitige Website ist dann richtig, wenn Ihre Botschaft fokussiert und Ihr Inhalt begrenzt ist.
Sobald Sie mehrere unterschiedliche Zielgruppen, einen wachsenden Blog oder einen Katalog von Dienstleistungen haben, die jeweils eine eigene Präsentation verdienen, wird das einfache Scrollen kontraproduktiv.
Wenn Sie eher ein traditioneller Künstler als ein Designer sind, ist ein mehrseitiges Layout in der Regel besser geeignet. Websites für Künstlerportfolios Roundup deckt diese Route ab. Hier die ehrliche Antwort:
Wenn Sie in der rechten Spalte sitzen, erstellen Sie die zusätzlichen Seiten. Alles auf einen einzigen Scrollvorgang zu zwingen, um minimalistisch zu wirken, ist eine Entscheidung, die Ihre Besucher letztendlich bereuen werden.
So erstellen Sie Ihre eigene einseitige Website
Sie müssen keinen dieser Codes erstellen. Beginnen Sie damit, den Scroll-Code zu schreiben, bevor Sie eine Vorlage bearbeiten.
Ordnen Sie Ihre Abschnitte in der Reihenfolge an, in der ein Fremder sie finden sollte, und streichen Sie dann einen. Die meisten einseitigen Websites sind einen Abschnitt zu lang.
Beim Website-Aufbau kommt man mit einem Portfolio-First-Website-Builder weiter als mit einem allgemeinen, da die Layouts bereits für ein einzelnes, sorgfältiges Scrollen ausgelegt sind.
Pixpa's einseitige Website-Vorlagen Sie erhalten standardmäßig eine feste, verankerte Navigation, randlose Bildbereiche und einen integrierten Kontaktblock. Sie können sie in der Anwendung sehen in der einseitige Portfolios Galerie.
Benutzerdefiniertes CSS steht Ihnen zur Verfügung, wenn Sie die Typografie oder die Abstände nach Ihren Wünschen anpassen möchten. Jon Kirschner und Noor Harajli tat.
Falls Sie zunächst spezialisierte Single-Page-Tools vergleichen möchten, finden Sie hier unsere Übersicht. Einseitige Website-Baukästen ist ein nützlicher Ausgangspunkt.
Alle oben genannten Standorte wurden auf PixpaDas ist ein guter Hinweis darauf, wie das Format ohne Entwickler aussehen kann.
Worauf auch immer Sie aufbauen, halten Sie die Bilder komprimiert und die Abschnitte kurz. Die Beschränkung ist das Gestaltungsmerkmal.
Fazit
Eine einseitige Website ist eine Art Zwang. Sie zwingt einen dazu, zu entscheiden, was wirklich wichtig ist und es zu ordnen, da es keine zweite Seite gibt, die den Rest ausblendet.
Die Beispiele hier umfassen einen Jobsuche-Strategen, einen Kreativen aus London, einen Dokumentarfotografen, ein Architekturbüro, ein Luxus-Inneneinrichtungsunternehmen und einen arbeitenden Schauspieler.
Sie alle funktionieren aus demselben Grund: eine klare Botschaft, ein bewusstes Scrollen, eine klare Aufgabe als Nächstes.
Verfassen Sie Ihren Text wie eine Argumentation, beginnen Sie mit der Kernaussage und kürzen Sie ihn so lange, bis nur noch das Wesentliche übrig bleibt.
Häufig gestellte Fragen zur einseitigen Website
Was ist eine One-Page-Website?
Eine einseitige Website präsentiert alle Inhalte – Über uns, Arbeit, Leistungen, Kontakt – auf einer einzigen scrollbaren Seite, anstatt sie auf separate Seiten aufzuteilen.
Diese Art von Website, auch Single-Page- oder Single-Scroll-Website genannt, eignet sich für eine fokussierte Botschaft: eine Dienstleistung, ein Portfolio oder eine persönliche Präsentation. Eine feste Navigation führt den Besucher in der Regel direkt zu den einzelnen Abschnitten.
Sind einseitige Websites gut für die Suchmaschinenoptimierung?
Sie können für Ihren Namen und ein oder zwei gezielte Phrasen gute Platzierungen erzielen, was oft alles ist, was eine persönliche Marke oder ein Unternehmen mit einer einzigen Dienstleistung benötigt.
Ihre Schwierigkeit liegt in der Themenbreite. Da Google hauptsächlich Seiten und nicht Websites bewertet, kann eine Seite nur eine begrenzte Anzahl von Keywords abdecken, bevor der Inhalt mit sich selbst konkurriert. Um in vielen Themenbereichen gut platziert zu werden, benötigen Sie mehr Seiten.
Wie viele Abschnitte sollte eine einseitige Website haben?
Genug, um den Standpunkt zu verdeutlichen, nicht mehr und nicht weniger. Die meisten der erfolgreichsten Single-Page-Websites bestehen aus fünf bis sieben Abschnitten: einem Hero-Bereich, einer kurzen Über-uns-Beschreibung, den angebotenen Leistungen, einigen Referenzen und einer Kontaktmöglichkeit.
Sollten Sie feststellen, dass Sie eine achte Seite hinzufügen müssen, prüfen Sie, ob die Website tatsächlich mehrseitig sein soll.
Einseitig vs. mehrseitig: Was ist besser?
Keine der beiden ist theoretisch besser. Sie lösen unterschiedliche Probleme.
Ein einseitiges Webseitendesign punktet bei fokussierten Botschaften, schnellen Entscheidungen und visuellen Portfolios.
Mehrseitige Websites sind dann sinnvoll, wenn Sie unterschiedliche Zielgruppen haben, einen wachsenden Blog betreiben oder viele Dienstleistungen anbieten, die jeweils eine eigene Seite verdienen. Wählen Sie die Website nach inhaltlicher Tiefe, nicht nach einem moderneren Design.
Wo finde ich weitere Beispiele für einseitige Websites?
Neben den acht hier genannten Galerien gibt es noch weitere wie diese: One Page Love und AwwwardsDie einseitigen Sammlungen sind einen Blick wert, um sich Designinspirationen zu holen.
Beim Stöbern sollten Sie nicht nur auf die Optik achten, sondern auch auf die Scrollreihenfolge und den Handlungsaufruf, denn genau diesen Teil müssen Sie kopieren.
Wie viel kostet eine einseitige Website?
Wenn Sie Ihre Website selbst mit einem Website-Baukasten erstellen, kostet eine einseitige Website genauso viel wie jede andere kleine Website: ungefähr den Preis eines Tarifs plus einer Domain. Überprüfen Sie die Preise für den aktuellen Tarif für aktuelle Zahlen.
Die Beauftragung eines Designers für die Erstellung einer individuellen One-Pager-Website kostet je nach Aufwand einige Hundert bis einige Tausend Euro. Für die meisten Personen auf dieser Liste reichte eine Vorlage aus.