08

delure.org


L’association des Rencontres internationales de Lure m’a contacté en mars 2015 pour la refonte de leur site internet. Parmi les enjeux de ce projet, la création d’un site épuré reposant sur un travail minutieux de la typographie et la mise en valeur du fond photographique de qualité accumulé avec les années.

sujet

site internet de l’association des Rencontres internationales de Lure

date de réalisation

de juin à novembre 2015

crédits

L’ensemble du site (conception, charte graphique et applications) a été créé et développé par Louis Eveillard avec Arnaud Juracek (stagiaire) et le soutien de Stéphane Buellet.

Le logo a été créé par Patrick Paleta.

L’association des Rencontres de Lure est renommée pour l’organisation des célèbres Rencontres du même nom depuis plus de 60 ans, la dernière semaine d’août. Pendant le reste de l’année, elle organise des ateliers, des conférences ou publie des ouvrages sur l’écriture sous toutes ses formes.

-

Pour retranscrire ces deux temps, la page d’accueil possède deux modes d’affichage : un mode “été”, actif pendant la période précédant les Rencontres de Lure, indique leur thématique et donne un aperçu des intervenants.

Le mode “été” du site, avec des renvois rapides vers les sections dédiés sur le site

L’autre mode, le mode “année”, présente les événements à venir ou ayant déjà eu lieu, ainsi qu’un petit texte d’introduction des activités de l’association. Le basculement entre les deux modes se fait grâce à une case à cocher dans la partie “admin” du site.

Le mode “année”, avec le texte d’introduction et la timeline.

La timeline en mode “année”. Elle peut afficher des actualités du site ou des liens vers l’extérieur pour annoncer la publication d’un ouvrage ou un événement autre.

Le logo vit au rythme du compte twitter de l’association. Il s’anime en fonction de son activité et permet, au survol sur les empattements, de découvrir les derniers tweets ou retweets.

L’arrivée sur une page d’article se fait sur une composition qui mélange une image en haute définition et une hiérarchie de textes.

En remontant vers le haut, le lecteur fait disparaître le titre et voit l’ensemble du visuel. En descendant, il accède à l’ensemble de l’article.

Un exemple de composition de texte dans une page. La colonne de texte est centrée et s’aligne sur une grille de 4 colonnes sur les tablettes et les ordinateurs. Pour créer du rythme et rompre la symétrie, les titres de section et d’autres éléments comme les citations se calent sur une grille de 3 colonnes superposées.

Ce jeu entre deux grilles soumises à différentes règles – une influence du travail du suisse Karl Gerstner – permet de très nombreux jeux entre les différents éléments du site.

Sur la page de présentation d’une Rencontre, les interventions sont répertoriées par type. Elles peuvent être filtrées pour faciliter la navigation. L’ancre bleue sur la gauche permet de partager l’encart de présentation d’un intervenant sur les réseaux sociaux.
Exemple de navigation sur une page et d’une page à une autre. L’arrivée sur un article ne se fait pas tout en haut d’une page mais un peu plus bas de manière à présenter une composition titre / sous-titre / visuel principal. En remontant, le texte s’efface pour laisser voir l’image en intégralité. En descendant, le visiteur peut consulter le reste du texte de la page.

Le plan du site reprend les couleurs de chaque catégorie et utilise un système de blocs pour suggérer l’arborescence.