17 juin - Grilles et layouts : la base du design structuré
Jour 17 d’apprentissage ! Il continue à faire chaud en Belgique et on avance : c’est l’avant-dernier jour de la formation aux principes de design.
#
Pratique du jour
Je n’ai pas pratiqué cet après-midi comme d’habitude. Ce matin, après la théorie, j’ai travaillé sur des designs de l’application ContactHive. J’ai essayé d’améliorer les visuels en me basant sur ce que j’avais appris et en mettant en pratique les concepts vus les jours passés.
J’ai travaillé avec Figma. J’ai appris comment mettre en place un style global sur Figma et comment créer des animations de workflow de transition basiques entre différents écrans.
##
Petite parenthèse tech
En plein milieu de l’exercice, j’ai craqué et pris l’abonnement Claude Pro. Je suis tombé amoureux ! J’ai déjà créé des styles d’écriture personnalisés qui, j’espère, m’aideront dans le futur :
- Professeur de code : il m’explique de manière très intentionnée comment fonctionne le code, sans nécessairement me donner du code.
- Expert UX/UI : un “Senior UX et UI” pour qu’il me donne des conseils.
- J’ai modifié mon interface, pris des captures d’écran et lui ai demandé ce qui était bien, ce qui ne l’était pas et ce qu’il fallait améliorer. J’essaie d’utiliser l’intelligence artificielle de la façon dont je veux l’utiliser : pas simplement du copier-coller, mais avoir une vraie discussion avec.
##
Projet back-end
Cet après-midi, j’ai travaillé sur un projet avec mes anciens collègues. Je m’occupe de la partie back-end sur Firebase avec Firebase Functions. J’ai dû résoudre quelques problèmes et implémenter une nouvelle fonctionnalité pour transférer des fichiers depuis le storage d’un endroit à un autre.
Ce n’est sans doute pas la meilleure façon de le faire, mais on crée des répertoires dans le storage par utilisateur et, sur base de ces répertoires, on donne des permissions pour que les utilisateurs soient cantonnés dans leur petit enclos.
J’ai donc passé une bonne partie de l’après-midi à résoudre des problèmes. Ce n’était pas du design mais c’est quand même du codage. Pour cette partie-là, j’utilise encore du “vibe coding”… bouuuuhhhh. Malheureusement, si je veux garder le même niveau et la même vitesse de développement, il faut absolument que je demande à un LLM.
#
Apprentissages du jour : Layouts et grilles
##
Espacement et consistance
Au niveau du Material Design, on conseille d’espacer les éléments de 8 pixels. Ce qui est important dans l’espacement, c’est de garder une consistance : on choisit une approche au début et on s’y tient.
Une densité de 4 pixels est idéale pour les petits éléments.
##
Marges et padding
- Marges : l’espace entre les éléments. Elles aident à garder un équilibre dans le design.
- Padding : les espaces internes dans un élément. Un des conseils donnés pendant la formation : ne pas mettre moins de 12 pixels pour du padding.
##
Keylines
Les keylines sont des lignes imaginaires qui nous aident à placer les éléments qui ne sont pas dans le layout grid.
##
Alignement
- Alignement à gauche et à droite : l’alignement naturel de lecture crée de l’organisation et de la propreté dans l’esthétique, et améliore la lisibilité. Idéal pour les longs textes.
- Alignement central : toujours recommandé pour les headlines et les boutons.
- Top alignment : fournit une consistance et un point de départ pour que les yeux de l’utilisateur puissent naviguer dans l’interface. Par exemple, une liste de cartes sur un site web.
- Bottom alignment : mieux pour établir un baseline visuel.
##
Aspect ratio
Les ratios recommandés sont 16:9, 4:3 et 1:1.
##
Liquid/Fluid Layout
Ce sont des layouts qui s’étendent et s’étirent. Les best practices pour faire de bons liquid layouts :
- Utiliser des pourcentages pour définir les tailles au lieu des pixels
- Toujours paramétrer un minimum et un maximum au niveau de la largeur
- Utiliser des fichiers SVG pour s’assurer que les images s’adaptent correctement
##
Design Grid
Le design grid comprend plusieurs éléments :
###
Columns et Rows
Ce qui est important dans le design grid, c’est qu’il y a des gutters et des margin grids.
- Gutter : l’espace entre chaque ligne et chaque colonne.
- Rule of thumb : un élément ne doit jamais terminer dans un gutter, il doit toujours rester dans un espace délimité par les lignes et les colonnes.
Au niveau des gutters, il y a trois tailles :
- Compacte : peut ajouter de la tension dans le design
- Cosy : équilibrée
- Confortable : plus aérée
###
Margin Grid
C’est l’espace entre les bords de l’écran.
###
Modules
Un module est un conteneur avec un ensemble d’éléments. Il faut se les représenter comme des LEGO : des éléments qui vont s’imbriquer dans le design grid mais qui ne sont pas nécessairement limités à une petite zone. C’est important pour la navigation de créer ces modules car ils vont l’améliorer.
##
Types de grilles
###
Fixed Grid
On garde un design strict peu importe la résolution de l’écran. Souvent, ce n’est pas la bonne façon de fournir une bonne expérience utilisateur.
###
Fluid Grid
C’est ce qu’on utilise dans le web : c’est dynamique. Les colonnes vont s’adapter selon la taille de l’écran.
###
Responsive Grid
On a deux comportements :
- Augmenter le nombre de colonnes après un breakpoint
- Selon les points d’ancrage, on peut avoir un stretch, comme les fluid grids
Conseils :
- Choisir fluid pour une approche de scalabilité proportionnelle parmi tous les écrans
- Utiliser responsive pour plus de contrôle
###
Baseline Grid
Plutôt utilisé pour le texte. La plupart des designers restent sur du 8px (toujours un multiple de 4).
##
Éléments fixes vs fluides
- Fixed elements : plus utilisés pour le branding (par exemple la barre top avec le logo)
- Fluid elements : quelque chose qui va changer selon la taille de l’écran (barre de navigation, panel latéral)
##
Tailles d’écran et distances de visibilité
Avant, il n’y avait qu’une seule taille d’écran ; maintenant, il y en a beaucoup plus. Ce que j’ai retenu au niveau des différentes tailles d’écran, c’est la distance de visibilité que les utilisateurs utilisent en général :
- Montre : ±40 cm
- Téléphones mobiles : ±30 cm
- Tablettes : entre 30 et 50 cm
- Smart TVs : 2 à 3 mètres
###
Smart TVs
Lors du développement d’interfaces pour Smart TV, il faut surtout tenir compte de la simplicité : le moins est plus. Utiliser des polices de caractère lisibles et assez larges. Il faut limiter le nombre d’étapes que l’utilisateur doit effectuer : généralement deux ou trois touches maximum pour arriver à son objectif.
###
Laptop et Desktop
Ce sont des interfaces où on doit privilégier les fonctionnalités qui augmentent la productivité : navigation fluide, layout efficace. La distance de vue : entre 50 cm et 1 m.
###
Kiosques en libre-service
On se retrouve un peu comme avec les Smart TV :
- Simplifier au maximum
- Avoir de gros boutons tactiles
- Minimiser l’écriture que l’utilisateur ait à faire
- Utiliser des animations simples
- Penser à l’accessibilité
- Faire un auto-logout à la fin
J’ai l’impression d’avoir écrit moins aujourd’hui, c’était un cours plus court, mais assez important je pense. Le grid, c’est quelque chose que je n’utilisais pas avant. Et j’ai vu que sur Figma, c’est super important à faire, surtout si on veut avoir un design qui ressemble à quelque chose.
À demain !