Tipografía en la era digital
El diseño digital y el diseño editorial no son tan diferentes. De hecho, son bastante parecidos. Te contamos por qué.
A pedido del público transcribí una presentación sobre Tipografía Digital que dimos con Aerolab en dos charlas. La primera fue en el evento TipODD de 2015 y, la segunda, en el Encuentro Latinoamericano de Diseño 2016, que se celebró en la Universidad de Palermo.
Aquí va entonces…
¿En qué se parecen HTML y CSS a inDesign? ¿Van a sobrevivir a la era digital los fundamentos del diseño gráfico utilizados en el medio impreso?
Buscamos respuestas para estas preguntas todo el tiempo. Por eso, mi idea es hacer un recorrido a través de los fundamentos del diseño gráfico/editorial y analizar si estos se aplican también en el universo digital.
Hoy en día, la tecnología avanza a pasos agigantados. Existen más de 800 familias tipográficas en el directorio de fuentes de Google. Es cierto, muchas de estas pueden parecer horribles, pero otras merecen una mirada más amorosa.
Toda la presentación que voy a compartir en este artículo está hecha con tipografías gratuitas de Google. Así que si se puede hacer esto con las fonts de Google, imagínense lo que podemos hacer con el resto de los font foundries.
Esta es una frase que escuché decir a muchísimos diseñadores. Bueno, lamento informarles que es una mentira. Los grandes avances tecnológicos que tuvieron HTML y CSS en los últimos años permiten que casi cualquier cosa sea posible en el mundo digital.
Todo el tiempo se desarrollan tipografías nuevas para plataformas mobile y web, mientras que el mundo editorial aparece cada vez más relegado. En este marco, surgen tipografías como San Francisco, que fue especialmente diseñada para dispositivos de Apple, y está pensada para trabajar en UI. Además, empresas como CNN y Samsung también sacaron sus propias tipografías: CNN Sans y SamsungOne, respectivamente.
Estamos en un momento de constante cambio y demanda en el que los diseñadores buscan poder explayarse cada vez más en el medio digital.
El medio siempre marcó tendencia
A lo largo de la historia, fue el medio el que determinó el camino que seguiría una determinada corriente. La tipografía se inventó para las máquinas de impresión de Gutenberg cerca del año 1400. En un principio, su principal objetivo era producir libros en serie y afiches con inscripciones fácilmente legibles.
Hoy, el diseño tipográfico convive con dispositivos móviles y sitios web, en un universo donde abundan las pantallas. En este contexto, el medio impreso comienza a decaer y el campo digital adquiere un protagonismo central.
Las posibilidades son infinitas. Tomemos como ejemplo el avance que hubo en los medios digitales entre el 2014 y el 2015. El sitio de noticias Bloomberg.com demostró que es posible contar lo mismo, de otra manera. En su sitio web, sus creadores cuentan cómo fue el desafío de llevar adelante un proyecto tan exigente como este.
En los últimos años, Bloomberg.com tomó la decisión de re-estructurar su equipo de periodistas, diseñadores y desarrolladores para mejorar la experiencia de sus lectores. Se trata de una empresa que está en constante testeo de cómo lograr nuevas formas vincularnos con los medios digitales.
Por su parte, distintos medios tradicionales también decidieron adaptarse a esta nueva etapa. Un ejemplo de ellos es New York Times, que apuntó a generar notas especiales que propongan una experiencia distinta a la del resto del sitio.
Font Foundries 3.0
No solamente los medios digitales buscan adaptarse a esa nueva tendencia. Font foundries populares, tales como Hoefler & Co, comienzan a ofrecer tipografías especialmente diseñadas para digital. Se trata de tipografías pensadas exclusivamente para dispositivos móviles. Las llamamos tipografías mobile first 😱
Erik Spiekermann, tipógrafo alemán, plantea esta nueva coyuntura como un cambio de formato y el surgimiento de un nuevo medio. Según Spiekermann, “el objetivo del diseño es siempre el mismo: darle forma al contenido”.
“The way to design is the same, you give content form.”
Entonces…
Ahora que saben que en el mundo digital se puede hacer cualquier cosa, seguramente me van a decir:
Diseño Gráfico vs. Diseño Digital
En términos concretos, los diseñadores gráficos se dedican a resolver problemas a través de la comunicación visual. Para ello emplean recursos como imágenes, colores, espacios y tipografías. De hecho, podríamos resumir esta idea en una fórmula:
Diseño Gráfico = Problema + Solución Visual
¿Acaso no es eso mismo lo que hacemos en el mundo digital, incluso con problemas aún más profundos?
Lograr que alguien interactúe con un dispositivo no es fácil. El campo digital permite probar distintas opciones para un mismo problema. Y eso es algo que en el diseño analógico es mucho más complejo y costoso.
Un diseñador gráfico puede diseñar para cualquier soporte. El único requisito es conocer el medio y las posibilidades que ofrece ese medio. Cuando diseñamos para impresión, por ejemplo, es indispensable que sepamos sobre Pantone, colores especiales, laca sectorizada, tipos de encuadernación y que entendamos cómo se preparan los archivos para imprenta.
En digital, en cambio, debemos saber sobre patrones, iOS, Android y exportación de assets para retina display, entre otras cosas.
Podemos llevar este paralelismo un poco más lejos y decir que el imprentero cumple el mismo rol que el desarrollador en digital. Es la persona que transforma el diseño en algo vivo, en algo concreto. Los diseñadores somos personas curiosas, y muchas veces aprendemos a imprimir o a programar por el simple hecho de conocer cómo y dónde estarán plasmadas nuestras creaciones.
Tal es la similitud entre el diseño digital y el analógico que existe sólo una diferencia entre uno y el otro:
Para probar esta afirmación, en Aerolab hicimos un ejercicio. Diseñamos un aviso tradicional para editorial y lo digitalizamos.
Para este ejercicio tomamos una marca que nos gustaba y creamos un aviso tradicional para una revista y su e-commerce. La versión digital incluye una capa que está ausente en el diseño analógico: la interactividad.
En términos concretos, las diferencias entre la versión gráfica y la digital son pocas. En la landing page que creamos es posible visualizar el skate en 360º, elegir dinámicamente el color y agregarlo al carrito de compras.
Entonces… ¿son tan distintos el diseño digital y el diseño gráfico?
Editorial y Digital, un sólo corazón ❤
En lo personal, vengo de un background de editorial. Trabajé para varias revistas y es una disciplina que siempre me gustó desarrollar. El día que decidí dedicarme completamente al campo digital descubrí que muchos de los conceptos del diseño editorial también estaban ahí presentes.
#Estilos
Al trabajar en grandes publicaciones editoriales debemos crear estilos en InDesign a fin de homogeneizar el diseño, compartir tamaños tipográficos y lograr una composición estética adecuada.
En digital ocurre prácticamente lo mismo. La única diferencia es que con CSS no se utiliza una interfaz contextual, sino que se escribe de manera semántica en formato de cascada.
#Grillas
El uso de grillas en diseño digital es tan importante como en editorial. De hecho, las mismas grillas que aplicamos para el diseño editorial se pueden aplicar en diseño web y son muy útiles para hacer diseño modular. Aunque esto no quiere decir que no se pueda romper con la grilla de vez en cuando😜
#Responsive
Las grillas en web son sumamente importantes. En el campo digital, normalmente se utilizan tres tipos de tamaño: desktop, tablet y mobile, y las grillas ayudan a que el diseño se adapte al tamaño de cada pantalla. No obstante, a la hora de hacer diseño web responsive hay tener en cuenta los media-queries. En este punto, es fundamental revisar los estilos a fin de elegir los tamaños tipográficos correctos en cada uno de los dispositivos.
El nuevo rol del diseñador
El rol del diseñador cambia constantemente. En Aerolab no nos dedicamos sólo a resolver problemas visuales, sino que apuntamos a crear grandes experiencias con los productos. Ayudamos a moldear productos desde nuestro punto de vista de diseñadores. Juani Ruiz Echazú, director de UX de Aerolab, resume el rol del diseñador digital:
“El diseño es cómo se ve y cómo se siente un producto”.
En este mercado digital tan competitivo y con el avance de la tecnología, los diseñadores son cada vez más requeridos. No solamente diseñadores gráficos, sino también diseñadores de todas las industrias.
Poco a poco, los diseñadores comienzan a ocupar el un rol trascendental en las empresas. En muchos casos, son los responsables de que las industrias logren resultados rentables basados en mejores experiencias de usuario.
En las últimas cinco décadas, el diseño de a poco abandonó el ámbito puramente estético para comenzar a participar en sectores de estrategia, negocios y liderazgo. En este contexto, surgieron incubadoras cuyos líderes son diseñadores (como es el caso de designers fund) y aparecieron profesionales del diseño que se transformaron en figuras públicas.
¿Podría Sir Jonathan Ive convertirse en el próximo CEO de Apple? ¿Podría Facebook funcionar sin @joulee?
“¡No sé nada!”
Esta es una de las excusas más comunes que plantean los diseñadores gráficos que se rehúsan a trabajar en digital. Lo cierto es que existen muchísimas plataformas en donde se pueden aprender los fundamentos del diseño digital, de manera rápida y accesible. Eso sí, son plataformas digitales.
Aquí les dejo una lista varios sitios en los que se puede obtener una gran cantidad de información, conocimientos, videos y cursos. Algunos son pagos, otros son gratuitos. Pero lo más importante que tienen que entender es que: ¡la información está ahí para al alcance de ustedes!
Typebusters
Para cerrar este artículo recopilé los insights de muchos diseñadores gráficos que no se involucran en el área digital por desconocimiento. Voy a intentar romper con algunos de estos mitos, así se animan a hacer este cambio, si es que todavía no los convencí…
Mito #1
Las leyendas nunca mueren… ¡Nunca!
Helvetica, Bodoni, Rockwell, Gill Sans, son todas tipografías tradicionales que se modificaron para crear su versión digital. Hoy en día, muchas font foundries están adaptando sus tipografías para poder utilizarlas en una pantalla. Fonts.com, por ejemplo, tomó tipografías clásicas y las convirtió en tipografías para diseño digital.
Mito #2
Antiguamente, los diseñadores optaban únicamente por tipografías hechas por profesionales, dado que eso era “lo correcto”. Sin embargo, poco a poco empezaron a aparecer muchos type foundries particulares que ofrecen alternativas gratuitas. Google Fonts, por ejemplo, lanzó recientemente un rediseño de su propio Font Foundry con un foco 100% en lo digital. Agregaron tipografías open source, con caracteres latinos y ligaduras que soportan hasta 135 idiomas.
Incluso tiene un apartado de “featured”, en donde te ayudan a combinar o se destacan ciertas tipografías nuevas.
El diseño gráfico y el diseño digital difieren en el medio. Los diseñadores gráficos suelen creer que el diseño analógico les otorga mayor libertad, dado que no tienen que trabajar con la restricciones del código. Sin embargo, como ya remarqué a lo largo de todo el artículo, ésta es una suposición errónea.
Una de las tantas definiciones del diseño gráfico lo caracteriza como “el arte de combinar texto, imágenes, ilustraciones con un fin de comunicación”. Eso es exactamente lo que hacemos en digital. Definir cómo los usuarios utilizan una web o una app requiere de la misma profundidad de análisis que la decisión de cómo el público va leer un libro o un afiche. En este sentido, diseñar consiste en entender cómo el usuario/público/cliente interactúa con determinado producto, ya sea un libro, un afiche, una app o un sitio web.
Mito #4
Los avances tecnológicos en hardware y software le permiten al diseño digital crear experiencias realmente increíbles. La aparición de Google Chrome como navegador, la muerte del Flash y la profesionalización de HTML y CSS son ejemplos claros de estos avances.
Revivir una vanguardia artística desde lo digital es algo realmente asombroso. La navegación del sitio, el uso tipográfico y las texturas están muy bien logradas en este sitio que recrea el movimiento Dadá.
Los recursos de storytelling en piezas editoriales, el ritmo visual y el foco en el lector se pueden aplicar completamente en el mundo digital. Acá podemos ver cómo esta empresa utiliza estos principios para contarle a los usuarios a qué se dedica.
Mito #6
Cuando nos referimos al diseño gráfico impreso, es inevitable que hablemos de colores pantone. Si tuvieron la oportunidad de trabajar con pantones, sabrán que es realmente complicado trabajar con ellos, son caros y difíciles de conseguir.
Es más, si analizamos en profundidad las diferencias entre RGB y CMYK, podemos ver que RGB cubre un rango de colores mucho más amplio. RGB es un sistema de color aditivo con una posibilidad de colores virtualmente infinita. Incluso el estándar de colores sRGB ofrece una gama de colores mayor que CMYK. Por lo tanto, podemos decir que los colores especiales no son, en absoluto, imposibles de lograr en digital. De hecho, son más fáciles de conseguir y más baratos 😛
Mito #7
Bueno, todo no se puede, lamentablemente. Estos cuatro estilos requieren un nivel tipográfico demasiado preciso, y los estándares actuales de HTML y CSS no permiten alcanzarlo. No obstante, sí existen plugins de Javascript que logran emularlo casi a la perfección. Sólo es cuestión de paciencia.
Conclusión
Vivimos en un momento histórico en el que los diseñadores cumplen un rol central y debemos aprovecharlo. Las decisiones de diseño tienen impactos determinantes en el éxito y el fracaso de las empresas. En este sentido, las compañías comienzan a comprender qué tan importante es que sus productos sean coherentes con ciertos estándares lógicos, de diseño y usabilidad.
Las fronteras tecnológicas se acortan cada vez más, el diseño se unifica y las posibilidades se multiplican. Los avances en software y hardware empodera cada vez más a los diseñadores. En esta línea, FastCo Design publicó este artículo en el que explica por qué es necesario que la nueva generación de CEOs de empresas sean de diseñadores: Necesitamos menos látigo y más ideas, concluye tajantemente el artículo.
En este otro artículo, publicado por la Universidad de California, los autores aseguran que los diseñadores ya no se encargan sólo de la parte estética, sino que también asumen roles que involucran estrategias, modelos de negocio, tecnología y liderazgo.
Un claro ejemplo de esta nueva tendencia está dado en aquellas empresas que se destacan por su diseño, tales cómo Apple y Facebook en donde los diseñadores encarnan un rol fundamental.
“Design is so simple, that’s why is so complicated” — Paul Rand
Para demostrarles que todo lo que dije en el artículo es cierto, en Aerolab hicimos el experimento de maquetar puestas tipográficas complejas, pueden verlo aquí
Aquí la presentación completa para los interesados :D
¡Gracias por leer!
PD: Toda la presentación fue diseñada con Google Fonts ❤
Edición: Guillermo Vidal Quinteiro
