rediseño

LaVanguardia.com: donde tradicionalidad e innovación se dan la mano

Maria Oliva (@MariaOliva55) – El diario La Vanguardia es de los periódicos que acumulan mucha historia a sus espaldas. Fue fundado en febrero de 1881 por parte de los hermanos Godó y ha vivido numerosos cambios y contextos políticos, económicos y sociales. Tiene una larga trayectoria en el mundo de la prensa escrita tradicional y es el diario de referencia en Cataluña. Hace pocos días, informábamos del cambio en el equipo directivo fruto de la llegada de Màrius Carol como nuevo director sustituyendo a José Antich.

Ficha técnica:

  • Propietario: Grupo Godó de Comunicación, S.A
  • Director: Màrius Carol
  • Editor: La Vanguardia Ediciones, SL
  • Sede: Barcelona
  • Primera aparición web: 1995
  • Sitio web: www.lavanguardia.com
  • Versiones web: Versión única en castellano. Ediciones especiales para 16 Comunidades Autónomas y para los territorios comarcales catalanes.

La Vanguardia, como tantos otros medios, se tuvo que adaptar al boom de Internet para no perder el carro de la digitalización. Lo hizo el año 1995 con la apertura de su versión digital. Su web ofrece los contenidos de la edición impresa y mucho más. De momento, solamente está disponible en la versión en castellano. El medio, que pertenece al Grupo Godó, es un ejemplo claro de como los periódicos convencionales se han adaptado para ser competitivos en la red. La Vanguardia digital se define a sí misma como un medio online que ofrece “rigor tradicional e innovación constante”.

la vanguardia analisi

Este es el aspecto que presenta la portada de LaVanguardia.com. La web se creó en 1995 y su último rediseño fue hace quatro años para potenciar la usabilidad. (FUENTE: www.lavanguardia.com)

Anuncis

Un diseño finalista en los premios ÑH8

Vídeo de LaVanguardia.com que explica el rediseño de su web hace quatro años

Maria Oliva (@MariaOliva55) – En diciembre de 2010, La Vanguardia relanzó su versión digital con un nuevo diseño totalmente renovado. Se estrenó un nuevo logo, se pusieron en marcha nuevas secciones y nuevos servicios, se ampliaron los contenidos multimedia y se mejoró la participación de los usuarios. Un año más tarde, la renovada web llevó a LaVanguardia.com a ser finalista en los premios ÑH8 de diseño periodístico en la categoría de publicación online mejor diseñada de 2011. Los premios ÑH8 son convocados por el Capítulo Español de la Society for News Design y seleccionan cada año lo mejor en diseño periodístico dentro de los medios impresos y digitales que se hacen en España y Portugal.

La edición digital de La Vanguardia apuesta por un diseño ordenado, sobrio y sobretodo funcional con una distribución en tres columnas separadas por filetes y corondeles. Se potencia la usabilidad, la legibilidad y la innovación. La columna central es la más estrecha y, juntamente con la de la izquierda, incluye todos los contenidos informativos que se van actualizando diariamente. Las noticias se diferencian jerárquicamente a través del tamaño del cuerpo de los titulares.

La publicidad, los contenidos especiales, y los que van ligados a la versión impresa se concentran en la columna de la derecha. No obstante, los anuncios también se intercalan en medio de los módulos informativos y dan un toque de color conformando un mosaico. La imagen y los vídeos tienen un papel central y protagonista en todos los contenidos que se ofrecen y también a nivel visual. Por lo que a la tipografía se refiere, LaVanguardia.com utiliza una fuente de palo seco sobre un fondo blanco. Los colores predominantes están en consonancia con el modelo editorial del diario, que es un periódico de referencia: se trata principalmente del  típico azul oscuro que domina en la edición impresa, además de un azul más claro, el blanco y el negro.

El sistema de navegación principal es doble: la primera línea de navegación permite al usuario moverse por el contenido de la web a través de las clásicas secciones temáticas: des de política y economía hasta vida, cultura, sucesos y opinión. También incluye los apartados de participación, servicios y hemeroteca. La segunda línea de navegación es la que permite escoger entre la edición general o las diferentes ediciones regionales.

