Tzek Blog de Diseño

Rio de Janeiro es una de las ciudades candidatas a ser sede de los juegos olímpicos del 2016. La identidad tiene un símbolo que evoca a un corazón y/o mariposa y que es en sí el famoso "Pan de Azúcar". El tagline que acompaña a esta identidad es "Eu quero" (yo quiero).

Logo de Rio de Janeiro, ciudad candidata de los olímpicos del 2016

Los cariocas se ha preocupado de dejar "pequeños recordatorios" de que son una ciudad ideal para los juegos olímpicos. De alguna forma esto crea una imagen fuerte y que te reafirma que uno se encuentra en la "Cidade Maravilhosa", llena de naturaleza.

Bienvenida al aeropuerto de Rio de Janeiro.

Desde el aeropuerto uno comienza a ser bombardeado con la identidad visual de esta ciudad candidata.

Frase que identifica la campaña de Rio como ciudad candidata.

Entrada a una de las terminales aeropuertarias.

Lo que me ha causado demasiada emoción en este proyecto es justamente su magnitud. Uno puede presenciar "en la realidad" el impacto de una identidad corporativa. Además, las aplicaciones son ejemplos claros de cómo el diseño y la comunicación corporativa funcionan: que no basta con el "logo", sino de cómo se integran ideas a través de frases y se amalgaman con elementos visuales congruentes.

En la calle, los MUPIs tienen fotografías con imágenes de lugares (por ejemplo, la playa de Copacabana) donde en blanco sólido tienen el pictograma "clásico" olímpico (por ejemplo de "volley ball playero") y frases del estilo "Ciudad olímpica por naturaleza". En otros lugares que ya se encuentran construidos, el diseño es más de información, indicando los posibles usos del lugar.

Lona que explica la posible función del Maracaná para el 2016.

Marquesina en el mini-museo del Maracaná.

Otro tagline manejado es "Viva su pasión". Demasiado intenso, pero efectivo.

Y por supuesto, también dentro del estadio sigue el "bombardeo"…

Palcos del Maracaná.

En el metro de Rio, no se deja escapar la oportunidad de reforzar la imagen de ciudad candidata.

Pasillo del metro decorado con la identidad de los juegos

Poste en el interior del metro de Rio.

Vagones del metro decorados.

En mi caso, siendo un apasionado de la identidad y el diseño corporativo, ver plasmadas tantas aplicaciones en diferentes puntos de la ciudad se me figuró uno de esos proyectos apasionantes en los que uno sueña con participar.

A ver que tal les va a Rio… Sucesso!

Ya a punto de entrar en septiembre, dejo un video que desde siempre me ha gustado mucho: el video promocional del Congreso de la Asociación Internacional de Tipografía Typ09.

Dicho congreso de tipografía se llevará a cabo en la Ciudad de México del 26 al 30 de octubre de este año.

"The heart of letter": presentación hecha por Ricardo Salas Moreno y el concepto visual desarrollado por Isaías Loaiza Ramírez, Gabriel Martínez Meave y Alfredo Lezama Osorio.

Guanajuato es una ciudad mexicana patrimonio de la humanidad, la cual es muy particular debido a su topografía. A grandes rasgos la ciudad parece estar asentada en un bol, por lo que quedan casas prácticamente unas encima de otras, lo cual deriva en muchos callejones y aún más, existen túneles para movilizarse en carro.

Vistas de la ciudad de Guanajuato.

Aunque los sitios turísticos son fáciles de encontrar, el municipio dispuso de un conjunto de páneles a lo largo de ciudad para orientar a sus visitantes. Me interesó y gustó mucho como está presentada la información, ya que de primera mano, al existir tanto recoveco, los turistas podrían pensar que es muy complicado caminar en la ciudad.

Señal turística en Guanajuato.

La primera característica que se me hizo muy acertada fue el contraste. Las señales tienen un color terracota (chedrón o copper red) ad hoc a la ciudad pero que además hace un buen contraste cromático con los textos, los cuales se presentan en color blanco y usando una fuente tipográfica de palo seco, muy limpia y legible. Los demás colores empleados (en el mapa y esquemas) también facilitan la lectura de la señal.

Cada panel está divido en cuatro partes claramente identificables. La primera corresponde al nombre del lugar donde se encuentra la persona. La alineación a la izquierda,  jerarquía tipográfica y el aire alrededor ayudan determinar que "ese texto" (el título) corresponde al nombre del lugar.

