En buena compañía: Cómo los editores usan Figma para ayudar a diseñar las noticias
En títulos de confianza como The New York Times, The Economist y The Minnesota Star Tribune, un gran diseño puede apoyar un gran periodismo. Aquí se muestra la forma en la que los equipos de medios utilizan Figma para colaborar en el diseño de noticias y explorar nuevos formatos.
Compartir En buena compañía: Cómo los editores usan Figma para ayudar a diseñar las noticias
Ilustración de héroe de André Derainne
Entre los cambios hacia la web y el móvil, y las incursiones en nuevos formatos, los medios de comunicación se han reinventado completamente en las últimas dos décadas. A medida que los editores descubren cómo prosperar en la era digital, el ritmo del cambio solo se acelera. En un mercado publicitario impredecible, las estrategias basadas en suscripciones están en auge. Sin embargo, mientras que los lectores están acostumbrados a pagar por los medios impresos, las noticias en línea han sido una venta más difícil. En las publicaciones de legado, esto plantea un desafío: cómo construir relaciones con nuevos lectores en este ecosistema digital e informativo que evoluciona a pasos agigantados.
Para estar a la altura del momento, estas empresas de medios están utilizando Figma. Ya sea al rediseñar una aplicación, introducir una tipografía o lanzar un sitio web, los equipos deben mantenerse en sincronía para asegurar la precisión, la claridad y la accesibilidad, mientras experimentan con nuevas formas de difundir las noticias. Nos hemos reunido con líderes en medios para averiguar cómo están navegando el cambio.
Cómo The New York Times lanzó una aplicación rediseñada
Desde el lanzamiento de su sitio web en la década de 1990, The New York Times se ha estado reinventando constantemente como una marca digital en primer lugar. Su modelo de negocio actual se centra en convertir a los suscriptores de uno de sus productos digitales—Noticias, Juegos, Cocina, Audio, Wirecutter y The Athletic—en suscriptores de todos ellos. Con más de 11,4 millones de suscriptores totales, la mitad de los cuales pagan por más de un producto, se puede decir con seguridad que el enfoque está funcionando.
Cuando TheTimes rediseñó su aplicación, que se relanzó en octubre de 2024, mantuvo este ecosistema de productos en el corazón de su estrategia. En la versión anterior, los lectores tenían que pulsar y desplazarse por múltiples subsecciones para encontrar los artículos y características que querían. Ahora, los usuarios llegan a la sección de Today, que destaca las últimas noticias, mientras una navegación superior les ayuda a descubrir otros verticales y productos. Cada uno tiene su propia pantalla de inicio, facilitando el descubrimiento de todo lo que TheTimes ofrece más allá de los titulares principales del día. “La idea es que todas las demás piezas giren alrededor del sol, y el sol es el periodismo”, dice Jak Horner, Diseñador Principal de Producto en TheTimes.
Todas las demás piezas giran alrededor del sol, y el sol es el periodismo.
En lugar de una “superapp” que integre todas las ofertas de Times en un feed de noticias central, la aplicación anima a los usuarios a desplazarse a otros feeds, teniendo cada uno su propia identidad visual. La sección de Estilo de vida, por ejemplo, presenta una cuadrícula de imágenes con títulos superpuestos, una adaptación de un componente visualmente impulsado que TheTimes llama “poster”, mientras que la sección de Opinión tiene titulares estilizados que transmiten una perspectiva diferente.
Una de las herramientas que el equipo utilizó fue Figma para ayudar a manejar la escala, la complejidad y el número de partes interesadas implicadas. Los editores de sección, ingenieros y la alta dirección necesitaban trabajar de forma asíncrona en el archivo, junto con el grupo de narración: un equipo de diseñadores que trabaja con la redacción para crear formatos de historia con imágenes, texto, vídeo y audio en diversos diseños. Peter Rentz, diseñador principal de producto en The Times, llama a esto "descubrir la forma del periodismo en sí." En lugar de una colaboración por encima del hombro, dice Peter, "es más bien, 'Oye, vamos a subirnos a Figma.' No necesitamos estar en una videollamada ni compartir la pantalla." En comparación con los flujos de trabajo antiguos, Jak no tuvo que construir tantas presentaciones; en su lugar, podía compartir prototipos dentro de Figma.
El equipo aprecia la capacidad de tener una idea inmediata sobre en qué están trabajando sus compañeros. "De vez en cuando entro para ver qué está haciendo Jak solo para asegurarme de que yo no esté haciendo exactamente lo mismo," dice Peter. "Es una buena manera de trabajar juntos sin pisarnos los pies unos a otros. Esto genera un trabajo eficiente".
El equipo de diseño llevó a cabo sesiones de brainstorm en FigJam, utilizando esas sesiones para informar los bocetos de Figma para los elementos de cada sección de la aplicación. Por ejemplo, era crucial para los editores encontrar el patrón visual adecuado para la cobertura de las elecciones presidenciales de 2024, que cambiaba cada hora. Consideraron preguntas como: ¿Cuánto debe cambiar el panel electoral cada día? ¿Qué pertenece a esta sección frente a Today? ¿Cómo podemos resaltar los elementos visuales? Como resultado de estas discusiones, los diseñadores Chen Wu, Nate Clancy y Frannie Ello desarrollaron un panel electoral con una nueva función de vídeo que permite a los usuarios transmitir la cobertura.
Chen Wu, Diseñador Principal de Producto del New York Times, y Jay Guillermo, Diseñador Senior de Producto, hablan sobre lo necesario para “diseñar a la velocidad de las noticias” en Config 2023. Mira su sesión aquí.
Mientras el equipo de diseño trata de satisfacer las necesidades editoriales con los componentes existentes, a veces necesitan salirse del guion. "Hay un tira y afloja que tenemos con los sistemas de diseño y cómo usamos los componentes", dice Peter. "Aunque tenemos componentes en el código, a nuestras partes interesadas en las noticias les preocupa más la mejor manera de cubrir algo y la mejor experiencia".
Todo esto está al servicio de diseñar a la velocidad de las noticias. “Una fuente constante de creatividad es esta interacción entre el caos e imprevisibilidad de las noticias y la estabilidad de crear un producto a largo plazo”, dice Thea Lorentzen, Directora de Diseño de Producto en TheTimes. "Podemos clasificar eso como diseñar para la incertidumbre".
Cómo The Economist lanzó una tipografía amigable con lo digital
A principios del año pasado, The Economistlanzó dos nuevas tipografías, Economist Serif y Economist Sans, y un logotipo actualizado. Mientras que la publicación experimentó un rediseño más integral en 2018, "todavía estaba en el contexto de una audiencia más enfocada en el formato impreso," dice Adam Morris, Jefe de Diseño de Producto en The Economist. Desde entonces, la audiencia de la publicación se ha vuelto constantemente más digital. Más del 65% de las suscripciones son solo digitales, frente al 35% de hace cuatro años, y el 85% de los nuevos suscriptores son digitales. Con el enfoque multiplataforma, The Economist necesitaba un tipo de letra que pudiera adaptarse cómodamente en todos lados, sin dejar de homenajear su herencia de marca.
“Hay muchos contextos diferentes que no eran una prioridad en 2018”, dice Adam, señalando que la empresa ha estado creciendo en lectores de newsletters y aplicaciones, así como en su audiencia en TikTok, LinkedIn e Instagram. "Tu tipografía tiene que dar mucho más ahora. Pero lo principal es que la gente paga para leer nuestro periodismo, y tienes que tener una tipografía que haga que leer sea un placer".
Hay muchos contextos diferentes que no eran una prioridad en 2018. Tu tipografía tiene que dar mucho más ahora.
El tipógrafo Henrik Kubel de la fundición A2-TYPE trabajó con Stephen Petch, Director Creativo de The Economist, y Adam y su equipo para crear las nuevas tipografías variables. Inspirándose en la rica historia de 180 años del periódico, la serif hace referencia a Plantin; la sans serif, a Venus. Adam y su equipo confiaron en Figma para asegurarse de que cada forma de letra funcionara en diversos casos prácticos, desde gráficos y texto del cuerpo hasta titulares audaces. A veces, ciertos caracteres individuales parecían demasiado ornamentados en su contexto o chocaban con la disposición de la página. Por ejemplo: el equipo vaciló en la longitud de la cola de la letra mayúscula “Q” antes de finalmente decidirse por tres versiones, que van desde una corta para capitulares a una más larga para aplicaciones especiales, como un titular o una tarjeta de felicitación corporativa.
"Con el nuevo sistema tipográfico y con Figma, podemos tener una experiencia fluida en todas partes", dice Mark Mitchell, Diseñador Principal de Producto en The Economist. "La escala tipográfica y la cuadrícula son lo suficientemente flexibles como para ampliarse en el sitio web, la aplicación y los boletines". El equipo centraliza sus tipografías de marca en una biblioteca de fundamentos en Figma, lo que facilita implementar cambios en todas las superficies. "Simplemente es una mejor experiencia, y tenemos mejor control".
Para el rediseño de 2018, The Economist utilizó Sketch para diseñar interfaces, InVision para prototipar y Zeplin para entregar cosas al equipo de ingeniería. Para este proyecto, los flujos de trabajo se consolidaron en Figma y el Dev Mode, lo que ayudó al equipo a implementar cambios sin necesidad de crear diferentes recursos para una variedad de programas. "Todos estamos trabajando en un solo lugar en lugar de tres o cuatro herramientas", dice Adam. "Esto ayuda a cambiar de contexto y a reducir los costes, pero sobre todo ofrece rapidez y facilidad. Figma tenía lo que necesitábamos".
El equipo ha estado utilizando Dev Mode en la mayoría de sus proyectos durante el último año, y ve el mayor impacto de la herramienta de inspección y su relación con las variables de Figma. The Economist utiliza variables para espaciado, color, tema y tipografía, y todas las variables se reflejan en el código con tokens de diseño en sus plataformas web y de aplicaciones. “Las variables son realmente útiles para los diseñadores, ya que proporcionan un conjunto de valores fijos que ayudan a mantener la consistencia en nuestro lenguaje visual y reducen el número de decisiones que necesitamos tomar; pero realmente brillan cuando trabajamos con ingenieros”, dice Mark. Con el Dev Mode sincronizando tokens de diseño en el código y variables en Figma, los ingenieros pueden copiar y pegar lo que ven en el Dev Mode sin necesidad de intercambios adicionales con los diseñadores, o de QA durante las revisiones.
Las variables son realmente útiles para los diseñadores, pero brillan de verdad cuando trabajamos con ingenieros.
El proyecto de tipografía precedió al soporte variable para tipografía, por lo que el equipo se basó exclusivamente en estilos de texto. Desde entonces, han actualizado todos los estilos de texto con tamaños de fuente atados a su escala de tipos, así como el interlineado y las variables de fuentes. "Tenemos cientos de estilos de texto, así que poder gestionar esos valores de manera centralizada con variables ahora es un gran ahorro de tiempo", dice Mark.
Cómo el Minnesota Star Tribune transformó su marca para llegar a nuevos lectores
The Minnesota Star Tribune, cuya circulación se encuentra entre las 10 principales publicaciones diarias en Estados Unidos, se ha propuesto como misión convertirse en un modelo líder para las noticias locales. Aunque el periódico cuenta con una fidelidad de lectores, su presencia digital necesitaba una renovación para atraer a un público más joven y mantener el negocio durante los próximos años. Tal y como estaba, la experiencia del lector entre los sitios de escritorio y móviles era inconsistente. Ambos sitios eran densos en información y tenían mucho texto, e incluso tenían bases de código diferentes. "Donde hemos estado estaba bastante fragmentado", dice Josh Penrod, Jefe de Diseño del Star Tribune. "No teníamos un sitio adaptativo único, lo que erosionó la confianza en la marca".
Trabajando con la agencia digital galardonada Code and Theory, el Star Tribune construyó un nuevo sitio web adaptativo, que se lanzó en agosto del año pasado junto con una revisión completa de la marca, que incluyó un nuevo logotipo y tipografía. Ahora, cuando los lectores acceden al Star Tribune en línea desde dispositivos móviles y de escritorio, tendrán una experiencia similar. "Abordamos el proyecto con la idea de eliminar la fricción y tener un enfoque agnóstico en cuanto al dispositivo para contenido, historias y narrativas", dice Francisco Seiz, Director de Design Senior en Code and Theory. "Resulta crucial tener una experiencia completamente fluida y sin fricciones porque en cuanto no lo es, se vuelve alienante para los lectores".
El rediseño también impulsó un cambio a Figma, que permitió a Code and Theory y al Star Tribune ver los modelos de pensamiento y procesos del otro, y demostrar cambios en vivo. Anteriormente, la organización había estado usando Sketch y la Adobe Creative Suite, y se habían producido algunos intentos fallidos de construir y mantener un sistema de diseño. Dice Josh, "Ver un sistema de diseño en Figma y la fluidez con la que se puede trabajar dentro de él realmente se siente como magia." El equipo de Francisco podía mostrar, sobre la marcha, cómo elegir una de las seis instancias de un componente si un diseño necesitaba ajustes. "Cuando estás en una revisión de diseño en vivo con muchas partes interesadas, es difícil exagerar lo poderoso que es para la rapidez y obtener aceptación", continúa Josh. Francisco coincide: "Todos pudieron influir, inspirar y aportar sin salir nunca del archivo de diseño". Eso crea un proceso realmente transparente, abierto y honesto durante todo el proyecto.
Todos pueden influir, inspirar y aportar sin salir nunca del archivo de diseño.
Los equipos de Code and Theory y Star Tribune trabajaron casi completamente en Figma, desde la fase de talleres estratégicos hasta la creación de prototipos e iteración. Durante los sprints de diseño era útil volver a diagramas y retículas que ayudaban a aclarar el camino a seguir. “La belleza de este proceso significaba que nuestros artefactos no eran solo diseños finales”, dice Josh. “Podríamos mostrar nuestro trabajo y señalar directamente decisiones estratégicas y puntos de datos clave”. Esta forma de trabajar se ha convertido ahora en una plantilla que el equipo planea usar en el futuro.
A mediados de julio relanzaron suavemente el sitio con su tipografía existente para obtener comentarios de los usuarios y probar la velocidad y la funcionalidad; tres semanas después, lanzaron todas las nuevas tipografías. Ahora, el sitiodelMinnesota Star Tribune parece más intencional y se siente consistente tanto en escritorio como en móvil. Es un diseño simple, pero logra el objetivo del proyecto, que es que la UX del sitio no interfiera con el periodismo. "No tengo idea de cómo podríamos haberlo hecho sin la eficiencia de algo como Figma", dice Josh. "Esta es la herramienta que hemos estado buscando durante años".
No tengo idea de cómo podríamos haberlo hecho sin la eficiencia de algo como Figma.
El relanzamiento tomó solo siete meses, pero el trabajo de replataformización interna en TheMinnesota Star Tribune continúa. La esperanza es que más equipos dentro de la organización adopten Figma. Los diseñadores de UX están usando actualmente FigJam para crear una carta del equipo, y el equipo de UX está experimentando con un complemento de anotación para comunicarse mejor con los proveedores que no están familiarizados con Dev Mode. Y a principios de este mes, Josh compró un Figma Creator Micro, un teclado personalizado para atajos de Figma. "No lo estaría haciendo si no estuviera emocionado con esta herramienta", dice.
A medida que la industria de las noticias busca formas de mantener la fidelidad de los lectores, atraer nuevas audiencias y fortalecer su negocio, la necesidad de trabajar de manera colaborativa y efectiva se vuelve más esencial—especialmente dado el paisaje digital en rápida evolución. Para aquellos en el negocio de las noticias, Figma ha sido fundamental para navegar el cambio. Para aprender cómo puede beneficiar a tu equipo, ponte en contacto para una demo.
