Este mes, The Economist (Reino Unido, 1843), una de las publicaciones semanales de asuntos de actualidad más reconocida del mundo, ha cambiado su aspecto en la versión impresa mirando expresamente hacia la salida digital de sus contenidos. El nuevo diseño ha sido dirigido por Stephen Petch hacia un aspecto más limpio y moderno: el último gran rediseño se realizó hace 17 de años (Erik Spiekermann y Penny Garrett, 2001).
Sección inaugural de detalles gráficos . The Economist, 20 de octubre de 2018..
1. Infografía y periodismo de datos
La revista presenta una nueva sección llamada «Detalles gráficos» que reemplaza la página de la sección existente de «Indicadores económicos y financieros». Detalles gráficos aporta a la edición impresa la pericia visual del equipo de periodismo de datos (The Economist Data Team).
2. Revisión de los estilos infográficos y cartográficos para clarificar la información. Phil Kenny, director de Gráficos de The Economist: «Con estos cambios de diseño y nuevas incorporaciones, nuestra edición impresa ahora coincide con la amplia gama de productos de The Economist: un diseño uniforme, limpio y moderno, que configura The Economist para los años 2020 y más allá».
3. Branding, somos branding.
Mejora de la consistencia de la marca en todos los productos: Cabecera de portada más grande, páginas más limpias e imágenes más atrevidas, adecuadas tanto para el quiosco de periódicos como para la pantalla móvil.
Tipografía Econ Sans.Tipografía Milo Serif
4. Tipografías optimizadas para web e impreso.
Nuevos tipos de letra optimizados para plataformas impresas y digitales, que ofrecen una mejor experiencia de lectur: Econ Sans (Dieter Hofrichter) y Milo serif (Mike Abbink).
Nuevo índice de contenidos, The Economist, 2018 5. Revisión de todas las secciones
Páginas de contenido completamente revisadas, diseñadas para que sean más claras y fáciles de navegar, incluido un panel expandido «En la portada» para señalar todas las portadas destacadas.
Ilustraciones sencillas e icónicas como punto de entrada en los contenidos. 6. Renovación de la ilustración, marca de la casa.
Estilos de ilustración impactantes y audaces, aptos para la página impresa y la pantalla digital por igual.
Analistas, expertos, columnistas y editores, The Economist 2018 7. Firmas y edición.
Periodistas en las principales ciudades de los cinco continentes (Washington DC, Tokio, Londres, Hong Kong, México City, Nueva York, Singapur, Nairobi, Amsterdam, Bruselas, París, Nueva Delhi, Seúl, Chicago…), corresponsales de ciencia, educación, negocios, finanzas, economía, política social, medio ambiente, cuerpo diplomático, exteriores, medios, banca, salud, innovación, productos digitales, tecnología, lengua, religión, mercados emergentes, periodistas de datos, analistas de datos, editores de datos, analistas políticos, expertos en consumo y puntos de venta, periodismo de guerra y de defensa, de cultura, de libros, de arte, expertos en China, en Oriente Medio, en Rusia, en el Brexit, en Trump.
Elementos de la noticia fácilmente adaptables en la web. 8. Diseño digital y colaborativo
La web como canal de venta y suscripción. Los elementos del diseño son bloques de construcción listos para usar, creando un kit de herramientas que permite a los departamentos aplicar el diseño en todo los proyectos y continuar trabajando de forma independiente para dar vida al producto.
Rediseño de Economist.com, Stephen Petch, diseño y dirección de arte.
9. Fuerza en redes sociales
The Economist mantiene comunidades sociales sólidas en Facebook, Twitter, LinkedIn, Snapchat, LINE, Medium y otras redes sociales.
Nueva portada, The Economist 2018 10. Marca y periodismo
En definitiva, el nuevo lenguaje del diseño de The Economist quiere reflejar la fuerza de la marca y el periodismo; una expresión visual reconocible al instante.
Diagrama conceptual sobre las marcas renombradas de España.
Se incluye como desplegable en la Memoria de Actividades 2017.
Foro de Marcas Dosis Font
2018
Diagrama conceptual de las marcas renombradas de España, 2018
Portada del plano de marcas renombradas de España, 2018 Exterior tríptico, Foro de Marcas, 2018
Interior tríptico, Foro de Marcas, 2018Formato tríptico ‘C’, 450×320 mm
Este es el logotipo ganador del concurso puesto en marcha por las Cortes Generales para el diseño del logotipo que se utilizará en la conmemoración del 40 aniversario de la aprobación de la Constitución española de 1978. El jurado seleccionó por unanimidad al prestigioso diseñador Manuel Estrada.
Manuel Estrada (1953) abrió su propio estudio de diseño gráfico en 1989: «No existen los atajos ni las recetas, a la inspiración hay que esperarla trabajando”.
El pleno del Consejo Asesor para la conmemoración del 40 aniversario de la Constitución Española (1978-2018) está presidido por la presidenta de Congreso de los Diputados, Ana Pastor, y por el presidente del Senado, Pío García-Escudero.
El cuadragésimo* aniversario de la Constitución española se cumplirá el 6 de diciembre de 2018.
Logotipo que se utilizará en la conmemoración del 40 aniversario de la aprobación de la Constitución española de 1978.
(*): Que sigue inmediatamente en orden al o a lo trigésimo noveno.
Dicho de una parte: Que es una de las cuarenta iguales en que se divide un todo.
«Por su intensa actividad profesional comprometida con la comunicación a través de las imágenes, así como su extraordinaria capacidad para el desarrollo de diferentes líneas proyectuales como son la identidad corporativa, el diseño editorial, y la definición de espacios expositivos y comunicativos. Además, el jurado ha resaltado su creatividad rigurosa y resolutiva que ha manifestado de manera coherente con su estilo y personalidad a lo largo de toda trayectoria profesional. Además, se ha destacado su capacidad para conectar eficazmente la cultura con el tejido empresarial, contribuyendo de manera significativa a profesionalizar el mundo del diseño. También se ha valorado de manera especial sus aportaciones en el sector editorial, que han provocado un cambio radical en la línea gráfica y comunicativa, lo que le ha convertido en un referente del diseño gráfico español, dándole reconocimiento internacional. Por último, se ha puesto en valor su compromiso con la promoción del diseño y la formación de las nuevas generaciones y con el papel y la imagen de España en el mundo.»
Durante los años 2016 y 2017, asumo la dirección y la planificación del proyecto de transformación digital y de visualización de los estudios de marca Meaningful Brands y Connect (Havas Media Group).
El reto: crear una aplicación web de consumo interno de gráficos y visualización desde cero. La materia prima con la que contábamos eran millones de datos en formato excel.
El proyecto de visualización conduce los estudios de Havas Media Group desde unas herramientas estáticas, con visualizaciones básicas y una respuesta a la demanda muy lenta, hacia una plataforma interactiva integrada en los servidores de la compañía que permite la personalización de las peticiones en tiempo real.
Diagrama de flujo de la aplicación.
Nuestra misión:
• Homogeneizar la entrada y salida de datos
• Mejorar el aspecto de las visualizaciones
• Simplificar la narración visual
• Conseguir una experiencia de usuario e interactividad excelentes.
Meaningful Brands
Meaningful Brands es el primer estudio que conecta el valor de una marca con su aportación al bienestar individual y social. En el contexto tecnológico actual, donde el consumidor es participativo y crítico en parte a través de canales como social media y pueden hundir una marca o derribar un gobierno, es crítico entender bien cuál es el impacto que las marcas tienen en la calidad de vida.
Por ello, a través de esta aplicación, los usuarios pueden consultar el estudio de cada país y descargarse todo tipo de informes en formato Power Point, imágenes en PDF o jpeg o guardar cada una de las consultas realizadas.
El estudio se ha realizado en más de 34 países y aglutina a más de 1.000 marcas comerciales.
Havas Media Connect
Connect es un estudio para medir y comparar los niveles de influencia y asociación que guardan las marcas de un país o región. Estos estudios sirven para hacer recomendaciones estratégicas a los clientes respeto a puntos de contacto potentes y sustentados para cada una de sus campañas
Havas Media Connect también esclarece la asociación que hace el consumidor entre los puntos de contacto y las marcas. Esto ayuda a entender si una marca tiene algún territorio mediático bien definido, y a cuantificar las oportunidades que tiene la marca en términos de inversión y desarrollo de nuevos puntos de contacto.
Connect cuenta con una amplia base de datos en la nueva aplicación que permite un entendimiento claro de la dinámica de los medios según una categoría, un país, y un target específico.
El reto fue crear una aplicación web de gráficos y visualización desde cero con miles de datos en formato excel.
Desde unos datos en Excel a una aplicación web interactiva
La aplicación interactiva para web recoge toda la información correspondiente al estudio Meaningful Brands y Connect 2017 de Havas Media Group. Junto con la empresa de inteligencia de localización Abacus Consulting Technologies, se ha realizado una optimización de la base de datos del estudio y una aplicación web con detallados gráficos interactivos sobre los cambios significativos tanto en industrias, sub-industrias y marcas.
Arquitectura del proyecto.
Datos estructurados en plantillas de Excel
Transformación de los datos en archivos CSV
Los archivos CSV (del inglés comma-separated values) son un tipo de documento en formato abierto sencillo para representar datos en forma de tabla, en las que las columnas se separan por comas (o punto y coma en donde la coma es el separador decimal: Argentina, España, Brasil…) y las filas por saltos de línea.
Lectura, manipulación y análisis de datos con R
Con un fichero de texto (.csv) podemos hacer maravillas en el mundo de la analítica web. Ya que con los medios adecuados podemos consultar los números que tenemos en nuestra base de datos de forma escalable, flexible y rápida.
Ejemplo de datos estructurados en formato JSON.
Proceso de prototipado de la aplicación
En labores de diseño y usabilidad web, realicé un prototipado personalizado de dos aplicaciones: una para Meaningful Brands y otra para Connect.
Primeros prototipos de la aplicación.
Primero se hicieron los primeros sketch o bocetos en papel de la futura aplicación y la navegación entre distintas pantallas.
Los wireframes son una representación estática de lo que será la plataforma web.
Después elaboramos multitud de versiones de los wireframes y los mockups, que contienen información adicional en cada una de las pantallas: disposición de los botones, contenidos, llamadas a la acción, movimientos tipo dentro de la navegación entre pantallas.
En general, los wirefames y mockups permiten visualizar la línea gráfica, la estructura de la información, el contenido y avanza las funcionalidades del proyecto. Se trata de una representación estática, se entrega y aprueba en formato de imagen.
Realización de prototipos para web.
Primeros desarrollos web de la aplicación
Una vez aprobados los wireframes, se pasó a su desarrollo para web, tabletas y móviles. En esta ocasión, el desarrollo se realizó con AngularJS, una arquitectura de trabajo realizada con el lenguaje JavaScript para el desarrollo de aplicaciones.
El selector principal de datos
Las aplicaciones basadas en AngularJS logran mayor fluidez en experiencia de usuario ya que la comunicación entre el cliente y el servidor se realiza de manera transparente para el usuario. La sensación es que nunca abandona la página (mayor rapidez en la carga de datos).
El menú de visualizaciones y un ejemplo de matriz.
Principales ventajas de AngularJS:
2-Way-data-binding (vinculación de datos en dos direcciones): AngularJS esta continuamente observando los cambios que suceden tanto en la Vista, así como en el Modelo y sincroniza datos entre estos.
Directivas: Las directivas permiten crear nuestros propios elementos HTML y manipular el DOM.
Vistas y Rutas: podemos agregar un solo elemento HTML (contenedor) dentro de un solo archivo HTML, y dentro de éste poder renderizar cada página que tenga que mostrarse, sin tener que recargar la URL.
Filtros: Los filtros apoyan a la vista a la hora de presentar los datos realizando transformaciones sobre ellos. Tiene un mecanismo para filtrar vistas basadas en variables de ámbito scope (por ejemplo, al buscar), sin la necesidad de escribir muchos códigos extra.
Soporta ‘routing’ y ‘deep linking’: El routing permite la interacción con la URL del navegador. Es muy importante para la experiencia del usuario, si se están construyendo aplicaciones de una sóla página.
Promesas (Promises): Tiene una implementación interna de especificación Promises/A+. Promises es una alternativa popular para callbacks cuando se está trabajando con las respuestas del servidor.
Animación: Dispone de un programa que incluye herramientas para crear animaciones fácilmente.
Prototipos y wireframes de visualizaciones
La aplicación comenzó siendo una plataforma para visualizar datos; por ello, las visualizaciones fueron analizadas y prototipadas de forma exclusiva.
Un wireframe es una herramienta de visualización para la presentación de propuestas de diseños de una página web. El wireframe debe ser capaz de explicar fácilmente cómo los usuarios interactúan con el sitio web y saber si estamos en el camino correcto.
Algunas tareas que destacamos de los prototipos:
Creación de un libro de estilo de visualizaciones (tipografías, colores, tipos de gráficos…).
Estudio y realización de los wireframes de los selectores de marcas y su repercusión en las visualizaciones.
Estudios de las proporciones y posiciones de los elementos gráficos que componen cada visualización o la información ofrecida por las distintas descripciones emergentes o ‘tooltips’ integradas en la aplicación.
Wireframe de los selectores de las visualizaciones.
Proporciones y colores de algunos elementos gráficos.
Una vez que las visualizaciones han sido aprobadas en formato estático por el cliente, se realiza un nuevo wireframe con las visualizaciones integradas en la aplicación web. Todo proyecto interactivo debe estar validado en formato estático antes de comenzar su desarrollo.
Ejemplo de visualización
El desarrollo web de las visualizaciones
Las visualizaciones fueron desarrolladas por Beatriz Martínez experta en la librería de javascript D3, gráficos vectoriales en SVG y el lenguaje de estilos CSS.
Algunos tipos de visualizaciones que se incluyen en la plataforma
D3 es una excelente herramienta escrita por Mike Bostock para desplegar datos dentro de páginas web. Algunos ejemplos de gráficos realizados:
– Gráficos de línea
– Herramientas de matrices
– Gráficos de burbujas
– Histogramas
– Rankings de barras
– Mapas de posicionamiento
– Visualizaciones de araña
– Diagramas de procesos de decisión de compra
– Tablas dinámicas de datos
Visualizaciones interactivas realizadas con D3
Algunas ventajas de la librería D3.js
Esta librería se basa en funciones predefinidas escritas en lenguaje javaScript que mejoran la selección de elementos, permiten crear y personalizar elementos SVG y añadir efectos como transiciones o tooltips. Tiene una gran capacidad para manipular grandes volúmenes de datos y vincularlos a dichos elementos para lograr crear gráficos de gran riqueza.
Flexibilidad: sólo la imaginación puede limitar lo que se puede hacer con la librería
Buena integración y facilidad de depuración
Librería modular
Manipulación del DOM dirigida por los datos
Permite un gran control sobre el resultado visual final
Crear elementos SVG (formas, líneas, axes)
Facilidad para crear escalas
Animaciones e interacciones de última generación
Transiciones y efectos visuales
D3.js es una herramienta ideal tanto para gráficos sencillos de barras o líneas, hasta complejos gráficos relacionales o visualizaciones con mapas.
Informes en formato PowerPoint desde la aplicación
El usuario puede descargar informe específicos sobre un país en formato Microsoft Power Point. Todos los informes parten de una plantilla única. Cuando el usuario selecciona el ámbito geográfico del informe, automáticamente se genera el informe y se descarga en su ordenador.
Wireframe del módulo para exportar informes en formato PowerPoint
Informe que se descarga desde la aplicación personalizado según el país escogido.
También se ofrece al usuario la posibilidad de descargar el informe en formato Microsoft Excel; es decir, los números tabulados en bruto.
Desde la propia plataforma se pueden exportar informe en formato Excel o Power Point.
Descargas de imágenes
La aplicación permite, una vez seleccionada una visualización, exportarla en varios formatos o guardarla en un carrito de la compra personalizado.
Formatos de descarga de las visualizaciones seleccionadas en la web.
Los formatos en los que se pueden descargar las imágenes son PNG, PPTx (Microsoft PowerPoint) y XLS (Microsoft Excel).
Módulo de administración de usuarios
El proyecto incluye un módulo de administración de los usuarios de la aplicación. Cada perfil de usuarios tiene sus correspondientes permisos para entrar en la aplicación.
El módulo de administración de usuarios y sus permisos.
El módulo de administración incluye las funciones básicas para gestionar una base de datos de usuarios (crear, listar, actualizar y borrar).
Los administradores pueden crear, ver, actualizar y borrar usuarios desde la plataforma.
Gestión del proyecto
La gestión y comunicación del proyecto con el cliente se realizó a través de la herramienta online de colaboración Basecamp.
Basecamp, herramienta online para colaborar con clientes.
En cuanto a la gestión de incidencias, se realizó a través del gestor Mantis Bug Tracker.
Mantis Bug Tracker es un software que constituye una solución completa para gestionar tareas en un equipo de trabajo
En el año 2017 realicé el rediseño del logotipo de la empresa de inteligencia de localización Abacus Consulting Technologies. En este momento, la compañía estaba en un proceso de transformación digital y trasladando sus oficinas al centro de Madrid.
Logotipo de Abacus Consulting Technologies, antes y después de su rediseño.
Objetivos:
• Rejuvenecer la marca:
Se mantuvo la tipografía ‘Handel Gothic’ para seguir reconociendo la identidad anterior; sin embargo, se buscó un logotipo más moderno, inspirado en las paletas de colores utilizadas en visualización de datos (esta empresa está especializada en visualización sobre mapas). Tras el nuevo diseño, el logo destaca mucho más, gracias a la utilización de 5 colores.
Material del libro de estilo del logotipo de Abacus Consulting.
• Mayor legibilidad:
El anterior logotipo tenía las letras cortadas en su parte inferior lo que dificultaba su lectura. Para que el nombre ganase en presencia, se prescindió de la terminación ‘technologies’.
Plancha del logotipo de Abacus en la entrada a las oficinas.
• Mayor funcionalidad:
En lugar de una forma cuadrada, cerrada y con el nombre de la compañía duplicado, se despegó la tipografía de la marca de su imagen con el fin de poder utilizarse ambas con más facilidad (dispositivos, publicidad, firmas electrónicas, redes sociales…)
Tipografía del logotipo sobre una pared de ladrillo visto.
• Más accesible:
Un logotipo más fácil de entender, más sencillo, que proporcione una mayor seguridad y funcione bien en todas las aplicaciones y medios de comunicación.
El logotipo en una fachada de ladrillo.
• Transmitir las metas de la compañía
Reforzar los valores de la empresa relacionados con la consultoría y reflejar en el logotipo su apuesta por la visualización y el análisis de datos. Para ello, la palabra ‘consulting’ ganó en presencia, se unificó el azul de la compañía y se diseñó una nueva imagen basada en el círculo y el uso del color.
Second Story
Second Story is a network of design studios that focuses on responsive environments, story-driven experiences, experimentation, and innovation. For more than 20 years, we have conceptualized, designed, and developed projects that educate, immerse, and activate across the cultural and brand space.
BRC. Brand, Education, Entertainment, Media and Events.
Desde hace 27 años. Diseño, producción, creacción. De cualquier cosa. Líderes creativos. Proyectos multimedia. EEUU, Reino Unido, Holanda, China. Trabajos para Walt Disney, NASA, Heineken, Ford, MGM, VW…
BRC USA – Headquarters 2711 Winona Avenue Burbank, California 91504 +1 818 841 8084 +1 818 841 4996 fax
La empresa SUMMA ha recibido hoy el Premio Nacional de Diseño 2008 en en el Palacio de Congresos de Córdoba. Summa es una consultora especializada en la creación de marcas con oficinas en Madrid y Barcelona. Más de 30 profesionales en plantilla.
Entre sus trabajos: nueva imagen de RTVE, la imagen de Red.es, Barcelona TV, Bankinter, Criteria.. merece la pena darse una vuelta por su web interactiva.
Fundadores: Conrad Llorens y Josep María Mir. Blog: redblog.
