On me demande régulièrement des recommandations sur les frameworks d'interface utilisateur. Par "framework d'interface utilisateur", j'entends tout package tiers qui se concentre sur la fourniture de composants d'interface utilisateur stylisés. Ça comprend les frameworks CSS comme Bootstrap, et les bibliothèques de composants JS comme Material UI ou Ant Design.

Ma réponse à cette question prend généralement les gens au dépourvu : je ne les utilise pas, et je ne pense pas qu'ils devraient être utilisés. 😅

Pour être clair, je n'ai rien contre ces outils, et je pense qu'il en existe des cas d'utilisation valables. Mais j'ai vu trop de développeurs se jeter sur ces outils avec des attentes irréalistes quant aux problèmes qu'ils veulent résoudre ou à la facilité avec laquelle ils vont pouvoir créer des applications.

Dans cet article, je vais expliquer pourquoi vous n'avez probablement pas besoin de ces outils. Je vous ferai également part de quelques-unes de mes stratégies pour créer des applications d'aspect professionnel sans avoir de formation en design.

L'attrait des frameworks

Les raisons d'opter pour un framework d'interface utilisateur sont nombreuses. Voici les trois plus courantes que j'ai constatées :

1. Les développeurs veulent que leur application/site ait une apparence soignée et professionnelle, et ces outils fournissent des composants d'interface utilisateur joliment conçus.
2. Ils veulent être rapidement opérationnels sans passer trop de temps à tout construire de zéro.
3. Ils reconnaissent que de nombreux composants de l'interface utilisateur, tels que les modales, les listes déroulantes et les infobulles, sont très difficiles à réaliser correctement, surtout si l'on tient compte de l'accessibilité, et ils veulent donc être sûrs de bien faire les choses.

Ce sont des souhaits tout à fait raisonnables, et je peux absolument comprendre l'intérêt de trouver une solution à ces problèmes. Mais dans certains cas, je pense qu'il y a un décalage entre les attentes et la réalité. Dans d'autres, je pense qu'il existe de meilleurs outils pour ce travail.

Entrons dans le vif du sujet.

Design professionnel

Cette première raison est peut-être la plus courante. Il y a des tonnes de développeurs qui veulent construire des choses, mais qui n'ont pas de formation en design. Plutôt que de passer des années à apprendre le design, pourquoi ne pas utiliser une bibliothèque qui fournit des composants magnifiquement conçus dès la sortie de la boîte ?

Voici le problème, à mon avis : le design, c'est bien plus que de belles pièces.

Il y a quelque temps, j'ai reçu en cadeau une Nintendo Entertainment System LEGO :

C'était un kit vraiment amusant à construire. Si vous êtes un fan de LEGO, je vous recommande vivement de le découvrir !

Voici le point, cependant : j'ai pu construire ce modèle parce que le kit était accompagné d'un livre de 200 pages qui me disait exactement où placer chaque brique.

Si l'on m'avait donné toutes les pièces sans instructions, mon NES aurait l'air bien pire que ce qu'il est. Il ne suffit pas d'avoir des briques de haute qualité, il faut aussi savoir comment les utiliser.

Une bibliothèque de composants peut vous donner de jolis boutons, des sélecteurs de date et des widgets de pagination, mais c'est toujours à vous de les assembler.

Les blocs d'un système de conception comme Material Design ont été construits par une équipe de design talentueuse. Cette équipe comprend le framwork et possède les compétences nécessaires pour assembler les pièces en de magnifiques interfaces. Nous avons accès aux mêmes pièces, mais cela ne signifie pas que nous obtiendrons automatiquement les mêmes résultats.

Je me souviens avoir entendu un designer dire que seul Google pouvait créer des applications Material Design qui soient belles. L'App Store d'Android est plein d'applications qui utilisent les mêmes composants conçus par des professionnels, mais qui n'ont pas du tout l'air professionnels.

Un bon design comporte tellement d'aspects intangibles - des choses comme l'équilibre, l'espacement et la cohérence. Pour utiliser efficacement une bibliothèque de composants, vous devez vous mettre à la place des designers qui l'ont créée et comprendre comment ils sont censés être déployés.

De plus, aussi complète que soit la bibliothèque, elle ne contiendra jamais toutes les pièces dont vous avez besoin. Chaque application, chaque site Web est unique, et il y aura toujours des exigences particulières. Créer un tout nouveau composant qui se "fond" dans un système de design existant est vraiment très difficile.

Je ne pense pas que ce soit impossible - je suis même sûr qu'il existe des exemples d'applications d'aspect professionnel utilisant des styles tiers. Mais si vous êtes capable de le faire, c'est que vous avez probablement de sacrés talents de designer et que vous n'avez pas besoin de ces outils pour commencer.

