Maquettes interactives : le design dans le navigateur

Toujours à la recherche de nouveaux process, outils et pratiques, je me suis penchée sur l’idée de ne plus passer par Photoshop pour la création graphique de sites, mais de passer tout de suite à l’intégration. Francis Chouquet (fran6art) parle de « maquettes interactives« .

Le sujet fait un peu de bruit depuis quelques mois, certains voient les avantages de cette manière de travailler, d’autres ne sont pas prêt d’abandonner Photoshop de ci-tôt. Et bien sûr il y a ceux qui se situent au milieu.

Pourquoi une idée aussi farfelue ?

Tout Designer Web soucieux des meilleures pratiques en matière d’ergonomie, de référencement et d’accessibilité, saura que le contenu d’un site est primordial. Alors pourquoi ne pas structurer le contenu d’une page avant de passer à la couche design ? Voilà d’où est née l’idée du « designing in the browser », ou en français, du design dans le navigateur.

Cette manière de travailler n’est pas nouvelle, mais la naissance de CSS3 lui donne un intérêt nouveau. En effet, il est maintenant possible de créer de nombreux effet tels que des ombres, des rotations, des transparences et des dégradés, avec CSS3.

Vous me direz, CSS3 ne marchera pas dans de nombreux navigateurs populaires, alors pourquoi compter dessus ? Il y a plusieurs réponses possibles à cette question ;

  1. On pourrait dire que justement, cette méthode va permettre de concevoir un site avec les principes de « dégradation gracieuse » en tête. Peut-être que IE n’aura pas de coins arrondis ni d’ombre, mais on peut faire en sorte que la page reste visuellement intéressante et ergonomique sans ces éléments de design.
  2. Travailler dans le navigateur dès le début peut permettre d’éduquer son client de manière plus efficace : il verra tout de suite les différences d’un navigateur à l’autre au lieu de s’étonner qu’au final, son site n’est pas tout à fait le même que la maquette sous Photoshop.
  3. On peut choisir cet outil de travail comme point de départ, mais rien ne nous empêche d’altérer le code et de rajouter des images par la suite pour que certains effets soient visibles sur tous les navigateurs. Avant tout l’intérêt est de ne pas travailler dans un format statique. On peut même faire des captures écran et les envoyer au client si on veut mais ça perd un peu de son intérêt.

Photoshop vs. le navigateur

Alors bien entendu chaque méthode a ses avantages et ses inconvénients. Dans Photoshop il sera sans doute plus rapide d’arriver à un design satisfaisant. D’après Dan (Wuup) (mise à jour du 25/05/2012 : le site de Wuup n’existe plus), qui a testé le design dans le navigateur pour ses clients, la phase du design initial est plus longue que dans Photoshop mais au final on gagne du temps sur le développement et donc sur la totalité du projet.

Je pense que les deux méthodes sont valables ; qu’on travaille dans Photoshop ou dans le navigateur, il s’agit de choisir un outil de création graphique qui sera le plus adapté à un projet et à un Designer Web.

Dan coupe la poire en deux en suggérant que le design d’une ou deux pages soit fait dans Photoshop, et le reste du site dans le navigateur. Ça me parait assez raisonnable comme approche, mais je ne suis pas sûre que ce soit très novateur.

Au moins, si on est le genre de Designer Web qui sait coder, on a le choix des outils. Mais ça c’est un autre débat qui fait du bruit depuis plusieurs années…

Quelques liens

  • sxsw.beercamp.com : voici un site qui a été réalisé non seulement dans le navigateur, mais surtout avec aucune image – que du code !
  • 24ways.org (en anglais) : Meagan Fisher exprime son dégoût pour Photoshop et son approche du design qui consiste à commencer par le contenu.
  • Design Shack (en anglais) : voici une liste d’astuces et d’outils pour aider à concevoir un site dans le navigateur.

Commentaires

  1. Bonjour, le principe pourrait être intéressant mais je vois un gros point noir : la créativité.
    En utilisant cette manière, on se met déjà des barrières et des œillères. Le principe de dégradation gracieuse doit avoir certaines limites : on ne dit pas la même chose avec des coins arrondis et des coins carrés.
    Pour ma part la meilleurs manière d’aborder un design web reste une feuille et un crayon (oui, il faut savoir dessiner) et de bien connaitre les possibilités du web.
    Avec votre méthode, vous mettez le design au service du développement, hors pour faire avancer les choses, il faut que ça soit l’inverse : c’est au développeurs de réaliser le design créer (dans la mesure des techniques possibles évidemment, mais pas dans la mesure de la galère).
    Le site sxsw.beercamp.com est certes assez impressionnant techniquement, mais complètement aberrant du point de vu du code (utiliser les spans pour faire un dessin, quelle validité ?).
    Enfin, à toutes les personnes qui déprécient Photoshop, je dirais : oui, c’est normal, c’est un logiciel de retouche photos (même si Adobe tente de faire croire qu’on peut faire du web avec). Vous voulez faire des interfaces ? Utilisez Illustrator et votre monde va s’éclairer (je n’imagine même pas la galère pour faire un cadre arrondi avec un dégradé sous Photoshop, surtout si après il faut changer le radius du coin).
    Quant à gagner du temps, j’en doute particulièrement. Si vous devez proposer 3 design à votre client, ça veut dire 3 développement. Quand je compare le temps que ça prend de faire un design dans Illustrator et le temps que ça me prend de l’intégrer, le calcul est vite fait.

  2. raphaelle a écrit:

    Bonjour Greg,

    Je comprends tout à fait ton point de vue mais je pense qu’il ne faut pas être trop rigide : n’y a-t-il pas tout simplement plusieurs outils pour plusieurs profils de web designers ? Je trouve que c’est plutôt une bonne chose :)

    Personnellement je me vois mal utiliser Illustrator pour le design de sites car j’utilise Photoshop depuis plus de 10 ans donc je me sens à l’aise avec cet outil. Je n’exclue pas d’utiliser Illustrator un jour, tout comme j’avais envie de tester le design dans le navigateur.

    Pour l’instant cette dernière méthode ne me convient pas complètement, mais il y a des web designers renommés à qui ça convient donc pour moi ça reste une option.

    Est-ce que ça peut faire gagner du temps ? Je pense que oui, sur certains projets assez simples, surtout si on met en place une structure de code comme WordPress et qu’on met la « couche » design par la suite. Si la structure et les contenus sont déjà en place ça me paraît intéressant de travailler à partir de cette base. Rien n’empêche de passer de Photoshop au code. Au final ça peut être beaucoup plus facile de faire des changements et l’intégration est déjà faite.

    Pour le site de sxsw.beercamp.com il s’agit pour moi d’une expérimentation pure qui n’a été possible que parce que le site s’adresse à des gens du métier. J’espère qu’on va voir de plus en plus de SVG pour obtenir ce genre de visuels.

Rétroliens

  1. […] Pour moi, les deux arguments sont valides mais est-ce que ça ne dépend pas de l’individu, de sa sensibilité et de ses méthodes de travail ? Je trouve que c’est tant mieux s’il y a plusieurs approches et outils possibles à la création Web. […]

Exprimez vous!

*