La création de wireframes pour la version mobile peut être complexe en raison des différentes tailles d’écran.
Sans un design adapté, le contenu peut devenir désorganisé et peu attrayant sur les appareils mobiles.
Ce guide vous montre comment utiliser Figma pour concevoir des wireframes mobiles responsifs grâce à des grilles et constraints.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
On continue toujours cette partie concernant le design des wireframes sauf que dans ce chapitre nous allons nous intéresser à celui de la version mobile.
Grilles de repères pour wireframe mobile
Comme avec le wireframe de la version web, avant de commencer à créer notre wireframe, nous allons d’abord placer les grilles de repères dans notre frame. Mais vu qu’on n’a pas encore de frame pour mobile, nous allons commencer par là.
On a dit plutôt qu’on allait faire un design responsif, pour pouvoir entrer dans cette thématique nous allons construire le wireframe de la version mobile à partir de la version web en dupliquant la page d’accueil.
Sélectionner ensuite le deuxième frame dupliqué et cliquer sur Frame > Choisissez le modèle que vous voulez.
Pour ma part j’ai choisi celui de l’ iPhone 14 & 15 pro max, mais vous êtes libres de choisir un autre modèle.
Maintenant, supprimer l’ancienne grille que l’on a créée et ajouter une nouvelle qui s’adapte aux nombres de pixels du frame.
Wireframe mobile : page d’accueil Figma
Les colonnes une fois en place, nous allons maintenant pouvoir designer le wireframe de la version mobile. Pour la page d’accueil, reprenons ce qu’on a déjà créé récemment et décocher la case clip content pour vous permettre de voir facilement les manipulations que l’on va faire par la suite.
À présent, essayons de regrouper tous les blocs d’élément que l’on veut afficher pour la version mobile, vous êtes peut-être un peu confus pour le moment, mais vous allez comprendre par la suite.
Regrouper le tout comme ceci :
Suite à cela, nous allons devoir transformer chaque groupe en frame pour que les éléments à l’intérieur puissent être redimensionnés plus facilement quand nous allons appliquer des constraints à ces derniers. Ce que nous allons faire, c’est sélectionner chaque groupe puis suivez le guide ci-dessous.
On va maintenant aborder un autre sujet, celui des constraints.
Pour mieux comprendre tout cela, rien de mieux qu’un exemple. Pour le groupe nommé Texte, je veux que ce dernier soit toujours en haut et au milieu de mon frame, je vais donc faire les modifications suivantes :
Pour le reste des blocs d’élément, on va procéder ainsi :
Pour les logos : à gauche et centré sur la page
Pour la photo : ça sera bien centré au milieu
Pour le background : toujours au milieu
Après, nous allons sélectionner certains éléments pour qu’ils puissent être redimensionnés quand on va toucher à leurs frames :
Pour chaque barre : dans le background, sélectionnez chaque barre et définissez son constraints à gauche sur scale pour qu’il soit redimensionné par rapport à la taille de son frame.
Pour le texte Superstar : dans le wireframe de la photo, mettez aussi le texte sur scale.
Pour le Texte : pareil pour la zone de texte contenant les informations du produit.
Pour le logo : faites aussi la même démarche pour chaque élément du frame du logo.
Prenez ensuite notre frame principal et allongez-le pour que l’on puisse disposez les éléments :
Réduisez la taille des blocs d’éléments pour qu’ils soient adaptés avec le modèle mobile :
Adaptez ensuite la taille des polices et l’emplacement des éléments :
Réajuster ensuite le tout comme vous le souhaitez pour obtenir le rendu :
Wireframe mobile : page concept Figma
Pour notre page concept, nous allons tout d’abord transformer tous les blocs d’éléments du wireframe web en frame comme nous venons de faire précédemment.
Après on en va définir chaque constraint de chaque frame :
Pour le concept : On veut que ça reste aligné en haut pour la hauteur et centré sur la largeur. Sans oublier de mettre le texte à l’intérieur sur scale pour la largeur.
Pour la description : Pareil que pour le concept avec la zone de texte mis sur scale pour la largeur .
Pour le texte du newsletter : Sera aligné en bas sur la hauteur et centré sur la largeur. Avec la zone de texte mis sur scale sur la longueur et la largeur.
Pour le bouton : faire exactement la même chose que celui de la newsletter sauf qu’il faudra d’abord grouper le texte et le rectangle qui représente le bouton et mettre le groupe sur scale en longueur et en largeur.
Maintenant que c’est fait, dupliquer le wireframe et changer ce dernier avec le modèle du mobile choisi.
Placer les mêmes grille que ce qu’on a créé récemment puis ajustez la taille et l’emplacement du contenu et vous obtenez le wireframe voulu :
Wireframe mobile : page vote Figma
On reprend la même démarche que ce qu’on a déjà vu pour faire le wireframe de la page vote. Dirigeons-nous d’abord vers le wireframe version web de ce dernier et commençons par grouper le contenu en blocs d’éléments puis les transformer en frame.
Pour les constraints , vous pouvez suivre le tableau ci-dessous :
Pour le titre : On va le placer en haut et centrer sur la largeur.
Pour les 12 mois : Nous allons placer tout cela au milieu.
Pour les photos : Il faudra mettre chaque frame au milieu.
Pour la date : Il sera aligné en bas et au centré sur la largeur.
Dupliquez tout le frame et changez-le avec notre modèle comme nous l’avons fait pour la page concept.
Placez ensuite la grille, et adaptez la taille des polices et l’emplacement des blocs d’éléments.
Wireframe mobile : Gold Stripe Edition
Je ne vous la fais pas longue, on va encore une fois reprendre le processus qu’on a déjà fait avant. On revient sur le wireframe de la page Gold Stripe Edition et on groupe le contenu en bloc d’élément puis les transformer en frame comme ceci :
Mettez ensuite les constraints pour chaque bloc :
Pour le titre : On le laisse en haut, mais centré sur la largeur.
Pour la description : On va le centrer au milieu.
Pour la photo : Pareil, on le place au milieu.
Pour les bandes : On va placer leur groupe aligné en bas, mais centré sur la largeur tandis que chaque bande à l’intérieur sera placée au milieu.
À présent, on répète le processus que tout à l’heure en dupliquant le wireframe et en transformant celui-ci par le modèle mobile.
Pour finir, placer la grille et ajuster le contenu selon votre goût.
Wireframe mobile : page Adiclub Figma
Passons ensuite à la page Adiclub pour transformer le wireframe en une version mobile. Pour cela, on va d’abord commencer par grouper en blocs d’éléments puis les transformer en frame comme tout à l’heure. Vous devriez avoir ceci sur votre calque :
Pour chaque bloc d’élément, nous allons par la suite définir les constraints comme sur le tableau suivant :
Pour le titre : Ça sera en haut et au milieu.
Pour le texte : On va aussi mettre en haut et au milieu pour le frame. Tandis que pour la zone de texte à l’intérieur sera sur scale en hauteur et en largeur.
Pour le bouton : On va faire pareil que les deux blocs au-dessus avec ses éléments (texte + rectangle) en mode scale sur la longueur et sur la hauteur.
Pour les niveaux : Laissons tous les niveaux par défaut, à savoir en haut et à gauche.
Comme d’habitude on duplique le frame de la version web et on change le modèle par celui du modèle mobile.
Terminer en plaçant la grille et les éléments selon vos envies :
Wireframe mobile : footer design responsif
Pour terminer cette partie sur le wireframe mobile, nous allons designer le wireframe mobile du footer. Vous vous en doutez bien, on va d’abord grouper les éléments en bloc d’élément puis les transformer en frame.
Ensuite, pour les constraints , je vous propose le tableau ci-dessous :
Pour le titre : On va le placer en haut et centrer sur la largeur. Et pour les éléments se trouvant à l’intérieur du frame, on va mettre en scale de deux côtés.
Pour le logo : On va tout simplement centrer le frame au milieu. Et pour les éléments à l’intérieur en mode scale .
Pour la photo : Nous allons tout laisser par défaut.
Pour les mentions légales : Ça sera en bas et au milieu.
Dupliquer ensuite le frame et changer le modèle avec celui de la version mobile pour obtenir ceci :
Placer la grille, modifier ensuite la disposition et la taille des éléments selon votre goût :
Ici j’ai décidé de supprimer la photo, car j’ai constaté que cela surchargeait un peu le design alors qu’on est déjà arrivé sur le footer.
Ce fut donc la fin de cette partie sur le wireframe mobile où nous avons appris comment rendre les éléments graphiques responsives selon la taille du frame pour pouvoir passer de la version web vers la version mobile. Dans le prochain chapitre qui va suivre, nous allons passer à la création des composants en commençant par celui de la version web.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer un wireframe mobile ?
Pourquoi utiliser des grilles pour le design mobile ?
Qu'est-ce que le système de constraints dans Figma ?
Comment adapter un wireframe web en version mobile ?
Quels éléments optimiser dans un wireframe mobile ?
Conclusion
En appliquant ces techniques de wireframe mobile, vous pouvez créer des designs responsifs qui s’adaptent parfaitement aux appareils mobiles. Comment envisagez-vous d’améliorer vos designs actuels en utilisant ces méthodes ?
