Introducción al diseño de UX y UI

 

 

El diseño de experiencia de usuario (UX) se define comúnmente como el proceso para diseñar experiencias e interacciones con un producto digital o físico que es útil, fácil y agradable. El diseño de la interfaz de usuario (UI) se define comúnmente como el proceso de diseño del aspecto visual del producto y la funcionalidad de la interacción.

 

 

En esta actividad, los estudiantes conocerán la experiencia del usuario (UX) y el diseño de la interfaz de usuario (UI), el papel de los diseñadores y el proceso de diseño .

Para reforzar los principios de diseño de UX y UI, los estudiantes evaluarán y proporcionarán análisis sobre el diseño de un producto existente.

 

 

Resumen de la actividad

El diseño de experiencia de usuario (UX) se define comúnmente como el proceso de diseño de experiencias y
interacciones con un producto digital o físico que son útiles, fáciles y agradables. Interfaz de usuario
El diseño (UI) se define comúnmente como el proceso de diseño del aspecto visual del producto y
La funcionalidad de la interacción.
En esta actividad, los estudiantes conocerán la experiencia del usuario (UX) y el diseño de la interfaz de usuario (UI).
El papel de los diseñadores, y el proceso de diseño del producto. Para reforzar los principios de diseño de UX y UI,
los estudiantes evaluarán y proporcionarán análisis sobre el diseño de un producto existente.

Objetivos de la actividad

Habilidades de gestión de proyectos
• Definir propósito, objetivo y audiencia
• Comprensión de las fases de desarrollo del producto.
• Comprender los roles de los diseñadores de UX y UI
Habilidades de diseño
• Comprender y emplear el diseño de UX y UI.
principios
• Diseñar para una audiencia específica y propósito
• Comprender el papel y propósito de la usabilidad.
• Comprensión de bocetos
• Entender la estructura alámbrica
• Comprensión de la revisión iterativa y rediseño.
proceso
Habilidades de investigación y comunicación.
• Investigación de ejemplos de medios interactivos.
• Evaluar y analizar diversos medios interactivos.
• Comprender el rol, propósito y casos de uso para
medios interactivos
• Investigación, evaluación y análisis digital y
productos físicos
• Crítica de diseños.
Habilidades técnicas
• Entendiendo la planificación de Adobe XD para
flujo de trabajo de producción
Activos del proyecto
• Adobe XD tutorial series.xd
• Imagen tutorial de activos.
• El archivo de tutorial Adobe XD proporcionado contiene
una serie de tutoriales para todas las actividades en
La serie XD. La serie de tutoriales está configurada para
guias a los estudiantes a través de un tutorial específico
y luego, usando lo que aprendieron,
crear su propio contenido en un procedimiento
ejercicio.
• Puedes elegir permitir que los estudiantes trabajen
Adelante a su propio ritmo, o cierra la XD.
tutorial, y volver a él juntos como un
Clase en actividades posteriores.
• En esta actividad utilizarás la Actividad # 1.
tutoriales: muestra final de la cartera de estudiantes y
Flujo de trabajo de planificación a producción.
Recursos de preparación de antecedentes
Información técnica y de contenido.

 

Pasos de la actividad

1. Introduce esta actividad y explica que los alumnos.
estaremos aprendiendo sobre la experiencia del usuario (UX) y
diseño de interfaz de usuario (UI), el papel de los diseñadores,
y el proceso de diseño. Para reforzar UX y UI
principios de diseño, evaluarán y proporcionarán
Análisis sobre el diseño de un producto existente.
2. Introduce el meme de la botella de ketchup Heinz que se usa para
explicar la diferencia entre la experiencia del usuario
Diseño (UX) y diseño de interfaz de usuario (UI). antes de
Entrando en detalle sobre los matices de UX y UI.
diseñar, mostrarles el meme y discutir el
siguiendo:
• La botella de ketchup es la interfaz. Pregúntales
para dar algunos ejemplos de otras interfaces –
Tanto física como digital.
• Pregunte por qué creen que esta imagen de meme era.
creado para explicar la diferencia entre
¿Diseño de UX y UI?
• Pregúnteles si creen que este meme es un buen
Manera de diferenciar entre UX y UI.
¿diseño?

• ¿Preguntarles si están de acuerdo con la naturaleza del meme “UX versus UI”? ¿Cómo crees que UX y UI diseñan
puede / debe trabajar juntos?
• Pregunte si creen que esta solución de diseño de la botella de ketchup funciona. ¿Qué más pueden hacer los diseñadores de UX y UI?
¿Para mejorar esta experiencia? Para ayudar con este paso, pida a los alumnos que piensen en las formas en que la mejora ha mejorado.
la botella tiene problemas de diseño (por ejemplo, el ketchup se pone pegajoso o se acumula y se pulveriza tan pronto como sea posible).
abres la tapa).
• ¿Pueden pensar en sus propios diseños o soluciones que han visto en botellas de plástico al revés, que pueden
¿Mejorar la experiencia de usuario?

 

3. Presente el diseño de UX y los diseñadores de UX explicando y discutiendo lo siguiente: • Diseño de experiencia de usuario (UX): • Depende en gran medida de la comprensión de las necesidades de los usuarios, identificando objetivos y propósitos, y creando Esquemas de diseños. • La “experiencia del usuario” abarca cómo los humanos interactúan con algo, digital o físico, y cierra la brecha entre cómo aparece algo y cómo funciona o cómo se siente. • Los principios de diseño de UX pueden aplicarse al diseño de una gran variedad de cosas: sitios web, aplicaciones móviles, Automóviles, una exposición de museo, o incluso tu propia vida, por nombrar solo algunos. • UX Design es el proceso de diseño para que la experiencia e interacción con lo digital o físico El producto es útil, fácil y agradable. • Opcional: vea este video de Don Norman, quien acuñó el término UX. • Diseñadores de UX: • Piense por adelantado, de modo que cuando un usuario llega a un proyecto terminado, cómo funciona y cómo lo hace. interactuar con él tiene sentido, es placentero y es utilizable.

• Diseñe la función detrás de los elementos visuales: el proceso que hace que los productos funcionen bien para las personas.
Quien los usa.

4. Introduzca el diseño de la interfaz de usuario (UI) y los diseñadores de UI explicando y discutiendo lo siguiente:
• Diseño de interfaz de usuario (UI):
• Donde los usuarios y un producto o sistema digital o físico se comunican e interactúan.
• Para computadoras y dispositivos móviles, esto se denomina interfaz gráfica de usuario (GUI).
• La interfaz de usuario es el aspecto visual del producto y la funcionalidad de la interacción.
• diseñadores de interfaz de usuario:
• Diseñar los elementos visuales y la interfaz.
• Toman todo el contenido, lo hacen lucir bonito y se aseguran de que funcione correctamente.

 

5. Presente y analice algunas de las mejores prácticas y los principios de diseño en los que se basan los diseñadores de UX y UI:
• Diseño de UX:
• Empatía: entienda al usuario final y sea empático con sus necesidades, pero nunca piense en
usted mismo como usuario final.
• Solución de problemas: identifique la razón para construir el producto y qué problemas resuelve para el usuario.
• Simplicidad: sea sencillo con una navegación y acciones claras.
• Funcionalidad: se cumplen las expectativas del usuario y la función informa a la moda.
• Coherencia: adapte la experiencia para todos los contextos y brinde una experiencia consistente. Por ejemplo
Asegurarse de que las cosas funcionen correctamente y lo mismo en las versiones para móviles, tabletas y web.
• Flexibilidad: Prueba> iterar, probar> iterar, y probar> iterar un poco más.
• Diseño de interfaz de usuario:
• Alineación: crea orden y organización y conecta visualmente los elementos.
• Jerarquía: otorga visualmente un mayor peso o énfasis al mensaje o elemento más importante.
• Contraste: permite enfatizar un elemento yuxtaponiendo elementos opuestos. Por ejemplo, negro y
Blanco u horizontal y vertical.
• Espacio: la distancia entre, alrededor, arriba, abajo o dentro de los elementos; Tanto el espacio lleno como el vacío están
importante.
• Proximidad: crea relaciones entre los elementos agrupándolos o conectándolos.
visualmente.
• Balance: comparando o estimando dos cosas, una contra la otra, y el contraste entre ellas.
• Repetición: une diferentes elementos para crear asociación y consistencia.

 

