SlideShare ist ein Scribd-Unternehmen logo
1 von 78
Downloaden Sie, um offline zu lesen
Diseñografico
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.
Diseñografico
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.
Diseñografico
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.
Diseñografico
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
Diseñografico
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.
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.
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.
Diseñografico
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.
Diseñografico
"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 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.
Diseñografico
Un diseñador (sin importar su rama) puede realizar
    diseños sin conocimiento alguno sobre la materia, ya
    sea por gusto personal o por su sensibilidad a la
    creación visual (talento) sin embargo conocer de
    estos 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án
    presentes en el diseño, pero que no son visibles a la
    vista. 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.
LINEA
Es 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
FORMA
Todo 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 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.
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
                O
Todo diseño conlleva consiente o subconscientemente un
 significado o mensaje.
FUNCION
Para 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.
Diseñografico
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.
La diversidad de opiniones responde a que unos
consideran producto del diseño gráfico a toda
manifestación gráfica y otros solamente a
aquellas que se surgen como resultado de la
aplicación del modelo de producción industrial;
es decir, aquellas manifestaciones visuales que
han sido "proyectadas" contemplando un cúmulo
de necesidades de diversos tipos: productivas,
simbólicas, ergonómicas, contextuales.
Diseñografico
PROGRAMAS
       UTILIZADOS EN EL
       DISEÑO GRAFICO
Adobe 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
Diseñografico
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.
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.
¿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.
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.
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.
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
• 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
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
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
                       INGRESOS

     FORMACION

                       COSTOS
VARIADAS A SOPORTE


     ERRORES
VENTAJAS
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.
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 a
la hora de elaborar una interfaz de usuario, pues la tecnología
no es más que un elemento de soporte, pero ni el más
importante, ni el único.

  Si la forma en la que se presenta la información al usuario
está mal pensada, da igual la tecnología que tengamos por
debajo, pues el usuario seguirá sin entender cómo obtener la
información que requiere (por muy bonito que lo
mostremos).Teniendo bien pensada la forma en la que
queremos estructurar la información, es decir, habiendo
hecho una buena Arquitectura de Información, el siguiente
paso es analizar y definir los elementos de interacción.
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 abordar con éxito el diseño de
una interfaz. Aquí es donde la tecnología sí nos puede ayudar, pues nos
puede proporcionar unas herramientas de interacción u otras pero, por
encima de todo, debemos pensar en el usuario y en la experiencia que
experimentará éste a la hora de utilizar nuestra aplicación, buscando en
todo momento la simplicidad y no hacerle pensar más de lo estrictamente
necesario.

Finalmente, la imagen corporativa es un elemento importante 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 coherencia y, con ella,
conseguir los objetivos de imagen que se pretenden.
Diseñografico
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.
ARQUITECTURA DE
    LA INFORMACION
Como hemos comentado más arriba, si deseamos obtener
la máxima usabilidad y la mejor experiencia de usuario,
también de acuerdo con la propia definición de The
Information Architecture Institute, es necesario realizar
una arquitectura de información antes de proceder con el
diseño de la interacción o de los gráficos de la interfaz (es
decir, la pantalla que finalmente visualizará y manejará el
usuario final).
El diseño de la arquitectura de información es una fase
que se encuentra dentro del diseño de la arquitectura de la
aplicación en particular y de la Enterprise Architecture en
general.
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
Diseñografico
• Investigación. Se trata de conocer las personas que utilizarán
  la aplicación, así como el contexto en el que será utilizada.
  Esto permitirá a los diseñadores de interacción entender tanto
  las necesidades de los usuarios, como los condicionantes que
  posean. De esta fase se concluye con una lista de requisitos
  que abarcan dos escenarios diferentes: los requisitos de los
  usuarios y los requisitos técnicos.

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

•     Implementación. Consiste en la incorporación de la
    solució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 el
    diseño de la interfaz. Esta fase cuenta con tres etapas: Definición de la
    interacción (con el fin de crear un marco de trabajo donde la interacción
    tiene lugar), Definición de los elementos de interacción (menús, botones,
    formularios, etc. que darán soporte a la interacción) y Prototipo (para
    comprobar la validez del diseño).

