Retour au Web Design
BNR Web

INTRODUCTION

BNR est une association suisse dédiée à la numérisation d'œuvres du domaine public, principalement d'auteurs francophones peu connus. Sa mission est de préserver ces textes, de promouvoir la lecture et de donner de la visibilité à des auteurs qui font partie du patrimoine littéraire, mais qui n'ont pas toujours bénéficié d'une large reconnaissance.

DESIGN PRÉCÉDENT

Bien que le site initial disposait d'une structure définie, des incohérences existaient entre la hiérarchie du contenu et la hiérarchie visuelle, générant des frictions dans la lecture et la navigation. L'interface n'était pas responsive et présentait une esthétique peu actualisée, ce qui affectait la clarté et l'expérience utilisateur.

Ancien design BNR
Ancien design BNR 2
Ancien design BNR 3

OBJECTIFS

Le projet consistait à repenser l'identité visuelle et l'interface du site existant, qui ne disposait pas d'une direction graphique clairement définie et présentait certaines incohérences structurelles.

  • Mettre en place un design homogène et formel.
  • Prioriser la clarté, la lisibilité et la facilité de lecture.
  • Éviter une esthétique trop moderne ou complexe.
  • Intégrer des appels à l'action pour les dons sans être intrusifs.

MON RÔLE

Ma mission a consisté à concevoir l'identité visuelle de la marque et à mener le redesign complet du site web. La structure générale du contenu devait être conservée, tandis que la hiérarchie et l'organisation visuelle permettaient des ajustements précis et justifiés afin d'améliorer la lisibilité et la cohérence globale. Il était essentiel de maintenir un design propre et fonctionnel, facile à implémenter techniquement, en évitant les animations superflues ou les solutions graphiques complexes à reproduire en développement.

WIREFRAMING

La phase de wireframing a permis d'analyser l'architecture du contenu et d'identifier des améliorations structurelles avant d'intervenir sur le design visuel. Cette étape a facilité les ajustements nécessaires pour améliorer la fluidité de lecture et l'expérience utilisateur, tout en permettant d'anticiper le niveau de complexité technique requis pour le projet.

Wireframe BNR 1
Wireframe BNR 2
Wireframe BNR 3

DESIGN VISUEL

Lors de la phase visuelle, la palette chromatique et les typographies définies dans l'identité de marque ont été intégrées à l'interface. Le design précédent a été simplifié, en supprimant les éléments générant une surcharge visuelle ou réduisant la lisibilité. Les appels à l'action liés aux dons ont été intégrés dans une hiérarchie visuelle structurée, garantissant leur présence constante sans caractère intrusif. La couleur a été utilisée de manière stratégique pour soutenir l'organisation du contenu et orienter l'attention de l'utilisateur. Le résultat est une interface claire, épurée et cohérente, conçue pour faciliter son implémentation technique, améliorer l'expérience de lecture et préserver le caractère institutionnel de l'association.

Prototype 1 BNR
Mockup design web BNR
Prototype 3 BNR
Prototype 4 BNR
Prototype 5 BNR