SlideShare une entreprise Scribd logo
1  sur  43
Télécharger pour lire hors ligne
EN LA CLASE PASADA...
       Wireframes
1.- EL CENTRO ESTA EN LOS
        CONTENIDOS
2.- LO REPRESENTAMOS EN
       WIREFRAMES



  WIREFRAMES
3.- ACÁ ES DONDE
TOMAMOS DECISIONES.
VIDEO
ARQUITECTURA DE LA
    INFORMACIÓN 
          +
DISEÑO DE INTERFACES
EN RESUMEN:
PASO1: ARQUETIPOS(OBSERVAR)
PASO2: ARQUITECTURA DE LA 
       INFORMACIÓN
PASO3: DISEÑO DE LA 
INFORMACIÓN (WIREFRAMES)
PASO4: DISEÑO DE INTERFACES
PASO5: DESARROLLO E
  IMPLEMENTACIÓN
CLASE4: INTERFACES DE
     USUARIO (UI)
Como diseñamos para los usuarios, no para nosotros
WIKIPEDIA DICE:

"Su objetivo es que las aplicaciones o los objetos
sean más atractivos y además, hacer que la
interacción con el usuario sea lo más intuitiva
posible, conocido como el diseño centrado en el
usuario."
Diseño Visual
                             Usabilidad
                Diseño
               centrado 
             en el usuario




Desarrollo
  front
NUESTROS DISEÑOS DEBEN
SER TRANSMITIR EMOCIONES
      A LOS USUARIOS
ALGUNOS BUENOS
EJEMPLOS EN CHILE
ALGUNOS BUENOS
EJEMPLOS DEL MUNDO
http://www.liptonicetea.pl/
http://reverseburo.com/
http://www.kaleidoscope.ro/
http://thekitchencommunity.com/
http://x-doria.com/
http://www.tiendy.com/
Clase4: DIseño de interfaces de Usuario(UI)

Contenu connexe

Tendances

Usabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - PamplonaUsabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - Pamplona
Susana Heredia
 

Tendances (18)

Seminario Taller: Usabilidad
Seminario Taller: UsabilidadSeminario Taller: Usabilidad
Seminario Taller: Usabilidad
 
Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación
Patrones de Diseño Web (Getting Input - Obtención de Información) - PresentaciónPatrones de Diseño Web (Getting Input - Obtención de Información) - Presentación
Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación
 
Introducción a Experiencia de usuario y Usabilidad
Introducción a Experiencia de usuario y UsabilidadIntroducción a Experiencia de usuario y Usabilidad
Introducción a Experiencia de usuario y Usabilidad
 
Trabajo del sena laura criollo 10-1
Trabajo del sena  laura criollo 10-1Trabajo del sena  laura criollo 10-1
Trabajo del sena laura criollo 10-1
 
Prezi.
Prezi.Prezi.
Prezi.
 
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño webConceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
 
Diseñado interfaces "intuitivas" mediante patrones de diseño
Diseñado interfaces "intuitivas" mediante patrones de diseñoDiseñado interfaces "intuitivas" mediante patrones de diseño
Diseñado interfaces "intuitivas" mediante patrones de diseño
 
Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)Patrones de Diseño Web (Getting Input - Obtención de Información)
Patrones de Diseño Web (Getting Input - Obtención de Información)
 
Taller UX: Diseño visual - IxDA Mendoza
Taller UX: Diseño visual - IxDA MendozaTaller UX: Diseño visual - IxDA Mendoza
Taller UX: Diseño visual - IxDA Mendoza
 
Unidad 4 - Patrones de diseño web.
Unidad 4 - Patrones de diseño web.Unidad 4 - Patrones de diseño web.
Unidad 4 - Patrones de diseño web.
 
Taller UX 2019 - Patrones de diseño
Taller UX 2019  -  Patrones de diseño Taller UX 2019  -  Patrones de diseño
Taller UX 2019 - Patrones de diseño
 
De la usabilidad a los usuarios
De la usabilidad a los usuariosDe la usabilidad a los usuarios
De la usabilidad a los usuarios
 
Taller de Prototipos #DAIEU15 - Clase 01
Taller de Prototipos #DAIEU15 - Clase 01Taller de Prototipos #DAIEU15 - Clase 01
Taller de Prototipos #DAIEU15 - Clase 01
 
Usabilidad web
Usabilidad webUsabilidad web
Usabilidad web
 
UX para dispositivos móviles
UX para dispositivos móvilesUX para dispositivos móviles
UX para dispositivos móviles
 
UX & Usabilidad
UX & UsabilidadUX & Usabilidad
UX & Usabilidad
 
Usabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - PamplonaUsabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - Pamplona
 
¿Diseñar para los usuarios o diseñar con los usuarios?
¿Diseñar para los usuarios o diseñar con los usuarios?¿Diseñar para los usuarios o diseñar con los usuarios?
¿Diseñar para los usuarios o diseñar con los usuarios?
 

En vedette

Diseño De Interfaces Web
Diseño De Interfaces WebDiseño De Interfaces Web
Diseño De Interfaces Web
hanoc
 

En vedette (10)

Diseño De Interfaces Web
Diseño De Interfaces WebDiseño De Interfaces Web
Diseño De Interfaces Web
 
Diseño de Interfaces
Diseño de InterfacesDiseño de Interfaces
Diseño de Interfaces
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
 
