Une semaine maintenant que je travaille au sein de Sirup lab. J’ai posé mes bagages de développeuse mobile et revêtu des habits d’UX Designer. Et quelle pourrait-être la difficulté première que j’ai rencontré ? Prenez votre téléphone mobile et mettez-le à côté de votre ordinateur, voyez-vous la différence ? Les tailles d’écrans ne sont bien sûr pas les mêmes et les utilisations que nous faisons de notre smartphone sont différentes de celles de notre ordinateur, pourtant, il est possible de consulter les mêmes contenus. Ce contenu s’adapte à la taille de l’écran, c’est ce qu’on nomme le responsive design. En tant qu’UX Designer, je dois réfléchir lors de la conception d’une maquette à la rendre responsive pour qu’elle puisse s’adapter à tous les écrans.
Chez Sirup lab, pour assurer le design des maquettes on utilise Figma. Ce logiciel de prototypage nous permet de concevoir des designs responsives rapidement avec des outils tels que les frames, les composants et les contraintes. Je vais vous expliquer comment procéder pour vous permettre de produire des designs soignés et responsives tout en gagnant du temps.
Sur Figma, vous démarrez avec un canva. Sur cette surface vide, vous allez pouvoir apposer des frames (« cadres » en français) afin de contenir votre design. Imaginez-vous une boîte dans laquelle vous souhaitez ranger des objets, ou bien une autre boîte ! Il est tout à fait possible de nicher une boîte dans une autre. Il y a cependant certaines règles à prendre en compte dont je vous parlerai plus loin dans cet article.
Utiliser des frames s’avère pratique pour concevoir un prototype de la taille d’écran souhaitée. En outre, elles vous offrent la possibilité de découper votre design. Reprenons-notre boîte, à l’intérieur vous aimeriez mettre des ustensiles de cuisine ainsi que des livres. Il suffirait alors de nicher deux nouvelles boîtes à l’intérieur, une pour la cuisine et l’autre pour les livres. Ainsi tout est rangé sans se mélanger, et vous pouvez aisément les manipuler et même choisir de manipuler vos objets de manière indépendante à l’intérieur de vos boîtes.
Sur Figma, créer une Frame est très facile. Il vous suffit de sélectionner l’icône de création des frames dans la barre d’outil. Une fois ajoutée à votre canva, vous pourrez en redéfinir la taille puis commencer à concevoir votre prototype.
Vous savez maintenant créer des Frames. Vous serez d’accord qu’il est rare qu’un prototype d’application mobile ou web comporte seulement un écran, vous en aurez peut-être 20 à faire, peut-être 50 ? Et ces écrans pourraient comporter des éléments qui se répètent ? Je crois que vous allez avoir besoin des composants, des éléments réutilisables dans tout votre design.
Les composants ça peut prendre la forme d’un bouton « valider » qui va se répéter sur beaucoup d’écrans, ou c’est ce fil d’Ariane qui assure la navigation sur votre application, vous l’aurez compris, un composant prend la forme que vous voulez bien lui donner. Sa particularité ? Une fois créé, si vous dupliquer votre composant vous créez une instance. Si votre composant original (le master), vient à être modifié, toutes vos instances vont à leur tour adopter cette modification.
Il est important de retenir ce dernier point car il est la clé du gain de temps que vous obtiendriez sur votre conception mais également le verrou qui figerait votre design. Mon conseil est d’avoir ce point en tête lorsque vous commencerez votre prototype. Posez vos idées, définissez vos objectifs, avez-vous besoin d’aller vite ? Avez-vous besoin de tout personnaliser ? Peut-être une combinaison des deux. Et maintenant que vous savez faire des composants, vous allez pouvoir les ordonner dans des frames.
Vous avez des frames, vous avez des composants, vous êtes prêts pour faire un solide prototype. Et si on allait plus loin ? Rappelez-vous dans l’introduction, je vous parlais de responsive design. Votre prototype serait alors adaptable sur d’autres tailles d’écran. Et pour ce faire, il faut rajouter ce qu’on appelle des contraintes.
Les contraintes ce sont des ficelles invisibles qui vont permettre à votre prototype de s’adapter à un changement de format. Imaginez une boîte vide spéciale qui pourrait s’étirer dans tous les sens. Déposons maintenant une petite boîte à l’intérieur. Je veux que celle-ci reste fixée en haut, à gauche de ma boite étirable. Je vais donc attacher son axe vertical en haut et son axe horizontal à gauche. Maintenant si ma boîte étirable change de format, ma petite boîte elle est restée fixe.
Il y donc plusieurs choses à prendre en compte quand on pose des contraintes. La première serait les axes de fixation. Lorsque l’on veut fixer horizontalement son objet, on peut placer des contraintes à gauche, à droite, à gauche et à droite, au centre, sur les dimensions de votre objet. Lorsque l’on veut fixer verticalement son objet, on peut placer des contraintes, en haut, en bas, en haut et en bas, au centre, sur les dimensions de votre objet. Et vous pouvez poser des contraintes sur les deux axes. Les illustrations suivantes vous donneront un aperçu des différentes contraintes.
La deuxième chose à prendre en compte c’est la hiérarchie de vos éléments. Reprenons notre boîte étirable, plaçons une boîte rouge puis une boîte bleue à l’intérieur de la rouge. Fixons notre boîte bleue en haut, à gauche de notre boîte rouge. Étirons notre boite, rien ne se passe. Pourtant notre boîte bleue est bien fixée… à la boîte rouge. Cette dernière n’est fixée à rien. Pour qu’elle puisse suivre le mouvement il faut la fixer à la boîte étirable. Ainsi tous les éléments pourront suivre le mouvement que vous leur avez donné.
Les notions que j’ai abordées avec vous tout au long de cet article vous aideront à produire des designs responsives en peu de temps. Il faut les prendre en main et ne pas avoir peur de se tromper et de recommencer si votre prototype vous parait trop compliqué.
Si vous souhaitez aller plus loin, Figma dispose aussi de l’auto-layout. Une notion que nous aborderons peut-être dans un prochain article.
Nous envoyons une fois par mois nos nouveaux articles, tutoriaux et notre veille technologique