Je compatis avec les développeurs qui veulent lancer un projet d'apparence professionnelle sans aucune sorte d'intuition en matière de design... Mais cela ne fonctionne généralement pas de cette façon, d'après ce que j'ai vu.

Gagner du temps

La raison suivante que j'ai entendue est que les frameworks d'interface utilisateur permettent de gagner du temps. Construire toute une bibliothèque de composants à partir de zéro est une entreprise importante qui peut être évitée en s'appuyant sur un framework d'interface utilisateur.

Il y a une part de vrai dans cette affirmation, mais d'après ce que j'ai souvent constaté, l'apprentissage c'est l'histoire du lièvre et de la tortue. Voici mon expérience :

J'ai passé quelques années à enseigner les principes fondamentaux du design Web aux étudiants du bootcamp de l'Université Concordia. Le programme se termine par un projet personnel de deux semaines. Les étudiants décident de ce qu'ils veulent construire, et c'est à eux de le faire. En tant qu'instructeur, je répondais aux questions et je les aidais quand ils étaient bloqués.

Nous avons remarqué une tendance : les étudiants qui choisissent un cadre d'interface utilisateur comme Bootstrap ou Material UI se lancent rapidement et font des progrès rapides les premiers jours. Mais au fil du temps, ils s'enlisent. L'écart entre ce dont ils ont besoin et ce que la bibliothèque de composants fournit apparaît progressivement au grand jour. Et ils finissent par passer beaucoup de temps à essayer de plier les composants à forme voulue.

Je me souviens d'un étudiant qui a passé tout un après-midi à essayer de modifier l'entête d'un framework CSS pour soutenir sa navigation. À la fin, le groupe a décidé de supprimer le composant tiers et ils ont construit eux-mêmes une alternative en 10 minutes.

Écrire vos propres styles me semble un peu comme écrire des tests : c'est un peu plus lent au début, mais cet effort initial est payant. À long terme, vous économiserez beaucoup de temps, d'énergie et de frustration.

Utilisabilité et accessibilité

La dernière raison que j'ai entendue est super valable. Le Web ne dispose pas d'une "bibliothèque standard" très solide lorsqu'il s'agit de choses comme les modales, les listes déroulantes et les infobulles. Construire une modale qui fonctionne bien pour les utilisateurs de souris, de clavier et de lecteurs d'écran est incroyablement difficile.

Les frameworks d'interface utilisateur ont un bilan mitigé en matière de convivialité et d'accessibilité. Certaines bibliothèques sont en fait assez bonnes à cet égard. Mais dans la plupart des cas, il s'agit d'une préoccupation secondaire.

Heureusement, il existe une autre catégorie d'outils qui se concentrent exclusivement sur la convivialité et l'accessibilité, sans prescrire un tas de styles.

Voici quelques-uns de mes outils préférés dans cette catégorie :

• Reach UI
  Un ensemble de primitives axées sur l'accessibilité pour React. Construit par Ryan Florence, co-créateur de React Router et Remix.
• Headless UI
  Un ensemble de composants d'interface utilisateur non stylisés et entièrement accessibles pour React et Vue. Construit et maintenu par l'équipe Tailwind.
• Radix Primitives
  Un ensemble de composants non stylisés et axés sur l'accessibilité pour React. Cette bibliothèque possède un ensemble très large de composants inclus, beaucoup de choses vraiment intéressantes !
• React ARIA
  Une bibliothèque de crochets React que vous pouvez utiliser pour construire des composants accessibles à partir de zéro.

Note : Je réalise que cette liste est très chargée en React ; il peut y avoir des outils similaires pour Angular, Svelte, et d'autres frameworks, mais je ne suis pas aussi actif dans ces communautés, donc je ne suis pas sûr. N'hésitez pas à m'en faire part sur Twitter si vous en connaissez !

Personne ne devrait construire une modale à partir de zéro en l'an 2022, mais cela ne signifie pas que vous ayez besoin d'un énorme framework d'interface utilisateur incluant des styles ! Il existe des outils qui résolvent précisément les défis d'accessibilité les plus importants tout en restant totalement agnostiques en matière de cosmétique et de styles.

Réfutations

Ça fait maintenant quelques années que je discute de ce sujet avec des développeurs, et j'ai entendu des réfutations assez convaincantes.

Familiarité

Tout d'abord, Daniel Schutzsmith a souligné que les outils "standard de l'industrie" comme Bootstrap ont un gros avantage : la familiarité.

Il est plus facile d'intégrer de nouveaux développeurs et designers lorsqu'on utilise des outils largement compris. Les nouveaux membres de l'équipe n'ont pas besoin de passer un temps fou à apprendre les tenants et aboutissants d'un framework personnalisé, ils peuvent être opérationnels dès le départ.

