Especialización de diseño de UX/UI: De la investigación a la accesibilidad

En esta lección, compartiré con ustedes los orígenes de la UX. Hablaremos del Feng Shui en el año 4000 a. C., de Walt Disney y su deseo de crear experiencias mágicas perfectas, y de Don Norman, el hombre que acuñó el término "experiencia de usuario". También les compartiré hacia dónde creo que se dirige la industria.

Una breve historia de UX

Principios de accesibilidad y heurística

En esta lección, recibirás una introducción al mundo del diseño inclusivo y aprenderás cómo hacer que tus productos y servicios sean más accesibles. También te enseñaré otras buenas prácticas, también conocidas como heurísticas, para el diseño de interfaces de usuario.

Introducción al proceso UX

En esta lección, se te presentará el proceso de diseño UX. Te presentaré las dos representaciones más comunes: el modelo del doble diamante y el pensamiento de diseño. El proceso de diseño UX consta de cinco pasos principales: Empatizar, Definir, Idear, Prototipar y Probar.

Introducción a la investigación UX

En esta lección, te enseñaré el valor de la investigación de UX y qué puede salir mal si no la realizas. También aprenderás la diferencia entre métodos "actitudinales vs. conductuales" y "cualitativos vs. cuantitativos".

Investigación de escritorio, Benchmark, entrevistas

En esta lección, nos centraremos en los tres métodos principales que todo diseñador de UX, sea investigador o no, debe conocer: investigación documental, benchmarking y entrevistas. Aprenderás cuándo usar estos métodos y las mejores prácticas para cada uno.

Detectando y definiendo el problema

Una de las habilidades clave de un diseñador UX es la capacidad de detectar problemas. En esta lección, aprenderás a analizar tus hallazgos y a utilizar técnicas como los mapas de afinidad para definir mejor el problema que intentas resolver.

Creación de Persona

Los perfiles son una herramienta común en UX. En esta lección, aprenderás por qué son importantes, las características de un buen perfil, cómo crear uno y cuándo se utilizan en el proceso de diseño de UX.

12m

Mapeo de viaje

Una vez que tengas un personaje (o personajes), se recomienda crear un mapa de recorrido. En esta lección, aprenderás los componentes clave de uno, los diferentes tipos que existen y por qué deberías usarlos.

En esta lección, aprenderá diferentes técnicas de ideación (lluvia de ideas, lluvia de ideas y mapas mentales, por nombrar algunas) para ayudarlo a encontrar posibles soluciones a los problemas que detectó en su investigación de usuarios.

Técnicas de ideación

Arquitectura informacional

Al crear una aplicación o un sitio web, es fundamental que tenga una interfaz de usuario clara y bien diseñada. En esta lección, aprenderá sobre la arquitectura de la información y cómo organizar su contenido de forma eficaz.

Valor de los prototipos

Después de tener varias ideas, es hora de hacerlas tangibles. En esta lección, aprenderás el qué, el porqué y el cuándo de la creación de prototipos.

Tipos de prototipos y herramientas de prototipos

En esta lección, aprenderás sobre los diferentes tipos de prototipos que existen. También te mostraré algunas herramientas que puedes usar para crearlos.

Pruebas de usuario

Una vez creado tu prototipo, es hora de que otros lo prueben. En esta lección, aprenderás a preparar y realizar pruebas de usuario efectivas. También compartiré algunas prácticas recomendadas para documentar y priorizar tus hallazgos.

Trabajando con desarrolladores

Incluso si no quieres convertirte en desarrollador, tendrás que colaborar estrechamente con ellos. En esta lección, aprenderás a garantizar una transición fluida entre el diseño y el desarrollo.

Presentación a partes interesadas / clientes

En esta lección, aprenderás a medir la UX y a presentar tus hallazgos de forma creativa a las partes interesadas y clientes. También compartiré algunos consejos para promover el diseño de UX en la empresa.

10m

Estudios de caso

En esta lección aprenderás a crear un estudio de caso, pudiendo así documentar tu proceso de diseño UX de principio a fin.

Exhibiendo tu trabajo

En esta lección, aprenderás sobre diferentes plataformas para mostrar tu trabajo y cómo crear un portafolio. Al hablar sobre cómo crear un portafolio, también analizaremos las ventajas y desventajas de cada formato.

