Le web design sur mobile : 15 exemples à suivre


Exemples de web design sur mobile

Ce n’est pas la taille qui compte. Petit ou grand écran, votre site doit être irréprochable. Et ce pour une bonne raison : l’usage d’Internet sur mobile continue de croître. En effet, nos smartphones et autres équipements portables sont les seuls appareils utiliser pour surfer sur le web pour 4 français sur 10 - un chiffre qui ne diminuera pas de sitôt.


Avoir une version mobile performante est donc essentiel lorsque vous créez un site internet. Non seulement cela permet d’améliorer l’expérience de vos utilisateurs, mais c’est aussi un moyen de remonter dans le classement Google depuis que l’index Mobile-First a été mis en place.


Pour vous aider à optimiser votre web design sur mobile, nous avons sélectionné 15 sites créés avec Wix. Ils sont tous premiers de la classe et utilisent les meilleures pratiques du secteur. Nous décryptons chaque fonctionnalité pour vous permettre de les appliquer sans difficulté à votre propre site.



Les meilleurs exemples de design mobile


01. S&W Beauty


Ce site fait partie d’un projet plus grand réalisé par Stefan Sagmeister et Jessica Walsh : Beauty. Il inclut une exposition et un livre, le tout célébrant l’esthétisme de façon générale. On peut dire que le message est passé grâce au visuel hypnotisant qui apparaît dès le chargement de la page.


S&W Beauty utilise un langage visuel cohérent : du noir, du blanc et des ornements en mouvement. Cependant, la version mobile diffère légèrement de celle sur ordinateur. Premièrement, les animations de la page d’accueil sont supprimées pour plus de clarté. De plus, le menu dispatché laisse place à un menu hamburger qui affiche les différentes sections sur l’intégralité de l’écran. Ces changements sont subtiles et ils permettent de garder l’identité du site tout en adaptant sa navigation pour les mobinautes. On n’en attendait pas moins de ces designers de renom.



Exemple design mobile : S&W Beauty


02. Charcoal


Charcoal est une revue d’art en ligne. Elle utilise une palette de couleurs automnale et présente son contenu sur mobile à l’aide de bandes. Chacune d’entre elles contient un élément visuel ou un paragraphe de texte. Ainsi, les utilisateurs peuvent faire défiler la page sans qu’aucun contenu ne se chevauche. Une fois arrivé en bas, une flèche s’affiche sur la droite pour vous permettre de revenir à tout moment au début du site.


Pour faciliter la navigation, on retrouve ici aussi un menu hamburger. Contrairement à notre exemple précédent, celui-ci s’affiche sur la partie droite du site uniquement. Ainsi, vous pouvez voir la page sur laquelle vous vous trouvez, ce qui est très judicieux au regard de la multiplicité de contenu du site.



Exemple design mobile : Charcoal


03. Piboco


Picobo est une application de livres numériques pour enfants. La version mobile s’ouvre sur une animation qui permet à l’utilisateur de patienter le temps du chargement de la page. Cette introduction est en parfaite adéquation avec le thème du site et son identité visuelle. On retrouve d’ailleurs ces personnages animés dans la section “Collection” du site.


Pour rester dans le thème, un point jaune est présent en bas de toutes les pages et vous donne accès en un clic aux informations de contact, au téléchargement de l’application et aux chaînes de réseaux sociaux. Voilà une bonne idée pour faire gagner de précieuses minutes à vos visiteurs.




04. AutoFleet


Le site mobile d’AutoFleet est riche en contenu. On retrouve à la suite des images vectorielles animées, un diaporama et des blocs de texte mettant en avant les fonctionnalités du produit. Malgré la complexité et la diversité des éléments, AutoFleet simplifie la navigation sur smartphone grâce à l’utilisation de bandes. C’est définitivement votre meilleur allié pour organiser votre contenu.


Le bouton d’appel à l’action sur la partie supérieure du site se démarque grâce à son dégradé de bleu et de vert fluo. Il va à l’essentiel et nous incite à rentrer nos coordonnées pour recevoir plus d’informations et pourquoi pas réaliser une vente.



Exemple web design : AutoFleet