la vanguardia.com

El logo es el elemento más destacado de una cabecera discreta y simple. Demuestra plenamente la conjunción entre la tradicionalidad y la digitalización con una combinación del logo de la edición impresa (letras egipcias) al que se le añade “.com” que genera contraste, con un color azul más claro y en letras de palo seco.

Al lado del logo encontramos un buscador, la información del tiempo meteorológico en Barcelona y un subsistema de navegación que contiene los enlaces a las secciones y apartados que distinguen LaVanguardia.com. Entre ellos, La Vanguardia TV. En la parte de más arriba de la página hallamos los bloques temáticos que destaca la edición digital de La Vanguardia. La cabecera ofrece enlaces a todas las secciones y áreas de la web, facilitando así el acceso directo a cualquier zona de LaVanguardia.com.

Frankfurter Allgemeine Zeitung: de Alemania al mundo

Raquel Pérez (@reithebonsai) – El 1 de noviembre de 1949 nacía el que es el tercer periódico alemán de mayor edad, alumbrado como “reivindicación de la alta cultura alemana en un país acusado de barbarie” según José Vidal-Beneyto . Detrás de su icónica tipografía gótica, se esconde la historia de unos liberales que aspiraron a superar el estadio de nación derrotada en la Segunda Guerra Mundial.

Ficha técnica:

  • Propietario: FAZIT-Stiftung (93,7%)
  • Editores: Werner D’Inka, Berthold Kohler, Günther Nonnenmacher, Frank Schirrmacher y Holger Steltzner.
  • Sede: Frankfurt am Main
  • Primera aparición web: 2000
  • Sitio web:  http://www.faz.net
  • Versiones web: alemana e inglesa (hasta 2002, junto con el International Herald Tribune)

Friedrich Karl Fromme, uno de sus editores iniciales, citó los colores de la bandera alemana a la hora de catalogar la esencia del diario: negro en referencia al conservadurismo político, rojo por sus páginas de arte con predilección por la izquierda y dorado debido al liberalismo económico. Autoproclamado “the Paper of Germany”, el Frankfurter Allgemeine Zeitung (FAZ) es un periódico dirigido a un público con estudios académicos y a círculos empresariales y de intelectuales. En sus editoriales refleja su predilección por el individualismo y la propiedad privada defendidos por la Unión Demócrata Cristiana.

Al contrario que sus dos competidores directos, el Süddeutsche Zeitung y Die Welt, la dirección no recae sobre una sola persona. Un comité de cinco editores es el encargado de determinar qué línea seguirá el noticiario. El FAZ también destacó por no incorporar fotografías en la portada de su versión impresa hasta 2007. Solo sucesos como la caída del Muro de Berlín o el atentado contra las torres gemelas fueron excepción a esta norma. Una circulación de 370.000 copias diarias convierte al periódico de Frankfurt en el segundo más vendido en Alemania.

http---makeagif.com--media-2-17-2014-veIbSs (1)

Evolución de la página de inicio del Frankfurter Allgemeine Zeitung. (FUENTE: FAZ).

The New York Times: cuando menos es más

Marc Montull (@fujicolor19) – Hace pocos días destacábamos el rediseño del sitio web de The New York Times e informábamos del incremento de suscriptores en la misma edición online. Y es que la versión digital del medio de la ciudad que nunca duerme es de las más visitadas en Estados Unidos y también a nivel mundial. Con este post introducimos nuestro análisis de la versión web de The New York Times:

Ficha técnica:

Hablar de The New York Times es hablar de uno de los periódicos de referencia en Estados Unidos  y con mayor influencia a nivel mundial. La Dama Gris (como se conoce al medio popularmente) inició su periplo en internet en 1995, con el servicio de entretenimiento y artes @times, en American Online. Aun así su verdadera salida a flote en la red llegó en 1996 con la edición online – www.nytimes.com – dando acceso mundial a sus publicaciones. Des de entonces el sitio web de The New York Times ha mantenido su reputación de ofrecer un producto de calidad, en la vanguardia del periodismo digital. Actualmente tiene tres versiones: Estados Unidos, Internacional y China.

NYTimes

Evolución de la página de inicio de NYTimes. Fuente: The Atlantic

