producción y diseño multimedia
Post on 30-May-2018
224 Views
Preview:
TRANSCRIPT
-
8/14/2019 Produccin y diseo multimedia
1/49
LOGO
Tecnologas Multimedia Publicidad y RRPP
Profesor: Manuel Grtrudix
-
8/14/2019 Produccin y diseo multimedia
2/49
Mapa de contenidos
Diseo aplicado aldesarrollo deproductos de
comunicacin en Red
Claves de diseomultimedia
Diseo centradoen experiencia de
usuario
Reglas esencialesde usabilidad
Normas yrecomendaciones
de accesibilidad
Estndares yespecificaciones
bsicas
Principios de
composicin ydiseo visual
Consideracionesgenerales
Reglas y modelos
Diseo deInterfaces
Tipografa web
Tcnicas de
guionizacinmultimedia
Tcnicas deguionizacinespecficas
Modelos yherramientas
-
8/14/2019 Produccin y diseo multimedia
3/49
Claves dediseomultimedia
-
8/14/2019 Produccin y diseo multimedia
4/49
Primeras reflexiones
Dnde est el 1,25?
-
8/14/2019 Produccin y diseo multimedia
5/49
Diseo centrado en Experiencia de Usuario (EU)
-
8/14/2019 Produccin y diseo multimedia
6/49
Diseo centrado en Experiencia de Usuario (EU)
-
8/14/2019 Produccin y diseo multimedia
7/49
Lo maravilloso de la tecnologa es que la gente acaba
utilizndola para algo completamente distinto de su destinooriginal. Es este valor de lo inesperado lo que subyace a lacreatividad en la sociedad. (Manuel Castells, 2002: 249)
Una nueva ola en la forma de experimentar los productos, en este casoel software, que va ms all de la informtica. Estamos entrando en unmundo que cada vez est ms cerca de Minority report en cuanto a laexperiencia del usuario. (Forest Key, 2006)
Diseo centrado en EU
La Experiencia de Usuario es la sensacin, sentimiento,respuesta emocional, valoracin y satisfaccin del usuariorespecto a un producto, resultado del fenmeno deinteraccin con el producto y la interaccin con suproveedor. (Hassan y Martn)
-
8/14/2019 Produccin y diseo multimedia
8/49
Factores de la experiencia de usuario
Morville (2004)
-
8/14/2019 Produccin y diseo multimedia
9/49
Utilidad?
-
8/14/2019 Produccin y diseo multimedia
10/49
Utilidad
www.barrabes.com
www.diazdesantos.es
www.bankofamerica.com
http://www.barrabes.com/http://www.bankofamerica.com/onlinebanking/http://www.bankofamerica.com/onlinebanking/http://www.diazdesantos.es/http://www.barrabes.com/http://www.barrabes.com/ -
8/14/2019 Produccin y diseo multimedia
11/49
Utilizable?
-
8/14/2019 Produccin y diseo multimedia
12/49
Utilizable
www.seg-social.es
http://www.aeat.es
http://www.aeat.es/http://www.seg-social.es/ -
8/14/2019 Produccin y diseo multimedia
13/49
Encontrable?
-
8/14/2019 Produccin y diseo multimedia
14/49
Encontrable
www.20minutos.es
www.cope.es
www.guardian.co.uk
http://www.20minutos.es/http://www.cope.es/http://www.guardian.co.uk/http://www.20minutos.es/http://www.cope.es/ -
8/14/2019 Produccin y diseo multimedia
15/49
Adecuado
www.weyerhaeuser.com/
www.bowater.com/en/
www.bc.com/
http://www.weyerhaeuser.com/http://www.bowater.com/en/http://www.bc.com/http://www.bc.com/http://www.bowater.com/en/http://www.bc.com/http://www.weyerhaeuser.com/http://www.bowater.com/en/http://www.weyerhaeuser.com/ -
8/14/2019 Produccin y diseo multimedia
16/49
Deseable
http://www.audi.es
http://www.ayto-getafe.org
-
8/14/2019 Produccin y diseo multimedia
17/49
Accesible
http://www.once.es
http://www.sport.es/
http://www.sport.es/http://www.once.es/acc/cp/eventosHome -
8/14/2019 Produccin y diseo multimedia
18/49
Creble?
-
8/14/2019 Produccin y diseo multimedia
19/49
Valioso
www.efe.com
http://web.alerta-antivirus.es
A ibilid d W b bj ti
http://web.alerta-antivirus.es/portada/index.phphttp://www.efe.com/ -
8/14/2019 Produccin y diseo multimedia
20/49
Accesibilidad Web como objetivo Razones para construir una web para todos
Marco legal y normativo.
Factores socioeconmicos
Integracin e igualdad.
Dimensin moral
La expectativa del futuro.Dimensin prctica
La mitad de tus visitas a tu sitio provienen de Google, yGoogle slo ve lo que un ciego puede ver. Si tu sitio no esaccesible, tendrs menos visitas. Fin de la historia(Pemberton)
Difi lt d l l b
-
8/14/2019 Produccin y diseo multimedia
21/49
Dificultades en el acceso a la webQuines?
Dificultad Estable
Discapacitados Fsicos(Visuales, Auditivos,Motricos).
DiscapacitadosPsquicos.
DificultadTemporal
Dificultad
Tecnolgica
Dificultadderivada de la
Edad
-
8/14/2019 Produccin y diseo multimedia
22/49
Accesibilidad Pautas y regulacin
W3C (Consorcio para el desarrollo de estndares y especificacionestcnicas para el crecimiento de Internet)
WAI (Iniciativa para la Accesibilidad Web)
WCAG 1.0 (Guas para el Contenido Accesible en la Web 1.0) Pautas A, AA, AAA
Prioridad 1, 2 Y 3
NuevoWCAG 2.0 (Guas para el Contenido Accesible en laWeb 2.0)
Nueva estructura
Niveles de adecuacin 1, 2 y 3
P d t M lti di A ibl
-
8/14/2019 Produccin y diseo multimedia
23/49
Productos Multimedia Accesibles PAUTAS FUNDAMENTALES WCAG 1.0
1. Proporcionar alternativas equivalentes para el contenido visual y
auditivo2. No basarse slo en el color.
3. Utilizar hojas de estilo y hacerlo apropiadamente.
4. Identificar el idioma usado.
Crear tablas que se transformen correctamente.5. Asegurar la accesibilidad directa de las interfaces incrustadas.
6. Utilizar las tecnologas y pautas W3C.
7. Proporcionar informacin de contexto y orientacin.
8. Asegurarse de que los documentos sean claros y simples.9. No utilizar ventanas emergentes, o al menos hacerlas accesibles.
P d t M lti di A ibl
-
8/14/2019 Produccin y diseo multimedia
24/49
Productos Multimedia Accesibles PAUTAS FUNDAMENTALES WCAG 2.0
El contenido debe ser perceptible.
La interfaz y sus elementos deben ser operables.
El contenido y los controles deben ser
comprensibles.
El contenido debe ser suficientemente robustocomo para poder funcionar tanto con latecnologa web actual como con la futura,incluyendo tecnologa asistiva.
-
8/14/2019 Produccin y diseo multimedia
25/49
Ayudas Tcnicas Software y HardwareSoftware
Lectores de pantalla
JAWS (Comercial)
ORCA (Libre, Open Source)
Gnopernicus (Libre, Open Source)
Magnificadores de pantalla Sistemas de reconocimiento de voz
Teclados virtuales, emuladores de ratn, sistemas de barrido.
Hardware
Lnea Braille, Horno Fusser.
Bucle magntico.
Ratones, teclados, dispositivos para manejo del teclado,pulsadores,etc
http://www.freedomscientific.com/downloads/JAWS/JAWS-downloads.asphttp://www.gnome.org/projects/orcahttp://www.baum.ro/gnopernicus.htmlhttp://www.baum.ro/gnopernicus.htmlhttp://www.baum.ro/gnopernicus.htmlhttp://www.gnome.org/projects/orcahttp://www.freedomscientific.com/downloads/JAWS/JAWS-downloads.asp -
8/14/2019 Produccin y diseo multimedia
26/49
Estndares y especificaciones bsicas
Qu son los estndares web?
Conjunto de tecnologas y protocolos establecidos por elconsorcio W3C que definen, en relacin al contenidobasado en Web
Cmo se debe crear
Cmo se debe interpretar
Con la finalidad de que puedan estar siempre disponiblesy accesibles para todos los usuarios de la Red
-
8/14/2019 Produccin y diseo multimedia
27/49
Estndares y especificaciones bsicas
Por qu hay que disear con estndares?
Se trabaja ms rpido (aunque inicialmente lleve ms tiempoaprenderlos)
El mantenimiento es ms fcil, sencillo y rpido.
Es menos costoso
Centralizan el diseo (en pocos ficheros, fcilmente administrables)
Facilita el despliegue en cualquier SO, navegador, dispositivo(antiguo, actual o futuro) y salida (pantalla, impresin)
Ficheros ms optimizados (descarga y presentacin ms rpida)
Mayor accesibilidad y mejor experiencia de usuario
Facilitan el posicionamiento en los buscadores (marcado semntico) En consecuencia, maximiza la audiencia potencial
-
8/14/2019 Produccin y diseo multimedia
28/49
Principios decomposicin ydiseo visual
-
8/14/2019 Produccin y diseo multimedia
29/49
La comunicacin multimedia
VISUAL Fija
Movimiento
AUDITIVA Voz
Msica Efectos
INTERACTIVA
Operaciones Itinerarios
TEXTUAL Texto grfico Texto escrito
-
8/14/2019 Produccin y diseo multimedia
30/49
Cmo producimos comunicacin visual?
LenguajeAlfabeto Sintaxis ComunicacinComunicacin visual
Creacin de significado con el concurso de
Tcnicas visuales de composicin
http://www.eveo.com/http://ares.cnice.mec.es/infantil -
8/14/2019 Produccin y diseo multimedia
31/49
Qu son las tcnicas visuales de composicin?
Son un conjunto de estrategiasy tcnicas que nos permitenconstruir el mensaje visual ypredecir cul ser lareinterpretacin
estadsticamente posible delmensaje visual por parte delreceptor.
Supone la interaccin de paresopuestos e inseparables:
Contenido Forma
Creador Audiencia(Autolector)
Dodo Arslan.it
http://www.arslan.it/http://www.arslan.it/ -
8/14/2019 Produccin y diseo multimedia
32/49
Cules son esas tcnicas?
El mensaje visual se construyea travs de la definicin devarios factores que funcionanconjuntamente:
Textura Forma
Estructura
Mdulo
Movimiento
Color
Frank Gebhard - www.cpeach.de
http://www.cpeach.de/http://www.cpeach.de/http://www.cpeach.de/ -
8/14/2019 Produccin y diseo multimedia
33/49
Uso del color en el diseo web
-
8/14/2019 Produccin y diseo multimedia
34/49
Herramientas online para color web
Herramienta en lnea de Adobe: http://kuler.adobe.com/
http://kuler.adobe.com/ -
8/14/2019 Produccin y diseo multimedia
35/49
Modelos de diseo web
Di d I f
-
8/14/2019 Produccin y diseo multimedia
36/49
Diseo de Interfaces
Qu es una Interfaz? La Teora de los procesos de
interaccin persona-ordenador define la interfazde un sistema interactivo
como un dispositivotecnolgico que permiteuna interaccin amigablecon dicho sistema a travsde modelos de
representacin de distintotipo (textual, visual, sonoro,etc.)
Interfaz principal de la web Same
Interfaz principal de la web VeraT
i l d i f
-
8/14/2019 Produccin y diseo multimedia
37/49
Tipologa de interfaces
PARC User Interface (PUI)
Touchscreen user interface (TUI)
Interfaces 3D
Zooming user interface (ZUI)
Interfaces multimodales
Experiencia ms completa y real
Experiencia menos completa y real
d li i
-
8/14/2019 Produccin y diseo multimedia
38/49
GUIProceso de realizacin Procesos que intervienen en el desarrollo de una aplicacin
compuesta de diferentes interfaces de usuario:
1. Conceptualizacin: desarrollo de un prototipo de interfaz de usuario.
2. Creacin de una lnea de diseo: nmero reducido de pantallas (2 a 3) en lasque se definen los elementos grficos que caracterizarn a la aplicacin.
3. Diseo de todas y cada una de las pantallas (interfaces) que componen la
aplicacin.4. Programacin de efectos visuales (si los hubiera: gifs animados, Flash, etc.)
5. Programacin cliente: desarrollo de las interfaces previamente diseadas.
6. Programacin servidor: programacin de la/s interaccin/es prevista/s enla interfaz.
i f b l b i
-
8/14/2019 Produccin y diseo multimedia
39/49
Tipografa Web Reglas bsicas Bsicas
Legibilidad por encima de todo Usar fuentes sans-serif para mostrar en pantalla
Usar medidas en ems e integradas en CSS (nuncapxeles)
Alto contraste letra-fondo
Preferentemente, usar colores seguros para la web
Fuentes seguras: Arial, Verdana y Georgia.
No utilizar cursivas tiles
Los textos enlazados en azul y subrayados
-
8/14/2019 Produccin y diseo multimedia
40/49
Tcnicas de
guionizacinmultimedia
El guin en los procesos de creacin multimedia
-
8/14/2019 Produccin y diseo multimedia
41/49
El guin en los procesos de creacin multimediaFunciones
Recoge los resultados de las tareas de documentacin
Concreta la arquitectura de la informacin: Organizacin de la informacin y los contenidos
Recuperacin de la informacin
Estructura de la informacin e interaccin
Define la utilizacin de elementos multimedia
Define los elementos narrativos: Personajes
Accin
Espacio
Tiempo
Presenta la estructura narrativa
Sirve de orientacin a las tareas de produccin
Desarrolla la informacin, los contenidos, el relato.
Elaboracin de un guin multimedia
-
8/14/2019 Produccin y diseo multimedia
42/49
Elaboracin de un guin multimedia Fases de elaboracin
1. Documentacin previa > Ideacin
2. Seleccin de elementos multimedia
Ilustracin, animacin, fotografa, vdeo, msica,efectos sonoros, locuciones, textos escritos)
y su tratamiento.
3. Diseo de la arquitectura de la informacin:
Seleccin de contenidos
Definicin de la Interfaz (funciones y elementos) (*)
Definicin de la navegacin Estructura de contenidos:(*) Diagrama de arquitectura (*)
Elaboracin de un guin multimedia
http://ficheros_base/fichero07_multimedia/ej_aventura.pdfhttp://ficheros_base/fichero07_multimedia/ej_esquema_aventura.pdfhttp://ficheros_base/fichero07_multimedia/ej_esquema_aventura.pdfhttp://ficheros_base/fichero07_multimedia/ej_aventura.pdf -
8/14/2019 Produccin y diseo multimedia
43/49
Elaboracin de un guin multimedia Fases de elaboracin
4. Descripcin de existentes: escenarios,
personajes y elementos grficos de la interfaz.
5. Descripcin de la accin y la interaccin: (*) (*)
Estructura: bloques / secuencias / escenas / planos Variables: tareas de fondo; eventos interaccin
(si...entonces)
Contenidos: accin y dilogos -locuciones-.
T i d i lti di
http://ficheros_base/fichero07_multimedia/ej_esquema_navegacion.pdfhttp://ficheros_base/fichero07_multimedia/ej_esquema_hipermedia.pdfhttp://ficheros_base/fichero07_multimedia/ej_esquema_hipermedia.pdfhttp://ficheros_base/fichero07_multimedia/ej_esquema_navegacion.pdf -
8/14/2019 Produccin y diseo multimedia
44/49
Tcnicas de guin multimedia
Storyboarding
T i d i lti di
-
8/14/2019 Produccin y diseo multimedia
45/49
Tcnicas de guin multimedia
Wireframing
M d l d i lti di
-
8/14/2019 Produccin y diseo multimedia
46/49
Modelos de guin multimedia
Estructura de navegacin, prototipado
A li i l d i l ifi i
-
8/14/2019 Produccin y diseo multimedia
47/49
Aplicaciones para el proceso de guin-planificacin
Tipologa de aplicaciones
AplicacionesProduccinmultimedia
Creacin(Guin)
Planificacinde la
Produccin
Previsiny seguimiento
produccin
Integrales
EspecializadasFlujo de
trabajo
Creacin deStory Board
Referencias
-
8/14/2019 Produccin y diseo multimedia
48/49
Referencias
Claves de diseo
Stanford Web Credibility Research (http://www.webcredibility.org) Internet System Consortium (http://www.isc.org/index.pl?/ops/ds/hosts.php)
WebbyAwards (http://www.webbyawards.com)
Conceptos sobre usabilidad (http://ingenieriasimple.com/usabilidad/)
Usabilidad
Useit.com (Jakob Nielsen) Usarte.org
No solo usabilidad
Accesibilidad
W3C, FUNDACIN ONCE, SIDAR, FIAPAS , CEAPAT, CESYA, RPD (Real
Patronato para la Discapacidad)
Herramientas
BrowserShot, TypeTester, Kuler
LOGO
http://www.webcredibility.org/http://www.isc.org/index.pl?/ops/ds/hosts.phphttp://www.webbyawards.com/http://ingenieriasimple.com/usabilidad/http://www.useit.com/http://www.nosolousabilidad.com/http://browsershots.org/http://www.typetester.org/http://kuler.adobe.com/http://kuler.adobe.com/http://www.typetester.org/http://browsershots.org/http://www.nosolousabilidad.com/http://www.useit.com/http://ingenieriasimple.com/usabilidad/http://www.webbyawards.com/http://www.isc.org/index.pl?/ops/ds/hosts.phphttp://www.webcredibility.org/ -
8/14/2019 Produccin y diseo multimedia
49/49
LOGO
Tecnologas Multimedia Publicidad y RRPP
top related