La première que j’avais vu était sur le Design Thinking (par Benjamin Servet). Mais avant-hier, le sujet était sur les relations entre l’expérience utilisateur et la marque (15 février 2011 : Rémy Bourganel sur l’UX et la marque).

Le propos était de montrer que les réflexions des concepteurs et designers doivent fortement prendre en compte la marque, son image, son ADN.

La conférence était fortement conceptuelle et j’avoue être restée parfois un peu sur le bord de la route. Néanmoins, Rémy Bourganel (R&D chez Orange et enseignant aux Arts Déco) nous amenait à penser les usages avec un œil neuf, à imaginer les interfaces enrichies de ponts entre les marques, les terminaux, etc. en ayant toujours en tête ce qui fait l’identité de la marque et comment, à partir de cette identité, présenter des nouvelles expériences. Quelques exemples en vrac ?

• imaginez un partenariat entre une enseigne de sport familiale et une société d’assurance : une application à porter sur soi enverrait des infos sur notre activité sportive et la société d’assurance adapterait ses tarifs en fonction.
• imaginez envoyer un « gong » avec géolocalisation et un message « Je pense à toi » à la place de la traditionnelle carte postale
• imaginez une interface représentant votre cercle d’amis sous forme de personnages répartis dans un paysage en fonction de votre degré d’interaction avec eux. Les personnages se manifestant de différentes façon quand ils sont porteur d’un ou plusieurs SMS, messages vocal, etc.
  (prototypé chez Nokia, une version a été commercialisée l’année dernière en Asie)

Le but étant de présenter une expérience plus riche et plus structurante dans la relation usager/marque que la traditionnelle petite histoire de 30′ secondes pendant la coupure pub de la télé.

Ce type de démarche nécessite bien-sûr un fort investissement (temps, énergie, argent, disponibilité) en R&D. La multiplication de prototypage est un facteur constructif dans cette démarche mais cela ne doit pas être le seul axe.
Apple, par exemple, fait énormément de prototypage mais regarde également ce qui se fait ailleurs et rachète les innovations qui peuvent les intéresser et qui corresponde à leur identité, à ce qu’ils veulent véhiculer de leur image.

Voilà ce que j’ai pu en ressortir. La conférence, de ce que j’ai pu en voir, a eu un franc succès.

Photo : mauricesvay (CC BY-SA 2.0)

UX Paris est une initiative bénévole dont la vocation s’anime autour de la démarche centrée utilisateur. Entres-autres choses, UX Paris organise des conférences et celle du 24 novembre 2010, sponsorisée par Paris-Web, portait sur le Design Thinking.

A cette occasion, Benjamin Servet de l’agence nealite, est venu présenter sa vision du Design Thinking.
La méthodologie étant facilement trouvable dans les livres, Benjamin Servet a voulu se concentrer plutôt sur la présentation des principes importants :

• La culture à insuffler
• Brainstorming et observation
• Prototype et tests

Définition

Définir Design Thinking n’était pas l’objet de la conférence et, quand la question de la traduction du terme a été posé, Benjamin Servet a avoué n’avoir pas su trouver de moyen de le traduire en français.

Benjamin a notamment rappelé que le terme « design » ne fait pas référence à l’artistique et qu’on pourrait plutôt le voir dans le sens de « dessein« . Le design est en fait apparu avec l’industrialisation dès lors qu’il fallait concevoir ou accompagner un produit, quel qu’il soit (objet, mise en page, etc.)

Le design thinking, c’est plus un groupe, une culture commune qu’une esthétique. Le hasard et l’expérimental y sont favorisés et le tout est centré sur l’expérience utilisateur. Cette réflexion globale (fonctionnelle et esthétique) est présente à chaque étape de la conception.

Design Thinking sur Wikipédia

Historique

D’abord, un web consultatif, puis, autour de ce qu’on a appelé le web 2.0, un web participatif.
Maintenant, le web se conçoit dans la mobilité (partout, tout le temps).

En parallèle, les attendes des utilisateurs ont donc changés. Dans la catégorie « besoin », il y a l’info et le produit. C’est avec la catégorie des « plus » qu’un annonceur pourra faire une différence :  sur les services et l’expérience.
Cette différenciation en enrichissant services et expérience doit se faire en parallèle d’un univers de plus en plus complexe : le client-annonceur ne sait plus ce qu’il doit faire avec les réseaux sociaux et la multiplicité des plateformes.

Méthodologie

C’est une méthodologie du collectif et du collaboratif : les équipes doivent être multi-disciplinaires.

Tout comme dans le théâtre classique, elle répond à la règle « unité de lieu, de temps, d’action« .
Une pièce unique est consacrée au projet. Tous les livrables (post-it, brouillon, idées) y sont accrochés en permanence et à disposition de chaque membre de l’équipe. Le tout est « à plat » (et non, comme sur un ordinateur, consultable élément par élément).
Le temps est prédéfini et doit contribuer à la notion d’urgence. Il n’y a pas de travail en cascade (chaque spécialité après l’autre) mais une action commune pour garantir l’energie de l’ensemble et l’unité.

Conseils