Lista de lugares importantes cercanos al sitio actual.

Debajo del texto correspondiente al nombre del lugar, se encuentra una lista de los lugares más cercanos. Su alineación a la izquierda resulta más conveniente que emplear una alineación centrada, ya que se arma una línea vertical imaginaria que agiliza la lectura de dicha lista. Esta lista ocupa una columna central en el panel, de forma que quedan dos pequeñas columnas, una a la izquierda y otra a la derecha. Dependiendo si se tiene que caminar hacia la izquierda o hacia la derecha, se coloca en la columna correspondiente una flecha de dirección (←,→,↑ ,↓) para cada elemento de la lista.

Se que suena bastante intuitivo, pero este tipo de detalles simples reafirman el sentido de orientación espacial.

Mapa de tipo topográfico en la señalización en Guanajuato.

Ya debajo se presenta un mapa, cuya intención es situar al usuario en el espacio físico. En español, francés e inglés, se le indica con etiquetas como "Frente a ti" y "Detrás de ti" la relación entre lo que observa en el mapa y el entorno que lo rodea. El camino principal se resalta con color amarillo, dando evidencia a las formas de éste; muy útil para entender "cuando dar la vuelta". También se muestran, mediante contraste cromático, los sitios importantes en el área incluyendo los de la lista. Además se marca el norte como símbolo estándar de orientación.

Mapa esquemático a la Henry Beck de un recorrido en la ciudad de Guanajuato.

La cuarta y última sección de cada panel corresponde a un esquema conocido también como mapa de tubo,  idea formidable presentada por Henry Beck en los 30s. En éste también el usuario se orienta en cuatro direcciones (←,→,↑ ,↓), pero le brinda la ventaja de identificar rápidamente que lugares se encuentran conectados con respecto al camino principal y mediante qué calles. La legibilidad para ir del punto A al punto B sin duda se incrementa con este tipo de mapas. De nuevo, lo importante se contrasta mediante el color, tanto para el camino principal como los lugares importantes. Los textos tienen su mayor contraste en este sentido con la aplicación del color blanco.

Este tipo de iniciativas me gusta mucho en los casos en los que uno no desea tomar recorridos y la ciudad, como Guanajuato, es adecuada para caminarse. Así vas tomando en cuenta qué lugares vas vistando y cuáles han llamado tu atención, previa investigación en la red o bien con una guía en mano. Sólo espero que no acaben destruidos o bien, que no se les de mantenimiento y acaben siendo un elemento deteriorado y visualmente desagradable al paso de los visitantes de esta colonial y especial ciudad.

Los escenarios son muy útiles en el diseño de interacción. Aunque tradicionalmente son escritos, tomar la opción de presentarlos en video o a través de bosquejos también puede ser muy conveniente ya que se explota el factor visual-narrativo. Como muestra, tenemos estos videos del canal en Vimeo que tiene el Mobile Experience Lab, parte del Design Lab del MIT.

Encontré este post de Nettuts+ de herramientas para desarrolladores web. Lo dejo aquí de referencia, en particular por el enlace que tiene a TypeTester, herramienta que está super-bien para checar color tipográfico en pantalla. ¡Ah! Y también por el generador de paletas de color de ColourLovers que resulta práctico cuando uno está en clase de diseño web.

Ojalá les sea también de utilidad. ¡Saludos!

Un video de la compañía Continuum sobre Strategy Design. Como ellos indican, el asunto es conseguir la idea correcta. Una empresa con filosofía de Design Thinking.

Anteriormente había posteado sobre el taller de diseño de tipografía que impartiría Isaías Loaiza. En lo personal fue una experiencia enriquecedora, además de que Isaías transmite esa pasión por la tipografía y su relevancia en el diseño. Aquí dejo algunas notas de lo visto en el taller.

La primera parte del taller fue sobre apreciación tipográfica y cómo se puede explotar la tipografía para darle sabor y carácter a una marca. Entre los ejemplos, vimos el trabajo de Alex Trochut. Bastante impresionante.

Después nos tocó hacer caligrafía con "pluma de punta rígida" simulándola con un pedazo de madera.

Como primer paso se necesita una unidad para establecer medidas, la cual estará dada por el lado del pedazo de madera que emplearemos para escribir. Un enfoque consiste en tomar nuestra pluma y hacer ocho marcas verticales en serie: dos corresponderán a la altura de nuestros ascendentes, cuatro corresponderán a nuestra altura de las x y dos para el tamaño de nuestros descendentes.