05. SomiSomi


Ce site de restaurant spécialisé dans les desserts coréens affiche fièrement son image de marque. En effet, il présente son logo en grand et sur la partie supérieure du site. Simple design ? Que Nenni. Le logo vous permet de revenir à la page d’accueil à tout moment en un simple clic. C’est une pratique répandue sur le web. Si elle est utile sur la version ordinateur d’un site, elle est essentielle à l’expérience de navigation sur mobile.


On note aussi la présence d’icônes au milieu de la page pour expliquer le concept. Puisque vous n’avez pas beaucoup de place pour ajouter des paragraphes de texte sur un site mobile, les visuels sont une excellente façon de faire passer efficacement un message.


Enfin, profitant de desserts très “Instagramables” (on parle tout de même de crème glacée mauve dans un cône en forme de poisson), Somi Somi s’est assuré que son flux d’actualité soit intégré à sa page web. On met +1 pour les réseaux sociaux !



Exemple design mobile : somi somi


06. Balloon - Le film


Les badges des prix reçus, un lien pour voir le film sur YouTube et la liste des projections organisées : ce site a tout pour promouvoir un film efficacement.Sans parler de Wix Event qui vous permet de vous inscrire à l’une des séances.


Avez-vous remarqué l’aperçu de la bande d’annonce qui s’affiche sur la pleine largeur de l’écran en utilisant une boîte vidéo ? Vous n’avez qu’à cliquer sur le bouton “Lecture” pour voir ce qui vous attend sur la toile - la vraie cette fois-ci.



Exemple design mobile : Balloon


07. Sophie Brittain


Sophie est spécialisée en design UI/UX. Elle a donc forcément beaucoup de choses à nous apprendre. Elle sort des codes en nous accueillant sur son site avec un texte et non un visuel. Pourtant, elle capte facilement notre attention avec des couleurs et des animations amusantes sur un fond blanc épuré.


Sur le reste de son site, cette pro fait aussi dans la subtilité. Elle choisit un design très minimaliste pour faire ressortir des textes amusants : elle remplace l’icône LinkedIn par “Me being a pro” (moi, en tant que pro) et son numéro de téléphone par “You, calling me maybe” (on vous laisser fredonner la chanson).



Exemple design mobile : Sophie Brittain


08. Sparx


Voilà un site qui excelle dans l’art du storytelling. Avant de comprendre ce que fait Sparx, vous devez passer par une liste d’étapes vous expliquant la situation actuelle dans le secteur de l’enseignement (chiffres à l’appui). C’est seulement ensuite que l’entreprise vous apporte sa solution. Les visuels et les animations participent activement à nous plonger dans un monde à part.


Sur la version mobile de ce site fascinant, l’esprit est gardé, mais l’ensemble du contenu est réduit. On passe de 10 pièces de monnaie à une seule et de 10 éléments en mouvement à 1 seul. Sparx a trouvé une façon intelligente de faire passer le même message sur les deux supports.



Exemple design mobile : Ed5M


09. Atelier / Blanc


Le wedding planner et designer Romain Deligny nous offre un site sobre et distingué. Il utilise des couleurs chaudes et une police de caractères classique. Le tout est simplifié sur mobile pour proposer une navigation agréable aux utilisateurs.


Le menu horizontal se transforme en menu hamburger, les colonnes deviennent des bandes et même le flux instagram intégré a droit à une légère retouche : le diaporama est de mise pour rendre le contenu plus lisible. On appelle cela l’élégance à la française.



Exemple design mobile : Atelier Blanc


10. Hollie Fuller


Hollie Fuller fait fureur (sans mauvais jeu de mot) sur le web avec ses illustrations. Elle utilise la Wix Pro Gallery pour créer un portfolio qui s’adapte automatiquement sur petit écran. Ainsi, la grille de visuels devient une liste à faire défiler. De cette façon, vous pouvez profiter de chaque image pleinement.


Sur la page “À propos”, l’artiste ajoute une photo d’elle suivie d’une brève description ainsi que des magazines dans lesquels elle figure. Présenter l’humain derrière l’écran est un bon moyen de gagner en crédibilité et de travailler son personal branding.