SlideShare ist ein Scribd-Unternehmen logo
1 von 7
Downloaden Sie, um offline zu lesen
UX y UI
Pedro Bermúdez Talavera
Experiencia del Usuario (UX)
• UX significa diseño de experiencia del
usuario, que es el proceso de
identificar la necesidad de un usuario
seguido de los pasos necesarios para
ejecutarse, como pruebas e
improvisación, hasta su desarrollo.
• El proceso de prueba, optimización y
mantenimiento se lleva a cabo incluso
después de la entrega del producto.
• Su objetivo es mejorar la satisfacción
del cliente mejorando la comodidad,
la facilidad de uso y el placer durante
la interacción.
https://www.webtrickshome.com/blog/what-is-the-difference-between-ux-and-ui-in-web-design
Interfaz del Usuario (UI)
• UI significa diseño de interfaz de
usuario, que es el proceso de guiar a
los usuarios a través de la interfaz de
un sitio con la ayuda de elementos
interactivos.
• Se ocupa de la presentación visual, es
decir, la apariencia y la interactividad
del sitio.
• Los diseñadores de IU pretenden
crear un diseño web estéticamente
agradable y conectarse
emocionalmente con los usuarios.
https://www.webtrickshome.com/blog/what-is-the-difference-between-ux-and-ui-in-web-design
Diseño vs Funcionalidad
• UI se centra en diseñar la página
web o aplicación móvil en base a
la creación de wireframes y
mockups de los que sacará la
construcción el color,
degradados, tipografías y el
diseño visual general del sitio.
• UX será la que valore este sitio
web en torno a la usabilidad y
facilidad de navegación,
investigando si son sencillas de
realizar las principales funciones
como navegación, búsquedas, y
otras.
https://www.luisan.net/blog/diseno-grafico/diferencias-entre-ui-user-interface-y-ux-user-experience
Organización vs Procesos
• UI se ocupa de decidir cuál será
el recorrido y dónde se deberán
situar los botones que
desencadenarán las diferentes
acciones del producto, es la
parte de diseño de la interfaz.
• UX trata sobre los aspectos
relativos a los procesos o
acciones que se desencadenan,
se ocupa de qué es lo que
sucede cuando se activan los
botones o mecanismos, sería la
parte mecánica del proceso.
https://www.luisan.net/blog/diseno-grafico/diferencias-entre-ui-user-interface-y-ux-user-experience
Diferencias
Experiencia del Usuario (UX) Interfaz del Usuario (UI)
UX se ocupa del propósito y la funcionalidad del sitio. UI se ocupa de la calidad de la interacción y la
apariencia del sitio.
UX está relacionada con la orientación a los grupos de
usuarios, la comprensión de sus necesidades y el
trabajo para su satisfacción.
El diseño UI está relacionado con el diseño y la
interfaz.
UX es un concepto amplio que comienza con la
investigación y nunca termina incluso después de la
entrega del producto.
UI es la parte técnica que tiene como objetivo
producir los componentes de diseño para el producto
finalizado.
https://www.webtrickshome.com/blog/what-is-the-difference-between-ux-and-ui-in-web-design
Diseño de interfaz
Transferencia del conocimiento en
los esquemas
Look and Feel
Branding y lineamientos.
Moodboard (collage, storyboard)
Style Tiles (concepto visual)
Diseño y capacidad de respuesta
Pruebas de usuario
Especificaciones de diseño
Prototipo de interfaz de usuario
Documentación de diseño visual
Folleto del desarrollador
Conjunto de iconos y ilustraciones
Adaptación a factores de forma y
resoluciones
Ejecución
Ayudar a los desarrolladores
Revisiones de Implementación
Coordinación con grupos de interés
Transición al primer diseño
UX
Pensamiento
Crítico + Creativo
UI
Pensamiento
Creativo + Sistemático
PRODUCTO
FINAL
https://blog.prototypr.io/ux-vs-ui-similarity-differences-837775584cd8
Investigación del Usuario
Investigación primaria
Investigación de escritorio
Investigación de la competencia
Análisis de Investigación
Insights y
Customer Journey
Buyer Persona
Mapa de Empatía
Sitemaps
Flujo de tareas
Flujo de usuarios
Desarrollo de Diseño
Bocetos de ideas
Wireframes
Prototipos
Pruebas de usuario
Iteraciones de diseño
Ejecución
Coordinación con grupos de interés
Transición al diseño UI
Colaborar con diseñadores de UI

