Est-il primordial pour un designer de savoir coder ?

Voici une bien belle question qui anime énormément de débats au sein de la communauté du développement web. “Ces maquettes sont irréalisables” scandent les développeurs. “Le client souhaite de l’originalité” rétorquent les designers.. Qui a raison ? Qui a tord ?

Ce débat ne mérite pas selon moi d’exister. Chaque métier à ses spécificités, ses contraintes et surtout ses méthodes de pensées : créative pour les designer, fonctionnelle pour les développeurs. Pourtant, il est essentiel pour chaque partie de jouer en équipe s’ils veulent mener à bien un projet. C’est pour cela qu’il est grand temps que la hache de guerre entre designer et développeur, soit définitivement enterrée.

Revenons aux bases : UI / UX, les notions principales du designer des temps modernes.

Si vous avez côtoyé au moins une fois un designer, vous avez forcément entendu parler de ces termes. Dans le jargon de la conception web, ils correspondent tous deux à l’interface utilisateur (UI) et l’expérience utilisateur (UX). Souvent confondues à tort, nous allons voir ensemble quelles notions se cachent vraiment derrière ces abréviations.

Une Interface Utilisateur intuitive, attrayante et unique

Tout d’abord l’UI, c’est le lien qui permet de communiquer entre l’humain et la machine. Elle va nous permettre de naviguer et d’exécuter des commandes de façon simple et intuitive. Quand je vous parle d’interface, j’imagine que vous pensez à une application telle que Facebook ou Instagram. Mais en fait, il existe des milliers de types d’interfaces que l’on utilise au quotidien. Que ce soit un téléphone, un ordinateur, une montre, une borne, un tableau de bord… Un des gros avantages du XXIème siècle, c’est d’avoir rendu ces interfaces digitales. Les designers ont donc beaucoup plus de possibilités pour adapter chaque interface en fonction de son format, et de l’harmoniser avec la charte graphique du client. Quelle couleur choisir ? Quelle typographie utiliser ? Ils ont donc à leur disposition une très grande palette d’outils visuels afin de créer une interface intuitive, attrayante et unique.

Mais l’UI ne peut pas fonctionner sans une étude UX au préalable. Qu’une interface soit belle c’est une chose, mais si elle ne nous permet pas de réaliser une tâche de façon simple et intuitive, alors le designer n’aura pas su accomplir une de ses principales missions : celle de répondre à une problématique par le design !

