DISEÑO GRAFICO

ANDREA GRANADOS, JEIMY SANDOVAL, DAISSY GARCIA ANDREA GRANADOS, JEIMY SANDOVAL, DAISSY GARCIA

ANDREA GRANADOS, JEIMY SANDOVAL, DAISSY GARCIA

El El diseño gráficodiseño gráfico es una profesión es una profesión

cuya actividad industrial está dirigida cuya actividad industrial está dirigida

a idear y proyectar mensajes visuales, a idear y proyectar mensajes visuales, contemplando diversas necesidades contemplando diversas necesidades

que varían según el caso: estilísticas, que varían según el caso: estilísticas, informativa, identificatorias, vocativas, informativa, identificatorias, vocativas,

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

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


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


Algunas clasificaciones difundidas del diseño gráfico Algunas clasificaciones difundidas del diseño gráfico son: son:

*el diseño gráfico publicitario*el diseño gráfico publicitario *el diseño editorial*el diseño editorial *el diseño de identidad corporativa*el diseño de identidad corporativa *el diseño web*el diseño web *el diseño de envase*el diseño de envase *el diseño tipográfico*el diseño tipográfico *la cartelerita*la cartelerita *el diseño señal ética y el llamado diseño multimedia, *el diseño señal ética y el llamado diseño multimedia,

entre otros.entre otros.

ANDREA GRANADOS, JEIMY SANDOVAL, DAISSY GARCIA ANDREA GRANADOS, JEIMY SANDOVAL, DAISSY GARCIA

EL DISEÑO EL DISEÑO GRAFICO GRAFICO

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


EL DISEÑO EDITORIALEL 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.


EL DISEÑO DE EL DISEÑO DE IDENTIDAD IDENTIDAD

CORPORATIVACORPORATIVA El diseño también se concentra en lo El diseño también se concentra en lo

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


EL DISEÑO WEBEL DISEÑO WEB

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


EL DISEÑO DE ENVASEEL DISEÑO DE ENVASE

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

Tiene que valorar:Tiene que valorar:


*Aspectos comerciales de la empresa: público al que va dirigido, *Aspectos comerciales de la empresa: público al que va dirigido, canales de distribución, antecedentes en la comercialización de canales de distribución, antecedentes en la comercialización de productos similares, etc. productos similares, etc.

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

*Imagen de la compañía. *Imagen de la compañía.

*Aspectos legales. *Aspectos legales.

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


EL DISEÑO EL DISEÑO TIPOGRAFICOTIPOGRAFICO

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

EJEMPLOS:EJEMPLOS:


EL DISEÑO EL DISEÑO MULTIMEDIAMULTIMEDIA

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


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

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


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

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


Un diseñador (sin importar su rama) puede Un diseñador (sin importar su rama) puede realizar diseños sin conocimiento alguno sobre realizar diseños sin conocimiento alguno sobre la materia, ya sea por gusto personal o por su la materia, ya sea por gusto personal o por su sensibilidad a la creación visual (talento) sin sensibilidad a la creación visual (talento) sin embargo conocer de estos principios le hará embargo conocer de estos principios le hará ser un mejor diseñador.ser un mejor diseñador.

En general se distinguen 4 grupos de En general se distinguen 4 grupos de elementos:elementos:

*Elementos Conceptuales*Elementos Conceptuales *Elementos Visuales*Elementos Visuales *Elementos de Relación*Elementos de Relación *Elementos Prácticos*Elementos Prácticos


ELEMENTO ELEMENTO CONCEPTUALCONCEPTUAL

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

*Punto *Punto

*Línea *Línea

*Plano*Plano

*Volumen*Volumen


PUNTOPUNTO

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


LINEALINEA

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


PLANOPLANO

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


VOLUMENVOLUMEN

