Diseño

PID_00167614
Ninguna parte de esta publicación, incluido el diseño general y la cubierta, puede ser copiada, reproducida, almacenada o transmitida de ninguna forma, ni por ningún medio, sea éste eléctrico, químico, mecánico, óptico, grabación, fotocopia, o cualquier otro, sin la previa autorización escrita de los titulares del copyright.

Índice

1.Dirección de arte. Briefing

1.1.¿Qué es la dirección de arte?

En el equipo de producción de una aplicación interactiva existen múltiples perfiles: diseñadores, programadores, guionistas...
El director de arte es el encargado de generar las líneas conceptuales que guiarán el proceso de producción, y que coordinarán los esfuerzos y objetivos de todo el equipo.
76519_m4_001.gif
En el entorno de diseño para impresión y publicidad, el director de arte es quien genera los conceptos o ideas que comunicarán un mensaje al público, mediante metáforas, símbolos u otros recursos expresivos. Su función consiste en determinar cuál es el concepto central que debe transmitir un producto, y cómo puede transmitirse mejor a un público determinado.
76519_m4_002.gif
Imaginemos, por ejemplo, que debe elaborarse la campaña publicitaria (que incluye el sitio web) de un coche. Se trata de un vehículo pequeño, orientado al uso por ciudad y de bajo precio. Si el objetivo es un público joven, el director de arte se preguntará qué conceptos pueden asociarse a este producto (diversión, movilidad, libertad, etc.) y tratará de encontrar la expresión más efectiva (estableciendo, por ejemplo, un paralelismo con las emociones que pueden sentirse al tirarse en paracaídas). Todos los productos que formen parte de la campaña (incluyendo, por tanto, la web) deberán ser coherentes con el concepto o idea definida por el director de arte.
Algunos directores de arte se limitan a generar las ideas y presentarlas a los clientes, mientras que otros, además, controlan todo el proceso de diseño (definiendo las características gráficas) y producción del proyecto.

1.2.Generación del concepto

La tarea del director de arte como creador de conceptos no es sencilla, generalmente depende de la experiencia de muchos años y de un arduo trabajo de generación de ideas.
Aunque resulta imposible especificar una metodología exacta –ya que cada proyecto tiene sus propios requisitos– Stephen Hay (2004) aporta algunas ideas que pueden resultar útiles:

  • Objetivos. Los conceptos brillantes cumplen con algo: el objetivo que se ha acordado con el cliente. El director de arte siempre debe preguntarse si la idea que ha generado cumplirá con los objetivos determinados.

  • Técnicas de creatividad. Las buenas ideas generalmente surgen después de un intenso proceso de trabajo. Las técnicas de creatividad pueden resultar muy útiles para llegar al mejor resultado. Aunque existen muchas técnicas distintas, todas tienen en común estas pautas:

    • No existen ideas absurdas. En las fases iniciales del proyecto, cualquier idea es válida: no debe existir autocensura.

    • El proceso inicial debe basarse en esbozos y anotaciones rápidas. La concreción de detalles se realizará posteriormente.

    • Los eventos cotidianos y la experiencia pueden resultar útiles, así como el uso de símbolos y metáforas.

  • Espíritu crítico. Una vez que las ideas han sido generadas, es momento de seleccionar las dos o tres mejores, y empezar a darles forma. Siempre deben compararse con los objetivos, elegir finalmente la que mejor responde a ellos, etc. y continuar mejorándola.

  • Visión de conjunto. Los detalles no deben impedir ver el conjunto. Se empieza por trabajar en las características generales para después definirlas más a fondo, siempre sin perder de vista el objetivo general.

1.3.Dirección de arte

Una vez que el concepto general ha sido definido y acordado con el cliente, es el momento de pasar a la fase de producción. Es tarea del director de arte coordinar el esfuerzo de todo el equipo para mantener la coherencia de los resultados con el concepto central. Hay (2004) recuerda algunas cuestiones clave en esta fase:

  • El director de arte debe conocer cómo funciona y qué capacidades tiene la tecnología implicada en la producción.

  • Debe dejar los detalles en manos de los miembros del equipo, pero estar siempre al corriente de lo que hace cada uno de ellos.

  • El director de arte debe estar abierto a las propuestas y nuevas ideas de los miembros del equipo, aunque manteniendo siempre su coherencia respecto al concepto central. Una idea que no se adapte a los objetivos debe ser rechazada, aunque sea brillante.

76519_m4_004.gif

1.4.Dirección de arte y usabilidad

En ocasiones, los objetivos de la dirección de arte se han interpretado como contrapuestos a las pautas de usabilidad. Parece que la definición de una imagen coherente con un concepto o idea central pueda dejar en un segundo plano el interés por optimizar la usabilidad de una aplicación, o incluso excluirlo.
Nada más lejos de la realidad: el director de arte no sólo genera conceptos, sino que debe conocer las capacidades y requisitos de la tecnología en la que se aplican las ideas. Como señala Farrell (2006), la imagen de marca en entorno on-line está relacionada fundamentalmente con la experiencia que obtenga el usuario: una interacción deficiente arruinará la imagen de marca, aunque el concepto central y el diseño visual sean excelentes.
76519_m4_005.gif
En algunas ocasiones, la necesidad de garantizar la usabilidad del sistema se hace aún más evidente. Es el caso de las marcas que sólo se relacionan con el usuario vía Internet: por ejemplo, una librería, un negocio de alquiler de coches o un servicio de catering on-line.
La dirección de arte on-line, por lo tanto, debe conducir a los usuarios a sentir (experimentar) el concepto central, transmitiendo la información de la manera más eficiente posible, sea mediante un mensaje sencillo, o implicando los recursos multimedia más adecuados.

1.5.El briefing

El briefing es un documento que contiene la información que guiará un proyecto de diseño, exponiendo sus objetivos e identificando el público o usuario objetivo, así como su contexto. Su utilidad se refiere tanto al contexto interno de la empresa, como al externo.
A nivel externo, el briefing es una herramienta esencial para definir y acordar con el cliente los objetivos y las características del producto antes de iniciar su desarrollo.
A nivel interno, su importancia reside básicamente en dos factores:

  • El briefing debe ser distribuido a todo el equipo de producción, para que pueda:

    • compartir los mismos objetivos,

    • revisarlo periódicamente durante el desarrollo del proyecto, para mantener presentes los objetivos y comprobar si se cumplen adecuadamente.

  • El briefing debe contener respuestas a las cuestiones que puedan plantearse durante el desarrollo. Puede ser también el detonante de nuevas preguntas, que sirvan para optimizar la producción (cuando las preguntas o dudas aparecen en el estadio inicial, permiten orientar adecuadamente los procesos posteriores, y evitar errores).

76519_m4_006.gif
1.5.1.Escritura de un briefing
Un briefing no detalla exactamente qué debe realizar el diseñador, sino que es más bien una declaración de propósitos, una guía u orientación sobre los objetivos del diseño.
AIGA (2006a) propone algunas pautas para la redacción eficaz de un briefing:

  • Proporcionar una jerarquía clara de objetivos, con prioridades

  • Relacionar los objetivos con el posicionamiento total de la empresa

  • Indicar cómo se evaluará si el producto alcanza los objetivos

  • Definir, caracterizar y jerarquizar la audiencia

  • Definir presupuesto y calendario de producción

  • Indicar cómo se realizarán algunos procedimientos (por ejemplo, cuántos prototipos y de qué tipo se presentarán al cliente)

1.5.2.Contenidos del briefing de una aplicación interactiva
Aunque cada proyecto puede implicar necesidades específicas en la redacción del briefing, en términos generales el briefing para el diseño de una aplicación interactiva suele contener los siguientes apartados (AIGA, 2006b):

  • Descripción del producto. Contiene la descripción del interactivo, con los siguientes detalles: contenido de la aplicación (tema), soporte de la aplicación o canal de distribución, ventajas de la aplicación respecto a productos similares, y competidores.

  • Objetivo. Objetivo de la aplicación: comercial, promocional, lanzamiento de un nuevo producto, e-learning, etc.

  • Público objetivo. Se especifica si se trata de un público segmentado, y se detallan los siguientes datos para cada segmento de público objetivo:

    • Perfil geográfico. Lugar de residencia y de trabajo, y nivel de vida.

    • Perfil demográfico. Edad, género, familia, ingresos, ocupación, educación, etc.

    • Perfil psicosocial. Clase social, estilo de vida, aficiones, características personales.

    • Relación con el producto. Contexto de utilización, frecuencia de uso y porcentaje que representa el segmento descrito, frente al total del público objetivo.

  • Objetivo creativo. Detalla cómo se relaciona el interactivo con la imagen de marca del cliente o del producto relacionado.

  • Estrategia creativa. Concepto central del desarrollo, definido por el director de arte.

  • Presupuesto del proyecto y calendario de producción.

76519_m4_007.gif
Según la naturaleza del proyecto, se añadirán nuevos apartados. En todo caso, es importante hacer notar que estos contenidos corresponden al briefing específico de diseño de una aplicación interactiva. En el caso del briefing de otro tipo de tarea (campaña publicitaria, plan de marketing, etc.), los contenidos serían distintos.

2.Técnicas de creatividad

La creatividad es la habilidad para generar nuevas ideas, combinando, cambiando o reformulando ideas existentes (Harris, 1998).
El cerebro humano está dividido en dos hemisferios, cada uno de los cuales controla niveles distintos de procesamiento. Roger Sperry (citado en Konradsson, 1999), describió en 1981 qué hemisferio se dedica a cada tipo de proceso mental:
Hemisferio izquierdo
Hemisferio derecho
Lógico
Aleatorio
Secuencial
Intuitivo
Racional
Holístico
Análisis
Síntesis
Objetivo
Subjetivo
Parte
Conjunto
El hemisferio izquierdo, por lo tanto, se dedica a tareas relacionadas con el pensamiento, el análisis y la precisión, mientras que el derecho desarrolla la estética, sentimientos y creatividad. Cada persona presenta un hemisferio predominante, lo que se traduce a nivel motor de manera cruzada: los diestros trabajan predominantemente con el hemisferio izquierdo, mientras que los zurdos lo hacen con el hemisferio derecho.
76519_m4_009.gif
De la misma manera, existen dos tipos de pensamiento (Harris, 1998):
Pensamiento crítico
Pensamiento creativo
Hemisferio izquierdo
Hemisferio derecho
Analítico
Generativo
Convergente
Divergente
Vertical
Lateral
Probabilidad
Posibilidad
Juicio
Juicio suspendido
Concentrado
Difuso
Objetivo
Subjetivo
Respuesta
Una respuesta
Verbal
Visual
Lineal
Asociativo
Razonamiento
Riqueza, novedad
Sí, pero...
Sí, y...
Las técnicas de creatividad se orientan a incrementar el rendimiento del hemisferio derecho, limitando la capacidad de autocensura crítica del hemisferio izquierdo. En todas ellas, resulta fundamental ignorar las reglas y las convenciones conocidas, y prescindir de lo que tenemos asumido como correcto: cualquier idea, por absurda que parezca, puede conducir a resultados brillantes.
En los procesos creativos es también muy importante dejar las ideas en reposo de vez en cuando: resulta muy útil concentrar la atención en algo totalmente distinto, o sencillamente dormir. De esta manera, la mente se aleja del problema y, de manera inconsciente, puede ordenar y articular las ideas que han sido generadas de manera desordenada. Cuando el problema se retoma, aparecen nuevas ideas, más elaboradas que las anteriores, y es posible que se generen nuevos enfoques que conduzcan a resultados anteriormente inimaginables.
76519_m4_010.gif

2.1.Métodos creativos

Harris (1998) expone los cinco métodos clásicos (aunque existen más) para producir resultados creativos:
1) Evolución. Es el método de mejora incremental. Las nuevas ideas y soluciones nacen de otras ya existentes.
Las mejoras proceden de una transformación gradual, remitiéndonos a un principio crítico: cualquier problema que haya sido solucionado, puede volver a solucionarse mejor.
Un buen ejemplo es la evolución de la tecnología informática.
76519_m4_011.gif
2) Síntesis. En este método, dos o más ideas ya existentes se combinan en una nueva. Por ejemplo, al combinar las ventajas de un ordenador con las de un móvil, podemos obtener una PDA.
76519_m4_012.gif
3) Revolución. Este método consiste en la generación de una idea completamente nueva, diferente de las existentes. Supone una ruptura con una línea de pensamiento o con una rutina que puede reformularse. Un ejemplo podría ser el nacimiento de los métodos de educación a distancia, que, en lugar de exigir que el estudiante acuda al centro educativo, ponen los recursos educativos en manos del estudiante.
76519_m4_013.gif
4) Reformulación. Este método supone mirar algo viejo de una nueva manera, eliminando prejuicios, expectativas e ideas asumidas, y descubriendo cómo puede reutilizarse. Por ejemplo, un colador podría utilizarse como pantalla de lámpara.
76519_m4_014.gif
5) Redireccionamiento. Este método consiste en cambiar el punto de vista o perspectiva de un problema. En ocasiones, una línea de razonamiento no da lugar a ninguna solución, por lo que resulta más aconsejable cambiar de línea que intentar implementar a toda costa una solución deficiente. Por ejemplo, si en un establecimiento los clientes nunca recuerdan apagar la luz de los servicios públicos a pesar de existir avisos recordatorios, es mejor instalar temporizadores que seguir insistiendo con nuevos avisos.
76519_m4_015.gif

2.2.Técnicas de pensamiento creativo

Las técnicas de pensamiento creativo suelen combinar dos o más métodos creativos. El objetivo consiste en producir una gran cantidad de nuevas ideas y soluciones de calidad, de manera que puedan seleccionarse las mejores. Harris (2002) describe las siguientes técnicas, que son las más frecuentemente utilizadas:

  • Brainstorming

  • Método 635

  • Preguntas creativas

  • Sinéctica

2.2.1.Brainstorming
Esta técnica creativa es probablemente la más conocida, y una de las más valiosas. Fue descrita por primera vez por Alex Osborn en su libro Applied Imagination (1953), y habitualmente se ha traducido como "tormenta mental" o "tormenta de ideas".
Es una técnica de generación de ideas, cuyos objetivos son romper nuestros hábitos de pensamiento y producir una colección de ideas que posteriormente podamos seleccionar.
Pautas para un brainstorming
Esta técnica puede realizarse individualmente, o en grupos de dos a diez personas (aunque lo ideal sería de cuatro a siete personas). Deben observarse las pautas siguientes:

  • Suspensión del juicio. Es la regla más importante y la más difícil de cumplir, ya que estamos habituados a valorar de manera inmediata cualquier suceso. Cuando surgen las ideas, no deben emitirse juicios o críticas. Todas se anotan como válidas; la evaluación se reserva para una fase posterior.

  • Libertad de pensamiento. Las ideas desatinadas, las que están fuera de contexto, las inconexas, las imposibles, las salvajes, etc. todas son válidas. Las soluciones prácticas proceden en muchas ocasiones de ideas absurdas que han superado los límites de lo ordinario.

  • Referenciación. Las ideas de los compañeros pueden mejorarse, reformularse, completarse. Una idea puede servir de estímulo para una mejora o variación.

  • Riqueza de ideas. Es importante generar un gran número de ideas (algunos expertos se refieren a cincuenta o cien ideas), ya que las primeras veinticinco no suelen ser realmente creativas, al estar todavía relacionadas con un proceso de pensamiento racional. Además, cuanto mayor sea el número de ideas, mejor puede realizarse la selección posterior.

Metodología
Para organizar una sesión de brainstorming, deben seguirse los siguientes pasos:
1) Seleccionar una persona que anotará las ideas (preferiblemente alguien que no participe en la generación de las mismas). Debería anotarlas en un lugar que sea visible para todos (por ejemplo, en una pizarra).
2) Seleccionar un moderador. Para grupos de más de cuatro personas, el moderador indica quién debe exponer la siguiente idea, dando preferencia a quienes referencien ideas previas, y después a quienes aporten nuevas ideas. El moderador debe interrumpir cualquier juicio, en caso de que se emita.
3) La sesión debe desarrollarse en un ambiente relajado y divertido, y puede acompañarse de otras actividades agradables (un aperitivo, por ejemplo).
4) Limitar el tiempo de la sesión a aproximadamente quince o veinte minutos, ya que a partir de este tiempo se hace evidente la fatiga y las ideas empiezan a decaer.
5) Después de la sesión, la lista de ideas debe ser transmitida a todos los participantes.
6) En otra sesión (preferiblemente al día siguiente, nunca en el mismo día), el grupo se reúne de nuevo para poner en común las ideas surgidas, evaluar cuáles pueden ser aplicables, y desarrollar las más brillantes. Las ideas deben transformarse en soluciones prácticas; el énfasis se pone ahora, por lo tanto, en el pensamiento analítico.
Fases en un brainstorming
2.2.2.Método 635
El método 635 es una técnica creada por Warfield, y puede interpretarse como una variante del brainstorming.
Se reúnen seis personas, cada una de ellas con una hoja en blanco, en la que debe anotar tres ideas en solamente cinco minutos. A continuación, debe pasar su hoja al compañero de al lado. Cada participante lee la hoja que le han pasado, y escribe tres nuevas ideas en cinco minutos, en este caso influenciado por las ideas que ha leído. Se repite el proceso hasta completar el ciclo.
Al final, se habrán obtenido ciento ocho ideas en treinta minutos, que pueden seleccionarse posteriormente.
Método 635
2.2.3.Preguntas creativas
La formulación de preguntas que estimulen la curiosidad y la creatividad puede ser todo un arte. Las respuestas pueden descubrir nuevos puntos de vista o posibilidades imprevistas.
Los periodistas utilizan seis preguntas clave para desarrollar un tema. Para los creativos, las seis preguntas pueden estimular nuevas ideas o perspectivas inéditas de un problema:

  • ¿Quién? Quién está implicado en el problema, quién utiliza el producto, quién lo quiere, a quién beneficia o perjudica.

  • ¿Qué? En qué consiste el problema o el producto, qué ha ocurrido o se ha omitido, qué ocurriría si se modifica un elemento, qué problemas pueden aparecer.

  • ¿Cuándo? Cuándo debe resolverse el problema o publicarse el producto.

  • ¿Dónde? Cuál es el escenario, dónde debe suceder o distribuirse el producto, qué otros lugares pueden estar implicados.

  • ¿Por qué? Cuál es el objetivo, por qué debe realizarse o publicarse de una manera y no de otra.

  • ¿Cómo? Cómo se puede solucionar el problema o desarrollar el producto, cómo puede ser alterado, cómo puede ser descrito.

Además de éstas, pueden plantearse otras preguntas que permitan acercarse al problema o a la definición del producto, relativas, por ejemplo, a su relación emocional con el usuario, a su importancia, reputación, etc.
2.2.4.Sinéctica
La palabra sinéctica procede del griego, y significa la unión de elementos distintos y aparentemente no relacionados.
Se trata de una técnica inventada por William J. J. Gordon, en el que un grupo trabaja con analogías y metáforas para comparar el problema con algo que resulte familiar o comprensible, y que ayude a clarificar o definir la cuestión.
A nivel creativo, el uso de analogías resulta muy sugerente, ya que permite descubrir nuevos puntos de vista o atributos de un producto. Las metáforas permiten romper tópicos y estereotipos.
Generalmente, las sesiones suelen limitarse a una duración máxima de una hora.
2.2.5.Otras técnicas
Además de las técnicas descritas anteriormente, que son algunas de las más utilizadas, existen otras muchas, algunas de las cuales se describen a continuación:

  • Otros usos. Ésta es una técnica sencilla, que puede utilizarse tanto para la estimulación mental, como para una aplicación práctica. Se basa en imaginar todos los usos posibles de un objeto, sin tener en cuenta para qué se utiliza normalmente, o para qué ha sido diseñado. En esta técnica puede establecerse un límite temporal (por ejemplo, cinco minutos), o cuantitativo (por ejemplo, veinticinco usos).

  • Mejoras. Esta técnica consiste en imaginar qué modificaciones pueden realizarse sobre un producto para optimizar su objetivo inicial. Puede aplicarse a objetos, lugares, instituciones, ideas, etc. El punto de inicio suele consistir en definir el problema (¿por qué x no funciona bien?, ¿por qué el público no compra x?, etc.).

  • Generación de posibilidades. Esta técnica consiste en describir una solución o un producto, y examinar sus posibles consecuencias e implicaciones. Los participantes deben intentar prescindir de prejuicios y valoraciones críticas, e intentar describir con la mayor aproximación posible el escenario resultante.

  • Análisis de atributos. Consiste en descomponer un problema o idea en sus componentes para poder reflexionar sobre las partes más que sobre el conjunto. Esta técnica permite descubrir de dónde pueden proceder las causas de un problema, con la finalidad de encontrar la solución más adecuada, pero también puede utilizarse para obtener nuevas perspectivas de un producto, a partir de la observación de sus componentes.

  • Verbos manipulativos. Se basa en la utilización de verbos para estimular el pensamiento creativo. Se selecciona un verbo de una lista (por ejemplo, congelar, arrugar, rotar, calentar, mezclar, pintar, mostrar, escalar, sumergir, agitar, etc.), y se imagina cómo puede aplicarse a la idea o problema.

  • Inversión. Consiste en invertir una situación o problema, para generar nuevas ideas. Por ejemplo, podemos partir de la pregunta: ¿cómo podemos conseguir que el usuario no pueda llegar al apartado x de la aplicación?, ¿cómo vamos a lograr que el usuario nunca quiera enviarnos sus datos? La inversión de un problema puede ayudarnos a encontrar los elementos que constituyen la solución del problema real, a partir de una perspectiva totalmente distinta a la habitual.

  • Conceptos aleatorios. Se basa en introducir una idea no relacionada con el problema, y forzar conexiones o similitudes.

Ejemplo
Imaginemos que el problema consiste en que tenemos un formulario con demasiados campos, y pocos usuarios lo rellenan y lo envían.

  • Concepto aleatorio: coche.

  • Ideas: un coche es veloz, permite ir a todas partes, tiene diferentes espacios (habitáculo, maletero), existen diferentes modelos de coche.

  • Conexiones:

    • Es veloz: podríamos prerrellenar algunos campos para facilitar la acción del usuario.

    • Tiene diferentes espacios: podríamos subdividir el formulario en varias páginas para que el proceso sea más secuencial.

    • Diferentes modelos: podríamos ofrecer varias versiones del formulario según el objetivo del usuario.

3.Retórica visual

La retórica consiste en la utilización del lenguaje de forma efectiva. En el entorno gráfico, la retórica visual permite aplicar la gramática de las formas gráficas para guiar la visión y actitud del espectador, transmitiéndole una información, una emoción, o un conjunto de sugerencias.

3.1.Figuras retóricas

