Del prototipo al diseño validado

Cinco caminos en paralelo

Para el nuevo diseño de Pángxing preparé cinco propuestas completas y las comparé sobre los contenidos reales de la web. Cuatro se descartaron: una versión oscura, una de póster y dos editoriales que iban en otra dirección. La elegida fue Editorial v2.

Cómo es Editorial v2

• Fondo de papel cálido. Instrument Serif para los titulares, Inter para todo lo demás.
• Los destacados se marcan con un triángulo rojo y una estrella, como en un periódico impreso.
• Cada comarca tiene su color: azul para la Cerdanya, violeta para el Maresme, naranja para el Berguedà.
• LaIA, el asistente de IA, vive en el hero de la portada. Es la puerta de entrada, no un widget escondido.
• En móvil, navegación inferior con el logotipo PX en el centro, y los detalles se abren con un bottom sheet.

El móvil no fue una adaptación posterior: con el 69% de las visitas viniendo del teléfono, el diseño se validó con un visor específico desde el primer día.

Primero HTML, después código

Todo el diseño se validó como HTML estático antes de tocar el proyecto real. Aquel archivo es ahora la fuente del design system: cuando en la fase 2 un componente no cuadra, se compara con el HTML validado, no con el recuerdo de cómo era.

Esto evita discusiones con uno mismo: el diseño ya está decidido; solo hay que implementarlo bien.