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
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é »
Mood boards can be too vague and mockups can be too specific. Style tiles strike a nice balance in between
Samantha Warren, designer chez Twitter, citée par Luke Wroblewski
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. C’est aussi possible de le réaliser en CSS à partir de ce modèle.
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
Stop designing in Photoshop. Use something like Bootstrap where you can see what things really look like and you can concentrate on the “system” not the “page”
Aaron Walter, Director of User Experience, MailChimp,
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?