La retórica fue desarrollada en un principio en el contexto del lenguaje verbal con el objetivo de aumentar la elocuencia, es decir, la capacidad de influir y convencer al público, tanto a nivel racional como emocional.
Algunas de las figuras retóricas se han transferido al lenguaje visual. Las más frecuentes son las siguientes (Claire Dorman, 2006):
1) Metáfora. Se basa en la analogía entre lo representado (el concepto, idea) y el objeto que lo representa. Va de lo abstracto (la idea representada) a lo concreto (el objeto con el que se representa). Es la figura retórica más utilizada en el diseño de interfaces (metáfora del escritorio en Mac y Windows, papelera de Mac, etc.).
2) Metonimia. Consiste en la sustitución de un concepto u objeto, por otro relacionado. La sustitución puede ser causal, espacial o cronológica. Por ejemplo, puede utilizarse un bote de pintura para representar una herramienta de aplicación de color, o una lupa para la herramienta de zoom.
3) Sinécdoque. La parte sustituye al todo. Por ejemplo, en una web educativa, el botón de acceso a materiales didácticos puede representarse mediante el icono de un libro.
76519_m4_020.gif
4) Hipérbole. Consiste en la exageración o énfasis para acentuar un elemento. Se utiliza para diferenciar un objeto de otros similares. Esta figura tiene dos formas específicas:

  • Exageración. Consiste en enfatizar partes del objeto, o una emoción o acción (por ejemplo, exagerando el gesto de alegría o disgusto de dos personajes, que representan la respuesta a una acción correcta o incorrecta del usuario).

  • Anticipación. Se utiliza en animaciones para exagerar una acción preliminar, con el objetivo de indicar al espectador qué acción es la que viene a continuación (por ejemplo, exagerando la posición de un personaje antes de un salto).

5) Juego visual. Consiste en la utilización de signos que sugieren dos o más significados distintos para una misma imagen. Por ejemplo, una caja con un interrogante encima puede ser, en un interactivo, una sorpresa positiva o negativa.
6) Personificación. Se asignan cualidades humanas a objetos inanimados o a animales. Es un recurso utilizado para dotar a una interfaz de un tono humorístico o desenfadado, y se utiliza con mucha frecuencia en aplicaciones orientadas a un público infantil, que identifican favorablemente el antropomorfismo.
7) Elipsis. Consiste en la supresión de algunos elementos del diseño, para centrar la atención en lo esencial del objeto representado. Es un recurso muy utilizado en cómic. Además de aplicarse a nivel gráfico, la elipsis puede ser también temporal (se elimina el tiempo intermedio entre dos acciones o situaciones), y/o espacial (supresión del espacio existente entre dos localizaciones distintas).
8) Antítesis. Consiste en la yuxtaposición de dos ideas contrarias, que generalmente tienen estructuras paralelas. Por ejemplo, la utilización de dos flechas opuestas para indicar las opciones de deshacer/rehacer (undo/redo) de las aplicaciones interactivas.

4.Retículas en pantalla

La retícula se utiliza para establecer una estructura de diseño continua y coherente en soportes que deban alojar todo tipo de contenidos.
En periódicos y revistas, el contenido varía en cada edición (pudiendo llegar a actualizarse diariamente o incluso con periodicidad mayor), y el diseñador debe garantizar la coherencia gráfica que proporciona identidad a la publicación. Esta coherencia debe mantenerse a lo largo de todas las páginas, aunque los contenidos cambien en cada una de ellas.
De la misma manera, en soporte digital, el usuario ha de poder identificar una aplicación o una web como un conjunto unitario, aunque el aspecto general sea distinto en cada pantalla.
La retícula actúa de manera similar a la estructura de un edificio, preservando la relación entre todos los elementos que conforman el conjunto y garantizando su estabilidad y consistencia.
76519_m4_026.gif

4.1.Estructura de la retícula

En publicaciones (tanto impresas como digitales) que se actualizan frecuentemente, se hace necesario minimizar el número de decisiones sobre diseño que el editor de la página debe realizar. En estos casos, la retícula adquiere la forma de una rejilla, que determina las zonas existentes en el soporte, y su subdivisión (generalmente en varias columnas). Durante el proceso de edición de los contenidos se respeta estrictamente la estructura definida, de manera que exista una continuidad visual a lo largo de toda la publicación, a pesar de que los contenidos de cada página sean distintos.
76519_m4_027.jpg
La retícula puede también basarse en escalas modulares, que son más flexibles que la rejilla utilizada en periódicos y revistas. Estas escalas se basan en un conjunto de proporciones armoniosas, y pueden generarse a partir de cualquier proporción: la serie Fibonacci, las medidas de una guitarra para un libro de música, cartas astronómicas para uno de astronomía, etc.
76519_m4_028.gif
También puede basarse en escalas orgánicas, más irregulares e imprevisibles que las anteriores. Los resultados suelen aplicarse a productos experimentales, o publicaciones en las que la frecuencia de actualización sea baja.
76519_m4_029.gif

4.2.Tipos de retículas gráficas

Las retículas en entorno multimedia pueden ser de tres tipos: lineales, jerárquicas y fluidas.
4.2.1.Retículas lineales
Las retículas lineales se basan en una estructura que se mantiene a lo largo de toda la aplicación. Generalmente se asigna una zona a los elementos de navegación, que permanece estática, y una zona a los contenidos, que es la que contiene información variable.
La zona de contenidos puede contener una subretícula, destinada a emplazar los elementos que previsiblemente pueden aparecer en ella:

  • texto

  • imágenes fijas

  • animaciones o secuencias

  • elementos de navegación de contenido (paginación, etc.)

La retícula lineal resulta muy útil para interactivos con gran volumen de contenidos, en los que sea necesario priorizar la orientación del usuario, así como agilizar la producción. También resulta muy indicada en aplicaciones con un ritmo de actualización frecuente.
4.2.2.Retículas jerárquicas
Mantiene una estructura básica de zonas, aunque la estructura particular de cada una de estas zonas de pantalla puede cambiar, dependiendo del apartado en que se encuentre el usuario. En ocasiones, aunque no es imprescindible, se utilizan códigos de color para diferenciar apartados, de manera que el usuario no se desoriente.
La retícula jerárquica evita la sensación de monotonía en la navegación, ya que la estructura de detalle se modifica en cada apartado. Resulta indicada para aplicaciones con un volumen de contenido no excesivamente extenso, y en las que no importe que la lectura sea completamente aleatoria.
También resulta muy adecuada en caso de que los diferentes apartados de una aplicación vayan orientados a usuarios de características distintas (por ejemplo, a niños / padres / maestros).
Arriba, página principal de Educalia. Abajo a la izquierda, menú infantil y primaria. Abajo a la derecha, menú secundaria. Fuente: http://www.educalia.org
Arriba, página principal de Educalia. Abajo a la izquierda, menú infantil y primaria. Abajo a la derecha, menú secundaria.
Fuente: http://www.educalia.org
4.2.3.Retículas fluidas
En las retículas fluidas la estructura es dinámica, de manera que los módulos de la retícula pueden presentarse en múltiples combinaciones distintas, a lo largo de la aplicación.
En este tipo de estructuras resulta muy importante mantener la consistencia mediante el establecimiento de códigos de color evidentes, y la repetición de elementos que reaccionen de manera similar a las acciones del usuario.
Este tipo de retícula resulta indicada cuando la aplicación se dirige a un usuario con experiencia y ganas de experimentar. Permite generar una dramaturgia, acentuando la interpretación de la interfaz como escenario.

4.3.Determinación de retículas gráficas

Los pasos para construir una retícula gráfica son los siguientes:
1) Establecimiento de la retícula principal. Debe basarse en el formato de la aplicación. Si va a distribuirse en CD-ROM, normalmente se respeta el formato 3 × 4 de la pantalla (a no ser que por alguna razón se quieran romper estas proporciones); si es una web, debe tenerse en cuenta el área visible de pantalla, y la posible existencia de barras de desplazamiento que extiendan la página más allá de esta área.
La retícula principal permite establecer los módulos-base, es decir, una subdivisión coherente del espacio de pantalla. En algunas ocasiones, la retícula puede estar sencillamente formada por unos módulos de tamaño definido, sin más variaciones.
76519_m4_033.gif
2) Subdivisión de la pantalla. Teniendo en cuenta los espacios determinados por la retícula, se generan las áreas principales, en muchas ocasiones diferenciadas por bloques de color o elementos separadores.
76519_m4_034.gif
3) Determinación de los espacios asignados a cada elemento. A partir de la retícula obtenida, se determina la posición y el espacio ocupado por los elementos principales de pantalla (bloques de color, área de opciones, área de titulares, etc.), y posteriormente se detalla el tratamiento de los secundarios (área de texto, posición y tamaño de las imágenes, etc.)
76519_m4_035.gif

4.4.Niveles de retículas

Una aplicación multimedia no contiene solamente una retícula gráfica, sino que se compone de varias retículas interrelacionadas:

  • Retícula funcional. Se refiere a la posición y tratamiento de los elementos funcionales de la aplicación (menús, opciones, etc.).

76519_m4_036.gif

  • Retícula cromática. Gama cromática de la aplicación, y asignación del sistema cromático a los elementos, según sus funciones.

76519_m4_037.gif

  • Retícula de sonido. Asignación de respuestas sonoras a las diferentes acciones del usuario.

76519_m4_038.gif

  • Retícula de animaciones. Regula la existencia de animaciones asociadas a diferentes funciones o respuestas a acciones del usuario. Determina el ritmo visual del interactivo.

76519_m4_039.gif

  • Retícula gráfica. Define las características de distribución de los elementos en pantalla y su tratamiento estilístico.

76519_m4_040.gif

5.Tipografía para interactivos

El texto suele ser el material básico con el que se construye el contenido de las páginas. Cada uno de los tipos de los que disponemos para componer el texto ha sido cuidadosamente diseñado, y cualquier distorsión que apliquemos puede romper su equilibrio estructural (muchos de los efectos que acostumbramos a ver en ediciones de baja calidad, o en algunos anuncios publicitarios, son resultado de un tratamiento nefasto de los tipos).
La aplicación de tipografía en pantalla tiene unas características particulares, que la diferencian de su tratamiento en entornos tradicionales. Al diseñar una interfaz resulta fundamental favorecer la legibilidad del texto, un factor crítico debido a la escasa resolución –en comparación con el medio impreso– de los soportes digitales.
A continuación se describen los factores más importantes para el tratamiento de texto en aplicaciones interactivas.

5.1.La estructura de una letra

La letra tiene una estructura precisa. Sus partes fundamentales son las siguientes:
76519_m4_041.gif

5.2.Medidas de una letra

Una letra puede medirse en dos sentidos:
1) Altura del tipo. Es la medida que se establece en puntos. Un punto es exactamente 1/72 de pulgada.
76519_m4_042.gif
Aunque tengan el mismo tamaño en puntos, pueden observarse diferencias importantes entre distintos tipos de letra, debidas a variaciones en las longitudes de ascendentes y descendentes.
76519_m4_043.gif
2) Anchura del tipo. La anchura del tipo acostumbra a ser medida en número de caracteres por pica (1 pica= 1/6 pulgada).
76519_m4_044.gif

5.3.Variaciones de las letras

Generalmente, una familia tipográfica dispone de tres variaciones sobre el tipo regular:

  • Itálica (también llamada cursiva)

  • Negrita (bold en inglés)

  • Negrita itálica

76519_m4_045.gif
Algunos tipos de letras contienen variaciones añadidas, algunas de las cuales pueden ser:

  • Variaciones en la anchura de las letras (de condensada a extendida).

76519_m4_046.gif

  • Versalitas. Todas las letras están en caja alta (mayúsculas), y las capitales se distinguen por tener un tamaño superior.

76519_m4_047.gif

5.4.Familias tipográficas

