30 sites d'une page que vous souhaiteriez avoir construits
Avec les internautes bombardés de tant d'informations, les concepteurs Web explorent constamment de nouvelles manières de fournir du contenu. Les sites Web d'une page sont désormais largement adoptés par certaines des plus grandes marques du monde qui les utilisent pour offrir aux utilisateurs une expérience rapide, propre et simple, à la fois efficace et belle.
Au cours des dernières années, nous avons vu la tendance vers les sites Web d'une page se développer grâce à l'introduction de HTML5 et de jQuery, qui facilitent la création de sites Web étonnants avec des transitions et des effets astucieux.
Vous trouverez ci-dessous 30 sites Web HTML5 d'une page époustouflants, allant du design minimaliste à la navigation simple en passant par le défilement de la parallaxe. Si vous cherchez de l’inspiration pour votre nouveau site Web HTML5, consultez la liste ci-dessous:
1. Trionn Design
Après avoir remporté plusieurs prix, le site Web HTML5 d'une page de Trionn Design utilise le défilement parallaxe pour faciliter la navigation des utilisateurs sur le site. Cette conception réactive utilise des images attrayantes pour garder les utilisateurs engagés, et intègre également des effets CSS exceptionnels.
2. Oakley Airbrake MX
Oakley a créé ce site divertissant et accrocheur, combinant le défilement parallaxe et des photographies étonnantes pour mettre en valeur les nouvelles lunettes MX Airbrake de manière unique.
3. Faites défiler pour votre santé
Non seulement ce site est-il époustouflant, mais il fournit également des informations utiles sur votre «5 par jour», encourageant les visiteurs à manger plus de fruits. Le site utilise un défilement intelligent de la parallaxe pour une sensation lumineuse, presque vidéo.
4. Laura Baffari
La designer graphique Laura Baffari a créé un portefeuille interactif époustouflant qui utilise le défilement horizontal et le balayage tactile pour les smartphones et les tablettes. Lorsque vous entrez dans le site, vous verrez des tuiles affichant son travail, qui peuvent défiler dans n'importe quelle direction.
5. Pati & Felipe
Celui-ci est pour tous les romantiques. Cela doit être le moyen le plus unique de confirmer votre présence à un mariage. Une belle histoire d'un couple qui s'est rencontré il y a plusieurs années, ce site utilise le défilement parallaxe avec une bonne animation et une typographie inventive.
6. Ian James Cox
Ian James Cox, concepteur numérique indépendant, a également créé un site Web d’effets de griffonnage inventif autour de la police «Duffy Bold» et du populaire plug-in jQuery Scroll Path.
7. Air Jordan 2012
Les spécialistes de la chaussure Nike ont créé un site Web captivant pour la Air Jordan 2012. Construit autour de la chaussure elle-même, le site utilise le défilement parallaxe pour attirer les visiteurs à travers la création du formateur et les matériaux utilisés.
8. My Pizza Oven
Renato, fanatique de la pizza, a créé ce site séduisant pour son activité de pizza party. Non seulement ce site vous donne faim, mais l’utilisation d’éléments graphiques sur toute la page apporte une touche agréable.
9. Marty.com
Créé par Martin Ringlein, responsable de la conception de Twitter, ce modèle de page unique est vraiment unique. Utilisez les flèches en bas pour mettre en mouvement les diaporamas de présentation et voir ce que Martin a fait depuis 1999. Si vous cherchez de l'inspiration pour une navigation originale, consultez ce site!
10. Smart Phood
Smart Phood est un projet de recherche sur la façon dont les gens mangent. Ce document à un page HTML coloré a un défilement unique qui lui donne le facteur «wow».
11. numéro10
Je ne peux pas imaginer combien de travail a été consacré à la création de ce site Web d’une page. Il utilise le défilement parallaxe et des charges de transitions étonnantes et des éléments graphiques que vous ne verrez probablement sur aucun autre site. Tout simplement à couper le souffle!
12. Saucony Kinvara 3
Une excellente expérience interactive utilisant le défilement de parallaxe et des transitions et effets étonnants pour présenter le parcours complet de la chaussure.
13. Voyage épique de Pi
Ce document d'une page est aussi épique que le film lui-même. Il s'agit d'un superbe site de défilement de parallaxe HTML5 qui présente les coulisses de certains des plus grands moments du film.
14. New Skoda Octavia
Le nouveau site Web HTML5 de Skoda Octavia invite les visiteurs à le découvrir grâce à une expérience animée immersive. Cet étonnant document d'une page utilise le défilement parallaxe et un type de navigation unique qui crée une expérience attrayante.
15. Chaque dernière goutte
Un site Web informatif qui examine de manière approfondie la quantité d'eau consommée par une personne moyenne chaque jour au Royaume-Uni. Le site utilise des éléments graphiques et des transitions pour susciter la conversation sur un problème important.
16. Révérend Danger
Stylistiquement similaire à Minecraft, Reverend Danger utilise une gamme de techniques d'animation et de techniques CSS pour créer une expérience amusante pour les visiteurs. Ce document d'une page combine un curseur intéressant au sommet où les visiteurs peuvent changer les images de «révérend au danger».
17. Festa Italiana
Festa Italiana est un autre site Web amusant qui utilise des couleurs vives et des éléments graphiques qui bougent au fur et à mesure que vous défilez.
18. Activer
Étanchez votre soif avec ce site Web par Activate. Lorsque vous faites défiler le site, vous recevez des bouteilles flottantes cliquables. Le site présente d'excellentes transitions et effets.
19. Guitares D'Angelico
De nombreuses guitares D'Angelico ont été adoptées et sont restées populaires jusque dans les années 70. Maintenant, la légende renaît avec un étonnante page à page unique en HTML5 qui utilise le son et le défilement de la parallaxe pour vous guider tout au long du voyage.
20. État du propriétaire de l'entreprise 2013
Une approche unique du concept populaire de l'infographie traditionnelle, ce site HTML5 d'une page présente les statistiques d'un rapport qui révèle des facteurs critiques pour la réussite des petites et moyennes entreprises en 2013. Faites défiler pour voir les transitions et les effets qui révèlent les statistiques.
21. Marco Rosella
Un fantastique site de portfolio d'une page en HTML5 avec une interface utilisateur zoomable alimentée par SVG.
22. Jules Bassoleil
Le portfolio mono-page de Jules Bassoleil offre une navigation incroyablement logique et efficace avec les graphiques qui vous sautent aux yeux.
23. Sergio Pedercini
Le web designer italien Sergio Pedercini a créé un site élégant pour afficher son portfolio. Les couleurs vives et la navigation rebondissante le rendent attrayant et facile à utiliser.
24. VonDutch
L'utilisation du défilement de parallaxe par la marque de mode Von Dutch ajoute une touche de mouvement à son histoire. Les icônes et les images se déplacent lorsque vous faites défiler la page, offrant ainsi une expérience fluide.
25. CoolApps
Un simple pager HTML5 simple mais attrayant qui utilise l'animation pour fournir un effet flottant exceptionnel.
26. Pixelmess
Le défilement horizontal est assez courant sur les sites Web des agences de création et le site de Pixelmess en est un exemple particulièrement efficace. La combinaison de polices et d’illustrations rétro vous donne l’impression de jouer à un jeu vidéo d’ancienne école encore plus engageant.
27. Renault Zoe
Renault utilise une combinaison de défilement parallaxe, audio et vidéo pour créer une expérience interactive et étonnante pour les visiteurs.
28. Officeline Lei
C'est l'un des meilleurs sites de présentation de produits que j'ai vus récemment. Le site utilise le défilement parallaxe pour présenter des chaises pivotantes spécialement conçues pour les femmes.
29. Maison de beauté All-N-1
Ce lecteur de pages HTML5 réactif comporte une disposition fluide qui comprend plusieurs éléments interactifs et animations pour le rendre plus attrayant.
30. Kinderfotografie Evi Hermans
La photographe pour enfants Evi Hermans a créé ce site Web amusant et ludique d'une page. Non seulement les photos sont belles, mais ce magnifique site est encore plus interactif grâce à l'utilisation d'animations.
Souhaitez-vous que vous ayez construit ces sites? Avez-vous construit un meilleur? Faites le nous savoir dans les commentaires.