El recorrido de un plano en movimiento se El recorrido de un plano en movimiento se convierte en volumen, tiene posición en el convierte en volumen, tiene posición en el espacio, esta limitado por planos y obviamente espacio, esta limitado por planos y obviamente en un diseño bi-demensional el volumen es en un diseño bi-demensional el volumen es ilusorio.ilusorio.


ELEMENTOS VISUALESELEMENTOS VISUALES Por ejemplo cuando se dibuja una figura en el papel, Por ejemplo cuando se dibuja una figura en el papel,

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

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

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


FORMAFORMA

Todo lo visible tiene una forma, la cual Todo lo visible tiene una forma, la cual aporta para la percepción del ojo una aporta para la percepción del ojo una identificación del objeto.identificación del objeto.


MEDIDAMEDIDA

Todas las formas tienen un tamaño.Todas las formas tienen un tamaño.


COLORCOLOR

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


AMPLIACION DEL AMPLIACION DEL COLORCOLOR

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


TEXTURATEXTURA

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


ELEMENTOS DE ELEMENTOS DE RELACIONRELACION

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

Las cuales son:Las cuales son:

*Dirección*Dirección

*Posición*Posición

*Espacio*Espacio

*Gravedad*Gravedad


DIRECCIONDIRECCION

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


POSICIONPOSICION

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


ESPACIOESPACIO

Todas las formas por más pequeñas que Todas las formas por más pequeñas que sean ocupan un espacio, el espacio así sean ocupan un espacio, el espacio así mismo puede ser visible o ilusorio (para mismo puede ser visible o ilusorio (para dar una sensación de profundidad)dar una sensación de profundidad)


GRAVEDADGRAVEDAD

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


ELEMENTOS ELEMENTOS PRACTICOSPRACTICOS

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

Los cuales son: Los cuales son:

*Representación*Representación

*Significado *Significado

*Función*Función


REPRESENTACIÓNREPRESENTACIÓN

Se refiere a la forma de realizar el Se refiere a la forma de realizar el diseño: puede ser una representación diseño: puede ser una representación realista, estilizada o semi-abstracta.realista, estilizada o semi-abstracta.


SIGNIFICADOSIGNIFICADO

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


FUNCIONFUNCION

Para lo que esta creado dicho diseño. Para lo que esta creado dicho diseño.


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


ORIGEN DEL DISEÑO ORIGEN DEL DISEÑO GRAFICOGRAFICO

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


La diversidad de opiniones responde a que La diversidad de opiniones responde a que unos consideran producto del diseño gráfico a unos consideran producto del diseño gráfico a toda manifestación gráfica y otros solamente a toda manifestación gráfica y otros solamente a aquellas que se surgen como resultado de la aquellas que se surgen como resultado de la aplicación del modelo de producción industrial; aplicación del modelo de producción industrial; es decir, aquellas manifestaciones visuales es decir, aquellas manifestaciones visuales que han sido "proyectadas" contemplando un que han sido "proyectadas" contemplando un cúmulo de necesidades de diversos tipos: cúmulo de necesidades de diversos tipos: productivas, simbólicas, ergonómicas, productivas, simbólicas, ergonómicas, contextuales.contextuales.


PROGRAMAS PROGRAMAS UTILIZADOS EN EL UTILIZADOS EN EL DISEÑO GRAFICODISEÑO GRAFICO

Adobe Creative SuiteAdobe Creative Suite

PhotoshopPhotoshop FreehandFreehand IllustratorIllustrator Pagemaker, antecesor de Indesign.Pagemaker, antecesor de Indesign. IndesignIndesign DreamweaverDreamweaver FlashFlash FireworksFireworks


Corel CorporationCorel Corporation Corel DrawCorel Draw Photo-PaintPhoto-Paint Corel TraceCorel Trace

Otras compañíasOtras compañías

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

Xara XtremeXara Xtreme InkscapeInkscape XaraLXXaraLX GIMPGIMP SodipodiSodipodi


QUE ES UNA INTERFAZ QUE ES UNA INTERFAZ DE USUARIODE USUARIO

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

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


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

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


