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.

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.

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.

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.

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 autor

Pero 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

IDENTIDAD

CORPORATIVA

El diseño también se concentra en lo visual en todo lo quevemos, observamos y detallamos ya que todo lo quemiramos lo queremos dar a conocer y este es un métodomuy fácil y didáctico el cual podemos facilitar a laspersonas a ver lo que no pueden como paisajes hermososo diferentes partes del mundo y la gran belleza de latierra.

EL DISEÑO WEB

Aquí el diseño juega un papel muy importante pues elcual las paginas web tiene que tener mucho con diseño ymas que todo creatividad e innovación ya que estas nopueden ser iguales y la información que lleva tiene queser muy precisa, detallada y demasiado clara peroresumida para que no aburra a los clientes

EL DISEÑO DE

ENVASE

A la hora de desarrollar un nuevo envase, el diseñador debeestar en contacto directo con la empresa, utilizar lainformación que ésta proporciona y plegarse a susrecomendaciones y experiencia. En todo momento, debetener muy presente el producto para el que va a diseñar elenvase.

Tiene que valorar:

Aspectos comerciales de la empresa: público al que va dirigido, canalesde distribución, antecedentes en la comercialización de productossimilares, 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ñoestructural.

EL DISEÑO

TIPOGRAFICO

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

EL DISEÑO

MULTIMEDIA

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

"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).

Muchos ven el diseño, como la rama que se dedica a hacerque las cosas se vean bonitas, si bien esto es parte del diseñono 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 elsegundo es la realización de las visiones personales y extra-sensoriales de un artista, en cambio el diseño cumple con unafunción práctica.

Un diseñador (sin importar su rama) puede realizardiseños sin conocimiento alguno sobre la materia, yasea por gusto personal o por su sensibilidad a lacreación visual (talento) sin embargo conocer deestos principios le hará ser un mejor diseñador.

En general se distinguen 4 grupos de elementos:

• Elementos Conceptuales

• Elementos Visuales

• Elementos de Relación

• Elementos Prácticos

ELEMENTO

CONCEPTUAL

Los elementos conceptuales son aquellos que estánpresentes en el diseño, pero que no son visibles a lavista. Se dividen en 4 elementos:

• Punto

• Línea

• Plano

• Volumen

PUNTO

Indica posición, no tiene

largo ni ancho, es el

principio y el fin de una

línea.

LINEAEs una sucesión de

puntos, tiene largo, pero

no ancho, tiene una

posición y una dirección.

PLANO

Un plano tiene largo y ancho,

tiene posición y dirección y

además esta limitado por líneas.

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.

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

FORMATodo lo visible tiene

una forma, la cual

aporta para la

percepción del ojo una

identificación del

objeto.

MEDIDA

Todas las formas tienen

un tamaño.

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.

AMPLIACION DEL

COLOR

El color es un fenómeno físico de laluz, relacionado con las diferenteslongitudes de onda en la zona visibledel espectro electromagnético, queperciben las personas y algunos animales através de los órganos de la visión, comouna sensación que nos permite diferenciarlos objetos del espacio con mayorprecisión.

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.

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

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.

POSICION

La posición de una forma

depende del elemento o

estructura que la

contenga.

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)

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.

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

REPRESENTACIÓN

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

representación realista, estilizada o semi-abstracta.

SIGNIFICAD

OTodo diseño conlleva consiente o subconscientemente un

significado o mensaje.

FUNCIONPara lo que esta creado dicho diseño.

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.

ORIGEN DEL DISEÑO

GRAFICOAunque no existe consenso acerca de la fechaexacta en que nació el diseño gráfico, algunos lodatan durante el período de entreguerras. Otrosentienden que comienza a identificarse como tal afinales del siglo XIX. También hay quienesencuentran su origen en las pinturas rupestres delPaleolítico y en el nacimiento del lenguaje escritoen el tercer milenio a. de C.

La diversidad de opiniones responde a que unosconsideran producto del diseño gráfico a todamanifestación gráfica y otros solamente aaquellas que se surgen como resultado de laaplicación del modelo de producción industrial;es decir, aquellas manifestaciones visuales quehan sido "proyectadas" contemplando un cúmulode necesidades de diversos tipos: productivas,simbólicas, ergonómicas, contextuales.

PROGRAMAS

UTILIZADOS EN EL

DISEÑO GRAFICOAdobe Creative Suite

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

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

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 elpicaporte. En una máquina expendedora o un ascensor, los botones. Enuna computadora (atención, que no me refiero a un producto informáticosino una computadora), el teclado, el monitor, el mouse, y otrosperiféricos.

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

A veces, tenemos que tener en cuenta elementos que ensentido estricto, no pertenecen a nuestro producto, porejemplo, la configuración previa a la instalación. Tengan encuenta, que aunque esto sea estrictamente cierto, para elusuario no es importante.

¿POR QUE ES

IMPORTANTE LA

INTERFAZ DE USUARIO?

Interactuamos con el mundo que nos rodea a través de cientos deinterfaces. Muchas de ellas son tan conocidas y aceptadas, como elejemplo del picaporte, que ni siquiera las vemos.

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

El panel de comandos, que mide sólo 1x1 cm, se ve y seopera (el mecanismo de Input/Output, es decir, entrada ysalida) mediante infrarrojos, que los humanos casi nopercibimos 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 nopodemos interactuar con ellos.