A pesar de la gran cantidad de tipos existentes, la mayoría de las familias tipográficas pueden reunirse en dos grandes grupos:

  • Romanas (sérif)

  • Palo seco (sans sérif)

5.4.1.Romanas
Son los tipos con sérif. El sérif, también llamado rasgo o gracia, es un pequeño trazo que se añade a los extremos de las letras romanas y que tiene su origen en la caligrafía con pluma o pincel.
76519_m4_048.gif
Las romanas se pueden clasificar en cinco categorías:

  • Humanista. Primeros tipos romanos, basados en la cursiva (letra escrita a mano) utilizada en Venecia en el siglo XV.

76519_m4_049.gif

  • Garald. Tipos romanos surgidos de los grabados realizados por Francesco Griffo para el editor Aldo Manuzio.

76519_m4_050.gif

  • De transición. Son los caracteres que se sitúan a medio camino entre los antiguos y los modernos, y surgen a partir de 1694, con el prototipo Roman du Roi. Son tipos racionalistas, construidos a partir de una retícula de pequeños cuadrados.

76519_m4_051.gif

  • Didones. Se caracterizan por su modulación vertical. Nacen a mediados del siglo XVIII, cuando la evolución técnica posibilita la impresión de líneas finas.

76519_m4_052.gif

  • Mecánicos. Son tipos que nacen con la revolución industrial.

76519_m4_053.gif
5.4.2.Lineales, de palo seco o sans-sérif
Son caracteres sin sérif. Las letras de palo seco empezaron a adquirir importancia a principios del siglo XX, cuando los tipógrafos –en especial, los alemanes–, buscaban un tipo contemporáneo, fácilmente reproducible.
El primer ejemplo lo encontramos en el diseño de letra para el plano del metro de Londres (1916), debido a Edward Johnston.
76519_m4_054.gif
Se pueden clasificar en cuatro categorías:

  • Grotesque. Originaria del siglo XIX.

76519_m4_055.gif

  • Neo-gótica. Caracteres diseñados durante el siglo XIX.

76519_m4_056.gif

  • Geométrica. Basadas en formas geométricas simples, con pocas diferencias entre caracteres.

76519_m4_057.gif

  • Humanística. Caracteres basados en las proporciones romanas, con diferencias en la anchura de los trazos.

76519_m4_058.gif

5.5.Composición tipográfica

Los siguientes son los principales conceptos que forman parte de la composición tipográfica:

  • Espaciado

  • Espacio entre palabras

  • Longitud de línea

  • Interlineado (leading)

  • Alineación

5.5.1.Espaciado
Se refiere al espacio entre letras. Puede ser:

  • Fijo. El espacio entre cada una de las letras, no importa si es "i" o "m", es constante. Los primeros tipos diseñados para ordenadores (por ejemplo, la Courier) son de espaciado fijo.

76519_m4_059.gif

  • Proporcional. Cada letra ocupa justamente el espacio que necesita para poder distinguirse y para favorecer la legibilidad. Las fuentes proporcionales permiten incluir mayor volumen de texto en una página, que las de espaciado fijo.

76519_m4_060.gif
Aunque cada tipo de letra tiene un espaciado óptimo (aquél para el cual ha sido diseñado), éste puede ajustarse (tracking). En caso de que todas las letras sean mayúsculas, suele ser aconsejable aumentar el espacio.
76519_m4_061.gif
Por kerning se entiende el ajuste de espacio entre pares de letras para optimizar la legibilidad de un texto (cuando se modifica el kerning, el espaciado general deja de ser regular).
76519_m4_062.gif
Para la lectura en pantalla, se recomienda aumentar el espaciado entre 5 y 10 unidades.
5.5.2.Espacio entre palabras
El espacio entre palabras debe ser constante, sea cual sea la alineación del texto.

  • Un espacio demasiado pequeño puede reducir la legibilidad, al impedir la diferenciación inmediata de palabras.

76519_m4_063.gif

  • Un espacio demasiado ancho también dificulta la lectura, porque el final de una palabra y el inicio de la siguiente quedan desconectados.

76519_m4_064.gif
5.5.3.Longitud de línea
Cuanto más larga es una línea, más difícil se hace leerla. No obstante, las líneas demasiado estrechas fragmentan el texto e interrumpen el ritmo de lectura.
La longitud de línea aconsejable depende del tipo de letra, del interlineado (distancia entre líneas) y del tamaño y resolución del soporte:

  • Generalizando, en soporte papel una línea debería tener 55/60 caracteres, o 9/10 palabras para conseguir un grado de legibilidad óptimo.

  • En el caso de la pantalla de ordenador, su limitada resolución dificulta la lectura. En este caso, es aconsejable intentar que los bloques de texto densos no superen los 40/60 caracteres por línea.

76519_m4_065.gif
5.5.4.Interlineado
El interlineado (leading) Se refiere a la distancia entre líneas de texto, y se mide en puntos.

  • Si el interlineado es demasiado pequeño, el proceso de lectura se ve dificultado por la apreciación de bloques oscuros entre el texto.

76519_m4_066.gif

  • Un interlineado demasiado ancho puede provocar problemas para saltar de una línea a la siguiente, interfiriendo en el ritmo de lectura.

76519_m4_067.gif

  • Cuando trabajamos con bloques de texto largos y densos, el interlineado debe ser más ancho que si estamos componiendo listas o componemos bloques más ligeros.

Para la lectura en pantalla, se recomienda que el interlineado esté entre entre 130 y 150%.
5.5.5.Alineación
La alineación (alignment) es uno de los factores que contribuyen a dotar al texto de un carácter determinado:

  • Cuando el texto está marginado únicamente por un lado, la sensación es de informalidad. La alineación a izquierda es la más legible.

  • La alineación a derecha se aconseja únicamente para pequeños bloques de texto, o para finalidades muy determinadas (notas al margen, etc.).

  • El texto centrado se utiliza para pequeños bloques de texto, preferentemente en anuncios publicitarios y en composiciones en las que la atención del espectador deba atraerse de manera rápida y directa.

  • El texto justificado (marginado por los dos lados) es el más utilizado en publicaciones de todo tipo. Está en segundo lugar en orden de legibilidad (por debajo del marginado a izquierda), y connota formalidad y –en muchas ocasiones– cierto clasicismo.

76519_m4_068.gif

5.6.Estilo tipográfico

5.6.1.Contraste visual
Una buena aplicación tipográfica depende:

  • del contraste visual entre las fuentes,

  • del contraste entre los bloques de texto y el espacio vacío que los rodea.

La mirada del espectador se atrae mediante el uso de elementos de contraste y patrones de composición distinguibles.
5.6.2.La tipografía como patrón de lectura
La tipografía es, en muchos casos, lo que constituye el patrón organizativo de la página. Lo que el lector ve en primer lugar no son los detalles de la página, sino su patrón general. El ojo del lector rastrea primero la página como si fuera un gráfico, y sólo entonces empieza a examinar sus detalles y elementos, iniciando el proceso de lectura.
Los patrones regulares establecidos mediante páginas bien organizadas ayudan al lector a localizar rápidamente la información, y aumentan la legibilidad del conjunto.
En cambio, el abuso de tipografía heterogénea (utilizar, para la misma función, diferentes tipos o variaciones) impide la observación de un patrón consistente, y dificulta que el lector pueda interpretar la función asignada a cada bloque de texto.
Los estilos tipográficos deben utilizarse con consistencia: primero se determina qué tipos de letra y variaciones se asocian a cada función, y después se aplican estos criterios de manera consistente.
5.6.3.Uso de las variaciones
Podemos distinguir las siguientes variaciones:

  • Cursiva. La cursiva se suele utilizar para dar énfasis a una parte de texto, o para señalar una cita (frase literal de algún autor, títulos de libros, revistas, películas, etc.).

  • Negrita. Establece puntos de atención en la página. Debe utilizarse con economía: su abuso conduce a que nada destaque especialmente en la página. Ayuda a determinar una jerarquía.

  • Mayúsculas. Es altamente recomendable no utilizar las mayúsculas para enfatizar bloques de texto en una página. Son poco legibles e interrumpen el ritmo de lectura. Por otro lado, con las mayúsculas PARECE QUE ESTEMOS GRITANDO al lector, en lugar de dirigirnos a él en un tono normal.

5.6.4.Listas
Cuando un texto contiene una lista numerada o con topos (señales de párrafo) que incluyen más de una línea, normalmente adopta los márgenes propuestos por estas señales.
Otro recurso consiste en indentar el párrafo a partir de la primera línea; en este caso, la primera palabra suele estar en negrita o en cursiva.
76519_m4_069.gif

5.7.Legibilidad

Por legibilidad se entiende el grado de facilidad con el que un texto puede ser leído sin que exista ambigüedad formal.
Para componer el texto, deben tenerse en cuenta cuatro factores fundamentales:
1) el contenido del texto que se publica (qué se lee).
2) el tipo de público al que va dirigido (infantil, adulto, público en general, comunidad científica, etc.).
3) cuál es el soporte (papel, pantalla, etc.).
4) cuál es la finalidad del mensaje (publicidad, divulgación científica, literatura, arte, etc.).
5.7.1.Legibilidad y famílias tipográficas
Los sérif realizan tres funciones básicas:
1) Ayudan a mantener una distancia determinada entre las letras.
2) Unen visualmente las letras para formar palabras, lo cual facilita la lectura.
3) Ayudan a diferenciar las letras individuales, en especial las mitades superiores.
El proceso de lectura no se basa en descifrar secuencialmente letra por letra para unir posteriormente estas letras en palabras, sino que consiste en reconocer de manera rápida la forma de la mitad superior del conjunto de letras.
76519_m4_070.gif
La mitad superior de las letras es, por lo tanto, fundamental para la legibilidad del texto. La mitad inferior apenas permite distinguir unas de otras:
76519_m4_071.gif
Las letras cuyas mitades superiores son más difíciles de distinguir en caso de no tener sérif son las siguientes: a-c-l-m-n-p-q-g-o.
76519_m4_072.gif
5.7.2.Reglas para la legibilidad
Para facilitar la legibilidad se han de tener en cuenta las siguientes reglas:

  • Los caracteres sin sérif son en general menos legibles, puesto que suelen parecerse más entre ellos, lo que es especialmente manifiesto en grandes bloques de texto.

  • No obstante, para la lectura en pantalla, la tipografía sin sérif es la más legible, puesto que se adapta a la retícula de píxeles. Existen, no obstante, algunos tipos de letra con sérif diseñados especialmente para pantalla (por ejemplo, la Georgia).

  • La letra regular (también llamada redonda) acostumbra a resultar más legible que cualquiera de sus variantes (cursiva, negrita, versal).

  • Las palabras deben estar próximas unas a otras (separadas, como máximo, por un espacio igual a la anchura de la letra "a"). Puesto que el lector no lee carácter por carácter, sino por palabras o grupos de palabras, el espacio intermedio debe ser pequeño.

  • El espacio entre líneas debe ser superior al espacio entre palabras. El espacio interlineado es fundamental para la legibilidad.

  • Cuando la línea es superior a doce palabras, la vista debe alejarse mucho del inicio de línea, con lo que aumenta la dificultad para encontrar el principio de la siguiente línea.

  • Las letras minúsculas (de caja baja) son más legibles que las mayúsculas (de caja alta), que forman rectángulos visuales homogéneos.

  • El intercalado de mayúsculas dentro de una frase interrumpe notablemente el ritmo de lectura.

En general, el texto se hace menos legible cuando:

  • el tipo es demasiado condensado o demasiado extendido,

  • el tamaño es demasiado pequeño,

  • se reduce el interlineado,

  • las líneas son demasiado largas.

  • El tamaño de letra de pantalla no debería ser inferior a los 9 puntos. La letra más legible es Arial a 12 puntos, seguida por la Times New Roman a 12 puntos.