•      Test de usuario. Dado que ya contamos con el prototipo, es necesario
    realizar test de usabilidad XGLOSARIOX con los usuarios, con el fin de
    comprobar que la solución propuesta satisface las necesidades
    perseguidas y se encuentra a la altura de las expectativas. Normalmente,
    se encuentran mejoras a incorporar y, por tanto, se realizan diferentes
    iteraciones volviendo a la fase de concepto. Una vez concluidas las
    iteraciones que garantizan el cumplimiento de las expectativas de los
    usuarios, se procede con la siguiente fase.
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
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 se
entremezcla con el proceso de HCI. Adicionalmente, las fases de creación
son prácticamente idénticas a las de HCI, pero ahora, desde el punto de
vista gráfico.
 Implementación diseño. de interfaz. Una vez que se ha 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 se haya realizado.
Diseñografico
"El diseño no se
 trata de hacer
  cosas bonitas,
sino inteligentes"
Diseñografico

Weitere ähnliche Inhalte

Was ist angesagt?

El diseño (4 eso)
El diseño (4 eso)El diseño (4 eso)
El diseño (4 eso)Cres68
 
Apuntes Diseño Gráfico
Apuntes Diseño GráficoApuntes Diseño Gráfico
Apuntes Diseño GráficoRoger Crunch
 
Clase 1. Introducción al Diseño Gráfico
Clase 1. Introducción al Diseño GráficoClase 1. Introducción al Diseño Gráfico
Clase 1. Introducción al Diseño GráficoDania Hernandez Moreno
 
DiseñO Grafico Power Point
DiseñO Grafico Power PointDiseñO Grafico Power Point
DiseñO Grafico Power PointDario Fernando
 
Diapositiva. explicacion general del diseño grafico
Diapositiva. explicacion general del diseño graficoDiapositiva. explicacion general del diseño grafico
Diapositiva. explicacion general del diseño graficoDANIDRES
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño graficoWarfo
 
Teoria del diseño
Teoria del diseño Teoria del diseño
Teoria del diseño Acce Junior
 
Unidad 1 - Fundamentos del diseño gráfico
Unidad 1  - Fundamentos del diseño gráficoUnidad 1  - Fundamentos del diseño gráfico
Unidad 1 - Fundamentos del diseño gráficoFidel Romero
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseñoalexabarrero
 
Fundamentos de Diseño
Fundamentos de DiseñoFundamentos de Diseño
Fundamentos de DiseñoAndrés Lozano
 

Was ist angesagt? (20)

Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
DISEÑO GRAFICO
DISEÑO GRAFICO DISEÑO GRAFICO
DISEÑO GRAFICO
 
El diseño (4 eso)
El diseño (4 eso)El diseño (4 eso)
El diseño (4 eso)
 
Apuntes Diseño Gráfico
Apuntes Diseño GráficoApuntes Diseño Gráfico
Apuntes Diseño Gráfico
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
Clase 1. Introducción al Diseño Gráfico
Clase 1. Introducción al Diseño GráficoClase 1. Introducción al Diseño Gráfico
Clase 1. Introducción al Diseño Gráfico
 
DiseñO Grafico Power Point
DiseñO Grafico Power PointDiseñO Grafico Power Point
DiseñO Grafico Power Point
 
Diapositiva. explicacion general del diseño grafico
Diapositiva. explicacion general del diseño graficoDiapositiva. explicacion general del diseño grafico
Diapositiva. explicacion general del diseño grafico
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
Diseño gráfico
Diseño gráficoDiseño gráfico
Diseño gráfico
 
diseño grafico
diseño graficodiseño grafico
diseño grafico
 
Teoria del diseño
Teoria del diseño Teoria del diseño
Teoria del diseño
 
Tema 9 al 14 diseño grafico
Tema 9 al 14 diseño graficoTema 9 al 14 diseño grafico
Tema 9 al 14 diseño grafico
 
Grafica publicitaria
Grafica publicitariaGrafica publicitaria
Grafica publicitaria
 
Unidad 1 - Fundamentos del diseño gráfico
Unidad 1  - Fundamentos del diseño gráficoUnidad 1  - Fundamentos del diseño gráfico
Unidad 1 - Fundamentos del diseño gráfico
 
