Que tu projettes de créer un site web prochainement ou que celui que tu as déjà ait besoin d’une refonte, mon petit doigt me dit qu’un léger coup de pouce te ferait du bien pour passer à l’action ! 😉
Et quoi de mieux pour se motiver qu’une bonne dose d’inspiration webdesign ! Eh oui, c’est le retour de ma super série dédiée ! 🤗
Alors pour te donner un peu de matière et affiner tes idées, je te propose un petit tour d’horizon des dernières pépites repérées sur le web…
Voyons à quoi ressemblent les 10 jolis sites que j’ai sélectionnés pour toi et ce qui, selon moi, fait tout leur intérêt… Let’s go ! ✈️
1. Toggl : du sérieux… sans trop se prendre au sérieux 😜
Commençons par le site d’un outil que tu connais peut-être si tu t’intéresses aux questions d’organisation et de productivité : Toggl !
Si je devais résumer son style en 3 mots je dirais qu’il allie brillamment simplicité, efficacité et fun !
Comme tu le vois, ce site garde une structure assez classique et n’a rien de sensationnel en termes d’animation ou de design. MAIS, il accroche quand même beaucoup ! 🤩 Tout simplement parce qu’il y a cette pointe de fun distillée un peu partout qui crée un vrai dynamisme et une ambiance plutôt chaleureuse 🥰.
On le retrouve notamment à travers la typo penchée de certains mots ↗️ qui vient les mettre en exergue et rompre avec une certaine linéarité.
L’image de fond, assez insolite avec les flamants roses, apporte également cette note décalée qui vient tout de suite impacter le regard. 🦩
Dernier ingrédient de ce joyeux mélange : les icônes et illustrations un peu rétro et enfantines 👾, avec un léger aspect 3D qui apportent une touche ludique assez sympathique ! 🙂
En dehors de ça, tout le reste demeure plutôt sobre avec peu d’animations, pas de vidéo ni d’effet de parallaxe (= animation des éléments lors du scroll). On voit vraiment que le concepteur du site a essayé de trouver un juste équilibre pour illustrer le sérieux de la thématique (travail / productivité), le besoin d’efficacité et la convivialité, voire le côté cool de l’outil. 😎
Je trouve que cela colle assez bien avec l’ADN de la marque dont le but est de nous faciliter le travail et de le rendre plus agréable au quotidien (gain de temps, productivité, meilleure organisation…), tout en nous embarquant dans un univers agréable et surtout loin d’être austère. 😃
2. Adova Group : une ambiance douce et apaisante
On part maintenant dans un tout autre univers, un peu plus planant et aérien cette fois… 🌖
Rien d’étonnant quand on voit que la marque dont il est question propose des solutions pour améliorer la qualité du sommeil. 😴😆
Ainsi, ce site corporate nous emmène dans une ambiance assez lunaire… Ambiance qui ne va pas sans évoquer son logo où un croissant de lune apparaît discrètement dans le O d’ADOVA. 🌙
Le grand cercle qui semble flotter au milieu ⚪, l’illustration d’arrière-plan qui évoque un paysage légèrement vallonné, calme et désertique, le titre de quelques mots seulement, le côté épuré… Tout est là pour inspirer la douceur et la sérénité. 🧘♀️
L’effet gradient (dégradé), très tendance depuis quelque temps, vient lui aussi contribuer à cet aspect doux et délicat avec ses tonalités pastel qui apportent une belle touche de luminosité.
Outre les animations légères qui font bouger le paysage au passage de la souris, on se laisse aussi transporter par le changement de couleur au fil du scroll ⬇️, qui ne va pas sans évoquer l’évolution du ciel entre le jour et la nuit. 🌚
On notera aussi la jolie transition avec le cercle du haut de page qui plus bas se transforme pour servir de support aux infos chiffrées et ainsi les mettre en exergue. 🔢
Enfin, il y a un certain sérieux qui se dégage du site, avec plusieurs paragraphes de textes assez développés (mais suffisamment aérés) pour présenter l’entreprise et sa vision, ce qui inspire confiance au visiteur.
3. NIIKA : de beaux effets 3D, de l’interaction et beaucoup de créativité surtout !
Nous partons maintenant dans le monde créatif et coloré de Nikka, une agence australienne spécialisée dans le branding et la communication. 🎨
Et le moins que l’on puisse dire, c’est que sa home n’est pas banale ! 🤩
Avec le rose, l’illustration 3D, l’assemblage des formes, des lettres et des objets tout en fun et en élégance et qui laissent très subtilement deviner le nom de l’agence… Pas de doute, on est bien chez des créatifs ! 🙂
Ici encore, le texte se fait assez discret au début avec un simple message ingénieusement intégré dans l’illustration : “scroll on down” (faire défiler vers le bas). 👇
Alors forcément on s’exécute, on scrolle ; et un peu plus bas… c’est encore l’effet “waouh !” 😲 : On découvre alors une maxi typo avec un message fort 💪, totalement en phase avec l’expérience proposée (”se démarquer est facile, il suffit d’un bon design”) et des formes en 3D qui semblent flotter en apesanteur... Ça donne presque envie de les toucher ! 👆😆
L’UX (expérience utilisateur) est pensé pour que l’on puisse scroller en continu avec des mots-clés extra larges et en mouvement qui mettent en valeur les différents services de l’agence. Ici, on part du postulat que les images et le design sont tellement forts qu’ils parlent d’eux-mêmes et suffisent à convaincre à eux seuls.
Et cela continue avec la section “notre travail” qui mise avant tout sur des mockups originaux et quelques images pour mettre en valeur les projets réalisés.
Les transitions entre 2 images, au passage de la souris, sont assez singulières et donnent l’impression que le mockup se dissout pour laisser apparaître le suivant. 🤩
Enfin, si tu t’aventures plus loin sur le site, dans les autres rubriques, tu verras que là encore, rien n’est laissé au hasard et que tout a été parfaitement orchestré avec plein d’autres jolis effets… 😍Je te laisse les découvrir ! 😉
4. Miranda : une expérience atypique inspirée du print
Ici, dès l’arrivée, on oublie presque qu’on est sur un site internet. 🙂
Dans ce portfolio d’un directeur artistique néerlandais, tout évoque le print et notamment la presse 🗞️. Pour renforcer le côté journal, ce dernier a choisi un arrière-plan papier qui crée un effet de matière très agréable au regard. 👌
Dans cette logique, la plupart des éléments semblent fixes, sans animation, que ce soit au scroll ou au passage de la souris (à part en bas de page avec les témoignages).
La typographie avec sérif, rappelle elle aussi les codes de la presse papier 📰.
À l’inverse des autres sites vus jusqu’ici, il y a beaucoup plus de textes avec un joli jeu de contrastes sur la taille des typos 🔤 qui permet d’apporter du relief dans la lecture. 🤓
Mais ce côté figé relatif au print, se dissipe assez rapidement dès que l’on va un peu plus loin dans la navigation. Il suffit de cliquer sur un élément pour voir des effets de transitions dynamiques et originaux qui viennent prouver le savoir-faire de cet artiste pluridisciplinaire 👨🎨 ( notamment spécialisé dans l’art digital et le développement créatif).
Encore un bel exemple de webdesign, bien différent des autres sites web vus jusqu’à présent. 👍
5. Kombu : une navigation singulière pour un site qui va droit au but
Passons maintenant au joli site internet de la marque Kombu qui commercialise des boissons vivifiantes à base de kombucha (sorte de thé fermenté🧋). Là encore, on change totalement d’univers graphique ! 💫
Sur ce site e-commerce au look très vitaminé 🍊, on a fait le choix d’un UX design un peu original avec un défilement à l’horizontale lors du scroll.
Et comme tu le vois, pas de place au blabla sur la page d’accueil ! On va droit au but 🥅 en présentant tout de suite les différentes boissons sous forme de carrousel ➡️.
À côté de chaque boisson, le site nous propose 2 options : “ajouter au panier” ou “découvrez”. L’idée est vraiment de réduire au maximum le nombre de clics vers l’achat.
Côté webdesign, on retrouve bien sûr le code couleur de la marque qui évoque le fruit, la fraîcheur et la vitalité 🍊, mais aussi des formes très bien pensées avec notamment ces grandes lignes obliques ↗️ qui ajoutent une touche de dynamisme et de modernité 👌.
On notera également la chouette animation lors du défilement du carrousel avec un petit effet vague qui rappelle le côté liquide de la boisson 〰️.
Le bouton d’accès au menu, avec sa petite roue animée, est lui aussi plutôt original, tout en restant clairement identifiable, ce qui est plutôt bien vu. 🙂
Mention spéciale également pour le joli mix des typographies 🔠 avec une typo manuscrite très bien choisie (sympa le petit effet marker 😍) qui apporte une touche de fun et d’énergie et qui vient ajouter un peu de contraste à côté de l’autre typo sans sérif, plus classique (mais idéale pour faciliter la lecture 👍).
Si tu pousses un peu plus loin la navigation sur les autres pages du site, tu verras qu’il y a plein de détails très sympas comme l’affichage des boissons dans le méga menu avec un petit côté fluide sur les fonds colorés au passage de la souris, ou encore de jolies animations sur les arrière-plans des différentes pages. 😍
6. Orangina : un site gentiment secoué avec un bon zest de storytelling 🙂
Bon, là je crois qu’il n’est pas trop nécessaire de te présenter la marque, n’est-ce pas ? 😉
Son site vitrine en revanche, tu ne le connaissais peut-être pas ! Et à vrai dire, je trouve qu’il est plutôt chouette. 👍
Côté identité visuelle, pas trop de surprise, on reste bien dans le branding Orangina avec ce joli contraste de bleu et de jaune orangé très punchy. 🔵🟡
Le produit est tout de suite mis en avant et comme nous sommes sur un site corporate, les textes soulignent avant tout l’histoire de la marque et ses valeurs.
Ce qui est plutôt original sur la page d’accueil, c’est qu’elle est assez compacte avec finalement peu de scroll sous la ligne de flottaison. Il y a aussi relativement peu de texte et la page est plutôt conçue comme un méga menu qui mène aux autres rubriques du site. ➡️
La rubrique héritage, qui retrace toute l’histoire de la marque, est plutôt intéressante puisqu’elle permet de faire défiler une frise chronologique verticale ⏬ et de découvrir au fil du scroll les dates clés qui ont marqué son existence de 1935 à nos jours (avec de jolis effets d’apparition). On y retrouve des images et des vidéos d’archive qui viennent titiller nos émotions en jouant notamment sur la nostalgie. 🥰
La page produits, quant à elle, permet de mettre en avant toute la gamme avec les différentes bouteilles qui s’animent au passage de la souris (qui se secouent plus exactement, pour rester dans l’ADN de la marque 😉 ). Ici encore, la page sert surtout de menu et nous redirige vers les différents descriptifs produits. Bref, une fois de plus, l’efficacité est au rendez-vous !
7. Alma : un joli mélange de simplicité, d’élégance et d’efficacité
Et c’est reparti pour un tout autre domaine avec le site d’Alma, une solution pour faciliter le paiement en ligne sur les sites e-commerce (avec la possibilité de payer en plusieurs fois ou en différé).
Ici on retrouve une navigation plus conventionnelle avec une homepage à faire défiler à la verticale et qui, au fil des sections, met en avant les différents points forts et bénéfices apportés par la marque ✅.
On retrouve des témoignages 💬, des références, des call to action… Bref, des éléments assez classiques et bien connus des internautes.
Les textes, principalement faits de titres et sous-titres, sont clairs, concis et accrocheurs. 🪝
Les images qui alternent entre photos et illustrations 🖼️ sont très évocatrices et mettent en avant la simplicité de la solution et la satisfaction procurée 👍.
Tout est fait pour favoriser la clarté, ce qui colle bien avec la thématique assez sérieuse qui demande de véhiculer un message limpide et qui inspire confiance. 😊
Côté design graphique, les choix sont à la fois sobres, simples et modernes, avec un rappel du A du logo dans les formes utilisées (qui viennent joliment se mêler aux images).
Les designers du site ont aussi fait le choix de mettre en avant des chiffres clés, ce qui fonctionne bien avec le sujet traité (domaine financier) et permet de rassurer les clients potentiels avec des éléments tangibles. 👌
Le orange vif quant à lui apporte du dynamisme, de la modernité et une certaine gaîté. 🧡
Au niveau de la navigation, le site propose un système de méga menu là aussi très clair et ingénieux avec une petite accroche sous chaque titre de rubrique qui permet de mettre en avant les bénéfices clients et de comprendre en un clin d’œil ce que l’on va trouver sur la page 🔍.
Bref comme tu le vois, il n’y a pas forcément besoin de partir sur une mise en forme sensationnelle pour faire un site moderne, élégant et efficace 😉. Tout est avant tout une question de cohérence, de fluidité et d’harmonie. ✅
8. Mobile Club : un site cool et branché qui sait parler à sa cible
Intéressons-nous maintenant au site de mobile.club, un service de location de smartphone.
À peine arrivé sur la page d’accueil, on comprend tout de suite que la marque cible un persona plutôt jeune, branché et du genre très connecté 🤳.
Les éléments jaune pastel, associés à la photo d’un groupe d’ado avec leur smartphone et leurs vêtements flashy et multicolores donnent le ton et inspirent une marque plutôt cool et dans l’air du temps. 😎
Autre élément notable : le bandeau jaune qui défile en haut de page avec des éléments forts de réassurance (assurance incluse, livraison offerte, etc.) 👍.
Au-delà d’être original dans l’approche, ce choix graphique a également l’avantage d’être très efficace et de souligner des critères qui peuvent être décisifs pour les clients potentiels.
Ce petit bandeau revient également un peu plus bas, mais cette fois avec un slogan bien senti : “too smart to buy”.
Parce qu’aujourd’hui, les avis clients jouent un rôle essentiel dans la prise de décision, on trouve également la note Trustpilot qui vient conforter la crédibilité de la marque ⭐.
Et pour en remettre une petite couche, une section témoignages est également affichée en bas de page 💬. Le choix du bandeau défilant, là encore, donne un effet de profusion, idéal pour renforcer la confiance des clients potentiels. 👌
D’ailleurs, ce petit bandeau jaune flash donne une petite touche un peu rétro qui ne va pas sans rappeler la com des 80’s et que l’on retrouve un peu partout dans le style graphique de l’interface (cf. les badges new sur les smartphones, le style des icônes, les contours des tableaux…). 🙂
Au niveau du texte, ici aussi, pas de blabla 💬. La cible est habituée à scroller assez vite, alors il faut être efficace. Pour clarifier l’offre, on trouve une section “comment ça marche” un peu en dessous de la ligne de flottaison avec un système d’affichage en accordéon 🪗 qu’il suffit de “déplier” pour obtenir plus de détails sur les points qui nous intéressent 🔍. Ce système est intéressant pour donner des détails sans alourdir le design avec de nombreux blocs de texte. 😅
9. Babylone : une personnalité affirmée entre sérieux et créativité
On change encore de registre en nous intéressant maintenant au site web de l’agence de communication Babylon. Comme tu le vois, on commence à retrouver certains codes graphiques déjà observés sur les sites précédents. 😉 Le style un peu rétro, les lignes qui viennent encadrer les différentes sections, la maxi typo qui évoque un peu les titres de presse papier, le bandeau défilant “en savoir plus”… Tout ça doit te dire quelque chose. 🙂
Eh oui, l’inspiration en webdesign n’échappe pas aux tendances et il n’y a rien d’étonnant à ce que les designers web piochent leurs idées sur d’autres sites. 🌐 Le principal étant bien sûr de l’adapter à sa propre identité de marque. S’inspirer oui, copier jamais ! ❌
Revenons à Babylon ! 😆 Certes, le design graphique s’inscrit dans le courant actuel, mais le site n’en est pas moins singulier et très réussi avec un code couleur bien à lui, des messages forts et une ergonomie à la fois simple et efficace. 👌
On remarquera également les jolis filtres un peu sépia (basé sur les références couleur de la marque) qui viennent donner du caractère aux photos tout en créant une belle harmonie visuelle. C’est un moyen bien pensé de jouer avec la palette de couleurs de l’entreprise. 🎨
Ce qui est original également, c’est que certaines pages du site se voient attribuer une seule et unique couleur de la charte graphique (hormis la homepage et la page équipe), tout le reste étant en noir et blanc ce qui crée un joli contraste et apporte une certaine classe. 😎
Et pour sublimer le tout, le webdesigner n’a pas fait l’impasse sur les animations avec un bel effet sur l’apparition des typos ou encore sur les photos des membres de l’équipe. 🤩
Bref, encore une super source inspiration pour ton futur webdesign !
10. KMBCH : l’inspiration ultime pour ton webdesign 😍
Allez, tu reprendras bien un petit verre de Kombucha ! 😆🥤
Promis, ce n’est pas une obsession de ma part 🤪, juste une coïncidence !
Il faut croire que le sujet inspire pas mal les webdesigners 😆, car, encore une fois, ce site one-page mérite le coup d’œil, crois-moi ! 😍
Première impression lorsque l’on arrive sur la page d’accueil : un site coloré avec un design moderne et élégant, une belle photo packshot des 5 bouteilles de la gamme et un fond rose légèrement dégradé qui installe une ambiance à la fois douce et vitaminée.
C’est très beau, mais jusque là, la mise en forme reste assez classique tu me diras…
L’effet waouh se produit un peu plus bas, lorsque l’on commence à scroller 👇.
Dès lors, on voit les bouteilles s’animer en tournant sur elles-mêmes avec un léger effet 3D. 💫 Ensuite, une belle transition en fondu laisse apparaître la bouteille suivante, et ainsi de suite pour chacune des boissons de la gamme. 👍
À chaque transition, c’est une nouvelle couleur qui s’invite sur le fond et les éléments visuels, toujours en accord avec la couleur du packaging bien sûr. 🎨
En descendant encore un peu, on arrive sur une nouvelle animation qui fait tout de suite son petit effet avec les lettres du logo et les bouteilles qui défilent et s’entrecroisent ↕️ jusqu’à ce qu’une dernière bouteille aille gentiment se glisser dans le pack ! 😯 Et ça, c’est très bien vu ! 😍
Enfin, on notera aussi la mini vidéo un peu plus bas où, au fil du scroll, deux bras se rejoignent pour trinquer avec leurs KMBCH 🍻. Plutôt chouette n’est-ce pas ? 🙂
On voit vraiment qu’il y a eu un gros travail créatif autour de la mise en scène du produit et forcément, ça ne laisse personne indifférent… 🥰 C’est un bel exemple de design émotionnel ! 😉
Et voilà, nous terminons notre jolie visite dans le monde merveilleux du webdesign ! 🧡
J’espère qu’à présent les idées se bousculent et que tu as hâte de te lancer dans la conception graphique de tes pages web ! 🤗
Rassure-toi, tu n’es pas obligée de faire toute la maquette de ton site par toi-même. Il existe heureusement plein de jolis templates qui te faciliteront grandement le travail. En plus, la plupart d’entre eux sont aujourd’hui en responsive design (adaptés à tous les supports), avec plein d’options de personnalisation et de quoi proposer une belle interactivité (animations, transitions, etc.). 👌
Bien sûr, cela demande un peu de travail malgré tout, le temps de prendre en main ton CMS (WordPress ou autre), de choisir un template adapté à ton identité de marque et d’intégrer tous tes contenus. 😉 Mais cela vaut vraiment le coup, car tu auras ensuite un super outil pour communiquer, et surtout, un média qui t’appartient vraiment (ce qui n’est pas le cas avec les réseaux sociaux.)
Tu n’as pas le temps ni les compétences suffisantes pour créer un site internet par toi-même ? Savais-tu qu’en parallèle de mes formations, je propose également mes services de graphiste webdesigner freelance ? 🙂 N’hésite pas à jeter un œil à mes différentes offres d’accompagnement ! Je me ferai une joie de t’aider dans ton projet ! 🤗
(N’oublie pas d’enregistrer cet article dans ton compte Pinterest ! 👇🏻)