La conception dans le navigateur serait-elle un frein pour le processus de création ?

Le sujet est récurrent depuis 2 petites années maintenant: faut-il “designer” ou concevoir un site web directement dans le navigateur ? De nombreux graphistes, de toutes nationalités, ce sont lancés à fond dedans, et des types comme Andy Clarke vont jusqu’à avoir un discours assez radical sur le sujet:

“We aren’t designing photocopies of web page, we’re designing web pages.”

– Andy Clarke

J’ai moi-même fait deux conférences sur le sujet au ParisWeb 2010 et au Smashing Magazine Meetup Basel. Mais les divers retours que j’ai pu avoir, et surtout cet article de Sarah Parmenter, ainsi que mon expérience personnelle, m’ont fait réaliser que bien que la conception dans la navigateur apporte pas mal de solutions, ça ne semble pas si évident que ça pour tout le monde…

Un petit retour en arrière…

Tout a commencé avec l’arrivée des CSS3. On pouvait finalement faire des coins arrondis, des ombres et j’en passe, tout ça directement en CSS. Alors, nombreux sont ceux qui sont montés au créneau en disant: “Pourquoi continuer avec Photoshop si on a sous la main l’outil idéal pour développer des sites web, à savoir notre navigateur ?”.

Ajoutez à tout ça l’émergence du Responsive Web Design qui a, d’une certaine manière, rendu une partie de la conception quasi obligatoire dans le navigateur, et vous avez quand même pas mal de conditions pour promouvoir cette manière de faire. C’est vrai que les avantages sont évidents:

Conception rapide quand on est à l’aise avec le HTML et les CSS,
Faire des modifications est nettement plus simple que lorsqu’on doit le faire sur Photoshop,
Vous savez tout de suite ce que vous pouvez faire et ce que vous ne pouvez pas faire,
Prototypages dynamiques que vous pouvez présenter à vos clients,
Délais projets raccourcis.

Ce ne sont là que quelques points que j’ai pu récupérer à chaque présentation que j’ai pu faire sur le sujet. Et comme dit plus haut, je ne parle même pas du RWD où l’utilisation du navigateur est quasi indispensable.

OK, mais est-ce si évident pour tout le monde ?

Et la créativité dans tout ça ? Nous avons nos processus de création, nos manières de faire. Est-ce que passer de Photoshop à un navigateur peut être si aisée que ça ? Comme le dit si justement Sarah dans son article, penser un design directement avec les CSS l’empêche d’une certaine manière d’être créative. Ca ne se positionne pas bien du tout dans tout son processus de création.

” My creative brain switches at the point when I open my HTML/CSS editor, and starts thinking in terms of structure and how to achieve the look of my design using as much native CSS as possible.”

– Sarah Parmenter

Et je peux la comprendre. Pour travailler personnellement beaucoup dans le navigateur, il y a des moments où devoir trouver la bonne idée me conduit à nouveau à utiliser Photoshop parce que je me dis que c’est plus rapide que via mon éditeur de code, mais aussi parce que je veux pouvoir tester rapidement des éléments graphiques qui ne sont peut-être pas si simples à mettre en place en CSS. Ou pas du tout d’ailleurs.

Lors de ma présentation au Smashing Mag Meetup, je parlais déjà de ces soucis à évoluer vers le design dans le navigateur pour certaines personnes et j’évoquais le fait qu’on n’est déjà pas obligé de faire comme tout le monde. Ce n’est pas parce que certains disent que c’est top de designer dans le navigateur qu’il faut le faire. Ensuite, comme dit plus haut, on a des processus de création qui font que certaines méthodes nous correspondent plus que d’autres, et que de les changer pose certains problèmes.

Et encore, on n’aborde pas ici non plus le fait de connaître ou pas le HTML et les CSS.

Et s’il y avait une méthode intermédiaire ?

Du coup, personnellement, j’ai trouvé une solution qui fonctionne plutôt bien dans la plupart des cas.

