Site Internet

6 exemples de sites Internet au design moderne et épuré

Dans cet article, nous comparons le design de six sites Internet grand public en ciblant leurs points faibles et leurs points forts afin d’améliorer la navigation et l’ergonomie de vos propres sites.

Anne-Laure Compain

Graphiste chez Snoweb

Publié le 13 mars 2021 (Mise à jour le 3 novembre 2025)

Sommaire

Veuillez noter que toutes les images des sites Internet ont été capturées à la création de l’article. Les designs des sites Internet ont pu être mis à jour par les marques.

Pourquoi créer un site Internet ?

Pour se faire connaître, un commerçant va s’installer dans une boutique et se faire une vitrine attrayante. C’est ainsi que ses clients vont le remarquer. Eh bien pour vous, c’est pareil ! Votre site Internet est votre vitrine, mais en ligne.

Faire parler de sa marque

Lorsque vous êtes content d’un service ou d’un commerçant, que faites-vous ? Vous le recommandez à votre entourage ou vous laissez un avis sur Internet. Il en va de même pour votre site Internet. Plus vous êtes visible sur le web, plus les gens testent, donnent leur avis et témoignent de la qualité de votre service.

Rendre sa marque visible

Avoir un site internet, c’est bien, mais qu’il soit visible, c’est mieux ! On parle là de référencement naturel, ou SEO. Ce point est une épine dans le pied de beaucoup d’entrepreneurs qui ne voient pas l’intérêt de le travailler. Le SEO, quand il est bien fait, vous permet d’apparaître sur la première page des résultats de recherche de Google.

Apporter de la crédibilité à sa marque

Sur votre site Internet, présentez vos services, vos réalisations, vos compétences, etc. Prouver que vous êtes expert dans votre domaine apporte de la confiance à vos clients. Racontez votre histoire sur votre site Internet, ajoutez des avis clients et des photos : en clair, montrez-vous et démarquez-vous !

1. Qonto

Qonto, qu’est-ce que c’est ?

Qonto est une banque 100 % en ligne pour les entrepreneurs et les startups, qui propose l’ouverture d’un compte en quelques clics et la réception instantanée de l’IBAN. Grâce à son appli mobile, elle permet de suivre votre compte en temps réel, à tout moment.

Les atouts du site

1. Le menu

Le menu fixe ou flottant : il reste en place lorsque les internautes font défiler la page. Ce type de menu est idéal pour les sites one-page car il permet d’avoir accès aux autres pages rapidement et sans avoir à faire défiler la page.
Le menu déroulant : un menu dans lequel une liste d’options supplémentaires s’ouvre lorsque les visiteurs survolent ou cliquent sur un élément. Cette option convient aux sites avec beaucoup de contenu. Mais attention : un menu trop haut pourrait masquer le reste de la page web et nuire à la lisibilité.
Illustration dans le menu : voilà un moyen d’attirer le regard et de captiver l’attention de l’utilisateur. L’illustration permet d’apporter un surplus d’informations en accompagnant l’image d’une légende.

Petit conseil graphique : l’overlay. À l’apparition du menu, appliquer un léger filtre gris sur la zone correspondant au reste de la page : cela permettra de maintenir l’attention sur les choix proposés dans le menu par un jeu de contraste.

Découvrir le site Qonto

2. Simplicité des blocs

Nous vous conseillons d’opter pour la création d’un petit nombre de blocs différents sur la page d’accueil, mais ceux-ci doivent être bien construits. Prenons l’exemple du bloc 1 :

Image impactante reprenant les couleurs dominantes du site.
Titre en gras et d’une taille de caractère supérieure à 50 px.
Liste de points forts : une liste de notions courtes aura toujours plus d’impact qu’un paragraphe. Elle se lit plus rapidement et est donc plus facile à comprendre et à mémoriser.
2 boutons d’action : ici, ils permettent d’afficher les prix des abonnements ou de poursuivre la lecture sur la page.

Petit conseil UX : pour convertir le prospect en client, utilisez l’un de ces boutons pour le rediriger vers la page de contact ou de souscription, par exemple.

3. Overlaps

L’overlap est le chevauchement de plusieurs éléments graphiques et/ou textuels, comme une image de background, un texte, une illustration et des boutons par-dessus. Cette technique apporte une sensation de dynamisme à l’utilisateur et rend la navigation plus fluide et plus agréable.

Petit point statistique :