Algo importante es no mover la inclinación de la punta una vez asentada sobre el papel. Esto provocará modulación (aparición de finos y gruesos). Si movemos la punta conforme vamos trazando, los grosores tenderán a sarlirnos uniformes.

Sobre el diseño de tipos en general, según Isaías, debemos tener en cuenta cuatro variables: el tamaño (con respecto a la líneas guía), las curvas (que tán gruesa o fina resultará), el origen (qué tipo de fuente es) y el espaciado entre letras (fijarse en la contraformas).

Una palabra de prueba es hamburguerfonsiv.

Isaías nos comentó un tip para manejar los gruesos en los fustes (las columnas), transversales, curvas, diagonales y fustes para mayúsculas. Si se piensa en términos del ancho de un fuste, entonces el resto son variaciones de esta medida.

También discutimos sobre ligaduras, e Isaías comentó que es un recurso para darle personalidad a un logotipo hecho a la medida, así como los ambigramas y los swooshes.

Con respecto al trazo, comentó que existe un conjunto de reglas para lograr unas curvas perfectas.

Regla 1. Manejar la cantidad mínima de nodos.

Regla 2. Caracterizar la forma de la letra en términos de sólo tres nodos: curva, tangente y de esquina.

Regla 3. Intentar que los puntos estén en los extremos superior, inferior, derecho e izquierdo.

Regla 4. Procurar que las perchas (esto es, los controles de la pendiente de las curvas) sean ortogonales.

Regla 5. Que las perchas sean simétricas.

Un taller bastante interesante sin duda. Gracias al colega Isaías por su tiempo y entusiasmo. Lo único inconveniente para mi es que me he quedado con ganas de tomar un taller de caligrafía o bien, uno de diseño tipográfico, lo cual estaría super.

Actualización:

a) Wow. Gracias por sacarme de mi ignorancia, muchas gracias por explicarme la verdadera razón Que bueno que escribí este post o hubiera muerto engañado; mejor evidenciar que uno se equivoca a vivir en la ignorancia. ¡¡¡Gracias por los comentarios!!!

b) Mi colega Omar V. me manda una liga donde parece estar la información pertinente: http://en.wikipedia.org/wiki/TOSLINK

Post original:

Primero, quisiera compartir tres puntos:

1. A los que estamos involucrados en diseño, hemos escuchado alguna vez la frase "Un buen diseño es aquel que es invisible ante sus usuarios".
2. Por otro lado, está el enfoque de Mark Weiser y su Calm Technology, del cual he comentado, y creo que muy importante: tu diseño debe disponer de todo al usuario, pero sólo lo necesario para realizar una tarea debe estar en el centro de su atencion y lo demás en la periferia.
3. El diseño de información se encuentra en muchos objetos de todos los días, en su mayoría con instrucciones o etiquetas (textuales, verbales o visuales), y es un hecho que estamos bien adaptados a códigos cromáticos, como sucede con los semáforos o señales de peligro.

Recientemente me topé con una situación que parece conjuntar los tres puntos: el desajuste de los speakers en la lap. Tenía enchufado los audífonos; parece que al sacar el conector, moví algo por dentro y la lap se quedó como si tuviera los audífonos aún conectados; por lo tanto, los speakers no se oían.

Es primera vez que me sucede esto, pero parece que es un problema más común en las Mac de lo que pensaba. Para solucionarlo, enchufas  los audífonos de nuevo y vas girando suavemente el conector, luego los desenchufas y ¡voilá!, tus speakers suenan de nuevo. Lo comento por si alguien ocupa esta info algún día.

Para indicarme que algo iba mal y dónde estaba el problema, el hueco para enchufar los speakers se puso rojo. Realmente me sorprendió y encantó este hecho, porque no tenía ni idea de que ese orificio se podría iluminar en ese color. Además fue un warning que me señalaba el lugar y no hacía tanto alarde en la pantalla o se ponía en un lugar de ésta que a lo mejor ni veía. Además, está la simple idea de manejar el color rojo para decir que algo está mal empleando una convención occidental.

Me causó el mismo impacto que cuando ví "dormir" a mi iBook G4 por primera vez: la luz se prendía y apagaba lentamente como si estuviera respirando y lo mejor aún, no pensé que hubiera una luz en la orilla de mi laptop.

