Un trimestre vient de s’écouler depuis mon dernier article spécial webdesign, alors il est temps de refaire le plein d’idées avec de nouveaux exemples de sites internet toujours plus beaux et inspirants ! 🤗
Eh oui, tu t’en doutes, créer un site web ne s’improvise pas et faire un petit repérage avant de te lancer dans le choix de ton template ou de ton futur style graphique peut vraiment s’avérer utile…
Pour t’aider dans cette démarche, je t’ai concocté une jolie sélection de sites ergonomiques, esthétiques et originaux comme on les aime ! Prête à t’en mettre plein les mirettes ? C’est parti mon kiki !!! 🤗
SOMMAIRE :
- ECKINOX : minimalisme, efficacité et singularité
- GESTION MIRO : arty, fluide et coloré… le combo parfait !
- HEVREST : un site corporate avec une belle pointe de fun
- DHNN : une belle vitrine qui en met plein la vue
- Sarah Stroschein : un site minimaliste au branding ultra soigné
- Optique des entrepreneurs : une belle identité de marque pour un site simple, mais efficace !
- The Dropstore : un faux site e-commerce conçu pour marquer les esprits
- AIMKO : une expérience immersive et hors-norme
- UPPERQUAD : un design web tendance, créatif et singulier
- TAG HEUER : tout en classe et en mouvement
10 exemples de sites internet inspirants repérés ce trimestre :
1. ECKINOX : minimalisme, efficacité et singularité
On commence par un très bel exemple avec le site web de l’agence de création numérique “Eckinox”.
Ici pas de fioritures inutiles, on va tout de suite à l’essentiel ! La home mise tout sur son texte d’accroche qui se déroule au fil du scroll, phrase par phrase, en pleine page. Ça a beau être simple, ça en jette ! 🤩 C’est aussi très efficace, puisque certaines phrases contiennent des liens vers les autres pages du site, ce qui incite davantage à les consulter. 👍
On notera également le petit détail sympa qui fait la différence : le changement de couleur régulier sur l’arrière-plan en aplat uni, toujours dans des tons pastel très agréables. 🌈
Petite mention spéciale pour le menu qui se montre lui aussi plutôt original puisqu’il apparaît sous la forme d’une courte phrase avec des mots cliquables (”agence” et “travail”) et qu’il s’accompagne du traditionnel symbole “burger” pour accéder à l’ensemble des rubriques. Rubriques qui apparaissent sur un fond noir avec des couleurs bien flashy et la particularité de ne présenter aucune majuscule. 🔤
D’ailleurs, les majuscules sont absentes sur l’ensemble du site, un parti pris créatif qui illustre une personnalité bien affirmée et qui sort des sentiers battus.
Les accroches du style “on fait c’qu’on aime” contribuent également à créer ce petit côté singulier et un brin rebelle. 😎
Sur la page “notre agence”, ainsi que sur les autres pages du site, les photos font leur apparition avec de jolis filtres à l’effet un peu vintage qui viennent ajouter une petite touche supplémentaire à l’univers graphique. 😍
Globalement, rien n’est aligné et la mise en page est assez peu conventionnelle, ce qui donne au site toute sa singularité et vient souligner la créativité de l’agence… Bref, on commence plutôt bien avec un très bel exemple conception de site ! 🙂
2. GESTION MIRO : arty, fluide et coloré… le combo parfait !
Embarquons maintenant dans l’univers arty et coloré de l’entreprise Miro, qui propose des services de courtage en impression.
Forcément avec un nom pareil 👨🎨, les développeurs du site avaient un peu la pression sur son rendu esthétique, et force est de constater qu’ils ont largement relevé le défi ! 😍
Dès l’ouverture de la homepage, on est immédiatement transporté dans un bel univers créatif avec des formes colorées en mouvement, mêlées aux syllabes MI et RO de la marque qui glissent et se superposent… ↔️ Au-delà d’être un peu hypnotisant, c’est vraiment joli et très classe ! 😎
La petite phrase descriptive en haut de page, bien quelle soit minuscule, attire assez vite le regard (peut-être parce qu’elle est étonnement petite justement 😉) et permet de savoir tout de suite ce que propose la marque. Et ça, crois-moi, c’est très bien vu, car certains sites web ont tendance à nous laisser dans le flou et à ne pas annoncer suffisamment tôt de quoi il est question, ce qui peut vite décourager les visiteurs… Encore un bon point pour Miro ! 🤓 👍
En scrollant un peu plus bas, on arrive ensuite à de grandes sections de textes avec une police d’écriture beaucoup plus grande cette fois, ce qui crée un bel effet de surprise et donne du rythme à la page. 🎵
Puis apparaissent des encadrés bleus qui se superposent au fil du scroll pour dérouler la méthodologie de travail de l’entreprise, ce qui est particulièrement agréable pour l’utilisateur, puisque cela fluidifie et allège la lecture. 👍
Comme tu peux le voir ici, le fait de proposer les contenus par petits fragments est beaucoup moins rébarbatif qu’étaler de gros pavés de texte indigestes… 😵💫
En continuant à scroller, l’arrière-plan de la page devient noir et les contenus se mettent à défiler à l’horizontale (présentation des différents services) ce qui crée une rupture intéressante et permet de relancer l’attention de l’internaute. ⏰ 👀
Enfin, bien qu’il s’agisse d’un site “one page”, la présence d’un grand menu qui s’affiche sur le côté permet de fluidifier l’UX et de bien structurer la navigation, ce qui, là encore, est plutôt agréable… 😊
3. HEVREST : un site corporate avec une belle pointe de fun
Changeons maintenant d’univers avec le site d’HEVREST, une société spécialisée dans l’investissement locatif. 🏘️
La première chose que l’on remarque en arrivant sur sa page d’accueil est le joli travail effectué sur la typo du texte d’accroche avec des variations au niveau de sa graisse, de son inclinaison et de sa couleur qui permettent de mettre en exergue les informations clés et d’apporter un peu d’élégance et d’originalité. ✨
Une originalité que l’on retrouve également à travers ses boutons inclinés qui apportent une jolie touche de fun à cet univers plutôt corporate. 😄
Le choix de la couleur bleue permet de contrebalancer et de garder un côté sérieux, professionnel et rassurant malgré tout. 💙
On notera également la jolie animation avec ses formes éparpillées, comme “éclatées” qui viennent s’assembler lors du défilement (un peu façon Tetris) pour former une représentation plus ou moins abstraite qui évoque une maison (secteur immobilier oblige), voire une montagne (avec un nom d’entreprise pareil, ça reste cohérent après tout ⛰️😉).
Le choix du symbole “+” qui ressort bien parmi les autres formes vient quant à lui évoquer les gains offerts par l’investissement locatif. 📈
Un peu plus bas, le site nous détaille le déroulé des prestations dans une section encadrée avec un défilement horizontal assez subtil. Un système plutôt intéressant pour alléger le texte et ne pas tout afficher d’un bloc. 👍
Les photos, quant à elles, sont affichées de travers, ce qui nous rappelle le petit grain de folie également présent sur les boutons. 👌
Dans cette même logique, tous les éléments en bas de page sont eux aussi affichés de biais avec un petit mouvement sur le côté au passage de la souris (plutôt sympathique n’est-ce pas 🙂).
Enfin, mention spéciale pour la page “nous connaître” avec son très bel effet de mouvement sur l’arrière-plan qui représente d’abord une vue satellite, puis une vue “plan” de leur secteur géographique. 🗺️
Bref, on est clairement sur un sans fautes avec une belle identité de marque et une navigation à la fois ergonomique, claire et ultra fluide. 👏
4. DHNN : une belle vitrine qui en met plein la vue
Pour une agence de design et de création numérique telle que DHNN, se créer une belle vitrine était indispensable pour montrer l’étendue de son savoir-faire en matière de création de sites internet et autres produits web. 🌐 Et à la vue de leur site, on peut dire que la mission est accomplie ! 🤩
Ici, tu remarqueras que, hormis les photos qui sont en couleur, les graphismes sont principalement en noir et blanc avec des touches de jaunes fluo (notamment sur les boutons) qui apportent une pointe de peps et une vraie personnalité à l’interface. 💛
De plus, la vidéo pleine page 📹 sur la home est particulièrement immersive avec un beau clip de présentation qui en met plein la vue et vient prouver l’expertise de l’agence dans la création graphique et la conception de solutions web.
Un peu plus bas, les animations 3D viennent renforcer cet effet en apportant une dimension technique et créative supplémentaire… 👌
Si les concepteurs du site ne dérogent pas à la règle avec des textes extra-larges, on trouve malgré tout beaucoup de matière et de nombreuses pages qui permettent de dérouler en détail les services proposés ainsi que les différentes industries touchées (ils s’adressent ainsi de façon personnalisée à chaque secteur d’activité.) 🤓
Pour alléger visuellement les pages web, les créateurs du site ont fait le choix d’utiliser un affichage en accordéon 🪗, qui permet aux internautes de ne dérouler que les informations qui les intéressent. 👍
Enfin, mention spéciale à la rubrique “contact” qui propose un système de formulaire assez original qui s’affiche au fur et à mesure, un peu dans l’esprit “Typeform”. ⌨️
5. Sarah Stroschein : un site minimaliste au branding ultra soigné
Après ces premiers exemples de sites internet plutôt denses et impressionnants, on passe à présent à un style plus épuré avec le site vitrine de la graphiste et directrice artistique Sarah Stroschein. 👩🎨
Si l’interface est plutôt conventionnelle dans sa forme et son mode de navigation, on est tout de suite happé par le visuel de ces jolies canettes qui s’animent à l’ouverture de la page, puis s’inclinent au passage de la souris. 😍 Au-delà de leur graphisme très classe et soigné, on apprécie tout particulièrement le petit effet de lumière qui suit le pointeur lorsqu’il survole les canettes. 🥫
Bien sûr, le plus flagrant sur ce site est l’identité de marque très forte qu’il vient refléter avec un vrai storytelling autour du nom de la designeuse et tout l’univers créatif qui en découle. ✍️
Les autres pages se présentent toutes en simplicité avec du texte et des photos de réalisation qui a elles seules suffisent à prouver la qualité de son travail. 👌
Au final, ce site vient nous prouver qu’il n’est pas forcément nécessaire de créer une usine à gaz avec plein d’effets en tous genres et qu’un branding original et cohérent peut suffire à faire la majorité du travail de conception. 😉 Si l’on ajoute à ça un petit effet dynamique et sympathique sur quelques éléments du site, cela peut amplement suffire à faire la différence et à réaliser un site unique, attractif et efficace. ✨ 🙂
6. Optique des entrepreneurs : une belle identité de marque pour un site simple, mais efficace !
Passons maintenant au site de l’Optique des Entrepreneurs, une jolie réalisation qui n’a pas nécessité de grands moyens techniques et qui pourtant, fait immédiatement son petit effet. 🥰
En arrivant dessus, on remarque d’abord la belle animation sur le logo ainsi que la jolie vidéo qui s’affiche en pleine page. C’est simple, mais ça crée tout de suite une belle ambiance. 👌
Sa page “historique” nous propose de suivre l’évolution de l’entreprise au fil des décennies avec un système d’affichage “texte – image” puis “image – texte”, en quinconce, qui permet d’alléger visuellement le contenu en offrant au regard un temps de respiration entre chaque section. C’est une pratique assez courante en webdesign et ce pour une bonne raison : ça fonctionne plutôt bien ! 😉
La page équipe, elle aussi, est très bien pensée avec ses portraits de profil, façon ombres chinoises apposées sur différents fonds de couleur. 🎨 Le rendu est très original et apporte une touche vraiment sympathique. 😊
Encore une fois, cet exemple nous prouve que pour créer un site web efficace, il suffit de quelques bonnes idées, d’une belle présentation et d’un peu de mouvement (vidéo, animations, etc). 🌀
7. The Dropstore : un faux site e-commerce conçu pour marquer les esprits
Penchons nous à présent sur The Drop Store, un site très particulier, puisqu’il s’agit en fait d’un outil de sensibilisation lancé par le ministère des Affaires étrangères néerlandais pour préparer les habitants à une éventuelle crise de l’eau. 🚱💦
Présenté comme une fausse boutique en ligne, ce dernier a pour particularité d’afficher des produits de première nécessité à des prix exorbitants pour montrer l’impact économique d’une potentielle pénurie d’eau. 💸
Au-delà de l’approche et de la visée du site qui s’avère très intéressante, la qualité de sa conception mérite aussi d’être soulignée. 👌
L’accroche en pleine page et la grosse goutte d’eau 💧 qui suit le trajet de la souris nous annoncent déjà la couleur… 😲
Le texte grisé qui devient noir et donc plus visible lors du scroll offre également une expérience utilisateur originale et très agréable. Les vidéos d’ambiance (vue drone sur un désert, eau polluée…) ajoutent à cela une dimension émotionnelle assez forte. De même pour les visuels chocs des produits dans leurs emballages plastiques absurdes avec des prix ahurissants.
Les fausses fiches de présentation avec leurs textes parodiques un peu provocateurs, la mise en scène des produits qui s’animent lors du défilement et les photos désolantes d’un monde en manque d’eau potable viennent elles aussi titiller la corde sensible des internautes… Bref, c’est un très bel exemple de design émotionnel avec un impact fort sur le public cible. 💘
8. AIMKO : une expérience immersive et hors-norme
On part maintenant dans un tout autre univers avec le site du studio créatif AIMKO spécialisé dans le design événementiel et la scénographie. 💫
Un site pour le moins atypique avec sa page d’accueil assez déroutante et qui se démarque notamment grâce à son arrière-plan à l’aspect tridimensionnel. 🧊 Ce côté 3D vient d’ailleurs rappeler la notion de design d’espace particulièrement importante pour l’agence. 👍
Dans cette sorte de quadrillage incurvé sont disséminés différents points, chacun correspondant à des projets récents. Cela donne un côté interactif assez ludique à l’arborescence du site. Une marque d’originalité qui rappelle l’ADN créatif de l’agence. 👩🎨
Mais ça ne s’arrête pas là ! Lorsque l’on passe la souris sur l’un de ces points, l’arrière plan se transforme pour laisser apparaître une vidéo pleine page derrière le quadrillage. Cette dernière offre un aperçu très soigné et ultra qualitatif des créations de l’agence et des ambiances assez folles qu’elle parvient à créer. Le bel effet visuel appliqué dans les marges (sorte de filtre avec des stries horizontales sur la vidéo) apporte un aspect encore plus immersif qui en met plein la vue. 🤩
Enfin, hormis les vidéos hautes en couleur, on notera également le côté épuré du site avec beaucoup d’espaces blancs et des polices d’écriture assez petites, dans un style “machine à écrire”. Un parti pris qui vient s’éloigner au peu de la tendance actuelle des maxi typos.
9. UPPERQUAD : un design web tendance, créatif et singulier
Encore un site qui ne risque pas de te laisser insensible !😍 Ici on retrouve une fois de plus nos fameuses maxis typos, mais aussi une profusion d’images créatives offrant un bel aperçu de toutes les références de cette agence web & branding.
Parmi ses spécificités graphiques, on notera, entre autres, les angles arrondis appliqués sur toutes les images et vidéos ainsi qu’un effet visuel de distorsion assez chouette et original au passage de la souris. Les variations de taille et les animations sur les typos contribuent, elles aussi, à renforcer cette personnalité de marque bien affirmée. 💪
Dans le même esprit, sur la page “services” on remarque la jolie frise avec une suite de mots clés affichés à la verticale et plein d’images qui s’affichent au passage de la souris, ce qui crée un effet d’abondance et vient souligner une imagination débordante. 💭
Autre particularité un peu plus bas : les titres qui se rétractent sur eux-mêmes pour mieux mettre en exergue les autres éléments textuels. 👀
On retrouve également l’alternance du noir et du blanc en arrière plan qui permet de casser la monotonie du scroll et de réveiller un peu les internautes. ⏰
Enfin, on peut également noter un portfolio ultra fouillé avec des vidéos de présentation très qualitative, des screenshots, des descriptions, des mockups pour valoriser le travail de graphisme effectué, de belles photos prises chez les clients, des schémas qui s’animent et tout un tas de détails hyper soignés. 😍 Ça en est presque étourdissant à la fin ! 😅
Du côté des textes, ils sont toujours très aérés, et s’affichent par petits paragraphes entourés de grands espaces blancs ce qui leur offre une belle lisibilité. 👍
10. TAG HEUER : tout en classe et en mouvement
Et pour finir avec tous ces exemples de sites internet, je te propose de faire un tour sur le site e-commerce d’une marque bien connue des amateurs de montres : TAG HEUER !
Maison prestigieuse oblige, tout a été pensé dans le moindre détail pour une expérience immersive et pleine d’émotion. 🥰
Et bien sûr, comme pour la plupart des sites web que nous venons de découvrir, cela passe en grande partie par la vidéo, avec différentes prises de vues toujours très classes. 👌
Comme on est sur un eshop, les produits font très vite leur apparition sur la page d’accueil avec la possibilité d’ajouter en 2 clics une montre dans son panier.
Sans surprise, l’UX (l’ergonomie du site) a été particulièrement bien réfléchie et la navigation est très fluide malgré un site internet riche en contenu avec de nombreuses pages.
D’ailleurs, le site dispose d’un méga menu (illustré avec des photos) pour accéder plus facilement aux différentes rubriques. 👍
Si la boutique en ligne est assez classique dans sa présentation, il y a eu un gros travail créatif sur la toute rubrique “Univers Tag Heuer” qui permet de bien mettre en valeur l’identité de la marque.
La page “notre histoire” par exemple s’appuie sur le cadrant d’une montre avec des contenus qui tournent dans le sens des aiguilles, à mesure que l’on fait défiler la page avec sa souris (les périodes phares de la marque se succèdent dans l’ordre chronologique). Le rendu et vraiment beau et cela rend l’historique de la marque beaucoup plus digeste pour le lecteur. 🤓
La page savoir-faire elle aussi est particulièrement bien conçu avec l’utilisation de vidéos interactives qui permettent à l’internaute de déclencher une action en faisant glisser le curseur sur l’image ou encore d’obtenir plus d’informations sur certains éléments de la vidéo… ℹ️
Bref, la marque nous embarque dans son univers jusqu’au moindre détail, et ça, on adore ! 🥰
Et voilà, chère Audacieuse Créative, notre petit voyage dans le joli monde du webdesign se termine ici ! (pour aujourd’hui 😉) J’espère que ces quelques exemples de sites internet t’aideront à trouver l’inspiration et que cela te servira lors de la conception graphique de tes futures pages web ! 🤗
D’ailleurs, tu le sais sans doute, mais tu n’es pas obligée de faire appel à un développeur pour créer un site internet. Tu n’as pas non plus à concevoir toutes les maquettes par toi-même rassure-toi. 😅 Eh oui, désormais il existe plein de super templates entièrement personnalisables et que tu peux adapter à ton identité visuelle et à tes besoins, aussi bien au niveau de l’arborescence que des fonctionnalités.
Crois-moi, créer son propre site n’a jamais été aussi facile (à condition de se former un minimum pour utiliser un CMS tel que WordPress par exemple). Au-delà de t’offrir un rendu professionnel, utiliser un template t’assure aussi d’avoir un site ergonomique, intuitif et en responsive design (adaptés à tous les supports). D’autant plus que la plupart des templates sont conçus avec de nombreuses options de personnalisation et de jolis effets interactifs (animations, transitions, etc.) ce qui te permettra de faire un site internet à ton image, vraiment unique et de qualité professionnelle. 👌
Certes, je ne vais pas te mentir, créer son site soi-même nécessite quand même un peu de travail, le temps de prendre en main son CMS (éditeur de site web type WordPress, Squarespace, Shopify, Webflow…), de choisir un template qui convient, de le personnaliser et d’intégrer tous ses contenus. 😉 Mais cela reste largement faisable (avec de l’huile de coude et de la patience), même pour une novice qui n’y connaît rien en développement web.
Aujourd’hui, les outils de création de site sont de plus en plus intuitifs, notamment grâce à l’arrivée du WYSIWYG (”what you see is what you get”) et des systèmes de glisser-déposer. Tu verras, créer son propre site est presque devenu un jeu d’enfant ! 😊
Le plus compliqué finalement va plutôt être de te créer une belle identité visuelle, d’imaginer ta stratégie digitale et d’optimiser le SEO de ton site pour bien le référencer avec des mots-clés pertinents. Mais ça, c’est une autre histoire… 😉
Tu manques de temps pour te lancer dans la réalisation d’un site et tu cherches une personne compétente pour t’accompagner dans ce projet ? Savais-tu qu’à côté de mes formations en ligne, je suis également graphiste et webdesigner freelance ? 🙂 Alors, la conception de sites ça me connaît ! 😆 N’hésite pas à jeter un œil à mes offres d’accompagnement et à me contacter si tu as des questions ! Je serais vraiment heureuse de t’apporter mon aide, que ce soit pour la création ou la refonte de ta vitrine sur le web ! 🤗
(N’oublie pas d’enregistrer cet article dans ton compte Pinterest ! 👇🏻)