Introducción: ¿Una imagen vale más que mil palabras?
Las relaciones entre el lenguaje verbal y el lenguaje visual han caracterizado el estudio teórico de las imágenes durante el siglo XX. Las imágenes son las unidades de representación del lenguaje visual como las palabras lo son del lenguaje escrito. En la cultura digital, el consumo visual del ciudadano se ha disparado a niveles antes inimaginables.
La publicidad y el diseño, la creación artística, la comunicación política y social, han encontrado en el lenguaje visual una herramienta muy potente para comunicar conocimientos y emociones de forma directa, o para apoyar visualmente una idea concreta.
Así, en un mundo donde los medios de comunicación tienen altas cotas de poder, el control de la imagen y su manipulación técnica se ha convertido en elemento central en la difusión de conocimiento a todos los niveles. Las imágenes no son neutras, y más allá de mostrar las intenciones artísticas y estéticas de los creativos, asumen funciones políticas, comerciales o sociales.
El análisis del uso del lenguaje visual en el contexto actual nos lleva a darnos cuenta ─rápidamente─ de la fusión que tiene lugar entre el dibujo, la fotografía, el vídeo, el texto y el símbolo, etc. en la producción multimedia, donde es de vital importancia la mezcla ordenada de lenguajes y recursos, con la intención de comunicar e interactuar con el usuario.
Para más información sobre la teoría de la imagen y el lenguaje visual en general, se puede consultar el curso que hay disponible en el UOCopencourseware, donde se habla en detalle de las teorías interpretativas de la imagen, de la evolución histórica del grafismo y de la identidad gráfica de una manera muy completa. En este curso se puede trabajar desde la historia de la topografía, hasta las bases para informar gráficamente (infografías).
Multimedia o la suma de lenguajes para la creación de experiencias visuales interactivas
Llamamos multimedia a la combinación de varios medios de comunicación con vocación interactiva en un único espacio visual; sea este una pantalla o cualquier dispositivo digital. El aumento de la capacidad de los procesadores informáticos y el abaratamiento de su coste han propulsado una revolución en la implantación de los medios digitales que, en sí mismos, requieren del lenguaje multimedia para ser explotados de una forma completa y garantizar una experiencia de usuario práctica, rica y efectiva.
La creación multimedia ─por lo tanto─ requerirá del estudio y el tratamiento de los diferentes lenguajes de comunicación: visual, textual, sonoro, etc. para conseguir el producto final deseado. Así, el diseño de un entorno multimedia implicará, necesariamente, una fase de conceptualización y diseño, una fase de programación del funcionamiento y la estructura del entorno, y una tercera fase de maquetación de la apariencia final.
Diseño multimedia
El diseño de productos multimedia se orienta básicamente en el entorno de la web y de la creación de aplicaciones interactivas (software). El diseño multimedia es una herramienta muy efectiva para transmitir un mensaje basado principalmente en el diseño gráfico, que es la disciplina que se encarga de ordenar la información de forma estética y legible para el usuario, y mostrarla de una forma atractiva. Mediante el diseño combinamos textos, imágenes, colores, animaciones, vídeos, espacios, audio e interacción en una aplicación informática.
Si bien es cierto que hay unos principios básicos del diseño que son perfectamente válidos en el entorno digital: proporción, ritmo, unidad, énfasis, variedad, etc., no es menos cierto que los multimedia –la suma de diferentes lenguajes en un mismo entorno y de forma orgánica– requieren un enfoque particular a la hora de afrontar un proyecto.
En los recursos siguientes se pueden leer diferentes artículos donde se habla de los principios del diseño gráfico y se explican visualmente los principales conceptos:
- Principios básicos del diseño gráfico
- Fundamentos del diseño gráfico
- Principios básicos del diseño gráfico editorial
- Lógica visual
Por lo tanto, será necesario tener en cuenta las particularidades del entorno digital y entender qué –a diferencia de los medios convencionales– en la multimedia la tecnología es a la vez una fuente inagotable de recursos y opciones, y un límite para lo que no es tecnológicamente posible.
Las decisiones sobre el diseño de un entorno multimedia estarán condicionadas, en todo momento, por las posibilidades técnicas de las plataformas donde desarrollamos la aplicación, y los lenguajes de programación necesarios para hacerla funcionar.
Usabilidad
Las primeras etapas del diseño multimedia se realizaron en un entorno inestable en el que no había estándares de referencia. La falta de experiencia del sector provocó auténticos despropósitos en forma de webs ininteligibles o imposibles de entender para el usuario normal. La aparición de tecnologías visuales muy potentes, y el poco tiempo dedicado a reflexionar sobre su introducción en el entorno web, provocaron que Flash ─por ejemplo─ se convirtiera en un obstáculo para el acceso a la información en forma de presentaciones interminables o entornos de navegación muy difíciles de usar.
Poco a poco, sin embargo, los diseñadores se dieron cuenta de la necesidad de introducir el análisis de la experiencia del usuario para diseñar entornos mucho más intuitivos y fáciles de usar. En este contexto nace la usabilidad, que es la rama del diseño que se ocupa de analizar y diseñar la experiencia del usuario en el uso de un entorno multimedia interactivo.
Hoy en día hay un amplio abanico de empresas, profesionales e investigadores trabajando en el entorno de la mejora de la experiencia de usuario (UX), lo que hace que haya sido una de las ramas más activas y dinámicas del sector.
Existe un lenguaje de la usabilidad: unas reglas y unos códigos que garantizan que la experiencia del usuario se realiza en un marco cómodo, funcional e interactivo. La experiencia es algo subjetivo, que no se puede definir desde el diseño; aun así, si garantizamos un diseño sólido, directo y sencillo, potenciaremos la experiencia positiva del usuario.
En los recursos siguientes se pueden consultar los principios básicos a tener en cuenta para el diseño de una buena experiencia de usuario:
- http://52weeksofux.com/post/475093254/10-principles-of-ux
- http://www.usability.gov/basics/index.html
- http://uxmag.com/articles/guiding-principles-for-ux-designers
- Estándares UX: http://www.usabilitynet.org/tools/r_international.htm#9241-11
Lenguajes de maquetación: Hojas de estilo en cascada (CSS)
Una vez planteado el diseño visual de un proyecto multimedia, y tenidos en cuenta los principios básicos del diseño gráfico y de la usabilidad, procederemos a codificar este diseño mediante códigos informáticos.
Para la estructura básica de una web, por ejemplo, usamos HTML-XHTML para marcar las diferentes partes de la página: el encabezamiento, los títulos, el cuerpo del texto, el pie, etc. y definir su estructura. Una vez tenemos el documento base (HTML), hay que comunicar al navegador o al dispositivo que reproduzca el resultado final del proyecto, cómo lo queremos mostrar, cuál es su formato y su apariencia.
Para hacerlo, tenemos que formatear las diferentes secciones del documento, asignándoles un formato determinado: un color, una medida, una posición determinada o relativa, los efectos visuales que queramos aplicar, etc.
CSS (cascade style sheets) es un lenguaje de hojas de estilo utilizado para describir la semántica de presentación: aspecto y formato, de una página web o de cualquier clase de documento XML (webs, ebooks, SVG,…). CSS está diseñado, principalmente, para permitir la separación del contenido del documento de su presentación.
CSS nos permite determinar este formato con una serie de ventajas frente a otros sistemas y lenguajes:
- Control centralizado de la presentación de un sitio web completo. Lo que permite modificar una sola hoja de estilo y aplicar los cambios a diferentes webs vinculadas.
- Reaprovechamiento de las hojas de estilos, una hoja CSS puede ser aplicada a diferentes proyectos.
- Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre. Por ejemplo, para ser imprimida, mostrada en un dispositivo móvil, o ser «leída» por un sintetizador de voz. Con lo que se garantiza la adaptación del documento a los diferentes dispositivos (responsive design).
- Los documentos HTML resultantes son mucho más claros y ligeros, puesto que extraemos toda la información sobre la apariencia visual de la página que quedará registrada en las hojas de estilo en cascada (CSS).
CSS se ha transformado en el lenguaje con el que se define la apariencia y el formato final de la mayoría de proyectos multimedia, tanto si están orientados al entorno web, y se basan en HTML/XHTML (o en cualquiera de los lenguajes de programación web), como si funcionan con alguna de las otras variantes de XML. CSS es el lenguaje correcto para definir cómo queremos mostrar la información al usuario.
Si tenemos en cuenta que XML es el estándar creado por el Wide Web Consortium (W3C) para el intercambio de información estructurada entre diferentes plataformas, que puede ser usado tanto en bases de datos como en editores de textos, hojas de cálculo y en la mayoría de proyectos digitales o multimedia, rápidamente nos daremos cuenta de la importancia de dominar CSS para el diseño de cualquier aplicación o entorno multimedia.
En Internet podemos encontrar muchos recursos para aprender a usar CSS, algunos de los más interesantes son:
Tutoriales y cursos
- Curso de CSS en Code Academy: http://www.codecademy.com/es/courses/web-beginner-en-trcuf?curriculum_id=50afc73a4e9f856d7e007373
- Curso en Code School: http://www.codeschool.com/paths/html-css
- Curso de CSS en Mozilla Developer: https://developer.mozilla.org/en-us/docs/css/getting_Started
- Web completa dedicada al aprendizaje de CSS: http://www.csstutorial.net/
Recursos y templates: