Habillage du site de Paris Web

Les coulisses du design du site de l’édition 2007

26 novembre 2007,
par Romy Têtue

Mots-clefs associés à cet article :

J’ai rassemblé ici les notes prises au fil de l’année, lorsque je travaillais sur le design du site de Paris Web 2007.
Celui-ci revient de loin. Vous allez voir, c’est étonnant ;-)

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 ».

Scary Girl

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...

Association Paris Web

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).

Blog de Fluctuat

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...

Page contact de Paris Web 2007

À 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.

@media 2007

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...

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.

Paris Web 2007

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.

Webmonkey

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.

Paris Web 2007

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 !

Voir en ligne : http://2007.paris-web.fr

Vos commentaires

  • Le 30 novembre 2007 à 15:54, par Stéphane Deschamps En réponse à : Habillage du site de Paris Web

    C’est troublant la ressemblance avec d’une part les teintes de Flickr et d’autre part avec le blog de Fluctuat.

    Ce qui est marrant, surtout, c’est de se dire que c’est moi qui ai décliné le logo et le design de 2006 pour faire le design du site institutionnel, et que je n’ai pas pensé une seconde à tes sources, alors que vu de l’extérieur c’est tellement évident.

    Marrant... comme quoi l’inspiration c’est vraiment un boulot d’éponge et de recrachage.

    Cela dit le site institutionnel aussi a connu plusieurs maquettes avant que celle-ci ne soit retenue. Je devrais documenter tout ça comme tu le fais si bien, ça peut toujours être éducatif pour quelqu’un...

  • Le 30 novembre 2007 à 16:00, par Stéphane Deschamps En réponse à : Habillage du site de Paris Web

    PS : le traducteur de l’article de Douglas Bowman, tu le connais ? Il a l’air excellent, ce mec ! :p

  • Le 30 novembre 2007 à 23:26, par gaspard En réponse à : Habillage du site de Paris Web

    Pour quelqu’un qui “ne sait pas trop faire du graphisme”, qui “manque cruellement d’imagination” et qui “n’est pas à l’aise avec Photoshop®”, tu t’en sors bigrement bien, ce site est très pro, très soigné, aussi agréable que joli, félicitations.

  • Le 3 décembre 2007 à 08:09, par Gregoire En réponse à : Habillage du site de Paris Web

    Intéressant comme démarche. C’est toujours instructif de voir comment les autres travaillent.

    Ceci dit je ne suis pas du tout d’accord avec toi sur photoshop : on n’a pas encore fait mieux pour faire des maquettes. A part peut-être fireworks.

    Mais bon, peu importe les outils, du moment que le résultat est là ;)

  • Le 4 décembre 2007 à 16:51, par Nicolas Krebs En réponse à : Non, je ne suis pas graphiste

    Vous avez peut-etre vu les compliments de SD ici.

  • Le 18 décembre 2007 à 01:21, par Thanh En réponse à : Habillage du site de Paris Web

    Hello,

    très intéressante lecture. En tout cas je trouve remarquable de pouvoir retranscrire ta démarche de manière posée et structurelle.

    Moi, comme toi je ne suis pas graphiste, mais je pars toujours de White Man :)

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom