Tzek Blog de Diseño

Hace un par de post ya, escribí algunos pensamientos sobre el diseño de interacción; sobre cuál era mi percepción sobre la disciplina en aquel entonces. Creo que este hecho no ha cambiado mucho en el sentido que no se reconoce el valor del diseño como disciplina (su madurez, aportación en el conocimiento colectivo y la posibilidad de conseguir una buena capitalización del mismo); aún más, no se reconoce como el diseño per se puede tomarse como un eje disciplinar natural en algunas formaciones académicas (me refiero a títulos en ingeniería y ciencias, no sólo a títulos en las "disciplinas proyectuales").

Lo anterior podemos tomarlo como una metáfora de un cono, recorriéndolo de dentro hacia afuera, donde las lineas que van del interior a una de las orillas –donde están "paradas" las disciplinas y su conocimiento construido– muestran el "camino del diseño" (algo así como un design-driven approach). Aunque también podemos tomar una visión contraria: en forma de embudo. Esto es, caminar de fuera hacia dentro, donde lo que queda hasta abajo –y saldría por el embudo– es el diseño derivado de una formación académica especializada.

Con respecto a este último enfoque, considero que esta visión de embudo aplica muy bien para la formación a nivel licenciatura de un Diseñador de Interacción. Don Norman en su artículo ¿Por qué la educación en diseño de cambiar? comenta que:

"Las nuevas áreas (refiriéndose a la formación en diseño) son más como ciencias sociales y del comportamiento aplicadas, y que requieren un entendimiento de la cognición y emoción humana, sistemas sensoriales y de motricidad, y el suficiente conocimiento del método científico, estadística y diseño experimental en la medida que los diseñadores puedan validar, legitimar las pruebas de sus ideas antes de liberarlas…"

Justo este artículo me recordó un correo electrónico que había compartido con un par de colegas en junio de 2010 sobre ¿qué materias podrían ser útiles en un plan de estudios de licenciatura para Diseño de Interacción? – bajo esta visión de embudo– y que quisiera compartir ahora con ustedes (al final del post).De antemano, ofrezco una disculpa por algún error de redacción u ortografía; no quise cambiar nada del correo para no tergiversarlo. Dado el artículo de Norman, considero que faltó de la lista materias como las siguientes: Metodología de la Investigación, Probabilidad, Inferencia Estadística, Diseño de Experimentos, Modelos Probabilísticos, Psicología Cognitiva, Psicología y Emociones, entre otras.

De cualquier forma, el asunto fuerte en este caso es la formación del diseñador de interacción. Es decir, podríamos preguntarnos: ¿cómo en las escuelas se está pensando formar adecuadamente a un diseñador de interacción?, ¿cómo formar a un estudiante con las herramientas para solucionar problemas de interacción en diferentes contextos de uso y con una ejecución adecuada, limpia, profesional?, ¿cómo lograr la integración de este tipo de diseñadores en equipos de trabajo multidisciplinarios? y por último, ¿cómo esa formación derivará en los futuros profesionales y teóricos que concreticen los pilares del conocimiento en Diseño de Interacción?

----- Materias descritas en el correo original – O.S.T. Junio 2010 -------

Fundamentos ==========================================

* Algoritmia

Teoría: programación estructurada, condicionales, ciclos, recursividad, etc.

Práctica: Diseñar y programar ejercicios relacionados.

Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación estructurada.

________________________________________________

* Dibujo

Teoría: Línea, forma, proporción, etc.

Práctica: Representaciones del mundo real.

Objetivo: Adquirir un estándar de calidad en representación visual.

________________________________________________

* Introducción al Diseño de Interacción

Teoría: Qué es Diseño de Interacción, Interfaz, Tarea, Usuario, Contexto de Uso, Relación con otras disciplinas, objetivos de un producto de diseño.

Práctica: Elaboración de maquetas físicas, carteles académicos, intervención en espacio (todo análogo, nada electrónico).

Objetivo: Conceptualizar soluciones para resolver problemas del entorno.

