Nouvelle collection de modèles de sélecteurs de langue par Digidop

Tous ceux qui ont déjà travaillé sur la conception d'un site web - ou qui y ont simplement réfléchi - le savent : il n'est pas facile de trouver le juste équilibre entre une conception belle et attrayante. Il n'est pas non plus facile de trouver un design qui offre une expérience utilisateur simple et efficace. Cela vaut pour tous les éléments d'un site web et, dans cet article, nous allons être encore plus précis en nous concentrant sur les boutons de changement de langue.

En plus d'être une solution de traduction de contenu web, Weglot permet également de publier un site en plusieurs langues d'un point de vue UX, grâce à un bouton de changement de langue. Une fois Weglot intégré à un site web, vous trouverez un bouton par défaut aussi simple qu'efficace. Mais si vous êtes créatif, vous aurez probablement envie de quelque chose de plus personnalisé. Dans ce cas, vous pouvez profiter de certains paramètres de base, utiliser des modèles, ou même concevoir votre propre bouton si vous maîtrisez l'art du CSS.

Dans cet article, nous allons jeter un coup d'œil à ces modèles de sélecteurs de langue, que vous pouvez trouver dans notre propre Switcher Gallery. Pour encore plus d'options, jetez un coup d'œil à notre collection, réalisée en collaboration avec Finsweet.

À propos de la collaboration

Il y a plusieurs années, nous avons collaboré avec Finsweet, une agence web bien connue de la communauté Webflow , sur plusieurs modèles de sélecteurs de langue qui pouvaient être clonés et réutilisés sur n'importe quel site web Webflow . Il est même possible de l'utiliser sur n'importe quelle technologie. Le succès a été énorme, puisque ces sélecteurs de langue ont été copiés plus de 8 000 fois sur toutes sortes de sites !

Cependant, de plus en plus de concepteurs, et en particulier les équipes des agences web, ont commencé à sortir des sentiers battus en modifiant ou même en concevant leurs propres commutateurs afin d'offrir une expérience unique aux utilisateurs des sites web qu'ils développent.

Et c'est évidemment le cas de Digidop. Fondée en 2021, cette agence web est la première et la seule agence française spécialisée sur Webflow à détenir une triple accréditation : Webflow Expert, Client-First et Webflow Global Leader. Depuis, l'agence a réalisé plus de 60 projets web pour des clients de secteurs très variés et partage son savoir-faire à travers des contenus gratuits et une académie en ligne. Florian et Thomas, les deux fondateurs de l'agence, comptent parmi les partenaires les plus actifs de Weglot depuis le tout début. Ils ont partagé leur expertise de Weglot avec leur communauté via diverses documentations et vidéos, mais surtout ils ont toujours été prêts à fournir des retours pertinents sur Weglot, ce qui nous a permis d'améliorer continuellement notre outil.

Lorsque nous avons envisagé de proposer une nouvelle collection de sélecteurs de langues en collaboration avec une agence, nous savions que l'expérience et le regard critique et technique de l'équipe de Digidop mèneraient à une collaboration fructueuse.

Dans un premier temps, l'équipe de développement de Weglot et l'équipe de Digidop ont donc réfléchi à la manière d'améliorer l'intégration technique et le comportement des commutateurs afin de les rendre aussi transparents que possible. Ensuite, les talents artistiques et de design de l'équipe Digidop ont permis de concevoir 5 modèles de sélecteurs de langues, que nous vous présentons en détail ici.

5 modèles de sélecteurs de langue à utiliser sur vos sites web

Le minimalisme et les lignes épurées sont une grande tendance sur le web ces derniers temps. Et c'est exactement cette tendance que suit le premier jeu de sélecteur de langue de Digidop. Il s'agit d'un simple menu déroulant, assez similaire à celui proposé par défaut par Weglot, mais avec des lignes très simples. Facile à manipuler pour l'utilisateur, mais surtout très universel, il s'adapte à tous les designs de sites web.

Pour rester minimaliste en termes d'UX, voici le sélecteur de deuxième langue. Le nom de la langue, une flèche, et rien de plus. Ce bouton de choix de la langue est universellement accessible et n'encombrera pas le design de votre site. Simple, efficace et discret.

L'une des limites de ces conceptions très simples apparaît lorsqu'un site propose un grand nombre de langues. Le sélecteur de langues doit rester simple et ne pas ressembler à une liste de courses. Pour y remédier tout en conservant un design épuré, l'agence Digidop a développé ce troisième sélecteur de langue, accessible par un simple clic sur langue pour ouvrir une fenêtre de sélection de langue. Les menus sous forme de grandes fenêtres sont également une tendance récente sur les sites web. Ce sélecteur de langue est idéal pour les sites comportant de nombreuses langues.

En surfant sur le web ces derniers mois, vous avez probablement rencontré des sites avec très peu de couleurs, voire des sites bicolores avec de forts contrastes. Pour obtenir un résultat joli et efficace, il faut veiller à ne pas encombrer les éléments. C'est exactement le défi relevé par ce quatrième sélecteur de langue. Ici, vous choisissez votre langue en cliquant sur l'une ou l'autre, comme un interrupteur. Bien entendu, ce modèle fonctionne mieux si vous n'offrez que deux langues.

Dans le même esprit, certains sites poussent l'approche bichromatique, brute de décoffrage, en utilisant des polices de caractères de grande taille, parfois grasses, allant jusqu'à l'utilisation de lettres capitales. C'est ce que propose le site Citadium. Partant de cette tendance, l'équipe de Digidop a imaginé ce 5ème et dernier switcher. Il peut être utilisé pour 2 ou un grand nombre de langues et assure un accès facile à l'utilisateur.

‍

Ces commutateurs de langues sont conçus pour que vous puissiez les utiliser, jouer avec, ou même vous en inspirer. Vous pouvez les cloner et les personnaliser pour les adapter à votre design et à votre UX. Pour cette nouvelle collaboration, et sur la base des recommandations de Digidop, nous avons poussé cette collection un peu plus loin en vous offrant la possibilité de les réutiliser sur le front-end. Vous êtes également libre de les utiliser lors de la phase de maquette de vos projets.

Thomas Labonne, co-fondateur de Digidop, nous dévoile tous les secrets de cette collaboration et nous explique comment utiliser les sélecteurs de langues directement sur Figma dans cette vidéo. Vous trouverez ici le fichier Figma.

Ensuite, si vous souhaitez franchir le pas et réutiliser ces modèles de sélecteurs de langue directement sur votre site Webflow , vous trouverez ici tous les composants clonables, et je vous laisse avec Florian Bodelot, co-fondateur de Digidop, vous guider dans l'utilisation de ces sélecteurs de langue.

En conclusion

C'est maintenant à vous de profiter de la réutilisation de ces composants dans vos projets de conception de sites web. Nous tenons à remercier l'équipe de l'agence Digidop pour ses retours d'expérience, son support technique et ses compétences en matière de design. N'oubliez pas de consulter leurs contenus pédagogiques qui vous aideront à aller plus loin dans vos projets.

La conception de sites web étant en constante évolution, nous prévoyons de publier de nouvelles collections de sélecteurs de langue. Si vous avez des idées de design, n'hésitez pas à nous en faire part.