Una duda que me surge con este tipo de detalles, que van más con lo funcional que con caprichos decorativos, es: si a la gente de Apple se le ocurre incorporar este tipo de características, ¿por qué en otras compañías no se toman decisiones similares? ¿será realmente algo diseñístico o cuestiones de mercadotecnia según delimitan segmentos de mercado y ofrecen lo que creen ad hoc a los diferentes nichos?

En fin...

Crea, la mesa estudiantil de diseño de información visual de la UDLAP, organiza este taller de tipografía del 22 al 24 29 de abril (de 5:00 a 9:00 p.m.) dirigido por Isaías Loaiza.

El taller es de cupo limitado, tiene un costo de $150 y los temas son los siguientes:

• Anatomía tipográfica.
• Clasificación tipográfica.
• La familia tipográfica.
• Legibilidad y leibilidad.
• Tipos de lectura.
• Proporción visual.
• Ajustes ópticos.
• Bases de diseño de un alfabeto a mano alzada.
• Diseño de signos tipográficos.
• Nociones de calidad tipográfica y curvas de Bézier.
• Dibujo vectorial / construcción de formas en entorno digital.
• Paths, Nodos, Modos de curvas y Reglas de dibujo.
• Interpolación y acciones.
• Espaciamiento.
• Adobe Illustrator vs. FontLab.
• Fuentes Digitales y Codificaciones (unicode).
• Administración de fuentes en MacOS X.
• Formatos tipográficos: TrueType, Type1, OpenType.
• OpenType para usuarios: uso de propiedades y transformaciones.

Para mayores informes, contactar a los miembros de Crea, ya sea a través de su sitio web o por Facebook.

Notas de último momento: 1) es el 29 el día final del taller y parece que es necesario llevar lap propia.

Este jueves 26 fue el primero de dos días del taller "Diseño de Interacción para el Mundo Real" con Joe Fletcher en el congreso Códice 8, diseñador que participó en el desarrollo de la Surface de Microsoft.

En esta sesión nos comentó qué es y qué no es diseño, y qué se entiende por diseño de interacción y de experiencias. Aquí unas citas:

El diseño no es un evento, no es un producto y no es una experiencia. El diseño es acerca del proceso.

Si asumimos que el diseño es el proceso, el producto no importa.

El diseño de experiencias es concentrarse en momentos que se comprometen la gente y las marcas y en los recuerdos que esos momentos crean.

Cada vez que diseñes, el diseño debe decirte una historia.

La sesión tuvo dos ejercicios, ambos en grupo. El primero consistió en darle órdenes a Joe para hacer un sandwich de mantequilla de maní y mermelada de fresa.

Un ejercicio de cómo hacer un taco hubiera funcionado mejor. El original: muy gringo a mi gusto.

Según entendí, el objetivo era demostrar lo complicado que es pensar tanto narrativamente como algoritmicamente: como entender qué y/o quiénes se hacen partícipes en una interacción (una tarea) de principio a fin y cómo cada uno de esos elementos tiene ciertos comportamientos (lo que puede hacer, sus funciones). 

Explicación de los bocetos para la cocina de Steve Jobs (foto de celular)

En el segundo ejercicio, el problema fue diseñar una cocina para Steve Jobs. Nos dispusimos a pensar un poco en Steve, luego definir el problema, de ahí hacer una lista de las restricciones de diseño y por último, elaborar bocetos de esta cocina. Me agradó que hicimos el ejercicio sin usar los términos y/o nombres de los métodos o herramientas que empleamos, qué basicamente era diseñar en términos de Personas, el método de diseño inventado por Alan Cooper, para después hacer un sketching muy a la Bill Buxton.

Como profesor, es similar a lo que veo con mis alumnos, pero me sentí muy raro al estar del otro lado: yo haciendo el ejercicio. No es tan fácil sentarse en grupo y comenzar a discutir y proponer, evitar protagonismos o llegar todos a un consenso. Aquí fue rápido por cuestiones de tiempo y además estábamos en un ambiente amigable; pero el mismo Joe comenta que así es un día de trabajo: sentarse con programadores, creativos y hombres de negocio; lo cual, no es fácil. 

El taller terminó con una ronda de preguntas y respuestas en la que Joe nos dio su opiniones sobre el diseño en México, cómo está el diseño de interacción en Estados Unidos y la realidad laboral de los diseñadores en general, cómo llegó a Microsoft, la importancia de tener un design thinking, entre otras.