Weitere ähnliche Inhalte

Was ist angesagt?

What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"MITAcademy1
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui designShweta Joshi
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)Emerentiana Meicy
 
UX no es lo mismo que UI
UX no es lo mismo que UIUX no es lo mismo que UI
UX no es lo mismo que UIAndrea Cantú
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaRoshan Karunarathna
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
 
UX en 30 Minutos
UX en 30 MinutosUX en 30 Minutos
UX en 30 MinutosSol Mesz
 
Introducción al Diseño de Experiencia del Usuario – UX2013
Introducción al Diseño de Experiencia del Usuario – UX2013Introducción al Diseño de Experiencia del Usuario – UX2013
Introducción al Diseño de Experiencia del Usuario – UX2013Gabriel Celemin
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designDMI
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
Centerline Digital - UX vs UI - 050613
Centerline Digital - UX vs UI - 050613Centerline Digital - UX vs UI - 050613
Centerline Digital - UX vs UI - 050613Centerline Digital
 

Was ist angesagt? (20)

What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
UX no es lo mismo que UI
UX no es lo mismo que UIUX no es lo mismo que UI
UX no es lo mismo que UI
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
UX en 30 Minutos
UX en 30 MinutosUX en 30 Minutos
UX en 30 Minutos
 
Introducción al Diseño de Experiencia del Usuario – UX2013
Introducción al Diseño de Experiencia del Usuario – UX2013Introducción al Diseño de Experiencia del Usuario – UX2013
Introducción al Diseño de Experiencia del Usuario – UX2013
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
UX & UI Design 101
UX & UI Design 101UX & UI Design 101
UX & UI Design 101
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
A presentation on front end development
A presentation on front end development   A presentation on front end development
A presentation on front end development
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
Centerline Digital - UX vs UI - 050613
Centerline Digital - UX vs UI - 050613Centerline Digital - UX vs UI - 050613
Centerline Digital - UX vs UI - 050613
 

Ähnlich wie UX y UI

Simple Steps to UX/UI Web Design- Español
Simple Steps to UX/UI Web Design- EspañolSimple Steps to UX/UI Web Design- Español
Simple Steps to UX/UI Web Design- EspañolKoombea
 
Rails girls ux workshop
Rails girls ux workshopRails girls ux workshop
Rails girls ux workshopAndrés Max
 
¿Porqué la User Experience / User Interface es Importante?
¿Porqué la User Experience / User Interface es Importante?¿Porqué la User Experience / User Interface es Importante?
¿Porqué la User Experience / User Interface es Importante?Scio Consulting
 
UX2012 - Casos y Experiencias de un equipo de UX
UX2012 - Casos y Experiencias de un equipo de UXUX2012 - Casos y Experiencias de un equipo de UX
UX2012 - Casos y Experiencias de un equipo de UXEmiliano Horcada
 
diseño de APPS1234567890234567895678.pptx
diseño de APPS1234567890234567895678.pptxdiseño de APPS1234567890234567895678.pptx
diseño de APPS1234567890234567895678.pptxedgartorres431176
 
Introduccion a ux - IxDA Mendoza - Taller UX
Introduccion a ux - IxDA Mendoza - Taller UXIntroduccion a ux - IxDA Mendoza - Taller UX
Introduccion a ux - IxDA Mendoza - Taller UXIxDA Mendoza
 
