Tweet
Tweet

Slide 1

Slide 1 text

Fundamentos UI/UX @supeergabs

Slide 2

Slide 2 text

¡Hola soy Gabs! UX Designer Vivo en México Me gusta el café y los perritos @supeergabs

Slide 3

Slide 3 text

Agradecimiento a Darshana

Slide 4

Slide 4 text

Aprenderemos los fundamentos de UX / UI Design y cómo aplicarlos en tu desarrollo profesional. ¿De qué va la clase? Si tienes dudas compártelas en el chat :-) Hagamos un espacio seguro para todas y todos.

Slide 5

Slide 5 text

Diferencia entre la UX y el UI Design

Slide 6

Slide 6 text

Conceptos claves para entender la UX Necesidades del usuario Tecnología Objetivos de negocio UX Experiencia de usuario: UX por sus siglas en inglés User eXperience

Slide 7

Slide 7 text

¿Han escuchado del diseño centrado en el usuario (DCU)? User-Centered-Design

Slide 8

Slide 8 text

Diseño centrado en el usuario ● El diseño centrado en el usuario (DCU) es un enfoque para crear nuevas soluciones. ● Comienza con los seres humanos y termina con las respuestas que se adaptan a sus necesidades. https://uxplanet.org/user-centered-design-process-and-benefits-fd9e431eb5a9

Slide 9

Slide 9 text

Fundamentos de UX

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Diferentes fases de la UX Diagrama de James Garret Experiencia de usuario

Slide 12

Slide 12 text

Antes de comenzar debemos tener claro lo siguiente: ● Las necesidades que el sistema debe resolver para el usuario. ● Toda experiencia debe tener un propósito claro. ● Estrategia derivada de la perspectiva del negocio y del usuario. Necesidades de usuario / Investigación

Slide 13

Slide 13 text

Crea un documento que incluya la información ● Google Docs ● Notion Necesidades de usuario / Investigación Ejemplo: https://www.notion.so/Shaping-template-102e 082d09be4d7e8c4e93b92f8f115f

Slide 14

Slide 14 text

● Funcionalidades: Son las tareas que el sistema debe cumplir y alcanzar los objetivos de negocio. ● Contenido: Identificar la cantidad de imágenes, gráficas, textos, secciones, en general todo el contenido que se tiene que generar. Funcionalidades y contenido

Slide 15

Slide 15 text

Funcionalidades Contenido Descripción de tareas Expectativas Resultados Flujos Imágenes Videos Textos Gráficos

Slide 16

Slide 16 text

Imágenes ● https://unsplash.com/es ● https://www.freepik.com/popular-photos ● https://stock.adobe.com/mx/

Slide 17

Slide 17 text

Iconos ● https://fonts.google.com/icons ● https://heroicons.com/ ● https://developer.apple.com/sf-symbols/

Slide 18

Slide 18 text

Ilustraciones ● https://undraw.co/ ● https://www.freepik.com/

Slide 19

Slide 19 text

Textos ● Notion ● Google docs

Slide 20

Slide 20 text

En esta capa se definen los sistemas de navegación, jerarquía y búsqueda. Esta capa se divide en: ● Arquitectura de información ● Diseño de interacción Diseño de interacción y arquitectura de la información

Slide 21

Slide 21 text

Arquitectura de la información

Slide 22

Slide 22 text

Arquitectura de la información

Slide 23

Slide 23 text

El diseño de interacción responde a ¿Cómo las personas van a interactuar con el sistema? Diseño de interacción Definimos si habrá: ● Botones ● Scroll ● Sliders ● Contadores ● Mensajes de error ● Pantallas de carga ¡Todo a nivel funcional - lo estético aún no!

Slide 24

Slide 24 text

Diseño de interacción

Slide 25

Slide 25 text

En esta capa se comienzan a hacer los wireframes o primeros bocetos del sistema. Diseño de interfaz y navegación El objetivo de esta fase es: ● Visualizar los contenidos ya interactuando con otros. ● Asegurar que la solución que se propone es funcional y cumple con los objetivos de usuarios y negocio.

Slide 26

Slide 26 text

Diferentes entregables a un nivel progresivo, para ir validando ideas. Diseño de interfaz y navegación Un buen wireframe debe cumplir lo siguiente: ● La información que se verá en pantalla. ● Cómo y dónde estarán los elementos interactivos. ● Cómo se navega entre los distintos contenidos. ● El contenido debe ser claro y facilitar que se cumplan las tareas.

Slide 27

Slide 27 text

Puedes usar Whimsical o Figma

Slide 28

Slide 28 text

En esta capa definiremos los componentes visuales, los colores, las tipografías y otros elementos de diseño visual. Diseño visual El objetivo de esta fase es: ● Cuáles componentes serán interactivos. ● El sistema sea congruente a nivel experiencia.

Slide 29

Slide 29 text

Diseño visual

Slide 30

Slide 30 text

Superficie

Slide 31

Slide 31 text

Diseño visual

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Recursos https://speakerdeck.com/supergabs

Slide 34

Slide 34 text

Ejercicio

Slide 35

Slide 35 text

● Elige una app ● Identifica cuál es el proceso que más te molesta ● Piensa ¿Cómo la mejorarías? ● Describe tu solución o dibuja ● Comparte en Twitter @darshana @supeergabs #FundamentosUX Ejercicio

Slide 36

Slide 36 text

Recursos ● About face ● Don’t make me think ● The design of everyday things ● Universal Principles of Design ● Hooked ● https://www.nngroup.com/

Slide 37

Slide 37 text

¿Preguntas?