Entrevistas de trabajo de UX

En esta lección, compartiré algunos consejos a la hora de realizar entrevistas para puestos de UX y los tipos de ejercicios de diseño que encontrarás.

Módulo 3

Descubre cómo crear experiencias digitales significativas con Patricia Reiners, quien aporta su experiencia trabajando con Google y Adobe. Aquí, explica el papel esencial de la investigación de UX y te muestra cómo crear un plan de investigación personalizado. Obtendrás herramientas para comprender mejor las necesidades de los usuarios y diseñar soluciones que realmente generen impacto.

13 lecciones (1h 47m)

¿Qué es la investigación de UX?

En esta lección aprenderemos qué es la investigación UX y cuándo integrarla.

¿Cuáles son las metodologías más comunes?

Elegir el método correcto para sus preguntas le ayudará a obtener las ideas correctas, así que en esta lección veremos la diferencia entre investigación evaluativa y generativa y cuándo utilizar cada una.

Investigación cuantitativa de usuarios

La investigación cuantitativa de usuarios se centra en la cantidad. Se necesita una gran cantidad de datos para obtener información real. Esta información responde al "qué". Muestra qué dispositivos usan los usuarios, pero no por qué usan un dispositivo específico. En esta lección, repasaremos diferentes métodos cuantitativos.

Investigación cualitativa de usuarios

La investigación cualitativa de usuarios se centra en la calidad. Con estos métodos, podrás descubrir tu "porqué". En esta lección, analizaremos diferentes métodos cualitativos.

Planificación de su investigación

La creación de un plan de investigación estructura su pensamiento en torno a la actividad de investigación.

Redacción del plan de investigación

En esta lección, elaboraremos un plan de investigación para un proyecto. Lo explicaremos paso a paso.

Cómo elegir a los participantes

La selección de participantes es importante, independientemente del método elegido. En esta lección, veremos cómo hacerlo.

Cómo escribir una guía de discusión

Al realizar estudios de campo, investigaciones contextuales, entrevistas individuales o cualquier tipo de entrevista, necesita una guía de discusión. En esta lección elaboraremos las preguntas para formularlas adecuadamente.

Cómo preparar la sesión

Tu objetivo en la entrevista es aprender lo máximo posible sobre cómo piensan y se comportan tus usuarios. En esta lección, aprenderemos a formular preguntas y los materiales necesarios para la entrevista.

¿Cómo es una sesión cualitativa?

En esta lección, hablaremos sobre la estructura de una entrevista: la introducción, la parte principal (las preguntas) y el final.

Visualice su investigación de usuario cualitativa

En esta lección, sintetizaremos los conocimientos y los expondremos visualmente para presentarlos a las partes interesadas y a los miembros del equipo.

Mapa de viaje del usuario y personas 1

En esta lección, aprenderemos cómo crear artefactos para compartir con todos los miembros de su equipo y las partes interesadas: personas y mapas del recorrido del usuario.

Mapa de viaje del usuario y Personas 2

Terminamos esta lección con los mapas de recorrido del usuario y las personas.

13m

Módulo 4

Descubre cómo el diseño visual puede convertirse en una herramienta narrativa con Pablo Stanley como guía. En este módulo, comparte los principios clave para crear composiciones impactantes y cómo usar Figma para dar vida a tus ideas. Tanto si eres nuevo en el diseño como si quieres perfeccionar tus habilidades, encontrarás información práctica para impulsar tu creatividad. ¿Listo para sumergirte?

18 lecciones (2h 35m)

Principios de composición y diseño visual

Ahora analizaremos los elementos que hacen una buena composición.

Principios de la Gestalt utilizados en el diseño

Veremos cómo los principios de la Gestalt influyen en la forma en que interpretamos la información visual.

Jerarquía visual

Determinar qué partes de una composición son más relevantes que otras es clave para captar la atención del observador. Aquí veremos cómo establecer una jerarquía dentro de nuestro diseño.

Affordances en UI

En esta lección hablaré sobre el término "affordances" y cómo implementarlos en nuestras interfaces.

Introducción a los elementos visuales y comprensión del resumen

Un briefing creativo es un documento unificador que identifica los beneficios clave de una campaña o producto. Cuenta la historia y explica por qué es crucial para la audiencia, sirviendo como guía para la creación de algo.

