Ein Schaufenster von Single-Page-Websites
Bei der Gestaltung einer Website mit einer minimalen Anzahl von Seiten und nicht einer Tonne Inhalt kann ein einseitiges Design eine innovative Möglichkeit sein, die Website zu unterscheiden.
Einzelseiten-Websites verwenden häufig JavaScript und Flash sowie HTML und CSS, um mehr Inhalt auf einer Seite bereitzustellen, ohne die Ladezeiten wesentlich zu erhöhen.
Die Navigation muss bei einseitigen Seiten besonders berücksichtigt werden, um sicherzustellen, dass die Besucher ohne Probleme zum Home-Bereich der Seite zurückkehren und von einem Bereich zu einem anderen Bereich navigieren können. Dies wird oft durch "sticky header" oder wiederholte Navigation in jedem Abschnitt erreicht.
Die folgenden Seiten sind hervorragende Beispiele für einzelne Seiten. Sie sind sowohl brauchbar als auch ästhetisch ansprechend und nutzen alle Vorteile des Single-Page-Formats.
Roaaar
Die Roaaar-Website enthält einen Link "Zurück zum Anfang" am Ende jedes Abschnitts, der es den Besuchern erleichtert, zur Navigation in der Kopfzeile zurückzukehren.
Duplos von Ricardo Mestre
Die Website von Duplos verfolgt einen anderen Ansatz und stellt den Hauptinhalt unten auf der Seite ein. Die Navigation führt Sie weiter nach oben als nach unten.
Grzegorz Kozak
Das Leuchtturmmotiv verläuft hier über die gesamte Länge der Seite, vom Weltraum bis zum Boden. Banner, die aus Fenstern am Leuchtturm hängen, bringen Sie zurück zum Anfang der Seite, auf der sich die Navigation befindet.
Kaleidoskop
Die Kaleidoscope-Website verwendet hinter jedem Abschnitt der Website unterschiedliche Hintergrundbilder und Texturen. Dies unterscheidet jeden Inhaltsbereich von jedem anderen Inhaltsbereich.
Dan Scotton
Kurze Seiten wie diese mit minimalem Inhalt funktionieren besonders gut. Die Navigation bleibt in der Seitenleiste, wenn Sie die Seite nach unten scrollen.
Viktor Shvaiko
Diese Website verwendet einen horizontalen Schieberegler, um neue Inhalte zu laden und durch andere Inhalte zu gleiten, um die Seite zu erreichen, auf der Sie navigiert sind. Die Navigationsleiste bleibt unabhängig von der Seite, auf der Sie sich befinden, ganz oben.
Jon Rundle
Einfache, persönliche Profilseiten wie diese sind perfekt für ein einseitiges Design geeignet. Die Icons und Akzentfarben verleihen dem ansonsten sehr neutralen Design ein gewisses visuelles Interesse.
Jason Reed
Die Verwendung eines Akkordeon-Effekts zur Anzeige neuer Inhalte funktioniert gut, wenn der Inhalt nicht zu lang ist. Das illustrierte Header-Bild und das graue und orange Farbschema machen die Seite aus.
Tweet CC
Die Verwendung von Texturen und einfachen Illustrationen macht die Website von Tweet CC visuell ansprechend, während sie in einem einfarbigen Farbschema einfach gehalten ist.
PSD-Layout
Websites, die unkomplizierte Dienste anbieten, können besonders gut in einem Einzelseitenformat arbeiten. Es gibt nicht zu viele Informationen zu bieten und alles auf einer Seite zu halten macht es für potenzielle Kunden einfach, schnell zu finden, was sie brauchen.
Feelwire
Die Feelwire-Website hält die Dinge einfach und bietet zusätzliche Informationen mit Tooltips. Der weiße Hintergrund hält ihn minimalistisch und die kühnen Icons fügen visuelles Interesse hinzu.
Heißer Meteor
Die Hot Meteor-Site verwendet ein typografisches, graues und rotes Design. Die Kopfzeile ist sticky und behält die Navigation oben auf der Seite bei.
Mia Makila
Der Standort von Mia Makila unterscheidet sich ein wenig von den anderen hier aufgeführten Websites und verwendet ein traditionelleres 3-Säulen-Design. JavaScript wird verwendet, um Grafiken in jeder Kategorie anzuzeigen.
Costas Theoharis
Diese Website verwendet einen interessanten Slider-Effekt, bei dem jeder Abschnitt (Kopfzeile, Hauptinhalt und Fußzeile) getrennt voneinander verschoben wird.
Javan Machmali
Das hier verwendete Rasterdesign wird in einseitigen Designs nicht oft gesehen. Aber mit viel Leerraum funktioniert es gut, viele verschiedene Inhalte in einem sehr stromlinienförmigen Design zu integrieren.
Team Nomade
Das Design hier ist einfach und unkompliziert, und das 2-Spalten-Design funktioniert gut, um mehr Inhalt auf die Seite zu bringen, ohne dass es schwer aussieht.
Jorge Fino
Jorge Finos Website legt den Schwerpunkt auf die Designs. Navigation ist nicht vorhanden (außer Scrollen) und die Kontaktinformationen sind sowohl in der Kopfzeile als auch in der Fußzeile enthalten.
Moly Yim
Hier ist eine andere Seite ohne Navigation. Es ist jedoch zu einer vernünftigen Länge gehalten, also ist es kein Problem.
Justin Tsang
Die Navigation hier ist ein bisschen anders. Statt Schaltflächen, die Sie zurück zum Anfang führen, oder Navigation auf jedem Bildschirm, sind Schaltflächen neben jedem Projekt- und Inhaltsbereich enthalten, um auf einem Bildschirm nach oben oder unten zu gehen. Es gibt auch eine Navigationsleiste oben, um zu jedem Hauptbereich zu springen.
Mogulista
Temporäre Websites sind eine großartige Zeit, um eine einzelne Seite zu verwenden. Diese Website verwendet JavaScript, um neue Inhalte für jede "Seite" auf der Website zu laden.
Chirag Solanki
Die Navigation auf dieser Website kombiniert die Hauptnavigation und Links am Ende jedes Abschnitts, um die Besucher an den Anfang der Seite zurückzubringen. Illustrierte Kritzeleien verbinden jeden Abschnitt miteinander und verleihen der gesamten Seite ein Gefühl der Kontinuität.
Deluge Studios
Das Layout der Deluge Studios Website ist eines der einzigartigsten hier. Zwei Spalten bieten fünf Inhaltsbereiche, die alle von der oberen Navigation aus verlinkt sind. Das Einfügen von Hauptinhaltsabschnitten in die kleinere Spalte "Seitenleiste" macht die Seite wesentlich kürzer.
Bühne 5 Studio
Die Stage 5 Studio-Site ist kurz, ohne Navigation. "Lesen Sie mehr" Links schieben mehr Informationen über jedes Projekt, während andere Inhalte in der "Sidebar" gehalten werden.
SmartCube
Die SmartCube-Site verwendet einen Sticky-Header, um die Navigation jederzeit auf dem Bildschirm zu halten. Je nach Inhalt wird auch eine Kombination aus 1- und 2-Spalten-Layouts verwendet.
Eklektische Designs
Die Inhaltsbereiche unterscheiden sich hier durch einzigartige Hintergrundtexturen. Die Typografie zieht alles auf einer Seite zusammen und JavaScript wird verwendet, um zusätzliche Produkte anzuzeigen, ohne mehr Platz zu beanspruchen.
Inside Secrets zu einer iPhone App
Dies ist eine der längeren einseitigen Websites, die hier vorgestellt werden. Es verwendet eine sticky header mit Navigation, um es einfach zu machen, von einem Bereich zu einem anderen zu gelangen.
Töte den Überlauf
Eine Charity-Site wie diese kurz und auf den Punkt zu bringen, wird fast sicher die Anzahl der eingehenden Spenden erhöhen. Die kühne Typografie, grafische Bilder und die Aufnahme eines Spendenformulars am Ende funktionieren perfekt zusammen.
Emily Whitesmith
Hier ist eine andere Seite, die Sie am Ende der Seite startet. Wenn Sie auf den Link "Weitere Informationen" klicken, wird die Seite in einen Portfoliobereich verschoben. Modale Fenster geben dort Nahaufnahmen von jedem Stoff.
Flyer
App-Websites eignen sich gut für Einzelseiten-Designs, da sie oft begrenzten Inhalt und nur ein oder zwei Screenshots für Bilder haben.
Hayley Smith
Hier ist eine weitere sehr lange Seite. Die Navigation wird oben in jedem Abschnitt wiederholt, und das Logo wird beim Scrollen nach unten verschoben.
Conway Anderson
Die Conway Anderson Website verwendet eine Mischung aus Slidern (für die Über und Kontaktinformationen) und modalen Fenstern (für die Arbeit), um Inhalte anzuzeigen. Das einfache, gitterbasierte Design und das monochrome Farbschema halten die Dinge einfach und modern aus.
Daniel Moir
Daniel Moirs Website ist einfach mit minimalem Inhalt und ohne Navigation. Das 2-Spalten-Design organisiert die verschiedenen Arten von Inhalten auf der Website und hält sie kürzer.
Latte pro Tag
Pre-Launch-Websites eignen sich sehr gut für Einzelseiten-Designs, wie hier gezeigt. Es gibt noch nicht genug Inhalte, um eine mehrseitige Website zu rechtfertigen.
Der Bienenstock-Markt
Hier ist eine weitere längere Seite mit nur einer Seite. Die leuchtend gelben Hintergrund- und Bienenillustrationen binden die gesamte Seite zusammen, und die Navigation wird oben in jedem Abschnitt wiederholt.
Rubidin
Die Rubidine-Site verwendet eine sticky-Kopfzeile mit einem transparenten Hintergrund, der sich in jeden einzelnen Inhaltsabschnitt einfügt.
Jakub Szymanski
Diese Website verwendet JavaScript, um neue Inhalte zu laden und die Seite nach unten zu verschieben. Eine klebrige Fußzeile erscheint nach der Startseite "Seite" mit einem "Zurück nach oben" -Link.
Tyler Termini
Tyler Termini's Website ist kurz, mit Navigation nur in der Kopfzeile. Da es sich nicht um eine sehr lange Seite handelt, ist es nicht wirklich ein Problem, nach oben zu scrollen (oder einfach durch jeden Abschnitt zu scrollen, ohne die Navigation überhaupt zu benutzen).
Josh Sender
Das Graustufen-Farbschema sieht hier gut aus. Die angezeigte Arbeit wird beim Überfahren in Vollfarbe angezeigt und beim Klicken auf ein modales Farbfenster öffnet sich eine größere Version.
Von WDD exklusiv für WDD geschrieben und zusammengestellt Cameron Chapman .
Was gefällt dir an einzelnen Seiten am besten? Haben Sie Favoriten, die hier nicht aufgeführt sind? Bitte teilen Sie die Kommentare unten ...