Une vitrine de sites Web de pages uniques
Lors de la conception d'un site Web avec un nombre minimal de pages et non une tonne de contenu, une conception à une seule page peut constituer un moyen novateur de distinguer le site.
Les sites Web à page unique utilisent souvent JavaScript et Flash, ainsi que HTML et CSS pour adapter davantage de contenu sur une page sans augmenter considérablement les temps de chargement.
La navigation doit faire l’objet d’une attention particulière lorsqu’il s’agit de sites d’une seule page, pour s’assurer que les visiteurs peuvent revenir à la section d’accueil de la page sans problème et naviguer d’une section à une autre. Ceci est souvent réalisé grâce à des en-têtes adhésifs ou à une navigation répétée dans chaque section.
Les sites ci-dessous sont tous d’excellents exemples de sites Web à page unique. Ils sont à la fois utilisables et esthétiques, et tirent pleinement parti du format d'une seule page.
Roaaar
Le site Web Roaaar comprend un lien «Retour en haut» au bas de chaque section, ce qui permet aux visiteurs de revenir facilement à la navigation dans l’en-tête.
Duplos de Ricardo Mestre
Le site de Duplos adopte une approche différente, en mettant le contenu principal au bas de la page. La navigation vous emmène plus loin dans la page que vers le bas.
Grzegorz Kozak
Le motif du phare s'étend sur toute la longueur de la page, allant de l'espace au niveau du sol. Des bannières suspendues aux fenêtres du phare vous ramènent en haut de la page où se trouve la navigation.
Kaléidoscope
Le site Web Kaléidoscope utilise différentes images de fond et textures derrière chaque section du site. Cela différencie chaque zone de contenu de chaque autre zone de contenu.
Dan Scotton
Des pages courtes comme celle-ci avec un contenu minimal fonctionnent particulièrement bien. La navigation reste dans la barre latérale lorsque vous faites défiler la page.
Viktor Shvaiko
Ce site utilise un curseur horizontal pour charger un nouveau contenu, glissant sur d'autres contenus pour atteindre la page vers laquelle vous avez navigué. La barre de navigation reste en tête, quelle que soit la page sur laquelle vous vous trouvez.
Jon rundle
Des sites de profil simples et personnels comme celui-ci conviennent parfaitement à une conception à une seule page. Les icônes et les couleurs d’accent ajoutent un intérêt visuel au design, qui est par ailleurs très neutre.
Jason Reed
L'utilisation d'un effet d'accordéon pour afficher un nouveau contenu fonctionne bien lorsque le contenu n'est pas trop long. L’image d’en-tête illustrée et les couleurs grise et orange rendent le site remarquable.
Tweet CC
L'utilisation de textures et d'illustrations simples rend le site Tweet CC visuellement attrayant, tout en restant simple grâce à une palette de couleurs monochromes.
Disposition PSD
Les sites offrant des services simples peuvent particulièrement bien fonctionner dans un format de page unique. Il n’ya pas trop d’informations à offrir et tout garder sur une seule page permet aux clients potentiels de trouver rapidement ce dont ils ont besoin.
Feelwire
Le site Feelwire simplifie les choses et offre des informations supplémentaires avec des infobulles. Le fond blanc le garde minimaliste et les icônes en gras ajoutent un intérêt visuel.
Hot Meteor
Le site Hot Meteor utilise un design typé, gris et rouge. L'en-tête est collant, en gardant la navigation en haut de la page.
Mia Makila
Le site de Mia Makila est un peu différent de la plupart des autres sites inclus ici, utilisant un design à 3 colonnes plus traditionnel. JavaScript est utilisé pour afficher des illustrations dans chaque catégorie.
Costas Theoharis
Ce site utilise un effet de curseur intéressant, chaque section (l'en-tête, le contenu principal et le pied de page) glissant séparément.
Javan Makhmali
La conception de grille utilisée ici n’est pas très fréquente dans les conceptions à une seule page. Mais avec beaucoup d'espace blanc, cela fonctionne bien pour inclure beaucoup de contenu différent dans un design très rationalisé.
Team Nomad
La conception est simple et directe, et la conception à 2 colonnes permet de placer plus de contenu sur la page sans la rendre trop lourde.
Jorge Fino
Le site de Jorge Fino met clairement l'accent sur les designs. La navigation est inexistante (autre que le défilement) et les informations de contact sont incluses dans l'en-tête et le pied de page.
Moly Yim
Voici un autre site sans navigation. Il est maintenu à une longueur raisonnable, cependant, ce n'est pas un problème.
Justin Tsang
La navigation ici est un peu différente. Plutôt que d'inclure des boutons qui vous redirigent vers le haut ou une navigation sur chaque écran, des boutons sont inclus à côté de chaque projet et de chaque zone de contenu pour monter ou descendre d'un écran. Il y a aussi une barre de navigation en haut pour passer à chaque section principale.
Mogulista
Les sites Web temporaires sont un moment idéal pour utiliser un site d'une seule page. Ce site utilise JavaScript pour charger de nouveaux contenus pour chaque "page" du site.
Chirag Solanki
La navigation sur ce site combine la navigation principale et les liens à la fin de chaque section pour renvoyer les visiteurs en haut de la page. Des doodles illustrés relient chaque section, donnant une impression de continuité à la page entière.
Deluge Studios
La mise en page du site Deluge Studios est l’un des plus remarquables. Deux colonnes fournissent cinq zones de contenu, toutes liées à la navigation supérieure. L'inclusion de sections de contenu principales dans la colonne de style "sidebar" plus petite rend la page beaucoup plus courte.
Stage 5 Studio
Le site Stage 5 Studio est court, sans navigation. Les liens "en savoir plus" font apparaître plus d'informations sur chaque projet, tandis que d'autres contenus sont conservés dans la "barre latérale".
SmartCube
Le site SmartCube utilise un en-tête adhésif pour conserver la navigation à l'écran à tout moment. Il utilise également une combinaison de dispositions à 1 et 2 colonnes, en fonction du contenu.
Design éclectique
Les sections de contenu sont différenciées par des textures d'arrière-plan uniques. La typographie rassemble tout au long de la page et JavaScript est utilisé pour afficher des produits supplémentaires sans prendre plus de place.
Inside Secrets à une application iPhone
C'est l'un des plus longs sites Web présentés sur une seule page. Il utilise un en-tête collant avec navigation pour faciliter le passage d'une section à une autre.
Tuer le déversement
Garder un site de bienfaisance comme celui-ci à court et à point est presque sûr d'augmenter le nombre de dons qui arrivent.
Emily Whitesmith
Voici un autre site qui vous lance au bas de la page. En cliquant sur le lien "en savoir plus", vous faites défiler la page vers une zone du portefeuille. Les fenêtres modales donnent des gros plans de chaque tissu.
Prospectus
Les sites Web d'applications sont bien adaptés aux conceptions à une seule page, car ils ont souvent un contenu limité et seulement une capture d'écran ou deux pour les images.
Hayley Smith
Voici une autre très longue page. La navigation se répète en haut de chaque section et le logo glisse le long de la page au fur et à mesure de son défilement.
Conway Anderson
Le site de Conway Anderson utilise un mélange de curseurs (pour les informations à propos et les informations de contact) et de fenêtres modales (pour le travail) pour afficher le contenu. La conception simple basée sur une grille et les couleurs monochromatiques permettent de garder les choses simples et modernes.
Daniel Moir
Le site de Daniel Moir est simple avec un contenu minimal et aucune navigation. Le design à 2 colonnes organise les différents types de contenu sur le site et le maintient plus court.
Latte Per Day
Les sites Web de pré-lancement conviennent parfaitement aux conceptions de pages uniques, comme indiqué ici. Il n'y a pas encore assez de contenu pour justifier un site de plusieurs pages.
Le marché de la ruche
Voici un autre site plus long sur une seule page. Le fond jaune vif et les illustrations d'abeilles lient le site ensemble et la navigation se répète en haut de chaque section.
Rubidine
Le site Rubidine utilise un en-tête collant avec un arrière-plan transparent qui se fond dans chaque section de contenu individuelle.
Jakub Szymanski
Ce site utilise JavaScript pour charger un nouveau contenu et faire glisser la page. Un pied de page collant apparaît après la page d'accueil avec un lien "Retour en haut".
Tyler Termini
Le site Web de Tyler Termini est court, avec une navigation uniquement dans l'en-tête. Comme ce n'est pas une page très longue, ce n'est pas vraiment un problème de devoir revenir en haut (ou simplement de faire défiler chaque section sans utiliser la navigation du tout).
Josh Sender
La palette de couleurs en niveaux de gris est superbe. Le travail affiché passe en couleur lorsqu'il survole et lorsque vous cliquez dessus, une fenêtre modale couleur s'ouvre avec une version plus grande.
Rédigé et compilé exclusivement pour WDD par Cameron Chapman .
Qu'est-ce qui vous plaît le plus dans les sites Web d'une seule page? Avez-vous des favoris qui n'ont pas été présentés ici? S'il vous plaît partager dans les commentaires ci-dessous ...