6.Uso y aplicación del color

6.1.Color y memoria

Nuestra capacidad para recordar colores es muy limitada y, en todo caso, se nos hace más difícil retener diferencias de grado que de clase.
Tenemos capacidad para reconocer y diferenciar fácilmente un máximo de seis colores (lostres primarios + los tres secundarios que les vinculan).
76519_m4_073.gif
Las formas son un medio de diferenciación, orientación e identificación más eficaz que el color.
76519_m4_074.gif

6.2.Armonía del color

A principios del siglo XX, Ostwald desarrolló un conjunto de teorías sobre armonía del color. Básicamente, sus conclusiones son las siguientes:

  • Dos o más colores armonizan si su saturación es la misma.

76519_m4_075.gif

  • Existen matices que combinan especialmente bien: son los colores complementarios (los enfrentados en el círculo cromático).

76519_m4_076.gif

  • Todo círculo horizontal en torno al eje del modelo cromático representa un conjunto de colores armónicos, porque contiene todos los matices de igual saturación y luminosidad.

76519_m4_077.gif

6.3.La escala de color

Cualquier mensaje visual ha de basarse en un número limitado de valores perceptuales, a partir de los que el lector pueda establecer una estructura básica.
A partir de esta escala fundamental, aparecen variaciones secundarias, más sutiles, que modulan el esqueleto primario.
Los tres colores primarios (azul, amarillo, rojo) no son relacionables por un denominador común. Los puentes entre ellos son establecidos por los secundarios.
Los colores primarios:

  • marcan el inicio o el final de una secuencia cromática.

  • marcan un punto decisivo en que la composición toma otra dirección.

  • establecen puntos de reposo y tónicas de referencia.

76519_m4_078.gif
Los secundarios:

  • establecen un equilibrio entre los dos primarios que los componen.

  • presentan una actividad debida a la tensión hacia el primario más fuerte.

76519_m4_079.gif
El equilibrio entre primarios y secundarios puede ser de dos tipos:

  • Secundarios dominantes + primarios subordinados. Produce una sensación de tensión. Los primarios soportan la estructura y muestran el fundamento de las mezclas de los secundarios.

76519_m4_080.gif

  • Primarios dominantes + secundarios subordinados. Produce una sensación de estabilidad y armonía.

76519_m4_081.gif

6.4.Interacción del color

El color varía según el contexto. La interacción entre colores produce dos fenómenos diferentes:

  • Contraste cromático. Acentúa la complementariedad, o modifica los colores en el sentido de la complementariedad.

76519_m4_082.gif

  • Asimilación. Cuando los matices son similares, los colores se aproximan en lugar de acentuar su contraste.

76519_m4_083.gif

6.5.Efecto psicológico del color

La observación del color se asocia a una serie de efectos físicos y psicológicos:

  • El tono muscular y la circulación sanguínea crecen en la escala que va del azul al rojo.

  • La sensación térmica no está tan determinada por el color dominante como por el subordinado. La sensación de color aumenta en la escala de azul a rojo.

76519_m4_084.gif

  • En general, cada color se asocia a una serie de sensaciones, emociones y convenciones culturales, a veces contradictorias, según el contexto:

Color
Sensación
Rojo
Alegría, entusiasmo, comunicación
Pasión, emoción, acción, agresividad, peligro, guerra
Vida, caridad, sacrificio, triunfo
Azul
Reserva, lejanía
Confianza, armonía, afecto, amistad, fidelidad, amor
Verde
Reserva, esplendor
Esperanza, naturaleza, juventud, deseo, descanso, equilibrio
Amarillo
Luz
Egoísmo, celos, envidia, odio
Adolescencia, risa, placer
Naranja
Fiesta, placer, sol, luz, diversión
Violeta
Calma, autocontrol, dignidad, aristocracia
Violencia, agresión, engaño, robo, miseria
Marrón
Cordial, cálido, noble
Fuerza, resistencia, vigor
Blanco
Inocencia, paz, infancia, alma, divinidad
Estabilidad, calma, armonía
Negro
Disolución, separación, tristeza
Muerte, noche, ansiedad
Seriedad, nobleza
Gris
Desconsuelo, aburrimiento, pasado, vejez, indeterminación, ausencia de vida, desánimo

6.6.Color y emoción

El color se relaciona con la emoción.
La acción del color parte del objeto y llega al observador, provocando una respuesta que en un primer momento no es intelectualizada.
La forma se relaciona con el intelecto.
En el caso de la forma, el observador presenta una respuesta activa, porque desde el primer momento organiza la forma estructural del objeto, para comprenderlo e identificarlo.
76519_m4_085.gif

6.7.Sensación y color

El color va asociado no sólo a emociones, sino también a sensaciones. Wright y Rainwater realizaron en 1962 una investigación con una muestra de 3.500 personas, a las que se pidió que asociara sensaciones y conceptos con colores. Los resultados fueron los siguientes:
Sensación
Conceptos asociados
Parámetros del color
Felicidad
Feliz
Joven
Fresco
Claro
Sociable
Agraciado
+ luminosidad
+ saturación
El tono no es determinante
Ostentación
Prominente
Ostentoso
Excitante
+ saturación
+ luminosidad
El tono no es determinante
Potencia
Fuerte
Potente
– luminosidad
+ saturación
El tono no es determinante
Calor
Cálido
Pleno
Saludable
Tono: rojo
– luminosidad
+ saturación
Elegancia
Espléndido
Elegante
+ saturación
Tono: azul
La luminosidad no es relevante
Calma
 
– luminosidad
Tono: azul
La saturación no es relevante
Agradabilidad
 
Depende fundamentalmente del tono. Las combinaciones más agradables son:
Azul sobre amarillo
Rojo, verde y azul primarios sobre los secundarios
El efecto sinestésico del color también se puede asociar a sensaciones que normalmente proceden de otros sentidos:
Gusto
Ácido
Verde vigoroso
Amarillo verdoso
Dulce
Naranja
Empalagoso
Rosa
Amargo
Azul oscuro
Marrón
Verde oliva
Salado
Gris con verde claro
Gris con azul claro
Olor
Pimienta
Naranja
Ligeramente picante
Verde
Perfumado
Violeta
Lila
Olor agradable
Colores puros, luminosos
Olor desagradable
Colores oscuros y cálidos
Apariencia
Sólido, compacto
Marrón oscuro
Azul ultramar
Líquido
Azul claro
Verde azulado

6.8.Color e impacto visual

Lo Duca y Enel realizaron un estudio sobre el impacto visual de los colores. Sus conclusiones son:

  • La visibilidad de un color decrece cuando se asocia con otros colores (efecto de contigüidad).

  • El rango de impacto visual de la combinación de colores varía en una escala, de mayor a menor:

76519_m4_086.gif

  • Visibilidad y tiempo. La visibilidad de los colores varía según el tono:

    • Rojo visible en 225/10.000 segundos

    • Verde visible en 371/10.000 segundos

    • Gris visible en 434/10.000 segundos

    • Azul visible en 598/10.000 segundos

    • Amarillo visible en 963/10.000 segundos

6.9.Color y memoria

A mayor luminosidad, mayor es nuestra capacidad para memorizar un color:

  • Amarillo: más memoria de color, menos memoria de forma

  • Rojo: memoria de color y de forma equilibrados

  • Verde: memoria de color y de forma equilibrados

  • Azul: menos memoria de color, más memoria de forma

7.Formatos gráficos

En el caso de las aplicaciones en soportes locales (CD-ROM, puntos de información, etc.), el formato gráfico depende del sistema de autor o herramienta de integración utilizada, que suele presentar unos requisitos particulares.
En entorno web, en cambio, el formato gráfico elegido es muy importante debido a dos factores:

  • Algunos formatos permiten reducir el tamaño del archivo gráfico, gracias a la utilización de algoritmos de compresión. Esto resulta fundamental en el entorno web, en que el tiempo de descarga es un factor crítico en la usabilidad de la aplicación.

  • Los navegadores imponen algunas pautas de estandarización, entre las cuales se encuentran los formatos de los archivos. Un archivo con un formato no estándar no ofrece garantías de poder ser visualizado en cualquier navegador.

76519_m4_107.gif
Las imágenes para web pueden tener tres formatos: GIF, JPG y PNG.

7.1.GIF

El Graphics interchange format (GIF) es un formato originalmente diseñado para web, y desarrollado por Compuserve en 1987. Es compatible con todos los navegadores.
Sus características son las siguientes:

  • Permite almacenar imágenes de paleta indexada (hasta 8 bits por píxel, es decir, 256 colores).

  • Utiliza el algoritmo de compresión LZW, con el que no se observan pérdidas en la imagen comprimida respecto a la original (exceptuando la indexación de la paleta de color). Este algoritmo rastrea la imagen línea a línea, reemplazando las secuencias horizontales de píxeles del mismo color, por una cifra que indica el color y la longitud de la secuencia.

  • Se utiliza para ilustraciones, texto, gráficos de colores planos y fotografías de pequeño tamaño.

El formato GIF89a (una derivación del original, que actualmente se ha impuesto como estándar), permite introducir las siguientes características:

  • Transparencia. Permite designar uno o varios colores transparentes. El nivel de transparencia es siempre del 100% (no admite grados de transparencia: un píxel es opaco, o transparente).

  • Entrelazado. Permite generar una imagen que, al llegar al navegador, se descomprima en tres pasos, mostrando primero una versión a baja resolución de la imagen que irá aumentando a medida que se descarga. Es un recurso que actualmente se utiliza poco, ya que el tiempo de descarga se reduce a medida que se optimizan las conexiones a la red.

  • Animación. Permite almacenar una secuencia de imágenes GIF en un solo archivo, con paleta unificada (un total máximo de 256 colores). Esta animación es compatible con todos los navegadores.

Características del formato GIF
Aplicaciones
Ilustraciones
Texto
Gráficos de colores planos
Fotografías de pequeño tamaño
Compresión de la imagen
Imagen a 256 colores
Sin pérdida de calidad

7.2.JPG

El Joint photographic experts group (JPG) es un formato diseñado para la compresión de imágenes fotográficas en color real o en escala de grises. No es aconsejable para gráficos con contornos muy definidos o colores planos, como trabajos tipográficos, ilustraciones o trabajo de línea.
Sus características son las siguientes:

  • JPEG utiliza un algoritmo de compresión con pérdidas. Trabaja convirtiendo la representación espacial de la imagen en un mapa de frecuencias. Un DCT (discrete cosine transform) separa la información de alta frecuencia presente en la imagen, de la de baja frecuencia. La información de alta frecuencia es descartada selectivamente, dependiendo del grado de calidad preferido. A diferencia del GIF (que comprime basándose en líneas), JPEG realiza la compresión dividiendo la imagen en zonas.

  • El formato JPG permite seleccionar entre varios niveles de compresión, de manera que puede generar archivos realmente pequeños. No obstante, a mayor compresión, menor calidad.

  • Una imagen JPEG siempre pierde información en el proceso de compresión, y puede generar ruido visual, especialmente visible en el contorno de los elementos.

  • Se utiliza preferentemente para imágenes fotográficas, ya que es un formato de imagen que se basa en una paleta de 24 bits. No es indicado en imágenes con colores planos, ilustraciones y tipografía, ya que en estos casos el ruido visual provocado por la pérdida de calidad es muy evidente.

Características del formato JPG
Aplicaciones
Imágenes fotográficas
Compresión de la imagen
Varios niveles de compresión
Implica pérdida de calidad

