Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Interfaces Visuales
                              Una aproximación desde el diseño
                  o un resumen de conce...
Interfaces Visuales
             Introducción                             Interfaz gráfica de usuario
             Antecede...
Interfaces Visuales


                                    Introducción




profundización diseño digital - programa de dis...
Interfaces Visuales
        Bibliografía


        The Humane Interface: New Directions for Designing Interactive Systems....
Interfaces Visuales
         Documentos para su lectura


         Design as Tool for Cognitive Metabolism: From Knowledge...
Interfaces Visuales
         Bibliografía complementaria.


         Dix, Alan, J. Finlay, G. Abowd, R. Beale, Human Compu...
Interfaces Visuales
               En el contexto tradicional, interfaz es el nombre que
               resume la interacc...
Interfaces Visuales
          Hasta la Revolución Industrial, muy pocas personas sabían
          operar una máquina, pero...
Interfaces Visuales


                                   Antecedentes




profundización diseño digital - programa de dise...
Interfaces Visuales
         Vannevar Bush (11 de marzo de 1890 - 30 de junio de 1974) fue un ingeniero y científico
      ...
Interfaces Visuales
         Fue el inventor teórico, porque aún no existe físicamente, de un dispositivo que llamó
      ...
Interfaces Visuales
        Alan Mathison Turing (23 de junio de 1912 - 7 de junio de 1954). Fue un matemático,
        in...
Interfaces Visuales
        John von Neumann zu Margitta (28 de diciembre de 1903 - 8 de febrero de 1957) fue un
        m...
Interfaces Visuales
      Douglas C. Engelbart (n. en
      Oregon, Estados Unidos, el 30
      de enero de 1925).
      E...
Interfaces Visuales
       Como operario de radar en las Filipinas durante la Segunda Guerra Mundial, Engelbart
       se ...
Interfaces Visuales
      Ivan Edward Sutherland (nació en 1938 en Hastings,
      Nebraska) es programador informático y ...
Interfaces Visuales




profundización diseño digital - programa de diseño visual - universidad de caldas   Mario H. Valen...
Interfaces Visuales
                     En 1963, Ivan Sutherland realiza Sketchpad, un equipo con lápiz
                 ...
Interfaces Visuales
         Theodore Holm Nelson es un filósofo, sociólogo y pionero de la tecnología de la
         infor...
Interfaces Visuales




profundización diseño digital - programa de diseño visual - universidad de caldas   Mario H. Valen...
Interfaces Visuales


                                  Concepto de Interfaz




profundización diseño digital - programa ...
Interfaces Visuales
         El primer concepto de interfaz se relaciona con el proceso de
         comunicación del hombr...
Interfaces Visuales
         Un concepto más evolucionado de interfaz, incluye también
         aspectos cognitivos y emoc...
Interfaces Visuales
             Dos perspectivas desde el diseño visual

                      La interfaz como pantalla ...
Interfaces Visuales
        La interfaz como pantalla
        Diseño de interfaces visuales tomando como base las técnicas...
Interfaces Visuales
        Se retoman las raíces estéticas y funcionales de disciplinas como


           Diseño gráfico
 ...
Interfaces Visuales
         En el diseño de interfaces visuales la comunicación se articula a
         través de un lengu...
Interfaces Visuales
         Categorías del Proceso visual (Lenguaje).


            Elegancia y simplicidad.
            ...
Interfaces Visuales
      Elegancia y simplicidad.

           Principios
                       Unidad
                  ...
Interfaces Visuales
      Elegancia y simplicidad.

                  Reducción formas
                                   ...
Interfaces Visuales
      Elegancia y simplicidad.
           Errores comunes
                      Desorden y ruido visua...
Interfaces Visuales
      Elegancia y simplicidad.


           Técnicas
                      Reducir el diseño a lo esen...
Interfaces Visuales
      Escala contraste proporción variables visuales

           Principios
                       Cla...
Interfaces Visuales
      Escala contraste proporción variables visuales



                                  Figura y fon...
Interfaces Visuales
      Escala contraste proporción variables visuales

           Errores comunes
                     ...
Interfaces Visuales
      Escala contraste proporción variables visuales

           Técnicas
                      Test d...
Interfaces Visuales
      Organización y estructura visual.
      Organización perceptual

           Principios
         ...
Interfaces Visuales
      Organización y estructura visual.
      Organización perceptual
                        Estructu...
Interfaces Visuales
      Organización y estructura visual.
      Organización perceptual
           Errores comunes
     ...