Il est aujourd’hui acquis que notre cerveau se souvient beaucoup mieux d’un visuel ou d’une image que d’un texte écrit ou entendu. L’impact d’une image sera donc bien supérieur et son sens compris plus rapidement qu’un texte. N’oubliez pas que seulement 10 % des personnes se souviennent des informations présentées oralement trois jours après avoir reçu les informations. De même, si on combine un visuel avec du texte, un plus grand nombre de personnes retiendront les informations. Ainsi, avec une photo, 65 % des personnes se souviennent du sujet trois jours plus tard.

Découvrez un exemple avec le bloc juste en dessous. Par contre, si vous êtes sur mobile, vous ne verrez pas cet overlap, car ce n’est pas recommandé sur mobile. ⬇️

Newsletter Snoweb

Vous souhaitez lire plus de contenu sur les sites Internet ?

Inscrivez-vous à notre newsletter et recevez chaque semaine de nouveaux conseils, actualités et articles de blog.

Articles variés et complets. Très instructifs !

2. Stripe

Stripe, qu’est-ce que c’est ?

Stripe est une infrastructure de paiement web sécurisée qui permet à vos clients de payer simplement en utilisant leur CB sans quitter votre site. Stripe est donc un moyen simple d’accepter des paiements en ligne, sans frais d’installation ni frais mensuels ; seule une commission est prélevée par le prestataire sur chaque transaction.

Les atouts du site

1. Version web

Stripe intègre des animations dans ses blocs, ce qui attire l’œil des utilisateurs et leur permet de rester sur le bloc pour lire le texte correspondant.
Menu flottant hyper design et attractif grâce à ses nombreuses couleurs.
La présence des logos d’entreprises connues utilisant leur solution, en 2e position sur le site, apporte un sentiment de confiance et aide à convertir les utilisateurs.
Le design : les coupures entre les blocs en diagonale montante vers la droite apportent du dynamisme à la page.

Découvrir le site Stripe

2. Version mobile

Menu dynamique sous forme de pop-up avec une légère ombre en dessous afin de le détacher du reste de la page. Cette technique est très appréciée par les utilisateurs : ils ne confondront pas le menu avec le reste de la page.
Couleur des icônes : Afficher les icônes des pages principales (des produits) en couleur et celles des pages secondaires en gris permet d’orienter l’œil de l’utilisateur vers les notions les plus importantes.

Points négatifs

3. Version web

Bouton d’action « connexion » peu visible à cause de sa couleur blanche et de son opacité
Mauvaise lisibilité du titre principal à cause de sa couleur et de la coupure diagonale du fond, qui perturbent la lecture. On retrouve les mêmes problèmes sur la version mobile.
Menu non fixe : c’est-à-dire que, lorsque l’on scroll dans la page, le menu ne reste pas fixe en haut de la page. Même si la page d’accueil n’est pas longue, c’est dérangeant de devoir remonter en haut du site pour accéder au menu.

Petit conseil UX : peu importe la longueur de votre page, nous vous conseillons de toujours faire figurer votre menu dans le header fixe. Ça améliore l’expérience utilisateur, en évitant de devoir chercher le menu en haut de la page.

3. Airbnb

Airbnb, qu’est-ce que c’est ?

Airbnb, plateforme de location de logements (appartement, maison, chalet, etc.) entre particuliers, partout dans le monde.

Les atouts du site

1. Version web

Airbnb joue sur la beauté de l’illustration principale qui change régulièrement, pour attirer le regard. La lumière de l’illustration en diagonale dirige aussi le regard vers la zone de recherche de logements.
Le champ de recherche de logements ne ressemble en rien aux champs classiques des hôtels ou autres sites de réservation. Design épuré, moderne et discret. Au clic sur la zone de recherche, un menu déroulant apparaît pour afficher des suggestions de villes, les calendriers et les voyageurs. En outre, le bouton « rechercher », n’affichant qu’une loupe, se transforme en bouton avec le texte « rechercher » au clic sur un des champs. La recherche se fait rapidement en 4 clics pour une expérience utilisateur optimisée !
Menu fixe lors du défilement de la page.
Suggestion de 8 villes dans le second bloc, illustré par des vignettes modernes.
Bloc avec une disposition mosaïque dynamique.

Découvrir le site Airbnb

2. Version mobile

Le bloc dynamique présent sur la version web se transforme en carrousel tout aussi moderne et dynamique sur le plan du design.
Au scroll, apparition de 2 menus : un en haut qui permet de rechercher un logement et un en bas qui permet de se connecter, de voir ses favoris et, enfin, de retourner en haut du site. Très pratique pour l’utilisateur !