Composición básica en Figma

En esta lección, realizaremos ejercicios en Figma para comprender cómo usar algunas funciones y aplicar lo aprendido. Saber usar estas herramientas y aplicar estas habilidades te ayudará a alcanzar el siguiente nivel de diseño en Figma.

La tipografía es uno de los elementos más poderosos del diseño. Realza el contenido y refleja el tono y las necesidades de un proyecto. Su propósito no es solo estético, sino también funcional y técnico.

Tipografía

Crear una paleta de colores

Los colores tienen significado. Comunican un tono y una emoción, lo que los convierte en una poderosa herramienta de diseño. Pero tienes posibilidades prácticamente infinitas: al combinar colores para formar una paleta, las opciones son infinitas. Entonces, ¿por dónde empezar? En esta lección aprenderemos un poco sobre cómo combinar colores.

Gráficos e iconos

Las imágenes te permiten hacer más con menos. Dicen que una imagen vale más que mil palabras. Por eso, las imágenes y los gráficos son herramientas visuales poderosas que pueden ayudar a transmitir un mensaje y establecer la identidad visual de un producto. Puedes usar fotos, ilustraciones e íconos. Veamos cuándo usar cada uno.

En esta lección, abriremos Figma y probaremos diferentes estilos visuales. Veremos cómo probarlos y por qué funcionan, uno por uno.

Estilos visuales

19m

Dibujar una estructura alámbrica

Dibujar un wireframe nos permite identificar rápidamente problemas de usabilidad en las primeras etapas del proceso de diseño. Además, invita a las diferentes partes interesadas a aportar sus ideas y nos da una idea de cómo podría verse el proyecto final.

Definición de su guía de estilo visual 1

Antes de presentar nuestros bocetos en alta fidelidad, definamos el estilo de algunos elementos esenciales. Contar con este sistema básico nos permitirá avanzar más rápido al crear nuestro diseño y composiciones en la maqueta de alta fidelidad.

Definición de su guía de estilo visual 2

En esta segunda parte de la lección nos centraremos en el estilo de las ilustraciones que surgirán en tu proyecto.

Construcción de una maqueta de alta fidelidad 1

Ahora usemos nuestra guía de estilo y el boceto de wireframe para armar una versión de alta fidelidad de nuestra página en Figma.

15m

Construyendo una maqueta de alta fidelidad 2

Aquí continuaré dando forma y finalizando mi maqueta de alta fidelidad, manteniendo siempre el aspecto vibrante y dinámico de la misma.

Interacciones de botones

Aprenderemos cómo agregar interacciones de componentes simples para hacer que nuestros botones o cualquier otro componente se animen con diferentes activadores.

Vinculación a páginas y modales

Es fundamental crear enlaces entre diferentes páginas y otros estados de nuestro prototipo para que se vea más natural. En esta lección, aprenderemos a enlazar a una nueva página y abrir un modal.

Compartiendo su prototipo

¡Ahora que lo tenemos todo junto compartámoslo con el mundo!

Módulo 5

Con Chiara Aliotta como guía, sumérgete en el poder del storytelling como herramienta para crear diseños emocionales y centrados en el usuario. Explora cómo los elementos narrativos, como la audiencia, el propósito y el personaje, pueden dar forma a experiencias digitales inmersivas. Aprenderás a convertir los briefings de UX en historias cautivadoras que conectan, enganchan y dejan una huella imborrable.

11 lecciones (2h 22m)

Storytelling para UX y UI Design

Como en cualquier proceso, creo que es fundamental comprender hacia dónde te diriges. En esta lección, te presento el curso, su estructura y lo que aprenderemos juntos. También hablaré sobre la diferencia entre el diseño de experiencia de usuario (UX) y el diseño de interfaz de usuario (UI).

Elementos de la narración: audiencia, propósito, personajes y contexto

Incluso antes de escribirla, los primeros elementos para definir una historia son su audiencia, motivación/propósito, contexto y la comprensión de que una historia necesita tener un ritmo.

17m

Elementos de la narración: la estructura

Desde Aristóteles hasta nuestros días, la estructura de una historia no ha cambiado mucho. Descubramos cómo se crea la narrativa y cómo aplicar los mismos principios al diseño UX.