Interfaces Visuales
                   Organización y estructura visual.
                   Organización perceptual

     ...
Interfaces Visuales
      Módulo y secuencia
      Diseño basado en retículas

           Principios
                     ...
Interfaces Visuales
      Módulo y secuencia
      Diseño basado en retículas

                       cuadrícula de base
 ...
Interfaces Visuales
      Módulo y secuencia
      Diseño basado en retículas

           Errores comunes
                ...
Interfaces Visuales
      Módulo y secuencia
      Diseño basado en retículas

           Técnicas
                      R...
Interfaces Visuales
      Imagen y representación
      Elementos semióticos

           Principios
                      ...
Interfaces Visuales
      Imagen y representación
      Elementos semióticos

                Medios adecuados de
        ...
Interfaces Visuales
      Imagen y representación
      Elementos semióticos
           Errores comunes
                  ...
Interfaces Visuales
      Imagen y representación
      Elementos semióticos

           Técnicas
                      Se...
Interfaces Visuales
      Estilo


           Principios
                       Distinción
                       Integrid...
Interfaces Visuales
      Estilo

                              Guías de estilo
             Objetivo de los emisores     ...
Interfaces Visuales
      Estilo

         Errores comunes
                   Innovación injustificada
                   C...
Interfaces Visuales
      Estilo

         Técnicas
                   Respetar las guías de estilo.
                   Re...
Upcoming SlideShare
Loading in …5
×

Interfaces visuales

10,059 views

Published on

una aproximación a principios básicos del diseño aplicados al diseño digital, y algunas apreciaciones sobre principios básicos de diseño digital

Published in: Design