________________________________________________

* Taller de Diseño Industrial

Teoría: Volumen, materiales, forma, ergonomía, sustentabilidad, etc.

Práctica: Diseñar y realizar prototipos físicos de herramientas y aparatos como controles de videojuegos, palancas de carro, páneles de control. Evaluación de las propuestas con usuarios.

Objetivo: Entender sobre usuarios y sus necesidades de uso.

________________________________________________

* Creatividad

Teoría: Introducción al proceso creativo.

Práctica: Maquetar ideas creativas de problemas de diseño espurios.

Objetivo: Que el alumno tenga inteligencia emocional, un pensamiento creativo y romper paradigmas.

________________________________________________

* Investigación Cuantitativa

Teoría: Metodología de la investigación, estadística.

Práctica: Armar un proyecto de investigación sencillo con recopilación y análisis de datos cuatitativos.

Objetivo: Aprender y aplicar metodología de investigación en la elaboración de proyectos de diseño.

________________________________________________

* Investigación Cualitativa.

Teoría: Métodos y procesos de investigación en las ciencias sociales.

Práctica: Trabajo de campo, elaboración de etnografías, observación, entrevistas, etc.

Objetivo: Aprender a cómo levantar requerimientos y necesidades de los usuarios a partir de una investigación cualitativa.

________________________________________________

* Diseño visual

Teoría: Forma, color, composición.

Práctica: Elaboración de mensajes visuales.

Objetivo: Adquirir un pensamiento visual y saber comunicarlo.

________________________________________________

* Tipografía y Texto

Teoría: Fuentes, famila tipográfica, kerning, tracking, composición de textos.

Objetivo: Saber componer un texto adecuadamente para medios impresos.

________________________________________________

* Diseño para pantalla.

Teoría: Tipografía para pantalla, color para pantalla, composición en pantalla.

Objetivo: Realizar composiciones de texto e imágenes del estilo de interfaces gráficas de usuario y para lectura en pantalla.

Formación ==========================================

* Programación Orientada a Objetos

Teoría: clase, objeto, métodos, funciones, etc.

Práctica: Diseñar y programar ejercicios relacionados

Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación OO.

________________________________________________

* Diseño de Información

Teoría: Comunicación, mensaje, introducción a la visualización, introducción a la usabildiad, esquemática, legilidad de mensajes visuales, etc.

Práctica: Diseñar mensajes que muestren la relación enter las variables de un fenómeno, códigos sonoros, diseño instruccional.

Objetivo: Saber cómo diseñar visual, física y auditivamente con fines utilitarios.

________________________________________________

* Arquitectura de Información

Teoría: Qué es arquitectura, ejemplos de arquitectura en diseño impreso, arquitectura para medios digitales, sistemas de navegación, sistemas de búsqueda, sistemas de etiquetado, análisis de contenido, tesauros, introducción al modelo entidad-relación y XML para bases de datos, etc.

Práctica: Elaboración de Personas, Card-Sorting, Free listing, Mapas y modelos mentales, Elaboración de Wireframes, Elaboración de escenarios.

Objetivo: Estructurar el pensamiento de una aplicación más allá de pensar visualmente.

________________________________________________

* Diseño de Interacción Humano Computadora

Teoría: Qué es HCI, sketching e ideación (Bill Buxton), paradigmas de interacción, estilos de interacción e interfaces (gráficas, tangible, móvil, robótica, táctil, agentes inteligentes, etc), ergonomía de interfaces.

Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.

Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.

________________________________________________

* Diseño de Interacción Humano Computadora II

Teoría: Continuar con los temas de estilos de interacción en intefaces (visualización de datos, interfaces hápticas, etc).

Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.

Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.

________________________________________________

* Evaluación de Interfaces

Teoría: Pruebas de usabilidad, Ingeniería Semiótica, Grupos Focales.

Práctica: Aplicar una prueba de usabilidad, protocolos y métodos para aplicarse en pruebas de usabilidad, pruebas de comunicabilidad (de la Ingeniería Semiótica), realizar un focus group.

Objetivo: Saber llevar a cabo una evaluación, cómo podría ser documentada, cómo recopilar datos y analizarlos, hacer reporte para propuestas de mejoras.

Web ==========================================

* Diseño web

Teoría: Aprender conceptos de Internet, entender qué es web semántica, qué es separar contenido de presentación, usabilidad para web, prototipeo en papel de sitios web, arquitectura de inforamción para web, etc.

Práctica: XHTML y CSS.

Objetivo: Crear un sitio web estático con buena retícula y arquitectura de información.

________________________________________________

* Aplicaciones Web I

Teoría: Interacción en web, diseño de formas/formularios.

Práctica: JavaScript, AJAX y librerías para web interactiva (JQuery, Mootools, etc).

Objetivo: Crear sitios interactivos y con validaciones en formularios, menúes, etc.

________________________________________________

* Aplicaciones Web II

Teoría: Conceptos de Base de Datos, Scripting en servidores, servicos web, etc.

Práctica: PHP, MySQL, desarrollo en .net.

Objetivo: Crear un sitio web dinámico.

________________________________________________

* Aplicaciones Móviles

Teoría: Diseño de interacción para móviles.

Práctica: XHTML, CSS, JavaScript, AJAX, JQuery, PHP, MySQL, e introdución a plataformas de desarrollo para móviles como Java ME y Objective-C.

Objetivo: Realizar una aplicación web para móviles de forma que se den cuenta que no es lo mismo para pantalla.

Videojuegos ==========================================

* Diseño Videojuegos para la Red

Teoría: Diseño de videojuegos, aplicación de los videojuegos en entretenimiento, capacitación, investigación y ciencia, industria.

Práctica: Aplicar animación, diseño de interacción humano computadora y programación orientada a objetos en el proyecto.

Objetivo: Elaborar un juego de video basado en un browser.

________________________________________________

* Diseño de Videojuegos para Consola

Teoría: Lenguaje de programación para una consola.

Práctica: Conocer y aprender lo básico de un lenguaje nativo de una consola.

Objetivo: Lograr ejecutar (quizá mendiante un emulador) lo que se vería en un juego de consola de cierta marca.

________________________________________________

* Diseño de Videojuegos para Móviles

Teoría: Repaso de un lenguaje de programación nativo para un móvil (Java ME u Objective-C).

Práctica: Programar y diseñar para una plataforma móvil.

Objetivo:Poner en práctica lo aprendido de programación y elaborar un prototipo de juego para móvil no basado en browser.

Interacción física ==========================================

* Elaboración de prototipos electrónicos

Teoría: Introducción al cómputo físico.

Práctica: Elaborar prototipos físicos (con Arduino o alguna plataforma similar).

Objetivo: Fomentar el pensamiento creativo a través de la elaboración de prototipos físicos interactivos.

________________________________________________

* Interacción física

Teoría: Complentar conceptos de cómputo físico e interacción tangible.

Práctica:  Elaborar prototipos físicos y aplicar diseño industrial.

Objetivo: Elaborar un prototipo de cómputo que resuelva un problema del mundo real.

Hace un par de semanas, elBarbón! y sus colaboradores de NFG! lanzaron una convocatoria para proponer el header de este blog. Originalmente se invitaron a ilustradores conocidos para este proyecto y luego lanzaron una convocatoria abierta. Me animé porque, entre los blogs de referencia, el blog de elBarbón! es de mis favoritos por contenido (mostrando realmente NiceFuckingGraphics!) y por los diferentes layout que ha manejado en él. Mi propuesta desafortunadamente no quedó, aunque me divertí mucho en el proceso.

La lista de ganadores fue publicada ya en el blog. De hecho se puede acceder a la lista completa de propuestas (aunque tarda en descargarse, al menos en la red que uso).

