diseÑo grÁfico proyecto animado

66

Upload: mapugpk

Post on 27-Jun-2015

1.623 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 2: DISEÑO GRÁFICO PROYECTO ANIMADO

Diseño Gráfico

Es una profesión

cuya actividad industrial está dirigida

a idear y proyectar mensajes visuales, contemplando diversas necesidades

que varían según el caso: estilísticas, informativa, identificadoras, vocativos,

de persuasión, código, tecnológicas,

de producción, de innovación, etc.

Page 3: DISEÑO GRÁFICO PROYECTO ANIMADO

También se conoce con el nombre de diseño de comunicación visual", pues la actividad excede el campo de la industria gráfica, y los mensajes visuales se canalizan a través de muchos medios de comunicación, tanto impresos como digitales.

Page 4: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 5: DISEÑO GRÁFICO PROYECTO ANIMADO

Algunas clasificaciones difundidas del diseño gráfico son: el diseño gráfico publicitario el diseño editorial el diseño de identidad corporativa el diseño web el diseño de envase el diseño tipográfico la cartelerita el diseño señal ética y el llamado diseño multimedia,

entre otros.

Page 6: DISEÑO GRÁFICO PROYECTO ANIMADO

EL DISEÑO GRAFICO PUBLICITARIO

El diseño grafico ayuda en la publicidad ya que facilita a las personas a mostrar sus productos ya que este es una rama muy amplia pues con el diseño puedes informar por medio digital o impreso.

Page 7: DISEÑO GRÁFICO PROYECTO ANIMADO

EL DISEÑO EDITORIAL

El diseño editorial es aquel que se utiliza en los Periódicos de una forma que critica constructivamente y juzga de acuerdo con el autorPero no tiene firma de quien lo escribe.

El diseño también es utilizada en los medios de Comunicación por ejemplo en los periódicos, Revistas o catálogos como de bellezas o para Mostrar algún producto.

Page 8: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 9: DISEÑO GRÁFICO PROYECTO ANIMADO

EL DISEÑO DE IDENTIDAD CORPORATIVA

El diseño también se concentra en lo visual en todo lo que vemos, observamos y detallamos ya que todo lo que miramos lo queremos dar a conocer y este es un método muy fácil y didáctico el cual podemos facilitar a las personas a ver lo que no pueden como paisajes hermosos o diferentes partes del mundo y la gran belleza de la tierra.

Page 10: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 11: DISEÑO GRÁFICO PROYECTO ANIMADO

EL DISEÑO WEB Aquí el diseño juega un papel muy importante pues el

cual las paginas web tiene que tener mucho con diseño y mas que todo creatividad e innovación ya que estas no pueden ser iguales y la información que lleva tiene que ser muy precisa, detallada y demasiado clara pero resumida para que no aburra a los clientes

Page 12: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 13: DISEÑO GRÁFICO PROYECTO ANIMADO

EL DISEÑO DE ENVASE

A la hora de desarrollar un nuevo envase, el diseñador debe estar en contacto directo con la empresa, utilizar la información que ésta proporciona y plegarse a sus recomendaciones y experiencia. En todo momento, debe tener muy presente el producto para el que va a diseñar el envase.

Page 14: DISEÑO GRÁFICO PROYECTO ANIMADO

Tiene que valorar: Aspectos comerciales de la empresa: público al que va dirigido, canales de

distribución, antecedentes en la comercialización de productos similares, etc.

Aspectos relacionados con la distribución: tipo de almacenamiento, gestión de almacenes, puntos de destino, transporte utilizado, etc.

Imagen de la compañía.

Aspectos legales.

El diseño de envases tiene una doble faceta: diseño gráfico y diseño estructural.

Page 15: DISEÑO GRÁFICO PROYECTO ANIMADO

EL DISEÑO TIPOGRAFICO

El diseño en esta parte es muy esencial el cual hay diferentes tipos de letras y tu tienes la posibilidad de escoger en una gran cantidad de formas de letras como quieras para los trabajos, u demás cosas que quieras o necesites hacer.

Page 16: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 17: DISEÑO GRÁFICO PROYECTO ANIMADO

EL DISEÑO MULTIMEDIA Este es el campo mas amplio para el diseño pues aquí te

darás el gusto de crear e innovar cosas nuevas para todo; la multimedia abarca todo lo que tiene que ver con animación , video, música, imágenes, texto, sonido, esto se deduce a todo lo que tiene que ver con la tecnología ósea seremos ayudantes de la creación de la tecnología.

Page 18: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 19: DISEÑO GRÁFICO PROYECTO ANIMADO

"El Diseño también es una actividad técnica y creativa encaminada a idear un proyecto útil, funcional y estético …“

Entonces realmente el diseño no solo cumple con la función de embellecer algo, sino que esta concebido a partir de un proceso de creación con el objetivo de cumplir con una función en especial (o varias).

Page 20: DISEÑO GRÁFICO PROYECTO ANIMADO

Muchos ven el diseño, como la rama que se dedica a hacer que las cosas se vean bonitas, si bien esto es parte del diseño no abarca en su totalidad la función del diseño como tal.

Ya que el diseño es muy diferente de las artes, por que el segundo es la realización de las visiones personales y extra-sensoriales de un artista, en cambio el diseño cumple con una función práctica.

Page 21: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 22: DISEÑO GRÁFICO PROYECTO ANIMADO

En general se distinguen 4 grupos de elementos:• Elementos Conceptuales• Elementos Visuales• Elementos de Relación• Elementos Prácticos

Page 23: DISEÑO GRÁFICO PROYECTO ANIMADO

ELEMENTO CONCEPTUAL

Los elementos conceptuales son aquellos que están presentes en el diseño, pero que no son visibles a la vista. Se dividen en 4 elementos:

• Punto • Línea • Plano• Volumen

Page 24: DISEÑO GRÁFICO PROYECTO ANIMADO

PUNTO

Indica posición, no tiene largo ni ancho, es el principio y el fin de una línea.

Page 25: DISEÑO GRÁFICO PROYECTO ANIMADO

LINEA Es una sucesión de

puntos, tiene largo, pero no ancho, tiene una posición y una dirección.

Page 26: DISEÑO GRÁFICO PROYECTO ANIMADO

PLANO

Un plano tiene largo y ancho, tiene posición y dirección y además esta limitado por líneas.

Page 27: DISEÑO GRÁFICO PROYECTO ANIMADO

VOLUMEN El recorrido de un plano en

movimiento se convierte en volumen, tiene posición en el espacio, esta limitado por planos y obviamente en un diseño bidimensional el volumen es ilusorio.

Page 28: DISEÑO GRÁFICO PROYECTO ANIMADO

ELEMENTOS VISUALES Por ejemplo cuando se dibuja una figura en el papel, esa figura esta formada por

líneas visibles, las cuales no solo tienen un largo, sino que un ancho, un color y claro una textura (definida por los materiales utilizados).

Así pues como ya han de suponer, los elementos visuales son:

• Forma• Medida • Color• Ampliación sobre el color• textura

Page 29: DISEÑO GRÁFICO PROYECTO ANIMADO

FORMA Todo lo visible tiene

una forma, la cual aporta para la percepción del ojo una identificación del objeto.

Page 30: DISEÑO GRÁFICO PROYECTO ANIMADO

MEDIDA

Todas las formas tienen un tamaño.

Page 31: DISEÑO GRÁFICO PROYECTO ANIMADO

COLOR

El color se utiliza comprendiendo no solo los del espectro solar, sino asimismo los neutros (blanco, negros, grises) y las variaciones tonales y cromáticas.

Page 32: DISEÑO GRÁFICO PROYECTO ANIMADO

AMPLIACION DEL COLOR El color es un fenómeno físico de la luz,

relacionado con las diferentes longitudes de onda en la zona visible del espectro electromagnético, que perciben las personas y algunos animales a través de los órganos de la visión, como una sensación que nos permite diferenciar los objetos del espacio con mayor precisión.

Page 33: DISEÑO GRÁFICO PROYECTO ANIMADO

TEXTURA

Tiene que ver con el tipo de superficie resultante de la utilización del material. Puede atraer tanto al sentido del tacto como al visual.

Page 34: DISEÑO GRÁFICO PROYECTO ANIMADO

ELEMENTOS DE RELACION

Se refiere a la ubicación y a la interrelación de las formas en un diseño

Las cuales son:• Dirección• Posición• Espacio• Gravedad

Page 35: DISEÑO GRÁFICO PROYECTO ANIMADO

DIRECCION

La dirección de una forma depende de como esta relacionada con el observador, con el marco que la contiene o con otras formas cercanas.

Page 36: DISEÑO GRÁFICO PROYECTO ANIMADO

POSICION

La posición de una forma depende del elemento o estructura que la contenga.

Page 37: DISEÑO GRÁFICO PROYECTO ANIMADO

ESPACIO Todas las formas por más

pequeñas que sean ocupan un espacio, el espacio así mismo puede ser visible o ilusorio (para dar una sensación de profundidad)

Page 38: DISEÑO GRÁFICO PROYECTO ANIMADO

GRAVEDAD

El efecto de gravedad no solamente es visual, sino que también psicológica. Podemos atribuir estabilidad o inestabilidad a una forma o a un grupo de ellas.

Page 39: DISEÑO GRÁFICO PROYECTO ANIMADO

ELEMENTOS PRACTICOS

