Bonnes pratiques pour la création d’une maquette facilement intégrable

La conception d’une page web a bien changé depuis les années 90 mais le web est toujours un monde de contraintes, les différents langages de programmation, le responsive, les normes d’accessibilité… 

Avoir des connaissances de base en HTML / CSS

Lorsqu’un UX / UI designer est chargé du maquettage d’un site web, on peut se poser une question :  doit-il savoir coder ?

Si un UX / UI designer veut concrétiser un projet, il doit savoir communiquer avec un développeur. Pour cela, comprendre le support avec lequel il travaille est nécessaire. Dans le web, c’est l’HTML, CSS et Javascript. Les  UX / UI designers peuvent ainsi faciliter leur travail ainsi que celui des développeurs – une situation classique gagnant-gagnant.

L’utilisation de bon logiciel 

Comme tout artisan, pour faire leur travail, ils ont besoin de bons outils. Connaître les normes de l’industrie sera utile dans tous les cas et essentiel dans de nombreux cas. Bien que la conception d’un site Web puisse être effectuée directement dans Adobe Photoshop, Illustrator, des outils tels que Adobe XD, Figma et Sketch sont ceux que presque tous les concepteurs utilisent pour la création de maquettes. Ces logiciels permettent des rendus optimisés pour l’intégration. Les développeurs pourront ainsi trouver facilement les codes hexa des couleurs, télécharger les éléments graphiques en SVG… 

Des ressources utilisables

Il est recommandé d’utiliser des typographies proposées par Google Fonts ! Cela représente un large choix de typographie et permet d’éviter lors du développement l’utilisation de Font Face. De nombreuses fois, les fichiers des polices ne sont pas partagés avec les maquettes et cela fait perdre du temps aux développeurs travaillant sur le site.

Les icônes sont aussi un nid à complication. Il faut généralement les exporter sous forme d’image et ajouter du javascript pour gérer les changements de style au survol. Il existe maintenant des bibliothèques d’icône en ligne comme Font Awesome s’il ne faut en citer qu’une qui permet l’affichage vectoriel sans pixellisation, taille modulable basée sur la propriété CSS font-size… Bien entendu, il est parfois nécessaire d’utiliser des icônes spécifiques mais pour de nombreux cas plus classiques, l’utilisation de bibliothèque répertoriant un large choix d’icône, fait gagner du temps.

Pour les utiliser dans les maquettes, il existe des extensions que vous pouvez installer sur Adobe XD par exemple.

Optimiser son rendu

Lorsque le moment du rendu est venu, il est très important de vérifier si les éléments graphiques sont bien marqués pour l’exportation. Sur Adobe XD par exemple, la petite icône à côté du calque doit être sélectionnée ou vous pouvez utiliser le raccourci clavier Maj + E. Lors de la génération du lien de partage pour les développeurs, il faut sélectionner dans “afficher la configuration”, la case Ressource téléchargeable.

Bien entendu, ses bonnes pratiques citées précédemment peuvent être débattues, notamment l’importance d’avoir des bases de connaissance du code en tant que UX / UI designer. Mais penser aux personnes travaillant à partir des maquettes permet de gagner du temps et de perfectionner ses méthodes de travail.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.