Du point de vue d'une agence qui prend de nombreux projets de court ou moyen terme, cela pourrait avoir beaucoup de sens. Ils n'ont pas besoin de démarrer chaque nouveau projet à partir de zéro. Et au fur et à mesure que l'équipe se familiarise avec l'outil, elle apprend à l'utiliser très efficacement.

Je n'ai pas beaucoup travaillé en agence, il m'est donc difficile de me prononcer. J'ai passé la majeure partie de ma carrière à travailler pour des entreprises de produits. Aucune des entreprises pour lesquelles j'ai travaillé n'a jamais utilisé un framework d'interface utilisateur. Nous avons toujours construit quelque chose en interne (par exemple, Wonder Blocks chez Khan Academy, ou Walrus chez DigitalOcean).

Outils internes

Je pense qu'il peut être judicieux d'utiliser un framework d'interface utilisateur lors de la création d'outils internes ou d'autres projets non destinés à la consommation publique (par exemple, des prototypes).

Si le but est de mettre rapidement quelque chose en place et de le faire fonctionner, et que vous n'avez pas besoin que l'interface utilisateur soit 100% professionnelle, je pense que cela peut être un gain de temps d'intégrer rapidement un tas de composants tiers.

Quid de Tailwind et de Chakra UI ?

Je ne considère pas Tailwind ou Chakra UI comme faisant partie de cette même catégorie de "frameworks UI".

Tailwind ne fournit pas de composants prêts à l'emploi, mais il fournit des garanties de design. Comme le dit Max Stoiber, Tailwind donne aux développeurs un ensemble de garde-fous. Vous avez toujours besoin d'une intuition de conception pour l'utiliser efficacement, mais ce n'est pas aussi intimidant que de concevoir quelque chose à partir de zéro.

Chakra UI fournit des composants stylisés prêts à l'emploi, mais ils sont très minimes et de bas niveau. La plupart du temps, ils ressemblent simplement à des versions plus agréables des paramètres par défaut de la plate-forme.

Ma bonne amie Emi m'a dit qu'elle aimait utiliser Chakra UI parce qu'il lui fournit un ensemble de valeurs par défaut raisonnables pour des choses comme les cases à cocher et les boutons radio. Elle est suffisamment douée en matière de conception pour éviter les pièges de la personnalisation, mais pas assez pour se sentir à l'aise pour créer tout un système de design à partir de zéro. Cet outil est le juste milieu idéal pour une personne dans sa situation.

Je pense que la différence est que ces solutions ne prétendent pas résoudre le design pour vous. Elles vous poussent dans la bonne direction, mais elles s'assurent que tout est personnalisable et que vous n'êtes pas enfermé dans une esthétique de design spécifique.

Ma suggestion alternative

Donc, si vous êtes un développeur solo qui veut créer des sites Web et des applications d'aspect professionnel, mais qui n'a pas de formation en design, que devez-vous faire ?

J'ai quelques suggestions.

Développez une intuition du design

Voici la mauvaise nouvelle : je pense que vous devriez consacrer un peu de temps à l'apprentissage de certains principes fondamentaux du design.

C'est l'une de ces choses pour lesquelles un petit peu suffit. Vous n'avez pas besoin d'aller dans une école d'art ou de consacrer des années à l'apprentissage d'un nouveau métier. Le design est difficile, mais nous n'essayons pas de devenir des designers de classe mondiale. Nos objectifs sont beaucoup plus modestes, et vous pourriez être surpris par la rapidité avec laquelle ils peuvent être atteints, ou par le chemin que vous avez déjà parcouru !

Même si vous n'êtes pas très intéressé par le design, je pense que développer une intuition de design est une compétence essentielle pour les développeurs front. Croyez-le ou pas, nous prenons constamment des décisions de design dans notre travail. Même à la maquette haute-fidélité la plus détaillée il manque toujours d'une tonne de contexte important.

Par exemple :

• Si nous avons de la chance, on peut nous donner 3 tailles d'écran, mais c'est à nous de décider comment l'interface utilisateur doit se comporter entre ces tailles d'écran.
• Les données sont rarement aussi propres qu'elles apparaissent dans les maquettes, et nous devons décider comment gérer les longs noms, les données manquantes, etc.
• Les états de chargement, de données manquantes et d'erreur sont souvent absents des maquettes.

L'un de mes super-pouvoirs en tant que développeur est d'avoir suffisamment de sens du design pour pouvoir déterminer ce qu'il faut faire lorsque je me heurte à une situation qui n'est pas clairement spécifiée dans le design. Au lieu d'être bloqué, en attendant que le designer réponde à mes questions, je peux me fier à mon intuition. Je n'y arriverai pas toujours, mais c'est généralement le cas (et lorsque ce n'est pas le cas, c'est une nouvelle occasion d'améliorer mon intuition en matière de design !)

