SlideShare ist ein Scribd-Unternehmen logo
1 von 27
Downloaden Sie, um offline zu lesen
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
diseño de interfaces
[ taller de egreso ]
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
[del ingl. interface, superficie de contacto]
1. conexión física y funcional entre dos aparatos o
sistemas independientes.
2. zona de comunicación o acción de un sistema
sobre otro.
3. dispositivo que conecta dos aparatos o circuitos.
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
1. conexión física y funcional entre dos aparatos o sistemas
independientes.
2. zona de comunicación o acción de un sistema sobre otro.
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
3. dispositivo que conecta dos aparatos o circuitos
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
[evolución de una interfaz]
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
[evolución de una interfaz]
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
[evolución de una interfaz]
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
sistema informático
hardware
software
usuariointeracción
interfaz
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interacción
1. acción que se ejerce recíprocamente entre
dos o más objetos, agentes, fuerzas,
funciones, etc.
2. relación proactiva entre personas y
computadores, estableciendo flujos de
comunicación bidireccional.
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
[principios que rigen el diseño]
. necesidad. [consideración de las necesidades del usuario]
. transparencia. [permitir acciones o aprendizajes del usuario]
. ergonomía. [confort y limitaciones de los usuarios]
. consistencia. [coherencia estética]
. libertad. [movimiento a través de capas de información]
. reversibilidad. [acciones de los usuarios]
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz de usuario
[tipos de interfaces]
interfaz física: un ratón y un teclado que sirven
para introducir y manipular datos en nuestro
ordenador.
interfaz gráfica de usuario (GUI) permite,
mediante iconos (cursor + objetos gráficos
metafóricos), interactuar con los elementos
gráficos convirtiendo al ser humano en usuario
de la aplicación.
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz gráfica de usuario
[evolución]
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Interfaz de comando
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Xerox Star (1981)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Mac OS 1.0 (1984)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows 1.0 (1985)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows 3.0 (1990)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Mac OS 7 (1991)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows 95 (1995)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Mac OS X - Aqua (2001)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows XP - Luna (2001)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Mac OS X Leopard (2007)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows Vista - Aero (2007)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Mac OS X Mountain Lion (2012)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows 8 - Metro (2012)
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz gráfica de usuario
[evolución]
Las GUI funcionan basadas en el paradigma WIMP
(windows, icon, menu, pointer) en donde la
interacción se ve mediada por un dispositivo de
entrada (teclado, mouse, touchpad, lápiz óptico, etc.)
Las interfaces post-WIMP, también llamadas NUI (natural
user interface) se manipulan mediante movimientos
gestuales de la mano, del cuerpo, o el uso de la voz.
Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
diseño de interfaces
[ taller de egreso ]

Weitere ähnliche Inhalte

Ähnlich wie Interfaces gráficas

Ähnlich wie Interfaces gráficas (20)

Interfases gui
Interfases guiInterfases gui
Interfases gui
 
Interfaz humana
Interfaz humanaInterfaz humana
Interfaz humana
 
Enfoque transformacional
Enfoque transformacionalEnfoque transformacional
Enfoque transformacional
 
Unidad educativa
Unidad educativaUnidad educativa
Unidad educativa
 
08 sw y hw diseño
08 sw y hw diseño08 sw y hw diseño
08 sw y hw diseño
 
Interfaz gráfica de usuario 2015-2016
Interfaz gráfica de usuario 2015-2016Interfaz gráfica de usuario 2015-2016
Interfaz gráfica de usuario 2015-2016
 
Tema1interaccionpersonaordenador2013 130922161327-phpapp02
Tema1interaccionpersonaordenador2013 130922161327-phpapp02Tema1interaccionpersonaordenador2013 130922161327-phpapp02
Tema1interaccionpersonaordenador2013 130922161327-phpapp02
 
Tema1interaccionpersonaordenador2013 130922161327-phpapp02
Tema1interaccionpersonaordenador2013 130922161327-phpapp02Tema1interaccionpersonaordenador2013 130922161327-phpapp02
Tema1interaccionpersonaordenador2013 130922161327-phpapp02
 
UX ÁGIL
UX ÁGILUX ÁGIL
UX ÁGIL
 
