Gui proyecto multimedia

GUI/PROYECTO MULTIMEDIA
Graphical User Interfaz

Interfaz gráfica de usuario

GUI

En el contexto del proceso de interacción persona-ordenador, la
interfaz gráfica de usuario (IGU), es el artefacto tecnológico de un
sistema interactivo que posibilita, a través del uso y la representación
del lenguaje visual, una interacción amigable con un sistema
informático.

La interfaz gráfica de usuario es un tipo de interfaz de usuario que utiliza un
conjunto de imágenes y objetos gráficos (iconos, ventanas, tipografía) para
representar la información y acciones disponibles en la interfaz.
Habitualmente las acciones se realizan mediante manipulación directa
para facilitar la interacción del usuario con la computadora.

GUI

Ejemplo de interfaz GUI

• Escritorio de Windows
• Escritorio de MAC
• X-Windows de Linux
• Redhat Linux 5.0

GUI
Precursor:


Nace de la mano de Douglas C.
Engelbart.

En 1960 desarrolló la primera interfaz
gráfica en los laboratorios de XEROX.

Douglas C. Engelbart

Este desarrollo no era comercial, se
encontraba dentro los proyectos de los
laboratorios de de investigación de
Xeros, hasta 1981

PROYECTO MULTIMEDIA

Esta basado en la integración de disciplinas

TECNOLOGÍAS DE PROCESADO
DE TEXTOS TECNOLOGÍAS SOBRE GRAFISMO TECNOLOGÍAS SOBRE
DIGITAL VIDEO DIGITAL

TECNOLOGÍAS SOBRE TECNOLOGÍAS SOBRE
SONIDO DIGITAL PROGRAMACIÓN

MULTIMEDIA ( DISCIPLINAS INTEGRADAS )
PM
- TRATAMIENTO DE TEXTOS
- CONFIGURACIÓN DE HIPERTEXTO
- TEXTO CONFIGURADO CON BASES DE DATOS
- TEXTO CON ANIMACIÓN
TECNOLOGÍAS DE PROCESADO
DE TEXTOS
- GRAFISMO VECTORIAL 2D + 3D

- GRAFISMO MAPA DE BITS

TECNOLOGÍAS SOBRE GRAFISMO
DIGITAL - MONTAJE DIGITAL SECUENCIAS
- SINCRONIZACIÓN CON SONIDO
- INTEGRACIÓN GRÁFISMO DIGITAL
EN EL MISMO ENTORNO
TECNOLOGÍAS SOBRE
VIDEO DIGITAL
- MONTAJE DIGITAL SECUENCIAS SONIDO
- SINCRONIZACIÓN CON GRAFISMO E IMAGEN
- COMPOSICIÓN Y EDICIÓN DIGITAL DE MÚSICA
TECNOLOGÍAS SOBRE
SONIDO DIGITAL

- MONTAJE DIGITAL DE CONTENIDOS
- GESTIÓN DE CONTENIDOS ( VIDEO / GRÁFICO/ TEXTO)
- CONFIGURACIÓN DE FORMATOS / SISTEMAS
TECNOLOGÍAS SOBRE
PROGRAMACIÓN

PROCESO ELABORACIÓN PROYECTO MULTIMEDIA

Diseño de Diseño de Diseño de
la Información la interacción la presentación

- Definir el producto ( Artístico, - Definir la Navegación ( Tipos de - Definir Estilo
Comercial,......) Interacción, Controles...)
- Crear una beta o prototipo
- Organizar el Contenido en - Trazar un Guión
Diagramas de Flujos.


Diseño de la Información

Proceso de Clasificar sus objetivos comunicativos y organizar la información. > IDEA

1.A Organización del información. ( listas de Contenidos, plan de proyecto,
Crear un diagrama de Flujos ...)
2.A Planificación de recursos ( Presupuesto /recursos/Tiempo)
3.A Elección de la Herramienta. ( Online /Off line)
4.A Público ( necesidades e intereses del público)
5.A Objetivos. ( ¿ Que quiero Conseguir?)




- Objetivos del Diseño:
El Usuario quiere:
•1. APRENDER - Ser claro, sencillo,directo,reiterativo,utilizar pruebas y correcciones.
•2. DIVERSIÓN - Ser Variado, aleatorio e ingenioso
•3. COMPRENSIÓN - Explicaciones conceptuales , ilustraciones, gráficos, etc....
•4. EXPERIMENTACIÓN — Alto nivel de Interacción, control del usuario sobre acciones
y hechos, imágenes y sonidos
•5. ACTUAR O COMPRAR.Opciones claras, teléfonos gratuitos, formularios claros de
pedido interactivo.




-Objetivos del Diseño:
-Entorno:
- Público: A que usuario se dirige (Edad, Género,etc...)
- Utilización: Uso doméstico, empresa, en grupo, solitario...
- Entorno: Ruidoso , Silencioso,etc...




-Objetivos del Diseño:
-Entorno:
-Diagrama de Flujos:
Es un esbozo presentando como diagrama, con líneas que
muestran las rutas de acceso entre sus partes.
Diseño del Diagrama:
- El Contenido, organización y estructuras de la información.
- La utilización: Categorías temáticas y las rutas de acceso

La sencillez, diseño claro. Sencillez-Principio de economía de Guillermo de Ockham, SXIV)



-Diagramas de Flujos:



Diseño de la interacción

La interacción en un proyecto
multimedia, significa que el usuario, no
el diseñador controla la secuencia, la
velocidad y lo más importante, lo que
mirar y lo que ignorar.


TAREAS DEL DISEÑO

-Crear un sistema, guía para orientar al usuario.

1
-Diseñar la navegación y rutas.
-Definir pantallas.
-Diseñar Controles para la interacción (botones)
-Crear un guión.

Todo esto esta basado en el diagrama de Flujos


TAREAS DEL DISEÑO -Definir pantallas.

1
AREA DE TITULARES

AREA DE INFORMACIÓN
INTERACTIVA

AREA DE NAVEGACIÓN


TAREAS DEL DISEÑO

1


PUNTOS ATENER EN CUENTA

2
- Motivar para tener una experiencia .
- Crear un viaje interesante
- Dar controles a los usuarios que les permitan navegar.
- Hacer una experiencia clara e intuitiva.


ORIENTACIÓN

3
Problemática de la frustración (“esto no lo puedo manejar”)
Esto se resuelve orientándolos desde el principio.

Consejos :

- Primeras pantallas proporcionaran al usuario información sobre
lo que va a hacer, ver o experimentar.
- Necesita un equilibrio de imágenes y palabras que le
proporcionen una guía.


MAPAS DE IMÁGENES Y METÁFORAS. ( General)

4
1._Mapas . Tiene dos propósitos :
- Imágenes que representan un contenido.
- Imágenes que conducen hacia él.

2._ Metáforas.
Tipo de imágenes , estas representan información.
Su función es crear significado.
( Ej: edificio= empresa, mapa= localización, impresora= imprimir)

Las metáforas funcionarán si el público esta familiarizado con
ellas y con el contenido conceptual de la misma.


MAPAS DE IMÁGENES Y METÁFORAS. -CREACIÓN DE ICONOS

Teorías de la semiótica que Marcus (*) aplica como guía para

4b
cuatro niveles en el diseño de iconos .

1. Cualidades léxicas: Marcas generadas por computadora –
silueta de píxeles, color, brillo, parpadeo.
2. Sintaxis. Apariencia y movimiento, líneas , patrones, partes
modulares, tamaño, forma.
3. Semántica. Objetos representados –concreto frente
abstracto, parte frente a todo
4. Pragmática. Legibilidad, utilidad, facilidad para identificarlo,
facilidad para memorizarlo y agradabilidad a nivel global
5. Dinámica. Predisposisción a los clics. Resaltar, arrastrar,
combinar.

(*) Marcus, Aaron, Graphic Design for electronic documents and User Interfaces, ACM, New York, 1992


NAVEGACIÓN
Tipos de Estructuras

5
A) Jerárquica B) lineal C) lineal con jerarquía D) red


NAVEGACIÓN

5

La estructura jerárquica, es la típica estructura de
árbol, en el que la raíz es la hoja de bienvenida,
esta hoja se puede también sustituir por la hoja de
contenido, en la que se exponen las diferentes
secciones que contendrá nuestro sitio.
La selección de una sección nos conduce asimismo
a una lista de subtemas que pueden o no dividirse.


NAVEGACIÓN

5

La estructura jerárquica, es la típica estructura de
árbol, en el que la raíz es la hoja de bienvenida,
esta hoja se puede también sustituir por la hoja de
contenido, en la que se exponen las diferentes
secciones que contendrá nuestro sitio.
La selección de una sección nos conduce asimismo
a una lista de subtemas que pueden o no dividirse.

Este tipo de organización permite al lector
conocer en qué lugar de la estructura se
encuentra, además de saber que, con forme se
adentra en la estructura obtiene información más
específica y que la información más general se
encuentra en los niveles superiores.


NAVEGACIÓN

5

La estructura lineal es la más simple de todas, la
manera de recorrerla es la misma que si
estuviésemos leyendo un libro, de manera que
estando en una página, podemos ir a la siguiente
página o a la anterior.

Esta estructura es muy útil cuando queremos que
el lector siga un camino fijo y guiado, además
impedimos que se distraiga con enlaces a otras
páginas.

Por otra parte podemos causar a lector la
sensación de estar encerrado si el camino es
muy largo o poco interesante.

Este tipo de estructura sería válido para tours de visita guiada.


NAVEGACIÓN

5

Este tipo de estructura es una mezcla de la dos
anteriores, los temas y subtemas están
organizados de una forma jerárquica, pero uno
puede leer todo el contenido de una forma lineal si
se desea.

Esto permite tener el contenido organizado
jerárquicamente y simultáneamente poder acceder
a toda la información de una manera lineal como si
estuviésemos leyendo un libro.


NAVEGACIÓN

5

La estructura de red es una organización en la que
aparentemente no hay ningún orden establecido,
las páginas pueden apuntarse unas a otras sin
ningún orden aparente.

Este tipo de organización es la más libre, pero
también es la más peligrosa ya que si no se
informa al lector de en dónde se encuentra, puede
perderse o puede no encontrar lo que anda
buscando o no llegar a ver lo que le queremos
mostrar.


NAVEGACIÓN

5

Por eso es muy recomendable asociar la
estructura de las páginas con alguna estructura
conocida, como por ejemplo la de una ciudad.

( asociar la metáfora creativa de la
que partimos con la estructura ).


NAVEGACIÓN

Claves:

5
Minimizar el Viaje.
Crear el camino mas corto y sencillo entre dos puntos cualesquiera.
Minimizar la profundidad.
Crear una jerarquía con el menor número posible de niveles.
Minimizar la redundancia .
Evitar crear caminos múltiples al mismo lugar desde la misma
pantalla.


ACCESOS DIRECTOS

Proporcionar el camino más sencillo entre dos puntos

6
cualesquiera del producto

Tipos ( Menús , listas, líneas cronológicas, iconos, mapas,
botones...)


NIVELES DE ACCESO

7
-Acceso a un tema nuevo, puede ser un salto de magnitud y
cambio de escenario completo.
-Acceso a un mismo tema: Cambios Sutiles

Para crear una guía utilizar un anclaje visual
- Titulares, fondos y otros gráficos.


UTILIZACIÓN - Quitar obstáculos.
- No ser reiterativo con los gráficos y los textos en la misma pantalla.

8
Deje que el usuario pique lo que quiera.
- Proporcione información:
-Inmediata y apropiada, subrayar los textos los elementos, sonidos,
etc....
- Ser Explicito:
-Hacer obvios los elementos lo que se puede actuar y los que no.
- Ser Flexible
-Deje que usuario use atajos o pueda salir cuando quiera.


GUION:

9
-Es una herramienta que hará que todo el grupo que trabaja en el
proyecto funcione de acuerdo al proyecto.
-En el se proyectaran toda la navegación, diseño e interacción de la
pieza final.


EN RESUMEN TEORIA NORMAN, DONALD (1)

ETAPAS DE ACCIÓN, ORGANIZADAS CICLICAMENTE COMO UN MODELO
EXPLICATIVO DE LA INTERACCIÓN PERSONA - COMPUTADORA

10
1. Formulación del Objetivo
2. Formulación de la intención
3. Especificación de la acción
4. Ejecución de la acción
5. Interpretación del estado del sistema
6. Evaluación del resultado

(1) Norman, Donald A.The Psychology of Everyday things, Basic Books, New York, 1988


TAREAS DEL DISEÑO
MAPAS DE IMÁGENES Y METÁFORAS.

PUNTOS ATENER EN
CUENTA
ORIENTACIÓN

NAVEGACIÓN

ACCESOS DIRECTOS
NIVELES DE ACCESO

UTILIZACIÓN GUION


COMERCIAL


- Definir el producto ( Artístico, - Definir la Navegación ( Tipos de - Definir Estilo
Comercial,......) Interacción, Controles...)
- Crear una beta o prototipo
- Organizar el Contenido en - Trazar un Guión
Diagramas de Flujos.


Metodología de desarrolllo y
diseño de multimedia

DISEÑO EDUCATIVO DISEÑO INTERACTIVO

Requerimientos
funcionales

ANÁLISIS Metas Metáfora y
educativas paradigmas
Análisis del
público Objetivos de Diseño de
aprendizaje interface
Análisis del
REUNIÓN ambiente Decisiones Actividades de
INICIAL Manejo
de contenido aprendizaje
Análisis del DESARROLLO PRODUCCIÓN
contenido Mapas de Preproducción
Modelo Guión y
cognoscitivo Navegación de A/V
Análisis del diagrama de flujo
sistema Pantallas
Prototipo de esquema Postproducción
en papel Guiones de A/V
Prototipo
de trabajo
Integración y
desarrollo autoral Pruebas
Alfa
LANZAMIENTO

Pruebas Evaluación
REVISIÓN Beta general

Las líneas verticales indican
que el orden recomendado
es de arriba hacia abajo

Las cajas apiladas indican
eventos que pueden ocurrir
simultáneamente dentro de una
fase.


ARTÍSTICO EXPERIMENTAL




COMERCIAL



PUNTOS A POTENCIAR DE FORMA EXPERIMENTAL
NOTA: Depende de la Naturaleza del Proyecto



Idea - discurso

La efectividad del discurso depende
de la funcionalidad de la pieza sobre
ese discurso.



Idea - discurso Concepto navegación Elemento /navegación



La relación del concepto navegación se da por una serie de pasos y características




1- REFLEXIÓN
2 - ANALISIS DE LAS FORMAS
3 - DOCUMENTACIÓN
4 - ESTRUCTURAS
( creación de diagramas de flujos adaptados a la forma)

Ej: pueden ser debididas en :
- nano estructuras (célula)
- macro estructuras ( tierra)



4 - ESTRUCTURAS - Clasificación

Estructuras Naturales ( Bionavegación)
Aquellas creadas por la naturaleza sin la
intervención del Hombre
- Cuerpo, flora, estructuras minerales




Estructuras Naturales ( Bionavegación) Estructuras Artificiales
Aquellas creadas por la naturaleza sin la Creadas con la intervención del hombre.
- mapa de una ciudad.
- motores
- tipografía.




Estructuras Naturales ( Bionavegación) Estructuras Artificiales
Aquellas creadas por la naturaleza sin la Creadas con la intervención del hombre.
- mapa de una ciudad.
- motores
- tipografía.

Estructuras Abstractas Subjetivas
Aquellas que proviene del ámbito de los sentidos
-olores
-emociones.



Los elementos pueden ser:
Mapas imágenes:
- realístas ( capturadas del entorno sin intervenir en ellas, toma ) – Producen Veracidad
- generadas( mediante procesos digitales, 3D, retoque fotografito, collage Digital...)

Metáforas Texto
- generadoras de Sinónimos (¿papelera) - pasivo ( texto estándar)
- generadoras de Antitesis.(papelera ?) - interactivo ( hipertexto)

La relación entre Elemento/ navegación puede ser
Intuitiva
Provocada por otro elemento que llame al usuario ( “pulsa aquí”)
Provocada por : guión discurso ( ampliación del menú)
Relación por similitud ( color , forma...)

Gui proyecto multimedia

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Gui proyecto multimedia

Similar a Gui proyecto multimedia (20)

Más de Alberto Rojas

Más de Alberto Rojas (20)

Último

Último (20)

Gui proyecto multimedia