Trois questions à… Sophie Taboni

Trois Questions

1. Peux-tu nous résumer ton parcours et nous décrire ton travail actuel, en temps que designer graphique ?

   J’ai un parcours un peu atypique puisque je suis d’abord passée par des études de sciences humaines (prépa khâgne, maîtrise d’Histoire Contemporaine, Sciences Po Lille). J’aimais beaucoup tous ces domaines mais je ne savais vraiment pas où cela me mènerait professionnellement. Je me suis cherchée, j’ai fait pas mal de stages : en journalisme, dans la production de films documentaires, dans un musée… Et après l’obtention de mon diplôme, je suis passée maître dans l’art du bilan de compétences ! La seule chose dont j’étais à peu près certaine, c’est que je voulais faire quelque chose de concret et de créatif. Je pensais depuis quelques années au graphisme, domaine dans lequel j’étais autodidacte, mais je n’osais pas me lancer dans une carrière professionnelle. Pas facile de tout remettre en question du jour au lendemain !

   Ma décision prise, j’ai suivi une formation courte de graphiste multimédia au CNA CEFAG puis je suis entrée en alternance dans une agence web, Clever Garden, au sein de Clever Age Paris : une petite structure où j’étais la seule graphiste en dehors du directeur artistique. À l’École Multimédia, je suivais des cours d’intégration HTML/CSS ; dans l’entreprise, je travaillais uniquement sur le design d’interfaces. J’ai donc découvert et appris mon métier sur le tas. En un an et demi, j’ai eu la chance de travailler avec des gens compétents et passionnés, qui m’ont sensibilisée aux bonnes pratiques et aux standards du web et m’ont inculqué des notions de typographie, d’accessibilité, d’ergonomie. J’ai réalisé que non, le webdesign, ce n’est pas seulement faire de « jolis boutons super glossy que t’as trop envie de cliquer dessus ».

   Au sein de l’agence je fais du prototypage, du design d’interface web et mobile, du logo, des newsletters… Je zappe souvent d’un projet à l’autre mais j’ai aussi l’occasion de travailler sur la longueur, de la conception jusqu’à la créa graphique. J’aime beaucoup mon métier. Bien sûr il s’accompagne parfois de frustrations : une différence d’appréciation avec le client, un brief imprécis, une dégradation (même « élégante ») dans un navigateur, une contribution inattendue dans un CMS… Cependant, on peut atténuer ces problèmes en communiquant plus et mieux, en essayant d’anticiper les problématiques d’intégration et de contribution. Et puis, il faut parfois savoir lâcher du lest.

2. Quels sont tes outils du quotidien et tes techniques de travail ?

   Vaste question ! Par où je commence ?

   Décrivons une situation idéale : j’ai un brief tout beau tout neuf et je dois commencer sur le prototype, jusqu’à la livraison des maquettes finalisées à l’intégrateur. Je n’ai aucun autre projet en cours, un client qui dit oui à tout, tout le temps que je veux, du café et des sushis à volonté…

   Le premier outil, déjà, c’est le papier-crayon. Au début, j’avais tendance à me précipiter sur ma tablette graphique. Mais j’ai vite compris à quel point se lancer dans le proto ou la créa sans avoir une idée claire de ce qu’on veut peut faire perdre du temps. Je préfère poser les idées sur papier. Il y a une immédiateté que je ne retrouve pas sur l’écran. De plus, il est très simple de cette manière d’avoir des retours rapides et de procéder de manière itérative.

   Pour le prototypage, j’ai commencé sur Axure mais j’utilise maintenant Pencil Sketching. C’est un plugin Firefox qui permet de faire des choses assez précises, moins brouillon que Balsamique, moins complexe qu’Axure. Il a aussi l’avantage d’être gratuit et de fonctionner nativement sur tous les systèmes d’exploitation. C’est quand même mieux pour le travail en équipe !

   Avant de commencer la créa, et en fonction du brief, j’essaie de fixer un style, une combinaison de polices de caractères et une palette de couleur. L’intention d’abord !

   Il est rare d’avoir le budget pour des polices payantes. J’utilise donc beaucoup Font Squirrel pour les polices non standard et gratuites, à condition bien sûr que le @font-face soit compatible avec les contraintes techniques du projet. Pour créer la palette, je m’aide de Color Scheme Designer 3 ou Kuler quand j’ai déjà une couleur de base, celle d’un logo ou d’une charte graphique préexistante par exemple. Mais je préfère quand même m’inspirer de palettes de couleurs que j’ai repérées sur des illustrations, des photos… Je fais pas mal de veille (merci Diigo et Screen Grab) : j’ai donc de la matière toute prête pour ces recherches en amont.

   Me voilà donc avec un super brief, un proto validé et une idée de ce que je veux en faire, toujours dans un monde idéal. J’ouvre enfin Photoshop. Au début, j’utilisais Illustrator pour les maquettes. Mais au bout de trois jours (et beaucoup de cheveux) perdus à recomposer les fichiers « .ai » en « .psd » pour le découpage, j’ai abandonné. Je réserve Illustrator à la réalisation des pictos et autres éléments graphiques en vectoriel.

   J’ai donc devant moi mon fichier « start.psd » avec une capture de navigateur, quelques dossiers prénommés et ma grille Blueprint. Je n’ai jamais vu la grille comme une contrainte. Je pense que c’est au contraire le meilleur moyen d’allier rythme et harmonie. Et de s’assurer que l’intégration sera fidèle à la maquette ! La seule chose qui me gêne avec Blueprint est la taille des gouttières : 10 pixels, c’est parfois un peu juste. Il faudrait pouvoir l’adapter aux besoin de chaque projet. Au delà de ça, je songe de plus en plus à élargir la taille de mon layout. Les résolutions d’écran ne cessent d’augmenter. La part des écrans de 1024 pixels de large, sur laquelle on se base, a fortement diminué. Pourquoi rester bloqué sur des designs de 950 pixels de large ? De manière générale, il est moins pertinent aujourd’hui de se baser sur une unique résolution d’écran pour un design de site. Si le client l’accepte, avec ce que cela implique en terme de coûts, on pourra proposer un design adaptatif pour plusieurs résolutions d’écran : une large, une adaptée aux moyennes résolutions d’écran et aux tablettes, et une adaptée au mobile. Les media-queries et nos supers intégrateurs feront le reste !

   J’ai fait l’impasse sur les outils de validation de contrastes (pour l’accessibilité), sur tous mes petits plugins Firefox adorés (Firebug, WebDeveloper et cie) et certainement bien d’autres mais je me contenterai de dire qu’outils et techniques sont loin d’êtres figés. Ils évoluent avec le support et je n’utiliserai certainement pas les mêmes dans un an.