Bon à savoir : Nous n’avons trouvé aucun défaut de design ou d’UX flagrant sur ce site !

4. Wagtail

Wagtail, qu’est-ce que c’est ?

Wagtail est un CMS conçu avec Django. Il permet de créer des pages web facilement pour différents types de sites Internet. Grâce à Wagtail, on peut donc créer un site vitrine, un portfolio, un blog, un e-commerce ou encore une documentation.

Les atouts du site

1. Version web

Micro-interaction : des micro-interactions sont de petites animations sur des éléments comme des boutons. Elles permettent d’attirer l’attention du visiteur ou de l’inciter à cliquer.
Choix colorimétrique : l’association du turquoise et du violet, deux couleurs complémentaires, crée une dynamique qui attire le regard.
La diagonale montante vers la droite rend le background (image de fond) du bloc 1 très dynamique.
L’aperçu de l’interface permet de montrer le produit au client.
La preuve sociale : faire figurer les clients qui font confiance à la marque en deuxième bloc : preuve de valeur importante, car il s’agit ici de clients connus dans le monde entier.
Ciblage des prospects : les développeurs. L’affichage des textes se fait sous forme de code + bouton d’action principal dans le header « documentation » pour les développeurs qui vont utiliser l’outil.

Découvrir le site de Wagtail

2. Version mobile

Adaptabilité des blocs pour le mobile.
Navigation simplifiée.
Carrousels dynamiques pour afficher les logos des partenaires.
Menu dynamique sous forme de menu hamburger (technique qui consiste, pour gagner de la place et améliorer l’ergonomie, à masquer le menu derrière un bouton ; généralement trois lignes parallèles).
Alternance entre les blocs sur fond blanc et sur fond mauve pour dynamiser la page.

5. Apple

Les atouts du site

Il n’y a pas plus minimaliste qu’Apple en matière de design, de marketing et, surtout, de site internet ! Ce dernier est ultra-simplifié et très ergonomique.

Sur la page d’accueil, on retrouve toujours le dernier produit sorti au-dessus de la ligne de flottaison, avec un lien permettant de l’acheter. Pendant la période de Noël, par exemple, Apple propose des idées de cadeaux à offrir.

Les plus de la navigation sur le site Apple : une barre de navigation simple avec seulement les différentes gammes de produits et une icône discrète de panier. Tout le reste se trouve dans le footer, où sont regroupés tous les liens secondaires du site.

Par ailleurs, le design de page est ultra-épuré : du texte noir sur un fond blanc ou inversement, de gros titres, une grande photo et surtout beaucoup d’espace blanc.

Notez que l’absence d’espace blanc sur une page web fatigue l’œil du lecteur !

Découvrir le site d’Apple

6. Respire

Sur la page d’accueil de Respire, on retrouve tous les éléments essentiels d’un e-commerce, à savoir :

Une bannière promotionnelle en première position
Un code promotionnel dans le menu
Les produits phares
Les produits du moment : Saint-Valentin, Noël, fête des mères, etc.
La gamme complète de leurs produits
Un code promotionnel en s’inscrivant à la newsletter
Les points forts de l’e-commerce : livraison, contact, paiements sécurisés
Les avis des clients
La communauté : les personnes ou la presse qui parlent de la marque

En termes de design, de couleurs et de typographie, Respire respecte l’univers de ses produits. À savoir : des produits naturels, engagés, recyclables et bons pour la planète.

Couleurs

Les couleurs ne sont pas agressives, mais pastel. Elles font appel à des teintes naturelles : par exemple le sable pour le jaune ou le végétal pour le vert.

Typographie

Les typographies utilisées à la fois sur le site internet et sur les emballages produit sont bien lisibles et simples. Il n’y a pas de superflu, on va à l’essentiel !

Le point négatif que nous pouvons relever sur ce site, c’est le manque d’espace entre les éléments, par exemple les produits qui sont collés aux titres.

Découvrir le site de Respire

À travers l’analyse de ces différents sites Internet, on se rend bien compte qu’avoir un site Internet est aujourd’hui essentiel. Nous le savons, et vous aussi ! Maintenant, l’important, c’est de bien construire son site et de réfléchir à son contenu. Réfléchir à ce que votre cible a envie de lire afin de lui apporter des réponses. En résumé, il faut :