Il arrive bien souvent qu’il y ai des tensions entre les teams créatives et les développeurs dans les agences de communication. Pour prévenir d’éventuels incidents, il est bon de mettre par écrit les attentes de chacun. D’un côté les attentes techniques et blocages, de l’autre ce qui doit arriver dans la boite mail de l’intégrateur pour faciliter le développement.

Malheureusement ces bonnes pratiques ne sont pas diffusées dans les écoles respectives. Il est du rôle du chef de projet de s’en charger (ou des responsables de chaque équipe). Voici de quoi les aider pour la partie graphisme.

 

1. Organisation sur votre poste de travail

Compilez vos PSD : levez le pied sur la création de nouveaux PSD, pensez minimal et compilez les différents écrans en 1 seul PSD.

Nommez vos fichiers : « nouveaudesign.psd » ou « Final_v3.psd » ? Le second est beaucoup plus parlant et vous pourrez le distribuer plus facilement.

Stockez les dépendances : utilisation de brushes, filtres, images … supplémentaires pour la créa ? Stockez l’ensemble dans un dossier avec le PSD, pas au fin fond de votre poste.

Utilisez les tempates d’interface utilisateur : cela va aider les développeurs et vous empecher d’entendre « tu peux me refaire ce bouton en 15pxl moins large ? » / « il me le faut en rollover avec la couleur #33FF56 en opacité 50%« . Ils savent très bien le faire, ne vous en faites pas 😉

Partagez : stockez sur le serveur vos éléments une fois finis. Prenez l’habitude de ne pas tout garder pour vous.

 

2. Organisation dans l’outil de production

Nommez vos calques : rien de plus frustrant que de voir des dizaines de calques nommés de façon non-explicites. Imaginez la tête de l’intégrateur qui a à traiter des calques appelés : « 1bis » / « sous-calque9 » / « copie_test_7« .

Utilisez les dossiers : groupez les calques d’un même élément de votre créa. Plus simple non ?

Supprimez l’inutile : vous avez fait des tests ? Ils ne sont pas concluants ? Effacez les !

Ré-utilisez le maximum d’éléments : pourquoi avoir 5 fois le même bouton sur 5 calques ? Globalisez vos éléments communs dans un même dossier / calque.

Utilisez les objets dynamiques et les compositions de calques : ils vous permettent d’avoir plusieurs variations dans un seul PSD.

 

3. Les polices

Point/Pixel : vérifiez ce que préfèrent vos développeurs, travaillez en pixels dans un premier temps.

Vérifiez la licence : restez dans la légalité, n’utilisez pas des polices sans licence d’utilisation commerciale.

N’étirez pas les textes : ok, ça peut être beau, mais ce n’est pas réalisable en HTML/CSS.

La césure : oubliez la, on ne peut pas la retrouver sur le web sans un effort surhumain de la part de vos intégrateurs / développeurs.

Champs de texte : c’est bien d’y penser, mais gardez une longueur utile, pas rallongée.

 

4. Travailler vos images

Gardez les formes vectorisées : n’aplatissez pas toutes vos formes, la différence entre vos écrans et les écrans clients sont parfois énormes.

Gérez vos masques : au lieu de les appliquer sur chaque calques, utilisez les sur des groupes.

Des logos vectorisés : ils sont utilisables par tous et permettent d’être redimensionnés, ne les aplatissez pas.

Collez à la grille : alignez vos éléments par rapport à la grille, pas à votre vue. Les yeux de chacun sont différents, pas la grille de votre outil.

Maîtrisez les modes de calque : cette superbe couleur est issue de 5 calques différents ayant des modes complémentaires et une opacité réglée au millimètre ? Bien, mais pas pratique pour les équipes qui récupèrent votre travail.

 

5. Travailler avec des filtres

Color overlay : pourquoi les utiliser pour obtenir une couleur sur un élément ? Utilisez directement la palette 🙂