La ilustración base es un dragón marino, al estilo de otros "alebrijes" que he dibujado por gusto. Aunque la primera vez que hice un "alebrije" marino era una ballena, en esta ocasión decidí jugar con la mano para darle un "rostro" de can o algo similar. Terminados los trazos, vino la "escaneada" (en un scanner aéreo debido al tamaño del folio).

Con las figuras listas, vino la parte de acomodo. La idea era dejarlo así "tosco" porque me interesaba que fuera un dibujo/boceto.

Por último, la iluminación del fondo con un estilo de "acuacolor" (un marcador de agua). He aquí el resultado.

Aunque ahora trato de hacerlo con más frecuencia, no suelo bocetar para llevar a cabo experimentos visuales o divagar visualmente. Sin embargo, creo que es interesante y refrescante idear cosas no relacionadas con una línea de trabajo y sin ningún compromiso; de ahí que tomara este concurso para romper un poco con la rutina.

Una fecha muy particular y característica de la identidad yucateca es el día de muertos en el que se ofrece "la comida para las ánimas" o Hanal Pixán. Aunque este año no tuve la oportunidad de realizar una ilustración para celebrarlo, una amiga, quién por cierto vive fuera de México, me mandó esta liga a un video de youTube que me dejó con antojo.

Si alguien gusta conocer qué y cómo se prepara un tradicional Pib yucateco, les invito a ver este video:
http://www.youtube.com/watch?v=IvbUEIYEilc.

Me entero por el buen Juan Carlos de H. Creativos, que Ideograma, uno de los despachos de diseño más reconocidos de México fue encargado de dar origen a la nueva identidad visual para mi ciudad natal Mérida (¿escribí hermosa y cálida ciudad de Mérida o sólo lo pensé?). Así que no pude evitar replicar la nota y publicar las imágenes que colocó este despacho en su perfil en facebook.

* Todas las imágenes son obviamente derechos reservados de Ideograma (2009).

Según comentan en el perfil de facebook de Ideograma:

"El símbolo de Mérida se inspira en las estelas mayas. Mediante 4 elementos da forma a una estrella blanca que representa a Venus, o «estrella Xux», el cuerpo celeste más brillante del cielo, y el más importante para los mayas."

Además, el tagline "se merece" tiene asociada la siguiente aplicación:

"Mérida es una ciudad que se merece. Se merece reconocimiento, inversiones; se merece visitarla, a su gente... se merece su identidad. Su posicionamiento parte de la etimología de su nombre, Emerita Augusta, ya que es digna de los significados en torno a «mérito» y «merecer»."

Ponte Xux (se lee "ponte shush"): Ponte avispa, ponte buzo; estar alerta.

Muestras elaboradas por el despacho de cómo funcionaría la identidad en ciertos contextos.

Asumo que contratar a Ideograma, implica que hay un buen presupuesto para la implementación de esta identidad. Espero con mucho gusto verla por doquier en mi próxima visita a la "Ciudad Blanca", nombrada "Capital Americana de la Cultura" en el 2000 y poseedora de la que se considera la catedral más antigua de México.

Del post que hice sobre "Ironman, HCI y algo de Infodiseño", Saul me dejó el siguiente comentario:

En verdad se manejan varios conseptos de GUI y HCI, pero esto ya rompio la barrera del cliché cinematográfico, verás la persona que asesoro a Ironman y Minority Report en el ambito “futurista” es un reconocido investigador del MIT que ya ha desarrollado un interfaz espacial llamada g-speak. Su nombre John Underkoffler y para muestras de lo que ha logrado aqui les dejo su pagina de videos oficiales: http://www.vimeo.com/user922585.

Gracias por compartirme esta información. Inmediatamente me fui a revisar la liga de Vimeo y qué agradable sorpresa resultó el g-speak. Abajo dejo el video de este sistema ambiental para quienes gustan de las interfaces por gestos.

g-speak overview 1828121108 from john underkoffler on Vimeo.

En corto y para acceso rápido: John Underkoffler, fundador de Oblong Industries, es doctor egresado en 1999 del Tangible Media Group del Media Lab del MIT, grupo dirigido por Hiroshi Ishii.

