La multiplication des appareils mobile introduit le besoin de développer des sites présentant une mise en page adaptative. Dans ce contexte, une question se pose avec encore plus d'insistance qu'auparavant : Photoshop est-il encore le bon outil pour créer le design graphique d'un site? Pour tenter d'y répondre, je propose un recensement des principales problématiques liées à l'utilisation de Photoshop pour le design web, ainsi que quelques pistes de solutions. D'abord, voici cinq constats quant à l'utilisation de Photoshop (ou pour tous les autres éditeurs de fichier bitmap) dans le contexte d'un design graphique Web.
Photoshop permet d'imaginer des effets difficile voir impossible à créer en HTML
« [Photoshop composition] can become sink holes of developer time leading to brittle, buggy code and time misspent on elements of dubious importance. » Edward O'Riordan
Le classique des classiques : Photoshop offre des possibilités infinies, alors que le Web a des limites. Ainsi, il est facile d'oublier les contraintes du web lorsqu'on travaille dans Photoshop. On en vient donc à se retrouver avec un design impossible ou simplement trop coûteux à reproduire en CSS (Cascading Style Sheet). Les maquettes Photoshop tendent également à créer des attentes irréalistes pour le client, qui risque d'être déçu en voyant que le résultat n'est pas identique à l'image qu'il a vue.
Photoshop fonctionne en pixels alors que le Web fonctionne maintenant en proportions
« To think about the web responsively is to think in proportions, not pixels. » - Trent Walton, fondateur de Paravel
« Developers felt helpless […]. They often had to guess measurements in the absence of style guides », Typecast.
Photoshop offre un travail en pixels alors que les intégrateurs Web sont maintenant forcés de travailler en pourcentage ou en « em ». Une maquette Photoshop est donc imprécise pour les intégrateurs, qui devront littéralement tenter de deviner les choix typographiques du designer, tels que la dimension des éléments, l'espacement entre les lignes, etc.
Une maquette Photoshop est plus souvent incomplète, en particulier en ce qui concerne les interactions
Une maquette graphique omet souvent de répondre à certaines questions importantes. Par exemple, quelle apparence aura ce bouton lorsque j'y déplacerai mon curseur de souris? Cette situation est bien-sûr attribuable au fait qu'il est plus difficile de représenter les interactions sur une maquette statique.
Par comparaison, un guide de style a pour avantage d'être complet, ce qui évite de laisser des détails au hasard. Par exemple, il devrait spécifier l'apparence de tous les titres (H1, H2, H3, H4 et H5), alors que souvent, lors de la conception des ébauches, le designer n'aura probablement pas l'occasion de réaliser une maquette illustrant les H4 et H5).
Changer plusieurs maquettes Photoshop est fastidieux et peut accroitre la résistance au changement
« Static visual mock-ups are the currency of the Web but this need to change. We can't keep creating Photoshop images of the design variations we need to manage » - Sarah Parmenter, citée par Luke Wroblewski, entrepreneur et auteur du livre Mobile First.
Le temps nécessaire pour modifier un élément de design graphique (par exemple un bouton) est proportionnel au nombre de fois où ce design apparaît dans les maquettes déjà réalisées. Maintenir à jour toutes les maquettes graphiques d'un projet web peut donc représenter un effort considérable. Il n'est donc pas surprenant que cet effort puisse accroitre la résistance aux changements, résistance que j'ai pu constater dans plusieurs projets. Or, cette résistance a ensuite toutes ses chances de réduire la qualité du produit final. Par contraste, lorsqu'on travaille principalement avec un guide de style, ou directement en CSS, chacun des éléments n'a qu'à être modifié à un seul emplacement. L'ouverture aux changements est donc maximale puisque les artéfacts de design ne souffre d'aucune duplication.
Photoshop ne permet pas d'aborder la complexité d'un site en responsive design
Réaliser un site avec une mise en page adaptative est d'une grande complexité. C'est pourquoi beaucoup de développeurs prônent l'utilisation d'un cadriciel d'interface pour y arriver. C'est d'ailleurs ce que nous avons fait pour le site d'Adviso. Dans ce contexte, on peut se demander s'il est pertinent de réaliser des maquettes graphiques en largeur mobile, alors que le comportement du cadriciel par défaut pourrait bien être satisfaisant comme point de départ, qu'on pourra personnaliser.
Heureusement, des pistes de solutions commencent à émerger…
Voici quelques solutions proposées par des artisans du Web à travers le monde.
1. Réaliser le design graphique dans un navigateur
« Throw away Photoshop and be true to your medium », James Weiner, Designer chez Gov.uk
Certains affirment qu'il serait préférable de concevoir le design graphique d'un site directement en HTML/CSS. C'est une position assez difficile à mettre en pratique du fait qu'une minorité des designers graphiques ont les connaissances techniques pour le faire. C'est toutefois ce qui a été réalisé pour le design du site Quora.
Cependant, des outils qui permettent de designer en format natif (HTML/CSS) sans effectuer de codage commencent à apparaître. Le plus avancé est probablement TypeCast. Cet outil permet de concevoir des designs de page directement dans son navigateur, avec cinq sources de polices de caractères Web branchées sur l'application, donc des milliers de possibilités. Une fois le design terminé, un guide de style Web est généré automatiquement, en plus du code source correspondant à ce design.
2. Considérer le guide de style Web comme le principal livrable du design graphique
« Publishing a set of interface elements as a pattern library can help designers and developers collaborate on consistent product experience. » - Sarah Parmenter, designer web britannique cité par Luke Wroblewski
La création d'un guide de style Web peut réduire considérablement le besoin de travailler dans Photoshop, car celui-ci n'implique pas nécessairement la création de maquettes de page. Néanmoins, il semble se dégager un consensus des échanges que j'ai eu avec des professionnels de l'industrie : la réalisation de deux ou trois maquettes graphiques reste utile pour informer sur l'impression générale du site.
Le fait de travailler sur un guide de style permet, par ailleurs, d'acquérir une vision d'ensemble de l'interface afin d'assurer une cohérence entre tous les éléments. Un guide de style comporte plusieurs avantages additionnels, par exemple le fait d'être typiquement plus exhaustif que des maquettes graphiques et de faciliter le travail des intégrateurs en leur indiquant clairement les dimensions, l'espacement et les proportions à suivre. Par ailleurs, il y a deux types de guide de style possibles :
- Un guide de style bitmap;
-
Un guide de style en CSS.
Ultimement, la production d'un guide de style sous la forme CSS est presque incontournable. En travaillant en mode natif Web (par exemple avec un outil comme TypeCast), on escamote la version bitmap du guide de style.
3. « Tuile de style » et « prototype stylisé »
Samantha Warren, designer chez Twitter, propose de commencer par créer le langage visuel du site qu'elle appelle « style tile ». On pourrait le décrire comme étant un hybride entre un moodboard et un guide de style. L'agence américaine Spark-box va plus loin et propose, quant à elle, un nouveau type de livrable : un styled prototype. Similaire au « style tile », celui-ci est toutefois présenté en HTML/CSS, avec une mise en page adaptative. L'avantage de cette méthode est qu'elle permet de voir très tôt les interactions et la typographie telles qu'elles seront vues dans un navigateur Web.
Un guide de style pourrait être dérivé assez naturellement de ces deux livrables.
4. D'abord, créer un prototype fonctionnel; le styliser ensuite
Un cadriciel d'interface est déjà une excellente base pour construire le prototype d'un site ou d'une application. C'est d'ailleurs avec cet objectif qu'a été créé Foundation, l'un des cadriciels d'interface les plus populaires. Une fois le prototype réalisé à partir des maquettes ergonomiques, le designer aura une excellente idée des actifs et des éléments d'interface à styliser. Ce style peut ensuite être facilement intégré au prototype. Cette modification du style peut se faire assez facilement. Par exemple, avec le cadriciel Bootstrap, on peut modifier en quelques lignes la rondeur des coins de tous les boutons du cadriciel. Il existe aussi des thèmes pour y modifier le style du cadriciel, ainsi que des outils interactifs.
Conclusion
Photoshop n'a peut-être pas dit son dernier mot. La liberté qu'il procure est probablement essentielle pour explorer différentes avenues graphiques. Mais comme le lecteur a put le constater, la pertinence d'utiliser Photoshop (ou un autre éditeur bitmap) pour créer des gabarits de page est de plus en plus mis en doute. Heureusement, des pistes de solutions prometteuses permettront peut-être de répondre aux nouveaux défis que pose le web d'aujourd'hui.
Discussion
- Qu'en pensez-vous? Photoshop est-il encore pertinent dans votre processus de création?
- Comment abordez-vous ces difficultés lorsque vous créez un site en responsive design?
- Avez-vous essayé ces techniques et quels ont été les résultats?
- Connaissez-vous d'autres pistes de solutions, d'autres outils?
Excellent point! Belle analyse
Excellent article.
Il est clair que le gap entre Photoshop et le Web commence à être de plus en plus grand, surtout avec le responsive design. Malgré cela, les pistes de solution me laissent plutôt de glace. Sans les avoir essayé néanmoins.
Selon moi, les rôles du designer et de l’intégrateur sont appelés à changer afin de devenir de plus en plus collaboratifs. Par exemple, c’est effectivement fastidieux pour le designer de changer tous les boutons contenus sur les maquettes. Pourquoi ne pas le faire avec l’intégrateur sur un serveur d’approbation? Ce qui prendrait 30 minutes à un designer prendra 2 minutes à l’intégrateur. Même chose pour le responsive, un bon duo intégrateur/designer devrait le développer ensemble, dans le navigateur, sans s’acharner sur des maquettes PSD. Enfin, c’est notre façon de faire chez Evollia et ça fonctionne très bien.
Ou encore souhaitons qu’Adobe fasse un bon de géant dans la version CS6 pour tous nous accommoder
Photoshop est très pertinent dans le processus de création graphique pour la communication visuelle ou pour des éléments graphique qui viennent se greffer à d’autres projets en vidéo et 3d je trouve. Par contre il est sur qu’il est plus difficile et long de créer des maquettes de design responsive. Néanmoins là encore faut-il vouloir prôner le responsive design comme l’avenir. Se que je ne ferai pas, car le reponsive est un bon moyen de faire des économies financières pour adapter une interface multisupport. C’est une bonne solution pour travailler moins sur chaque support. Mais c’est aussi brider la créativité et le travail unique et sur mesure pour des résultats de grande qualité sur chaque support. Là encore c’est mon avis personnel. Bien que souvent le choix économique prenne le dessus.
Photoshop n’est donc pas parfait pour cette tendance du responsive design. Mais répond toujours aussi bien aux besoins de liberté créative, se qui est pour moi le plus important. Fermer les créateurs à des carcans de créativité limité serai dommage. Le mieux étant certainement d’utiliser comme tu l’énonce d’autres logiciels pour compléter cette tâche.
@Audrey Effectivement, le travail en mode collaboratif de style Agile est certainement un élément de la solution. La méthodologie idéale pourrait être une combinaison de solution, par exemple, explorer des ambiances avec Photoshop, créer un guide de style avec TypeCast et en parallèle créer un prototype fonctionnel à l’aide d’un Framework d’interface, pour finalement appliquer le guide de style au prototype.
@Loic : Effectivement, il faut s’assurer de ne pas brimer la créativité. La création d’un guide de style, plutôt que la création d’innombrables maquettes qu’il faudra mettre à jour continuellement, visent justement à éviter aux artistes des tâches cléricales comme de copier-coller des éléments graphiques d’une maquettes à une autre pour leur laisser plus de temps pour faire de l’exploration créative.
@Etienne Tout en éduquant nos clients à se familiariser avec ces livrables post-photoshop. Ouf, on va avoir du pain sur la planche! Héhé.
Mais c’est peut-être ce qui s’imposera effectivement avec le temps.
@Audrey Effectivement il va y avoir beaucoup de vulgarisation à faire auprès nos clients dans les prochaines années. C’est d’ailleurs en partie lebut de la plupart des articles de je publie : http://www.adviso.ca/blog/author/edelagrave/
Cela dit, il faut d’abord trouver les approches qui fonctionnent en partageant nos expériences.
Et »Muse » de la suite Adobe (http://www.adobe.com/products/muse.html )… N’est-ce pas aussi un outil attirant et performant pour les web designers codalphabètes? C’est connu et utilisé dans l’industrie? Qu’est-ce que vous en pensez?
@Dominique : Merci pour ton commentaire.
Muse est un outil qui permet de faire des sites statiques, ce s’appliquerait, par exemple, à moins de 5% des projets sur lequel je travaille. Or, la plupart des sites ont besoin d’un système de gestion de contenu, avec des données structurées, par exemple un localisateur de succursales.
Par ailleurs, Muse génère du code incompatible avec l’approche responsive design, ce qui est une limitation importante.
Bref, à mon humble avis, je ne pense pas que ça soit une approche prometteuse.
@Dominque Desrosiers, J’ai testé muse rapidement, c’est intéressant pour créer des sliders ou des animations html mais je n’est pas l’impression que cela soit destiné à la création complète d’un webdesign. D’ailleurs les parties sont d’abord à créer dans photoshop ou illustrator puis on peu ensuite les assembler/scénarisé/animé dans muse. C’est ensuite codé en html5 et css3 et javascript de façon automatisé par muse pour dire rapidement les choses.
Par contre faire un design de site entié avec Muse, je ne pense pas que cela soit convenable. Mais faut demandé aux experts de muse que je ne connais pas pour l’instant ^^.
Étienne, pour ma part je suis d’accord sur plusieurs points dans ton article mis à part de la prémisse : la fin de Photoshop. En fait, je crois que l’outil demeure un outil et aujourd’hui c’est le rôle du designer web qui change.
Le designer web en 2013 doit maitriser plusieurs facettes du design web mais aussi ses limitations techniques. Comprendre l’univers du programmeur aide énormément à bien concevoir les composantes du site. Il en va de soi également pour l’expert en ergonomie et ses autres acolytes. Les disciplines se croisent, la communication lors du développement d’un projet devient alors un incontournable. C’est cette communication manquante qui fait que le designer peut partir sur une tangente qui ne fonctionnera pas par la suite.
Je ne suis pas d’avis que les sites de demain se feront uniquement en CSS. Photoshop est encore l’outil le plus puissant en terme de composition visuelle. Tout dépend encore une fois du type d’expérience utilisateur que l’on désire. N’empêche que c’est la façon dont on l’utilise qui change : il est employé beaucoup plus pour illustré des idées, composer des images et non faire un site de A à Z. Je suis plutôt d’avis qu’une approche composite avec un certain mélange d’outils est nécessaire selon le mandat. Appliquer la recette unique peut parfois faire en sorte de passer carrément à côté de l’objectif initial.
@Patrick : Merci pour ton commentaire détaillé.
En effet, Photoshop peut très bien faire partie d’un cocktail d’outils à utiliser à certaines fins précises, par exemple, créer le moodboard, déterminer la palette de couleur, appliquer un traitement photo.
Pour ce qui est de la typographie, Typecast est définitivement un outil à inclure dans le cocktail d’outils, car, contrairement à Photoshop, il permet de visualiser le vrai rendu des polices qu’on compte choisir.
Dans un scénario idéal, il serait intéressant de créer d’un prototype fonctionnel non stylisé à l’aide d’un framework comme Foundation, prototype réalisé à partir des gabarits de pages créer par l’ergonome. Ensuite, ce prototype pourrait être stylisé à l’aide du guide de style créer par le designer. Je pense qu’il en résulterait une économique de temps et d’énergie, et un meilleur produit final.
D’après moi, ce n’est pas la fin de photoshop, mais le début du vrai travail d’équipe entre intégrateurs et designers!
Adobe Photoshop évolue à son époque et à son futur. Ce sont les utilisateurs qui font que PS continu à être utilisé pour la réalisation de maquettes. Pour ma part, j’utilise PS pour la réalisation des mes images aux bonnes dimensions et au bon format png, jpeg et gif animés (html5 permet des animations de style flash mais le gif animé est plus et un contenu en lui-même… mais c’est un autre débat). Les programmeurs utiliseront davantage Adobe Fireworks (hérité du rachat de Macromedia), ce logiciel permet la gestion d’image complexe pour les jeux fichiers lié au téléphones intelligents et pour certains sites web…
Photoshop est un logiciel fondamental… mais les créateurs de sites utilisent davantage des logiciel comme Apple iWeb ou Adobe Muse pour maquetter et même réaliser de microsite web. J’enseigne ces logiciels aux graphistes qui ne veulent pas se morfondre à programmer quoiqu’ils permettent (ces logiciels) l’ajout de code html et des css… Bref, le web… ce sont plusieurs outils combiner qui aident la réalisation de site !
Je crois que les designers devront apprendre à utiliser au minimum un framework de prototypage comme Foundation et être capable d’appliquer les styles développer dans leurs maquettes PSD. Le tandem concepteur/intégrateur est selon moi trop lourd et pas efficace à moins de travailler dans une grosse structure. La plupart des entreprises de Web étant de moins d’une dizaine d’employés.
Le plus gros problème pourrait venir des clients qui s’attendrait à voir des prototype qui s’afficherait comme le site final.
Tout cela en attendant qu’Adobe nous arrives avec un hybride entre InDesign/Illustrator/Photoshop qui permettrait de faire des maquettes WYSIWYG, responsive avec des feuilles de style, etc.
Photoshop… Il fait parti de la chaîne graphique et ça demeure un incontournable mais oui, son usage se transforme comme nos job aussi ! C’est sur que le web n’est plus avec des pages clichées comme en début 2000 comme certains designers.
C’est comme pour Dreamweaver… lorsque l’on faisait des sites en tableaux… l’évolution nous fais travailler en div… mais les newsletter, elles se font toujours en pour que ça puisse s’adapter au courriel Pop et iMAP.
Je designer/photographe qui aime les changements, je travaille avec Dream, iWeb, Muse, Coda… et certains autres !
Beau travail, merci pour cette belle analyse
Photoshop aura eu au moins le crédit de reposer les limites du HTM et des intégrateurs.
Et puis après-tout, l’avenir de toute façon n’est-il pas… »donne-moi du contenu, de définirai moi-même comment je veux l’afficher » ?
Toujours content de te lire Étienne