-
Des maquettes facilement intégrables svp… wait, what?
Le 25 septembre 2011 par Maxime dans Conception web.
Dans la création web, on a souvent tendance à vouloir aller vite. Plus de projets, plus de clients, plus de rentabilité. Bien souvent, on va donc proposer au client la solution la plus rapide plutôt que la meilleure. Et cela passe bien souvent par un design bien trop simple…
Des maquettes rentables ?
En agence classique, on a un boulot, on est payé pour le faire. Qu’on y passe beaucoup de temps ou peu de temps, cela ne change qu’une chose, la rentabilité du projet. Le maquettage est un passage obligée de la conception web, on doit réaliser une interface claire et jolie, simple à intégrer pour passer vite au développement et à la livraison du site.
Beaucoup de concepteurs web utilisent des grilles prédéfinies, par exemple la plus connue : 960 Grid System. En respectant ces contraintes, le graphiste pourra fournir une maquette facilement intégrable, car l’intégrateur aura déjà des classes CSS prédéfinies en fonction de la grille. En respectant ces contraines, cela ne choque personne ? Comment pouvoir fournir un design innovant si avant même de commencer la création le graphiste possède déjà des règles auxquelles obéir ?
Ce n’est pas comme ça que l’on voit les choses chez Wype. Peu d’agences web prennent le temps nécessaire pour réfléchir à l’impact que peut avoir l’identité visuelle sur la cohérence toute entière de l’application créée. Le design n’est pas juste une étape obligatoire, ce n’est pas juste une organisation de contenu et des carrés de couleur ! Le graphisme d’un site internet doit laisser transparaître une stratégie de communication définie et adaptée aux objectifs, et doit susciter une émotion chez l’internaute.
La maquette doit regorger de surprises et de dynamisme, peu importe s’il faudra du CSS3, des positions absolutes dans tous les sens. Chef de projet, développeurs, intégrateurs, arrêtez de râler et faîtes votre boulot ! Bien sûr, il existe quelques contraintes liées au web que les graphistes doivent savoir, car certaines parties doivent être fluides et doivent pouvoir s’allonger ou se rétrécir, voire apparaître ou disparaitre. Mais la plupart des choses sont tout de même réalisables, sans non plus passer 3 jours sur une maquette. Il faut simplement avoir un respect du travail, un souci du détail, un souci du client, et un peu de courage bon sang !
Les designers doivent-ils coder ?
Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.
Elliot Jay Stocks via Twitter
Et voici le début d’une polémique qui enflamma le web il y a un peu plus d’un an. Depuis, pas beaucoup de changements, la question partage toujours la profession. Mike Kus s’était alors lui aussi exprimé sur le sujet sur ThinkVitamin. Je suis fan de Carsonified, mais je ne suis pas d’accord avec lui là-dessus. Pour moi il est clair qu’un graphiste n’a pas besoin de savoir coder. Explications.- Le graphiste doit savoir ce qui est faisable
Un argument tout simplement anti-innovation. Si l’on connaît les limites, on ne saura pas les dépasser, on essaiera même pas. Et on se retrouve avec toujours les mêmes polices, toujours les mêmes arrondis à la noix, des champs textes non stylisés, etc.They did not know it was impossible, so they did it.
Mark Twain
- L’intégration n’est pas bien compliquée, un graphiste peut l’apprendre rapidement
L’intégration n’est pas bien compliquée. C’est vrai du point de vue graphique, il y a juste à écrire des balises pour décrire chaque élément graphique. Ce que ces webdesigners pluricompétents oublient bien souvent, c’est que l’intégration n’est pas juste une transcription graphique, mais également une transcription sémantique, de l’optimisation de performances, de l’optimisation pour les moteurs de recherche, et se rapproche du développement lorsqu’il s’agit de templating (intégration dynamique). - Les déclinaisons de maquettes peuvent être réalisées directement en HTML / CSS
Le meilleur moyen pour arriver à un design aseptisé. La home est travaillée, et les autres pages sont simplement une pâle copie qui reprend la charte graphique ? Lorsque l’on code directement, on finit forcément par faire des raccourcis. On retombe sur le même problème qu’avec l’utilisation d’une grille ; la marge à gauche fera 100 pixels. Sûrement que sur Photoshop, on aurait peut-être préféré 93 pixels, mais c’est pas grave, on est pas à 7 pixels près. C’est pourtant ce genre de détail qui séparera un bon design d’un excellent design. - Le designer va pouvoir retranscrire exactement le graphisme qu’il a conçu
Cela part du principe que l’intégrateur qui n’a pas fait le graphisme ne va pas suivre scrupuleusement la maquette qu’on lui donne. Wait, what? On peut être intégrateur et ne pas savoir réaliser un design sous Photoshop, et pourtant avoir un sens graphique et tenir une attention particulière au respect de la maquette. Quand le couple graphiste-intégrateur se connaît bien, la séparation entre les deux métiers peuvent même être avantageuse. Cela m’arrive souvent avec Thomas, notre directeur artistique ; il sait que je vais intégrer sa création au pixel près, que je vais harmoniser moi-même les incohérences qu’il a pu laisser, et que je vais me débrouiller pour concrétiser en intégration ses idées créatives et farfelues sans dévaluer la chose par souci de rapidité ou de simplicité. Le résultat ? Des clients heureux.
Le design graphique et l’intégration sont deux métiers à part entière, il est pour moi bien dangereux de vouloir faire des raccourcis entre les deux, tant ces deux domaines présupposent des compétences différentes et des points de vues souvent opposés. Créativité et optimisation ne font pas souvent bon ménage au sein d’un même cerveau. Laissons aux graphistes le loisir de nous fournir de magnifiques et impossibles maquettes à intégrer !Harmonie et pixel perfect
Your true worth is determined by how much more you give in value than you take in payment.
The Law Of Value, The Go-Giver
Créer de l’harmonie pour susciter de l’émotion sont des valeurs au cœur de notre philosophie. Pour cela, nous pensons sincèrement qu’il est nécessaire de donner, d’offrir. Comme l’énonce cette première loi de l’ouvrage de Bob Burg et John David Mann, la véritable valeur est déterminée par la plus value fournie par rapport au paiement de la prestation.Si vous mettez tout votre cœur à produire davantage de ce que l’on attend de vous, à exercer votre art, le bouche-à-oreille et la réputation vous le rendra. Il ne s’agit pas de réduire vos devis, de vendre moins cher un talent de valeur, mais bien d’offrir, la cerise sur le gâteau imprévu mais apprécié. C’est cadeau, c’est par plaisir, et c’est tout là l’intérêt de la chose ; cet acte de passion se doit d’être désintéressé pour être efficace, mais c’est pourtant bien celui-là qui fera décoller votre business.
Le souci du détail, l’harmonie entre tous les éléments pendant le design ou le pixel perfect lorsque l’on parle d’intégration, est l’un des meilleurs moyen de fournir une expérience unique à vos clients. La petite ombre derrière ce cadre, le hover (survol de la souris) sur ce bouton, la petite illustration qui vient orner ce texte… Tout autant de petites attentions qui feront la différence. La conversion (dans le sens large, que cela soit un achat, ou un retweet) d’un visiteur peut tenir à ce genre de détail.
Crédit : Jason Reed
EDIT : J’ai aperçu quelques malentendus à propos de « Le résultat ? Des clients heureux ». Je précise que j’appelle ici clients les utilisateurs finaux. Cela m’avait paru évident à l’écriture (avec l’emploi du pluriel), mais certains m’ont fait une remarque, pensant qu’il s’agit du client de l’agence. Il s’agit bien des clients du client. Plaire au client de l’agence, c’est bien plus facile, il suffit d’appliquer ce qu’il souhaite et c’est bon. Malheureusement, appliquer ce que veut le client sans aller plus loin ne suffit pas ; c’est normal, le client n’est pas expert web. Il faut alors user de psychologie pour satisfaire tout le monde et obtenir un résultat de qualité.
- Le graphiste doit savoir ce qui est faisable
Flux RSS de design, referencement, actus internet - Bewype
Recevez les articles tout chauds sortis du four !
Inscrivez-vous à notre flux RSS
Partager - Faîtes découvrir le blog Bewype - conception site internet et logique entrepreneuriale
Jeter un oeil sur les autres articles : design graphique, actu web et marketing seo
Vos commentaires sur Des maquettes facilement intégrables svp… wait, what?
(11) intégration, wypetouch - Réagissez !-
enguerranws
5 octobre 2011 à 11 h 40 min
Pour reprendre le tweet d’ E.J. Stock, il parle de webdesigner, pas de graphiste. Un graphiste n’a certainement pas besoin de savoir coder, le web n’est pas sa spécialité. Un webdesigner oui. Faire une maquette sans savoir ce qu’il est possible de faire, c’est faire perdre du temps à l’intégrateur, et crée beaucoup de retours inutiles en interne.
Et ce n’est pas se poser des limites, un bon webdesigner, qui code bien, trouvera les solutions qu’il faut pour mettre en place la maquette qu’il a conçu. S’il ne sait pas les dépasser, et bien, il manque simplement de créativité.
-
Gabriel C
5 octobre 2011 à 11 h 51 min
Article intéressant, je souscris pas mal à ce point de vue – même si je suis moi-même en train d’apprendre le HTML/CSS… par contre je vous trouve un expéditif dans vos raisonnement : vous semblez transformer un risque (« on peut être limité créativement ») en certitude inéluctable (« on VA être limité créativement »), c’est un peu rapide.
-
dmassiani
5 octobre 2011 à 12 h 07 min
Je suis absolument d’accord avec ton point de vue, cependant de mon expérience, je pense qu’un webdesigner qui connait aussi l’intégration et qui sur certains projets pense intégration peut très bien obtenir une vraie identité à part entière, là aussi son talent fera la différence et la rentabilité.
Bien entendu industrialisé un concept tel que le design est une opération dangereuse pour la créativité.
-
Kaelig
5 octobre 2011 à 12 h 24 min
Salut, bravo pour ce très bon article qui expose un point de vue (peut-être trop polarisé).
Repousser les limites de la technique c’est une chose, mais bien savoir le faire en est une autre.
Je ne crois pas que les monteurs de maquettes pour le print se lancent dans le métier sans savoir comment cela fonctionnera chez l’imprimeur. Pour moi c’est la même chose dans le web.
Quand le design passe de 960px à 963px d’une page à l’autre d’une maquette (et encore je prends vraiment un exemple bateau), il y a un souci dans la chaine de production. Désolé mais le A4 c’est 21 cm, et pas 5mm de plus.
En général une bonne discussion entre webdesigner et intégrateur permet de trouver une solution, un compromis. Mais qu’on ne vienne pas me dire que les grilles sont une contrainte qui « bride la créativité ». On travaille en pixels, avec des agents utilisateurs, des rendus et des résolutions différents… Le webdesigner qui ne prend pas ça en compte n’est justement pas « designer ».
PS : tu parles du :hover, penses-tu au :focus pour ceux qui naviguent au clavier ?
-
MrManchot
5 octobre 2011 à 16 h 06 min
Ou alors il fait appel a un bon intégrateur…
-
Maxime
7 octobre 2011 à 22 h 20 min
Je ne suis pas le terme « webdesigner », c’est pourquoi j’ai préféré le mot « graphiste », en voulant bien sûr parler des « graphistes web ». Webdesigner, cela veut dire concepteur web. Donc les ergonomes, les graphistes, les développeurs… Mais en France on l’utilise plutôt pour l’univers du graphisme ; cela peut porter à confusion. Un graphiste print qui fait une maquette de site internet, au-delà même de ne pas connaître l’intégration, n’a pas de notion d’usabilité et d’ergonomie web ; on court à la catastrophe ! Je parlais bel et bien des graphistes spécialisés dans le web.
Je suis tout à fait d’accord avec les commentaires déposés, il est évident que le graphiste doit connaître l’intégration. Mais à mon sens, il n’a pas besoin de la maîtriser, donc concrètement de savoir coder. Il suffit d’avoir de bons rapports avec son intégrateur pour savoir ce qu’il pourra faire, pas besoin de savoir ce qui est faisable dans le détail. Surtout que, arrêtons deux minutes, aujourd’hui très peu de choses ne sont pas faisables, c’est juste qu’il ne faut pas être feignant
Je pense sincèrement que si l’on code son propre design, on VA être limité. A mon humble avis, c’est une illusion de penser que c’est uniquement un risque. Là-dessus, je parle par expérience ; une très grande majorité des portfolio de graphistes ne sont pas leur plus belle création, simplement parce qu’ils ont dû la plupart le coder eux-même.
Si d’une page à une autre, on passe de 960 à 963px, ce n’est pas normal. Par contre, si toutes les pages sont en 963px, ou est le problème ? C’est là où pour moi, les grilles nous restreignent quelque peu.
Et enfin, oui quand je pense :hover, je pense aussi au :focus, mais j’avoue ne pas avoir compris le rapport avec l’article… A moins qu’il n’y en ait pas, et que tu voulais simplement discuter accessibilité ; dans ce cas, oui j’y suis sensible
-
Kaelig
8 octobre 2011 à 10 h 25 min
Merci pour ta réponse, je pense qu’on se rejoint sur la plupart des points : un graphiste web n’a pas besoin de savoir coder son design, mais en tout cas il doit connaitre les contraintes induites par son media (ou il en résultera une intégration sale, pénible, lourde, peu optimisée pour le SEO, les performances, l’ergonomie, la maintenabilité…).
Et tu as tout à fait raison quand tu dis que l’on se fixe soi-même des contraintes quand on code son propre design. On se dit tout de suite « aaah, ça va être chiant de coder ce bouton, je le sens », et on ne le fait pas pour gagner du temps ensuite (la feignantise de l’être humain).
Dans le même temps, les graphistes web qui savent coder et ont déjà touché à jQuery, html5 et CSS3 ont parfois des idées très créatives en accord avec leur media justement parce qu’ils le maitrisent très bien.
Pour ce qui est des grilles, je pense que c’est un tout autre débat.
PS : sorry pour le coup du hover, je ne sais pas pourquoi j’ai abordé cela, c’était en effet hors propos !
-
tetue
10 octobre 2011 à 14 h 27 min
« Pour moi il est clair qu’un graphiste n’a pas besoin de savoir coder » s’il veut rester en surface… Comment peut-on prendre au sérieux un créa web, webdesigner ou graphiste web, qui ne sait pas coder, c’est-à-dire qui ne sait pas faire lui-même une page web, qui ne connaît pas son support et travaille hors du support ? Que penseriez-vous d’un créa print qui ne voudrait pas s’abaisser à manipuler du papier, à en connaître les formats, le grammage, et autres spécificités ? Que c’est juste un rigolo, n’est-ce pas
Mais je suis d’accord sur certains points : mieux vaut travailler en tandem, et ne pas faire soi-même la créa ET l’intégration, au risque de se brider par anticipation. D’accord aussi pour constater que ce sont des métiers différents et complémentaires, que le créa n’a pas à avoir toutes les compétences de l’inté et réciproquement. Mais dans les métiers du web, créa compris, connaître le HTML assez pour savoir monter une page web est un minimum.
-
Maxime
10 octobre 2011 à 14 h 51 min
Oui un créa print doit connaître le papier, le grammage, les formats… Mais doit-il savoir imprimer ? Non, ça c’est le boulot de l’imprimeur
!C’est exactement cela que j’ai voulu exprimer dans mon article. Le graphiste doit connaître les spécificités de l’intégration, mais pas forcément savoir la réaliser. Je ne vois pas ce qu’apporte à un graphiste de connaître une propriété CSS ; ce qui compte c’est de savoir ce qui est possible en CSS !
-
tetue
11 octobre 2011 à 10 h 54 min
« Je ne vois pas ce qu’apporte à un graphiste de connaître une propriété CSS ; ce qui compte c’est de savoir ce qui est possible en CSS ! » Rien ne vaut la pratique ! Que penserait-on d’un sculpteur qui se bornerait à « connaître » les propriétés du marbre, du bois, du béton… sans manipuler le matériau ?
Sinon, puisque tu compare… celui qui imprime, dans le web, qui fait le rendu final avec les bonnes typos, couleurs, etc., ce n’est pas l’intégrateur, mais le poste utilisateur. #fail
-
jonathan
11 octobre 2011 à 11 h 24 min
Je dirai que ça dépend du projet :
Si le projet est lourd avec une maintenance à anticiper et à concevoir alors oui j’imposerai aux graphistes d’habiller la maquette html provenant de la conception. Là on est dans une logique industrielle du travail.
Quand vous allez chez un concessionnaire de voiture si vous voulez une voiture à neuf portes, on vous dit ça existe pas que c’est pas possible.Par contre dans un petit projet (plus artisanal) là oui le challenge de faire une interface exotique est très intéressant.
