Habillage du site de Paris Web

C’est au début de l’année que Stéphane Deschamps m’a contactée pour concevoir l’habillage graphique du site de la prochaine édition de Paris Web, passionnant cycle de conférences sur le webdesign accessible et de qualité. J’en étais aussi flattée qu’embarassée : « Une maquette graphique ? Moi !?? Mais je ne suis pas graphiste ! » Mais il m’a cloué le bec en rétorquant : « Oui, je sais. Je m’adresse bien à la personne qui a pondu tetue.net et a refondu l’Herbier, non ? Nous voulons la même chose : sobre, classe et efficace [1]. »

Ah.

Partir de loin...

Manquant cruellement d’imagination, je pars toujours d’un site existant, souvent sans rapport, que je détériore progressivement, jusqu’à ce que ça ne ressemble plus à rien, et qu’un choix graphique s’impose. Les choses commencent vraiment lorsqu’une nouvelle direction, souvent radicalement différente, pointe le bout de son nez.

Trouvé presque par hasard dans le Web design index 04, je suis partie du site de Scary Girl, affreux personnage créé par l’australien Nathan Jurevicius. Cela m’intéressait de partir de ce site qui se situe à des années-lumières de la tendance esthétique actuelle, car je voulais ne surtout pas suivre bêtement le troupeau et éviter la mode « Web 2.0 ».

J’ai d’abord fidèlement reproduit en CSS l’apparence graphique de ce site full Flash. J’y ai ensuite injecté les contenus attendus. Puis j’ai commencé à laisser dériver... Voici donc à quoi ressemblait la toute première maquette du site de Paris Web 2007. Surprenant n’est-ce pas ?

À ce stade très embryonnaire certaines choses étaient cependant déjà déterminées : plusieurs petits blocs assemblés constituent la page [2], qui est centrée et petite, comme une crotte posée au milieu de l’écran.

Le Web d’aujourd’hui s’habille en rose et bleu

Difficile de se départir des deux intenses couleurs imposées par le logo de Paris Web : fuschia et turquoise (plus précisément #EE0272 et #009EE0). Difficile aussi d’y associer d’autres couleurs sans tomber dans le muticolore costume d’Arlequin...

Rose et bleu (plus précisément #FF48C5 et #01A6EB) sont les deux couleurs emblématiques de flickr, le fameux site de partage de photos souvent cité en exemple des nouveaux usages dits « Web 2.0 ».
Cette association de couleurs est souvent reprise par les sites dans le vent et je suis frappée de la ressemblance entre le site de l’association Paris Web et la catégorie « Arts » du blog de Fluctuat (même rose et bleu, également sur fond blanc).

Inutile de résister : je vais donc partir de ces deux tonalités mais les nuancer en dégradés et pastels, pour leur donner la douceur qui manque parfois aux tonalités flashies qui sont tant à la mode en ce moment. Oui, au risque de la mièvrerie. D’ailleurs, je collerais volontiers des nuages roses et petites fleurettes bleues partout, aux couleurs mignonnes de l’iPod et de l’iDog...

À force, mon bleu se délave tant qu’il nous pète aux yeux comme l’eau d’une piscine estivale trop chlorée. Ce n’est pas très « sobre, classe et efficace » et, pire, ça n’améliore pas l’accessibilité du site (cf. : Colour Contrast Analyser).

Des rayures, oui mais... sportives !?

Le souci, avec mes petites boîtes, c’est qu’elles flottaient idiotement dans la fenêtre. Il fallait donc trouver un moyen de les stabiliser visuellement, en faisant enfin quelque chose du background.

Inspirée par l’image de fond, onirique et très seventies, du site @media 2007, initialement cité en référence par Stéphane, je me suis laissé influencer par le style qui a marqué les années d’enfance des plus que trentenaires que nous sommes, osant me perdre sur cet enthousiasmant site de papier peint des années 70...

Le logo de Paris Web comporte une discrète série de rayures ondulées, comme une vague, que je ne peux m’empêcher d’associer aux rayures Adidas [3]. Cela m’entraînera dans une ambiance de vestiaire ou de magasin de sport, avec ses sweet-shirt molletonnés roses, ses baskets blanches et ses joggings bleu marine à rayures.

En filant la métaphore sportive, j’ai imaginé mes blocs comme du linge suspendu à sécher sur une corde, sur fond de ciel bleu : des rayures, certes, mais alors grosses et horizontales, allez chiche, aussi moche que sur un vêtement de sport.

En ligne depuis 1996, ce qui en fait un dinosaure du Web, le site Webmonkey nous a également inspiré pour la trame à rayures horizontales qui brouille les trombines de ses contributeurs. Point trop n’en faut, les photos des orateurs de Paris Web 2007 seront finalement traitées en noir et blanc, tout simplement.

Je voulais éviter le fond de fines rayures obliques si typique des sites corporate actuels, mais c’est finalement celles-ci, proposées par Adrien, notre sauveur, que nous retiendrons. Vous pourrez en faire très facilement grâce au Stripe Generator 2.0, un outil vraiment agréable à utiliser.

Et si on inversait les rôles ?

Il était attendu de moi une maquette graphique, sous la forme d’un fichier graphique multi-calques, c’est-à-dire précisemment ce qui me sert habituellement de base de travail, ce qui m’est livré et que je suis en charge d’intégrer. C’était le monde à l’envers !

N’étant vraiment pas à l’aise sous Photoshop, logiciel que je ne suis pas la seule à trouver totalement inadapté au design web (quid des effets de survol, de javascript, de la fluidité des typos et dimensions exprimées en % ou en em, etc. ?) [4], j’ai préféré livrer une maquette statique XHTML/CSS, déjà découpée et intégrée, prête à être mise en boucles SPIP.

Et maintenant, à vos claviers, c’est à vous de faire la critique !