DISEÑO GRAFICO
DISEÑO GRAFICODISEÑO GRAFICO
DISEÑO GRAFICO
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseño
 
Teoria del-diseno-grafico-1
Teoria del-diseno-grafico-1Teoria del-diseno-grafico-1
Teoria del-diseno-grafico-1
 
Fundamentos de Diseño
Fundamentos de DiseñoFundamentos de Diseño
Fundamentos de Diseño
 
Manual de identidad visual corporativa
Manual de identidad visual corporativaManual de identidad visual corporativa
Manual de identidad visual corporativa
 

Andere mochten auch (20)

Religió.
Religió.Religió.
Religió.
 
Marlonestebanhernandezchavez
MarlonestebanhernandezchavezMarlonestebanhernandezchavez
Marlonestebanhernandezchavez
 
Wikis
Wikis Wikis
Wikis
 
Punto de equilibrio
Punto de equilibrioPunto de equilibrio
Punto de equilibrio
 
Personajes romanos
Personajes romanosPersonajes romanos
Personajes romanos
 
paso a paso de hacer formatos
paso a paso de hacer formatospaso a paso de hacer formatos
paso a paso de hacer formatos
 
P racticas de power point
P racticas de power pointP racticas de power point
P racticas de power point
 
Sesión 5
Sesión 5Sesión 5
Sesión 5
 
Tecnología educativa
Tecnología educativaTecnología educativa
Tecnología educativa
 
Tecnologia
TecnologiaTecnologia
Tecnologia
 
Proyecto de civica
Proyecto de civicaProyecto de civica
Proyecto de civica
 
Colegio nicolas esguerra[1]
Colegio nicolas esguerra[1]Colegio nicolas esguerra[1]
Colegio nicolas esguerra[1]
 
Citas12
Citas12Citas12
Citas12
 
Nebulosa del cangrejo
Nebulosa del cangrejoNebulosa del cangrejo
Nebulosa del cangrejo
 
Romanticismo equipo #7
Romanticismo equipo #7Romanticismo equipo #7
Romanticismo equipo #7
 
Ofimática
OfimáticaOfimática
Ofimática
 
Presentación1ñoi
Presentación1ñoiPresentación1ñoi
Presentación1ñoi
 
Diferencias entre ética y moral
Diferencias entre ética y moralDiferencias entre ética y moral
Diferencias entre ética y moral
 
Tutorial de blogger .. guieebany
Tutorial de blogger .. guieebanyTutorial de blogger .. guieebany
Tutorial de blogger .. guieebany
 
Ambientación soboes
Ambientación soboes Ambientación soboes
Ambientación soboes
 

Ähnlich wie Diseñografico

DISEÑO GRÁFICO PROYECTO ANIMADO
DISEÑO GRÁFICO PROYECTO ANIMADODISEÑO GRÁFICO PROYECTO ANIMADO
DISEÑO GRÁFICO PROYECTO ANIMADOmapugpk
 
Taller 1 dg joel_chimba_pablo_ontaneda
Taller 1 dg joel_chimba_pablo_ontanedaTaller 1 dg joel_chimba_pablo_ontaneda
Taller 1 dg joel_chimba_pablo_ontanedaJoel chimba
 
INTRIDUCCIÓN AL DISEÑO
INTRIDUCCIÓN AL DISEÑOINTRIDUCCIÓN AL DISEÑO
INTRIDUCCIÓN AL DISEÑOelizaf2009
 
Diseño, metodología, publicidad, estética
Diseño, metodología, publicidad, estéticaDiseño, metodología, publicidad, estética
Diseño, metodología, publicidad, estéticaDenise Reynaud
 
Elementos básicos del diseño, audiovisual
Elementos básicos del diseño, audiovisualElementos básicos del diseño, audiovisual
Elementos básicos del diseño, audiovisualGloria Torres de León
 
ámbito del Diseño y la Comunicación
ámbito del Diseño y la Comunicaciónámbito del Diseño y la Comunicación
ámbito del Diseño y la ComunicaciónFabiola Cortes
 
Fundamentos y Elementos Del Diseño
Fundamentos y Elementos Del DiseñoFundamentos y Elementos Del Diseño
Fundamentos y Elementos Del DiseñoAlejandra Reyes
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseñomilena cruz
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseñomilena cruz
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseñomilena cruz
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseñomilena cruz
 
Fundamentos y Elementos Del Diseño
Fundamentos y Elementos Del DiseñoFundamentos y Elementos Del Diseño
Fundamentos y Elementos Del DiseñoEstefany Andrade
 

Ähnlich wie Diseñografico (20)

DISEÑO GRÁFICO PROYECTO ANIMADO
DISEÑO GRÁFICO PROYECTO ANIMADODISEÑO GRÁFICO PROYECTO ANIMADO
DISEÑO GRÁFICO PROYECTO ANIMADO
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
Taller 1 dg joel_chimba_pablo_ontaneda
Taller 1 dg joel_chimba_pablo_ontanedaTaller 1 dg joel_chimba_pablo_ontaneda
Taller 1 dg joel_chimba_pablo_ontaneda
 
INTRIDUCCIÓN AL DISEÑO
INTRIDUCCIÓN AL DISEÑOINTRIDUCCIÓN AL DISEÑO
INTRIDUCCIÓN AL DISEÑO
 
Diseño, metodología, publicidad, estética
Diseño, metodología, publicidad, estéticaDiseño, metodología, publicidad, estética
Diseño, metodología, publicidad, estética
 
Presentacion.elementos de diseño grafico
Presentacion.elementos de diseño graficoPresentacion.elementos de diseño grafico
Presentacion.elementos de diseño grafico
 
Si
SiSi
Si
 
Elementos básicos del diseño, audiovisual
Elementos básicos del diseño, audiovisualElementos básicos del diseño, audiovisual
Elementos básicos del diseño, audiovisual
 
ámbito del Diseño y la Comunicación
ámbito del Diseño y la Comunicaciónámbito del Diseño y la Comunicación
ámbito del Diseño y la Comunicación
 
Johan nicolás penagos roa
Johan nicolás penagos roaJohan nicolás penagos roa
Johan nicolás penagos roa
 
Fundamentos y Elementos Del Diseño
Fundamentos y Elementos Del DiseñoFundamentos y Elementos Del Diseño
Fundamentos y Elementos Del Diseño
 
Diseño Gráfico antecedentes
Diseño Gráfico antecedentesDiseño Gráfico antecedentes
Diseño Gráfico antecedentes
 
Willmer 10.03
Willmer 10.03Willmer 10.03
Willmer 10.03
 
Willmer 10.03
Willmer 10.03Willmer 10.03
Willmer 10.03
 
Diseño gráfico
Diseño gráficoDiseño gráfico
Diseño gráfico
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseño
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseño
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseño
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseño
 
Fundamentos y Elementos Del Diseño
Fundamentos y Elementos Del DiseñoFundamentos y Elementos Del Diseño
Fundamentos y Elementos Del Diseño
 

Kürzlich hochgeladen

PPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxPPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxKarenSepulveda23
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCEIP TIERRA DE PINARES
 
sociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercerosociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre terceroCEIP TIERRA DE PINARES
 
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREAS
Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREASEjemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREAS
Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREASJavier Sanchez
 
1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADODJElvitt
 
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionUNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionCarolVigo1
 
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAPROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAJoaqunSolrzano
 
Tema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificaciónTema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificaciónIES Vicent Andres Estelles
 
ficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primariaficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primariamichel carlos Capillo Dominguez
 
Tecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxTecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxJulioSantin2
 
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdfdiana593621
 
U2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdfU2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdfJavier Correa
 
Adoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendicionesAdoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendicionesAlejandrino Halire Ccahuana
 
Presentación: Actividad de Diálogos adolescentes.pptx
Presentación: Actividad de  Diálogos adolescentes.pptxPresentación: Actividad de  Diálogos adolescentes.pptx
Presentación: Actividad de Diálogos adolescentes.pptxNabel Paulino Guerra Huaranca
 
SECUENCIA DIDÁCTICA Matemática 1er grado
SECUENCIA  DIDÁCTICA Matemática 1er gradoSECUENCIA  DIDÁCTICA Matemática 1er grado
SECUENCIA DIDÁCTICA Matemática 1er gradoAnaMara883998
 

