Retour • 01/10/2024

Pourquoi le design est important pour les développeurs web ?

Écris par Melvyn Malherbe le 01/10/2024

Pourquoi le design est important pour les développeurs web ? Quel est le rôle d'un développeur web et pourquoi aurait-il besoin de cultiver des compétences là-dedans ?

Dans cet article, on va voir :

• Quelles sont les compétences que recherchent les entreprises chez un développeur web ?
• En quoi le design a son rôle à jouer dans le développement web ?
• Comment TU peux t'améliorer en design ?

Tu es chaud ? Alors exemple le bouton like :

Quelles sont les compétences que recherchent les entreprises chez un développeur web ?

Il y a plusieurs types d'entreprises et en fonction de celles-ci il y a des compétences différentes mais une d'elles est commune :

• Avoir une vision produit

C'est ce qu'on développe avec l'expérience et avec des projets. La vision produit va venir définir quelles fonctionnalités sont nécessaires, pour qui et pour quand.

Cette vision produit permet de transformer un problème en besoin :

• ❌ Problème : je veux pouvoir exporter les emails au format CSV
• ✅ Vision produit : trouver la solution pour exporter les emails au format CSV

La solution n'est pas unique, au contraire, voici des exemples :

• Rajouter un bouton qui lance l'export et qui envoie un email une fois que c'est terminé
• Rajouter un bouton qui lance l'export et qui fait attendre l'utilisateur jusqu'à ce que ce soit terminé
• Rajouter un bouton qui ouvre un dialogue pour choisir des filtres pour exporter les emails puis lancer l'export et envoyer un email une fois que c'est terminé

Bref, il y a plein de solutions.

Et ici c'est ton travail en fonction des contraintes techniques, du besoin produit et du problème utilisateur de résoudre ce problème.

La compétence bonus : l'UX

La vision produit peut parfois être liée à UX qui correspond à "User Experience".

C'est l'expérience que va avoir ton utilisateur, si je reprends l'exemple d'avant, imagine que pour diverses raisons l'export de la liste prenne 5 minutes.

Tu comptes sérieusement faire attendre ton user 5 minutes sur la page ?

Peut-être que oui (ça dépend de la vision produit), mais pour offrir une meilleure UX il y a des chances que tu lui dises :

Hey, tu peux quitter la page, je t'envoie le lien de téléchargement dès que l'export est prêt.

Ici on définit l'expérience utilisateur. Ceci est généralement fait par des "Product Owners" puis par des "UX/UI Designers" qui définissent tout ça.

Mais il y a des cas où ce sera ton rôle de le faire. Les entreprises attendent de toi un minimum de vision produit surtout quand tu es développeur front-end.

Exemple, dans mon entreprise on avait un "back-office" et celui-ci était développé par les développeurs en interne, aucune ressource design n'était mise sur ce projet.

Résultat ? Le back-office était horrible, (car c'était les développeurs backend qui l'avaient fait).

Mais ici on peut voir l'importance de ces compétences.

Startup ou SaaS

Dans une startup ou un SaaS, ces compétences deviennent d'un coup beaucoup plus importantes, carrément obligatoires.

Avoir une vision produit et une vision produit va te permettre d'être un développeur plus opérationnel.

Surtout quand on parle de design :

• respecter la charte graphique du SaaS
• savoir créer des composants "intelligents" et bien faits
• être capable de faire des interfaces qui rendent l'expérience utilisateur meilleure

Ce sont devenus des pré-requis dans ce genre de boîte pour des profils de développeurs web.

En quoi le design a son rôle à jouer dans le développement web ?

La réponse est simple... en développement web on passe notre vie à faire des interfaces.

On ne fait que ça finalement non ?

Alors imagine-toi un développeur qui fait constamment de mauvaises interfaces qui ne donnent rien ce serait quand même dommage ?

Pourtant c'est ce que la majorité font, ils ne prennent pas le temps de se former sur ces sujets-là et pourtant c'est essentiel.

Comment TU peux t'améliorer en design ?

Le design n'est pas très artistique en soi, on peut avoir une vision très cartésienne de celui-ci. Il y a des règles simples à suivre comme :

• Respecter la hiérarchie des éléments
• Avoir des espaces cohérents
• Utiliser des couleurs contrastées
• etc...

Ces concepts sont simples, et une fois suivis permettent à n'importe quel site d'avoir un look plus professionnel.

Pour ces concepts-là on a la chance d'avoir TailwindCSS et tu as encore plus de chance car j'ai créé un cours TailwindCSS + Les concepts de design de base pour les développeurs web que tu peux avoir gratuitement ici :

Mais sinon, il y a quelques techniques pour toi.

Sois attentif, regarde vraiment

À partir de maintenant, en tant que développeur web il faut vraiment prendre le temps de regarder les sites et analyser ce qui se passe.

C'est essentiel et ça te permet de comprendre plein de concepts presque automatiquement !

On passe notre vie entière sur des sites, pourquoi pas le rentabiliser ? Tu as juste à regarder et screenshot tous les sites que tu vois... attends c'est le point 2 ça !

Screenshot tout

Il va être tout de vouloir tout screenshot pour pouvoir comprendre ce qui se passe sur les sites que tu visites.

Moi j'ai un dossier, des applications où je fais plein de screenshots de landing pages que j'aime bien ou de certains éléments pour y revenir plus tard.

C'est avec ce genre de ressources que tu vas avoir une meilleure vision design.

Créer des applications

Finalement pour avoir une vision produit, créer des applications, c'est tout.

Soit tu es en entreprise et tu crées tout le temps une application, soit tu peux faire tes propres projets. C'est avec ce genre de projet que tu vas vraiment monter en compétence.

Conclusion

Je pense sincèrement que tous les développeurs fullstack et frontend devraient mettre plus d'effort sur leur formation en Vision Produit + UI + UX !

Je pense aussi que Tailwind peut vraiment beaucoup aider, contrairement au CSS.. Surtout que maintenant il y a des outils géniaux comme flexbox css qui simplifient énormément la vie.

Mais finalement, j'ai surtout un cours gratuit que tu peux retrouver sur tous ces sujets juste ici :