Littlebigchoses

Guy Hersant – photographe

projet.

Intégration, webdesign & développement

année.

2018

à propos.

Je connais Guy Hersant depuis de nombreuses années et j’étais à l’origine de son premier site en 2010. Il était temps de reprendre ce travail pour le rendre plus moderne et accessible.

partager.

Partager sur facebook
Partager sur linkedin
Partager sur twitter
Partager sur email

identité.

Le premier site datait de 2010. Il n’était pas responsive et ne proposait que des images de taille moyenne.

 

Basé sur le CMS WordPress, j’ai conçu un site sur-mesure qui répond aux nouveaux besoins du photographe, le responsive bien sûr mais aussi un blog et la possibilité d’intervenir lui-même sur le site. L’espace d’administration a lui aussi été entièrement simplifié pour lui permettre une utilisation au quotidien facile et rapide.

 

Graphiquement, il fallait quelque chose de très épuré, la ligne conductrice a toujours été que le site devait être le plus “invisible” possible pour mettre en avant les photos. Le site est un outil au service d’un travail photographique, il doit être simple, fonctionnel et proposer l’essentiel en 1 clic.

La page d’accueil est volontairement très sobre, et présente uniquement un visuel de l’exposition en cours, à venir ou passé.

 

Pas de logo, uniquement le nom du photographe, pas de fioriture.

A gauche, le menu présente les photos selon 3 grandes périodes (avec sous-menu déroulant), ainsi que 3 onglets, Chroniques de jours (la partie blog), biographie et contact.

mise en page.

Le site est constitué quasiment exclusivement de photos, il fallait réussir à trouver l’équilibre entre taille des photos et temps de chargement, la performance du site étant toujours mon exigence.

 

Toutes les photos sont présentées sur le même modèle. Le sous-menu de gauche reste déroulé pour toujours garder un accès facilité aux autres séries de photos. Dans chaque série, ci-dessous Le Chili, chaque photo est présentée en grand et s’adapte automatiquement à la taille de l’écran de façon homothétique) en gardant une petite marge en haut et en bas (plus lisible que sans cette marge).

Chaque série dispose d’un texte associé que l’on peut lire en cliquant sur la petite icone de bloc texte à droite de chaque image.

La navigation.

Afin de garantir une cohérence graphique (le moins d’éléments graphiques affichés pour véritablement ne pas gêner la lecture des photos), j’ai trouvé une petite astuce pour ne pas avoir à afficher en permanence les flèches de navigation. L’espace d’affichage est divisé en 2 et c’est alors le curseur de la souris qui fait office de moyen de navigation entre les photos. La première moitié gauche sert à aller vers la gauche, l’autre moitié droite sert à naviguer vers la droite. A gauche, le curseur prend la forme d’une flèche gauche et inversement à droite. La navigation devient alors complètement intuitive, n’interfère nullement avec la lisibilité et ne prend aucune emprise sur la page (les photos occupent alors tout l’espace disponible).

le responsive.

L’ancien site n’étant pas responsive, celui-ci se devait de s’adapter parfaitement sur tous les supports.


Le site est toujours en cours de finalisation, certaines séries de photos ont toujours les photos de taille moyenne de l’ancien site et doivent être remplacées par des photos grand format.