3. Et quelles sont tes astuces dans le cas d’une situation plus compliquée ?

   Je râle, je m’insurge et je fais beaucoup de bruit dans l’open-space. Après ça, je commence à chercher une solution à mon problème ! S’il est trop tard, je m’exécute en continuant de ruminer dans mon coin, pour le plus grand plaisir de mes collègues. Pour éviter au maximum la frustration je ne vois en réalité qu’une astuce : l’anticipation. Il faut prévenir les éventuels obstacles à un projet. Facile à dire, me direz-vous, mais comment ?

   Tout d’abord en rassemblant toutes les informations nécessaires à la bonne conduite du projet : quelles sont les contraintes techniques ? Qui décide et a le dernier mot sur la validation des maquettes ? Ce serait dommage de faire une jolie créa avec du text-shadow partout et de s’apercevoir que c’est pour un intranet utilisé uniquement sous IE, qui ne le prend pas en charge…

   De la même manière, il est important de savoir très tôt qui a le dernier mot sur la validation des maquettes. Les différents corps de métier, des services informatiques aux personnes chargées de la communication, n’ont pas toujours les mêmes points de vue et priorités lors de la création d’un site. Pour éviter de voir une maquette validée après dix allers-retours avec un premier interlocuteur et rejetée par un autre décideur, il faudra tenter de répondre aux problématiques de chacun.

   Il ne s’agit pas « d’éduquer » le client mais de lui donner à voir et à comprendre.

   Une deuxième manière de s’éviter des soucis consiste selon moi à communiquer le plus possible et le plus tôt avec le client. Il ne s’agit pas de « l’éduquer » comme on entend parfois dire, mais de lui donner à voir et à comprendre. Une maquette, un logo ou autre doivent s’accompagner systématiquement d’explications sur la démarche et les choix effectués. Les termes doivent être eux aussi explicités. Un de mes collègues a récemment parlé de « dégradation élégante » à un client souhaitant que son site soit compatible IE 6. Ce terme faisant un peu peur, il a présenté deux versions des maquettes, une optimale et une dégradée. Le client a tout de suite été rassuré sur la qualité du rendu et a accepté la démarche. Tout le monde y gagne : cela évite au client une déconvenue au moment de l’intégration des maquettes et permet au designer de se faire plaisir sur la créa, tout en sachant qu’il y aura une version dégradée sur certains navigateurs.

   Il est important, particulièrement dans un contexte tendu, de procéder par étapes et validations successives. Je fournis de plus en plus de croquis d’intention aux personnes censées valider mon travail. Ça paraît évident mais on ne le fait pas toujours assez. Il est tentant d’aller jusqu’au bout d’une idée quand elle nous vient, mais c’est tout aussi frustrant de la voir rejetée quand on a presque achevé de la réaliser ! Par contre, il faut arriver à aller assez loin dans la réalisation pour que le client puisse se projeter : un croquis trop sommaire ne lui parlera pas forcément. Tout est dans cet équilibre entre la nécessité de proposer rapidement une ou plusieurs idées et celle de donner à voir quelque chose de convaincant.

   Enfin, un des problèmes auquel on est très souvent confronté en début de projet est le manque de contenus. Inutile de se lancer dans un design basé uniquement sur du « Lorem ipsum » et des visuels neutres : c’est un exercice difficile, parfois trompeur et forcément éphémère. Or le design est justement là pour apporter une vision. Il faut être force de proposition, sur les objectifs du site, comme sur les contenus qui en découlent. Que ce soit pour une accroche, un concept, un ton rédactionnel ou une hiérarchie de l’information, il faut oser présenter ses idées. C’est en voyant quelque chose que le client affinera sa démarche, les retours seront plus précis et le contenu sera produit plus vite au final.

   Selon moi, toutes ces astuces sont valables quelles que soient les contraintes de temps. Pourquoi ? Tout simplement parce qu’elles en font gagner beaucoup ! Tout le temps perdu en amont sera épargné en aval du projet. Celui-ci se fera plus sereinement et tout l’open-space vous en sera infiniment reconnaissant.

Interview réalisée en mai 2011.