Webdesign éditorial : organiser les images et les contenus d’un site

Animation de Bureau 37, bibliothèque visuelle conçue par Minuit d’Orsay à Paris
Bureau 37, bibliothèque de références graphiques.

Sur Bureau 37, la page d’accueil donne accès à une grille de références visuelles. L’index répond à un autre besoin : retrouver une image par sujet, format ou couleur. Ce sont deux façons de parcourir une même collection, selon que l’on souhaite regarder ou chercher.

C’est ce qui m’intéresse dans le webdesign éditorial. Je travaille l’ordre des contenus, la place des images, les titres et les liens entre les pages. La mise en page aide à lire ; la navigation permet de poursuivre. Je suis Tamara Chaudesaigues, webdesigner et fondatrice de Minuit d’Orsay à Paris.

Accueil du site Bureau 37 présentant une grille de références visuelles
Bureau 37 : la grille d’accueil présente les références.

Une page d’accueil et un index ont des rôles différents

Une page d’accueil peut présenter une sélection et donner un premier aperçu. Un index permet de retrouver un contenu selon des critères. Lorsque la collection grandit, ces deux usages deviennent distincts. Une navigation courte ne signifie pas que toutes les images doivent être réunies sur une seule page.

Pour Bureau 37, les missions ont compris la conception du site, le webdesign, l’organisation des contenus, la version mobile et le développement WordPress. Le fond blanc et une typographie lisible donnent de la place aux références. L’index structure ensuite la recherche.

Index de Bureau 37 classant des références visuelles par format, sujet et couleur
L’index de Bureau 37 : un accès complémentaire à la collection.

La page de contenu doit pouvoir se lire seule

Un visiteur peut arriver directement sur une page depuis un lien ou un moteur de recherche. Cette page doit donc présenter son sujet et donner des repères sans dépendre d’une visite préalable de l’accueil. Le titre, les informations associées à l’image et les liens vers d’autres contenus prennent alors une place importante.

Le blog Tamara Chaudesaigues est un autre exemple : des catégories visibles, des articles lisibles et des liens pour poursuivre la lecture. Les rubriques réunissent des sujets différents ; chaque article doit aussi pouvoir exister comme une page de lecture.

Page de référence de Bureau 37 avec une grande image et ses informations
Bureau 37 : une page de référence associe une image à ses informations.

Une collection de mode demande un autre rythme

Dans Varenne, une étude fictive pour une marque de mode, j’ai travaillé de grands visuels, une hiérarchie sobre et une navigation réduite. Le projet va jusqu’au prototype interactif sur Figma : il montre la présentation d’une collection, pas une boutique déployée.

Le besoin diffère d’un répertoire de références. Il faut d’abord présenter les silhouettes et les matières, puis conserver des repères dans les pages. Le même intérêt pour l’image peut donc produire des structures très différentes.

La conception d’un site de marque de mode précise ce parcours. Les questions de mode et de beauté complètent la lecture pour les marques qui doivent également présenter des produits.

Le téléphone change les proportions

Un grand écran permet de montrer plusieurs images côte à côte. Un téléphone demande de revoir l’ordre, le cadrage et la taille des textes. Je regarde ce qui doit rester visible dans une photographie et la manière dont on passe d’un contenu à l’autre.

Ces choix sont liés à la place de la photographie dans un site. Ils doivent aussi permettre de continuer à publier : ajouter une image ou un article ne devrait pas demander de reconstruire chaque page.

Ce que je prépare avant les maquettes

Je commence par un échantillon de contenus, les rubriques nécessaires et les principales actions attendues du visiteur. Nous définissons les types de pages et les liens entre elles. Je travaille ensuite la typographie, les formats d’image, les écrans mobiles et le développement selon le périmètre du projet.

Bureau 37, Varenne et le blog partagent une attention aux images, mais ils répondent à trois besoins. C’est le contenu à organiser et l’usage du site qui déterminent la structure.

Parler de votre site éditorial

Rédigé par

Tamara Chaudesaigues

Partager cet article

Plus d’articles