¿POR QUE ES ¿POR QUE ES IMPORTANTE LA IMPORTANTE LA

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

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

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


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

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

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


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

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

Las interfaces de estos nuevos medios y su lenguaje Las interfaces de estos nuevos medios y su lenguaje

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


INTERFACES VISUALESINTERFACES VISUALES

DEFINICIONESDEFINICIONES Todo aquello que hace posible la interacción con un Todo aquello que hace posible la interacción con un

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

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

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

empresa empresa


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

Imágenes y representación Imágenes y representación El uso de imágenes es esencial en la El uso de imágenes es esencial en la

comunicación de una interfaz de usuario comunicación de una interfaz de usuario Son importantes en tres áreas Son importantes en tres áreas

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

Expresión: tienen un poder expresivo muy Expresión: tienen un poder expresivo muy grande grande

Comunicación: no tienen límitesComunicación: no tienen límites


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

estudiada por la semiótica (semiotics) estudiada por la semiótica (semiotics) La teoría y práctica general de los signos, cuyo alcance La teoría y práctica general de los signos, cuyo alcance

incluye, todo lo que es interpretado como un signo, y incluye, todo lo que es interpretado como un signo, y define las circunstancias en las cuales se obtienen las define las circunstancias en las cuales se obtienen las mejores interpretacionesmejores interpretaciones

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


DISEÑO DE INTERFAZ DISEÑO DE INTERFAZ CENTRADA EN EL CENTRADA EN EL

USUARIOUSUARIO Si bien todos los elementos de una solución software Si bien todos los elementos de una solución software

son críticos por la importancia de los mismos, en el son críticos por la importancia de los mismos, en el caso de la interfaz de usuario probablemente nos caso de la interfaz de usuario probablemente nos encontremos ante uno de los más sensibles, pues a encontremos ante uno de los más sensibles, pues a diferencia del resto de componentes (lógica de diferencia del resto de componentes (lógica de negocio, middleware, etc.), en este caso nos negocio, middleware, etc.), en este caso nos encontramos ante la cara visible de la aplicación y, por encontramos ante la cara visible de la aplicación y, por tanto, ante el único punto de contacto entre ésta y las tanto, ante el único punto de contacto entre ésta y las personas que la usarán. En este sentido, la filosofía de personas que la usarán. En este sentido, la filosofía de diseño centrado en el usuario, es la que mejores diseño centrado en el usuario, es la que mejores resultados está proporcionando.resultados está proporcionando.


PRODUCTIVIDAD

USO DE LA APLICACION

FORMACION

VARIADAS A SOPORTE

ERRORES

INGRESOS

COSTOS

http://www.kynetia.es/images/stories/kynetia/ui5.png


Esto nos había conducido a situaciones donde el Esto nos había conducido a situaciones donde el

rendimiento de los usuarios había caído notablemente, rendimiento de los usuarios había caído notablemente, y era necesario hacer fuertes inversiones en formación y era necesario hacer fuertes inversiones en formación para salvar el gap de usabilidad. Adicionalmente, las para salvar el gap de usabilidad. Adicionalmente, las llamadas a los call-centers y centros de atención al llamadas a los call-centers y centros de atención al cliente se multiplicaban, pues el usuario se sentía cliente se multiplicaban, pues el usuario se sentía desorientado o no sabía la forma en la que proceder. desorientado o no sabía la forma en la que proceder. Eso por no hablar de la pérdida de ingresos derivada Eso por no hablar de la pérdida de ingresos derivada de ese bajo rendimiento, o bien, en el caso de de ese bajo rendimiento, o bien, en el caso de aplicaciones directamente expuestas al usuario final aplicaciones directamente expuestas al usuario final donde éste interactúa directamente con el negocio, de donde éste interactúa directamente con el negocio, de los abandonos en el uso de la aplicación y, por tanto, los abandonos en el uso de la aplicación y, por tanto, de la pérdida de ventas directas.de la pérdida de ventas directas.