Introduccion a ux - IxDA Mendoza - Taller UX
Introduccion a ux  - IxDA Mendoza - Taller UXIntroduccion a ux  - IxDA Mendoza - Taller UX
Introduccion a ux - IxDA Mendoza - Taller UXFlavia Ibañez
 
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.karlapatriciapms16
 
Usabilidad en Aplicaciones Web
Usabilidad en Aplicaciones WebUsabilidad en Aplicaciones Web
Usabilidad en Aplicaciones WebElsa Canto
 
Usabilidad en Aplicaciones Web
Usabilidad en Aplicaciones WebUsabilidad en Aplicaciones Web
Usabilidad en Aplicaciones WebElsa Canto
 
Documento - Webinar ux
Documento - Webinar uxDocumento - Webinar ux
Documento - Webinar uxCarlos Martin
 
Taller de prototipado de apps móviles
Taller de prototipado de apps móvilesTaller de prototipado de apps móviles
Taller de prototipado de apps móvilesJorge Sánchez Vega
 
guia-ux-guia-ux-guia-ux-guia-ux-guia-ux.pdf
guia-ux-guia-ux-guia-ux-guia-ux-guia-ux.pdfguia-ux-guia-ux-guia-ux-guia-ux-guia-ux.pdf
guia-ux-guia-ux-guia-ux-guia-ux-guia-ux.pdfPedroJGC1
 
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabambagdgsantacruz
 
DSUC 01: UX Research
DSUC 01: UX ResearchDSUC 01: UX Research
DSUC 01: UX ResearchRodrigo Vera
 
Sanchez garcia juan_jose_ensayo_unidad1_sis-51
Sanchez garcia juan_jose_ensayo_unidad1_sis-51Sanchez garcia juan_jose_ensayo_unidad1_sis-51
Sanchez garcia juan_jose_ensayo_unidad1_sis-51Jose Garcia
 

Ähnlich wie UX y UI (20)

Simple Steps to UX/UI Web Design- Español
Simple Steps to UX/UI Web Design- EspañolSimple Steps to UX/UI Web Design- Español
Simple Steps to UX/UI Web Design- Español
 
Video 1
Video 1Video 1
Video 1
 
Rails girls ux workshop
Rails girls ux workshopRails girls ux workshop
Rails girls ux workshop
 
UX EXPERIENCIA DE USUARIO
UX EXPERIENCIA DE USUARIOUX EXPERIENCIA DE USUARIO
UX EXPERIENCIA DE USUARIO
 
¿Porqué la User Experience / User Interface es Importante?
¿Porqué la User Experience / User Interface es Importante?¿Porqué la User Experience / User Interface es Importante?
¿Porqué la User Experience / User Interface es Importante?
 
Ux nikole
Ux nikoleUx nikole
Ux nikole
 
UX2012 - Casos y Experiencias de un equipo de UX
UX2012 - Casos y Experiencias de un equipo de UXUX2012 - Casos y Experiencias de un equipo de UX
UX2012 - Casos y Experiencias de un equipo de UX
 
diseño de APPS1234567890234567895678.pptx
diseño de APPS1234567890234567895678.pptxdiseño de APPS1234567890234567895678.pptx
diseño de APPS1234567890234567895678.pptx
 
Introduccion a ux - IxDA Mendoza - Taller UX
Introduccion a ux - IxDA Mendoza - Taller UXIntroduccion a ux - IxDA Mendoza - Taller UX
Introduccion a ux - IxDA Mendoza - Taller UX
 
Introduccion a ux - IxDA Mendoza - Taller UX
Introduccion a ux  - IxDA Mendoza - Taller UXIntroduccion a ux  - IxDA Mendoza - Taller UX
Introduccion a ux - IxDA Mendoza - Taller UX
 
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
 
Usabilidad en Aplicaciones Web
Usabilidad en Aplicaciones WebUsabilidad en Aplicaciones Web
Usabilidad en Aplicaciones Web
 