Gracias a Hugo de Bluku.tv me entero de The Astonishing Tribe, o TAT, quienes se definen como un grupo sueco que ha agregado el efecto wow a las interfaces de usuario en más de 270 millones de dispositivos móviles alrededor del mundo. Dejo aquí un par de video de sus últimos prototipos, aunque en general su showroom es de por sí interesante.

También están en facebook por si alguien los quiere agregar.

Me encantó su tagline:

Design loves technology.

Ha pasado un año más y por fin ha llegado la fecha de la 3a edición de "Los leones no son como los pintan", un concurso de diseño orgullosamente gestionado desde México por el buen Pablo Deza de Pigmento Studio. Este año se trata de hacer un clip de video en pro de la educación en México. No dudo que habrá mucha participación e interesantes propuestas; ¡ya quiero ver la ganadora!

Mucha suerte a todos los participantes.

Mayor información en losleonesnosoncomolospintan.com.

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.

El diseño de interacción aún no es algo concreto en latinoamérica como área de estudio. Sin embargo, existen opciones para aquellos que quieran especializarse en la disciplina mediante un posgrado. Esta es una pequeña lista con algunos programas relacionados.

Gracias a mi colega Mario Moreno por recordarme. ¡Es verdad! Tonto de mi. La Universidad Tecnológica de la Mixteca ofrece la Maestría en Medios Interactivos. Si alguien gusta estudiar en México, aquí hay una opción.

Actualización 2:

Gracias a Eusebio, quien me dejó este "Mapa de Educación en Diseño de Interacción en Europa" en Google dentro de los comentarios. Está elaborado por Alexandra Deschamps de Tinker.it. Lo pongo por si alguien se brinca los comentarios.

Jorge nos recordó que la Universidad Autónoma de Tamaulipas se ofrece la Maestría en Diseño Digital.

Australia

• The University of Sidney - Master in Interaction and Electronic Arts.
• University of Queensland - Graduate Diploma in Interaction Design.

Brasil

• Instituto Faber Ludens de Design de Interação - Especialização em Design de Interação.

Canadá

• Simon Fraser University  - M.A. o M.Sc. in Interaction Design.

Escocia

• University of Dundee - M.Sc. in Ethnography Design.
• University of Dundee - M.Sc. in Computing with Interactive Systems.
• Bath Spa University - M.A. in Interaction Design.

Estados Unidos de América

• Arizona State University -M.Sc. Interaction Design.
• Ohio State University - M.A. in Digital Animation and Interactive Media.
  
• Kansas University - M.A. in Interaction Design.
• Carnegie Mellon - M.Des. in Interaction Design.
• Carnegie Mellon - M.A. in Tangible Interaction Design.
• Indiana University - M.Sc. in Human Computer Interaction Design.
• University of Washington - MFA in Visual Communication Design / MFA in Industrial Design (concentración en Interaction Design).
• University of Baltimore - M.Sc. Interaction Design and Information Architecture.
• School of Visual Arts - M.A. in Interaction Design.
• M.I.T. - M.Sc. in Media Arts and Sciences.
• Illinois Institute of Technology - Master of Design.

Suecia

• Chalmers University of Technology - Master Programme in Interaction Design.
• Malmö University - Master in Interaction Design.
• University of Gothenburg - C:Art:Media Programme (para titularse como Master in Fine Arts o Master in Applied IT).

Países Bajos

• Eindhoven University of Technology - Master in Human-Technology Interaction.

Reino Unido

• Royal College of Art - M.A. o M.Phil. (dentro del programa de "Design Interactions").
• Kingston University London - Pg.D. o M.Sc. in User Interaction Design.
• Nottingham Trent University - M.A in Interaction Design.
• University of Edinburgh - M.Sc. in Design and Digital Media.
• Middlesex University - M.A. in Design for Interactive Media.

Actualización: Diego de Digilicious publicó un post similar con una lista de institutos dónde estudiar un posgrado en diseño.

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!