« Arrêtez de faire des « produits » ».
Les équipes sont compartimentées et chacun fait son application iPhone – par exemple – de son côté.
Il en découle un manque de fluidité entre les appli, par exemple.

Observation

Observer les utilisateurs, l’environnement, les usages. Exemple : aller voir le comportement des usagers en magasins pour penser un site de vente en ligne.
(bien-sûr, la réflexion peut aussi se passer hors du contexte)

Brainstorming

7 à 8 personnes, sans chef, mais avec un animateur (sans niveau hiérarchique, donc). Il n’y a pas de mauvaises idées. Le but est de produire 100 idées en une heure.
Ensuite, regrouper les idées ensemble pour en extraire, les trier, les côter. Structurer en fonction de l’objectif.
Reboucler ensuite sur un deuxième brainstorming avec ce nouveau groupe d’idées.

Prototype

Faire des prototypes dès le début des tests (quite à ce qu’ils soient moches et mal faits)
Des équipes utilisent par exemple des post-it collés sur un écran d’iPhone en guise de prototype : il n’y a ni perte de temps ni perte d’énergie à créer le support et l’énergie reste concentrée sur l’idée et l’avancement.

Conclusion

La conclusion de Benjamin Servet est que la culture de l’expérience utilisateur reste encore à insuffler au sein de nos entreprises pour faire émerger des départements dédiés.

Son tweeter : @benjaminservet
Photo : mauricesvay CC BY-SA 2.0

Vos propres références sont les bienvenues en commentaire.

(et à propos de la veille : Faire de la veille)

Articles et billets

• OpenWeb
  #qualitéweb  #standards
  http://openweb.eu.org
• Pompage
  #webdesign#standards
  www.pompage.net
• Planète Accessibilité
  #accessibilité
  http://planete-accessibilite.com
• Webatou
  #accessibilité
  http://blog.webatou.info
• Mammouthland
  #intégration
  www.mammouthland.net

Outil

• Projet Opquast – Gestion de la qualité
  #qualitéweb  #referentiel #bonnespratiques
  http://www.opquast.com

Communautaire

(forum, liste de diffusion, discussion, etc.)

• Alsacréations
  #intégration #webdesign #standards
  www.alsacreations.com
• Professionnels francophones du développement web
  #intégration #développement
  http://groups.google.fr/group/webdevfr
• HTML Zen Garden
  (placé dans « communautaire » car les articles appellent des commentaires qui sont tout aussi intéressants que l’article)
  #intégration
  www.htmlzengarden.com

Événements

• W3Café
  http://france.w3cafe.org
• Paris Web
  #conférences #ateliers
  www.paris-web.fr

Sans peut-être s’en être rendu compte, Prélude a manifestement envie de nous stimuler ces derniers temps (à travers la création de jeux, à travers la BD, à travers l’écriture).

Auteur du blog Prélude.me, il publiait il y a peu un billet intitulé Nous manquons de créativité. Le blog étant principalement dédié aux jeux en ligne – et à leurs concepteurs – le billet s’orientait vers les jeux. Mais bon, la question que j’ai pour ma part sous-entendue est valable pour tous les domaines : comment être créatif ? Comment créer un contenu original ?

Le même est l’heureux papa du si charmant et si bien élevé (!) Gouik. Or, Gouik nous propose un concours permanent : « Faites dire à Gouik« . Ce concours –  certainement assez courant dans le monde de la BD – propose d’inventer le scénario écrit d’un Gouik. Les planches sont prêtes et il y a juste à compléter les bulles. (Ceux qui connaissent un peu Gouik ont déjà pu deviner que c’était moins facile qu’il n’y paraissait d’inventer un scénario de trois cases, dans des formats de bulles imposées, y compris les silences).

Bref, une autre façon de stimuler notre créativité.

Et voilà qu’il sort un nouveau site ! Et de quoi il s’agit ? De laisser un message commençant par « Y’a rien de tel« . Là aussi, place à l’imagination tout en allant interroger notre sensibilité (ou notre humour) (ou notre capacité à provoquer) (ou notre haine). Bon, bref, encore un p’tit exercice de stimulation de créativité.
Ben du coup, je me suis fendue de mon « Y’a rien de tel » : Y’a rien de tel que d’enfoncer ses orteils dans le sable chaud. (Hein, vous ne trouvez pas ?!)

Ce qui est amusant aussi, c’est que j’ai un petit projet en préparation et que, là aussi, on peut dire que c’est un projet d’aide à l’inspiration et à la création !
Et alors que je suis en train de rédiger ce billet, je tombe sur l’article de webdesign depot qui lui aussi veut nous aider dans notre créativité : Self-Motivating Through Creative Blocks

Alors ? La créativité est à la mode ? A une époque où notre esprit est sollicité partout tout le temps, comment est-ce que votre créativité est stimulée ?
Avez-vous une « création » quotidienne (griffonnage pendant les coups de téléphone, journal, etc.) ? Avez-vous des habitudes ou des outils qui vous aide ?

Mais d’ailleurs ?! Cherchez-vous à stimuler votre créativité ?!

Edit :

A propos d’inspiration et de créativité, voir aussi « Immediate inspiration » et « Petit précis de créativité« . Voilà.