CSS mon amour : n’oubliez pas qu’en CSS on ne peut pas (encore) tout faire concernant les calques superposés. Jetez un oeil à ce que peuvent faire vos intégrateurs avant de finaliser votre design.

Dimensions fixes étirables : regardez votre écran, celui de votre stagiaire, celui des développeurs puis de votre smartphone. Votre design doit s’adapter à tout ces types d’écran. Prévoyez un fond étirable, pas une image aux dimensions fixes.

Les fondus : (ou gradients) indispensables pour donner de la profondeur, ils sont à utiliser de manière simple et non avec une superposition de couches de couleurs.

Contours : bords arrondis ou carrés ? Pour l’intégrateur la question est vitale, posez lui la question de la faisabilité.

 

6. Bonnes pratiques

La grille : non, vous ne pouvez pas tricher face à la grille, si ce n’est pas droit, ça ne pourra jamais l’être.

Ombrées : ça donne du relief, mais ce n’est beau que si ça ne saute pas aux yeux.

Différents écrans pour une créa : mobiles, pc portables, écrans géants … comment va réagir votre créa ? Et oui, c’est à vous d’y penser, pas uniquement à l’intégrateur.

Licences d’images : comme pour les polices, les images sont assujetties aux droits d’auteurs. Google Images n’est pas une librairie open source. Vérifiez les droits avant de les utiliser.

« Polices web » : ce n’est pas au développeur de trouver une alternative à votre fabuleuse police trouvée sur un serveur pirate en Chine. Travaillez ensemble pour établir une liste de polices utilisables.

 

7. Avant d’exporter vos créas

Relecture : demander à un collègue de passer voir votre créas, 4 yeux valent mieux que 2.

Les wireframes comme référence : ne vous éloignez pas trop des wireframes, ils ont étés créés pour vous guider, ne chamboulez pas le travail déjà effectué en amont.

Pas de watermark sur les images : vous avez récupéré des visuels sur le web et ils ont des watermarks, ça ne fait pas pro et le client n’a pas besoin de le savoir.

Les limitations des navigateurs : il faut les connaitre. Un point c’est tout. Vos effets dignes de Star Wars ne sont peut-être pas possible, renseignez-vous ! (ah oui, et tant que j’y suis, stop aux fonds sonores en MIDI sur les sites par pitité ^^)

Vérifiez, vérifiez, vérifiez : est-ce que la charte graphique est respectée ? Les couleurs du logo sont les bonnes ? Les différents tons de bleus sont bien validés ? C’est simple, avant d’envoyer, vérifiez.

 

8. J’exporte ma créa

Menu > Enregistrer pour le web : vos images seront traitées spécialement pour le web, sympa non ?

Le progressif : les jpeg enregistrés en progressif vont charger d’abord la basse résolution puis progressivement afficher les détails. Et non laisser un gros bloc blanc durant le chargement.

Passez sur la balance : allégez au maximum le poids de vos créations. Trouvez le bon ratio poids / qualité. Vous n’avez pas à exporter en 300dpi, le web est calé sur le 72dpi. C’est déjà un bon départ pour les validations par email.

Profil du moniteur et du document : vérifiez votre calibrage écran et les options de profil du document. Un peu technique mais tellement pratique.

Nommez les fichiers pour leur fonction : le fichier « fond_gauche_12.jpg » ne va pas aider votre intégrateur, enfin si, il va le mettre à la corbeille. Aidez le au maximum pour être tranquille par la suite.

 

Cette liste est une adaptation libre du site http://photoshopetiquette.com/, traduite et adaptée par mes soins. Je vous invite à vous référer à ces points lors de tout brief avec une équipe créative pour prévenir de tout souci interne. Les pôles techniques et graphiques sont généralement peu enclins à travailler main dans la main, il faut un peu les aider ! 😉

Avez-vous d’autres conseils à donner pour améliorer la compréhension du web dans vos équipes ?

Article précédent Article suivant