La siguiente es una publicación invitada de Michael Buchmiller, el director creativo de BlueHornet. Michael usó un complemento de jQuery que creé para una aplicación bastante ordenada, así que le pregunté si estaría interesado en compartir la técnica como una publicación de blog. Esta es esa historia.
La idea
Mi empresa, BlueHornet, estaba programada para dar una presentación principal en la Conferencia de evolución del correo electrónico titulada “Tendencias de marketing por correo electrónico para 2012”, que cubriría una serie de resultados sorprendentes arrojados por un estudio que habíamos realizado recientemente. El tema con el que habíamos estado trabajando para el resto de nuestro material colateral en la conferencia era “Enfoque”, y necesitábamos pensar en algo que dejar atrás para dar a los asistentes a la audiencia del discurso de apertura. Habíamos hecho una infografía hace unos meses que fue bien recibida, y con el nuevo estudio en la mano, otra infografía parecía apropiada. Pero aún necesitábamos vincularlo a nuestro tema. La primera idea fueron las gafas decodificadoras retro que ayudan a enfocar partes del póster. De acuerdo, las gafas decodificadoras suelen ser la primera idea, pero finalmente hubo una situación en la que encajaba temáticamente con lo que estábamos haciendo.
Para aquellos que no lo saben, las gafas decodificadoras son muy parecidas a las antiguas gafas 3D con marcos de papel y una lente de gel roja y otra azul. Pero en los anteojos decodificadores, ambos lentes son del mismo color, y usarlos le permite ver mensajes secretos… algo así como en la película Rowdy Roddy Piper, They Live.
Con todos a bordo, nos pusimos en marcha. Paso uno… pide los vasos. Había dos disponibles para elegir… lentes rojos o azules. Somos BlueHornet, así que esta fue una decisión fácil.
Esperar es la parte mas dificil
No había suficiente tiempo para terminar el proyecto antes de la conferencia a menos que comenzara de inmediato. Desafortunadamente, las gafas decodificadoras tardarían unos días en llegar y, como nunca antes había diseñado algo con ellas, no sabía exactamente qué colores necesitaba usar o qué patrones funcionarían mejor. Así que por ahora empezaría con el diseño. Pensé que las ilustraciones publicitarias de las décadas de 1940 y 1950 parecían ser una buena combinación para las gafas decodificadoras, así que ese fue el camino que tomé.
También sabía que no me gustaban los patrones usados en otros diseños decodificables para ocultar los mensajes… la mayoría de ellos son simplemente desordenes garabateados. Quería que el póster se viera nítido incluso si no usabas anteojos, y que cualquier patrón que usáramos tuviera sentido en el diseño. Para esto, quería usar patrones de medios tonos, que unirían todo muy bien.
Me sumergí, abordando primero las piezas grandes para el diseño del póster… simplemente trabajando en blanco y negro para encajar las formas y los espacios, calculando cuánto espacio para copiar tendríamos y cómo encajarían las estadísticas. Agregué un tratamiento de color rápido y temporal para ayudar al resto del equipo a ver lo que estaba buscando, y todos seguían a bordo.
Gafas decodificadoras, ¿cómo funcionan?
Martes por la mañana, llegan los vasos. La emoción de finalmente tenerlos en la mano y la novedad de usarlos en la oficina rápidamente se desvanecieron cuando me di cuenta… Tenía que descubrir cómo diseñar algo usándolos. Siendo fanático de las gafas decodificadoras desde la infancia, tenía una comprensión básica de cómo funcionaban. Inicialmente, todo lo que sea azul en el diseño será dominante y estará en primer plano, y todo lo que esté en amarillo será difícil de leer. Pero todo cambia cuando te pones las gafas… los elementos amarillos del diseño se vuelven de un verde muy oscuro cuando tus ojos combinan el amarillo con el azul de las lentes. Estos elementos ahora de color verde negruzco son más oscuros que las partes azules, lo que hace que salten al primer plano y sean fáciles de distinguir. Todo lo que era azul sigue siendo azul, o se desvanece. Pero, ¿qué tonos de azul y amarillo funcionan mejor? ¿Qué tipo de patrones azules funcionarán sobre el amarillo para que sean fáciles de leer con anteojos, pero casi imposibles de leer sin ellos? Para solucionar esto, necesitaría hacer algunas pruebas.
Probando, probando… 1, 2, 3.
Sabía que no estaríamos serigrafiando los carteles, así que los colores Pantone estaban descartados. Todo esto sería CMYK, y lidiar con los cambios de color del monitor a la impresora podría ser problemático si todo depende de obtener los tonos correctos de azul y amarillo para que el efecto funcione. Afortunadamente, tuve el lujo de saber que los carteles finales de 11” x 17” se imprimirían internamente con nuestra impresora láser a color Xerox Phaser 7400, por lo que pude hacer todas las pruebas en el mismo equipo. Junté un montón de tonos de azul en varios patrones encima del texto en todo tipo de tonos de amarillo y lo imprimí. Cuando los miras con las gafas puestas, rápidamente te das cuenta de cuáles funcionan y cuáles no.
El tono de amarillo que funcionó mejor en nuestra impresora para las partes del diseño que quería ocultar fue CMYK 0/0/100%/0. Varios tonos de azul resultaron efectivos, pero principalmente usé CMYK 100 %/75 %/0 %/0 %, que es un azul real intenso… no muy diferente del color azul de las lentes. Tener una paleta de colores limitada también se relaciona visualmente con la era de las gafas decodificadoras y el estilo de ilustración, así que lo mantuve simple.
A través de este proceso, descubrí que usar el atributo Multiplicar capa de Adobe Photoshop… donde el amarillo se superponía al patrón azul para hacer un verde… funcionaba muy bien. Sin las gafas, verías verde donde se cruzan los dos colores, lo que dificulta la lectura, pero con las gafas, tanto el verde como el amarillo resultaron ser del mismo color… un negro verdoso.
En combinación con Layer Multiply, desarrollé algunos enfoques. Uno estaba escribiendo un montón de palabras en azul encima del diseño amarillo. Sin las gafas, tus ojos se enfocan en las palabras en azul que pueden leer y es muy difícil dejar de ver esas palabras y mirar detrás de ellas el tenue mensaje amarillo. Otra técnica fue usar un patrón de medios tonos que distrajera en azul sobre el diseño amarillo. Tomó un poco de prueba y error averiguar la cantidad correcta de blanco en el patrón… demasiado o muy poco y la pieza amarilla se podía leer fácilmente sin las gafas. Y la última técnica que encontré que funcionó fue poner el mensaje amarillo vivo sobre un fondo amarillo desaturado (como CMYK 0/0/50%/0). Este es probablemente el más fácil de descifrar sin las gafas puestas, pero tenerlo como una opción abrió algunos tratamientos de diseño.
La clave de todo fue encontrar el equilibrio adecuado entre ser difícil de leer sin las gafas y fácil de leer con las gafas. Si seguía siendo difícil de leer incluso con las gafas puestas, podría ser genial en una situación en la que el secreto es la máxima prioridad, pero para nuestros propósitos, no quería que nadie se sintiera frustrado.
A veces, el diseño oculto sería bastante legible en mi pantalla, pero no del todo cuando lo imprimí, por lo que no puede confiar en su monitor… realmente necesita imprimirlo y ver cómo se ve con las gafas.
Una cosa que no anticipé fue que conocer el contenido oculto de antemano me ayudó a descifrarlo, o al menos me ayudó a convencerme de que podía leerlo, cuando por lo demás era ilegible a simple vista. Para combatir esto, me apoyé en compañeros de trabajo objetivos para que intervinieran y me hicieran saber lo que podían o no podían leer.
Terminando el(los) póster(es)
Ahora que sabía qué colores y tratamientos funcionaban mejor, los apliqué al diseño en curso. Se necesitó un poco de prueba y error para que todo saliera bien, pero salió relativamente bien. Dado que los estábamos imprimiendo nosotros mismos y teníamos más estadísticas que espacio en el póster, optamos por hacer que algunas de las secciones fueran variables, por lo que al final, en realidad, había tres iteraciones posibles. Los imprimimos, los empaquetamos y los enviamos a la conferencia. Justo cuando pensaba que había terminado, me hicieron una pregunta muy preocupante…
Entonces, ¿podemos poner esto en nuestro sitio web?
Traducción de impresión a web
La parte más genial de este póster fue interactuar con él usando las gafas del decodificador, y sin ellas, realmente no tiene sentido. Sabía que para hacer justicia al diseño, una versión web tendría que tener cierto nivel de participación por parte del espectador. Paso mucho tiempo en la web, pero no había visto nada exactamente como lo que estaba tratando de hacer. Estoy seguro de que es posible en Flash, pero no soy un gran fanático de él y quería que el resultado final funcionara en iPads y Blackberrys. Es bastante seguro asumir que los visitantes de nuestro sitio web no tendrán sus propios anteojos decodificadores azules. Así que eso está fuera.
Eventualmente se me ocurrió un concepto… una imagen de primer plano que era el afiche normal, una imagen de fondo que era la versión “descifrada” del afiche y algún efecto que revela la imagen de fondo a medida que mueves el mouse. Dividir el póster en pedazos y tener esos pedazos como rollovers de imágenes parecía torpe. Y luego pensé en un tratamiento de “Zoom de imagen” que he visto en los sitios de comercio electrónico, que le permite ver un producto que desea comprar en detalle al pasar el mouse sobre él. Esto me llevó a CSS-Tricks.com y al “AnythingZoomer”.
El concepto detrás de Anything Zoomer era el mismo que el mío… dos imágenes una encima de la otra, donde la imagen en la parte posterior se revela cuando pasas el cursor sobre ella. Pero en lugar de usar el guión como fue diseñado, con la imagen pequeña al frente y la grande atrás, haría ambas imágenes del mismo tamaño, pero usaría la versión “descifrada” en lugar de la imagen grande atrás.
Para hacer realmente la versión “descifrada” de mi diseño, solo agregué una capa sobre el resto de mi obra de arte en Photoshop y la rellené de azul (#0100df), y luego agregué el efecto de Multiplicación de capas. A partir de ahí, modifiqué un poco los niveles del diseño original para que fuera más fácil de leer al decodificarlo.
El código
Me encantaría decir que mi dominio de CSS brilló a partir de ahora, pero AnythingZoomer funcionó prácticamente de inmediato para mis propósitos. Cambié los tamaños predeterminados para trabajar con mis imágenes, diseñé el resto de la página a su alrededor, pero fue bastante sencillo. Realmente solo había una cosa que necesitaba modificar. En el guión original, entre la imagen pequeña y la imagen grande ampliada, hay un pequeño desplazamiento. Entonces, cuando usé mis dos imágenes que tenían el mismo tamaño, no se alinearon. Estar un poco desalineado se ve muy bien cuando se usa el script para el uso previsto, pero para mis propósitos, contrarresté la mayor parte del desplazamiento poniendo algo de CSS adicional en la clase “grande”… margin-top:50px; margin-left:50px;
Página web terminada
Otras aplicaciones
Así que ahora estás pensando: “Genial, si alguna vez necesito hacer una versión web de algo para replicar las gafas del decodificador, ahora puedo hacerlo”. Y eso es verdad Pero te estás perdiendo el punto. Esta misma técnica y conjunto de código proporcionados por AnythingZoomer podrían usarse de muchas maneras que no tienen nada que ver con el zoom. Espero usarlos todos en algún momento, y al principio no estaba seguro de si debería ofrecerlos. Pero finalmente decidí que Internet será un lugar mejor con este tipo de cosas apareciendo en todas partes.
- Radiografía
La imagen de primer plano parece normal, y la imagen de fondo es una versión de rayos X de la misma imagen. Un tratamiento caricaturesco como el juego de mesa Operación sería genial. La versión impresa podría usar un color directo que brille en la oscuridad. Definitivamente estoy haciendo este.
- Sección transversal
Similar a la radiografía, pero en lugar de huesos, vería el corte de lo que está dentro de la imagen de primer plano. Tendría el exterior de un automóvil o una casa, y al pasar el cursor sobre él, se revela lo que hay dentro.
- Vamos a hacer un trato
¿Qué hay dentro de la caja número 2? Solo pasa el cursor sobre él para averiguarlo.
- ¿Dónde está Waldo?
Imagen de primer plano donde se supone que debe ubicar a una persona u objeto entre las masas o el desorden. Si Waldo no es lo tuyo, imagina esos juegos en la revista Highlights. La imagen de fondo podría tener todo atenuado excepto lo que está buscando… como una clave de respuesta interactiva.
- Vision nocturna
La imagen de primer plano sería mayormente oscura y difícil de distinguir, pero la imagen de fondo está teñida de verde como si usara gafas de visión nocturna.
- Visión de calor
Has visto las películas de Predator, ¿verdad?
detalles del proyecto
Ejecución de impresión inicial: 500 carteles
Costo: Lentes decodificadores ~ $0.30/cada uno; La impresión de carteles se hizo internamente.
Cronología
Ocurrencia: 9 de febrero de 2012
Carteles terminados impresos: 17 de febrero
Lanzamiento de la versión web: 21 de febrero