VENTAJAS


Actualmente, el contexto ha mejorado Actualmente, el contexto ha mejorado sustancialmente. Si bien continuamos con una sustancialmente. Si bien continuamos con una diversidad importante de navegadores diversidad importante de navegadores (Explorer, Firefox, Opera, Safari, etc.) y (Explorer, Firefox, Opera, Safari, etc.) y clientes (PC, teléfonos móviles, PDA, etc.), clientes (PC, teléfonos móviles, PDA, etc.), XML, JavaScript y CSS bajo el paraguas de XML, JavaScript y CSS bajo el paraguas de Ajax, han sido las tecnologías encargadas de Ajax, han sido las tecnologías encargadas de estandarizar la forma en la que es posible estandarizar la forma en la que es posible desarrollar aplicaciones ricas y fáciles de desarrollar aplicaciones ricas y fáciles de utilizar. Otras formas que proporcionan mayor utilizar. Otras formas que proporcionan mayor experiencia multimedia, como Flash, experiencia multimedia, como Flash, OpenLaszlo o el más reciente Silverlight, están OpenLaszlo o el más reciente Silverlight, están contribuyendo a que, por fin, el desarrollo de contribuyendo a que, por fin, el desarrollo de RIA sea una realidad.RIA sea una realidad.


INTERFAZ DE USUARIO INTERFAZ DE USUARIO NO ES SOLO NO ES SOLO TECNOLOGIATECNOLOGIA

INFORMATIONARCHITECTURE

Ha DESING

INTERFACEDESING


Proceso de creación de una Interfaz de UsuarioProceso de creación de una Interfaz de Usuario Debemos prestar mucha atención y poner mucho Debemos prestar mucha atención y poner mucho

cuidado a la hora de elaborar una interfaz de usuario, cuidado a la hora de elaborar una interfaz de usuario, pues la tecnología no es más que un elemento de pues la tecnología no es más que un elemento de soporte, pero ni el más importante, ni el único.soporte, pero ni el más importante, ni el único.

Si la forma en la que se presenta la información al Si la forma en la que se presenta la información al usuario está mal pensada, da igual la tecnología que usuario está mal pensada, da igual la tecnología que tengamos por debajo, pues el usuario seguirá sin tengamos por debajo, pues el usuario seguirá sin entender cómo obtener la información que requiere entender cómo obtener la información que requiere (por muy bonito que lo mostremos).Teniendo bien (por muy bonito que lo mostremos).Teniendo bien pensada la forma en la que queremos estructurar la pensada la forma en la que queremos estructurar la información, es decir, habiendo hecho una buena información, es decir, habiendo hecho una buena Arquitectura de Información, el siguiente paso es Arquitectura de Información, el siguiente paso es analizar y definir los elementos de interacción. analizar y definir los elementos de interacción.


Por tanto, el diseño de una buena interacción utilizando los Por tanto, el diseño de una buena interacción utilizando los estándares de HCI es el segundo paso crítico a la hora de estándares de HCI es el segundo paso crítico a la hora de abordar con éxito el diseño de una interfaz. Aquí es donde la abordar con éxito el diseño de una interfaz. Aquí es donde la tecnología sí nos puede ayudar, pues nos puede proporcionar tecnología sí nos puede ayudar, pues nos puede proporcionar unas herramientas de interacción u otras pero, por encima de unas herramientas de interacción u otras pero, por encima de todo, debemos pensar en el usuario y en la experiencia que todo, debemos pensar en el usuario y en la experiencia que experimentará éste a la hora de utilizar nuestra aplicación, experimentará éste a la hora de utilizar nuestra aplicación, buscando en todo momento la simplicidad y no hacerle pensar buscando en todo momento la simplicidad y no hacerle pensar más de lo estrictamente necesario.más de lo estrictamente necesario.

Finalmente, la imagen corporativa es un elemento importante Finalmente, la imagen corporativa es un elemento importante también y abordar la aplicación del diseño gráfico a la interfaz de también y abordar la aplicación del diseño gráfico a la interfaz de una forma metódica, es un elemento clave para conseguir una forma metódica, es un elemento clave para conseguir coherencia y, con ella, conseguir los objetivos de imagen que se coherencia y, con ella, conseguir los objetivos de imagen que se pretenden.pretenden.


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


ARQUITECTURA DE LA ARQUITECTURA DE LA INFORMACIONINFORMACION

Como hemos comentado más arriba, si deseamos Como hemos comentado más arriba, si deseamos obtener la máxima usabilidad y la mejor experiencia de obtener la máxima usabilidad y la mejor experiencia de usuario, también de acuerdo con la propia definición usuario, también de acuerdo con la propia definición de de The Information Architecture InstituteThe Information Architecture Institute, es necesario , es necesario realizar una arquitectura de información antes de realizar una arquitectura de información antes de proceder con el diseño de la interacción o de los proceder con el diseño de la interacción o de los gráficos de la interfaz (es decir, la pantalla que gráficos de la interfaz (es decir, la pantalla que finalmente visualizará y manejará el usuario final).finalmente visualizará y manejará el usuario final).

El diseño de la arquitectura de información es una fase El diseño de la arquitectura de información es una fase que se encuentra dentro del diseño de la arquitectura que se encuentra dentro del diseño de la arquitectura de la aplicación en particular y de la de la aplicación en particular y de la Enterprise Enterprise ArchitectureArchitecture en general. en general.


DISEÑO DE LA DISEÑO DE LA INTERACCION (HCI)INTERACCION (HCI)

Consiste en un conjunto de técnicas encaminadas a Consiste en un conjunto de técnicas encaminadas a conseguir que el software sea más intuitivo y fácil de conseguir que el software sea más intuitivo y fácil de manejar por parte de sus usuarios. HCI se centra en la manejar por parte de sus usuarios. HCI se centra en la parte de interacción, mientras que los servicios de parte de interacción, mientras que los servicios de Diseño Gráfico de la InterfazDiseño Gráfico de la Interfaz se centran en la se centran en la presentación gráfica (colores, fuentes, etc.). Por este presentación gráfica (colores, fuentes, etc.). Por este motivo, el proceso de diseño de HCI suele ser una motivo, el proceso de diseño de HCI suele ser una fase previa al diseño gráfico de la interfaz, aunque a fase previa al diseño gráfico de la interfaz, aunque a partir de la primera iteración suelen entremezclase partir de la primera iteración suelen entremezclase ambos. Las principales etapas son: ambos. Las principales etapas son: InvestigaciónInvestigación, , ConceptoConcepto, , DiseñoDiseño, , Test de usuarioTest de usuario e e ImplementaciónImplementación


* Investigación* Investigación. Se trata de conocer las personas que . Se trata de conocer las personas que utilizarán la aplicación, así como el contexto en el que utilizarán la aplicación, así como el contexto en el que será utilizada. Esto permitirá a los diseñadores de será utilizada. Esto permitirá a los diseñadores de interacción entender tanto las necesidades de los interacción entender tanto las necesidades de los usuarios, como los condicionantes que posean. De usuarios, como los condicionantes que posean. De esta fase se concluye con una lista de requisitos que esta fase se concluye con una lista de requisitos que abarcan dos escenarios diferentes: los requisitos de abarcan dos escenarios diferentes: los requisitos de los usuarios y los requisitos técnicos.los usuarios y los requisitos técnicos.

* Concepto* Concepto. Una vez que se cuenta con los requisitos, . Una vez que se cuenta con los requisitos, es necesario conceptualizar las diferentes ideas y ver es necesario conceptualizar las diferentes ideas y ver cuáles de ellas se ajustan de la mejor forma posible a cuáles de ellas se ajustan de la mejor forma posible a las necesidades de los usuarios y del negocio. Ese es las necesidades de los usuarios y del negocio. Ese es el objetivo de esta fase.el objetivo de esta fase.