Ahora, piense en todas las aplicaciones y los sitios que han usadorecientemente. ¿Cuántas veces no encuentran lo que buscan o no sabencó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 decomunicación, que tiene su propio lenguaje y una alta velocidad decambio y evolución: la red y la comunicación hipermedia (2).

Las interfaces de estos nuevos medios y su lenguaje asociado, jueganentonces un papel más importante aún que el que han tenido hasta elmomento, en aplicaciones tradicionales debido a la disparidad deusuarios, lenguajes, aplicaciones y la velocidad con que todos estosfactores están cambiando.

INTERFACES

VISUALES

DEFINICIONES

• Todo aquello que hace posible la interacción con un sistemaejecutándose en una computadora

• Un punto o medio de interacción entre dos sistemas, disciplinas ogrupos

• 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

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

• Imágenes y representación

• El uso de imágenes es esencial en la comunicación de unainterfaz de usuario

• Son importantes en tres áreas

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

• Expresión: tienen un poder expresivo muy grande

• Comunicación: no tienen límites

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

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

• La teoría y práctica general de los signos, cuyo alcanceincluye, todo lo que es interpretado como un signo, ydefine las circunstancias en las cuales se obtienen lasmejores 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

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.

PRODUCTIVIDAD

USO DE LA APLICACION

FORMACION

VARIADAS A SOPORTE

ERRORES

INGRESOS

COSTOS

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

VENTAJAS

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

INTERFAZ DE USUARIO NO

ES SOLO TECNOLOGIA

INFORMATION

ARCHITECTURE

Ha DESING

INTERFACE

DESING

Proceso de creación de una Interfaz de Usuario

Debemos prestar mucha atención y poner mucho cuidado ala hora de elaborar una interfaz de usuario, pues la tecnologíano es más que un elemento de soporte, pero ni el másimportante, ni el único.

Si la forma en la que se presenta la información al usuarioestá mal pensada, da igual la tecnología que tengamos pordebajo, pues el usuario seguirá sin entender cómo obtener lainformación que requiere (por muy bonito que lomostremos).Teniendo bien pensada la forma en la quequeremos estructurar la información, es decir, habiendohecho una buena Arquitectura de Información, el siguientepaso es analizar y definir los elementos de interacción.

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

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

Sólo de este modo conseguiremos al final obtenerel mejor producto posible y sólo así se manejaránde forma correcta las expectativas de todos losimplicados en el proyecto, incluidos los usuariosfinales. Por tanto, las fases que se describen acontinuación y que son las que utilizamos enKynetia para el desarrollo de la interfaz, hay queverlas ubicadas dentro del contexto general delproyecto, y no sólo como una parte de éste.

ARQUITECTURA DE

LA INFORMACIONComo hemos comentado más arriba, si deseamos obtenerla máxima usabilidad y la mejor experiencia de usuario,también de acuerdo con la propia definición de TheInformation Architecture Institute, es necesario realizaruna arquitectura de información antes de proceder con eldiseño de la interacción o de los gráficos de la interfaz (esdecir, la pantalla que finalmente visualizará y manejará elusuario final).

El diseño de la arquitectura de información es una faseque se encuentra dentro del diseño de la arquitectura de laaplicación en particular y de la Enterprise Architecture engeneral.

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. HCI se centra en la parte de interacción, mientras que los servicios de Diseño Gráfico de la Interfaz se centran en la presentación gráfica (colores, fuentes, etc.). Por este motivo, el proceso de diseño de HCI suele ser una fase previa al diseño gráfico de la interfaz, aunque a partir de la primera iteración suelen entremezclase ambos. Las principales etapas son: Investigación, Concepto, Diseño, Test de usuario e Implementación

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

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

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

• Diseño. Finalizada la conceptualización de la idea, se procede con eldiseño de la interfaz. Esta fase cuenta con tres etapas: Definición de lainteracción (con el fin de crear un marco de trabajo donde la interaccióntiene lugar), Definición de los elementos de interacción (menús, botones,formularios, etc. que darán soporte a la interacción) y Prototipo (paracomprobar la validez del diseño).

• Test de usuario. Dado que ya contamos con el prototipo, es necesariorealizar test de usabilidad XGLOSARIOX con los usuarios, con el fin decomprobar que la solución propuesta satisface las necesidadesperseguidas y se encuentra a la altura de las expectativas. Normalmente,se encuentran mejoras a incorporar y, por tanto, se realizan diferentesiteraciones volviendo a la fase de concepto. Una vez concluidas lasiteraciones que garantizan el cumplimiento de las expectativas de losusuarios, se procede con la siguiente fase.

DISEÑO GRAFICO DE

LA INTERFAZEl proceso de Diseño Gráfico de la Interfaz delusuario se entremezcla con el proceso de HCIDesign para dar como resultado la interfaz quefinalmente el usuario utilizará para interaccionarcon la aplicación.

Normalmente el proceso consiste en dos fasesiterativas: desarrollo del libro de estilo eimplementació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ón• Uso de los logotipos

• Cabecera de la aplicación

• Pie de la aplicación

• Plantillas a utilizar para el desarrollo de la interfaz

• Paleta de colores

• Tipografía

• Imágenes y media

• Accesibilidad

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

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

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

sino inteligentes"