DISEÑO DE

APLICACIONES
MULTIMEDIA
ING. LIZETH CARLA SUNAVI MOREJÓN

PROYECTO MULTIMEDIA

• Diseño de la • Diseño
información instructivo
• Diseño de la • Diseño comercial
interacción o publicitario
• Diseño de la • Diseño artístico
presentación

1
DISEÑO DE PROYECTOS MULTIMEDIA
Diseño de la Diseño de la Diseño de la
Fase
información interacción presentación
Estructurar los Diseñar la navegación Diseñar la interfaz
Objetivo contenidos en entre las pantallas gráfica de cada
secciones pantalla
Diagrama de - Diagrama de Prototipo de
contenidos navegación pantalla
(estructura (documento
Documento a
jerárquica de los - Guión técnico gráfico con la
entregar
contenidos) (texto, imagen e apariencia de cada
interactividad de cada pantalla)
pantalla) 3

DISEÑO DE LA INFORMACIÓN

TAREAS:

• Elaborar una lista de contenidos agrupados

temáticamente
• Determinar la estructura de los contenidos
• Producir un diagrama de flujo del contenido
• Pensar qué medios para qué tipos de
contenidos
4

2
LISTA DE CONTENIDOS AGRUPADOS TEMÁTICAMENTE

• Desglosar el contenido en una lista de contenidos, tan

amplia como sea posible
• Organizar la lista de temas en agrupaciones temáticas
o categorías
• Jerarquizar esas categorías de forma que se adecuen a
las expectativas del usuario final

DISTRIBUIR LOS CONTENIDOS EN NIVELES JERÁRQUICOS

Contenidos accesibles desde el primer

nivel

Contenidos subordinados a otros

contenidos

Cantidad de niveles permitidos

6

3
DISTRIBUIR LOS CONTENIDOS EN NIVELES JERÁRQUICOS
La profundidad de Implicaciones en la
la información navegación

Secuenciar los contenidos en

Presentar un material pantallas y niveles de
atendiendo a diferentes tipos profundidad
de usuarios, con diferentes
necesidades o inquietudes o Determina los accesos a la
con diferentes conocimientos información
previos
Estructura del entorno

Sistemas de navegación
7

ESTRUCTURAS BÁSICAS PARA REPRESENTAR MODELOS DE

INFORMACIÓN

Estructura lineal Estructura paralela o simétrica Estructura jerárquica

Estructura hipertextual Estructuras híbridas

8

4
DECIDIR QUÉ MEDIOS PARA QUÉ CONTENIDOS

Sonido

Animaciones Video

Imágenes

Texto

TEXTO
Los textos deben
ser breves, claros
y directos

Repartir la información por

todo el entorno, evitando la
acumulación en una pantalla

Debe haber
vínculos entre
conceptos

Los textos deben ser

breves, claros y directos 10

5
LA IMAGEN FIJA

Fotografías Ilustraciones

Mapas Esquemas

Tablas Íconos

11

FUNCIONES DE LAS IMÁGENES

• Estético-motivadora
• Explicativa
• De demarcación de temáticas
• De refuerzo

12

6
VIDEOS

Mostrar escenarios
Funciones:

Mostrar objetos reales

en movimiento
Demostrar algo en
funcionamiento
Trabajar actitudes o
valores

13

ANIMACIONES

• Mostrar conceptos o ideas

Funciones

difíciles
• Promover la comprensión
de un proceso que no puede
ser filmado
• Ilustrar o entretener
mediante una secuencia
• Enfatizar algún aspecto del
contenido
14

7
SONIDOS
Locución

Música de fondo

Efectos especiales
Tipos de
sonidos Botones o zonas activas
con efectos de sonido
15

CRITERIOS PARA EL DISEÑO DE LA INFORMACIÓN

Establecer prioridades en el contenido

Favorecer la simplicidad
Pensar en una organización atractiva del
contenido a los ojos del usuario.
Comunicar con claridad.
El contenido debe despertar la atención.
Evitar la acumulación de información en cada
pantalla.
16

