Un site web d'une seule page ne vous laisse aucune marge de manœuvre. Il n'y a pas de menu pour dissimuler une section faible, ni de deuxième page pour y ranger les éléments qui ne tiennent pas.
Tout ce dont le visiteur a besoin se trouve sur un seul rouleau, dans un seul ordre. Cet ordre constitue l'ensemble du design.
Bien conçu, le site se lit comme une présentation percutante. Mal conçu, il donne l'impression d'un défilement interminable.
Les huit exemples de sites web d'une seule page ci-dessous sont tous réussis, chacun à sa manière. Certains sont des pages de marque personnelle conçues pour décrocher un emploi. L'un d'eux permet de gérer une entreprise de design d'intérieur complète sur une seule page.
Ce qu'ils ont en commun, c'est une fonction bien définie pour chaque écran. Inspirez-vous des éléments qui vous conviennent.
Qu'est-ce qu'un site web d'une seule page ?
Un site web monopage présente tout son contenu sur une seule page continue. Au lieu de cliquer entre Accueil, À propos, Emploi et Contact, le visiteur fait défiler ces sections successivement.
Une navigation fixe permet généralement d'accéder directement à chaque page. Également appelé site monopage ou site à défilement unique, il s'agit de la structure la plus simple du web : une seule URL, un seul chargement, un seul chemin.
Les sites web monopages sont idéaux pour diffuser un message ciblé. Pensez à un freelance proposant un seul service, à un designer présentant une seule série de travaux, ou à un studio qui souhaite que les images parlent d'elles-mêmes.
Si vous proposez cinq services distincts et un blog de 40 articles, ce format ne vous convient plus. Si vous avez un message clair et concis et que vous souhaitez le transmettre efficacement, il est difficile de faire mieux.
La version la plus ciblée du format est une page de destination, construit autour d'une seule action plutôt que d'une histoire personnelle ou de studio complète.
Qu'est-ce qui fait un excellent site web d'une seule page ?
Dans chaque exemple probant, on retrouve les mêmes quelques décisions :
- Un seul message, affiché sur le premier écran. Le visiteur doit savoir qui vous êtes et ce que vous faites avant même de faire défiler la page. Pas de mise en bouche.
- Un ordre de défilement qui a du sens. Les meilleurs sites web monopages sont structurés comme un argument : accroche, preuve, personnalité, question.
- Une action principale. Engagez-moi, découvrez mon travail, contactez-moi. Un seul appel à l'action répété vaut mieux que cinq appels concurrents.
- Des ruptures visuelles qui interrompent le défilement. Les aplats de couleur, les images en pleine page ou un espacement généreux empêchent une longue page de se lire comme une seule bande grise.
- Chargement rapide. Une seule page, c'est une seule chance de faire une première impression. Les vidéos d'accroche trop longues et les images non compressées sont les points faibles des sites monopages, qui font fuir les visiteurs.
Comparez les exemples à cette liste pendant votre lecture.
Fiches de marque personnelle d'une page mettant en avant la typographie
Quand le produit est une personne, le texte joue un rôle primordial. Ces deux sites mettent l'accent sur la fonction, et non sur le nom.
Jon Kirschner
Jon Kirschner Il est stratège en matière de marque et de croissance, et son site web l'indique en caractères quatre fois plus grands que son propre nom.
Le nom apparaît en petit dans un menu de navigation en forme de pilule, et les mots « Stratège de marque et de croissance » remplissent l'écran.
En bas de page, une introduction en langage clair (« Je crée des marques qui convertissent ») donne le ton.
Des sections comme « Mes véritables points forts » et « Mes lectures actuelles » lui confèrent une dimension humaine que la plupart des sites de stratégie négligent. On y retrouve le style de la personne, et non un modèle préétabli.
Emprunter ceci: Faites en sorte que l'information principale que retiendra le visiteur soit plus marquante que votre nom. Il est venu découvrir votre activité, alors mettez-la en avant, de manière à ce qu'il ne puisse pas la manquer.
Jordon Melo
Jordon Melo, un stratège en planification et achat média à Toronto, résout le problème classique de la page unique : comment naviguer sur une longue page défilante ? Il numérote la navigation.
"01. À propos, 02. Résumé, 03. Travail, 04. Témoignages, 05. Contact" correspond exactement à l'ordre de défilement, le menu faisant donc également office de table des matières.
Un titre en caractères à empattement et un portrait en arc de cercle confèrent une certaine chaleur à cette page, pourtant conçue comme un CV. Il s'agit d'un site web monopage qui se comporte comme un site multipage sans nécessiter de temps de chargement.
Emprunter ceci: Numérotez votre menu de navigation en fonction de l'ordre de défilement. Une longue page unique paraîtra moins longue lorsque le visiteur pourra s'y repérer facilement.
Pages uniques en écran partagé et en format portrait
Deux sites, une idée : mettre la personne et l'action sur le premier écran, pour qu'un visiteur pressé n'ait jamais à faire défiler la page pour agir.
Simrran Benvait
Simrran Benvait Elle est spécialiste du marketing en Colombie-Britannique, et son héros fait tout le travail sur un seul écran.
Un portrait occupe la moitié gauche, découpé par une douce vague dans un panneau crème à droite. Ce panneau comporte la formule de salutation, la fonction et trois coordonnées : courriel, LinkedIn et téléphone.
Un recruteur peut lire son profil et lui envoyer un message sans avoir à faire défiler la page. La séparation en forme de vague évite l'impression de deux boîtes collées ensemble.
Emprunter ceci: Indiquez votre rôle, votre lieu de travail et vos coordonnées dès la première page. Sur une fiche de présentation d'une seule page, votre carte de visite est l'élément principal ; traitez-la comme telle.
Noor Harajli
Noor Harajli, une coordinatrice de médias sociaux et de marketing basée à Londres, construit son unique scroll à partir de cartes rouges surdimensionnées sur fond noir.
Chaque section – profil, compétences, travaux – est placée dans son propre bloc arrondi, de sorte que la page se lit comme une succession de pièces plutôt que comme une longue bande.
L'utilisation d'une police à chasse fixe souligne une identité créative et technique, et les fiches « Production de contenu » et « Créatifs graphique » renvoient directement à des projets concrets. Cela prouve qu'un site web à défilement unique peut présenter un CV complet et un portfolio sans paraître surchargé.
Emprunter ceci: Divisez un long parchemin en blocs de couleur arrondis. Une séparation visuelle claire permet à une seule page de contenir beaucoup d'informations sans que le lecteur ne se perde.
Portfolios d'une page axés sur l'image
Lorsque le visuel est au cœur de l'argumentaire, les images occupent toute la page et le texte s'efface. Dans les deux cas, l'illustration principale est une image pleine page.
Dillan Vanner
Dillan Vanner est photographe, et le site s'ouvre comme une belle impression : une image pleine page, bord à bord, avant un seul mot de texte.
Un cadre documentaire remplit le premier écran, le logo est centré et petit, et le slogan « Capturer le monde et tout ce qu'il contient » souligne le propos.
Une navigation minimaliste (Accueil, Portfolio, À propos) et une rangée d'icônes de contact constituent l'ensemble du design. La photo, quant à elle, est le seul élément de vente.
Emprunter ceci: Pour une fiche photo d'une seule page, choisissez une image forte qui occupe toute la première page. Votre meilleure photo est bien plus accrocheuse qu'un titre.
cmc designworks
cmc designworks, un studio d'architecture et de design d'intérieur, fait l'impasse sur le texte et laisse le travail briller.
La page d'accueil s'ouvre sur une grille de photos asymétrique occupant toute la surface : rendus de bâtiments, photos d'intérieur, signalétique, avec une navigation quasi invisible flottant au-dessus.
Pour une discipline visuelle, c'est le choix idéal. Les images sont percutantes, et rien ne peut rivaliser avec elles. C'est l'un des exemples de sites web à défilement les plus épurés qui soient, précisément parce qu'il mise tout sur la photographie.
Emprunter ceci: Si votre travail est visuel, supprimez les mots. Une grille d'images en pleine page, en guise d'élément principal, en dit plus qu'un paragraphe.
Fiches de présentation des services et des talents
Un site web d'une seule page n'est pas réservé aux personnes souhaitant présenter un portfolio. Ces deux exemples s'enchaînent comme une présentation, permettant ainsi de convaincre en une seule lecture.
Arrowood Design
Arrowood DesignUne entreprise d'aménagement intérieur de la région de la baie de San Francisco présente l'ensemble de ses services sur une seule page. Le contenu défile comme une présentation commerciale.
Une promesse de « luxe intemporel » trône au-dessus d'une fresque représentant une chouette effraie, suivie des services, du positionnement « bien plus qu'une simple décoration », de l'histoire de la fondatrice (« Qui est Lisa ? »), des projets et des coordonnées.
Des titres éditoriaux en majuscules assurent la lisibilité du texte. Arrivé en bas de page, vous aurez lu l'intégralité d'un argumentaire de vente, dans l'ordre, sans avoir cliqué une seule fois.
Emprunter ceci: Une seule page peut présenter l'ensemble des services d'une entreprise. Structurez-la comme un argumentaire de vente : promesse, services, preuves, la personne, puis la demande.
Kaitlyn Barry
Kaitlyn Barry est un acteur, réalisateur et interprète basé à Perth. Le site s'ouvre sur son nom en pleine largeur, superposé à un portrait pris à la lumière dorée du crépuscule, à la manière d'une photo de profil en introduction d'une fiche de casting.
À partir de là, on entre directement dans le vif du sujet : un court profil, puis une liste de crédits récents de travaux à l’écran comme The Twelve et Cephalopod, alors contactez-nous.
Le parchemin est organisé comme on lit une fiche de casting : qui sont les candidats, ce qu’ils ont fait, comment les contacter. Rien ne s’y oppose.
Emprunter ceci: Si l'on vous embauche sur la base de votre CV, intégrez-le à la page. Commencez par décrire votre rôle, listez vos réalisations et faites en sorte que la mention « disponible immédiatement » soit bien visible.
Points communs des meilleurs sites web d'une seule page
Considérez les huit éléments ensemble : la régularité est frappante. Les meilleurs sites web d'une seule page ne sont pas les plus esthétiques. Ce sont ceux où chaque écran a une fonction précise et où les tâches s'exécutent dans le bon ordre.
Ils privilégient un message unique et répètent une seule action. Ils utilisent un véritable système visuel pour structurer le défilement : navigation numérotée, cartes de couleurs, grille d’images, en-tête divisé.
Ils privilégient l'essentiel : le rôle et le contact pour les demandeurs d'emploi, le travail pour les studios.
Et ils misent sur la simplicité, car un site d'une seule page se résume à un seul téléchargement et à une première impression. Les sites web simples sont souvent plus efficaces que les sites complexes. La clé du succès réside dans la sobriété.
Quand un site web d'une seule page fonctionne (et quand vous avez besoin de plus d'une page)
Ce format a ses limites. Un site d'une seule page convient parfaitement lorsque votre message est ciblé et votre contenu concis.
Dès que vous avez plusieurs publics distincts, un blog en pleine croissance ou un catalogue de services qui méritent chacun leur propre présentation, le défilement unique d'une page web commence à vous desservir.
Si vous êtes un artiste traditionnel plutôt qu'un designer, une mise en page sur plusieurs pages convient généralement mieux à votre travail. sites de portfolio d'artistes Roundup couvre cet itinéraire. Voici la version officielle :
Si votre site est placé dans la colonne de droite, créez des pages supplémentaires. Forcer tout à tenir sur un seul défilement pour un rendu minimaliste est un choix que vos visiteurs financent.
Comment créer votre propre site web d'une seule page
Vous n'avez pas besoin de coder cela. Commencez par écrire le texte défilant avant de toucher à un modèle.
Classez vos sections dans l'ordre où un visiteur non averti les découvrirait, puis supprimez-en une. La plupart des sites d'une seule page ont une section de trop.
Pour la création de sites web, un outil de création de sites axé sur le portfolio est plus avantageux qu'un outil général, car les mises en page sont déjà conçues pour un défilement unique et réfléchi.
Pixpa's Templates de sites web monopages Ils offrent une navigation fixe et ancrée, des sections d'images en pleine page et un bloc de contact intégré, prêts à l'emploi. Vous pouvez les voir en action dans le portfolios d'une page Galerie.
Le CSS personnalisé est là si vous souhaitez modifier la typographie ou l'espacement. Jon Kirschner et Noor Harajli fait.
Si vous préférez comparer d'abord les outils dédiés aux pages uniques, consultez notre sélection de créateurs de sites web monopages est un point de départ utile.
Chaque site ci-dessus a été construit sur Pixpa, ce qui donne une bonne idée de ce à quoi le format peut ressembler sans développeur.
Quel que soit le support choisi, veillez à compresser les images et à réduire le nombre de sections. La sobriété est au cœur du design.
Conclusion
Un site web d'une seule page impose une contrainte. Il vous oblige à choisir l'essentiel et à l'organiser, puisqu'il n'y a pas de deuxième page pour masquer le reste.
Les exemples présentés ici concernent un consultant en recherche d'emploi, un créatif londonien, un photographe documentaire, un studio d'architecture, une entreprise de décoration d'intérieur de luxe et un acteur professionnel.
Chacune d'elles fonctionne pour la même raison : un message clair, un défilement délibéré, une chose à faire ensuite.
Rédigez votre texte comme un argument, commencez par l'idée principale, et coupez jusqu'à ne garder que l'essentiel.
FAQ pour sites web d'une seule page
Qu'est-ce qu'un site Web d'une page ?
Un site web monopage regroupe tout son contenu (à propos, réalisations, services, contact) sur une seule page défilante au lieu de le répartir sur plusieurs pages.
Également appelé site monopage ou site à défilement unique, il convient à un message ciblé : un service, un portfolio ou une présentation personnelle. Une navigation fixe permet généralement au visiteur d’accéder directement à chaque section.
Les sites web d'une seule page sont-ils bons pour le référencement naturel ?
Ils peuvent obtenir un bon classement pour votre nom et une ou deux expressions clés, ce qui est souvent tout ce dont une marque personnelle ou une entreprise de service unique a besoin.
Leur principal point faible réside dans l'étendue de leur contenu. Google privilégiant le classement des pages et non des sites, une page ne peut cibler qu'un nombre limité de mots-clés avant que son contenu ne devienne redondant. Pour être bien positionné sur de nombreux sujets, il faut davantage de pages.
Combien de sections un site web d'une seule page doit-il comporter ?
De quoi étayer votre argumentation, et rien de plus. La plupart des sites web monopages les plus performants comportent cinq à sept sections : une présentation principale, une brève description, les travaux ou services proposés, des exemples de réalisations et une section contact.
Si vous vous retrouvez à ajouter une huitième page, vérifiez si le site est réellement conçu pour comporter plusieurs pages.
Une seule page ou plusieurs pages : laquelle est la meilleure ?
En théorie, aucune des deux n'est meilleure que l'autre. Elles résolvent des problèmes différents.
Un site web d'une seule page est idéal pour diffuser des messages ciblés, prendre des décisions rapides et présenter des portfolios visuels.
Il est préférable d'opter pour une structure à plusieurs pages si vous avez des publics distincts, un blog en pleine croissance ou de nombreux services qui méritent chacun leur propre page. Privilégiez la richesse du contenu plutôt que l'esthétique.
Où puis-je trouver d'autres exemples de sites web monopages ?
Au-delà des huit galeries présentées ici, il y en a d'autres comme One Page Love et AwwwardsLes collections d'une seule page méritent d'être parcourues pour trouver l'inspiration en matière de design.
Lorsque vous naviguez, ne vous fiez pas uniquement aux visuels : étudiez l’ordre de défilement et l’appel à l’action, car c’est cette partie que vous devez réellement copier.
Combien coûte un site web d'une seule page ?
Si vous le créez vous-même à l'aide d'un créateur de sites web, un site d'une seule page coûte le même prix qu'un petit site : environ le prix d'un forfait plus un nom de domaine. Consultez le Tarifs des derniers forfaits pour les chiffres actuels.
Faire appel à un designer pour créer une page web personnalisée coûte entre quelques centaines et quelques milliers d'euros, selon la complexité du travail. Pour la plupart des personnes figurant sur cette liste, un modèle a suffi.