7.3.PNG

El Portable network graphics (PNG) es un formato presentado a finales del año 1996, como formato orientado a sustituir los existentes en entorno web. Debido a sus ventajas, se encuentra cada vez más en las publicaciones on-line.
Las características del formato PNG son las siguientes:

  • Es un formato diseñado especialmente para el entorno web, ya que permite obtener archivos de imagen muy comprimidos –a diferentes niveles de calidad.

  • Reúne las ventajas de los formatos GIF y JPG:

    • imágenes a 8 o 24 bits,

    • posibilidad de determinar píxeles transparentes,

    • alto nivel de compresión sin pérdida de calidad.

  • Soporta una resolución de color de hasta 48 bits por píxel.

  • Soporta hasta 65 niveles de transparencia en una misma imagen, de manera que pueden incluirse transparencias graduales, sombras, etc. No obstante, esta característica no es compatible con todos los navegadores, de manera que algunos de ellos no reconocen una transparencia distinta al 100%, y muestran opacidad.

  • Se descomprime aproximadamente veinte veces más rápido que el formato GIF.

  • El formato PNG es el más recomendable para las imágenes bitmap que vayan a ser integradas en Flash, ya que conserva todos los atributos del color. Además, Flash reconoce los píxeles transparentes del formato PNG.

Características del formato PNG
Aplicaciones
Para todo tipo de imágenes
Compresión de la imagen
Varios niveles de comprensión
Imágenes a 8 o a 24 bits
Sin pérdida de calidad

8.Preparación e integración de elementos gráficos

8.1.Recorte de elementos

En el proceso de recorte de los gráficos que se integrarán en la web deben tenerse en cuenta los siguientes factores:

  • El recorte debe ajustarse al máximo, para generar archivos del menor tamaño posible.

  • En el caso de páginas web, es fundamental tener en cuenta que los gráficos correspondientes a un botón y a sus diferentes estados (rollover y clicado) deben tener el mismo tamaño, ya que en caso contrario se observarían distorsiones desde la página web.

8.2.Organización de los archivos

Una página HTML nunca contiene los gráficos que muestra, sino que visualiza archivos externos que deben hallarse guardados en carpetas cuyo nombre y organización, una vez definidos, no puede variar (la página busca el archivo según una dirección; si no lo encontrara allí, el gráfico no sería visualizado).
Por lo tanto, es fundamental que la estructura de archivos se haya diseñado correctamente desde el principio, ya que cualquier cambio puede implicar un laborioso proceso de actualización de los enlaces de cada una de las páginas de la web.
En caso de que la web se monte en varios idiomas, es recomendable generar la siguiente estructura:

  • Una carpeta que contenga los gráficos comunes a todos los idiomas (que a su vez pueden estar organizados en subcarpetas); de esta manera, todas las páginas, sea cual sea su idioma, recogerán los gráficos de una carpeta común sin que haya necesidad de duplicarlos (lo cual implicaría mayor espacio ocupado en el servidor, y mayor tiempo de descarga).

  • Una carpeta (que también puede contener subcarpetas) para cada uno de los idiomas, que contenga los gráficos que varían en cada versión (corresponden generalmente a los elementos que contienen texto). El nombre de los archivos debe ser el mismo en la carpeta correspondiente a cada una de las versiones, de manera que no sea necesario actualizar este dato en las páginas de diferentes idiomas, lo que agilizará el proceso de trabajo.

76519_m4_109.gif

8.3.Nomenclatura

Puesto que una web se instala siempre en un servidor desde el que se distribuye a los diferentes usuarios, debemos tener en cuenta los requisitos de este sistema antes de generar los archivos gráficos. Para evitar problemas, se recomienda seguir las siguientes pautas:

  • Es aconsejable que el nombre del archivo no supere nunca los 8 caracteres, a menos que se sepa con seguridad que el servidor reconoce más dígitos en el nombre.

  • Tanto el nombre como la extensión han de estar siempre en minúsculas, ya que algunos servidores no reconocen las mayúsculas, o las interpretan como caracteres distintos de las minúsculas.

  • Los nombres no deben incluir acentos, espacios en blanco o caracteres especiales.

76519_m4_110.gif

8.4.Integración de texto

En una página web podemos integrar dos tipos de texto:

  • Texto gráfico. Se trata de texto bitmap, preparado desde un programa de edición de gráficos. Si debe integrarse en una página web, se guarda previamente en formato de mapa de bits (GIF o PNG), a menos que su destino sea Flash (en cuyo caso puede tener un formato vectorial).

    El texto gráfico tiene la ventaja de no depender de las fuentes instaladas en el ordenador del usuario para su correcta visualización, pero ocupa más espacio en soporte que el texto fuente.

    Se utiliza principalmente en titulares, menús, subtítulos, etc., es decir, en aquellos elementos que no contienen grandes bloques de texto, y en los que éste ha de recibir un tratamiento especial. Debe evitarse en textos de contenido, ya que implica mayor tiempo de descarga que el texto fuente.

  • Texto fuente. Es el texto que se edita directamente en la página html, o en el sistema de autor. Sus principales ventajas son la facilidad de edición (es mucho más rápido de editar, corregir y actualizar que el texto gráfico), y el poco tiempo de descarga.

    El texto fuente depende de las fuentes instaladas en el sistema del usuario, de manera que debe editarse siempre con tipos de letra que se encuentren por defecto en el sistema operativo (algunas de las fuentes de Windows, por ejemplo, serían Arial, Times, Georgia, Courier, etc.).

    El texto fuente se utiliza principalmente en grandes bloques de texto –páginas de contenido, ayuda, índices, etc.–, que, editados como bitmap, supondrían un incremento importante del tamaño de archivo de la aplicación.

76519_m4_111.jpg

9.Optimización de archivos

Debido a las condiciones de la red, al preparar gráficos para un sitio web debemos priorizar la rápida descarga de las páginas. Por lo tanto, los archivos gráficos deben tener el menor tamaño posible, teniendo presentes los siguientes factores:

  • Los colores planos generan archivos menores que tramas, texturas y degradados. Los algoritmos de compresión gráfica reducen mucho aquellas imágenes que contienen pocas variaciones. Un degradado de colores, por ejemplo, implica un cambio continuo en un eje, de manera que debe conservarse información sobre cada segmento de la variación. En cambio, un bloque de color plano puede sintetizarse en información relativa al píxel de comienzo, al píxel en el que termina, y al color que contiene.

76519_m4_112.gif

  • Las sombras y contornos curvos aumentan el tamaño de los archivos. Una sombra actúa como un degradado; por ello, para resaltar botones o titulares es aconsejable utilizar otros recursos. Los contornos curvos implican un suavizado (antialias), que contiene gran cantidad de colores para optimizar la visualización. Es aconsejable limitar el número de perfiles de este tipo.

  • Deben generarse imágenes del menor tamaño (en píxeles) posible. El recorte ha de depurarse, de manera que no incluya áreas innecesarias.

  • Minimizar el número de colores inicial, en el caso de imágenes que vayan a ser almacenadas como GIF.

  • Utilizar fuentes sans-sérif. Las fuentes romanas, debido a la mayor cantidad de detalle, aumentan la necesidad de contornos suavizados (anti-aliasing), menos comprimibles debido a los degradados implicados.

  • Para los fondos, utilizar colores planos o una imagen pequeña que pueda repetirse: es muy importante evitar las imágenes de gran tamaño.

9.1.Optimización de archivos GIF

Para minimizar el tamaño de un archivo GIF, debe tenerse en cuenta que este formato utiliza el algoritmo LZW. Por ello, es recomendable:

  • Eliminar la redundancia horizontal. Es aconsejable no añadir detalles verticales o ruido.

  • Las bandas horizontales de color se comprimen mejor que las verticales.

  • Evitar el tramado en el proceso de indexación de la paleta.

9.2.Optimización de archivos JPG

En el caso de las imágenes JPG, la ratio de compresión puede controlarse muy bien, ya que permite determinar el nivel de calidad de la imagen, teniendo en cuenta lo siguiente:
+ calidad = - compresión = + tamaño de archivo
- calidad = + compresión = - tamaño de archivo

9.3.Optimización de archivos PNG

Para optimizar el proceso de compresión de imágenes en formato PNG, pueden seguirse las siguientes pautas:

  • Priorizar las áreas de colores planos.

  • Evitar la introducción de tramas o ruido visual en la imagen.

  • Evitar el tramado en la indexación de la paleta.

10.Representación de información

Tradicionalmente, los gráficos de representación de datos se han utilizado en soportes estáticos. Con la expansión de los medios interactivos, la infografía se ha enriquecido en dos aspectos:

  • Puede mostrar gráficos animados, que expliquen mejor un proceso o la evolución de los datos representados.

  • Puede incluir interacciones, que permitan al usuario realizar selecciones o determinar algunos aspectos de la representación.

10.1.Tipos de recursos interactivos

En entorno interactivo existen muchas clases de recursos para representar información. Nichani y Rajamanickam (2003) describen las siguientes (teniendo en cuenta que un mismo gráfico interactivo puede tener características de dos o más de estas categorías):
Tipo
Objetivo
Características
Narrativo
Explica los contenidos a través de una historia, para proporcionar una experiencia al usuario.
Historias explicadas desde un punto de vista distinto al habitual. Incluye anécdotas, historias personales, estudios de casos, etc.
Instructivo
Explica los contenidos permitiendo que el usuario avance secuencialmente por ellos.
Instrucciones paso a paso, que explican cómo funcionan las cosas, o cómo ocurren los eventos.
Explorativo
Da al usuario la oportunidad de explorar y descubrir el contenido.
El usuario descubre los contenidos mediante su capacidad para la exploración activa y la comprensión.
Simulativo
Permite que el usuario experimente el contenido, situándolo en un entorno realista.
El usuario experimenta por sí mismo lo representado.

10.2.Pautas para el diseño de información

Dirk Knemeyer (2003a) describe las pautas que deben seguirse al diseñar información en general, pautas aplicables también al diseño de gráficos o interactivos para la información:

  • La información sólo tiene valor si se comunica adecuadamente. Si el lector o usuario no puede acceder a ella o entenderla, pierde todo su valor.

  • Deben tenerse siempre presentes los objetivos por los que se transmite una información. Esto permitirá utilizar los medios más adecuados para su representación.

  • El diseñador debe entender cómo los usuarios van experimentar o entender la información. Para ello, debe conocer cuál es el usuario objetivo así como otros factores, como el contexto de interacción, a qué sentidos del usuario se dirige (vista, oído, etc.), etc.

  • La información representada debe ser

    • Relevante. No se trata sólo de lo que los usuarios quieren, sino también de lo que necesitan para que puedan cumplirse los objetivos previamente definidos.

    • Clara. Implica que es accesible e inteligible. Debe responder directamente a las necesidades de los usuarios, y desarrollarse en un entorno usable.

    • Memorable. Impacta y permanece en la memoria. En un contexto de sobrecarga de información, sólo permanece aquello que destaca.

76519_m4_117.gif

10.3.Uso de los recursos gráficos para la representación de información

Además de la elección del tipo de gráfico o esquema para visualizar la información, el uso adecuado de los recursos gráficos resulta fundamental para una representación eficaz. Las principales cuestiones que hay que tener en cuenta en la construcción de imágenes informativas son:

  • Jerarquización visual

  • Establecimiento de niveles visuales

  • Representación mediante el color