Comment développer une intuition de design ?

Si vous travaillez avec une équipe de produit/design, vous disposez d'une ressource formidable ! Réfléchissez de manière critique aux conceptions qu'ils produisent. Posez beaucoup de questions — la plupart des designers seront ravis de vous aider à comprendre comment les choses sont structurées, et pourquoi ils ont pris les décisions qu'ils ont prises. Traitez-le comme un défi d'ingénierie. Vous pouvez apprendre les systèmes et les processus qui mènent à de bons designs.

J'ai écrit un article de blog il y a quelque temps, intitulé "Collaboration efficace avec le produit et le design". Il approfondit certaines de ces idées.

Si vous ne travaillez pas avec des designers (ou n'avez pas d'amis designers), vous pouvez essayer de faire de l'ingénierie inverse sur les produits que vous utilisez tous les jours. Prenez note de la façon dont les choses sont espacées, et des tailles de police utilisées. Avec un œil critique, vous commencerez à voir apparaître des patterns.

Volez

D'accord, même avec un sens aigu du design, il est toujours très difficile de créer un design à partir de rien. Alors, ne faisons pas cela.

Essayons plutôt de trouver des designs professionnels qui sont similaires à ce que nous essayons de construire. Vous pouvez faire des recherches sur des sites communautaires de designers comme dribbble ou behance ou utiliser des archives comme awwwards.

Par exemple, disons que nous créons une startup Uber pour chiens, et que nous essayons de concevoir le tableau de bord du conducteur. Une recherche sur Dribbble pour "dashboard" fait apparaître une tonne de designs intéressants :

Dribbble a tendance à être très "design", et vous pourriez donc vouloir utiliser des produits du monde réel pour vous inspirer. Ça fonctionne aussi !

L'astuce consiste à utiliser plusieurs sources. Si vous volez 100 % d'un design, c'est du plagiat et une mauvaise forme. Les gens vont le remarquer, et ça posera des problèmes.

Au lieu de ça, on peut mélanger 3 ou 4 designs ensemble pour créer quelque chose d'unique. Par exemple, je vais peut-être prendre le schéma de couleurs d'un site, la disposition générale et l'espacement d'un autre, et les styles de typographie du troisième !

Lorsque j'ai mentionné cette stratégie à de vrais designers, ils ont ri et m'ont dit que c'est ce qu'ils font tous. Je pense que c'est leur version de la "blague" selon laquelle les programmeurs passent la moitié de leur temps à googler des choses.

Cette stratégie ressemble à un véritable life hack. Elle ne se fait pas sans effort, et elle exige quelques compétences en matière de design. Les modèles que vous utilisez pour vous inspirer ne correspondront pas à 100 % à l'objet que vous construisez, et vous devrez faire appel à votre intuition pour combler les lacunes. Mais c'est de loin le moyen le plus rapide que j'ai trouvé pour créer un design d'aspect professionnel sans avoir de formation en design.

En résumé

En tant que développeurs, il peut être tentant de croire qu'un framework d'interface utilisateur nous dispensera d'apprendre quoi que ce soit sur le design. Malheureusement, cela ne se passe généralement pas ainsi. Du moins, pas d'après ce que j'ai vu.

Voici la bonne nouvelle : vous pouvez tout à fait créer un produit d'aspect professionnel sans être designer ! Avec quelques modèles de référence de haute qualité et un soupçon d'intuition en matière de design, vous pouvez construire quelque chose qui atteint le seuil du "suffisamment bon", où un produit semble légitime et "réel".

Il y a un autre aspect dont nous n'avons pas vraiment parlé : CSS.

Beaucoup de développeurs front ont du mal avec CSS. Moi aussi, j'ai eu du mal à m'y mettre ! CSS est un langage faussement complexe, et il peut souvent sembler incohérent et frustrant, même après avoir des années d'expérience avec le langage.

C'est un problème qui me tient à cœur. J'ai passé toute l'année dernière à me consacrer à plein temps à la création et au développement d'un cours CSS, afin d'aider les développeurs à gagner en confiance avec ce langage.

Il s'appelle CSS pour les développeurs JavaScript. Il est conçu spécifiquement pour les personnes qui utilisent un framework JS comme React ou Angular. Le cours vise à vous donner un modèle mental robuste afin que vous ayez une compréhension intuitive du fonctionnement de CSS.

Si vous avez l'impression que CSS est imprévisible, j'espère vraiment que vous le consulterez. Plus de 9.000 développeurs ont déjà suivi le cours, et les retours ont été extrêmement positifs.

Vous pouvez en savoir plus ici : css-for-js.dev.