6. Discuta el flujo de trabajo entre los diseñadores de UX y UI explicando que los diseñadores de UI son responsables de tomar todo Los pasos tomados por el diseñador de UX (desarrollo, investigación, contenido y diseño) y hacer un producto o Aplicación que es una experiencia atractiva, orientadora y receptiva para los usuarios. 7. Muestre uno o varios ejemplos de un diseño o prototipo de una aplicación. El archivo Adobe XD provisto incluye un completo funcionamiento. Prototipo de portafolio de estudiantes para dispositivos móviles, tabletas y diseños web. Guía XD: Adobe XD tutorial series.xd (Actividad # 1: muestra final del portafolio de estudiantes) Nota: Para ejemplos adicionales, puede mostrar proyectos digitales de los tutoriales de XD. También puedes usar el Adobe Sesiones en vivo de videos para ejemplos de proyectos físicos.

 

8. Guiar a los estudiantes a través del proceso de diseño y desarrollo. Usa la tabla de abajo para identificar cada fase de
desarrollo, las tareas asociadas, y quién trabaja en esas tareas. Algunos artículos importantes para introducir y
discutir sobre el proceso son:
• Cómo el diseño de UX generalmente abarca el diseño de la interfaz de usuario en el proceso de diseño más amplio.
• Identifique qué fase cae normalmente en el diseño de UX, el diseño de la interfaz de usuario y cuándo trabajan juntos.
• Explique que a menudo los diseñadores contratan a los diseñadores para que los diseñen y este proceso toma más tiempo.
Pasos al trabajar con un cliente.
• Opcional: discuta las diferencias entre diseñadores de productos y diseñadores de marketing, diseñadores de agencias.
y diseñadores propios.
• Opcional: discuta que generalmente hay un equipo que trabaja para construir un producto o servicio e introducir
roles adicionales como administrador de proyectos / productos, programadores, expertos en contenido, etc.
• El diseño es un proceso iterativo que debe abarcar los pasos de revisión y rediseño, así como también, el usuario
realimentación. Discuta cómo un proceso de diseño iterativo y continuo podría funcionar entre los diseñadores de UX y UI.
• La escala del producto o servicio que se está diseñando, por ejemplo, si es un producto físico, el producto
y el empaque podría ser procesos de diseño y desarrollo separados pero conectados. Puedes usar el
ejemplo de un dispositivo iPhone o Android, donde el diseño de la tecnología y el diseño del
El hardware se produce en tándem.

 

 

 

Nota: es posible que desee revisar la Introducción a la planificación de proyectos, la gestión de proyectos y el trabajo en equipo.
actividad para profundizar en los conceptos y las mejores prácticas utilizadas para la planificación de proyectos, fases de producción,
Gestión de proyectos y trabajo en equipo.

 

9. Presente Adobe XD como una herramienta para los diseñadores de UX y UI. Mostrar a los estudiantes el archivo XD proporcionado que incluye
los bocetos utilizados para crear el portafolio estudiantil terminado que acabas de revisar. Explique que los estudiantes no trabajarán.
con XD todavía, pero cuando se preparan para crear un prototipo de su propia aplicación, es importante entender qué
Los diseñadores pueden hacer en XD. Explique y discuta lo siguiente, utilizando el recurso XD como referencia:
• En XD, los diseñadores pueden diseñar y crear prototipos de experiencias digitales y compartir estos prototipos completamente funcionales.

tipos para obtener comentarios de los usuarios para luego iterar y mejorar el diseño.
• Una vez finalizado un diseño en XD, se comparte con desarrolladores web, desarrolladores de aplicaciones y programadores para
codifique y / o cree la aplicación final, el sitio web, el producto o la experiencia.
• XD permite a los diseñadores de UX y UI realizar un seguimiento de las iteraciones y versiones de diseño en un solo archivo. Pueden probar,
Revertir, y ver la evolución completa de su proyecto.
• Los diseñadores de IU pueden crear la apariencia de lo que se convertirá en el producto final.
• Los diseñadores de UX pueden probar y registrar repetidamente las interacciones de los usuarios utilizando los prototipos para continuamente
Refinar y mejorar el diseño.
• XD es especialmente útil cuando se trabaja con clientes para mostrarles cada paso a lo largo de su camino y obtener
retroalimentación a medida que construyen su proyecto de diseño interactivo
Guía XD: Adobe XD tutorial series.xd (Actividad # 1: muestra final del portafolio de estudiantes)

 

11. El uso de lo que han aprendido les da a los estudiantes tiempo para explorar 1 o 2 productos, digitales o físicos, que
Creo que están bien diseñados. Explique que son para analizar críticamente y documentar lo siguiente:
• ¿Por qué está bien diseñado?
• ¿Qué consideraciones de UX y UI creen que se hicieron al crear el producto?
• ¿Cómo podría ser mejor el producto?

 

12. Explique que presentarán sus hallazgos, así que permita que los estudiantes preparen una breve presentación. Pregunte a cada uno
estudiante para presentar la (s) aplicación (es) seleccionada (s) y su análisis.
Nota: puede hacer que los estudiantes creen una presentación en Adobe Spark

 

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *