Aprender las bases de un proyecto de Diseño de Interfaz y UX
Qué aprenderás sobre el diseño de interfaces UI y UX
¿Qué es user experience?
Qué implica ser un diseñador de interfaces
Básicos de Diseño
Principios de Gestalt y UX
Principios de Usabilidad y Heurística
Kickoff del proyecto del curso
Realizar la investigación inicial de un proyecto UI
Tipos de investigación
Entender el problema: ¿Qué queremos solucionar?
Benchmarking
User Research: Encuestas
User Research: Entrevistas
User Personas
User Journeys
Organizar la información y bocetar los primeros wireframes
Análisis de Interfaces
Introducción a la Arquitectura de la Información
Patrones de UI
Wireframes: comienza en papel
Guerrilla testing con Paper Prototyping
Wireframes digitales en Sketch
Diseñar los detalles de nuestra interfaz de producto
Mood Board
Diseñando interfaces con Sketch, empty states, mensajes de error y notificaciones
Diseño Responsivo y Adaptativo
Design System
User testing
Entregar el diseño de la interfaz e iterar
Cómo entregar para desarrollo: Zeplin
Cómo seguir probando tu interfaz: A/B Testing con Optimize y HotJar
Cierre del curso
Mentorías expert
Diseño UI en vivo
Existen diversas metodologías para hacer diseño de interfaces. Esta tarea no solo significa hacer pantallas estéticas, sino que implica interpretar el motivo de los usuarios. De esta forma, se podrán crear caminos y puentes que ayuden al usuario a llegar cumplir su objetivo con una sensación de plenitud.
Una de las metodologías más usadas para el diseño de interfaces es el Design Thinking. Esta consta de cinco fases:
Dentro de este proceso, se encuentran otros pasos que lo convierten en un trabajo iterativo:
Es importante considerar que esta forma de diseñar también involucra una constante comunicación de calidad con el equipo, pues se trata de una labor que no es sencilla de realizar sin la debida colaboración, en especial, si se quiere un resultado rápido, que es de hecho el objetivo de esta metodología. Sin embargo, tampoco se trata de llegar antes, sino eficientemente.
El problema es algo en lo que hay que enfocarse el tiempo necesario. Tomar decisiones anticipadas puede traer consecuencias fatales para el proyecto si se deja de lado el cuidado al detalle y se ignora el flujo vital de las iteraciones.
Contribución creada con aportes de: Luis Enrique Herrera.
Aportes 99
Preguntas 4
Design Thinking - 5 fases de su proceso
1- Empatizar: Conocer y entender las necesidades de nuestros usuarios.
2- Definir: Definir el alcance de nuestro proyecto.
3- Idear: Sacar ideas de como se puede resolver nuestro proyecto.
4- **Prototipar: ** Prototipar ya sea en papel o digital la solución de la definición e ideación de nuestro producto.
5- **Testear: ** Probar el prototipo con nuestros usuarios para saber si nuestro producto funciona o necesita hacerle ajustes.
Dentro de este proceso hay algunos pasos que debemos seguir:
1- Planeación:
-Análisis de datos
-Historias de usuario
-Flujos de usuario
2- Exploración:
-Sketching
-Wireframe
-IA
-Prototipo
3- Diseño:
-Guía de estilos
-Mockups
-Hand off
4- Testing:
-Prueba de velocidad
-Finalizar diseño
-Micro detalles
5- Retroalimentación:
-KPI Testing
-A/B Testing
(regresar este ciclo para nuevas versiones y nuevas funciones)
RECOMENDACIONES.
Les recomiendo el Curso de Design Thinking, para que amplien su conocimiento.
Recomiendo tomar apuntes de estas clases, en papel o en archivos de texto, ya que estas clases parecen tener un contenido bastante denso, y podriamos olvidar facilmente lo aprendido.
RECOMENDACIONES:
Ser diseñador es una actividad social: Vamos a colaborar con gente de otras áreas por lo que debemos comunicarnos continuamente de una manera clara y abierta, debemos ser flexibles y sobretodo empáticos.
Es un maratón, no una carrera: Al ser un proceso iterativo, implica que lo vamos a repetir varias veces, ya que nuestro producto o solución va a sufrir cambios, ya sea por retroalimentación del usuario, porque exista un cambio en el modelo del negocio o porque hay un cambio en la tecnología. Tener esto presente nos ayudará a evitar la frustración en nuestro día a día.
Enamórate del problema, no de la solución: Nuestra labor está enfocada en resolver el problema del usuario, no solamente en tener un producto que sea estéticamente agradable.
Me gustaría añadir a esta clase que fallar es también parte del proceso. Tal vez tengamos un idea errónea acerca de lo que el cliente quiere que diseñemos, y al presentarle nuestro error es cuando quedará marcado en nosotros que ese no es el diseño esperado y podremos mejorar a partir de ahí.
NOTAS:
Metodología >>> DESING THINKING
-empatizar: necesidades del usuario
-definir: definición del problema que deseamos resolver y el alcance de nuestro proyecto
-idear: ¿Cómo podemos resolver el problemas?
-prototipar.
-test: se implementa con los usuarios… Feedback (retroalimentación)
Dentro del la metodología vienen implícitos actividades como:
/Planeación/ análisis de datos, flujos de usuarios, historias del usuario
/exploración/ diseños, estructuras ilambricas, intel. Art., prototipos
/diseño/guía de estilo, maquetas,
/retroalimentación/ pruebas KPI, pruebas A/B
/testing/ pruebas rápidas, diseños finales, micro detalles
PROCESOS ITERATIVOS
Notitas:
*ser diseñador es act. Social:
*es un maratón y no carrera:
*Enamorarse del problema no de la solución
resuemen. Para crear un interfaz necesito plantear la estructura de mi proyecto. Preguntándome ¿qué necesitan? ¿Por qué y para que lo necesitan? ¿Cómo puedo solucionarlo? Y ya hecho dejar que el usuario interactúe con el producto y me haga saber si le es funcional o no.
La iteración es la mejor amiga de todo diseñador UX
El proceso de Design Thinking es aplicable a casi todas las áreas donde se desarrollen productos y servicios, soy diseñador de tarjetas de electrónica y es algo que se debe aplicar.
Enamórate del problema, no de la solución.
Frecuentemente como diseñadores tenemos un ego o tendencia a enamorarnos de nuestros diseños o propuestas, pero en el ámbito profesional del UI / UX, se debe estar consciente que estamos en una serie de procesos iterativos donde nuestras propuestas y diseños sufrirán varias modificaciones ya sea por retroalimentación de los usuarios, o por un cambio tecnológico, o por un cambio en el modelo de negocio, o por recomendación de otras áreas de nuestro equipo de trabajo, por lo que debemos mentalizarnos que nuestro trabajo (objetivo) es resolver las necesidades y los problemas del usuario, no únicamente ofrecer propuestas visualmente estéticas pero alejadas del objetivo.
Soy desarrollador y me encuentro aprendiendo este grandioso mucndo del UI/UX para desarrollar mi prorio producto
😃
Metodología
5 fases de Design Thinking a la hora de crear un producto exitoso
1)Empatizar: Conocer las necesidades y problemas de los usuarios
2)Definir: definición del problema que vamos a resolver y el alcance del proyecto.
3)Idear: Sacar ideas de como podemos podemos resolver nuestro proyecto.
4)Prototipos: Prototipar en papel, digital existen varios formas
5)Test:Probar con los usuarios , de esta manera nos dan retroalimentación y podemos ver si necesitamos algunos ajustes a nuestro producto.
Dentro de estos procesos existen mas pasos
Planeación,
Exploración
Diseño
Testing
Retroalimentación
vengo del curso de design thinking y es bellisimo como todo se complementa aquí y exploramos más conocimiento centrado en empatizar con el usuario
Hola a todos,
quiero recalcar la frase “Enamórate del problema y no de la solución” ya que muchos estamos acostumbrados a dar soluciones pero no vemos las causas del problema, esto pasa habitualmente en diseño y se le da más importancia al cómo se ve que a la utilidad. Si ponemos la investigación y análisis de las causas primeros llegaremos a una solución visualmente atractiva y esencialmente útil.
Hola. De casualidad me podrian recomendar algun libro sobre diseño de interfaces para poder reforzar el curso?. Ademas que necesito usar referencias porque quiero implementar este curso en mi proyecto de fin de carrera.
Me gusto mucho esta frase “Tenemos que enamorarnos del problema y no de la solución”
“Como diseñadores es muy fácil encariñarlos con lo que proponemos, pero hay que estar consientes de que nuestra labor está enfocada en resolver el problema del usuario, no solamente tener un producto que sea estéticamente agradable”.
Buenas chicos y chicas ! para mi recomendación es mejor realizar primero el curso de desing thiking , y cuando lleguen a este curso tendrán mas conocimiento sobre la metodología ágil que es la del desing thiking y se les hara mas facil la comprensión del tema
En la fase del prototipado es importante no enamorarse de una idea, y tampoco desechar nada. En caso de que la primera solución no funcione, es bueno regresar atrás y revisar los apuntes para ver de que otra forma podemos arreglar; por eso mismo, se debe guardar un registro de la lluvia de ideas.
No tenemos que ser egoístas y pensar que nuestra solución ideada es la perfecta y la más bonita, sino recordar que la finalidad de nuestro producto es satisfacer a nuestros clientes y por lo tanto idear un producto en torno a sus necesidades.
excelente clase
La metodologia “Design thinking” es formidable porque permite alzanzar la definiciòn màs acorde con el proyecto que se desee presentar
Enfocarse en soluciones es muy bueno, pero muchas veces no corrige el problema que esta pendiente, por eso hay que delimitarse al problema para encontrar laa mejor solución. “Enamorate del problema, no de la solución”
5 faces de design thinking(empatizar,definir, idear, prototipar,testear)
Dentro de este proceso hay algunos pasos que debemos seguir:
1- Planeación:
2- Exploración:
3- Diseño:
4- Testing:
5- Retroalimentación:
(regresar este ciclo para nuevas versiones y nuevas funciones)
Diferencia de UI UX:
El proceso del “Diseño Centrado en la Persona”
.
Te cuento un poco del proceso que llevamos a cabo con mi proyecto Nutryen, Ganamos el 2° lugar en negocios de alto impacto y esta información que te cuento es mi experiencia vivencial durante 1 año para desarrollar un proyecto con el Design Thinking.
En la fase idear -> Prototipar -> Probar es un ciclo de cambios, modificaciones, cuestionar la teoría, aprender de otros campos del conocimiento. hasta llegar a una solución final.
¡Ahora a exponer tus resultados!
Cada que visitaba a mis abuelos, me daba cuenta que sufrían mucho por que eran diabeticos. su alimentación no era la mejor y mucho menos hacían algo por cuidarse, ahí entendí que nos quedaría poco tiempo si esto seguía así.
-Present: ya estás listo, ahora cuentanos tus resultados finales y explicanos porque tu idea. Al final te sientes tan satisfecho de poder apoyar el resultado. Con mi proyecto comenzamos con una harina, y terminamos con una receta de galletas capaz de regular el azucar en la sangre y al mismo tiempo ser deliciosa.
MetodogIA Design Thinking
Empatizar: Conocer la necesidades del usuario.
Definir: Definir el problema a resolver y el alcance del proyecto.
Ideación: Arrojar posibles ideas de como solucionar el proyecto.
Prototipar: Fisico o digital de como va el proceso del proyecto.
Test: Pruebas con el usuario.
Todo es un proceso iterativo, porque se repite el mismo proceso hasta alcanzar la mejor versión del proyecto
Empathise:
Empatizar,esto quiere decir que debemos comprender las necesidades y problemas del usuario.
Define:
Comenzamos a hacer una definición del problema que vamos a resolver y también del alcance de nuestro proyecto .
Ideate:
Hacer una serie de ideación, quiere decir que queremos sacar ideas de cómo resolver nuestro proyecto.
Prototype:
Después pasamos a prototipar, puedo hacer en papel o en digital hay varias maneras para hacerlo .
Test:
Una vez que tenemos nuestro prototipo empezamos a probar con los usuarios,De esta manera Ellos nos pueden dar su retroalimentación y nosotros podemos si necesitamos hacer ajustes a nuestro producto.
Qué es design thinking?
Es un proceso no lineal e iterativo que los equipos utilizan para comprender a los usuarios, desafiar suposiciones, redefinir problemas y crear soluciones innovadoras para prototipos y pruebas. Involucrando cinco fases: Empatizar, Definir, Idear, Prototipar y Probar, es más útil para abordar problemas que están mal definidos o desconocidos.
En el desarrollo de un nuevo producto, la clave del éxito es tener como foco principal el problema a resolver, por eso: Enamórate del problema, no de la solución!
Muy buena clase aclaro muchas dudas
bases UX
Como dise;ador hay que rescatar dos cosas siempre, no te enamores de la solucion e itera constantemente.
“Ser diseñador es una actividad social”, siempre apostando a la interdisciplinariedad!
“Enamorate del problema, no de la solucion” super consejo, como diseñadores a veces cuesta aceptar que un producto esta sujeto a cambios
Graciaas
¿Qué implica ser un diseñador de interfaces?
Design Thinking consta de 5 fases que nos ayudan a crear un producto exitoso.
Dentro de estos procesos también hay varios pasos que son.
Planeación
Exploración
Diseño
Testin
Retroalimentación
Lo importante es recordar que siempre son procesos iterativos. Significa que vamos a estar repitiendo este proceso varias veces hasta que tengamos la mejor versión de nuestro producto.
Recomendaciones
Excelente tip!; “enamórate del problema no de la solución”.
Enamorarse del problema y no de la solución ❤️
Gracias
Entender el proceso en cuanto a la planecición
Comprender que sea iterativo
Design thinking (Proceso iterativo)
• Empatía.- Conocer sus necesidades y problemas
• Definición del problema a resolver y su alcance.
• Ideación.- Sacar distintas ideas de como resolver el problema planteado.
• Prototipar.- Realizar pruebas para ir encontrando dificultades o problemas nuevos.
• Test.- Probar con los usuario.
Metodologia→design thinking
Empatizar→entender necesidades y problemas de nuestros usuarios
Definicion→definir el problema y el alcance de nuestro proyecto
Ideacion→ideas para resolver el proyecto
Protoripar→papel o digital
Procesos iterativos→repetir el proceso hasta tener la mejor version del producto
La mayoría nos enamoramos en la solución y no del problema. Ahí es donde debemos trabajar fuertemente, en el problema.
FASES DEL DESIGN THINKING:
EMPATIZA: Entiende y conoce las necesidades y problemas del usuario.
DEFINE: Define tu problema y el alcance de tu proyecto.
IDEACIÓN: Como puedes resolver el problema.
PROTOTIPO: Crea un modelo con el cual podrás plasmar la idea
TESTEA: Prueba tu prototipo con los usuarios para obtener feedback.
RECOMENDACIONES PARA DISEÑADORES
1.Colaborar con personas de otras áreas.
2.Ser Flexible y Empático.
3.Tener Buena comunicación con tus compañeros
5.Evita la frustración, tu proyecto se verá expuesto a cambios.
6.Resuelve problemas no te enamores de la solución.
El Design Thinking es un proceso muy valioso y aplicable en todo desafío.
Para complementar este curso, les recomiendo el curso de Design Thinking.https://platzi.com/clases/design-thinking/
"Enamorarse del problema no de la solución"
Me gusto esa frase y creo que no sólo podemos aplicarla en el mundo del diseño.
Les recomiendo el Curso de Design Thinking con Minds Garage (aquí mis notas del mismo por si les son útiles).
Al fin se para que me va a servir el design thinking
¿Qué implica ser un diseñador de interfaces?
Desing Thinking: Empatizar, definir los problemas, ideación, prototipo, test.
Dentro de este proceso tenemos varios pasos:
Planeación, exploración, diseño, testin, retroalimentación. (Procesos iterativos: Que se repiten varias veces hasta obtener la mejor versión de nuestro producto).
RECOMENDACIONES:
Ser diseñador es una actividad social: Vamos a colaborar con gente de otras áreas por lo que debemos comunicarnos continuamente de una manera clara y abierta, debemos ser flexibles y sobre todo empáticos.
Es un maratón, no una carrera: Al ser un proceso iterativo, implica que lo vamos a repetir varias veces, ya que nuestro producto o solución va a sufrir cambios, ya sea por retroalimentación del usuario, porque exista un cambio en el modelo del negocio o porque hay un cambio en la tecnología. Tener esto presente nos ayudará a evitar la frustración en nuestro día a día.
Enamórate del problema, no de la solución: Nuestra labor está enfocada en resolver el problema del usuario, no solamente en tener un producto que sea estéticamente agradable.
Empatizar. Conocer las necesidades y los problemas del usuario.
Definición. Definir el problema y el alcance del proyecto.
Ideación. Proponer ideas de cómo resolver el problema.
Prototipado.
Testear.
(PROCESOS ITERATIVOS)
Debemos ser sociales, empáticos.
Esto es una maratón y no una carrera.
Enamórate del problema no de la solución.
Por qué utilizamos el Design Thinking porque es una metodología centrada en el usuario, ya que parte de una necesidad latente y porque dentro de las fases permite tener una comunicación directa con el usuario y en la fase de test pones en prueba el resultado enfrente del mismo usuario para poder tener mejoras o volver a partir en las anteriores fases para dar un mejor resultado. 💚
gracias
Es una maratón, no una carrera.
Planear -> explorar -> diseñar -> testing -> retroalimentar
Por lo que veo el diseñador tiene que concilar entre las necesidades de los usuarios y el equipo de trabajo, ¿es así?
Sería muy útil tener las presentaciones. Sugiero subirlas.
Datos muy importantes !
Objetivo: Resolver el problema del usuario, más allá de crear un producto.
Considero muy interesante el proceso de identificación y solución del problema, puesto en él influyen percepciones de parte del cliente y el servidor; le podemos llamar egocentrismo.
Empatizar: Enter sus problemas
Difinir problema
Crear ideas
Prototipar
Probar
Repetir*
¡Un diseño nunca está terminado, siempre se puede mejorar!
muy buena clase
, Definition (En este punto se define el problema al que vamos a solucionar y el alcance del proyecto),Ideación (Esta es la etapa creativa, proponemos ideas para resolver el problema), Prototipar (Armamos prototipos en papel o digital para poder probar con los usuarios) y Test (En esta etapa hacemos las pruebas con los prototipos hechos en la fase anterior)
Estos son procesos iterativos, repetimos este proceso varias veces para obtener la mejor version de nuestros producto.
Se recomienda ser flexible y empático a la hora de tratar con nuestro equipo.
Debemos enamorarnos del problema, no de la solución.
Martín Coronel
UX/UI Design
la primera de las etapas del design thinking me genera dudas, a mi me parece mas intuitivo ver el problema y luego si empatizar
1- Empatizar: Conocer y entender las necesidades de nuestros usuarios.
2- Definir: Definir el alcance de nuestro proyecto.
3- Idear: Sacar ideas de como se puede resolver nuestro proyecto.
4- Prototipar: ya sea en papel o digital la solución de la definición e ideación de nuestro producto.
5- Testear: Probar el prototipo con nuestros usuarios para saber si nuestro producto funciona o necesita hacerle ajustes.
Muy importante, la comunicación con todo el equipo.
Tuve problemas al encontrarme con estos términos que desconocía, así que los busqué:
Un website wireframe, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web
La primera función de un style guide es saber las dudas principales que surgen en los equipos de diseño y desarrollo de apps. En pocas palabras, es un documento que describe los principios de una compañía y cómo deben aplicarse, incluyendo:
El Mockup o maqueta en castellano es una representación más avanzada del diseño gráfico y comunicativo (desde una visión de navegación y AI) de un proyecto. Hay dos escuelas de pensamiento que se diferencian en como conciben la forma de crear un MockUp, aquellos que creen que la maqueta debe representar el producto final exactamente (alta fidelidad), y aquellos que ven la fase de maqueta como más transitorio y no debe tomar demasiado tiempo (media fidelidad).
Podríamos decir que generalmente es, una composición gráfica completa que ha utilizado el wireframe como plantilla introduciendo todos los elementos gráficos y visuales, convirtiéndose así en un modelo a escala de un producto que se utiliza para demostrar y probar un diseño. El mockup es un medio de representación de la apariencia del producto, y muestra los fundamentos de su funcionalidad. Los MockUp incluyen los detalles visuales, tales como colores, tipografía, etc., y son generalmente estáticas. Al observar un mockup, se debe tener una buena idea de cómo se verá el producto final y una idea aproximada de cómo podría funcionar (incluso si las funciones aún no se han desarrollado).
Es importante distinguir un Mockup de un prototipo. Un prototipo está destinado a funcionar, aunque sea parcialmente, mientras que los Mockup no funcionan. Se componen de las imágenes en pantallas estáticas, sólo «parecen» la interfaz de usuario real.
Se integran elementos con mayor detalle, visualizamos una aproximación de:
-Contenidos (pueden ser imágenes y textos genéricos que no van a ser finalmente usados en el desarrollo)
-Paleta de colores, tomando como referente lo institucional, misional y el público objetivo del proyecto
-Declaraciones CSS
-Dimensiones de áreas de contenido y servicios
-Iconografía
Qué implica ser un diseñador de interfaces
Design Thinking, esta consta de 5 fases que nos ayudan a crear un producto exitoso.
1. Empatizar: Esto quiere decir que hay que conocer las necesidades de nuestros usuarios y entender sus problemas.
2. Definir: Aquí definimos el problema que vamos a resolver y también del alcance de nuestro proyecto.
3. Ideación: Sacamos ideas de como podemos resolver nuestro proyecto.
4. Prototipar: Esta fase puede ser en papel o digital.
5. Test: Una vez tenemos el prototipo empezamos a probar con los usuarios, de esta manera ellos nos pueden dar feedback y así podemos ver si necesitamos hacer ajustes a nuestro producto.
Dentro de estos procesos también hay varios pasos (Planeación, Exploración, Diseño, Calidad - Testing, Retroalimentación) lo más importante a recordar es que siempre son proceso iterativos. Esto quiere decir que vamos a estar haciendo estos proceso varias veces hasta que tengamos la mejor versión de nuestro producto.
Recomendaciones
Ser diseñador es una actividad social. Al crear un producto colaboraremos con gente de otras areas como desarrollo, product management o marketing por lo tanto es importante que siempre nos estemos comunicando con ellos de una manera clara y abierta, ser flexible y sobre todo empático (Esto nos ayudara a ser mejor como diseñadores y a crear el mejor producto posible)
Es un maratón, no una carrera. Debido a que es un proceso iterativo debemos estar conscientes de que lo vamos a repetir varias veces y que probablemente nuestro producto o solución va a sufrir cambios (debido a feedback, cambio en modelo de negocio o por un cambio en la tecnología). Tener esto presente nos va a ayudar a evitar la frustración en nuestro día a día.
Enamórate del problema, no de la solución. Como diseñadores es muy fácil encariñarnos con lo que proponemos pero tenemos que estar conscientes que nuestra labor esta en resolver el problema del usuario no solo tener un producto que sea estéticamente agradable.
Es muy importante romper con los esquemas clásicos de productividad, el mundo está cambiando rápidamente!
Para empatizar siempre se inicia desde Design Thinking o hay otra forma?
Recomendaciones:
2.** Esto es un maratón y no una carrera**, justo como es un proceso iterativo debemos ser concientes que nuestro producto o servicio va sufrir cambios ya sea por feedback o porque cambie el modelo de negocio o tambien cambio de tecnología
3.** Enamórate del problema y no de la solución**, debemos ser conscientes que nuestra labor está enfocada en resolver un problema que tiene el usuario
Recomiendo muchísimo hacer primero el Curso de Design Thinking uno de mis preferidos hasta ahora.
fase: desing Tinking https://platzi.com/clases/design-thinking/
“Enamorate del problema, no de la solución”; pues suele suceder de que es mucho más importante enfocarse en entender el usuario, comportamientos, contexto para así posteriormente la solución sea eficáz y bien usuada por nuestro usuario final.
muy bueno!
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.