* Implementación.* Implementación. Consiste en la incorporación de la Consiste en la incorporación de la solución de interacción dentro de la aplicación que se solución de interacción dentro de la aplicación que se está desarrollando.está desarrollando.


* * DiseñoDiseño. Finalizada la conceptualización de la idea, se procede . Finalizada la conceptualización de la idea, se procede con el diseño de la interfaz. Esta fase cuenta con tres etapas: con el diseño de la interfaz. Esta fase cuenta con tres etapas: Definición de la interacciónDefinición de la interacción (con el fin de crear un marco de (con el fin de crear un marco de trabajo donde la interacción tiene lugar), trabajo donde la interacción tiene lugar), Definición de los Definición de los elementos de interacciónelementos de interacción (menús, botones, formularios, etc. que (menús, botones, formularios, etc. que darán soporte a la interacción) y darán soporte a la interacción) y PrototipoPrototipo (para comprobar la (para comprobar la validez del diseño).validez del diseño).

* Test de usuario. * Test de usuario. Dado que ya contamos con el prototipo, es Dado que ya contamos con el prototipo, es necesario realizar test de usabilidad XGLOSARIOX con los necesario realizar test de usabilidad XGLOSARIOX con los usuarios, con el fin de comprobar que la solución propuesta usuarios, con el fin de comprobar que la solución propuesta satisface las necesidades perseguidas y se encuentra a la altura satisface las necesidades perseguidas y se encuentra a la altura de las expectativas. Normalmente, se encuentran mejoras a de las expectativas. Normalmente, se encuentran mejoras a incorporar y, por tanto, se realizan diferentes iteraciones incorporar y, por tanto, se realizan diferentes iteraciones volviendo a la fase de concepto. Una vez concluidas las volviendo a la fase de concepto. Una vez concluidas las iteraciones que garantizan el cumplimiento de las expectativas de iteraciones que garantizan el cumplimiento de las expectativas de los usuarios, se procede con la siguiente fase.los usuarios, se procede con la siguiente fase.


DISEÑO GRAFICO DE DISEÑO GRAFICO DE LA INTERFAZLA INTERFAZ

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

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


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:


Guía de arquitectura de informaciónGuía de arquitectura de información Uso de los logotiposUso de los logotipos Cabecera de la aplicaciónCabecera de la aplicación Pie de la aplicaciónPie de la aplicación Plantillas a utilizar para el desarrollo de la interfazPlantillas a utilizar para el desarrollo de la interfaz Paleta de coloresPaleta de colores TipografíaTipografía Imágenes y mediaImágenes y media AccesibilidadAccesibilidad

Se trata de un proceso iterativo que en la mayor parte de las Se trata de un proceso iterativo que en la mayor parte de las veces se entremezcla con el proceso de HCI. Adicionalmente, las veces se entremezcla con el proceso de HCI. Adicionalmente, las fases de creación son prácticamente idénticas a las de HCI, pero fases de creación son prácticamente idénticas a las de HCI, pero ahora, desde el punto de vista gráfico.ahora, desde el punto de vista gráfico.

Implementación diseño. de interfaz. Implementación diseño. de interfaz. Una vez que se ha Una vez que se ha concluido con la creación del libro de estilo, se procede a la concluido con la creación del libro de estilo, se procede a la incorporación del diseño gráfico de la interfaz al diseño HCI que incorporación del diseño gráfico de la interfaz al diseño HCI que se haya realizado.se haya realizado.


"El disEño no sE "El disEño no sE trata dE hacEr trata dE hacEr cosas bonitas, cosas bonitas,

sino intEligEntEs"sino intEligEntEs"

DISEÑO GRAFICO

Entertainment & Humor

Transcript of DISEÑO GRAFICO