Web.social.ux
Web.social.ux Web.social.ux
Web.social.ux
 
Clase2: Usabilidad
Clase2: UsabilidadClase2: Usabilidad
Clase2: Usabilidad
 
Tema 4 estrategias de diseño
Tema 4 estrategias de diseñoTema 4 estrategias de diseño
Tema 4 estrategias de diseño
 
Tema 3 diseño centrado usuario (2013)
Tema 3 diseño centrado usuario (2013)Tema 3 diseño centrado usuario (2013)
Tema 3 diseño centrado usuario (2013)
 
Taller maquetacion web
Taller maquetacion webTaller maquetacion web
Taller maquetacion web
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño Web
 

Similaire à Clase4: DIseño de interfaces de Usuario(UI)

Interfaces en dispositivos móviles
Interfaces en dispositivos móvilesInterfaces en dispositivos móviles
Interfaces en dispositivos móviles
Chayincitha MAciaz
 
Interfaces en dispositivos móviles
Interfaces en dispositivos móvilesInterfaces en dispositivos móviles
Interfaces en dispositivos móviles
Chayincitha MAciaz
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañott
Eleny30
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo baño
Eleny30
 
Identificacion De La Guia De Aprendizaje 1
Identificacion De La Guia De Aprendizaje 1Identificacion De La Guia De Aprendizaje 1
Identificacion De La Guia De Aprendizaje 1
niyireth
 
Presentación sobre Web 2.0
Presentación sobre Web 2.0Presentación sobre Web 2.0
Presentación sobre Web 2.0
oscalej2
 
Presentacionsalerodig
PresentacionsalerodigPresentacionsalerodig
Presentacionsalerodig
inaki1980
 
Gui proyecto multimedia
Gui proyecto multimediaGui proyecto multimedia
Gui proyecto multimedia
Alberto Rojas
 
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Virginia Aguirre
 

Similaire à Clase4: DIseño de interfaces de Usuario(UI) (20)

Cómo prototipar exitosamente tu proyecto
Cómo prototipar exitosamente tu proyectoCómo prototipar exitosamente tu proyecto
Cómo prototipar exitosamente tu proyecto
 
Experiencia Usuaria, mas allá de la facilidad de uso
Experiencia Usuaria, mas allá de la facilidad de usoExperiencia Usuaria, mas allá de la facilidad de uso
Experiencia Usuaria, mas allá de la facilidad de uso
 
Interfaces en dispositivos móviles
Interfaces en dispositivos móvilesInterfaces en dispositivos móviles
Interfaces en dispositivos móviles
 
Interfaces en dispositivos móviles
Interfaces en dispositivos móvilesInterfaces en dispositivos móviles
Interfaces en dispositivos móviles
 
Procesos de diseño
Procesos de diseñoProcesos de diseño
Procesos de diseño
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañott
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo baño
 
Identificacion De La Guia De Aprendizaje 1
Identificacion De La Guia De Aprendizaje 1Identificacion De La Guia De Aprendizaje 1
Identificacion De La Guia De Aprendizaje 1
 
Validation Onion
Validation OnionValidation Onion
Validation Onion
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
User Experience, UX & UI
User Experience, UX & UIUser Experience, UX & UI
User Experience, UX & UI
 
Diseño de la información
Diseño de la informaciónDiseño de la información
Diseño de la información
 
Web 2.0 presentación con videos
Web 2.0 presentación con videosWeb 2.0 presentación con videos
Web 2.0 presentación con videos
 
Multimedia
MultimediaMultimedia
Multimedia
 
UX Mobile
UX MobileUX Mobile
UX Mobile
 
Presentación sobre Web 2.0
Presentación sobre Web 2.0Presentación sobre Web 2.0
Presentación sobre Web 2.0
 
Presentacionsalerodig
PresentacionsalerodigPresentacionsalerodig
Presentacionsalerodig
 
Presentación Estudiantes Webmaster Area 2º Curso
Presentación Estudiantes Webmaster Area 2º CursoPresentación Estudiantes Webmaster Area 2º Curso
Presentación Estudiantes Webmaster Area 2º Curso
 
Gui proyecto multimedia
Gui proyecto multimediaGui proyecto multimedia
Gui proyecto multimedia
 
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
 

Plus de Benjamín Preller (7)

Clase1: La web, los usuarios y la arquitectura de la Información
Clase1: La web, los usuarios y la arquitectura de la InformaciónClase1: La web, los usuarios y la arquitectura de la Información
Clase1: La web, los usuarios y la arquitectura de la Información
 
Social UX
Social UXSocial UX
Social UX
 
Dog Feeder.Guia2
Dog Feeder.Guia2Dog Feeder.Guia2
Dog Feeder.Guia2
 
Alimentador Perros Plantilla Impresion
Alimentador Perros Plantilla ImpresionAlimentador Perros Plantilla Impresion
Alimentador Perros Plantilla Impresion
 
Placa Circuito DiseñO
Placa Circuito DiseñOPlaca Circuito DiseñO
Placa Circuito DiseñO
 
Dog Feeder.Guia1
Dog Feeder.Guia1Dog Feeder.Guia1
Dog Feeder.Guia1
 
Sensor de Movimiento PIR
Sensor de Movimiento PIRSensor de Movimiento PIR
Sensor de Movimiento PIR
 

Dernier

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Dernier (11)

Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 

Clase4: DIseño de interfaces de Usuario(UI)