Interfaces visuales

  1. 1. Interfaces Visuales Una aproximación desde el diseño o un resumen de conceptos básicos de diseño jueves 23 de septiembre de 2010
  2. 2. Interfaces Visuales Introducción Interfaz gráfica de usuario Antecedentes Usabilidad Simplicidad Conceptos y desarrollos WIMP / Post-WIMP Creadores Interfaz como sistema Concepto de Interfaz Diseño de la interacción Diseño de interfaz Percepción e interacción Proceso visual e información Apropiación de la tecnología Interfaz extendida profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  3. 3. Interfaces Visuales Introducción profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  4. 4. Interfaces Visuales Bibliografía The Humane Interface: New Directions for Designing Interactive Systems. Jef Raskin. Addison-Wesley Professional, 2000. Interfaces de las Comunidades Virtuales. Felipe C. Londoño L. Universidad de Caldas, 2005. Ergonomía. Fundamentos. Pedro Mondelo. UPC. AlfaOmega. El diseño de la interfaz en los programas de computador. Gui Bonsiepe. Interface. An approach to design. 1999. Interfaz e interactividad. Claudia Giannetti. Estética Digital. El lenguaje de los nuevos medios. Lev Manovich. The MIT Press. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  5. 5. Interfaces Visuales Documentos para su lectura Design as Tool for Cognitive Metabolism: From Knowledge Production to Knowledge Presentation", de Gui Bonsieppe. La Interficie como sistema, de Felipe C. Londoño. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  6. 6. Interfaces Visuales Bibliografía complementaria. Dix, Alan, J. Finlay, G. Abowd, R. Beale, Human Computer Interaction, second edition, Prentice-Hall, 1998. Lorés, Jesús (Editor), Curso de Introducción a la Interacción Persona-Ordenador, http://griho.udl.es/ipo/libroe.html. Mandel, Theo, The Elements of User Interface Design, John Wiley & Sons, 1997. Norman, Donald, The invisible computer, MIT Press, 1998. Norman, Donald, The design of everyday things, Doubleday, 1990. Preece, Jenny, Human Computer Interaction, Addison-Wesley, 1994. Shneiderman, Ben, Designing the User Interface, Addison-Wesley, 1987. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  7. 7. Interfaces Visuales En el contexto tradicional, interfaz es el nombre que resume la interacción persona-ordenador: el hardware y el software a través del cual el usuario interactúa con un hipermedia o un sistema informático. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  8. 8. Interfaces Visuales Hasta la Revolución Industrial, muy pocas personas sabían operar una máquina, pero, a partir del surgimiento de la tecnología, y con la aparición del televisor, las videocaseteras, la radio, la máquina lavadora o los automoviles, las personas han tenido la experiencia de un “acto de interfaz” con algún equipamiento profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  9. 9. Interfaces Visuales Antecedentes profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  10. 10. Interfaces Visuales Vannevar Bush (11 de marzo de 1890 - 30 de junio de 1974) fue un ingeniero y científico estadounidense. Es conocido por el rol político que tuvo en el desarrollo de la bomba atómica, por su idea Memex, que es un concepto precursor a la World Wide Web y por formar parte del proyecto de alto secreto Majestic 12. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  11. 11. Interfaces Visuales Fue el inventor teórico, porque aún no existe físicamente, de un dispositivo que llamó MEMEX, Memory Expander. Bush identificó que el crecimiento en la investigación era muy grande y que la información disponible para investigación también creció, pero el acceso a esa información seguía haciéndose en la misma forma que hace 100 años y que esto retrasaba los resultados de los científicos e investigadores. Así, basándose en el funcionamiento de la mente humana pensó en un dispositivo que asociara información, es decir, que operar por asociación y eso fue el MEMEX. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  12. 12. Interfaces Visuales Alan Mathison Turing (23 de junio de 1912 - 7 de junio de 1954). Fue un matemático, informático teórico, criptógrafo y filósofo inglés. Se le considera uno de los padres de la Ciencia de la computación siendo el precursor de la informática moderna. Proporcionó una influyente formalización de los conceptos de algoritmo y computación: la máquina de Turing. Formuló su propia versión de la hoy ampliamente aceptada Tesis de Church-Turing, la cual postula que cualquier modelo computacional existente tiene las mismas capacidades algorítmicas, o un subconjunto, de las que tiene una máquina de Turing, sele considera el padre de la inteligencia artificial profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  13. 13. Interfaces Visuales John von Neumann zu Margitta (28 de diciembre de 1903 - 8 de febrero de 1957) fue un matemático húngaro-estadounidense, de ascendencia judía, que realizó contribuciones importantes en física cuántica, análisis funcional, teoría de conjuntos, informática, economía, análisis numérico, hidrodinámica (de explosiones), estadística y muchos otros campos de la matemática. Recibió su doctorado en matemáticas de la Universidad de Budapest a los 23 años. Von Neumann le dio su nombre a la arquitectura de von Neumann, utilizada en casi todos los computadores, por su publicación del concepto; aunque muchos piensan que este nombramiento ignora la contribución de J. Presper Eckert y John William Mauchly, quienes aportaron al concepto durante su trabajo en ENIAC.1 Virtualmente, cada computador personal, microcomputador, minicomputador y supercomputador es una máquina de von Neumann. El término "máquina de von Neumann" profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  14. 14. Interfaces Visuales Douglas C. Engelbart (n. en Oregon, Estados Unidos, el 30 de enero de 1925). En otoño de 1968, en una conferencia de expertos en informática, Doug Engelbart hizo una presentación que duró 90 minutos. Además de hacer la primera demostración pública del ratón, incluyó una conexión en p a n t a l l a c o n s u c e n t ro d e investigación, es decir, fue la primera vídeo-conferencia de la historia. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  15. 15. Interfaces Visuales Como operario de radar en las Filipinas durante la Segunda Guerra Mundial, Engelbart se inspiró en un artículo de Vannevar Bush, 'As We May Think', para buscar la manera de usar las computadoras para mejorar la sociedad. Cuando terminó la guerra, y siguiendo esta idea, Engelbart renunció a su trabajo como ingeniero y se fue a estudiar a UC Berkeley. Allí trabajó en la versión previa de Internet, la red militar ARPANET. Engelbart fue la fuerza motriz detrás del diseño del primer sistema en línea, On-Line System (también conocido como NLS), en el Stanford Research Institute. Su oficina fue el segundo nodo de la red. Junto con su equipo en el Augmentation Research Center desarrolló varios elementos básicos de la interfaz humana de las computadoras actuales, como pantallas con imágenes en bits, ventanas múltiples, y software multiusuario. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  16. 16. Interfaces Visuales Ivan Edward Sutherland (nació en 1938 en Hastings, Nebraska) es programador informático y un pionero de Internet, entre otras cosas. Ivan Sutherland es considerado por muchos ser el creador de los gráficos de la computadora. Comenzando con su tesis de doctorado, Sketchpad o bloc de bocetos, Sutherland ha contribuido con numerosas ideas al estudio de los gráficos de la computadora y de la interacción de la computadora. Ivan introdujo conceptos tales como el modelado tridimensional de la computadora, simulaciones visuales, diseño automatizado (CAD) y realidad virtual. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  17. 17. Interfaces Visuales profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  18. 18. Interfaces Visuales En 1963, Ivan Sutherland realiza Sketchpad, un equipo con lápiz óptico fijo en la mesa que al moverlo en una dirección activaba acciones en un monitor conectado a una computadora, utilizando además un primer sistema con interfaz simbólico, con manipulación directa de símbolos gráficos. Un operador podía crear gráficos directamente en la pantalla al tocarla con un lapiz de luz. Al cambiar algo en la pantalla, también se cambiaba en la memoria del ordenador. La pantalla en tiempo real se hacía interactiva: “Vivimos en un mundo físico con cuyas propiedades nos hemos familiarizado con el tiempo y que podemos predecir y observar. Pero nos falta la misma familiaridad con conceptos no perceptibles en el mundo físico. Es en la ventana electrónica en donde mirar el maravilloso mundo matemático”. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  19. 19. Interfaces Visuales Theodore Holm Nelson es un filósofo, sociólogo y pionero de la tecnología de la información estadounidense. Actualmente es profesor de Environmental Information en la Universidad de Keio, Japón, y profesor de multimedia en la Universidad de Southampton, Inglaterra. Pero por lo que es más conocido es por acuñar los términos hipertexto e hipermedia y por ser el fundador del proyecto Xanadu en la década del 60. La idea de Xanadu -surgida después de una visita al Xerox PARC- era crear una biblioteca en línea con toda la literatura de la humanidad. Su padre era Ralph Nelson, director premiado con un Emmy de la Academia, y su madre, Celeste Holm, actriz americana de televisión, también premiada con dicho galardón. El empuje principal de su trabajo ha sido hacer que los ordenadores sean fácilmente accesibles a la gente normal. Su lema es: “el interfaz debe ser tan simple que un principiante en una emergencia pueda entenderlo en un plazo de 10 segundos”. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  20. 20. Interfaces Visuales profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  21. 21. Interfaces Visuales Concepto de Interfaz profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  22. 22. Interfaces Visuales El primer concepto de interfaz se relaciona con el proceso de comunicación del hombre y la máquina. Usualmente se vincula interfaz con una pantalla o una membrana que contiene instrucciones, y su nombre es sinónimo de elementos tangibles dibujados en la superficie, como mapas, dibujos o diseños diversos. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  23. 23. Interfaces Visuales Un concepto más evolucionado de interfaz, incluye también aspectos cognitivos y emocionales de la experiencia del usuario. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  24. 24. Interfaces Visuales Dos perspectivas desde el diseño visual La interfaz como pantalla estática La interfaz como objeto profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  25. 25. Interfaces Visuales La interfaz como pantalla Diseño de interfaces visuales tomando como base las técnicas orientadas a la comunicación Las interfaces son sistemas de comunicación Su diseño debe responder a estándares formales y estéticos Las técnicas que proporcionan mecanismos para el diseño de pantallas estáticas hacen parte de sistemas dinámicos Principio: El diseño visual es la primera y ultima parte de la interfaz observada por el usuario profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  26. 26. Interfaces Visuales Se retoman las raíces estéticas y funcionales de disciplinas como Diseño gráfico Diseño Industrial Arquitectura Cine profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  27. 27. Interfaces Visuales En el diseño de interfaces visuales la comunicación se articula a través de un lenguaje (visual) que integra: Un vocabulario Formal, que parte de elementos básicos Una sintaxis visual que describe y controla la articulación de los elementos en el sistema “El diseño visual resuelve problemas de comunicación en una forma que va entre la efectividad funcional y el placer estético” Felipe C Londoño 2005. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  28. 28. Interfaces Visuales Categorías del Proceso visual (Lenguaje). Elegancia y simplicidad. Escala, contraste, proporción, variables visuales. Organización y estructura visual, organización perceptual. Módulo y secuencia, Diseño basado en retículas. Imagen y representación, Elementos semióticos. Estilo “La historia del diseño es la histria de la tecnología y las habilidaddes del hombre” Philip Meggs, 1992. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  29. 29. Interfaces Visuales Elegancia y simplicidad. Principios Unidad Refinamiento Buena forma profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  30. 30. Interfaces Visuales Elegancia y simplicidad. Reducción formas http://absolut.com/ geométricas simples. Tamaños y texturas Variaciones tipográficas profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  31. 31. Interfaces Visuales Elegancia y simplicidad. Errores comunes Desorden y ruido visual. Interferencia entre elementos competitivos. Utilizar la estructura explícita como soporte. Traducción literal. Excesivo detalle y embellecimiento Dimensionalidad gratuita Presentarlo todo profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  32. 32. Interfaces Visuales Elegancia y simplicidad. Técnicas Reducir el diseño a lo esencial Regularizar los elementos del diseño Combinar los elementos para sacarle el máximo provecho profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  33. 33. Interfaces Visuales Escala contraste proporción variables visuales Principios Claridad Armonía Actividad Control profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  34. 34. Interfaces Visuales Escala contraste proporción variables visuales Figura y fondo grupos identificables http://www.apple.com/ Caracterizaciones estéticas profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  35. 35. Interfaces Visuales Escala contraste proporción variables visuales Errores comunes Contraste insuficiente Excesivo contraste Interferencias visuales Tensión espacial Exageradas o reducidas dimensiones profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  36. 36. Interfaces Visuales Escala contraste proporción variables visuales Técnicas Test de “squint”. Establecer capas perceptuales. Agudizar las distinciones visuales. integrar figura y fondo. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  37. 37. Interfaces Visuales Organización y estructura visual. Organización perceptual Principios Agrupar Jerarquizar Relacionar Crear Balance profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  38. 38. Interfaces Visuales Organización y estructura visual. Organización perceptual Estructura general Jerarquía http://www.vw.com/ Elementos en conjunto Equilibrio simetría Alineación de Elementos Ajustes ópticos Espacios negativos profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  39. 39. Interfaces Visuales Organización y estructura visual. Organización perceptual Errores comunes Capas desorganizadas simetrías conflictivas relaciones internas ambiguas Etiquetas alineadas pero no controladas Falsa Estructura Excesiva densidad en la pantalla profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  40. 40. Interfaces Visuales Organización y estructura visual. Organización perceptual Técnicas Usar la simetría para asegurar balance. Usar alineamiento para establecer relaciones visuales Realizar ajustes ópticos para la visión humana. Conformar la pantalla con espacios negativos profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  41. 41. Interfaces Visuales Módulo y secuencia Diseño basado en retículas Principios Elementos enfocados. Flexibilidad. Aplicaciones consistentes. profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  42. 42. Interfaces Visuales Módulo y secuencia Diseño basado en retículas cuadrícula de base http://sunspotworld.com/ repetición Unificación de los módulos Iconos Flexibles profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  43. 43. Interfaces Visuales Módulo y secuencia Diseño basado en retículas Errores comunes Posición arbitraria de los componentes Tamaños de ventanas y capas al azar Tamaños de iconos y metáforas no relacionadas Lenguaje visual inconstante profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  44. 44. Interfaces Visuales Módulo y secuencia Diseño basado en retículas Técnicas Reforzar la estructura a través de la repetición. Establecer unidades modulares. Establecer secuencias con base a mallas profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  45. 45. Interfaces Visuales Imagen y representación Elementos semióticos Principios Inmediatez Generalización Cohesividad caracterización profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  46. 46. Interfaces Visuales Imagen y representación Elementos semióticos Medios adecuados de http://www.mozilla-europe.org/es/firefox/ representación texto + iconografía simplicidad visual formatos de imagen profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  47. 47. Interfaces Visuales Imagen y representación Elementos semióticos Errores comunes Sintaxis engañosa Ensamble confuso Elementos secundarios dominantes Usar tipografía como imagen Usar imagen para concepto abstractos imagen basada en oscuras alusiones Lenguajes dependientes de una cultura Metáforas ofensivas profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  48. 48. Interfaces Visuales Imagen y representación Elementos semióticos Técnicas Seleccionar la imagen correcta Refinar a partir de la abstracción progresiva Asegurar la consistencia visual profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  49. 49. Interfaces Visuales Estilo Principios Distinción Integridad Comprensión Apropiación profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  50. 50. Interfaces Visuales Estilo Guías de estilo Objetivo de los emisores http://whatisthematrix.warnerbros.com/ Reconocimiento del usuario Variaciones de la aplicación final Validación de la interfaz profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  51. 51. Interfaces Visuales Estilo Errores comunes Innovación injustificada Combinar elementos no relacionados Realización parcial Inconsistencias internas y externas profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010
  52. 52. Interfaces Visuales Estilo Técnicas Respetar las guías de estilo. Reconocer los emisores Reconocer al público Tener en cuenta el uso y las variaciones de la aplicación Tener en cuenta los diferentes soportes profundización diseño digital - programa de diseño visual - universidad de caldas Mario H. Valencia G. jueves 23 de septiembre de 2010

×