Descripción de lo que se esta haciendo
Descripción de lo que se esta  haciendoDescripción de lo que se esta  haciendo
Descripción de lo que se esta haciendo
 
Interfaz terminada 2 1
Interfaz terminada 2 1Interfaz terminada 2 1
Interfaz terminada 2 1
 
Diseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoDiseño de interfaz importancia y proceso
Diseño de interfaz importancia y proceso
 
Clase 6 software 2
Clase 6 software 2Clase 6 software 2
Clase 6 software 2
 
Presentac..[1]
Presentac..[1]Presentac..[1]
Presentac..[1]
 
Intrefaz gráfica de usuario
Intrefaz gráfica de usuarioIntrefaz gráfica de usuario
Intrefaz gráfica de usuario
 
Intrefaz gráfica de usuario
Intrefaz gráfica de usuarioIntrefaz gráfica de usuario
Intrefaz gráfica de usuario
 
Intrefaz
 Intrefaz Intrefaz
Intrefaz
 
Ambiente de trabajo de so
Ambiente de trabajo de soAmbiente de trabajo de so
Ambiente de trabajo de so
 
Presentación Multimedia [Cad - 3 D]
Presentación Multimedia [Cad - 3 D]Presentación Multimedia [Cad - 3 D]
Presentación Multimedia [Cad - 3 D]
 
Tema 2. Los sistemas Interactivos: El ordenador
Tema 2. Los sistemas Interactivos: El ordenadorTema 2. Los sistemas Interactivos: El ordenador
Tema 2. Los sistemas Interactivos: El ordenador
 

Mehr von Jorge Cantú López

CMS (administradores de contenidos)
CMS (administradores de contenidos)CMS (administradores de contenidos)
CMS (administradores de contenidos)Jorge Cantú López
 
servidores, navegadores y desarrollo web
servidores, navegadores y desarrollo webservidores, navegadores y desarrollo web
servidores, navegadores y desarrollo webJorge Cantú López
 
Taller MM I : Análisis de audiencias
Taller MM I : Análisis de audienciasTaller MM I : Análisis de audiencias
Taller MM I : Análisis de audienciasJorge Cantú López
 
Taller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuarioTaller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuarioJorge Cantú López
 
Taller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimediaTaller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimediaJorge Cantú López
 
Guionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuarioGuionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuarioJorge Cantú López
 
Portafolio (proceso de construcción)
Portafolio (proceso de construcción)Portafolio (proceso de construcción)
Portafolio (proceso de construcción)Jorge Cantú López
 
introducción Portafolios Digitales
introducción Portafolios Digitalesintroducción Portafolios Digitales
introducción Portafolios DigitalesJorge Cantú López
 
Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012Jorge Cantú López
 
Crossmedia 07: Sistemas Gestores de Comtenido
Crossmedia 07: Sistemas Gestores de ComtenidoCrossmedia 07: Sistemas Gestores de Comtenido
Crossmedia 07: Sistemas Gestores de ComtenidoJorge Cantú López
 

Mehr von Jorge Cantú López (20)

Digu 05. guías de estilo
Digu 05. guías de estiloDigu 05. guías de estilo
Digu 05. guías de estilo
 
Digu 04. modelos y affordances
Digu 04. modelos y affordancesDigu 04. modelos y affordances
Digu 04. modelos y affordances
 
Digu 03. Estilos de interfaz
Digu 03. Estilos de interfazDigu 03. Estilos de interfaz
Digu 03. Estilos de interfaz
 
DIGU 02. diseño de interfaces
DIGU 02. diseño de interfacesDIGU 02. diseño de interfaces
DIGU 02. diseño de interfaces
 
CMS (administradores de contenidos)
CMS (administradores de contenidos)CMS (administradores de contenidos)
CMS (administradores de contenidos)
 
servidores, navegadores y desarrollo web
servidores, navegadores y desarrollo webservidores, navegadores y desarrollo web
servidores, navegadores y desarrollo web
 
Modelos comunicación digital
Modelos comunicación digitalModelos comunicación digital
Modelos comunicación digital
 
Imagenes para la web
Imagenes para la webImagenes para la web
Imagenes para la web
 
Html5+css3 02
Html5+css3 02Html5+css3 02
Html5+css3 02
 