En 2004, j’écrivais mes premiers articles en ligne. Deux articles se complétant l’un l’autre, sur la création d’un logo : Concevoir un logo – Considérations théoriques et considérations pratiques. Aujourd’hui, ces articles sont encore parmi les plus lus de mon blog.

En complément, voici les principes essentiels d’un logo :
What makes a good logo? (en anglais)

Quels sont, en quelques mots, ces principes ?

Un logo doit être :

• simple
• mémorisable
• intemporel
• multi-supports
• approprié

Simple

Un logo simple est un logo qui combine plusieurs avantages : reconnaissable -même en peu de temps, mémorisable et propre à faire passer l’image du client.
Le principe KISS (Keep It Simple, Stupid) est à garder en tête pour tout logo.

Mémorisable

L’important est que le design doit logo soit facilement retenu et associé à la marque qu’il représente. En ce sens, il doit aussi se distinguer par rapport aux autres logos.

Intemporel

Le logo représente la marque et son identité. Quel meilleur gain si le logo traverse les décennies sans renier les principes de la marque, sans avoir l’air d’appartenir à une autre époque !

Multi-support

Un graphiste professionnel ne s’y trompe pas, un logo ce n’est pas seulement une belle image en en-tête d’un courrier. Le logo doit pouvoir être décliné sur une affiche en 4×3, sur un fond sombre comme sur un fond clair, en noir et blanc…

Approprié

Un logo représente une marque et donc son identité, son style, son univers. Par contre, il ne représente pas ses produits ; il représente plus un concept.

La consommation du papier n’est pas, comme on le croit encore, une mauvaise pratique écologique  (bon, le gâchis, c’est autre chose, mais là, c’est moi qui rajoute ça et c’est un autre sujet). Là, le conférencier à insisté sur la consommation d’Internet bien plus préjudiciable et je me suis faite toute petite, seule dans la salle à prendre les notes sur un ordi alors que tous avaient des blocs-notes (ahhh ! que je me suis sentie moins seule le soir même au W3Café !)

La gestion des forêts à été mise en place il y a déjà longtemps. L’industrie du papier ayant été la première à être montrée du doigt dans la prise de conscience écologique, elle a aussi été la première à réagir.
Les forêts gérées dans l’optique du développement durable prennent en compte à la fois la dimension écologique, économique et sociale (je ne le savais pas, mais les conditions de travail font partie de la notion de développement durable, par exemple).
La gestion de ces forêts implique également qu’il y a plus d’arbres plantés par an que d’arbres coupés.

Parallèlement, des forêts non gérées continuent à être exploitée (et détruites). C’est donc le papier issu de ces forêts là qu’il ne faut pas consommer. Des normes nous aident à choisir.

Les normes

La marque « IMPRIM’VERT »

Elle ne concerne que les industries graphiques. Elle gère, depuis 11 ans, 3 critères :

• la gestion des déchets dangereux
• le stockage des liquides dangereux et déchets liquides
• l »abandon de produits toxiques

Elle demande un fort engagement et est mise à jour en fonction des produits nouvellement découverts comme dangereux.

La marque « Print environnement »

Elle est équivalente à la marque IMPRIM’VERT mas s’adresse plutôt à des entreprises de taille modeste. Elle est tout aussi  valable et sérieuse que la précédente.

Les certifications FSC et PEFC

Ces certifications sont toutes les deux liées à la gestion du papier et de la forêt. Ces deux normes sont d’ailleurs équivalente ; l’une d’origine canadienne, l’autre est européenne.

L’apposition d’une ou l’autre de ces certifications garanti :

• la préservation de l’environnement
• le respect les droits sociaux des travailleurs
• une économie viable

Chacune de ces normes garantie que le papier ne vient pas de forêts non-gérées et atteste également des efforts faits autour de la gestion des déchets, des encres, etc.

Pour pouvoir apposer sur un document les mentions FSC ou PEFC, il ne suffit pas que le papier respecte une des normes, il faut aussi que l’imprimeur soit certifié de la même norme. Dans ce cas-là, l’imprimeur demande un numéro de certification (assez long à obtenir)

Le papier recyclé

Pour ce qui est du papier recyclé, ce n’est pas une obligation mais plutôt une question de besoin. En fonction de la pérennité du document imprimé et du niveau de qualité attendu, on opte pour un papier recyclé ou non.
Il faut garder à l’esprit que, en plus de fait que le papier est une denrée renouvelable et qu’il faut, de toute façon, du papier « neuf » pour fabriquer du papier recyclé. Il n’y a donc aucune culpabilité à avoir si on décide d’utiliser du papier très blanc et donc non-recyclé pour un document haut-de-gammedont la durée de vie doit être longue.

Les autres normes

La boucle de Mœbius indique juste la quantité de papier recyclé dans le papier

Label écologique de l’Union Européenne, l’Ecolabel nordique, L’Ange bleu et l’APUR (Association des Producteurs et Utilisateur de Uapier), dont le logo indique le pourcentage de papier recyclé,  sont aussi des bons repères.

Comment, en tant que donneur d’ordre ou concepteur print, optimiser la demande pour qu’elle soit la plus « écologique » possible ?