8
DIAGRAMA DE CONTENIDO
Esquema donde queda plasmada la
clasificación de los contenidos del
producto

• Los contenidos deben coincidir aproximadamente

con los que se determinaron en la propuesta del
producto final
• Se ubican los distintos contenidos de forma
jerárquica para determinar los principales apartados
en que se divide el producto
17

DISEÑO DE INTERACCIÓN

Tareas Críticas
El diseño del entorno multimedia en conjunto
• Navegación
• Rutas de acceso

Diseño de la estructura de la interfaz de pantalla

• Sucesos
• Controles de cada pantalla
18

9
DISEÑAR LA NAVEGACIÓN Y LAS RUTAS DE ACCESO

Permite a los usuarios

Se basa en el diagrama de
explorar y manipular el
flujo de los contenidos
contenido

La cantidad de interacción
está en función del tipo de
contenido del producto

19

RUTAS DE ACCESO

Líneas
Menús o
cronológi- Iconos
listas.
cas

Vínculos
Mapas de
Botones en el
imágenes
contenido

20

10
DISTRIBUCIÓN DE LOS ELEMENTOS DE LAS PANTALLAS

Distribuir espacios en la
pantalla donde ubicar los
elementos.
Normalmente los
diseñadores trabajan
siempre a partir de retículas
o cuadrículas de la pantalla,
que ofrecen puntos físicos
de referencia donde ubicar
el contenido.
21

DEFINIR LOS SUCESOS DE CADA PANTALLA Y LA FORMA DE

CONTROLARLOS

Hecho que Resultado de

Suceso ocurre en una la acción del
pantalla usuario

22

11
LOS SUCESOS PUEDEN SER CAUSADOS POR DIVERSIDAD DE
ACCIONES DEL USUARIO
Acciones

• Pasar el cursor por encima

• Hacer clic encima de un elemento o un
botón
• La carga de una página
• Presionar una tecla
• Arrastrar un elemento

23

ASIGNAR CONTENIDO A CADA UNA DE LAS PANTALLAS

En función del nivel de

conocimientos que tengan
los autores acerca del
diseño de productos
multimedia, se les puede
entregar una plantilla del
guión técnico para que
procedan a la redacción y
asignación del contenido a
cada una de las pantallas.
24

12
CRITERIOS DE DISEÑO DE LA INTERACCIÓN

Entre la convención y la
innovación

El diseño del producto debe ser

simple, coherente e intuitivo

La creatividad y la originalidad
deben estar también presentes
en el diseño
25

USABILIDAD

Diseñar teniendo en
cuenta la usabilidad de un
producto es diseñar
siendo consciente de la
simplicidad y facilidad de
comprensión en el uso del
mismo

26

13
IDEAS CLAVE EN EL DISEÑO DE PANTALLA

El diseño de la interfaz

La interacción entre el
usuario y el ordenador

El diseño grafico de la interfaz

27

AL PRODUCIR UNA WEB SE DEBE CONSIDERAR:

• Contenidos alternativos que puedan suplir los contenidos

audiovisuales que se presenten en el producto

• Que la información puede ser igualmente comprendida

sin necesidad del color

• Información que oriente a los usuarios, como nombrar los

marcos utilizando una nomenclatura comprensible.

28

14
 COHERENCIA CONCEPTUAL Y MECÁNICA

Consiste en la
armonía entre los
Coherencia elementos del
producto

Puede ser:

Visual Conceptual Mecánica

29

ANÁLISIS DE COHERENCIA VISUAL Y CONCEPTUAL

a)
b)

30

15
METÁFORAS

Es un entorno significativo
o un objeto relevante que
se utiliza para organizar la
información de la pantalla
con el fin de sugerir una
comparación y facilitar la
comprensión del entorno y
la navegación

31

EN LA NAVEGACIÓN MINIMIZAR:

El viaje

La La
redundancia profundidad
32

16
CARACTERÍSTICAS DE UN SISTEMA DE NAVEGACIÓN
Orienta a
los
usuarios
Facilita la No es
búsqueda aleatorio
Es claro
en los
apartados No
Es requiere
consultas
intuitivo al mapa de
la web