La importancia de la imagen

Marc Montull (@fujicolor19) – Siguiendo la tendencia online The New York Times apuesta por dar poder al contenido audiovisual. Y eso pasa en el medio americano por un uso sobrio de la imagen, pero destacado a la vez, más por contraste que por número.

Los vídeos, con una sección propia, cobran mucha importancia, hasta el punto que después de las hard news lo primero que encontramos son este tipo de contenido audiovisual.

Una vez en la sección (diferente por el fondo negro) descubrimos los vídeos de cada sección, entre los que destaca TimesMinute, noticias audiovisuales en 60 segundos.

Respecto a las fotografías, son el elemento más rompedor en las noticias, normalmente en medio o al final del artículo. A remarcar que se expanden dentro de la misma página. Los infográficos, con un cuidado diseño acorde con el minimalismo del que hablamos, se sitúan en la parte izquierda, ya hacia el final de la pieza.

NYTimes

Otro de los contenidos diferenciales del Times son los reportajes gráficos, introducidos por primera vez con “Snow Fall”, que combinan imagen, vídeo y texto con el uso fluido del scroll, aprovechando al máximo las posibilidades de internet.

La hamburguesa y el sistema de navegación

Marc Montull (@fujicolor19) – Entre los responsables de que el sitio web de The New York Times respire y desprenda más limpieza que nunca se encuentra una hamburguesa.

NYTimes

Fuente: Fast Company

Y es que es gracias al llamado sistema de hamburguesa que se ha podido eliminar la interminable columna de navegación en el carril izquierdo. Ahora las secciones se mantienen escondidas detrás de tres barras horizontales (la hamburguesa) y aparecen haciendo clic sobre ellas: en el lateral izquierdo una pestaña con todas la secciones y apartados de cada una de ellas.

La hamburguesa se mantiene en todas las páginas del sitio web, junto al botón de búsqueda Search, de modo el usuario tiene en todo momento las secciones a un clic y una interfaz limpia y sin distracciones.

Por otro lado, el Times ha preferido mantener una mínima barra de navegación debajo de la cabecera, con las diez secciones más importantes. Ésta se desliza además acompañando el movimiento del lector.

NYTimes

En lo referente a redes sociales, Facebook y Twitter se muestran casi omnipresentes en todo el sitio web. Quizás merece la pena destacar el tentador Share que aparece en todas las noticias una vez empiezas a descender por la pieza.

La noticia manda

Marc Montull (@fujicolor19) – Aparte de su minimalismo si algo destaca en el sitio web de The New York Times es el tratamiento que reciben las noticias. Y es que en el nuevo rediseño queda claro que las noticias son para leer. Se ha eliminado cualquier elemento no-informativo dejando una superficie diáfana solo manchada por el texto del artículo, sin nada que distraiga al lector.

NYTimesAsí lo que el usuario encuentra en cualquier noticia del Times es una cabecera simplificada al máximo sobre todo gracias a la famosa “hamburguesa” y a que en la misma parte superior solo se incluye una barra horizontal con el resto de contenidos que ofrece el medio.

A partir de aquí es ya todo la noticia en cuestión. La tipografía del titular es la misma que en la versión impresa, en cada sección diferente. Respecto a la tipografía de la noticia encontramos un tamaño de cuerpo e interlínea mayor, sin recuadros paralelos a lo largo de la pieza. Todo ello para proporcionar una experiencia de lectura limpia.

Otros de los aspectos a comentar es el uso del scroll del ratón. Siguiendo la tendencia que ellos mismos iniciaron para sus reportajes gráficos las piezas se leen de arriba abajo sin interrupción, proporcionando una experiencia fluida e intuitiva. De la misma manera podemos cambiar de noticia mediante flechas en el lateral, como si pasáramos las páginas del periódico en papel.

Finalmente cabe destacar el protagonismo que el medio americano ha querido dar a los comentarios de los lectores. Con un clic abrimos una pestaña en el lado derecho, paralela al texto (lo que permite comentar y seguir leyendo la noticia) con todos los comentarios de los lectores. Además se incluyen los comentarios más valorados por los mismos usuarios y por los editores.

NYTimes