Usabilidad en Aplicaciones Web
Usabilidad en Aplicaciones WebUsabilidad en Aplicaciones Web
Usabilidad en Aplicaciones Web
 
Documento - Webinar ux
Documento - Webinar uxDocumento - Webinar ux
Documento - Webinar ux
 
UX / UCD Process Walmart
UX / UCD Process WalmartUX / UCD Process Walmart
UX / UCD Process Walmart
 
Taller de prototipado de apps móviles
Taller de prototipado de apps móvilesTaller de prototipado de apps móviles
Taller de prototipado de apps móviles
 
guia-ux-guia-ux-guia-ux-guia-ux-guia-ux.pdf
guia-ux-guia-ux-guia-ux-guia-ux-guia-ux.pdfguia-ux-guia-ux-guia-ux-guia-ux-guia-ux.pdf
guia-ux-guia-ux-guia-ux-guia-ux-guia-ux.pdf
 
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba
 
DSUC 01: UX Research
DSUC 01: UX ResearchDSUC 01: UX Research
DSUC 01: UX Research
 
Sanchez garcia juan_jose_ensayo_unidad1_sis-51
Sanchez garcia juan_jose_ensayo_unidad1_sis-51Sanchez garcia juan_jose_ensayo_unidad1_sis-51
Sanchez garcia juan_jose_ensayo_unidad1_sis-51
 

Mehr von Pedro Bermudez Talavera (20)

Abrir cuenta en Skillshop (Google Analytics)
Abrir cuenta en Skillshop (Google Analytics)Abrir cuenta en Skillshop (Google Analytics)
Abrir cuenta en Skillshop (Google Analytics)
 
Cómo usar Google Trends
Cómo usar Google TrendsCómo usar Google Trends
Cómo usar Google Trends
 
Cómo usar Ubersuggest
Cómo usar UbersuggestCómo usar Ubersuggest
Cómo usar Ubersuggest
 
Facebook Business Suite - Estadísticas
Facebook Business Suite - EstadísticasFacebook Business Suite - Estadísticas
Facebook Business Suite - Estadísticas
 
Facebook Analytics
Facebook AnalyticsFacebook Analytics
Facebook Analytics
 
Google Analytics
Google AnalyticsGoogle Analytics
Google Analytics
 
Google Search Console
Google Search ConsoleGoogle Search Console
Google Search Console
 
Plugins de WordPress
Plugins de WordPressPlugins de WordPress
Plugins de WordPress
 
Notificaciones Push
Notificaciones PushNotificaciones Push
Notificaciones Push
 
Footprints
FootprintsFootprints
Footprints
 
Glosario de SEM
Glosario de SEMGlosario de SEM
Glosario de SEM
 
Mercado de Tablets
Mercado de TabletsMercado de Tablets
Mercado de Tablets
 
YouTube Analytics
YouTube AnalyticsYouTube Analytics
YouTube Analytics
 
Gamification y Advergaming
Gamification y AdvergamingGamification y Advergaming
Gamification y Advergaming
 
Herramientas SEO
Herramientas SEOHerramientas SEO
Herramientas SEO
 
Glosario de SEO
Glosario de SEOGlosario de SEO
Glosario de SEO
 
Como crear un sitio web en WordPress
Como crear un sitio web en WordPressComo crear un sitio web en WordPress
Como crear un sitio web en WordPress
 
Crear una web en 000webhost
Crear una web en 000webhostCrear una web en 000webhost
Crear una web en 000webhost
 
Glosario de WordPress
Glosario de WordPressGlosario de WordPress
Glosario de WordPress
 
Administración de Sitios Web
Administración de Sitios WebAdministración de Sitios Web
Administración de Sitios Web
 