Los elementos prácticos van mas allá del diseño en si y como es de esperar son conceptos abstractos.

Los cuales son: • Representación• Significado • Función

Page 40: DISEÑO GRÁFICO PROYECTO ANIMADO

REPRESENTACIÓN Se refiere a la forma de realizar el diseño: puede ser una

representación realista, estilizada o semi-abstracta.

Page 41: DISEÑO GRÁFICO PROYECTO ANIMADO

SIGNIFICADO

Todo diseño conlleva consiente o subconscientemente un significado o mensaje.

Page 42: DISEÑO GRÁFICO PROYECTO ANIMADO

FUNCION Para lo que esta creado dicho diseño.

Page 43: DISEÑO GRÁFICO PROYECTO ANIMADO

Si bien la información recopilada y analizada e trata sobre el diseño en general, puede ser aplicada muy fácilmente al diseño web o al diseño grafico. Si bien es cierto cada rama tiene sus diferencias parten de una misma base para todos, al fin y al cabo la función de un diseño es crear un elemento tanto estéticamente adecuado como al mismo tiempo funcional y práctico.

Page 44: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 45: DISEÑO GRÁFICO PROYECTO ANIMADO

ORIGEN DEL DISEÑO GRAFICO

Aunque no existe consenso acerca de la fecha exacta en que nació el diseño gráfico, algunos lo datan durante el período de entreguerras. Otros entienden que comienza a identificarse como tal a finales del siglo XIX. También hay quienes encuentran su origen en las pinturas rupestres del Paleolítico y en el nacimiento del lenguaje escrito en el tercer milenio a. de C.

Page 46: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 47: DISEÑO GRÁFICO PROYECTO ANIMADO

PROGRAMAS UTILIZADOS EN EL DISEÑO GRAFICO

Adobe Creative Suite

• Photoshop• Freehand• Illustrator• Pagemaker, antecesor de Indesign.• Indesign• Dreamweaver• Flash• Fireworks

Page 48: DISEÑO GRÁFICO PROYECTO ANIMADO

Corel Corporation• Corel Draw• Photo-Paint• Corel Trace

Otras compañías:

• QuarkXPress, primer programa creado para maquetación editorial, similar a Adobe Indesign.

• Xara Xtreme• Inkscape• XaraLX• GIMP• Sodipodi

Page 49: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 50: DISEÑO GRÁFICO PROYECTO ANIMADO

QUE ES UNA INTERFAZ DE USUARIO

Cuando uno usa una herramienta, o accede e interactúa con un sistema, suele haber “algo” entre uno mismo y el objeto de la interacción.

En un auto, ese “algo” son los pedales y el tablero. En una puerta, es el picaporte. En una máquina expendedora o un ascensor, los botones. En una computadora (atención, que no me refiero a un producto informático sino una computadora), el teclado, el monitor, el mouse, y otros periféricos.

Page 51: DISEÑO GRÁFICO PROYECTO ANIMADO

En el caso de productos informáticos, la interfaz no es sólo el programa o lo que se ve en la pantalla. Desde el momento que el usuario abre la caja(1), comienza a interactuar con el producto y por lo tanto, comienza su experiencia.

A veces, tenemos que tener en cuenta elementos que en sentido estricto, no pertenecen a nuestro producto, por ejemplo, la configuración previa a la instalación. Tengan en cuenta, que aunque esto sea estrictamente cierto, para el usuario no es importante.

Page 52: DISEÑO GRÁFICO PROYECTO ANIMADO

¿POR QUE ES IMPORTANTE LA

INTERFAZ DE USUARIO? Interactuamos con el mundo que nos rodea a través de cientos de

interfaces. Muchas de ellas son tan conocidas y aceptadas, como el ejemplo del picaporte, que ni siquiera las vemos.

Dado que las interfaces no son nuestro objetivo, sino un medio de llegar a él, la mejor interfaz es aquella que no se ve. Sin embargo, muchas de ellas, por nuevas y desconocidas, o por conocidas pero mal diseñadas, son visibles.

Page 53: DISEÑO GRÁFICO PROYECTO ANIMADO

El panel de comandos, que mide sólo 1x1 cm, se ve y se opera (el mecanismo de Input/Output, es decir, entrada y salida) mediante infrarrojos, que los humanos casi no percibimos ni emitimos controladamente.

El único problema de nuestra cápsula casi perfecta es que, simplemente, no podemos usarla. En fin, hubiera sido lindo.

El mejor sistema o la herramienta perfecta, son inútiles si no podemos interactuar con ellos.

Page 54: DISEÑO GRÁFICO PROYECTO ANIMADO

Ahora, piense en todas las aplicaciones y los sitios que han usado recientemente. ¿Cuántas veces no encuentran lo que buscan o no saben cómo hacer lo que quieren? Esa situación resulta de una mala interfaz, que a su vez genera un problema de usabilidad.

