SUTATO

El punto de inflexión del proyecto llegó con el feedback: conservar las fortalezas conocidas del descubrimiento por tarjetas, establecer una jerarquía editorial más clara y dejar que la lectura continúe sin interrupciones repetidas.

El brief de revisión pedía una secuencia de descubrimiento más clara: una historia principal fuerte, historias recientes, contenido en tendencia y una selección de lecturas más profundas. También pedía que el siguiente artículo empezara dentro del mismo flujo de lectura.

Esas decisiones se desarrollaron primero en baja fidelidad. Los wireframes se centraron en la jerarquía, la navegación, las familias de tarjetas reutilizables y la adaptación a móvil. Mantener esa fase en lo estructural le dio al feedback un lugar directo en el trabajo: cada solicitud podía vincularse con un cambio en la página o en su comportamiento.

Las publicaciones de referencia cumplían funciones distintas. GamingBible orientó la lógica de descubrimiento; Game Informer, la importancia editorial y el ritmo de revista. La expresión visual posterior de SUTATO se desarrolló a partir del material de marca proporcionado.

La dirección visual, Signal Cut, toma su geometría de cortes del ritmo del logotipo que proporcionó SUTATO. El amarillo marca momentos seleccionados, mientras que la escala de las imágenes, los titulares condensados y la composición asimétrica fijan el ritmo de la página.

Ese recurso se usa en las aperturas editoriales, los cambios de sección y los límites de lectura. Limitar su repetición ayuda a que esos momentos se mantengan diferenciados. El área de lectura es más calmada, con una columna de texto estable y espacio para pasajes largos.

La tipografía también implicó una decisión práctica de entrega. La familia DDT proporcionada no estaba disponible en el entorno de edición de Figma, así que los títulos editables usan Barlow Condensed y el texto de lectura usa Barlow. El logotipo proporcionado se mantiene intacto. Así la tipografía sigue siendo editable y conserva el ritmo comprimido de los titulares de la dirección.

Una publicación necesita algo más que una cuadrícula de tarjetas repetida. La home final incluye varios formatos editoriales: una tira visual de Stories, un Brief compacto, un debate Two Sides, un Radar semanal y un Editor’s Cut guiado por la imagen.

Cada formato cambia la manera de encontrarse con una historia. Unos permiten un vistazo rápido; otros invitan a una pausa más larga. La página de listado lleva esa jerarquía a una vista de categoría, que combina contenido destacado, análisis y un feed cronológico.

En móvil, la composición se replantea en torno a una imagen dominante y una secuencia breve de apoyo. La escala de las imágenes y la prioridad editorial se mantienen en todos los breakpoints, sin exigir que cada disposición de escritorio se apile tal cual.

El diseño del artículo quita del cuerpo las interrupciones repetidas de historias relacionadas. Cuando termina un artículo, el siguiente empieza con su propia cabecera e imagen dentro del mismo scroll. La transición sigue siendo identificable, así que la experiencia continua conserva sus límites editoriales.

El prototipo permite examinar ese comportamiento. También incluye filtros por categoría, navegación, visores de stories y un carrusel en el hero. El avance automático es limitado: el hero avanza una vez y luego se detiene; los controles manuales siguen disponibles.

El artefacto de revisión independiente suma un flujo de lectura funcional y registra el manejo del foco del teclado en sus capas superpuestas y el soporte de movimiento reducido. Estos comportamientos facilitan evaluar el diseño como una experiencia, incluida la forma en que alguien abre, cierra y regresa de un elemento interactivo.

El trabajo incluye prototipos de Figma para móvil y escritorio, una página aparte con los fundamentos del diseño y un artefacto HTML autónomo para revisión. Los documentos de entrega registran verificaciones visuales y de interacción, con evidencia en varios tamaños de pantalla.

El proyecto demuestra cómo el feedback, la estructura editorial, la expresión de marca y el comportamiento pueden mantenerse conectados a lo largo de una revisión de diseño. El contenido de los artículos y las imágenes del prototipo son material de demostración; lo que se entrega es la experiencia de la publicación en sí.