Volver a Diseño Web
BNR Web

INTRODUCCIÓN

BNR es una asociación suiza dedicada a la digitalización de obras de dominio público, principalmente de autores francófonos poco conocidos. Su misión es preservar estos textos, promover la lectura y dar visibilidad a autores que forman parte del patrimonio literario, pero que no siempre han tenido amplia difusión.

DISEÑO ANTERIOR

Aunque el sitio contaba con una estructura definida, presentaba conflictos entre la jerarquía de contenido y la jerarquía visual, generando choques en la lectura y dificultando la navegación. La interfaz no era responsive y mantenía una estética poco actualizada, lo que afectaba la claridad y coherencia general del sitio.

Diseño anterior BNR
Diseño anterior BNR 2
Diseño anterior BNR 3

OBJETIVOS

El proyecto consistió en rediseñar la identidad visual y la interfaz web existente, la cual carecía de una línea gráfica definida y presentaba inconsistencias estructurales.

  • Construir un diseño homogéneo y formal.
  • Priorizar claridad, legibilidad y facilidad de lectura.
  • Evitar una estética excesivamente moderna o compleja.
  • Incorporar llamados a la acción para apoyar a la asociación sin resultar invasivos.

MI ROL

Mi participación se centró en el diseño de la identidad de marca y el rediseño completo de la interfaz web. La estructura general del contenido debía respetarse, mientras que la jerarquía visual y organizativa permitía ajustes puntuales y justificados para mejorar la legibilidad y coherencia del sitio. Fue fundamental mantener un diseño limpio y funcional, fácil de implementar en desarrollo, evitando animaciones innecesarias o soluciones gráficas complejas de replicar técnicamente.

WIREFRAMING

La etapa de wireframing permitió revisar la arquitectura del contenido y visualizar mejoras estructurales antes de intervenir el diseño visual. A partir de esta fase se realizaron ajustes orientados a lograr mayor fluidez de lectura y coherencia en la experiencia del usuario. Asimismo, esta etapa permitió anticipar el nivel de complejidad técnica requerido antes de avanzar hacia la propuesta visual definitiva.

Wireframe BNR 1
Wireframe BNR 2
Wireframe BNR 3

DISEÑO VISUAL

En la fase visual se integraron la paleta cromática y las tipografías definidas en la identidad de marca. Se simplificó la interfaz anterior, eliminando elementos que generaban saturación o dificultaban la comprensión del contenido. Los llamados a la acción para donación se incorporaron dentro de una jerarquía visual clara, asegurando su presencia constante sin resultar intrusivos. El uso estratégico del color funcionó como apoyo estructural en la organización del contenido. El resultado fue una interfaz limpia, clara y concisa, diseñada para facilitar su implementación técnica, mejorar la experiencia de lectura y mantener el carácter formal e institucional de la asociación.

Prototipo 1 BNR
Mockup diseño web BNR
Prototipo 3 BNR
Prototipo 4 BNR
Prototipo 5 BNR