33

DISPOSICIÓN DE LOS ELEMENTOS EN LAS PANTALLAS

La zona de visualización de un documento en ordenadores,
es de hasta 595 píxeles de ancho por 295 de alto.
Para las versiones impresas no debe superar los 535
píxeles de ancho por 295 de alto.
La funcionalidad, la facilidad y la velocidad de navegación
mejoran si se aplica el mismo sistema reticular a todo el
producto o web.
La ubicación de los elementos debe de mantener la
coherencia en todas las pantallas.
La utilización de marcos es una buena idea para mostrar
toda la información de golpe y dar unidad a la navegación. 34

17
UBICACIÓN DE LAS BARRAS DE NAVEGACIÓN

Lo habitual es colocarlas a la
izquierda de la pantalla

Cuando se requieren dos barras de

navegación, se aconseja disponerlas
una verticalmente y la otra
horizontalmente en la parte superior

El espacio de pantalla destinado a las

barras de navegación no debería
superar el 20% del total.
35

UBICACIÓN DE LAS BARRAS DE NAVEGACIÓN

Mantener en los márgenes

los botones de navegación,
los apartados secundarios,
los menús, los enlaces, etc.

Se desaconseja
totalmente modificar la
ubicación de las barras de
navegación en distintas
pantallas según el nivel de
la jerarquía en que se
sitúen.
36

18
CONTENIDOS

Pensar en el conjunto del

producto. Todos los elementos
deben funcionar como un
sistema unificado

Disponer en el centro
superior de la pantalla el
contenido que queremos que
destaque
37

DISEÑO DE LOS CONTROLES

• Interacción • Los controles
necesaria deben ser
visualmente
activos

• No deben ser • No deben ser • Deben

contradictorios excesivos ni reaccionar
redundantes rápidamente

38

19
DISEÑO DE LOS CONTROLES

39

ASIGNACIÓN DE CONTENIDO

• Evitar la acumulación de información.

• Decidir los niveles de acceso a la información:
• Usar enlaces cortos
• Siempre que sea posible, evitar el scroll vertical
en las páginas
• Los textos deben expresar una idea por párrafo

40

20
 GRACIAS

TAREAS EN PRODUCCIÓN MULTIMEDIA

• Audio, que puede ser tarea de los compositores y de

ingenieros de sonido y de grabación.
• Locuciones, en cuyo caso se requiere a un actor de doblaje.
• Animaciones, tarea del especialista en 2D y 3D.
• Vídeos, tarea de los especialistas en grabación, edición y
posproducción de vídeo digital

42

21
PRODUCCIÓN Y TRATAMIENTO
AUDIOVISUAL
Crear música de fondo y sonidos para juegos y películas
interactivos.
Dar soporte a diálogos y narraciones, o para crear voces de
personajes y objetos de dibujo.

Grabación de voces, efectos de sonido y sonidos de fondo, y la

traducción y/o adaptación de productos para mercados
extranjeros.
Crear ilustraciones animadas que ayudan a los usuarios a
visualizar procesos, ideas o conceptos abstractos difíciles de
comunicar por medio de palabras o con un dibujo o fotografía.
43

PROGRAMACIÓN

• Elaborar las aplicaciones • Analizar código y

necesarias para que toda buscar soluciones
la navegación y la técnicas creativas e
interacción del proyecto ingeniosas.
funcionen
adecuadamente.

44

22
INTEGRACIÓN

Ubicación en las
Maquetación
pantallas

Plantillas

45

CONTROL DE CALIDAD

• Comprobar el perfecto funcionamiento de todo el

producto
• Las revisiones no son solamente técnicas, sino que
conllevan también una revisión del contenido y de la
interacción del producto final
• Comprobar que todo funciona
• La práctica idónea consiste en que alguien que no ha
visto nunca el producto lo revise
46

23
PRODUCCIÓN

Realización del Desarrollo

diseño informático

Creación y edición
de contenido
textual y gráfico

47

24