10.3.1.Jerarquización visual
Una cuestión clave para la representación eficaz de información es el establecimiento de jerarquías visuales. Cada elemento debe tener la importancia que requiere, y para ello deben tenerse en cuenta unas condiciones indispensables:

  • La utilización de contrastes visuales para enfatizar datos es útil, siempre y cuando se usen con moderación y en los lugares adecuados. Si todos los elementos de un gráfico ejercen una fuerza de contraste similar, el resultado es un conjunto caótico, en el que nada se distingue especialmente.

  • Los elementos secundarios de un gráfico deben representarse como tales, sin presentar grandes contrastes respecto del fondo; de esta forma, se establecen niveles visuales que facilitan la lectura del gráfico como conjunto estructurado.

10.3.2.Establecimiento de niveles visuales
Un medio indispensable para optimizar la representación de información es el establecimiento de niveles visuales, de manera que el lector pueda distinguir diferentes estratos de organización de datos.
La planificación adecuada de estos niveles es más importante cuanto mayor es la complejidad de los datos que hay que representar. Para ello, debemos tener en cuenta los puntos siguientes:

  • Las relaciones entre los diferentes niveles de información deben establecerse de manera adecuada. La traducción gráfica de estas relaciones debe ser coherente con el contenido de los datos que se quieren mostrar.

  • La yuxtaposición de áreas de colores muy saturados o brillantes produce un efecto visual desconcertante; todas las áreas se activan por igual, y los diferentes niveles de lectura no pueden diferenciarse. En cambio, la utilización de colores de este tipo sobre fondos que no están saturados separa claramente los diferentes niveles.

  • La relación entre los elementos de un gráfico, o entre éstos y el fondo puede generar una activación de las áreas negativas, produciendo ruido (producto gráfico no informativo y no controlado, que puede obstruir la lectura adecuada del mensaje).

76519_m4_119.gif
10.3.3.Representación mediante el color
El color es una herramienta de gran efectividad para representar información. Para su uso adecuado, debemos tener en cuenta los puntos siguientes.
Las variaciones cromáticas se mueven en tres dimensiones: matiz (tono), saturación y luminosidad. La aplicación del color para mostrar información varía según el sentido en que se ejerza la variación:

  • Tonal. Las variaciones tonales se utilizan para visualizar cambios cualitativos.

  • Saturación o luminosidad. Se utilizan para representar cambios cuantitativos. Las variaciones sólo resultan efectivas si se utilizan en una sola dimensión (incorporar cambios simultáneos de saturación y luminosidad resulta ininteligible).

  • Los cambios tonales se memorizan mejor que los relativos a saturación y/o luminosidad, aunque el cerebro humano no está preparado para recordar los matices exactos, sino las diferencias o contrastes generados.

  • La utilización en un mismo gráfico de más de veinte colores produce efectos negativos, puesto que el lector no será capaz de distinguir todas las diferencias.

  • Los colores muy saturados o luminosos producen un efecto caótico cuando se utilizan en grandes áreas adyacentes. Deben reducirse a pequeñas áreas separadas entre sí.

  • Los colores primarios (amarillo-cian-magenta o rojo-verde-azul), así como la combinación de blanco y negro, producen los efectos de máxima diferenciación.

11.Representación de datos numéricos

La utilización de gráficas es fundamental para transmitir información basada en estadísticas o en comparaciones de datos numéricos, ya que puede ayudar a entender datos que serían incomprensibles en forma textual.
Por ejemplo, una información del tipo: "En 1990 se vendieron 1.386 ordenadores, mientras que en 1991 las ventas fueron de 3.986 unidades; en 1992 se vendieron 5.672, en 1993 fueron 6.123, en 1994 bajaron a 3.746 hasta 1995, en que se vendieron 1.623 unidades", resulta, además de tediosa, casi incomprensible e inútil para quien esté interesado en conocer la evolución en la venta de ordenadores del año 1900 a 1995.
En cambio, si la misma información se presenta en forma gráfica, el lector puede comprender fácilmente los datos debidamente estructurados, y establecer comparaciones de manera rápida.
76519_m4_122.gif
Existen fundamentalmente cinco tipos de gráficas para representar datos numéricos: circular, gráfico mediente líneas, barras, gráficas pictoriales y mapas

11.1.Circular o pastel

Es el tipo de gráfica utilizada cuando el objetivo consiste en representar porcentajes de un total de manera que puedan ser fácilmente comparados. Cada uno de los porcentajes ocupa un segmento del círculo; los segmentos pueden diferenciarse mediante colores, tramas o cualquier recurso que permita generar contrastes claros.

11.2.Líneas

Es el tipo de gráfica utilizada para representar la evolución de unos datos numéricos en el transcurso de un periodo de tiempo determinado.
Permite visualizar de manera rápida el sentido de la evolución, incrementos y reducciones, y es muy útil para establecer comparaciones entre dos o más series de datos.

11.3.Barras

Es un tipo de gráfica muy utilizada para mostrar valores numéricos ordenándolos respecto a dos ejes (horizontal y vertical), de los cuales uno corresponde a los datos comparados, y otro a su valor numérico.
Para comparar los valores de dos series o más de datos distintos, pueden generarse gráficas con varias barras.
Si se muestran dos series de datos y una de ellas tiene siempre valores superiores a la otra, las dos barras pueden solaparse para optimizar la comparación.

11.4.Gráficas pictoriales

Se trata de gráficas en las que el pastel, las líneas o las barras han sido sustituidos por símbolos gráficos. La utilización de los símbolos puede ser de dos tipos:

  • Como soporte de valores numéricos.

  • Como componente de otros tipos de gráficas; en este caso, el símbolo gráfico no aporta ninguna información específica al conjunto, pero permite una visualización más clara de los datos comparados.

Ejemplo de gráfica pictorial
Éste es un ejemplo especial de gráfica pictorial, en la que los símbolos utilizados (círculos a diferentes tamaños) permiten una viualización más clara de los datos comparados.
Fuente: http://www.nytimes.com/packages/khtml/2006/04/02/business/20060402_SECTOR_GRAPHIC.html

11.5.Mapas

El mapa permite representar los datos asociados a una zona geográfica determinada.

12.Representación de conceptos

La representación icónica de conceptos es imprescindible cuando se quiere conseguir que el espectador, mediante una lectura rápida, pueda entender procesos, planes, organizaciones, etc.
Según Wileman (1993), los principales medios para la representación de conceptos son los siguientes: planes, organigramas y cronogramas

12.1.Planes

Los planes se utilizan para representar acciones que forman parte de un proceso, y que pueden ordenarse secuencialmente.
Pantalla de Microsoft Project, una herramienta para planificar proyectos

12.2.Organigramas

Los organigramas permiten visualizar las relaciones y jerarquías existentes entre las personas que forman parte de una organización.

12.3.Cronogramas

Se utilizan para representar la evolución histórica de un concepto determinado.

13.Narrativa visual

En el entorno de las aplicaciones multimedia, la necesidad de aportar datos en forma narrativa es muy frecuente. Básicamente encontramos dos tipos de información que suele transmitirse de la manera siguiente:

  • Instrucciones gráficas. Son el equivalente a la información contenida en los manuales de uso y los folletos de instrucciones, y permiten explicar un proceso mediante texto y gráficos. En estos casos, el gráfico representa los puntos más importantes del proceso, mientras que el texto sirve de apoyo o amplía la información contenida en el gráfico.En la red podemos encontrar muchos ejemplos de instrucciones gráficas. Como sugerencia, resulta interesante introducir tie knots (nudos de corbata) en un buscador; como resultado encontraremos numerosas páginas que describen gráficamente los pasos necesarios para realizar diferentes tipos de lazos para corbata.

Instrucción gráfica para realizar lazo de corbata

  • Historias en primera persona. En algunos casos, el tema que se desarrolla se narra desde el punto de vista de una o más personas, de manera que son ellas quienes explican la historia. Desde un sistema multimedia podemos elegir el punto de vista que más nos interese.

El juego Riven
El juego Riven (secuela de Myst) desarrolla una historia interactiva en primera persona.
Fuente: http://www.riven.com/riven_screenshots.html
En todo caso, la narración comprende dos elementos:

  • Contenido, o historia que se cuenta.

  • Contexto. Corresponde a las condiciones de la narración, tanto por lo que respecta a las características del medio (textual, audiovisual, etc.), como a la estructura de la historia.

76519_m4_133.gif
El lector de una narración asume que todo lo que se describe en el relato es importante, de manera que, a medida que se desarrolla la acción, el lector genera una lista mental de acontecimientos, personajes o ubicaciones que le servirán de índice para entender el curso de la historia.
76519_m4_134.gif
En caso de que algún elemento que se supone importante carezca de descripción o de referencias suficientes, el lector tiende a buscar información sobre él (pensemos en las novelas policíacas, por ejemplo). Esta circunstancia puede resultar muy interesante en el diseño de la estructura de datos de una aplicación multimedia, en tanto que puede motivar al usuario para que tenga una participación activa –y por tanto, una implicación emocional– en la construcción del discurso.

13.1.Narración e interfaz

La naturaleza de los sistemas multimedia permite aportar nuevas contribuciones a la manera en que los medios tradicionales construyen las narraciones.
Si en los antiguos media o en la tradición oral las narraciones se desarrollan siguiendo una línea secuencial, las nuevas tecnologías permiten romper el orden del discurso, generando estructuras que pueden ser ordenadas dinámicamente por el usuario, en función de sus intereses. La linealidad del relato, por lo tanto, puede quebrantarse hasta existir solamente como producto final de su actividad.
76519_m4_135.gif
Como señala Abbe Don (1990), el enfoque narrativo de la interfaz puede generar una serie de preguntas que afectan de manera directa al diseño de la aplicación:

  • ¿Cuál es la relación entre la navegación y su contexto? ¿Qué enfoque debe tener la aplicación? ¿Científico? ¿Pedagógico? ¿Semejante a un cómic?

  • ¿Qué convenciones, si las hay, existen para navegar entre los datos representados por texto, imágenes fijas, vídeo y sonido? ¿Podemos integrar los diferentes medios de manera que el usuario no se sienta constantemente agitado a través de éstos?

  • ¿Cuáles son los objetivos de los usuarios de la aplicación? ¿Cómo puede estructurarse la información de manera que los usuarios puedan encontrar lo que buscan basándose en lo que ya saben o en lo que les es familiar, en lugar de exigirles que aprendan previamente cómo está organizado el sistema?

13.2.Utilización de personajes

El uso de personajes para explicar una historia puede ser útil en dos aspectos:

  • Permite desarrollar un discurso subjetivo e incluso emotivo en un medio tecnológico.

  • Permite exponer diferentes puntos de vista sobre un mismo tema (imaginando una aplicación sobre la historia de un país, el usuario podría conocer diferentes maneras de explicar un mismo acontecimiento, e incluso elegir qué personaje desea que le acompañe, porque responde mejor a sus objetivos).

Siguiendo la tradición oral, el lector tiende a construir expectativas sobre los personajes, de manera que una vez definidas sus características principales, los personajes pueden resultar muy útiles para organizar la información (siguiendo con el ejemplo de la historia de un país, el usuario podría escoger un científico, un político, un médico, etc., para que explicaran la historia desde diferentes vertientes).
76519_m4_136.gif

13.3.El lenguaje narrativo del cómic

El cómic es el medio que mejor emplea los recursos que permiten desarrollar narraciones mediante un conjunto de imágenes fijas. Su madurez histórica y el amplio número de autores que han aportado innovaciones tanto estilísticas como a nivel de contenido en este campo hacen que el cómic constituya una de las mejores fuentes de recursos narrativos.
Rajamanickam (2001) expone, además, tres factores por los que la experiencia del cómic puede resultar favorable en entornos multimedia:

  • Los cómics son participativos. Los medios interactivos deben intentar implicar activamente al usuario. Los lectores de cómic interactúan con el contenido.

  • Los cómics explican procesos. Su naturaleza secuencial los convierte en un buen soporte para la explicación de procesos.

  • Los cómics combinan texto e imagen. Algunos usuarios entienden mejor el texto, y otros las imágenes. Los cómics combinan ambos elementos, de manera que llegan a una audiencia amplia.

