Identificar los Identificar los elementos de diseño elementos de diseño

multimediamultimedia

Unidad 2Unidad 2

2.1 Mejores prácticas para el diseño de

contenido multimedia

Unidad 2Unidad 2

Mejores prácticasMejores prácticas

Existen diferentes métodos para crear el diseño de contenido, estos varían según la forma de trabajo del autor.

Según nuestra experiencia le recomendamos llevar a cabo estas prácticas para el diseño de contenido multimedia:

Mejores prácticasMejores prácticas

1. Después de realizar la entrevista, desarrolla un boceto en papel que refleje objetivo, audiencia y propósito.

2. Realiza un diagrama que refleje la estructura del sitio. Te permitirá ver las dimensiones del sitio y su “navegabilidad”

Mejores prácticasMejores prácticas

3. Una vez que sean aprobados el boceto y la estructura estará listo para realizar:

Plan de trabajoCotizaciónGuía de diseño

Mejores prácticasMejores prácticas

4. Optimización de recursos: Prepare sus composiciones e imágenes así como el sonido y video para la presentación. Considerando los formatos, tamaños de imágenes, colores, etc. Optimice todas las fotografías, sonidos y videos antes de iniciar el armado.

Mejores prácticasMejores prácticas

5. Crear el diseño estático con todos los elementos que va a requerir en la elaboración de su proyecto. Crear plantillas y estilos (css), paleta de colores, etc.Las imágenes deben ser optimizadas para ocupar exáctamente el tamaño requerido. No hay que agrandarlas ni reducirlas.

Mejores prácticasMejores prácticas

6. Prepare sus textos en editores de texto y sus fuentes que utilizará.

Nota: Establecer con el cliente si sus textos necesitan corrector de estilo o de ortografía. Muchas veces piensan que es nuestra “responsabilidad” hacerlo.También establecer el número de cambios a los textos.

Mejores prácticasMejores prácticas

7. Genere templates para las páginas interiores y para la principal con los espacios necesarios para imágenes, texto y videos.

8. Cree todos los elementos interactivos que planeo desde el principio, aunque en este punto seguramente le surgirán ideas para enriquecer el diseño con la aplicación de Flash.

Mejores prácticasMejores prácticas

9. Organice todos los elementos para que tengan la sincronía adecuada. Prueba y error es la mejor práctica.

10. Añada el sonido y video en los espacios pensados para estos elementos.

11. Prepare el archivo para la publicación en los diferentes formatos requeridos.

12. Publique su archivo y pruébelo.

Principios de diseño

Unidad 2Unidad 2

Fundamentos de diseñoFundamentos de diseño Según el autor Wucius Wong. (1992) en su

obra Fundamentos del Diseño, “un buen diseño es la mejor expresión visual de la esencia de «algo», ya sea esto un mensaje o un producto. Para hacerlo fiel y eficazmente, el diseñador debe buscar la mejor forma posible para que ese «algo» sea conformado, fabricado, distribuido, usado y relacionado con su ambiente. Su creación no debe ser sólo estética sino también funcional, mientras refleja o guía el gusto de su época.”

Fundamentos de diseñoFundamentos de diseño

La base de un buen diseño de página es usar los elementos del diseño y su aplicación razonada en la forma de los principios del diseño.

Estos principios de diseño son: Balance o equilibrio, unidad, énfasis y color.

Balance o equilibrio

El equilibrio debe existir entre los diferentes elementos que componen la página. Imágenes y texto, elementos grandes y pequeños, zonas oscuras y claras, etc., deben estar balanceadas de forma que resulte atractiva, logrando enfocar la atención del usuario sobre aquellos elementos de mayor interés.

Balance o equilibrio

Existen tres tipos de balance para diseñar páginas:1. Balance simétrico2. Balance asimétrico3. Balance de simetría radial

Balance o equilibrio

“La simetría es la exacta correspondencia de todas las partes de una figura respecto de un centro, un eje o un plano. Se puede representar en tres formas horizontal, vertical y radial”. Wikipedia. Simetría. [En línea] http://es.wikipedia.org/wiki/Simetr%C3%ADa, 20 de Marzo 2010.

Balance o equilibrio

Simetría horizontal Simetría vertical Simetría Simetría horizontal Simetría vertical Simetría radialradial

AsimetríaAsimetría

“La asimetría se refiere a la no simetría, es decir, a la propiedad de determinados cuerpos, funciones matemáticas y otros tipos de elementos en los que, al aplicarles una regla de transformación efectiva, se observan cambios respecto al elemento original”. Wikipedia. Asimetría. [En línea] http://es.wikipedia.org/wiki/Asimetr%C3%ADa, 20 de Marzo 2010.

AsimetríaAsimetría

Asimetría horizontal Asimetría vertical Asimetría Asimetría horizontal Asimetría vertical Asimetría radialradial

ÉnfasisÉnfasis

El énfasis es una forma de distinguir algo dentro de un elemento. Un ejemplo de esto es lo que sucede con este texto, donde los títulos se encuentran resaltados así como algunas palabras o frases.

Color Los colores obtenidos naturalmente por

descomposición de la luz solar o artificialmente mediante focos emisores de luz de una longitud de onda determinada se denominan colores aditivos.

Los colores aditivos son los usados en trabajo gráfico con monitores, ya que, el monitor produce los puntos de luz partiendo de tres canales, rojo, verde y azul. Por este motivo, el modelo de definición de colores usado en trabajos digitales es el modelo RGB (Red, Green, Blue).

Colores aditivos o de luzColores aditivos o de luz

ColorColor

La intensidad de cada uno de los componentes se mide también en una escala que va del 0 al 255. Sin embargo utiliza una codificación hexadecimal (16 digítos), lo que le permite representar el número 255 en base decimal con solo dos dígitos en base hexadecimal. En el sistema de numeración hexadecimal, además de los números del 0 al 9 se utilizan seis letras con un valor numérico equivalente; a=10, b=11, c=12, d=13, e=14 y f=15.

ColorColor

ColorColor

Si el cliente no cuenta con una paleta Si el cliente no cuenta con una paleta de colores, establezca una, de de colores, establezca una, de preferencia de colores armonizados.preferencia de colores armonizados.

Prepare su muestrario de colores con Prepare su muestrario de colores con ellos. Genere un archivo y una ellos. Genere un archivo y una página muestra, por ejemplo:página muestra, por ejemplo:

ColorColor