• Choisir un papier certifié : FSC ou PEFC ou Recyclé
• Favoriser des formats standards
• Choisir le gramage en fonction de la durée de vie
• Éviter les grands aplats (car la charge d’encre est plus forte et cela demande plus de pétrole)
• Limiter les plis et les finitions

Comment choisir son imprimeur ?

Choisir un imprimeur certifié FSC / PEFC et/ou qui a la Marque Imprim’vert (ou iso 14001).

A défaut, privilégier celui qui utilise des encres végétales, imprime avec 3 % maxi d’alcool isopropylique dans ses solutions, gère ses déchets, utilise un CTP (sans chimie si possible), produit dans un bâtiment Haute Qualité Environnementale, etc.

Communiquer son engagement

Il est important de communiquer sur l’utilisation que l’on fait de papier recyclé, issu de forêts gérées, gestion des déchets, etc :

• Pour sensibiliser
• Pour son image de marque

Attention toutefois, pour pouvoir apposer les logos FSC ou PEFC sur un document, il ne suffit pas que le papier réponde à ces normes, il faut aussi que l’imprimeur soit certifié. Il doit alors demander un numéro de certification (procédure assez longue).

Cela peut donner :

• « Ce document est imprimé sur du papier FSC – N° de chaîne de contrôle (fourni par l’imprimeur) »
• « Ce document est imprimé sur du papier recyclé à 100 % »
• « Ce document est imprimé avec des encres végétales »
• « Ce document est imprimé par une entreprise Imprim’Vert / certifiée Iso 14001 »

Parlez-en à votre imprimeur, il vous conseillera.

Communiquez également sur une démarche globale de votre entreprise.
Un exemple de communication :  Cosmic Communication, Neoma (PDF)

En résumé

• Sans se priver de toute créativité, favoriser, à la conception du document, les critères « écologiques » (grammage, format, etc)
• Choisir un imprimeur FSC / PEFC
• Opter ou non pour du papier recyclé mais se poser la question
• Communiquer sur sa démarche

Pour en savoir plus

• ADEME

Voilà. J’ai souhaité faire ce compte-rendu car la prise de conscience écologique est encore difficile et peu répandue* et il suffit parfois simplement d’informer. Cette conférence m’a emballée pour toutes les informations qu’elle fournissait et, depuis, je n’achète plus un carnet de croquis sans chercher le label dessus !
* Peu répandue et pourtant : S’attaquer aux tabous pour devenir écolo et Des produits écolo rien que dans mes RSS de ces derniers jours

Le contexte

Le site est déjà existant et, sans qu’une charte graphique n’est été écrite, bon nombre d’éléments du design font déjà partie de l’identité graphique du site : couleurs, éléments décoratifs, typographie, esprit global.
Le site recense les films de vampire. Le sujet n’est donc pas neutre et est souvent traité graphiquement de manière très forte (couleurs sombres, éléments de décor gothiques, allusion au sang, etc.)
Dans ce site là, pour ce qui est des couleurs, elles sont en effet sombres. Le noir et le rouge, néanmoins, ont été évités et c’est la gamme du violet qui a été retenue.
Les éléments décoratifs ne sont pas figuratifs (pas de petits cercueil pour les liste à puces, pas de chauve-souris autour des titres, etc.) C’est plutôt l’utilisation d’arabesques qui a été choisie.
Les typographies disponibles sur Internet ne sont pas nombreuses. Néanmoins, le choix de « Georgia » pour la titraille comme pour le texte n’est pas anodin pour ce site. Avec ses empâtements, son aspect global et le positionnement de certains caractères, c’est la typographie la plus à même de contribuer au design général du site.
L’esprit généré (recherché ?) est donc plutôt sobre pour un site traitant d’un tel sujet. L’élégance est plus mise en avant que le gore, l’architecture gothique plus évoquée que les clichés d’un look gothique.

Le changement du nom du site

C’est dans ce contexte que le logo a du changer. En effet, le site changeait de titre : il passait de « Filmographie vampire » à « Films-vampires.com« .

Ce changement est issu de plusieurs constations :

• « Filmographie » est un mot peu utilisé dans ce contexte. L’expression « liste de films » revient plus souvent.
• « Films-vampires.com » à l’avantage de contenir l’adresse même du site. Un tel nom permet aussi d’encrer l’adresse dans l’esprit du visiteur.
• Avec sa majuscule, son tiret, son point, « Films-vampires.com » est graphique et permet plus de « jeux » esthétiques.

Le changement du logo

Le but était donc de changer le logo et d’insérer le nouveau nom du site, tout en respectant l’identité graphique déjà existante.

Le premier « choix » était celui de garder la typographie du site pour le texte du logo. Une évidence plus qu’un choix. Si souvent le logo, graphiquement riche, diffère de la typo texte du site, imposé par Internet et graphiquement sobre, Georgia est au contraire une typographie déjà riche.

Le « .com« , tout en faisant partie à part entière du nouveau nom du site, n’est pas un élément aussi important que le sont les mots « films » et « vampires ». Ce second niveau permet un peu de fantaisie graphique (dans un logo qui doit resté sobre et simple pour respecter le style du site !)
Il a donc été traité en plus petit.
Il a été placé sur une autre ligne que les mots principaux. Cela a pour effet :