(Pour ceux qui souhaitent un exemple, je vous laisse avec ce petit jeu qui vous démontre en quoi une belle interface associée à une expérience utilisateur catastrophique peut complément remettre en cause la bonne navigation sur un site web : https://userinyerface.com)

Quelles sont alors les notions principales de l’UX ?

Tout simplement, de concevoir une navigation simple, intuitive, et adaptée à la cible qui utilisera notre interface. L’essentiel des notions répondent à une question de logique. L’UX de nos jours et d’autant plus importante car la multiplication des formats d’affichages (on peut parler de responsive avec un site qui doit s’adapter sur une télévision, un écran d’ordinateur, une tablette, un smartphone, une montre…) et des modes de navigation rendent complexe la création d’une interface adaptative. Mais surtout il est à noté que l’UX évolue aussi rapidement que les tendances graphiques qui composent l’UI. Nous étions avant sur un courant d’UX Product centrics, c’est à dire que l’on se concentrait exclusivement sur la vente de ses produits sans se soucier de ce que ressentait l’utilisateur lors d’une conversion. Maintenant nous nous sommes tournées vers un courant d’UX User Centrics. Les marques étudient leurs différentes cibles pour leur proposer des solutions et services afin que le parcours de conversion soit le plus fluide possible. C’est donc une fois après avoir compris les enjeux et les attentes de sa cible, que l’on peut fusionner les recherches UX avec une UI intuitive pour proposer à un client une interface adaptée à ses besoins.

Comment fonctionne un site web ?

Changeons complètement d’angle pour découvrir ensemble les bases du développement d’un site. Naviguer sur internet se résume à un simple échange d’informations, un échange entre nous (le client) et le serveur. Nous utilisons un navigateur web pour envoyer une requête aux serveurs qui stockent et hébergent l’ensemble des sites et ressources web. Ils nous répondent en nous renvoyant une page sur laquelle nous allons pouvoir naviguer. Mais comment est construite cette page ?

Site web statique vs dynamique, quelle est la différence ?

Quand il s’agit d’un site web statique, le serveur va renvoyer au navigateur plusieurs fichiers qui sont essentiels à l’affichage de la page. Tout d’abord les fichiers HTML qui contiennent l’ensemble du contenu textuel brut sans aucune mise en forme. Ensuite les fichiers CSS qui vont se charger de styliser la page et mettre en page les informations. Et pour terminer, les fichiers Javascript qui vont nous permettre d’animer ou d’interagir avec des éléments de la page. 

On retrouve aussi des sites webs appelés sites dynamiques. Lorsque le client commande une page au serveur, le serveur prépare cette commande avant de la renvoyer au client. Les informations renvoyées peuvent être différentes en fonction de chaque utilisateurs, c’est le cas de l’ensemble des réseaux sociaux qui nous renvoient une fil d’actualité personalisé en fonction de notre profil. 

Les PWA, le futur des sites internet ?

Au delà de ces sites, on peut maintenant retrouver de nouveaux types : Les Progressives Webs-App par exemple. Une PWA est un logiciel applicatif hébergé sur un serveur et accessible via un navigateur web. Elles permettent d’utiliser une application sans avoir à la télécharger sur son smartphone ou ordinateur. Un des gros avantages de cette technologie, et de pouvoir interagir avec des fonctions natives du téléphone (l’utilisation de l’appareil photo par exemple) et de proposer une navigation qui ressemble à celle d’une application normale. Le responsive du site web est donc beaucoup mieux conçu puisqu’il s’adapte à une navigation sur mobile aussi bien qu’une application téléchargée sur un store. (voici 4 exemples de progressives web-app et les raisons de leurs mise en production : https://www.novaway.fr/blog/tech/3-exemples-pwa)

De nombreux langages pour une infinie de possibilités !

Un site web peut donc être construit à partir d’une multitude de technologies et créé à partir de nombreux langages (HTML / CSS / Javascript / NodeJS / PHP / Angular…) . Ils nécessitent beaucoup de travail pour arriver à les maîtriser. C’est même pour cela que les développeurs sont spécialisés dans certains langages plutôt que d’autres. Chaque technologie à ses avantages, ainsi que ses inconvénients. Il est donc très important de peser le pour et le contre lors de la réalisation d’un brief client pour créer un site qui répond le mieux à ses besoins !

 

Et le webdesign dans tout ça ?

Le webdesign est une discipline qui évolue au milieu des deux mondes que l’on vient de voir. Le but d’un webdesigner étant de mettre en place une interface visuelle intuitive, qui réponde aux problématiques du client, du contenu, et du développement. Comme dit plus tôt, il doit répondre à ces enjeux par le design. Il est donc nécessaire pour lui de maîtriser parfaitement les notions d’UI et d’UX, d’être à jour sur les tendances graphiques actuelles, mais surtout, de connaître la technologie qui va être utilisée pour développer un site web. Sans cette dernière, le designer pourra alors réaliser un travail monumental et magnifique, mais peut-être impossible à coder par le développeur à cause des contraintes des technologies utilisées. Ce qui fait d’un webdesigner, un bon webdesigner, c’est sa capacité à transformer des contraintes de développements en atout primordial dans ses créations.

Les problèmes d’une mauvaise conception

Les multiples frictions qui peuvent survenir entre un designer et un développeur se trouve bien ici. Un designer qui conçoit une interface que le client adore, mais que les développeurs ne peuvent pas intégrer à l’identique compromet une grande parti du rendu final qui sera présenté au client. Il ne comprendra pas pourquoi il y a eu autant de changements entre ce qu’il lui a été proposé en maquettage, et le résultat qu’il retrouve sur son site.

De nombreux métiers spécifiques pour un personnel ultra-qualifié

Il existe bien sûr plusieurs types de développeurs qui ont chacun leurs propre rôles : On distingue généralement les développeurs Front-end qui se chargeront de mettre en place le contenu affiché lorsque l’utilisateur consultera la page, et les développeurs Back-end qui sont essentiellement dédiés à créer le lien entre le site, le serveur et la base de données. Dans les développeurs Front-end on retrouve même l’intégrateur, qui a pour rôle de construire la page web à l’identique des maquettes. Son but est de faire en sorte que l’affichage de la page soit aussi beau et fluide que celui proposé par le designer. Mais malheureusement, il aussi est dépendant des contraintes de la technologie utilisée pour développer le site.

C’est pour cela qu’ils est primordial pour un webdesigner, de comprendre comment fonctionne la création d’un site web, les avantages et les contraintes technologiques, et également comment est codé un site pour lui permettre d’adapter et de construire ses maquettes en fonction de chaque projet.

Comment comprendre un métier si nous ne l’avons jamais essayé ?

À l’image d’un graphiste dans le monde de l’imprimerie, si celui ci ne connait n’y comment fonctionne les principes de l’impression, n’y les contraintes qu’imposent ces machines, alors le résultat de sa maquette une fois imprimée risque d’être catastrophique. Et pour l’avoir vécu, il était important pour moi de connaître le vocabulaire de l’impression, et d’avoir essayé de mes propres mains d’imprimer mes documents. J’ai échoué plusieurs fois avant de comprendre mes erreurs lors de la création des maquettes, et dans l’imprimerie, cela ne pardonne pas puisque chaque erreur peut coûter de l’argent à une entreprise. Et une fois imprimé, il est difficile de se faire rembourser, c’était à moi de ne pas commettre des fautes de conception en amont de ma création.

Ce parallèle avec le monde de l’impression me permet de vous expliquer pourquoi il est primordial pour un designer d’avoir au moins mis une fois les mains dans le code !

Les outils évoluent

Certains désigner qui sont horrifiés quant à l’idée d’écrire une seule ligne de code pourraient alors se défendre avec un argument principal : Les outils actuels de conceptualisation d’interface permettent de créer des maquettes animées très avancées. Ils peuvent donc très facilement donner l’illusion à un utilisateur de naviguer sur une interface développée alors qu’il ne s’agit que de maquettes. Parmis ces outils on peut citer Adobe XD qui se concentre sur l’utilisation des commandes vocales, Figma et Sketch orienté vers la création de maquettes intuitives, et Invision qui offre la possibilité de créer des animations beaucoup plus poussées.

Ces outils permettent donc aux développeurs de voir en avance les maquettes et d’adapter leur positionnement quant à la technologie qu’ils devraient utiliser pour les développer. Mais travailler dans ce sens revient à travailler à l’aveugle. Le designer produit une maquette en espérant que les développeurs ne fassent pas trop de retours négatifs concernant la concrétisation en code. Et avant d’arriver à trouver un accord entre les deux parties, il peut souvent y avoir beaucoup de retours avant que les maquettes s’adaptent enfin aux contraintes technologiques.

Designer et développeurs doivent coopérer !

Il est donc primordial pour un webdesigner qui souhaite créer des maquettes répondant parfaitement aux problématiques UI et UX du client de connaître l’ensemble des technologies dont les développeurs disposent avant même de commencer à concevoir son design.

En premier lieu, il  se doit de faire une veille des évolutions graphiques actuelles ainsi que des avancées technologiques concernant le développement des sites web. Cela permettra d’enrichir sa créativité et de découvrir les nouvelles façon de créer une interface de nos jours.

D’autres part, il doit maîtriser le langage de son métier ainsi que le jargon utilisé par les développeurs. Les mots-clés utilisés sont souvent complexes et ont une signification bien précise. Une équipe sur la même longueur d’onde sera beaucoup plus productive que deux personnes qui ne se comprennent pas et prennent des initiatives personnelles en espérant que cela fonctionnera lors de la mise en production.

Et pour finir, je pense qu’un designer doit au moins une fois s’essayer au code. Que ça soit par le biais d’une courte formation, ou d’une accomplissement personnel, créer une page en HTML / CSS / Javascript permet vraiment de comprendre comment fonctionne la structure d’un site internet, d’utiliser les contraintes techniques à son avantage, et d’anticiper la création de ses éléments graphiques dans le but de les intégrer beaucoup plus facilement lors de la phase de développement. Il ne faut pas avoir peur du code, l’objectif n’est pas de devenir développeur, mais de connaître les réalités du métier.

Un bon webdesigner sera donc un designer capable de créer un design prêt à coder !