Conception de site Web à page unique: 10 conseils + idées
Vive la conception de sites Web d'une seule page! Il y a quelque chose de presque magique dans les sites Web à petite échelle qui tiennent sur une seule page. Ils peuvent être gracieux, faciles à naviguer et offrir une expérience utilisateur optimale dans un espace confiné.
Alors qu'il fut un temps où nous nous éloignions des sites Web à page unique, les utilisateurs les adoptent à nouveau (merci, mobile!) Et vous devriez aussi.
Nous examinons dix conseils, idées, exemples et suggestions pour vous aider à susciter l'inspiration pour votre prochain travail de conception Web. C'est peut-être le bon moment pour rester simple et adopter une stratégie d'une seule page!
Explorez les ressources de conception
1. Pensez dans les «Pages»
Quand il s'agit de concevoir une conception de site Web unique et défilante, pensez aux «pages».
Chaque parchemin doit fournir une expérience semblable à une page qui se concentre sur un seul élément. Cela crée un sens distinct d'organisation et de flux pour la conception du site Web.
Cote le fait magnifiquement avec des "pages" qui ont des séparations claires et sombres (ou photo complète). L'utilisateur sait visuellement en faisant défiler où se termine un bit de contenu et où commence le suivant.
2. Navigation chronologique pour les pages plus longues
En ce qui concerne les sites Web d'une page, ils ne sont pas toujours légers sur le contenu. Certains des meilleurs designs d'une page sont des sites Web à défilement plus long et à format plus long.
Pour ces projets, envisagez la navigation dans la chronologie afin que les utilisateurs sachent toujours où ils se trouvent dans le flux de contenu. Il permet de suivre facilement où vous êtes et comment revenir s'il y a du contenu à réexaminer.
UV Hero fait un bon travail avec une navigation chronologique très visuelle qui montre chaque couleur sur le spectre de la lumière visible en ce qui concerne le contenu du design. Et la meilleure partie? Vous pouvez cliquer sur n'importe quelle couleur et accéder directement à ce contenu.
3. Navigation sur la page
Les sites Web à page unique n'ont pas besoin de manquer d'éléments communs de l'interface utilisateur tels qu'un menu, bien que beaucoup semblent le faire.
Vous pouvez toujours incorporer un menu d'aspect traditionnel (il peut aider le flux utilisateur ainsi que la recherche). La différence est que les liens de menu sautent vers des sections spécifiques de la conception d'une page. Pour les utilisateurs qui aiment naviguer de cette manière, ils ne sauront même pas que vous avez créé cette astuce astucieuse.
Happy Tools ressemble à un site de plusieurs pages, mais tout est contenu sur une seule page. Le menu fonctionne exceptionnellement bien et offre aux utilisateurs des choix de navigation.
4. Rendez-le hautement interactif
Si vous souhaitez que les utilisateurs continuent de faire défiler, les éléments interactifs peuvent être l'astuce qui encourage cette action.
De la vidéo aux effets de parallaxe en passant par des touches d'animation ou de gamification, l'interactivité peut favoriser une plus grande mobilité et plus de temps sur le site. Cela est particulièrement vrai avec les conceptions d'une seule page.
Lobods a un style maladroit avec beaucoup d'interactivité. Il existe des animations de survol, des éléments de diapositives et de pop-in et du texte défilant. Tout est réuni d'une manière qui aide les utilisateurs à parcourir facilement le contenu. (Un autre bonus avec ce design? Il comprend beaucoup d'espace pour que les mouvements et les interactions subtiles soient plus faciles à voir.)
5. Tout sur un seul écran
Si vous n'avez pas beaucoup de contenu, une conception d'une page sur un seul écran peut offrir une expérience utilisateur agréable.
Traitez cette conception de site Web comme un grand élément de navigation avec des informations, puis des liens hors site ou de contact. Cela peut bien fonctionner pour les conceptions à venir ou les pages de destination de portefeuille simples.
Sylvain Theyssens le fait pour la conception de son portefeuille. (Il contient en fait deux pages: une animation mignonne de «style économiseur d'écran» qui se transforme en conception principale avec un mouvement de souris.) La page est simple, informative et impressionnante. La conception à un écran vous donne tout ce que vous devez savoir sans que rien ne vous gêne.
6. Conception à venir
En parlant de sites Web à venir, c'est l'utilisation parfaite pour une conception d'une seule page.
Dans la plupart des cas, les pages à venir n'ont pas beaucoup de contenu - peut-être juste un logo et une introduction ou des informations de contact. Dans la plupart des cas, cela peut bien tenir sur une seule page et constitue une utilisation efficace du temps de l'utilisateur jusqu'à la mise en ligne du site principal.
Le caméléon vert fait exactement cela. La conception one = page est particulièrement agréable en raison de l'animation cool et de l'utilisation intéressante du texte. Cela crée un sentiment d'anticipation et évoque la curiosité - juste ce que vous espérez dans une prochaine page.
7. Soyez un peu génial
Les sites Web à page unique peuvent être un excellent terrain de jeu si vous voulez essayer quelque chose d'un peu différent ou funky. Un affichage inhabituel fonctionne bien avec des conceptions plus petites, car vous ne finissez pas par faire trop "l'astuce".
Rou Hun Fan utilise une police de caractères et une grille d'arrière-plan pour mettre en évidence ses informations, son portfolio et son travail. L'affichage créatif et le style minimal sont suffisants pour encourager le défilement pendant une courte période, parfait pour un portefeuille.
8. Donnez aux utilisateurs quelque chose à faire
Pour maintenir l'engagement et garder les utilisateurs intéressés par la conception, donnez-leur beaucoup à faire sur un site Web d'une seule page.
Un échec que beaucoup de ces conceptions ont est qu'elles ne sont que de longs parchemins d'informations. Décomposez-le avec des éléments cliquables, des appels à l'action et des choses à faire. Non seulement ces éléments vous aideront à comprendre ce que les utilisateurs attendent de la conception (et s'ils atteignent vos objectifs), mais ils les aideront également à interagir plus longtemps.
Plethora rompt une longue page de défilement avec de nombreux boutons de style carte pour réserver des forfaits de voyage. Chacune de ces interactions de clic est indiquée par une flèche pour créer une expérience utilisateur cohérente.
9. Restez organisé
Avec tout le contenu d'un site Web sur une seule page, la conception peut facilement devenir incontrôlable. Mais il peut également créer un canevas organisé pour le contenu.
Lorsqu'il s'agit de travailler avec une seule page, une grille serrée et une structure uniforme peuvent être vos meilleurs outils. Utilisez-les pour garder le contenu organisé et groupé d'une manière facile à naviguer et à comprendre pour les utilisateurs.
Podcasts Repo le fait bien avec une grille parfaite de podcasts à choisir. Le site est suffisamment flexible avec cette grille et ce style pour atteindre autant d'éléments de contenu qu'il le faut sans être écrasant.
10. Utilisez l'espace judicieusement
L'utilisation de l'espace est l'une des considérations de conception les plus importantes pour une conception à défilement plus long ou sur une page. Le contenu doit être espacé de manière à ce que les modifications de contenu soient clairement établies, les actions identifiables et tout soit facile à lire. (N'oubliez pas qu'un défilement excessif peut commencer à provoquer une certaine fatigue oculaire.)
La nomenclature des couleurs de Werner est un site Web d'une seule page avec beaucoup de contenu. Le site est en fait une réplique d'un livre de 1821. L'espace fait fonctionner cette conception.
Les catégories et sous-sections avec une grille claire et beaucoup d'espace blanc améliorent la lisibilité et la numérisation. Il y a beaucoup ici, mais cela semble assez accessible grâce à l'utilisation de l'espace partout.
Conclusion
La conception d'un site Web sur une seule page peut être exactement ce dont vous avez besoin pour briser certains des projets les plus lourds sur lesquels vous avez travaillé. Ce style peut fonctionner pour n'importe quoi, des sites à venir aux portefeuilles. Il convient à tout site Web sans tonnes de contenu.
Avez-vous des designs de sites Web d'une page à montrer? Voyons-les. Partagez-les avec nous sur Twitter. Taggez @designshack et @carriecousins avec un lien vers cet article et nous retweeterons nos favoris.
