Du PSD au HTML : intégration au pixel près

Bonjour à tous,

je ne sais pas trop si le sujet a été débattu ici même si c'était le cas je m'excuse.

Je rencontre au travers de mon travail de dev. différents clients, qui sont des graphistes et non des webdesigner, aux exigences bien différentes. Certains se satisfont d'une copie de leur PSD que j'adapte au web mais d'autres veulent au pixel près la copie de leur projet avec animation à la seconde. Bien entendu mon travail est d'être au plus proche de l'exigence du client mais quand la superposition de la page est faite sur le PSD n'est-ce pas trop demandé ? Sachant qu'il faut parfois réduire les tailles pour les petits écrans, que nous ne travaillons pas avec la même résolution d'écran (les graphistes ont souvent des 30" alors que je travaille sur un 20" et un 22"), que la typo web n'a pas le même rendu que sous PSD etc...

J'aimerais recueillir vos avis afin de bien démarrée cette nouvelle année de travail

Bonjour !

Intéressant comme débat. Personnellement je suis un accro du pixel près... Dans mon travail je fournis des maquettes a une équipe de dev et c'est vrai que le rendu varie (beaucoup des fois). C'est assez dur mais on s'y fait. Mais du coup il faut s'adapter a la police, la taille les effets etc.. A mon avis tu as tout intérêt a préciser au client dès le début toute ces choses et lui n'aura qu'a travailler sous tes contraintes :
- sélectionner une police web, ou prévoir que la police sera différente, ou au pire utiliser @fontface ...
- Demander des maquettes à l'échelle : en 1024 et avec des éventuelles spécifications si le site est en fluide...
- les mettre au courant des effets disponible en css/css3 et leur expliquer que les image c'est bien mais trop d'image tue l'image (idem pour les effets) etc..

En fait un pur graphiste va bosser sans aucune vision de la techno c'est donc a toi de le guider. A mon avis ce n'est pas a lui de faire la maquette et ensuite a toi de réaliser séparément, il faut un travail conjoint tout le long.
Pour revenir a l'exemple concret de mon boulot j'imagine d'abord des interfaces puis je vais voir les dev de l'appli pour savoir ce qui est réalisable et comment, puis je fais des maquettes avec leurs visions comme ça je ne suis pas déçu du rendu et eux pas surpris des chose a réaliser. Il faut plus d'interaction pour leur faire comprendre tes contraintes, tes besoins etc..

Bonne rentrée

J'essaie d'intégrer du CSS3 pour les reflets... mais encore et toujours les contraintes IE7. Et j'utilise du webfont ou converti des polices en format web grâce à FontSquirrel mais le rendu est tout de même différent. Sans parler d'IE qui parfois décale de quelques pixels les div.

J'avoue laisser les graphistes s'éclater et dire "tout est réalisable" ce qui n'est pas faux. Mais il faut avouer que c'est parfois un casse-tête.

letty a écrit :
J'essaie d'intégrer du CSS3 pour les reflets... mais encore et toujours les contraintes IE7. Et j'utilise du webfont ou converti des polices en format web grâce à FontSquirrel mais le rendu est tout de même différent. Sans parler d'IE qui parfois décale de quelques pixels les div.

J'avoue laisser les graphistes s'éclater et dire "tout est réalisable" ce qui n'est pas faux. Mais il faut avouer que c'est parfois un casse-tête.

Il faut juste bien leur faire comprendre ça dès le début. C'est carrément impossible d'avoir exactement le même rendu que photoshop (sauf si tu édites le projet en image et que tu le mets en background du body mais la le site perd un peu son sens )

Il vaudrait mieux éviter de leur laisser le "tout est réalisable" pour ta santé

Des graphistes pas webdesigners qui font des maquettes. Arf.
Ce serait pas plus pertinent de leur demander des chartes et éléments graphiques, et de faire les maquettes toi-même? Ou, si tu ne t'en sens pas capable, de trouver un webdesigner?

On est en 2012, faudrait peut-être arrêter de laisser des non-webdesigners monter des maquettes en se reposant sur des connaissances sommaires du Web (celles d'un utilisateur plutôt que d'un designer dont c'est le métier). Ça peut être très intéressant de faire intervenir des gens pas spécialistes du Web en amont, sur de l'identité visuelle et de la direction artistique, mais pour designer des interfaces... c'est juste plus possible là.

Un pur graphiste sans connaissance du Web design peut créer des illustrations et des éléments d'interface mais certainement pas monter un design.

Et 100% d'accord avec Florent.

Pixel Perfect, le mantra du webdesigner ^^

Si tu es dans une boîte où ce sont des purs graphistes qui font la maquette web... je te plains; j'ai déjà reçu des maquettes de graphistes print, en 1sec tu reconnais direct la maquette.. c'est souvent une tranche de rire avec les collègues.. (on se moque pas, on troll on va dire..)

Je crois que l'exemple le plus flagrant que j'ai eu à intégrer pour des graphistes est leur perpétuelle (et énervante) manière vouloir à tout prix avoir un texte justifié et sur 2 colonnes. Bien entendu faut que ce soit en plus dynamique (type billet de blog) et/ou que ça tombe pile poil au même niveau sur les colonnes. Là je pleure un peu...

Je ne parle pas d'éléments structuré comme dans un tableau du coup j'ai honte de dire que parfois j'utilise l'élément table pour avoir les vertical-align corrects.
Et beaucoup, beaucoup de superposition d'éléments. J'ai eu l'an dernier un site avec du contenu à organiser dans un tableau mais en superposant des images. Et bien entendu les éléments ne sont pas au même endroit suivant le navigateur

Mais comme dit Fabious mieux vaut un graphiste qui a du goût et fait de jolies chartes web même très compliquées à intégrer que les graphistes qui utilisent scrupuleusement leur enseignement print sur du web et font des choses moches. On crache pas dans la soupe, faut bien aussi croûter un peu.

Si j'ai bien comprit tu parle de personnes qui "réalisent" des designs pour un média qu'ils ne connaissent pas, ou du moins ne maitrisent pas.

Concernant IE7/8 c'est bien moins problématique si le design est bien penser en amont, pareille pour les médias "portable".

On ne demande pas forcement à un graphiste de savoir faire de l'intégration, mais au minimum de connaître les contraintes du média pour lequel il travail.

Après j'ai presque envie de dire que tout, ou presque tout est possible, c'est une question de temp, donc d'argent.

fvsch a écrit :
Des graphistes pas webdesigners qui font des maquettes. Arf.
Ce serait pas plus pertinent de leur demander des chartes et éléments graphiques, et de faire les maquettes toi-même? Ou, si tu ne t'en sens pas capable, de trouver un webdesigner?

On est en 2012, faudrait peut-être arrêter de laisser des non-webdesigners monter des maquettes en se reposant sur des connaissances sommaires du Web (celles d'un utilisateur plutôt que d'un designer dont c'est le métier). Ça peut être très intéressant de faire intervenir des gens pas spécialistes du Web en amont, sur de l'identité visuelle et de la direction artistique, mais pour designer des interfaces... c'est juste plus possible là.

J'aime!

j'ajouterai qu'il va de même pour les cahiers des charges, les docs techniques, etc...

En tant que graphiste, j'ai eu souvent la mauvaise expérience de voir le site fini/developpé avec pas mal de différences comparé aux maquettes fournies. Le plus souvent, ce sont des erreurs de marges...

Mais bon après il ne faut pas être perfectionniste et ne pas oublier que le support impose forcément des différences d'affichage, ne serait-ce qu'entre navigateurs

Gianni a écrit :
En tant que graphiste, j'ai eu souvent la mauvaise expérience de voir le site fini/developpé avec pas mal de différences comparé aux maquettes fournies. Le plus souvent, ce sont des erreurs de marges...

Mais bon après il ne faut pas être perfectionniste et ne pas oublier que le support impose forcément des différences d'affichage, ne serait-ce qu'entre navigateurs

Pas d'accord, si le projet est bien géré de A à Z, tu 99% de chance que ce soit identique. Après faut pas non plus incriminer les graphistes ou web designers, certains intégrateurs ne se souci pas du pixel de plus ou de moins par ci par là. (oui c'est un troll que j'assume totalement)
Modifié par JJK801 (24 Aug 2012 - 15:39)

L’éternel troll Inté vs Graphiste/Webdesigner. Le boulot en équipe, la concertation, tousa toussa, vous connaissez?
Modifié par Florian_R (24 Aug 2012 - 16:13)

Florian_R a écrit :
L’éternel troll Inté vs Dev. Le boulot en équipe, la concertation, tousa toussa, vous connaissez?

Il n'est pas question de Dev dans l'histoire, on parle d'un coté purement design, généralement tu fais pas travailler 2 webdesigners sur une maquette, ni 2 intégrateurs sur la même inté (ou alors dans une pièce vide avec des barreaux aux fenêtres et le matos vissé a la table).

Si le design et l'inté son fait avec soin, pas de problème, si l'un des 2 pêche, là y a friction, forcement car quand on bosse correctement on aime pas voir son boulot ravagé.

Pas question de travail d'équipe mais de respect du travail des autres
Modifié par JJK801 (24 Aug 2012 - 16:00)

Arf, me suis carrément planté en postant (tête ailleurs, la joie du Vendredi certainement). J'ai édité le post.
Modifié par Florian_R (24 Aug 2012 - 16:13)

Oui, il y a effectivement des intégrateurs qui font un travail peu précis, qui ne respecte pas certains choix graphiques des designers (notamment: espaces et alignements). Je connais pas mal de webdesigners qui s'en plaignent, à juste titre.

Autant sur les espaces verticaux il y aura nécessairement des variations par rapport à une maquette PSD, autant sur les espaces horizontaux on peut généralement être très précis (voire plus précis que la maquette, où les éléments ne sont pas toujours calés au pixel près...). Ça permet de respecter une grille ou des repères verticaux qui guident la lecture.

Mais il me semble que ce n'était pas le sujet de letty, qui est confrontée à des exigences qui a priori dépassent la simple précision d'un travail d'intégration, et à des maquettes pas toujours pensées pour le Web par des gens qui auraient les compétences pour designer pour ce medium.

fvsch a écrit :
Oui, il y a effectivement des intégrateurs qui font un travail peu précis, qui ne respecte pas certains choix graphiques des designers

On appel ça des désintégrateur's

Il va falloir effectivement poser les exigences plus clairement concernant la taille des sites générés en PSD, je ne devrais pas avoir à adapter depuis une interface 30". Dire que certaines pratiques purement éditoriale ne se font pas pour internet. Insister pour avoir un modèle tablette et/ou téléphone plutôt que de devoir me débrouiller comme je peux pour ensuite devoir tout défaire et refaire.

C'est sans compter les "à côté"... j'ai fait beaucoup de cadeaux l'an dernier notamment baisser mon tarif jour à 250€ car les clients doivent ajouter la TVA que je n'ai pas sur mes devis. Au final je ne m'y retrouve pas Avoir un site, à la base simple, à deviser et se retrouver avec une usine à gaz animée de partout. Bref beaucoup de temps passé, de stress car il faut que ce soit fait pour la veille. Le pire étant les remarques en cours de débug sur d'autres éléments notés mais à débuggué sur le moment, cassant le rythme de travail et au final me désorganisant, m'empêchant de tester calmement (nota : Skype c'est bien mais à mon avis il faut savoir l'éteindre pour ne pas être assaillis de notes).

Salut,

<HS>

letty a écrit :
C'est sans compter les "à côté"... j'ai fait beaucoup de cadeaux l'an dernier notamment baisser mon tarif jour à 250€ car les clients doivent ajouter la TVA que je n'ai pas sur mes devis. Au final je ne m'y retrouve pas

Détrompe-toi : à moins que tu n'aies affaire à des particuliers ou à des entrepreneurs individuels en franchise de TVA, sache que la plupart des clients ont la possibilité de la récupérer. Par conséquent, baisser son tarif pour une histoire pareille est stupide.

Plus généralement, sache qu'en baissant ton tarif, tu donnes à entendre que tu te dévalorises et, surtout, tu envoies un signal fort aux clients indélicats attirés par les prix au rabais tout en cherchant à en vouloir toujours plus jusqu'à se montrer emmerdants, sans oublier que tu te prives de marges de manœuvre et que tu te discrédites vis-à-vis des autres professionnels (confrères comme clients sérieux).
</HS>

Pour revenir au sujet, mon état d'esprit face au pixel perfect se résume ainsi : à vouloir faire du pixel près, autant faire du Flash ou des images map.
Modifié par Victor BRITO (30 Aug 2012 - 16:05)