UX y UI

  • 1. UX y UI Pedro Bermúdez Talavera
  • 2. Experiencia del Usuario (UX) • UX significa diseño de experiencia del usuario, que es el proceso de identificar la necesidad de un usuario seguido de los pasos necesarios para ejecutarse, como pruebas e improvisación, hasta su desarrollo. • El proceso de prueba, optimización y mantenimiento se lleva a cabo incluso después de la entrega del producto. • Su objetivo es mejorar la satisfacción del cliente mejorando la comodidad, la facilidad de uso y el placer durante la interacción. https://www.webtrickshome.com/blog/what-is-the-difference-between-ux-and-ui-in-web-design
  • 3. Interfaz del Usuario (UI) • UI significa diseño de interfaz de usuario, que es el proceso de guiar a los usuarios a través de la interfaz de un sitio con la ayuda de elementos interactivos. • Se ocupa de la presentación visual, es decir, la apariencia y la interactividad del sitio. • Los diseñadores de IU pretenden crear un diseño web estéticamente agradable y conectarse emocionalmente con los usuarios. https://www.webtrickshome.com/blog/what-is-the-difference-between-ux-and-ui-in-web-design
  • 4. Diseño vs Funcionalidad • UI se centra en diseñar la página web o aplicación móvil en base a la creación de wireframes y mockups de los que sacará la construcción el color, degradados, tipografías y el diseño visual general del sitio. • UX será la que valore este sitio web en torno a la usabilidad y facilidad de navegación, investigando si son sencillas de realizar las principales funciones como navegación, búsquedas, y otras. https://www.luisan.net/blog/diseno-grafico/diferencias-entre-ui-user-interface-y-ux-user-experience
  • 5. Organización vs Procesos • UI se ocupa de decidir cuál será el recorrido y dónde se deberán situar los botones que desencadenarán las diferentes acciones del producto, es la parte de diseño de la interfaz. • UX trata sobre los aspectos relativos a los procesos o acciones que se desencadenan, se ocupa de qué es lo que sucede cuando se activan los botones o mecanismos, sería la parte mecánica del proceso. https://www.luisan.net/blog/diseno-grafico/diferencias-entre-ui-user-interface-y-ux-user-experience
  • 6. Diferencias Experiencia del Usuario (UX) Interfaz del Usuario (UI) UX se ocupa del propósito y la funcionalidad del sitio. UI se ocupa de la calidad de la interacción y la apariencia del sitio. UX está relacionada con la orientación a los grupos de usuarios, la comprensión de sus necesidades y el trabajo para su satisfacción. El diseño UI está relacionado con el diseño y la interfaz. UX es un concepto amplio que comienza con la investigación y nunca termina incluso después de la entrega del producto. UI es la parte técnica que tiene como objetivo producir los componentes de diseño para el producto finalizado. https://www.webtrickshome.com/blog/what-is-the-difference-between-ux-and-ui-in-web-design
  • 7. Diseño de interfaz Transferencia del conocimiento en los esquemas Look and Feel Branding y lineamientos. Moodboard (collage, storyboard) Style Tiles (concepto visual) Diseño y capacidad de respuesta Pruebas de usuario Especificaciones de diseño Prototipo de interfaz de usuario Documentación de diseño visual Folleto del desarrollador Conjunto de iconos y ilustraciones Adaptación a factores de forma y resoluciones Ejecución Ayudar a los desarrolladores Revisiones de Implementación Coordinación con grupos de interés Transición al primer diseño UX Pensamiento Crítico + Creativo UI Pensamiento Creativo + Sistemático PRODUCTO FINAL https://blog.prototypr.io/ux-vs-ui-similarity-differences-837775584cd8 Investigación del Usuario Investigación primaria Investigación de escritorio Investigación de la competencia Análisis de Investigación Insights y Customer Journey Buyer Persona Mapa de Empatía Sitemaps Flujo de tareas Flujo de usuarios Desarrollo de Diseño Bocetos de ideas Wireframes Prototipos Pruebas de usuario Iteraciones de diseño Ejecución Coordinación con grupos de interés Transición al diseño UI Colaborar con diseñadores de UI