• de montrer son caractère secondaire (bien que présent dans le logo) par rapport aux mots-clé que sont « films » et « vampires » qui indiquent clairement quel est le sujet

• En résultat logique du premier point, mettre le « .com » ainsi au second plan met en avant les deux mots principaux

• Enfin, le placer sur une ligne au-dessus du mot « vampire » permet d’équilibrer le logo sur la droite alors qu’une lettrine est prévue à gauche.

• Dernier petit détail, c’est en fait « com », sans le point qui est écrit et c’est le point sur le « i » de « vampires » qui joue le rôle de « . » d’adresse web.
  C’est toujours ça de gagner dans la simplification et l’épuration du logo.

La lettrine

La lettrine est l’élément le plus marquant du logo. C’est elle qui va donner tout le caractère, la direction du logo.
Les choix qui y sont liés sont donc majeurs dans l’élaboration de ce logo par ailleurs assez simple.

Trois pistes ont été explorées et nous allons voir que chacune d’elle, sur un seul élément différenciant (la typographie), change toute l’allure générale du logo et ce qu’il transmet.

Piste 1

La piste 1 explore les effets d’arabesques et le gothique élégant.
Elle est très chargée et donne beaucoup d’impact, de présence au logo.
Néanmoins, elle contraste un peu avec les notions de simplicité et de sobriété présentes sur tout le site.

Piste 2

La piste 2 est beaucoup plus incisive. Elle joue sur le mythe du vampire et évoque les crocs, les lames, l’action.
C’est la piste la plus froide mais aussi la plus énergique.

Piste 3

La dernière piste est un consensus entre les deux premières. Elle joue à la fois sur les arabesques et la modernité. Les effets sont simples et sobres.
Une petite fantaisie vient tout de même des empâtements du « F » qui évoquent les crocs du vampire et amène, discrètement, un côté incisif.

Cette piste est celle, vous l’aurez deviné, que j’ai retenue.
Elle n’est pourtant pour l’instant qu’une version temporaire car j’aimerais un peu mieux et un peu plus l’exploiter. …Mais il y avait urgence pour la réalisation de ce logo, ce qui explique l’exploitation d’une version inachevée.

Cet exemple de mise en place d’un logo est basé sur une identité graphique simple, peu forte et pour un contexte ni fortement stratégique, ni commercial.
Si ce logo a été pensé et réalisé en une après-midi pour des besoins de « particulier », imaginez l’impact et la réflexion nécessaire pour la réalisation d’un logo commercial cherchant à positionner fortement l’image de marque et l’identité visuelle d’une entreprise !

C’était passionnant !

Avec le peu de recul dont je dispose, je pense que ce thème a été abordé de la seule façon possible. Je n’ai pas l’impression d’avoir assisté à une conférence, mais plus à un « processus de transfert d’informations ». Transfert lui-même basé sur la sensibilité et l’appropriation.

Sans avoir la possibilité de faire un compte-rendu complet, j’ai néanmoins voulu extraire quelques perles à garder dans un coin de sa tête lorsque l’on travaille sur la création.

La simplicité est l’éloquence.

L’imaginaire se nourrit du non-voir.

Ne pas montrer c’est créer.

Quand on donne des contraintes, souvent, ça devient joyeux.

Il faut, petit à petit, faire de toute contrainte un bonheur.

Cette liberté est déterminante dans le processus créatif ; on doit pouvoir dire tout et son contraire.

Et une dernière pour la route :

Le X de l’enfer fait des petits.

Celle-là, sans le contexte… ! Pourtant, elle est pleine de sens et résume bien à elle-seule l’idée de l’image transmise…

Mise à jour – 11/11/2012 :

À l’occasion de mon billet sur le « Petit Précis de Créativité », je me suis re-penchée sur cette conférences. Dans le fascicule qui l’accompagnait, j’ai pioché encore quelques petites idées qui me plaisent bien :

• « Comprendre, écouter, observer, sont déjà des phases de la création »
• « une confrontation de points de vue multiples, qui par une suite d’effets de ricochet l’enrichissent et donnent corps à l’idée directrice. »
• En parlant de la connaissance des outils : « Cette connaissance de l’éventail des possibles est une source de création, dans la mesure où elle en autorise le détournement, générateur de nouvelles formes. »
• « Le processus créatif ne part pas de rien ; nous partons d’un héritage de compétences acquises pour faire autre chose, comme si se produisait un effet rebond qui nous entraînerait vers d’autres territoires. »
• À propos du hasard : « Il est très important de rester attentifs, perméables aux dysfonctionnements du processus, car ils sont toujours sources d’enrichissement. »
  En insistant sur le combinatoire et l’aléatoire.

Bachelière en 1995 du Bac L, titulaire de 2 licences (histoire des arts et arts plastique), comment en êtes-vous arrivé au multimédia ?

Depuis le début de mes études, mon objectif a toujours tourné autour de la communication par l’image (publicité, sémiologie…). Lorsque je me suis acheté mon premier ordinateur, je me suis naturellement tournée vers Photoshop. Comme, parallèlement, je découvrais un nouveau média, Internet, je me suis immédiatement intéressée au webdesign.
Et voilà comment j’ai « basculé » vers le monde du web

