Conseils de collaboration entre web designers et développeurs

Publié dans : Développement web- 08 Jan 2010 Commentaires fermés sur Conseils de collaboration entre web designers et développeurs

Le design de sites web s’ouvre de plus en plus à des graphistes au bagage technique limité. Dans ces conditions, développer un site internet peut sembler délicat, voire rédhibitoire. Cela peut sembler encore plus difficile si vous travaillez pour la première fois avec des développeurs qui vont devoir programmer le site selon vos spécifications graphiques.

Dans cet article, nous exposerons quelques conseils et les bonnes pratiques qui vous aideront à bien travailler avec des développeurs web, et qui assureront que le résultat final sera parfaitement conforme à votre design, au pixel près.
Nous considérons que vous utilisez Photoshop, mais ces principes s’appliquent à tout autre outil utilisé pour la création graphique.

Cet article est librement traduit de cette version originale chez Sixrevisions, il en reprend également les illustrations.

1. Préparer un plan clair

La conception d’un site sans plan, ou cahier des charges, est gage d’échec, c’est d’autant plus vrai tant dans le design de sites web que dans la programmation. Planifier le projet est essentiel pour sa réussite, mais plus encore pour assurer la bonne compréhension entre le développeur et vous.

Une bonne technique pour éviter des écueils de communication est de faire en sorte que le développeur prenne connaissance et discute de vos schémas de principe et de mise en page, avant même que vous n’amorciez la création graphique proprement dite.

Il est donc recommandé de poser des questions telles que “est-ce que ça entre dans notre budget ?”, ou “est-ce que ceci ou cela pourrait être un problème ?”

2. Concevoir une bonne maquette du site web

Avant même de lancer Photoshop et commencer le design, il est bon de connaître quelques pratiques graphiques.

Système de grille

Si nous voulons nous assurer que notre site sera compatible avec plusieurs résolutions d’écrans, l’utilisation d’un système de grille de 960 pixels est une bonne façon d’éviter les surprises lorsque, une fois le site terminé, nous le visualisons sur d’autres postes. L’utilisation d’un système de grille apporte également une structure pour vous et votre développeur, permettant d’assurer que le contenu reste parfaitement aligné. L’utilisation d’un gabarit sur grille est le meilleur moyen, et le plus simple, d’obtenir des designs de sites internet précis et nets. Ces systèmes de structures en grille apportent également un guide dans votre processus de conception graphique, car de nombreux soucis liés à l’alignement, à la largeur de colonnes ou à la disposition des éléments ne se posent plus.

Mises en page qui suivent la croissance et les changements du site

Il est essentiel d’être conscient que, une fois le site en ligne, il commencera sa vie autonome. Que ce soit parce que le client voudra ajouter du contenu ou parce que le site sera prêt à passer à une nouvelle phase de développement, il est important de réfléchir à la manière dont il pourra croître et évoluer.

Comment sera affecté votre mise en page si cinq nouveaux paragraphes sont ajoutés ? Est-ce que votre menu de navigation permet facilement l’ajout de nouvelles rubriques ? Il y a des questions à ce poser, et auxquelles il faut répondre lorsque vous commencez à travailler avec le développeur.

Organisation de la maquette

On pourrait dire beaucoup de choses à propos d’un document Photoshop bien organisé. Le fait de préparer votre document de façon claire et précise permettra à votre développeur de repérer et d’isoler facilement les éléments de votre charte graphique. Ceci peut être fait en regroupant et en nommant les calques par élément du gabarit. Par exemple, vous pouvez diviser votre maquette en éléments tels que l’entête (“header”), le bloc de contenu principal (“main content”), pied de page ‘(“footer”) et colonne latérale (“sidebar”). Vous pouvez également regrouper vos éléments graphiques de manière logique.

Un fichier Photoshop bien rangé et modulaire signifie que vous devez prendre conscience qu’il faut séparer les éléments le plus possible dans des calques ; il n’y a rien de pire pour le développeur que d’essayer d’isoler un morceau du design et de se rendre compte qu’il est mélangé avec d’autres éléments.

Cela peut paraître évident, mais vous seriez surpris du temps gagné en développement par le simple fait de rester organisé de la sorte.

A ce sujet, il est également essentiel de vous assurer que vous êtes en mesure de fournir au développeur tous les éléments, images et liens dont il aura besoin pour prendre en compte votre besoin. Ces éléments incluent par exemple les différents états de votre système de navigation (état normal, état survolé), les boutons de l’interface tels que les boutons d’action, etc. (exemple de tutoriel pour apprendre à créer des boutons d’action).

Si vous avez d’autres informations que vous souhaitez transmettre ou qui vous semblent essentielles pour la compréhension de votre charte graphique, vous pouvez utiliser une application comme Skitch. Skitch vous permet d’annoter vos graphismes avec des remarques qui pourront d’aider la communication, notamment sur des points qu’il est difficile de traduire en mots. (Voir une liste d’autres outils de collaboration web que vous pouvez utiliser).

3. Apprendre les fonctionnalités des interfaces utilisateur

Lorsque vous travaillez sur des éléments qui auront un comportement ou une action spécifique, prenez le temps de chercher des exemples et de la documentation à transmettre à votre développeur afin qu’il ait une idée claire de ce dont vous parlez.

Les développeurs ne lisant pas dans les pensées, ils pourraient ne pas comprendre vos souhaits si vous présentez le graphisme dans un état statique sans annotation. Recherchez sur le web, vous trouverez de nombreux documents, démonstrations et tutoriaux sur à peu près tout type d’action et comportement (de toute façon, vous pouvez le faire simplement pour votre propre culture). Pour inspiration, visitez cette importante liste de techniques et tutoriaux d’interfaces.

4. Apporter un retour constructif

Lorsque votre développeur a terminé l’implémentation de votre charte graphique, il est probable qu’il y ait des changements, de votre part ou de la part du client. Il est rare que tout le monde soit satisfait au premier jet, vous avez désormais la mission de présenter les demandes de modifications de façon claire. Il vous faudra être le plus précis possible afin d’éviter les confusions.

Conclusion

Prendre le temps et faire l’effort de rester organiser est toujours payant à la fin.  Si vous êtes un graphiste débutant en web design, ne manquez jamais une occasion d’apprendre quelques chose de nouveau. Posez les questions qu’il faut au développeur, apprenez de vos erreurs, afin que votre prochain projet soit livré dans les temps et que votre charte graphique soit parfaitement respectée.