Kürzlich hochgeladen (20)

PPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxPPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptx
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
 
sociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercerosociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercero
 
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
 
Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREAS
Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREASEjemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREAS
Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREAS
 
1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO
 
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionUNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
 
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAPROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
 
Tema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificaciónTema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificación
 
ficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primariaficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primaria
 
Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...
 
Tecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxTecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptx
 
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
 
U2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdfU2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdf
 
Adoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendicionesAdoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendiciones
 
Conducta ética en investigación científica.pdf
Conducta ética en investigación científica.pdfConducta ética en investigación científica.pdf
Conducta ética en investigación científica.pdf
 
Presentación: Actividad de Diálogos adolescentes.pptx
Presentación: Actividad de  Diálogos adolescentes.pptxPresentación: Actividad de  Diálogos adolescentes.pptx
Presentación: Actividad de Diálogos adolescentes.pptx
 
SECUENCIA DIDÁCTICA Matemática 1er grado
SECUENCIA  DIDÁCTICA Matemática 1er gradoSECUENCIA  DIDÁCTICA Matemática 1er grado
SECUENCIA DIDÁCTICA Matemática 1er grado
 
Tema 6.- La identidad visual corporativa y el naming.pdf
Tema 6.- La identidad visual corporativa y el naming.pdfTema 6.- La identidad visual corporativa y el naming.pdf
Tema 6.- La identidad visual corporativa y el naming.pdf
 

Diseñografico

  • 2. 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.
  • 3. 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.
  • 5. 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.
  • 6. 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.
  • 7. 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.
  • 9. 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.
  • 11. 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
  • 13. 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.
  • 14. 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.
  • 15. 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.
  • 17. 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.
  • 19. "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).
  • 20. 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.
  • 22. Un diseñador (sin importar su rama) puede realizar diseños sin conocimiento alguno sobre la materia, ya sea por gusto personal o por su sensibilidad a la creación visual (talento) sin embargo conocer de estos 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
  • 23. 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
  • 24. PUNTO Indica posición, no tiene largo ni ancho, es el principio y el fin de una línea.
  • 25. LINEA Es una sucesión de puntos, tiene largo, pero no ancho, tiene una posición y una dirección.
  • 26. PLANO Un plano tiene largo y ancho, tiene posición y dirección y además esta limitado por líneas.
  • 27. 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.
  • 28. 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
  • 29. FORMA Todo lo visible tiene una forma, la cual aporta para la percepción del ojo una identificación del objeto.
  • 30. MEDIDA Todas las formas tienen un tamaño.
  • 31. 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.
  • 32. 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.
  • 33. 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.
  • 34. 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
  • 35. 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.
  • 36. POSICION La posición de una forma depende del elemento o estructura que la contenga.
  • 37. 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)
  • 38. 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.
  • 39. 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
  • 40. REPRESENTACIÓN Se refiere a la forma de realizar el diseño: puede ser una representación realista, estilizada o semi-abstracta.
  • 41. SIGNIFICAD O Todo diseño conlleva consiente o subconscientemente un significado o mensaje.
  • 42. FUNCION Para lo que esta creado dicho diseño.
  • 43. 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.
  • 45. 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.
  • 46. La diversidad de opiniones responde a que unos consideran producto del diseño gráfico a toda manifestación gráfica y otros solamente a aquellas que se surgen como resultado de la aplicación del modelo de producción industrial; es decir, aquellas manifestaciones visuales que han sido "proyectadas" contemplando un cúmulo de necesidades de diversos tipos: productivas, simbólicas, ergonómicas, contextuales.
  • 48. PROGRAMAS UTILIZADOS EN EL DISEÑO GRAFICO Adobe Creative Suite • Photoshop • Freehand • Illustrator • Pagemaker, antecesor de Indesign. • Indesign • Dreamweaver • Flash • Fireworks
  • 49. 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
  • 51. 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.
  • 52. 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.
  • 53. ¿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.
  • 54. 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.
  • 55. 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.
  • 56. 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
  • 57. • 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
  • 58. 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
  • 59. 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.
  • 60. PRODUCTIVIDAD USO DE LA APLICACION INGRESOS FORMACION COSTOS VARIADAS A SOPORTE ERRORES
  • 61. VENTAJAS 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.
  • 62. 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.
  • 63. INTERFAZ DE USUARIO NO ES SOLO TECNOLOGIA INFORMATION ARCHITECTURE Ha DESING INTERFACE DESING
  • 64. Proceso de creación de una Interfaz de Usuario Debemos prestar mucha atención y poner mucho cuidado a la hora de elaborar una interfaz de usuario, pues la tecnología no es más que un elemento de soporte, pero ni el más importante, ni el único. Si la forma en la que se presenta la información al usuario está mal pensada, da igual la tecnología que tengamos por debajo, pues el usuario seguirá sin entender cómo obtener la información que requiere (por muy bonito que lo mostremos).Teniendo bien pensada la forma en la que queremos estructurar la información, es decir, habiendo hecho una buena Arquitectura de Información, el siguiente paso es analizar y definir los elementos de interacción.
  • 65. 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 abordar con éxito el diseño de una interfaz. Aquí es donde la tecnología sí nos puede ayudar, pues nos puede proporcionar unas herramientas de interacción u otras pero, por encima de todo, debemos pensar en el usuario y en la experiencia que experimentará éste a la hora de utilizar nuestra aplicación, buscando en todo momento la simplicidad y no hacerle pensar más de lo estrictamente necesario. Finalmente, la imagen corporativa es un elemento importante 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 coherencia y, con ella, conseguir los objetivos de imagen que se pretenden.
  • 67. 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.
  • 68. ARQUITECTURA DE LA INFORMACION Como hemos comentado más arriba, si deseamos obtener la máxima usabilidad y la mejor experiencia de usuario, también de acuerdo con la propia definición de The Information Architecture Institute, es necesario realizar una arquitectura de información antes de proceder con el diseño de la interacción o de los gráficos de la interfaz (es decir, la pantalla que finalmente visualizará y manejará el usuario final). El diseño de la arquitectura de información es una fase que se encuentra dentro del diseño de la arquitectura de la aplicación en particular y de la Enterprise Architecture en general.
  • 69. 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
  • 71. • Investigación. Se trata de conocer las personas que utilizarán la aplicación, así como el contexto en el que será utilizada. Esto permitirá a los diseñadores de interacción entender tanto las necesidades de los usuarios, como los condicionantes que posean. De esta fase se concluye con una lista de requisitos que abarcan dos escenarios diferentes: los requisitos de los usuarios y los requisitos técnicos. • Concepto. Una vez que se cuenta con los requisitos, es necesario conceptualizar las diferentes ideas y ver cuáles de ellas se ajustan de la mejor forma posible a las necesidades de los usuarios y del negocio. Ese es el objetivo de esta fase. • Implementación. Consiste en la incorporación de la solución de interacción dentro de la aplicación que se está desarrollando.
  • 72. Diseño. Finalizada la conceptualización de la idea, se procede con el diseño de la interfaz. Esta fase cuenta con tres etapas: Definición de la interacción (con el fin de crear un marco de trabajo donde la interacción tiene lugar), Definición de los elementos de interacción (menús, botones, formularios, etc. que darán soporte a la interacción) y Prototipo (para comprobar la validez del diseño). • Test de usuario. Dado que ya contamos con el prototipo, es necesario realizar test de usabilidad XGLOSARIOX con los usuarios, con el fin de comprobar que la solución propuesta satisface las necesidades perseguidas y se encuentra a la altura de las expectativas. Normalmente, se encuentran mejoras a incorporar y, por tanto, se realizan diferentes iteraciones volviendo a la fase de concepto. Una vez concluidas las iteraciones que garantizan el cumplimiento de las expectativas de los usuarios, se procede con la siguiente fase.
  • 73. 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
  • 74. 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:
  • 75. 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 se entremezcla con el proceso de HCI. Adicionalmente, las fases de creación son prácticamente idénticas a las de HCI, pero ahora, desde el punto de vista gráfico. Implementación diseño. de interfaz. Una vez que se ha 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 se haya realizado.
  • 77. "El diseño no se trata de hacer cosas bonitas, sino inteligentes"