Diseño gráfico del CD-ROM
|
Contenidos: |
El diseño gráfico de la versión en CD-ROM de Habla blah! fue llevado a cabo (heroicamente) por la Coto Mendoza y Luciano Vergara. A decir verdad, "diseño gráfico" es un poco modesto para las funciones en realidad ejecutadas, puesto que también Coto y Luciano estuvieron a cargo de la adaptación de fuentes tipográficas y de la programación del software propiamente tal. Aunque no corresponde a diseño gráfico estrictamente hablando, también es responsable de la imagen general Edgardo Cifuentes, quien dibujó (adivinen) todos los dibujos que hay a lo largo del contenido, y Juan Bravo y Nidia Jara, quienes tomaron las fotografías y filmaron los vieos de nuestros actores, Pablo Balboa y Loreto Cortés.
1. El concepto
El concepto de diseño detrás del CD-ROM consistía en una apariencia como de notera o cuaderno de colegio, que se iba desplegando en la medida que el usuario usaba las botoneras para acceder a las distintas secciones del material. Desde la pantalla principal del programa (y luego de una suerte de splash screen de bienvenida), el usuario debía posar el mouse sobre la categoría de temas de interés (por ejemplo, "Más temas prácticos") y al hacer click sobre esa categoría los temas propiamente tales se desplegaban en una botonera a la izquierda. Al hacer click en el tema, se accedía al contenido y otro índice en la cabecera con los subapartados que pudiese tener el tema, como se aprecia en la imagen a la derecha (se puede ver con más detalles si la abren en una nueva pestaña en su navegador).
(A todo esto, si quieres instalar el programa original en formato CD-ROM en tu PC, baja el siguiente instalador aquí. El instalador pesa unos 350 MB, por lo que puede tomar un rato bajarlo por completo.)
La lectura de los contenidos requería que el usuario posara el mouse sobre unas pequeñas flechas para hacer scroll de arriba a abajo en la notera. El texto se iba desplegando poco a poco, junto con las imágenes de apoyo, que podían ser dibujos de Edgardo u otras imágenes decorativas, alusivas o derechamente anodinas. Los GIF animados y los videos eran anunciados en el texto y debían verse yendo a un índice de videos e imágenes GIF que aparece en el lado derecho de la pantalla.
2. Carátula, packaging y tríptico
Todo el programa está atravesado por un elemento lúdico e informal. Las imágenes y los videos, por ejemplo, además de ilustrar contenidos o conceptos algo difíciles, buscaban hacer reír. Lo mismo intentamos hacer con el diseño de la carátula, packaging y tríptico. La carátula del CD-ROM (ver PDF abajo; véanlo en pantalla completa para apreciar los detalles) tiene a Loreto y Pablo como lagartijas tomando sol. Además está el logo y los demás elementos distintivos del CD-ROM. Un efecto muy simpático se lograba con Loreto y Pablo si uno miraba girar el CD.
El packaging es el pequeño estuche de cartón en el que venía CD propiamente tal y el tríptico. Si doblasen el PDF que se ve más abajo en el eje horizontal (de manera que todo queda orientado correctamente en el eje vertical), y luego doblaran las dos líneas punteadas verticales de tal manera que la sección de abajo quede por fuera, tendrían un estuche como el que contenía los materiales. Miren el material en pantalla completa para apreciar mejor los detalles de diseño.
Como verán, contiene la portada y un índice de contenidos general en la parte visible por el exterior. Por dentro, tiene los créditos generales del proyecto y del CD-ROM además de algunas advertencias de derechos de autor y macanas del tipo. El último panel sigue introduciendo a Pablo y Loreto, quienes son personajes del tipo "como tú" que aparecen en la mayoría de los videos del CD-ROM.
El tríptico, finalmente, presenta una pequeña sinopsis de cada tema. Si miran el PDF que se presenta más abajo en pantalla completa o si hacen suficiente zoom podrán ver los textos. Estos intentan ser lúdicos, pero sobre todo buscan orientar a los usuarios respecto de qué es lo que pueden esperar encontrar en cada tema.
3. Tipografías
Tengo entendido que ninguna tipografía se creó de cuajo (desde "0") para este CD-ROM, pero sí fue necesario adaptar algunas existentes (corríjanme si me equivoco, Luciano y Coto). Me parece mucho que la tipografía elegida para los textos de los contenidos fue Verdana, como la que se usa en este sitio web. Para los títulos de los contenidos y subcontenidos se usó la tipografía HouseTrained, y para los textos que no fueran títulos ni contenido, como los utilizados en el packaging o en la carátula, se utilizó MyriadPro.
Como los textos que el programa lee están en formato TXT, no era posible utilizar símbolos fonéticos del IPA en los TXT sin que los resultados fueran desastrosos luego de la lectura de esos archivos por parte de Flash (algunos símbolos requerían diacríticos, para más remate). Para solucionar este problema los tipógrafos remapearon algunos símbolos que no íbamos a usar para nada por otros que sí nos interesaban, como se aprecia en la imagen a la derecha. Si queríamos que apareciera "ʃ" en el contenido, por ejemplo, debíamos escribir "$" en el TXT. Recuerdo la frustración de Coto y Luciano cuando les decíamos, por ejemplo, "Ah, lo que pasa es que ahora necesitamos usar el símbolo "$" en el texto mismo" y había que remapear todo.
La fuente HouseTrained (ver a la izquierda) requirió menos intervención, dado que no hicimos transcripción fonética con ella ni necesitábamos muchos símbolos raros. Sí fue necesario sumar caracteres para todas las tildes del castellano, "ñ", "ü" y otros símbolos como la apertura de interrogaciones y exclamaciones. Esta fuente pretendía aportar el elemento lúdico al contrastar con la más parsimoniosa Verdana. En teoría, parece una tipografía hecha en un cuaderno con lápiz pasta o algo así.
4. Dibujos e imágenes
Como ya mencioné más arriba, todos los dibujos fueron diseñados y preparados para ser usados en el CD-ROM por Edgardo Cifuentes. Siempre que nos pareció posible, se incluyó alguna ilustración o chiste a través de alguna imagen. Aunque en algunos casos la imagen que se solicitó estaba bien planificada, en muchísimos casos se dejó a la merced de Edgardo el resultado final, cuestión que siempre nos ha dado buenísimos resultados.
Luego de dibujar la imagen, se la escaneaba con cuidado y luego se adaptaba a alguno de los 3 tipos de proporciones que teníamos disponibles para imágenes en el texto del CD-ROM. Además, había que titular o subtitular cada imagen para que fuera más sencilla su lectura. Algunas de las imagenes, como los GIF animados (ver ejemplo a la izquierda), requerían mucho más trabajo, pues había que montar la animación también.
Además de los dibujos y animaciones de Edgardo, se utilizaron imágenes tomadas de la web para ilustrar otras ideas o para lograr ciertos efectos humorísticos. Las imágenes fueron tomadas de buscadores en línea y montadas en unas plantillas que simulaban hojas de cuaderno. Todas las imágenes que no son de autoría de Edgardo debíeron ser citadas en el software para no meterse en problemas con la ley.
Si quieres tener acceso a todas las imágenes de Habla blah! sigue el siguiente enlace. Las imágenes se ven como una lista de enlaces que puedes ir abriendo uno a uno. Lo mismo puede hacerse con todos los GIF animados y videos del software, a los cuales se puede acceder siguiente el siguiente enlace. ¡Nótese la enorme cantidad de imágenes y videos que contiene el programa!
5. Fotos y videos
Todas las fotos y videos fueron preparadas por Nidia Jara y Juan Bravo. Los actores/modelos que aparecen en las fotos son Loreto Cortés y Pablo Balboa. El uso de fotos y videos tenía doble propósito. Por una parte, ilustraban conceptos o ejemplificaban actividades, siempre de manera lúdica o derechamente graciosa. Por otra, tenían como intención acercar a los estudiantes de Enseñanza Media al contenido y al CD-ROM en general, al mostrarles a jóvenes "como ellos" en una actitud interesada, pero informal.
Loreto y Pablo son una suerte de personajes que acompañan al lector del material en su viaje por los contenidos. A veces, estos personajes (que a todo esto no tienen nombre en Habla blah!) no entienden los contenidos, cuestión que resulta en graciosos errores, y a veces sí los entienden bien. En otras muchas ocaciones, muestran lo que el usuario debería hacer o decir.
El presupuesto que teníamos para preparar estos videos era bastante pequeño, asunto que se ve reflejado en la concomitante calidad de los materiales resultantes. En algunos videos el sonido no se escucha muy bien; en otros, la iluminación podría haber sido mejor. De todas maneras quedamos muy contentos con el resultado. En la lista de más abajo están algunos de mis videos favoritos, en orden alfabético:
Algunas de las fotos tomadas por Nidia y Juan están en el slideshow más abajo. No todas fueron finalmente utilizadas en el proceso de diseño más adelante, y algunas de las que sí fueron utilizadas no están aquí. Nótese la buena volutad de Pablo y Loreto para someterse a todos los ultrajes, vejámenes y exigencias del director del proyecto.