D’après votre CV, en 2000, vous étiez embauchée chez Axicom Multimédia, comment avez-vous été recrutée ?

Afin de professionnaliser mon projet Internet, je me suis inscrite dans une école, l’Ecole Multimédia, pour y suivre un cursus « Réalisateur multimédia ». Cette formation incluait principalement un stage en entreprise, sur toute l’année.
J’ai donc dû démarcher des sociétés, des « web agency », pour en trouver une prête à m’offrir une place de webdesigner-intégrateur débutant.
Axciom Multimédia faisait partie de ces sociétés. Leur démarche, à mon embauche, m’a parut intelligente. Il ne se sont pas basé sur les quelques réalisations multimédia que j’avais faite -puisque j’étais là pour apprendre à en faire, justement- mais sur mes capacité graphiques. Je leur ai donc présenter mon book d’arts plastiques et c’est sur la base de celui-ci qu’ils ont pû juger s’ils croyaient à un potentiel créatif chez moi.

En tant que professionnelle, diriez-vous que le marché du travail dans la région parisienne est ouvert à de jeunes diplômés ?

Je le crois.
Si nous nous restreignons au domaine de l’intégration web -dont je peux plus facilement parler- les compétences professionnelles sont difficiles à trouver. Ce que je veux dire, c’est que l’intégration est un métier complexe. Un bon intégrateur maîtrise les standards du HTML, les CSS dans ce qu’elles ont de simples mais aussi dans leurs subtilités, a de fortes notions en matière d’accessibilité, de référencement naturel et, en plus, d’ergonomie. Car le métier de l’interface touche à tout ça !
Une équipe qui recrute est sensible à l’ouverture que peut avoir un intégrateur par rapport à tous ces domaines.

Parallèlement, l’intégration est un métier encore jeune. Les personnes arrivés très tôt sur le web on dû se remettre en permanence en question pour se maintenir au niveau professionnel, les choses évoluant sans cesse. Le senior qui n’a pas su le faire aura un profil moins intéressant, campé sur ses positions, que le profil débutant mais en phase avec le web actuel. …Le tout étant de le rester !

Vos attentes et motivations premières du métier sont-elles en adéquation avec la réalité ?

Le métier est encore bien jeune et je n’avais pas une idée précise de ce qu’il était quand je me suis lancée. En fait, le métier est encore assez jeune pour qu’une même dénomination (« intégrateur », « webdesigner », « développeur ») ne veuille pas dire la même chose d’une entreprise à l’autre, d’une personne à l’autre.
Je crois donc que j’ai aussi eu la chance de faire mon métier à mon image et pas l’inverse.

Quelles sont selon vous les qualités essentielles d’un intégrateur/webdesigner ?

C’est un métier dans lequel on est bon que si on est prêt à toujours apprendre et ré-apprendre ce que l’on sait déjà faire.
C’est vrai pour tous les métiers du web, car Internet bouge très vite, les technologies se multiplient, sortent du lot ou tendent à disparaître, les internautes progressent dans la maîtrise du média pendant que des nouveaux débutants arrivent… C’est un métier où il faut être en perpétuelle écoute des changements, des nouveautés, des usages.

Je dirais ensuite qu’il faut être rigoureux. Si le métier peut sembler, de l’extérieur, facile (mettre un joli titre, une jolie image et voilà), il demande en fait une grande conscience de ce qu’est Internet.
Et faire des interfaces pour un média dont le rendu peut-être très différent selon le support de l’internaute (les différents navigateur, le mobile, les lecteurs d’écran, etc.) demande une discipline et une maîtrise du code qui ne sont absolument pas visible pour un regard extérieur, non professionnel.

Quelles sont les compétences requises pour ce métier ?

Connaître simplement le HTML/XHTML et les CSS, en effet, ne suffit pas à un bon intégrateur/webdesigner. Il faut déjà qu’il maîtrise ses développements au travers des standards du W3C. Ensuite, il doit être au fait de l’accessibilité pour avoir des sites de qualité. Des notions d’ergonomie sont un plus important pour aider ses clients dans leur choix et éviter les erreurs. Des connaissances en référencement naturel lui permette de créer des pages déjà optimisées. Enfin, juste quelques notions de développement (PHP, ASP…) lui permettent de mieux comprendre la logique des développeurs avec lesquels ils travaillent et de prendre en compte leurs besoins, dès l’intégration.

Quels conseils me donneriez-vous pour perçer dans ce métier ?

Pour ma part, ce qui m’a réussi, à été de m’intéresser aux standards et aux bonnes pratiques.
Ce que je résume ici en une phrase est en fait tout une manière d’aborder le métier. C’est aussi ce qui a donné à mon profil, par la suite, une qualité d’expertisation.
A une époque où on entendait encore peu parler des standards, à une époque où beaucoup de mises en page se faisait en tableaux, j’ai eu la chance de fréquenter, via le forum Webmaster Hub, par exemple, des gens qui m’ont fait aborder le web d’une autre manière, plus professionnelle, plus tourner vers la prise de conscience des difficultés et particularité de ce média.
Donc le conseil à donner, à mon avis, est d’être en veille permanente pour 1/ saisir les changements et 2/ toujours se professionnaliser.

Etre bon ne suffit pas, encore faut-il que les recruteurs vous trouvent. Le réseau, comme souvent (partout ?), est ce qu’il a de plus efficace. Il ne s’agit pas de se faire connaître en laissant son nom partout et de manière totalement artificielle ! Un réseau se crée naturellement en fréquentant les forums, les événements « IRL », en s’intéressant, tout simplement, ça finit par se voir.

En tant que femme, avez-vous senti une différence de traitement vis-à-vis de vos pairs ?

Non.

Vous avez également exercer votre métier en freelance. Quels ont été les avantages et les inconvénients de ce type d’exercice ?

Mon expérience en tant que freelance est assez courte.
L’inconvénient principal, selon moi, est toute la partie commerciale : trouver ses clients. Mais là encore le réseau et le bouche-à-oreille fait toute la différence et pendant que certains passe un mois à chercher un client, d’autres reçoivent plus de demandes qu’ils ne peuvent en traiter.
Et le plus gros avantage que j’y vois est l’ouverture : à être freelance, on travaille sur des projets différents, pour des clients différents, avec des équipes différentes … La découverte est bien plus grande, on apprend à travailler selon les différentes méthodes des uns et des autres, on s’enrichit plus rapidement qu’autrement et on gagne en souplesse, etc.

Quels a été pour vous le projet le plus enrichissant et satisfaisant ? Pourquoi ?

Difficile de répondre… Certains petits projets anodins ce sont révélés très intéressants parce qu’ils soulevaient une problématique encore jamais rencontrée ; et j’ai aussi eu, à l’inverse, à travailler sur des projets très lourds, stratégiques mais qui du point de vue de l’interface n’était qu’une longue redite.

Je me tourne beaucoup, ces derniers temps, vers des projets qui sont moins « dans la pratique ». Dans cette catégorie là, le projet qui m’a le plus apporter est la rédaction d’un Cahier des charges techniques.
C’est un exercice passionnant parce que très exigent ! Cela oblige à rationaliser son propre travail, à mettre des mots sur des habitudes que l’on a et à trouver pourquoi c’est bien -au besoin, on remet donc en question ces propres façons de faire. Il faut penser à bien tout spécifier… C’est un exercice qui oblige à formaliser le travail de toute une équipe (en fonction des contraintes d’hébergement, de sécurité, des exigences de base) depuis les premières évidences jusqu’aux détails spécifiques.

Vous êtes actuellement embauchée chez Cetelem e-Business. Quels sont vos tâches au sein de cette entreprise ?

J’y suis en tant qu’intégratrice, plus rarement webdesigner ; j’y apporte mes connaissances en référencement naturel et en accessibilité.
Mes tâches comprennent l’intégration de pages, l’accompagnement dans la gestion de projet, le conseil (référencement, interface, ergonomie) sur la conception, la formation interne, la méthodologie de travail (cahier des charges, bonnes pratiques…)

Etes-vous nombreux dans l’équipe ? Quelle est la hiérarchie ?

Nous sommes une petite équipe : deux intégrateurs/webdesigners ; deux développeurs et notre manager. L’équipe est complétée par deux développeurs prestataires depuis déjà plusieurs mois.
Nous travaillons en étroite collaboration avec l’équipe marketing, nos « clients », mais sans rapport de hiérarchie entre-nous.

Quelles sont vos responsabilités ?

Dans notre équipe, chacun est responsable de ses projets. C’est à dire que c’est à nous de gérer leur avancement, de signaler les points d’alerte (difficulté technique, retard, amélioration à proposer), de maintenir informer les personnes concernées par le projet et bien sûr de veiller à leur qualité (qualité du code, maintenabilité, réponse aux attentes). Si notre responsabilité a un cadre limité, elle est par contre très stratégique.

Pourriez-vous me décrire une journée type de travail ?

Il n’y a pas vraiment de journée type de travail …et c’est tant mieux !
Je peux passer des journées, la tête dans mon écran, à finir une intégration importante, comme je peux avoir une succession de petites tâches toutes différentes les unes des autres, alternant intégration, réunion, discussion avec l’équipe marketing, réflexion et méthodologie…
Je dirais tout de même qu’une journée idéale de travail comprend un petit temps pour la veille, qu’elle soit personnelle ou en discutant avec des collègues.

Quels sont les perspectives d’évolution dans ce métier ?

Les voies peuvent être très différentes pour chaque cas : en fonction du profil (plutôt technique, plutôt design), des aptitudes (management, gestion de projet) et des sociétés (grosse SSII, petite webagency, équipe intégrée au sein d’une société dont le métier n’a rien à voir avec le web). A partir de là, je crois que cela dépend beaucoup de la façon dont on va gérer sa propre carrière… Manager d’une équipe de développement, chef de projet/chargé de clientèle au sein d’une webagency, responsable du site au sein d’une entreprise « non-web », spécialiste très pointu dépêché par sa SSII pour des entreprises, expert en interface au sein d’une équipe de conception, etc. Les perspectives sont larges car le métier est riche et demandé dans des circonstances diverses.