El poder de contar historias: emociones

Las emociones juegan un papel fundamental en nuestro comportamiento. Las grandes historias evocan emociones y conectan con su público. En esta lección, explorarás cómo dominar el poder de la narración usando las emociones para lograr tus objetivos.

Encontrar los elementos de la historia 1

Dada una marca ficticia, utilizaré actos, secuencias y escenas para mapear la experiencia y profundizar en cómo el diseño UX beneficia la narración tradicional.

13m

Encontrar los elementos de la historia 2

Durante esta segunda parte de la lección, continuaré enseñándoles cómo mapear los elementos de la historia.

13m

Inspiración visual para activar la imaginación

En esta lección, verá cómo encontrar inspiración visual en diferentes fuentes antes de pasar al último paso de la tarea: el wireframe de la página de destino.

Construyendo la Narrativa y el Wireframe 1

Hasta ahora, he usado actos, secuencias y escenas para mapear la experiencia del usuario. La cuadrícula que creé con postproducción será la base y me ayudará a garantizar que el producto digital que estoy diseñando ofrezca la experiencia de usuario adecuada.

Construyendo la Narrativa y Wireframe 2

Para finalizar esta unidad, aprenderá cómo profundizar en la narrativa examinando las tomas y diseñando el wireframe.

15m

Apoyando la narrativa: estructura alámbrica versus maqueta de alta fidelidad

En esta lección, presentaré la maqueta de alta fidelidad inspirada en el wireframe diseñado en la unidad anterior. La fase de deconstrucción es esencial porque nos ayuda a comprender si somos coherentes con nuestra historia (también conocida como coherencia con el wireframe y las decisiones tomadas al analizar el briefing).

Involucrar a la audiencia con la narrativa

La narración es una herramienta poderosa que debe usarse con sabiduría. Por eso, aprenderás a descubrir cómo usarla para motivar, persuadir e inspirar a tu audiencia.

Módulo 6

Adéntrate en el mundo del diseño inclusivo con Margot Gabel y descubre cómo la accesibilidad puede transformar las experiencias digitales para todos. Margot comparte consejos prácticos para que tu sitio web sea más intuitivo, desde el contraste de color hasta el texto alternativo. Descubrirás cómo el diseño inclusivo no solo promueve la equidad, sino que también mejora el SEO y la usabilidad general.

14 lecciones (1h 53m)

Introducción a la accesibilidad digital

Para empezar, aprenderá sobre los estándares de accesibilidad y sus beneficios.

Los beneficios de la accesibilidad digital

Ahora, hablaré sobre por qué es crucial hacer de la accesibilidad digital una necesidad al momento de diseñar.

Accesibilidad en la vida real

Es hora de explorar cómo replicar algunas situaciones de navegación donde la accesibilidad digital es crucial. Esto te ayudará a identificarte con ello y a comprender su importancia.

Colores y contraste

Primero, aprenderás sobre la famosa relación de contraste y cómo aplicarla al texto y a los elementos visuales. Después, te enseñaré a elegir una combinación de colores.

Tipos de letra y jerarquía

Ahora analizarás las opciones tipográficas y cómo pueden ser accesibles. También verás cómo elegir una combinación.

Texto alternativo y microcopia

En esta lección, te enseñaré un elemento muy importante de la accesibilidad digital y cómo puede influir en tu pensamiento de diseño.

Estados

Permítame ayudarlo a comprender cómo los usuarios pueden usar las entradas de teclado, voz y tacto de manera diferente y cómo debe adaptarse/pensar en ello con respecto a las opciones de diseño y UX.

Animaciones y controles multimedia.

Veamos diferentes formas de devolver el control y tomar decisiones de animación responsables.

Estructura alámbrica para accesibilidad

En esta lección, verás cómo realizar un diseño de baja fidelidad de tu proyecto y ya incluir lo aprendido hasta ahora en este paso vital.

10m

Un sistema de diseño básico y accesible

Te mostraré cómo configurar los elementos fundamentales: una paleta de colores, una escala de tipo básica, crear algunos botones y campos de texto y pensar en sus distintos estados.

17m

Diseño

Por último, te mostraré cómo crear tus diseños con todos los elementos que mencioné anteriormente. Después, aprenderás a usar el sistema de diseño.