El documento presenta los conceptos fundamentales del diseño UX/UI, destacando las diferencias entre experiencia de usuario (UX) y la interfaz de usuario (UI). Se aborda la importancia de la empatía en el diseño y cómo el UX se centra en las necesidades del usuario mientras que el UI se enfoca en la presentación visual. También se discuten las herramientas y procesos para implementar un diseño efectivo y las consideraciones al trabajar de manera independiente o en agencia.

1. Simple Steps to
UX/UI web design
#UXLearn
Presented by Ellie Cachette, VP of Product Marketing, @ecachette

2. Agenda
•
•
•
•
•
•
Problema
UX vs UI
Objetivos del UX
Objetivos del UI
Herramientas de Diseño
Resumen

3. ¿Cuál es el problema?

4. Koombea flow process

5. UX/UI
UX es como funciona y
como se siente
UI es como luce

6. - Crispetas
- Descongelar
- 30 segundos

9. UX – Experiencia de Usuario
UX, o experiencia de usuario, mide la facilidad y
el placer que tienen los usuarios al navegar por
un sitio.

10. Propósito detrás del UX
Experiencia de Usuario
*Cumplir con los objetivos del negocio
1. Adquisición de usuario
2. Activación de usuario
3. Retención de usuario

11. ¿Cómo el UX resuelve problemas?
Usabilidad
Diseño
Visual
Investigación
del Usuario
Arquitectura de
La Información
UX
Diseño de
Interacción
Estrategia de
Contenido

12. Componentes del UX
1.
2.
3.
4.
Definición de Usuario
Mapas del Sitio
Flujo de Usuario
Wireframes

13. Definición de Usuario

14. Arquitectura de la Información

15. Flujo de Usuario

16. Wireframes

17. Koombea flow process

18. “Todo empieza con empatía. Diseñamos para sus
clientes ante todo”.
- Diego Coronado, Director Creativo.
La tecnología es ineficaz sin una interfaz que logre llegar a
la gente de una manera significativa. Por ende el diseño
necesita ser más humano, no solamente pixeles.

19. UX No es UI
http://www.uxisnotui.com/downloads/a4.pdf

20. UI- Interfaz de Usuario
Un hábil diseñador de interfaces entiende la
importancia de proporcionar al usuario una
solución a un problema definido

21. UI
Branding
Color, Esquemas:
fuentes, Logo,
Estilos
Wireframing

22. Propósito detrás del UI
Interfaz de usuario
• Adquisición de Usuario
• Marca
• Generar confianza

23. Cómo llegamos al UI?
1. El problema ha sido definido
2. Flujos de usuario e historias han sido creadas
3. Experimentos para validar personas
4. Wireframes y bocetos
5. Mockups con UI incluida pueden ser realizados
6. Prueba de Usuario
7. Es tiempo de codificar la interfaz – UI Design!

24. Qué NO hacer:

25. Herramientas de diseño fáciles
de usar

26. HotGloo
Hotgloo.com

27. Balsamiq
Balsamiq.com

28. Invision
invisionapp.com

29. La diferencia entre UX/UI
Freelance vs Agency

30. Freelancer
Creatividad
Armonía de
Marca
Perfectiva
nueva
Acceso a las
últimas
técnologías
Acceso a
“recursos”
Cambios
rápidos
Cons
In-house
Flexibilidad
Pros
Agencia
Expertos
Especialidades
limitadas
Costos
Falta de
creatividad
La “Marca”
puede varias
Cambios
rápidos pueden
varias
Burocracia

31. 386 Park Ave South, 10th Floor
¿Alguna Pregunta?
Podemos ayudarte.
Mándanos un correo a
mvp@koombea.com
New York, NY 10016
625 2nd St., Suite 280
San Francisco, CA 94107
Cra 53 # 79-01 L-301
@koombea #UXLearn
/koombea
Barranquilla, Colombia