J’ai beau adorer Photoshop, je n’arrive pas à y rester trop longtemps. Je suis trop frustré par certains éléments comme la typographie. Notons ici que j’utilise beaucoup Typekit et que si je veux tester certaines polices, je dois absolument passer par le navigateur. Donc, ce que je fais, c’est que je fait des premières “esquisses” sur PSD, pour choisir un fond, une texture, des couleurs, un certain layout/structure. Puis, je passe très rapidement au navigateur. Et là, je reprends cette structure “globale” et je la détaille progressivement. Je ne reviens plus à Photoshop, sauf si je suis bloqué par un élément graphique à créer par exemple. Le logiciel m’a aidé, au départ, à faire des choix pour mon design, et ces choix ont été possibles parce que je me sens à l’aise sous Photoshop et que la concordance entre l’exécution de mes mains et l’idée dans ma tête fonctionnent de concert. Mais très vite, Photoshop me frustre parce que je commence à penser grille typographique, marge, padding, line-height, etc. Et là, je dois absolument passer sur le navigateur, il ne peut en être autrement. J’ai aussi très envie de mettre en place certaines idées pour les rollover, travailler un peu les transitions ou les animations du site.

Donc, même si ça semble facile et logique pour grand nombre de développeurs front-end, ça ne l’est pas forcément autant chez les designers, tout simplement parce que le processus créatif de départ fonctionne différemment. Les automatismes ne sont pas les mêmes. Mais ce n’est pas grave ! Il est bon de savoir que passer rapidement au navigateur dans la création d’un site web va apporter son lot d’avantages, dont certains sont énumérés plus haut. Et c’est clair que si vous souhaitez proposer un site en responsive web design, travailler dans le navigateur est forcément la bonne solution. Mais prenez d’abord vos repères, essayez de faire évoluer votre processus de création et vous trouverez le bon chemin. Je dis souvent que le plus on pratique la conception dans le navigateur, le plus on l’adopte, et le moins on retourne vers Photoshop. Mais il est clair aussi que pour certaines choses, on va avoir du mal à se passer de Photoshop. Au delà d’y concevoir tout un site, il est très important pour concevoir une partie des éléments graphiques de ce même site.

N’oublions pas non plus que le job du web designer n’est pas le même partout. Quelqu’un qui travaille dans une grosse structure chez une agence ne va pas forcément avoir le même intérêt que le freelance qui touche un peu à tout. Mais globalement les choses semblent évoluer. Photoshop reste un outil incontournable pour beaucoup d’entre nous et le navigateur se présente comme une alternative ou un complément utile pour grand nombre de choses. Ne serait-il pas le bon moment d’essayer d’adapter nos process à ces nouvelles orientations qui risquent de voir le navigateur de plus en plus présent?

http://twitter.com/ephfx ephfx
Poser la question de la conception dans le navigateur comme un frein à la créativité est selon moi un non-sens. La créativité est un processus psychologique, la conception avec un outil est un processus plutôt mécanique régit par une ou plusieurs méthodes. Les deux processus s’enchainent mais le premier est indépendant du second pour pouvoir fonctionner correctement. L’énoncé est peut être posé dans ce sens car, de façon sous-jacente, une partie des webdesigners actuels sont plus des assembleurs que des créatifs. Si l’on part de ce constat, le webdesigner en question, l’assembleur, considère l’utilisation de ses outils comme un acte soumis à créativité, mais finalement il se trompe.
Alors finalement, peut-être serait-il plus juste de poser la question de savoir si la conception dans le navigateur est un frein dans la mise en œuvre d’un projet par exemple.
http://twitter.com/loriskumo Loris Grillet
Sujet très intéressant, merci Francis!
Andy Clarke n’a pas tout à fait tort mais avant toute construction il faut une maquette. On ne va pas blâmer un designer automobile ou un architecte de nous montrer un dessin ou un rendu 3D avant le modèle fini non?
En ce qui me concerne j’ai un peu de la peine à sauter du carnet de notes au code.
Pour moi le navigateur fait partie du processus mais n’en est pas le fondement.
Il en fait partie principalement car le rendu des fontes dans Photoshop est une catastrophe… Tester une typo, sa taille, sa couleur, son interlignage ou même son interlettrage dans le browser est un bonheur. Non seulement car ce sont des paramètres simples à gérer en CSS, mais aussi car on a ici le rendu définitif. Et il est essentiel de pouvoir tester comme notre texte rend dans sa configuration finale. De la même manière que j’imprime parfois des dizaines d’essais de fonte quand je réalise un document imprimé, en varient parfois jusqu’au demi corps.
Mais, à mon sens, Photoshop (ou n’importe quel logiciel satisfaisant vos envies créatives, pour autant qu’on mesure en pixels et en RVB) est essentiel à la création. Je suis le sentiment de Sarah Parmenter quand elle dit que son cerveau switche d’un mode créatif à un mode de construction. Même si les éditeurs de code sont puissants et que les CSS nous permettent énormément de choses, ils restent très peu intuitifs. Dans Photoshop, on peut aisément pousser un élément d’un pixel sur la droite, changer une couleur d’un demi ton, modifier une opacité d’une manière non seulement visuelle, mais aussi instantanée, pas de refresh.
Mettons que je souhaite créer une page avec un fond bleu, un texte en noir dans un bloc blanc avec une ombre portée et mon logo en haut au centre. C’est une action de quelques secondes dans Photoshop alors que même avec la meilleure volonté il faudra quelques minutes pour faire ça en code et il y a de fortes chances que vous deviez de toute manière passer par Photoshop pour redimensionner votre logo.
Sur le point de “savoir directement ce qui est réalisable ou pas” je pense qu’il faut plutôt voir les choses dans l’autre sens: laissons libre court à notre créativité (dans une certaine mesure, entendons-nous) et voyons comment il est possible d’adapter ça à la réalisation.
Si je ne m’étais jamais dit ça, je n’aurais jamais appris WordPress par exemple, car je n’avais jamais mis les maisn dedans au moment ou j’ai designé mon premier site qui allait être construit autour de WP.
Bien entendu ça demande de la flexibilité et de bonnes connaissances du web afin de ne pas faire n’importe-quoi et de bien connaitre le developpeur qui va reprendre votre travail dans le cas ou vous ne faîtes que le design.
En ce qui concerne le responsive webdesign, je pense que la meilleure solution est de faire des wireframes béton. En expliquant le processus de travail à notre client, en lui montrant des exemples et en lui présentant des wireframes ou alors même des maquettes si vous êtes motivés (peut être plus nécessaires pour la version smartphone) je pense qu’on facilement le convaincre de notre capacité à gérer le projet et lui montrer à quoi ressemblera son site sans avoir le résultat exact sous les yeux.
Une fois de plus, il faut donc des bases de développement web afin de faire un bon design mais à mon sens (et il s’agit d’une préférence personnelle) il faut aller le plus loin que l’on veut en utilisant les outils avec lesquels on est le plus à l’aise,
francischouquet
Personnellement, je pense que la créativité peut être sujette à des éléments extérieurs. Pas dans tous les domaines mais en ce qui concerne le web design, je pense que c’est le cas. Il y a une certaine quantité de contraintes dont tu tiens volontairement ou involontairement compte quand tu es dans un processus créatif.
Maintenant, de là à dire que le web designer n’est, du coup, pas un véritable créatif n’engage quoi toi.
francischouquet
Je suis globalement d’accord avec ton looonnnng message Loris ^^ et c’est un peu pour ça que j’ai écrit cet article parce que finalement sur le papier ça semble génial mais concrêtement je me suis rendu compte que pas mal de monde s’en sortait autrement, tout en utilisant le navigateur dans certains cas, mais qu’ils avaient du mal à se passer de Photoshop même si c’est loin d’être l’outil idéal. Genre le RWD, personnellement, je n’ai encore jamais fait de maquettes PSD, ça me semble un peu loin de la réalité. Maintenant, faut voir les organisations projets et comment on peut gérer ça avec les clients. Perso, je mise sur le navigateur pour le RWD.
http://twitter.com/loriskumo Loris Grillet
Haha, un peu long en effet. Peut-être parce que j’avais en tête un article similaire depuis longtemps… ^^,
Après, c’est à chacun d’utiliser les outils qu’il préfère. L’outil rest un outil et ne doit justement pas diriger la création. Ce qui m’ennuie c’est les intégristes qui te balancent “si tu designe encore dans Photoshop tu es un looser” (et inversement).
J’ai récemment eu une demande de site responsive dont je ne m’occuperai pas du design. J’ai donc prévu de bosser en wireframe + PSD. Je vous ferai un retour d’expériences quand j’aurai fini ce projet!
Je pense que chacun doit faire comme il le sent le mieux. La seule condition je dirais c’est le pipeline de production: on doit être en mesure de collaborer avec ses collègues, partenaires et fournisseurs.
francischouquet
Tout à fait d’accord avec ça. Et n’hésites pas pour le retour d’expérience du RWD en PSD, ça m’intéresse
Yoann
Ton retour est intéressant, je n’étais même pas au courant que c’était une vraie méthode de travail. Si je comprends bien l’article, tu nous montres que pour toi la conception in navigateur n’est pas un frein pour ta créativité.
Je reviens néanmoins sur un truc que tu as dis et où j’aimerais que tu m’éclaires un peu “Mais très vite, Photoshop me frustre parce que je commence à penser grille typographique, marge, padding, line-height, etc.”. Sauf erreur de ma part, à partir de ce moment là ta créativité passe tout de même en second plan. J’ai du mal a imaginer qu’il soit possible de réaliser un site original (côté graphique et animation) avec cette méthode.
Je ne dis pas qu’il n’est pas bon de suivre les normes et contraintes pour travailler mais j’ai quand même l’impression que cette méthode s’applique à une catégorie de site en particulier (ceux qu’on voit le plus en ce moment). Quelque part avec cette méthode, j’aurais plutôt l’impression de réutiliser ce que j’ai déjà vu ailleurs et de le modifier pour le mettre un peu à la sauce de la réalisation en cours. Un truc simple sans réinventer la roue quoi.
Modifier un ou plusieurs éléments sur photoshop c’est rapide, mais le faire in navigateur (html/css) c’est quand même plus long… du coup cette façon de travailler ne m’inciterait pas à tenter 20 000 choses, de peur de perdre du temps et de brasser de l’air.
Comme l’a très bien dit Ephfx et pour reprendre ces mots, la créativité est un processus psychologique … la force de pouvoir créer quelque chose de jamais vu, une conception novatrice.
Autrement dit je pense que la conception dans la navigateur apporte peut-être quelques solutions, mais pour des petits sites ou alors pour des structures déjà vues, mais en aucun cas pour des concepts créatifs et nouveaux.
En fait, j’ai du mal à comprendre pourquoi le terme créativité vient se glisser dans le titre de l’article. La question aurait du être tournée différemment non ?
Riplay777
Bret Victor nous montre que la créativité vient aussi avec de nouvelles interfaces, de nouveaux outils. Dans sa démonstration, c’est dans le navigateur que ça se passe http://vimeo.com/36579366
http://twitter.com/ephfx ephfx
On mélange créativité et création. Tu peux amener des contraintes dans ton processus de création, mais la créativité c’est autre chose, ça relève du concept et de l’immatériel. Amener un cadre technique à la créativité, si tenté que ça soit possible, ça reviendrait à avoir des idées (voir des rêves) en les pré-contraignant avec des impératifs techniques, ça n’a pas de sens, c’est comme essayer d’avoir des idées en plongeant sa tête dans une boite de barbelés ..
En fait tu parles de la phase qui suit, celle de la mise en forme, celle où l’on apporte le cadre technique au processus de transformation et là c’est différent.
C’est ce qui me fait dire que le webdesigner qui trouve son concept lors de la phase de construction n’est pas un créatif pur et dur mais plus un assembleur (c’est plus de l’opportunisme et de l’automatisme de reproduction que de la créativité d’une certaine façon). Contrairement à ce que tu veux me faire dire (tu me cites comme généralisant les choses, relis moi, je n’ai pas généralisé) je pense qu’une partie des webdesigners fonctionnent comme ça (une partie n’est pas tous .. ).
Alors oui, même avec cette nuance, ça n’engage que moi, mais ça n’a rien d’insultant dans le fond, je connais de très bon assembleurs et de très bon créatifs.
D’un point de vue plus général, je constate que depuis un bon moment, les sujets qui traitent de webdesign sont majoritairement axés sur les outils et les méthodes, plutôt que sur les idées et les concepts. Donc en voyant la créativité cerclé par cette obsession technique, ça me fait réagir.
Pour le reste, ton article est plus un retour d’expérience qu’une réelle question finalement, la contrainte n’existant que par l’obligation de l’outil, ce qui n’est pas le cas pour la conception d’un page web. Sinon, hormis cette petite ambiguïté introduite par le titre, je trouve ton retour d’expérience sur cette méthode intéressant.
Sur ce, bon week-end à tous ^^
francischouquet
Ok, là je comprends mieux ce que tu veux dire et je suis assez d’accord avec ça, même si pour moi la créativité et le processus de création sont intimement liés. La phase de créativité dans le webdesign est quelque peu biaisée du fait de ces contraintes techniques chez pas mal de monde et du coup, on est plus dans une phase de création, d’assemblage comme tu dis. Et c’est clair que ce n’est pas top pour proposer quelque chose de nouveau, d’innovant.
Maintenant, concernant les sujets traitant du webdesign, je ne peux qu’être d’accord et on en a déjà un peu parlé sur Twitter. Je crois que c’est sûrement un peu dû à cette vision de plus en plus technique du métier, et en oubliant pas qu’au niveau anglo saxon le web design a une vision plus large, ça reprend généralement graphisme + front-end. Mais c’est clair que ça manque d’articles sur des idées, des concepts, de choses. Mais si ça te tente, la porte ici est toujours ouverte
PS: je modifie le titre en espérant que celui-ci sera meilleur
francischouquet
“Sauf erreur de ma part, à partir de ce moment là ta créativité passe tout de même en second plan.”
-> Oui, tout à fait. En fait, les choix typographiques sont déjà fait, j’ai souvent déjà passé du temps sur papier et PSD pour avoir le visuel que je veux. Le passage au navigateur se fait une fois que les éléments sont globalement positionnés comme je veux. Mais pour les caler ou donner un rythme vertical, je ne le fais pas sur PSD je préfère passer sur le navigateur. Mais tu as raison, la période de créativité est terminée à se moment-là.
“Modifier un ou plusieurs éléments sur photoshop c’est rapide, mais le faire in navigateur (html/css) c’est quand même plus long… du coup cette façon de travailler ne m’inciterait pas à tenter 20 000 choses, de peur de perdre du temps et de brasser de l’air.”
-> Suis pas forcément d’accord. Certaines modifs sont facilement faisables sur le navigateur avec impact direct sur le reste de l’ensemble du site. Sur Photoshop, à moins d’utiliser les comps, ça risque de prendre plus de temps.
“En fait, j’ai du mal à comprendre pourquoi le terme créativité vient se glisser dans le titre de l’article. La question aurait du être tournée différemment non ?”
-> J’ai modifié le titre légèrement pour qu’il soit plus en adéquation avec le processus de création que la créativité elle-même.
francischouquet
Présentation très intéressante, merci pour le partage
http://twitter.com/STPo Christophe Andrieu
À mon sens le design dans le navigateur n’est efficace que si la DA du projet est déjà bien en place : on ne fait pas de DA dans Firefox, à moins de se limiter à des choses minimalistes et à de l’agglomérat de ressources toutes faites (icônes prémâchées, textures de stock, photos de stock…). Ça n’est pas de la DA, c’est du patchwork, et c’est excessivement restrictif (en plus d’être rarement heureux).
Je pense qu’on parle donc de deux choses assez différentes : d’un côté la phase de Direction Artistique (concept, stratégie, émotion, sens, etc.), de l’autre la phase de Web Design (structure, hiérarchie visuelle, lisibilité, portabilité, etc.). Pour la première : Photoshop (carnet, crayon, Gimp, ce que vous voulez). Pour la seconde : CSS (pourquoi pas).
francischouquet
Justement, le truc c’est que de plus en plus de designers essaient de passer la DA directement sur le navigateur. Maintenant, ceux-là persistent â dire que ce n’est pas, comme tu dis, de l’agglomérat mais une véritable recherche créative. Mais pour dire la vérité, ce que j’ai vu jusqu’à présent de ces personnes est plutôt minimaliste et simple. Un peu comme un raccourci pris à un moment donné…
http://twitter.com/guillaumgregoir Guillaume GREGOIRE
J’ai plus d’inspiration avec ma page planche et mon notepad++ qu’avec Photoshop, mais c’est sûrement parce que je suis plus développeur que designer. :p
Spartan
Je rejoins entièrement Christophe, je vois pas comment directement en CSS3 on peut être aussi libre que sur Photoshop. Pour placer des typos, faire des coins arrondis ou des colonnes responsives c’est très bien, mais dès qu’on a un site avec des éléments plus travaillés, des compos graphiques, des illustrations, on peut oublier.
S’il s’agit de copier encore et encore et encore des sites minimalistes avec fond simple et typos bold, ben oui ça peut se faire uniquement en CSS3 mais pour moi ce n’est pas très “créatif”. Outil limité et pas mal de contraintes.
francischouquet
Attention, on ne parle de remplacer complètement Photoshop. Si tu regardes bien dans l’article, je dis que de toute façon, il faut le garder pour la création de tous les éléments graphiques, tels que des illustrations par exemple. Là c’est clair qu’on ne peut pas s’en passer.
theotix
Je trouve ton article vraiment intéressant, personnellement, j’ai l’habitude de commencer la structure du site et quelque élément que je voudrais clarifier dans un éditeur d’image (oui moi j’utilise theGimp) mais le reste,je le fait sur un éditeur de texte, et ça ne me bloque pas plus que ça car j’ai auparavant élaboré le design dans ma tête et j’ai une idée bien précise de ce que je veux faire.
Sinon Bravo.
Cordialement
Pingback: La boite à outils du webdesign | Identitool's studio
http://twitter.com/_Metali Metali
Très bon article! C’est vrai que depuis quelque temps j’ai pris moi-même l’habitude de commencer à faire le site sous photoshop puis inconsciemment, je me retrouve en train de le coder pour voir l’effet que ça donne, les réactions pour les boutons, et si il y a des ajustements à faire niveau taille/position. Mais très rapidement, je me suis rendue compte comme beaucoup qui suivent cette technique qu’effectivement par moments on “bloque”, on à plus d’idées ou on a besoin de retourner sur Photoshop pour continuer le design. Je pense que les limites de ces habitudes sont surtout qu’on conçoit mal le rendue final, et que ça bloque pas mal dans la progression. Après ça dépends aussi de ce qu’on maîtrise le mieux, les codes ou le pinceau.
Pingback: Un design collaboratif d’interface » Webdesign Friday (#wdfr)

Webdesign Friday (#wdfr) - La communauté des webdesigners francophones

Les vendredis Webdesign !Chaque semaine, un nouvel article par un professionnel du Web.