76519_m4_137.gif
En el ámbito del desarrollo de interfaces, suele ser necesario exponer contenidos narrativos mediante imágenes. Por esta razón, el análisis de los recursos aportados por el cómic se constituye en imprescindible. A continuación veremos algunos de ellos.
13.3.1.Línea
Puede ser de dos tipos:

  • Línea pura. Actúa como contorno para definir las figuras. Generalmente denota inmovilidad.

76519_m4_138.gif

  • Línea modulada. Aporta información sobre aspectos tridimensionales (volumen, valores de iluminación y distancia), y ayuda a establecer jerarquías visuales (los elementos de distinta importancia se representan mediante líneas de grosores diversos). Además, aporta dinamismo y permite mayor implicación emocional por parte del lector.

76519_m4_139.gif
13.3.2.Relleno
Permite adjetivar la imagen, puesto que no es imprescindible para el reconocimiento de las formas, pero añade información accidental.
76519_m4_140.gif
Asimismo, es fundamental para establecer niveles jerárquicos en la imagen, acentuando zonas determinadas y dejando el resto en un plano secundario.
76519_m4_141.gif
13.3.3.Color
Al igual que el relleno, el color permite aportar información sobre el detalle de las superficies, mediante el uso de brillos, degradados y texturas cromáticas.
El color permite generar conjuntos visuales, agrupando zonas de la imagen de contenido similar.
76519_m4_142.gif
La utilización del color es fundamental en el establecimiento del ambiente emocional de una escena. Una misma imagen tratada con diferentes gamas de colores puede implicar estados anímicos completamente distintos.
76519_m4_143.gif
13.3.4.Perspectiva
Puede ser de dos tipos:

  • Mimética. Utiliza las normas convencionales de perspectiva para representar la tridimensionalidad de una escena.

76519_m4_144.gif

  • Deformada. La perspectiva se exagera, utilizándose como elemento más expresivo que representativo. Es muy útil para evocar situaciones de máxima tensión.

76519_m4_145.gif
La perspectiva puede utilizarse no solamente para hacer referencia a la espacialidad, sino también a la temporalidad de una secuencia.
El trazo tiene un papel muy importante en la generación de efectos de perspectiva. Los elementos más cercanos pueden representarse con trazos más gruesos que los lejanos, de manera que se establecen diferentes planos de lectura.
13.3.5.Encuadre
La elección del encuadre es fundamental en el establecimiento del orden de lectura, y en la definición de las jerarquías existentes entre los elementos de la escena. Existen diferentes tipos de encuadre:

  • Plano general largo. Las figuras aparecen muy alejadas al fondo de la imagen. Es un encuadre muy útil para definir una situación o un ambiente.

76519_m4_146.gif

  • Plano general. Las figuras aparecen alejadas, aunque no tanto como en el encuadre anterior. En todo caso, siempre son más pequeñas que el marco escénico comprendido por la imagen. Como el anterior, éste es un encuadre muy útil para definir una situación o un ambiente.

76519_m4_147.gif

  • Plano total. La figura humana constituye el centro semántico de la imagen, aunque es más pequeña que el conjunto, existiendo unos márgenes alrededor de ella.

76519_m4_148.gif

  • Figura entera. La figura llena toda la imagen, y los márgenes que la envuelven se reducen al mínimo.

76519_m4_149.gif

  • Plano americano. Recorta la figura por las rodillas.

76519_m4_150.gif

  • Plano medio. Recorta la figura por la cintura.

76519_m4_151.gif

  • Primer plano. El primer plano recorta la figura a la altura del pecho.

76519_m4_152.gif

  • Primerísimo plano. Se centra únicamente en la cara.

76519_m4_153.gif

  • Plano de detalle. Describe detalles de objetos de la escena o partes de la cara. Aportan dramatismo a la narración, acentuando la importancia de ciertos elementos.

13.3.6.Angulaciones
Se refieren a la posición del ojo del espectador. Encontramos los siguientes tipos de angulaciones:

  • Angulación horizontal. El ojo del espectador se encuentra a la misma altura que lo que se está enfocando. Implica objetividad, y apenas tiene valor dramático.

76519_m4_154.gif

  • Angulación oblicua y angulación vertical. El ojo del espectador se halla en posición oblicua respecto a lo que se enfoca, o bien se sitúa por debajo o por encima en el eje vertical. Implica subjetividad, acentuando la tensión de la escena gracias a dos factores:

    • La sensación de presencialidad que puede tener el lector al adoptar un punto de vista no neutro, y que supone una actitud determinada frente a la escena.

    • La existencia de gran número de líneas diagonales, que son básicas en el establecimiento de tensiones visuales y de dinamismo.

76519_m4_155.gif

Bibliografía

Bibliografía del apartado 1
Aiga(2006a).How to write a design brief.Disponible en línea en:<http://www.aiga.org/content.cfm?contentalias=cg_howtowrite>
Aiga(2006b).Integrated marketing campaign for a new product.Disponible en línea en:<http://www.aiga.org/content.cfm?contentalias=cg_popup_intermarkcampaignfronewproduct>
Farell, Tom (2006). Usability and Online Branding. Disponible en línea en: <http://infocentre.frontend.com/infocentre/articles/usabilityandonlinebranding.html>
Hay, Stephen (2004). Art Direction and the Web.Disponible en línea en: <http://www.alistapart.com/articles/artdirweb>
Bibliografía del apartado 2
Harris, Robert (1998). Introduction to Creative Thinking. Disponible en línea en:<http://www.virtualsalt.com/crebook1.htm>
Harris, Robert (2002). Creative Thinking Techniques. Disponible en línea en: <http://www.virtualsalt.com/crebook2.htm>
Innovaforum (2006). Creatividad e Innovación.Disponible en línea en: <http://www.innovaforum.com/indice.htm>
http://www.alistapart.com/articles/creative/Konradsson, Mattias(1999) [En línea] The Creative Process. Disponible en línea en:<>
Bibliografía del apartado 3
Arroyo, Isidoro (2005). Creatividad publicitaria y retórica. Disponible en línea en: <http://www.icono14.net/revista/num5/articulo3.2.htm>
Dorman, Claire (2006). Rhetorics and visualisation. Disponible en línea en: <http://imv.au.dk/semiotics/modul_3/sctn_4.htm>
Gamonal, Roberto (2004). David Carson Contra Aristóteles: Análisis retórico del diseño gráfico.Disponible en línea en: <http://www.razonypalabra.org.mx/anteriores/n37/rgamonal.html>
GROUPE m (1993). Tratado del signo visual. Madrid: Ed. Cátedra.
Bibliografía del apartado 4
Bringhurst, R. (1999). The elements of Typographic style. Vancouver: Hartley & Marks, Pub.
Doczi, G. (1996). El poder de los límites. Buenos Aires: Ed. Troquel.
Edwin Tofslie (2002). The organic grid.
Disponible en línea en: <http://www.creativebehavior.com/index.php?PID=88>
Groupe m. (1993). Tratado del signo visual. Madrid: Ed. Cátedra.
http://papress.com/thinkingwithtype/grid/single_column.htmLupton, Ellen (2005). Thinking with type.Disponible en línea en: <>
Bibliografía del apartado 5
Bringhurst, R. (1999). The elements of Typographic style. Vancouver: Hartley & Marks, Pub.
Carter, R. Diseñando con tipografía experimental. Barcelona: Index Books.
Frutiger, A. (1997). Signos, símbolos, marcas, señales. Barcelona: Ed. Gustavo Gili.
Götz, V. (2002). Retículas para Internet y otros soportes digitales. Barcelona: Index Book.
McLean, R. (1993). Manual de tipografía. Madrid: Hermann Blume Ed.
http://webtypography.net/The elements of typographic style applied to the web. En
Bibliografía del apartado 6
Cole, A. (1994). Color. Barcelona: Ed. Blume.
Garau, A. (1986). Las armonías del color. Barcelona: Ed. Paidós.
Hogg, J. y otros (1969). Psicología y artes visuales. Barcelona: Ed. Gustavo Gili.
Sanz, J. C. (1993). El libro del color. Madrid: Alianza Editorial.
Bibliografía del apartado 7
Casanovas, Josep(2005a).Diseño de formularios: conceptos básicos.Disponible en línea en:<http://www.alzado.org/articulo.php?id_art=395>
Casanovas, Josep(2005c).Diseño de formularios: etiquetas. Disponible en línea en: <http://www.alzado.org/articulo.php?id_art=461>
Casanovas, Josep(2006a).Diseño de formularios - Campos (I). Disponible en línea en: <http://www.alzado.org/articulo.php?id_art=540>
Moreno Muñoz, A. (2000). Diseño ergonómico de aplicaciones hipermedia. Barcelona: Ed. Paidós.
McMillan; Moore; Moffett (1998). HCI.Disponible en línea en: <http://starform.infj.ulst.ac.uk/BillsWeb/HCI/Lectures/lect8.html>
SEED (1995). Interface Design Guidelines for SEED.Disponible en línea en: <http://seed.edrc.cmu.edu/DFU/style_book/interaction.doc.html>
Shneiderman (1998). Designing the User Interface: Strategies for Effective Human-Computer Interaction. Reading, MA: Addison-Wesley Publishers.
Bibliografía del apartado 11
Knemeyer, Dirk(2003a).Information Design: The Understanding Discipline.Disponible en línea en:<http://www.boxesandarrows.com/view/information_design_the_understanding_discipline>
Knemeyer, Dirk(2003b).Applied Information Design. Disponible en línea en:<http://www.experiencethread.com/articles/archive_article.cfm>
Nichani; Rajamanickam (2003). Interactive Visual Explainers-A Simple Classification.Disponible en línea en:<http://www.elearningpost.com/articles/archives/interactive_visual_explainers_a_simple_classification/>
Bibliografía del apartado 12
Costa, J. (1998). La esquemática. Barcelona: Ed. Paidós
Tufte, E. R. (1997). Visual Explanations. Connecticut: Graphics Press.
Tufte, E. R. (1990). Envisioning information. Connecticut: Graphics Press.
Wileman, R. E. (1993). Visual communicating. Nueva Jersey: Educational Technology Publications.
Bibliografía del apartado 13
Costa, J. (1998). La esquemática. Barcelona: Ed. Paidós.
Tufte, E. R. (1997). Visual Explanations. Connecticut: Graphics Press.
Tufte, E. R. (1990). Envisioning information. Connecticut: Graphics Press.
Wileman, R. E. (1993). Visual communicating. New Jersey: Educational Technology Publications.
Bibliografía del apartado 14
Barbieri, D. (1998). Los lenguajes del cómic. Barcelona: Paidós.
Don, A. (1990). "Narrative and the Interface". En:The art of human-computer interface design. Addison-Wesley Publishing.
Gombrich, E. (1994). Instrucciones gráficas. En:Imagen y conocimiento. Barcelona: Ed. Crítica.
Rajamanickam, Venkat (2001). Visual Design for Instructional Content (Part II).Disponible en línea en:<http://www.elearningpost.com/articles/archives/visual_design_for_instructional_content_part_ii/>
Wroblewski, Luke (2003). Visible Narratives: Understanding Visual Organization.Disponible en línea en:<http://www.boxesandarrows.com./view/visible_narratives_understanding_visual_organization