Qu’est ce que vous aimez dans votre métier ?

C’est une bonne question. Je me demande souvent ce qui peut bien me faire frémir quand je me retrouve face à mon écran blanc, prête à commencer une nouvelle page.
Une des choses que j’aime dans mon métier, c’est qu’on en a jamais fini d’apprendre. Que le média est encore jeune et que nous sommes, je crois, encore en période de découverte de ce qu’il va devenir.
J’aime aussi que la rigueur à laquelle un tel métier fait appel. Le support est complexe et developper pour Internet signifie avoir bien à l’esprit que l’on a pas la main sur le rendu, la configuration de l’internaute, etc. Pourtant, le résultat final, tel que pour les acrobates, semble simple (c’est même l’un des buts à atteindre, la simplicité de l’interface) et facile.

Qu’est ce que vous n’aimez pas ?

La seule chose que je n’aime pas est de ne pas renouveler mes projets : les projets qui se répètent ou qui se ressemblent ne m’apporte rien. Varier les projets, les demandes, faire face à de nouvelles difficultés, au contraire, est très enthousiasmant.

Et avez-vous des commissions sur certains projets ou certains avantages peut-être ?

Je travaille dans un cadre très déterminé où je suis salariée de mon entreprise. Nous développons donc pour l’équipe, pour la société mais nous n’avons aucune commissions sur les projets. Notre but est de créer des sites, des pages utiles à notre entreprise et c’est pas cet intermédiaire que nous sommes récompensés.

Qu’est-ce qu’une favicon ?

La favicon est la petite icone qui apparaît dans la barre d’adresse devant l’URL des sites. Elle apparaît également dans le menu des favoris / marques-pages. Enfin, pour les utilisateurs d’onglets, elle apparaît sur chaque onglets.

La favicon dans la barre d’adresse – Elle participe ainsi à l’identité visuel du site et contribue donc à sa mémorisation et son identification

La favicon dans la liste des favoris

La favicon dans les onglets – La favicon est un repère particulièrement agréable dans l’utilisation des onglets. Elle permet de rapidement retrouver le site que l’on recherche (visuelement identique aux autres autrement)

Pourquoi avoir une favicon sur son site ?

La favicon est un élément supplémentaire qui va participer à l’identité du site. Elle est un facteur supplémentaire qui fait qu’on identifie et mémorise le site ; un peu comme un mini-logo.

Ce petit élément visuel permet également de plus rapidement repérer le site qu’on recherche dans une liste (les favoris, ou les onglets notamment).

Enfin, d’un point de vue purement pratique, avoir une favicon permet de limiter les logs d’erreur : en effet, certains navigateurs la recherche automatiquement à la visite d’un site ; c’est autant d’erreurs 404 créées.

Comment fabriquer une favicon ?

Afin de pouvoir s’adapter, une favicon doit être créée au moins au format 32 x32 pixels, d’après la Bonne Pratique Opquast n°30. Mais c’est au format 16×16 pixels qu’elle s’affiche la pluspart du temps. Il faut donc prévoir que l’icône soit toujours « lisible » et que l’image soit propre dans ces deux tailles. Une favicon peut également être prévue en 48 x 48 pixels.

Une favicon peut être une image de différents formats : jpg, gif, png, bmp, mng, xbm et ico. Parmis ces formats, seul le .ico n’est pas reconnu par les standards. Néanmoins, il reste nécéssaire car … c’est le seul compris par Internet Explorer ! Les navigateurs standards comprennent l’ensemble des formats.

Il est à noter que certains de ces formats permettent une animation (voir sont un format vidéo !). L’icône peut donc ne pas être figée. Il faut pourtant en user avec parcimonie : en effet, les animations en boucles peuvent être désagréables et perturber la lecture d’un site ; elles peuvent agacer.

Pour créer l’image de chacun de ces formats, vous pouvez utiliser votre éditeur graphique habituel. Néanmoins, pour le .ico, il existe des outils en ligne très pratiques, comme le très bon FavIcon from Pics. Il suffit de préparer une image au format gif, jpg, png, ico ou bmp (en 32 x 32 pixels) et l’outil génère une icône multi-format (32 x 32 et 16 x 16 pixels).

Le code pour insérer une favicon

Pour insérer votre favicon, vous devez :

• placer l’image à la racine de votre site ;
• placer le code d’appel à l’image sur votre page index.

Là encore, il y a le code standard compris par les navigateurs standard … et le code pour Internet Explorer. Ainsi, si vous voulez insérer les deux cas, utilisez le code ci-dessous :

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><!-- pour IE -->
<link rel="icon" type="image/png" href="/favicon.png" /><!-- pour les navigateurs standards --> Internet Explorer lit la première déclaration et l’applique. Il ne tient pas compte de la deuxième qu’il ne comprend pas. Les navigateurs standards vont lire et comprendre la première déclaration, puis la deuxième. Ils appliqueront celle qui arrive en dernier.

A lire :

• Opquast – Bonnes Pratiques – Rubrique icone de favori : Le code source des pages contient un appel valide à une icône de favori ; L’icône de favori est au moins proposée au format 32 x 32 pixels
• Icônes de pages web, la favicon.ico