Portafolio intro
Portafolio introPortafolio intro
Portafolio intro
 
Taller MM I : Análisis de audiencias
Taller MM I : Análisis de audienciasTaller MM I : Análisis de audiencias
Taller MM I : Análisis de audiencias
 
HTML5+CSS3 01
HTML5+CSS3 01HTML5+CSS3 01
HTML5+CSS3 01
 
Taller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuarioTaller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuario
 
Taller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimediaTaller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimedia
 
Guionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuarioGuionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuario
 
Portafolio (proceso de construcción)
Portafolio (proceso de construcción)Portafolio (proceso de construcción)
Portafolio (proceso de construcción)
 
introducción Portafolios Digitales
introducción Portafolios Digitalesintroducción Portafolios Digitales
introducción Portafolios Digitales
 
Crossmedia 00: presentación
Crossmedia 00: presentaciónCrossmedia 00: presentación
Crossmedia 00: presentación
 
Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012
 
Crossmedia 07: Sistemas Gestores de Comtenido
Crossmedia 07: Sistemas Gestores de ComtenidoCrossmedia 07: Sistemas Gestores de Comtenido
Crossmedia 07: Sistemas Gestores de Comtenido
 

Interfaces gráficas

  • 1. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos diseño de interfaces [ taller de egreso ]
  • 2. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interfaz [del ingl. interface, superficie de contacto] 1. conexión física y funcional entre dos aparatos o sistemas independientes. 2. zona de comunicación o acción de un sistema sobre otro. 3. dispositivo que conecta dos aparatos o circuitos.
  • 3. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interfaz 1. conexión física y funcional entre dos aparatos o sistemas independientes. 2. zona de comunicación o acción de un sistema sobre otro.
  • 4. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interfaz 3. dispositivo que conecta dos aparatos o circuitos
  • 5. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interfaz [evolución de una interfaz]
  • 6. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interfaz [evolución de una interfaz]
  • 7. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interfaz [evolución de una interfaz]
  • 8. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos sistema informático hardware software usuariointeracción interfaz
  • 9. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interacción 1. acción que se ejerce recíprocamente entre dos o más objetos, agentes, fuerzas, funciones, etc. 2. relación proactiva entre personas y computadores, estableciendo flujos de comunicación bidireccional.
  • 10. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interfaz [principios que rigen el diseño] . necesidad. [consideración de las necesidades del usuario] . transparencia. [permitir acciones o aprendizajes del usuario] . ergonomía. [confort y limitaciones de los usuarios] . consistencia. [coherencia estética] . libertad. [movimiento a través de capas de información] . reversibilidad. [acciones de los usuarios]
  • 11. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interfaz de usuario [tipos de interfaces] interfaz física: un ratón y un teclado que sirven para introducir y manipular datos en nuestro ordenador. interfaz gráfica de usuario (GUI) permite, mediante iconos (cursor + objetos gráficos metafóricos), interactuar con los elementos gráficos convirtiendo al ser humano en usuario de la aplicación.
  • 12. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interfaz gráfica de usuario [evolución]
  • 13. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Interfaz de comando
  • 14. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Xerox Star (1981)
  • 15. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Mac OS 1.0 (1984)
  • 16. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Windows 1.0 (1985)
  • 17. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Windows 3.0 (1990)
  • 18. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Mac OS 7 (1991)
  • 19. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Windows 95 (1995)
  • 20. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Mac OS X - Aqua (2001)
  • 21. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Windows XP - Luna (2001)
  • 22. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Mac OS X Leopard (2007)
  • 23. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Windows Vista - Aero (2007)
  • 24. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Mac OS X Mountain Lion (2012)
  • 25. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos Windows 8 - Metro (2012)
  • 26. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos interfaz gráfica de usuario [evolución] Las GUI funcionan basadas en el paradigma WIMP (windows, icon, menu, pointer) en donde la interacción se ve mediada por un dispositivo de entrada (teclado, mouse, touchpad, lápiz óptico, etc.) Las interfaces post-WIMP, también llamadas NUI (natural user interface) se manipulan mediante movimientos gestuales de la mano, del cuerpo, o el uso de la voz.
  • 27. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos diseño de interfaces [ taller de egreso ]