Een showcase van websites met één pagina
Bij het ontwerpen van een website met een minimaal aantal pagina's en niet heel veel inhoud, kan een ontwerp met één pagina een innovatieve manier zijn om de site te onderscheiden.
Webpagina's met één pagina maken vaak gebruik van JavaScript en Flash, samen met HTML en CSS om meer inhoud op een pagina te passen zonder de laadtijden aanzienlijk te verhogen.
Navigatie moet speciale aandacht krijgen als het gaat om sites met één pagina, om ervoor te zorgen dat bezoekers zonder problemen naar de homepagina op de pagina kunnen gaan en van een sectie naar een andere sectie kunnen navigeren. Dit wordt vaak bereikt via plakkerige koppen of herhaalde navigatie in elke sectie.
De onderstaande sites zijn allemaal uitstekende voorbeelden van websites met één pagina. Ze zijn zowel bruikbaar als esthetisch aantrekkelijk en profiteren ten volle van het formaat van één pagina.
Roaaar
De Roaaar-website bevat een "return to top" -link onderaan elke sectie, zodat bezoekers gemakkelijk terug kunnen naar de navigatie in de header.
Duplos van Ricardo Mestre
De Duplos-site heeft een andere aanpak, waarbij de hoofdinhoud onderaan de pagina wordt weergegeven. Navigatie brengt u verder op de pagina dan naar beneden.
Grzegorz Kozak
Het vuurtorenmotief loopt hier over de gehele lengte van de pagina, van de ruimte naar de grond. Banners die uit vensters op de vuurtoren hangen, keren terug naar de bovenkant van de pagina waar de navigatie is.
Caleidoscoop
De Kaleidoscope-website maakt gebruik van verschillende achtergrondafbeeldingen en -texturen achter elk gedeelte van de site. Dit onderscheidt elk inhoudsgebied van elkaars inhoudsgebied.
Dan Scotton
Korte pagina's zoals deze met minimale inhoud werken bijzonder goed. De navigatie blijft in de zijbalk wanneer u de pagina afrolt.
Viktor Shvaiko
Deze site gebruikt een horizontale schuifregelaar om nieuwe inhoud te laden en door andere inhoud te bladeren om de pagina te bereiken waar je naartoe hebt genavigeerd. De navigatiebalk blijft bovenaan, ongeacht op welke pagina u zich bevindt.
Jon Rundle
Eenvoudige, persoonlijke profielsites zoals deze zijn perfect geschikt voor een ontwerp met één pagina. De pictogrammen en accentkleuren voegen iets meer visuele interesse toe aan het ontwerp, dat overigens zeer neutraal is.
Jason Reed
Het gebruik van een accordeoneffect om nieuwe inhoud weer te geven, werkt goed wanneer de inhoud niet te lang is. Het geïllustreerde afbeelding van de header en het grijze en oranje kleurenschema maken beide de site opvallen.
Tweet CC
Het gebruik van texturen en eenvoudige illustraties maakt de site Tweet CC visueel aantrekkelijk, terwijl hij ook eenvoudig gehouden wordt met een monochroom kleurenschema.
PSD-indeling
Sites met eenvoudige services kunnen bijzonder goed werken in een indeling van één pagina. Er is niet veel informatie te bieden en alles op één pagina bewaren maakt het voor potentiële klanten gemakkelijk om snel te vinden wat ze nodig hebben.
Feelwire
De Feelwire-site houdt de zaken eenvoudig en biedt extra informatie met tooltips. De witte achtergrond houdt het minimalistisch en de opvallende pictogrammen voegen visuele belangstelling toe.
Hot Meteor
De Hot Meteor-site maakt gebruik van een op typografie gericht, grijs en rood ontwerp. De kop is plakkerig, waardoor de navigatie boven aan de pagina blijft.
Mia Makila
De Mia Makila-site is iets anders dan de meeste andere sites die hier zijn opgenomen, met behulp van een meer traditioneel 3-koloms ontwerp. JavaScript wordt gebruikt om illustraties in elke categorie weer te geven.
Costas Theoharis
Deze site gebruikt een interessant schuifregelaareffect, waarbij elke sectie (de koptekst, hoofdinhoud en voettekst) afzonderlijk van elkaar verschuift.
Javan Makhmali
Het roosterontwerp dat hier wordt gebruikt, wordt niet vaak gezien in ontwerpen met één pagina. Maar met veel witte ruimte, het werkt goed om veel verschillende inhoud op te nemen in een zeer gestroomlijnd ontwerp.
Team Nomad
Het ontwerp is hier eenvoudig en duidelijk, en het ontwerp met twee kolommen werkt goed om meer inhoud op de pagina te passen zonder dat het er zwaar uitziet.
Jorge Fino
De site van Jorge Fino legt de nadruk volledig op de ontwerpen. Navigatie is niet aanwezig (behalve scrollen) en de contactgegevens zijn opgenomen in zowel de koptekst als de voettekst.
Moly Yim
Hier is nog een site zonder navigatie. Het is echter redelijk gehouden, dus het is geen probleem.
Justin Tsang
De navigatie hier is een beetje anders. In plaats van knoppen die u terug naar boven leiden of navigatie op elk scherm, zijn er naast elk project- en inhoudsgebied knoppen om één scherm omhoog of omlaag te gaan. Er is ook een navigatiebalk bovenaan om naar elke hoofdsectie te gaan.
Mogulista
Tijdelijke websites zijn een goed moment om een site met één pagina te gebruiken. Deze site gebruikt JavaScript om nieuwe inhoud te laden voor elke "pagina" op de site.
Chirag Solanki
Navigatie op deze site combineert zowel de hoofdnavigatie als links aan het einde van elke sectie om bezoekers terug te brengen naar de bovenkant van de pagina. Geïllustreerde doodles koppelen elke sectie aan elkaar en geven een gevoel van continuïteit voor de hele pagina.
Deluge Studios
De lay-out van de Deluge Studios-site is een van de meest unieke die hier te zien is. Twee kolommen bieden vijf inhoudsgebieden, allemaal verbonden vanuit de navigatie bovenaan. Door hoofdsecties van inhoud op te nemen in de kleinere kolom in de "zijbalk" -stijl, wordt de pagina aanzienlijk korter.
Stage 5 Studio
De Stage 5 Studio-site is kort, zonder navigatie. "Lees meer" -links schuiven meer informatie over elk project uit, terwijl andere inhoud in de "zijbalk" wordt bewaard.
Smartcube
De SmartCube-site gebruikt een plakkerige kop om de navigatie altijd op het scherm te houden. Het maakt ook gebruik van een combinatie van indelingen met 1 en 2 kolommen, afhankelijk van de inhoud.
Eclectique-ontwerpen
De inhoudsegmenten worden hier gedifferentieerd door unieke achtergrondstructuren. Typografie verzamelt alles op de hele pagina en JavaScript wordt gebruikt om extra producten weer te geven zonder meer ruimte in beslag te nemen.
Inside Secrets to a iPhone App
Dit is een van de langere websites met één pagina die hier wordt weergegeven. Het gebruikt een plakkerige kop met navigatie om het gemakkelijk te maken om van de ene sectie naar de andere te gaan.
Dood de lekkage
Het is bijna zeker dat een liefdadigheidssite zoals deze zo kort en to the point is, dat er meer donaties binnenkomen. De gedurfde typografie, grafische afbeeldingen en de opname van een donatieformulier onderaan werken perfect samen.
Emily Whitesmith
Hier is nog een site die je onderaan de pagina start. Als u op de link 'meer informatie' klikt, scrolt u de pagina naar een portfoliogedeelte. Modal windows daar geven close-ups van elke stof.
Folder
App-websites zijn zeer geschikt voor ontwerpen met één pagina, omdat ze vaak een beperkte inhoud hebben en slechts een screenshot of twee voor afbeeldingen.
Hayley Smith
Hier is nog een hele lange pagina. De navigatie wordt boven aan elke sectie herhaald en het logo schuift over de pagina terwijl het schuift.
Conway Anderson
De Conway Anderson-site gebruikt een combinatie van schuifregelaars (voor de Info About en contactgegevens) en modale vensters (voor het werk) om inhoud weer te geven. Het eenvoudige, op rasters gebaseerde ontwerp en monochroom kleurenschema houden de dingen eenvoudig en modern.
Daniel Moir
De site van Daniel Moir is eenvoudig met minimale inhoud en geen navigatie. Het tweekolomsontwerp organiseert de verschillende soorten inhoud op de site en houdt deze korter.
Latte per dag
Pre-lanceringswebsites zijn zeer geschikt voor ontwerpen met één pagina, zoals hier wordt getoond. Er is nog niet genoeg inhoud om een site met meerdere pagina's te rechtvaardigen.
De bijenkorfmarkt
Hier is nog een langere pagina met één pagina. De felgele achtergrond en bijenillustraties binden de hele site bij elkaar en de navigatie wordt bovenaan elke sectie herhaald.
Rubidine
De Rubidine-site gebruikt een kleverige kop met een transparante achtergrond die past bij elke afzonderlijke inhoudssectie.
Jakub Szymanski
Deze site gebruikt JavaScript om nieuwe inhoud te laden en naar beneden te schuiven. Een "sticky footer" verschijnt na de "startpagina" met een "terug naar boven" -link.
Tyler Termini
De website van Tyler Termini is kort, met alleen navigatie in de kop. Omdat het geen erg lange pagina is, is het niet echt een probleem om naar boven te moeten scrollen (of gewoon door elke sectie te bladeren zonder de navigatie te gebruiken).
Josh Sender
Het kleurenschema in grijstinten ziet er hier fantastisch uit. Het weergegeven werk wordt in kleur weergegeven wanneer eroverheen wordt bewogen, en wanneer erop wordt geklikt, wordt een modal-venster geopend met een grotere versie.
Geschreven en exclusief gecompileerd voor WDD door Cameron Chapman .
Wat vind je het leukst aan websites met één pagina? Heeft u favorieten die hier niet zijn vermeld? Deel deze alsjeblieft in de comments hieronder ...