En este momento, la humanidad está generando un nuevo medio de comunicación, que tiene su propio lenguaje y una alta velocidad de cambio y evolución: la red y la comunicación hipermedia (2).

Las interfaces de estos nuevos medios y su lenguaje asociado, juegan

entonces un papel más importante aún que el que han tenido hasta el momento, en aplicaciones tradicionales debido a la disparidad de usuarios, lenguajes, aplicaciones y la velocidad con que todos estos factores están cambiando.

Page 55: DISEÑO GRÁFICO PROYECTO ANIMADO

INTERFACES VISUALES DEFINICIONES• Todo aquello que hace posible la interacción con un sistema

ejecutándose en una computadora • Un punto o medio de interacción entre dos sistemas, disciplinas o

grupos • Un canal de comunicación entre dos o más entidades • Su calidad determina, entre otras cosas:

• Si el usuario acepta o no el sistema • Si los diseñadores del sistema son elogiados o reprobados • Si un sistema tiene éxito o fracasa en el mercado o la empresa

Page 56: DISEÑO GRÁFICO PROYECTO ANIMADO

• Al diseñar la interfaz de una aplicación, se debe tener en cuenta el deseo del usuario de enfrentarse a algo fácil, pero a la vez poderoso

• Imágenes y representación • El uso de imágenes es esencial en la comunicación de una interfaz de

usuario • Son importantes en tres áreas

• Identificación: sirven como representaciones de objetos concretos del mundo real

• Expresión: tienen un poder expresivo muy grande • Comunicación: no tienen límites

Page 57: DISEÑO GRÁFICO PROYECTO ANIMADO

El uso de representación introduce significado a los diseños y es la base para la comunicación

• La interpretación de una representación es estudiada por la semiótica (semiotics)

• La teoría y práctica general de los signos, cuyo alcance incluye, todo lo que es interpretado como un signo, y define las circunstancias en las cuales se obtienen las mejores interpretaciones

• Técnicas para la representación de imágenes • Selección del vehículo adecuado • Refinamiento a través de abstracción progresiva • Coordinación para asegurar consistencia visual

Page 58: DISEÑO GRÁFICO PROYECTO ANIMADO

DISEÑO DE INTERFAZ CENTRADA EN EL

USUARIO Si bien todos los elementos de una solución software son críticos por la

importancia de los mismos, en el caso de la interfaz de usuario

probablemente nos encontremos ante uno de los más sensibles, pues a

diferencia del resto de componentes (lógica de negocio, middleware, etc.),

en este caso nos encontramos ante la cara visible de la aplicación y, por

tanto, ante el único punto de contacto entre ésta y las personas que la usarán.

En este sentido, la filosofía de diseño centrado en el usuario, es la que

mejores resultados está proporcionando.

Page 59: DISEÑO GRÁFICO PROYECTO ANIMADO

Sólo de este modo conseguiremos al final obtener el mejor producto posible y sólo así se manejarán de forma correcta las expectativas de todos los implicados en el proyecto, incluidos los usuarios finales. Por tanto, las fases que se describen a continuación y que son las que utilizamos en Kynetia para el desarrollo de la interfaz, hay que verlas ubicadas dentro del contexto general del proyecto, y no sólo como una parte de éste.

Page 60: DISEÑO GRÁFICO PROYECTO ANIMADO

DISEÑO DE LA INTERACCION (HCI)

Consiste en un conjunto de técnicas encaminadas a conseguir que el software sea más intuitivo y fácil de manejar por parte de sus usuarios.

Page 61: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 62: DISEÑO GRÁFICO PROYECTO ANIMADO

DISEÑO GRAFICO DE LA INTERFAZ

El proceso de Diseño Gráfico de la Interfaz del usuario se entremezcla con el proceso de HCI Design para dar como resultado la interfaz que finalmente el usuario utilizará para interaccionar con la aplicación.

Normalmente el proceso consiste en dos fases iterativas: desarrollo del libro de estilo e implementación del diseño

Page 63: DISEÑO GRÁFICO PROYECTO ANIMADO

Creación del libro de estilo. Consiste en crear una serie de directrices que regulan la casuística gráfica de la aplicación. En ocasiones, se trata de una extensión del libro de estilo creado dentro de la Enterprise Architecture, mientras en otra, se crea partiendo desde cero. Tradicionalmente contiene los siguientes elementos:

Page 64: DISEÑO GRÁFICO PROYECTO ANIMADO
Page 65: DISEÑO GRÁFICO PROYECTO ANIMADO

"El diseño no se trata de hacer cosas bonitas, sino inteligentes"

Page 66: DISEÑO GRÁFICO PROYECTO ANIMADO