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…

Panoramas de Ponts de Paris… et d’ailleurs

Ponts de Paris

Mon premier panorama de nuit : le Pont Neuf. J’aime beaucoup celui-ci pour le voilier à quai et l’effet de lumière autour de la statue de Henri IV « emballée » pour restauration.

Pont Neuf à Paris, photo panoramique de nuit

Un de mes panoramas préférés. Avec le temps de pose choisi la Seine apparaît comme gelée…

Photo panoramique nocture du quai de la Tournelle à Paris

Passerelles de Paris

La passerelle pour piétons qui enjambe le Canal Saint Martin à quelques encablures de la place de la Bastille.

Passerelle métallique au-dessus du Canal St Martin

La passerelle légère qui surplombe la pelouse du jardin de Reuilly (avenue Daumesnil).

Passerelle piétons de la pelouse de Reuilly

Le Pont du Cabouillet à L’Isle-Adam

A l’Isle-Adam (95), le Pont du Cabouillet vu de la pelouse du restaurant du même nom. Temps gris…

Pont du Cabouillet à l'Isle-Adam (95), photo panoramique

World Wide Panorama, 3ème édition

L’évènement, sponsorisé par la « Geography Computing Facility » de l’université de Californie, Berkeley et hébergé par The Geo-Images Project est un projet non-commercial, destiné à faire connaître la photographie panoramique en proposant un large aperçu de la créativité collective à travers le monde.

A voir : l’édition originelle du World Wide Panorama de l’équinoxe du 20 mars 2004. Et aussi l’édition World Heritage du solstice du 19 au 21 juin 2004.

Comment participer

Le World Wide Panorama, commencé en mars 2004, et est devenu un évènement trimestriel. Les photographes du monde entier sont invités à y participer avec des règles simples : les clichés doivent être effectués pendant une durée spécifiée et le panorama final doit être au format QuickTime VR (en respectant certaines limites de dimensions et de poids, voir plus loin).

Pour commencer, je vous conseille de rejoindre le groupe et de vous inscrire à la mailing-list (vous n’avez pas besoin d’être enregistré pour participer à l’évènement mais c’est un bon moyen de rester informé !).

Ensuite, après réflexion sur le thème de cette édition « Les Ponts », expliqué ci-dessous, sélectionnez ce qui vous semble être un bon sujet de panorama et interprétez-le avec toute la créativité que vous désirez.

Réalisez votre(vos) panorama(s) entre le 18 et le 22 septembre (du samedi au mercredi) et vous aurez ensuite une semaine et demi pour assembler les clichés en un QTVR puis préparer la légende et les informations qui vont avec. Merci de vous familiariser avec les directives pour les dimensions, liens, légendes et informations (voir les informations complètes plus bas).

Vous pouvez envoyer l’ensemble des informations (détails plus bas) à tout moment jusqu’à la date limite du 3 octobre. Le site va être préparé étape par étape, au fur et à mesure de l’arrivée des soumissions, disponible uniquement pour aux participants. Le site sera finalisé et annoncé publiquement au plus tard le 10 octobre.

A propos du thème « les ponts »

Chaque lieu dans le monde a des ponts : des suspensions héroïques de grande envergure aux gracieuses arches au dessus des canaux de Venise.
Il y a d’effrayants ponts ocsillants, des ponts chargés au dessus de rivières urbanisées, des ponts fortement arqués dans les jardins japonais, des ponts couverts pittoresques dans la campagne, des ponts qui s’ouvrent pour la navigation, des ponts flottants, des ponts Romains toujours utilisés et des ponts anciens en Chine.

Les ponts sont intéressants par leur technologie, leurs matériaux, leur mise en place et leur histoire. Ils sont importants, permettant un accès vital au dessus des rivières et vers les îles. Certains supportent un trafic routier important d’autres traversent les frontières. Les ponts peuvent être courts mais complexes, les boucles montantes d’un échangeur autoroutier, ou immensément long comme celui liant les Keys de Floride. Certains surplombent de profondes et étroites gorges dans les montagnes, d’autres traversent de turbulents canaux de marées. Ils peuvent être symboliques comme un pont Chinois à 9 tournants ou strictement utilitaires comme les ponts Bailey présents partout.

Les ponts peuvent être beaux architecturalement et esthétiquement. Des classiques passerelles des temps anciens aux ponts audacieux de la révolution industrielle et aux nouvelles formes de Santiago Calatrava. Les ponts peuvent parfois être la petite touche gracieuse d’une scène dramatique ou le point central d’un paysage. Les ponts au-dessus des lacs et les passerelles dans les parcs et jardins sont souvent des oeuvres d’art, conçus avec attention dans leur aspect esthétique autant que pour leur utilisation.

Il y a de nombreux ponts célèbres : Golden Gate Bridge, Brooklyn Bridge, London Bridge (en Arizona) et Tower Bridge (toujours à Londres), le Bridge of Sighs de Venise, Sydney Harbor Bridge, le Eads Bridge au dessus du Mississippi, les nouveaux ponts au dessus de la Mer Intérieure au Japon, le Tagus River Bridge à Lisbonne, le Firth of Forth bridges en Ecosse.

Au sens littéral, les ponts peuvent être n’importe quoi qui nous aide à passer d’un endroit à un autre, par dessus les barrières et obstacles. Il y a les ponts sociaux et culturels, ponts économiques et d’affaires, ponts émotionnels et psychologiques…

Il devrait être possible pour tout le monde de trouver un sujet intéressant contribuant au thème les ponts.