Pour le moment, nous avons utilisé le format Desktop quand nous avons créé notre wireframe sur Figma. Cela veut dire que notre wireframe est adapté pour les écrans d'ordinateur.
Mais qu'en est-il des mobiles ? À quoi notre site va ressembler sur ces supports ? Eh bien c'est le moment de se poser ces questions car nous allons maintenant adapter nos wireframes à différentes tailles d'écran ! 🎉
Prenez en compte les différents supports
L'objectif va être d'adapter la mise en page d’un site afin que le contenu s’adapte à l’écran, quel que soit le support utilisé, sans avoir à scroller (faire défiler avec la souris) pour chercher le contenu, ou devoir zoomer/dézoomer. Il est également important de garder au maximum le même contenu que sur desktop, sans avoir à trop en supprimer. Cela signifie que nos blocs de contenu (image et texte) vont s'adapter : ils vont devoir être réorganisés et redimensionnés en fonction de l'espace disponible sur l'écran.
Le développeur ou la développeuse fera alors tout son possible afin de créer un site responsive, c'est-à-dire que son contenu sera adapté à toute forme d'écran, et pas seulement une version adaptive, qui s'adapte à des tailles d'écran données.
Je n'ai pas envie de tout tester avec mon téléphone à la main. Alors, comment on fait pour voir si un site est adapté sur mobile, directement depuis son ordinateur ?
Eh bien, il existe plusieurs manières de faire. Je vous montre ça dans le screencast juste en dessous. 👇
Pensez votre maquette pour mobile et tablette
C'est le moment de revenir à nos outils révolutionnaires : le papier et le crayon. 🤓 Jusqu'à maintenant, nous avons utilisé un rectangle à l'horizontal pour créer nos wireframes. Eh bien, pour la version mobile, nous allons tout simplement changer le cadre de base pour un rectangle à la verticale. Si vous hésitez sur les dimensions, vous pouvez tout simplement poser votre Smartphone sur le papier, et dessiner autour.
Reprenez vos wireframes (je vous mets le lien juste ici). L'objectif est d'adapter le contenu pour qu'il rentre sur mobile.
On commence par la page d'accueil. Ici, nous allons pouvoir tout disposer dans une colonne. On prend donc les éléments, et on les redispose comme ceci :
Pas mal, n'est-ce pas ?
Mais au fait, on fait comment pour la navigation avec les liens du site ?!
Eh bien ici, on va faire un menu hamburger (ou menu latéral) ! Ça vous parle ?
Ce menu est représenté par une icône qui consiste en trois lignes horizontales parallèles. Ça nous fait ainsi penser à une liste (et aussi aux couches d'un hamburger). Quand on clique sur le bouton, on a le contenu du menu, permettant la navigation. Vous trouverez un exemple sur cette page !
Ce qui nous donne donc la navigation suivante :
D'ailleurs, ça donne quoi quand on clique sur le menu hamburger ?
Eh bien, profitons-en pour le dessiner. Il se déplie, donc l'icône change, et on a la liste des éléments de navigation 👇 :
On enchaîne maintenant avec la suite du contenu. Pour la section suivante, il suffit de procéder de la même manière en mettant le contenu à la verticale, et d'étendre la zone de texte :
On en profite pour faire la fin de la page d'accueil, et voilà !
Vu que l'écran sur mobile est plus petit, est-ce que ça veut dire qu'on doit tout réduire, y compris les textes ?
Pas exactement. L'idée d'un design adapté au mobile n'est pas non plus de garder la même mise en page, en réduisant juste les éléments. Mais effectivement, on pourra faire plusieurs tailles de police (font size), en fonction de la version sur laquelle on se situe (mobile ou desktop). Je vous reparlerai de ça dans la prochaine partie, où on fera une véritable maquette, avec un style associé.
Créez des wireframes pour mobile dans Figma
C'est maintenant le moment de créer une version mobile pour nos wireframes dans Figma. Comme toujours, on commence par la page d'accueil.
Est-ce que vous vous souvenez de la création de frames dans le chapitre précédent ? Eh bien c'est exactement ce que nous allons utiliser ici pour créer un écran mobile.
On crée donc une nouvelle frame. Pour cela, on clique sur le bouton "Frame" dans la barre d'outils horizontale, puis les options s'affichent à droite. On sélectionne Mobile, puis la dimension désirée, ici "iPhone 11 Pro / X", ce qui nous donne ceci : 👇
Maintenant que vous avez votre frame mobile, comme dans le GIF juste au-dessus, on en profite aussi pour renommer notre frame en "Accueil-mobile". Nous voilà avec la base de notre frame !
Dans le screencast juste en dessous, vous verrez la suite de la création de notre wireframe pour mobile, ainsi que l'utilisation des layout grids, un outil vraiment pratique pour disposer ses éléments :
C'est bien beau, on a nos deux écrans Desktop et iPhone 11 Pro / X, mais qu'est-ce qui se passe pour les écrans un tout petit peu plus petits, ou un tout petit peu plus grands ? On ne va pas designer un écran pour chaque résolution possible ?
Non non, rassurez-vous : tout d'abord ce serait bien trop chronophage, et en plus ce serait inefficace. L'idée, pour la phase de développement qui aura lieu après, sera de s'inspirer des écrans réalisés, et de permettre aux éléments de s'adapter entre les deux. Comme je le disais juste avant, le mieux sera de faire du responsive.
Exercez-vous
C'est maintenant à votre tour ! Pour vous faire la main, je vous propose de reprendre les pages menu et contact, et de les créer en version papier-crayon, puis de les intégrer dans vos wireframes Figma. Je vous mets ici le lien des maquettes avec l'écran mobile de la page d'accueil déjà créé. Alors, à vous de jouer !
Vous trouverez la correction de l'exercice dans les deux vidéos juste en dessous : le premier pour les wireframes papier, et le deuxième pour les wireframes sur Figma. Ça vous permettra de faire les wireframes papier, de regarder la correction, et ensuite de faire la deuxième partie de l'exercice ! 🎉 C'est parti pour les wireframes papier :
Vous pouvez télécharger ma proposition pour la page Menu et pour la page Contact. Maintenant, suivez-moi pour voir comment j'ai intégré ces wireframes sur Figma :
En résumé
Il est primordial de prévoir une version Mobile pour chacun de ses designs, afin d'adapter son contenu aux différentes tailles d'écran.
L'adaptation d'un contenu pour le mobile consiste à réagencer et redimensionner les éléments.
Figma permet de créer simplement des écrans mobile directement dans l'outil Frame.
L'outil des grid layouts permet de garder des proportions dans un design.
Le menu hamburger est un bon moyen d'afficher la navigation d'un site en version Mobile.
Alors, qu'est-ce que ça a donné les écrans mobiles, pour vous ? Comme vous le voyez, vos wireframes sont enfin prêts pour passer à la suite. Dans la prochaine partie, nous allons créer de véritables maquettes haute-fidélité. Mais avant, vous allez pouvoir tester vos connaissances dans le fameux quiz de fin de partie ! 🤓
