Pari Roller : (r)évolution(s)

Nouveau pari-roller.com, nouveau défi

Pari Roller, version 1

C’est un exercice difficile que de reprendre un site très fréquenté et qui n’a que peu évolué depuis ses débuts. Le premier défi est de concilier une nouvelle interface et une nouvelle organisation des contenus avec les habitudes des nombreux utilisateurs réguliers.

L’esprit de l’association représenté au fil des pages doit résister au changement d’apparence du site. Le logo « emblême de la randonnée du vendredi » ne change pas. Les couleurs noir et jaune « habit de Pari Roller depuis le début et rappel du code vestimentaire des staffeurs » resteront les teintes majoritaires du site.

En dehors des contraintes graphiques du thème, il est important de définir les modifications à apporter au contenu et à sa présentation :

  • simplifier les menus
  • réduire la quantité d’informations présentes sur la page d’accueil
  • rationaliser la disposition des éléments et la nouvelle architecture du site
  • abandonner les frames HTML découpant le site peu appréciées des logiciels de navigation et d’un emploi délicat.

Une fois tous ces concepts établis, il reste à trouver les divers moyens d’organiser l’information, un graphisme adapté et à construire les maquettes…

Premiers essais. Premières déceptions.

Evolution des couleurs

Pour commencer, je choisis de ne plus employer le fond noir étoilé du précédent site pour choisir une teinte plus claire, favorisant la lecture. Même démarche pour le jaune, trop lumineux que je transforme en une teinte légèrement orangée, plus proche de celle des tshirts du staff.

Je commence par essayer de dynamiser le menu en reformant l’arrondi d’une roue de roller, les diférentes entrées sont soulignées d’un cadre gris et la police est plus dynamique.

Essai pour le menu

La randonnée du vendredi soir faisant désormais partie du paysage de la vie parisienne, j’ai voulu renforcer cet aspect en dessinant les profils de grands monuments de la capitale.

Profils de monuments parisiens

Plusieurs déclinaisons : avec des étoiles, un fond travaillé, mais jamais rien de bien convaincant…

Profils de monuments parisiens pour le bandeau Pari Roller

Des hauts et débats

Vous l’aurez peut-être remarqué, sur ces dernières versions, un élément ne parvient jamais à trouver sa place : le bandeau publicitaire. Epineux sujet, centre de nombreux débats, celui-ci est nécessaire à la vie de l’association pour justifier pleinement les partenariats commerciaux.

Tantôt placé en haut, tantôt en bas à sa position d’origine, difficile de trouver le juste équilibre. Le choix d’abandonner les frames HTML impose de ne pas laisser le bandeau errer à la suite du contenu : visible sur un grand écran, il serait masqué dans d’autres cas et ne jouerait ainsi plus son rôle commercial.

Il serait possible de lui attribuer un format spécifique, propre au site, mais nous ne sommes pas toujours les créateurs de l’animation publicitaire, aussi faut-il utiliser composer avec des formats standard.

J’opte donc pour la classique bannière 468×60 car les skyscrapers et autres blocs carrés semblent encore plus difficiles à placer.

Pour mettre le bandeau dans la partie haute du site, je réduis la largeur de la série de monuments.

Monuments parisiens dans le bandeau haut

Les premières formes des blocs de contenu apparaissent, ce seront celles qui composeront ce premier redesign. Trop légères et pas forcément pertinentes, les silouhettes de monuments disparaissent laissant l’espace libre.

Dans un dernier effort, j’explore l’idée d’occuper le bandeau supérieur avec une photo : de nouveau confronté au problème de la bannière de publicité j’abandonne (pour le moment) l’idée de la placer ailleurs qu’en haut du site.

Bandeau Pari Roller avec photo

Le début de la fin

Pour ce qui s’avèrera la dernière maquette, je retrouve par hasard la forme de la roue pour le menu grâce aux intitulés qui (re)forment l’arrondi.

Dernière maquette et première évolution du site pari-roller.com

Les contenus sont placés dans des cadres au style largement inspiré du pixel art. La teinte rouge refait surface pour mettre en avant les liens complémentaires et le bloc du haut sera finalement simpliste : logo, drapeaux des langues, bannière commerciale, séparé du reste de la page par une barre d’informations jaune.

Ce site, lancé au mois d’août 2003 sera l’occasion de remodeler profondément le code HTML et la structure technique globale du site. L’optimisation qui en résulte donnera lieu à un site plus léger et moins gourmand en bande passante. De plus le site devient pleinement compatible avec la majorité des navigateurs internet, gagnant ainsi les browsers tournant sur Linux et Mac OS.

Evolution graphique mineure, révolution du code

Par la suite, au début de l’année 2004, pour suivre un peu les tendances émergentes du web, la structure en tableaux, dépréciée par le W3C, est délaissée au profit d’une structure XHTML + CSS2.

Pari Roller v3, seconde évolution : XHTML et CSS

C’est l’occasion de retravailler le graphisme : l’ambiance générale subsiste mais le design gagne en simplicité et en efficacité. Plus sobre, plus net.
Les boutons au format GIF deviennent de simples blocs animés par des règles CSS peu utilisées (à tort d’ailleurs).
Le code progresse au point d’être à base de XHTML 1.1 et CSS 2 valides, le PHP dynamisant le site fait le bond de la programmation objet. Une légère simplification des menus et de l’arborescence permet d’améliorer encore un peu l’expérience utilisateur.

Recréer pour mieux perpétuer

Comme cela finit souvent par arriver, le site entre dans un cycle routinier, n’évoluant plus qu’au gré des mises à jour de contenus.

Evolution du logo

Au coin d’un moment d’ennui je lâche quelques essais peu novateurs autour d’un gris plus léger, plus lisible encore et autour d’une évolution du logo qui plus dynamique, libérant la tour eiffel de sa bulle. Mais rien de bien concluant, le site stagne donc. Afin de casser ce cycle qui amorce en général le début de la fin, je reprends le stylet en main avec en tête l’idée d’un changement radical.

Le mot d’ordre de cette nouvelle évolution, presque révolution, du site : ambiance « street » poussée par un graphisme fort. Afin d’y parvenir, je décide d’abandonner les contenus « fluides » (blocs de contenu qui se redimensionnent en fonction de la taille de la fenêtre de navigation) pour un site à largeur fixe, plus adapté à un graphisme recherché et à des contenus relativement courts.

Pour trouver une texture « urbaine » qui permettrait d’habiller le site, je pars arpenter des centaines de mètres carrés de bitume, de pavés et de dallages parisiens à la recherche de matières granuleuses.

Le bitume parisien, essais de prises de vues

Partant de ce fond bitumineux, des textes trop nets dénoteraient, je me lance alors dans quelques effets de pochoir peint à même le sol. Pour la première fois, je m’intéresse à la possibilité d’un menu horizontal. Je donne même un peu d’angle à ce menu pour renforcer la spontanéité du graphisme. Quelques polaroïds et quelques plots de slaloms disposés nonchalamment supportent ce concept.

Menu horizontal et pochoirs

Mais là, le contenu devient difficile à placer et à organiser. Le syndrome de la page blanche me gagne. Impossible d’aller plus loin que le bandeau supérieur.

Je repars encore une fois de zéro, je pars sur une version très cloisonnée aux espaces bien délimités. Plus classique dans sa disposition, ne conservant que le fond goudronné pour égayer la mise en page.

Le menu, toujours plus court, retrouve sa disposition verticale. Les polaroïds prennent de l’importance, vecteurs de dynamisme et d’informations.

Pari Roller v4

Pari Roller v4

Au cours de ces évolutions, le bandeau publicitaire est resté calé à sa place, surplombant les contenus.

Les maquettes se multiplient, le logo prend du gîte, les plots apparaissent et disparaissent au fil des essais. L’inspiration se précise. Pari Roller version 4 approche…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>