Este documento discute las herramientas de diseño de interfaz de usuario como mockups, wireframes y capas gráficas, y los principales programas para diseño de aplicaciones como Photoshop, Illustrator y Sketch. También analiza aspectos importantes de usabilidad como artboards, interfaz de usuario, facilidad de aprendizaje y pixel perfect. Finalmente, menciona aplicaciones satélite y recursos relacionados con el diseño de aplicaciones.

1. Herramientas de diseño UI
#SlashFriday

2. ¿Para qué usamos
estas herramientas?

3. Mockup
Wireframes
Capa gráfica
Diseñando

4. Diseñando
Mockup
Wireframes
Capa gráfica

5. Diseñando
Mockup
Wireframes
Capa gráfica

6. ESTRUCTURA DEL CONTENIDO CAPA GRÁFICAELEMENTOS DE INTERACCIÓN

7. ¿Qué te gustaría que tuviera tu
programa ideal para diseñar
aplicaciones?
Ehhh... ¿que haga el trabajo
por mí?
Design Team

8. En busca del
software ideal
?

9. ¿Qué esperamos de
un buen programa de
diseño de apps?

10. Ofrezca un resultado
de alta calidad
Nos permita ser
rápidos
Disponga de
recursos útiles
Tenga un precio
competitivo
¿Qué esperamos de un buen programa de diseño de apps?

11. Principales
programas para el
diseño de
aplicaciones

12. Photoshop Illustrator Sketch
Principales programas para el diseño de aplicaciones

13. 1990
Edición de imágenes
Mac
Windows
1987
Creación de ilustración
Mac
Windows
2008
Diseño UI
Mac
Principales programas para el diseño de aplicaciones
Photoshop Illustrator Sketch

14. Algunos aspectos a
tener en cuenta...

15. USABILIDAD
¿A quién no le gusta
trabajar de forma ágil y
cómoda?

16. ARTBOARDS
USABILIDAD

17. • Nos ayuda a crear el flujo visual
de la aplicación.
• Nos permiten ver varias o todas
las pantallas a la vez de forma
que podemos tomar decisiones
dentro del flujo del diseño.
• Es cómodo tener todas las vistas
en una sola pantalla sin tener
que abrir un documento por
pantalla.
Usabilidad: Artboards
ARTBOARDS

21. La interfaz de usuario
USABILIDAD

22. • Ligereza visual y simpleza
siempre son deseables.
• Entorno de trabajo optimizado
para la tarea que se desarrolla.
• Que sea de fácil interacción lo
cual agiliza el workflow dentro
del programa.
Que me muestre lo que necesito
Usabilidad: La interfaz de usuario

23. Usabilidad: La interfaz de usuario

24. Usabilidad: La interfaz de usuario

25. Que se fácil de
aprender
USABILIDAD

26. • Interfaz amigable y sencilla
no generará tensiones en el
proceso de aprendizaje.
• ¡No me líes! Enfoque a la tarea
que se desarrolla.
• Resultados rápidos desde los
primeros pasos.
“ Uyyy...esto es muy complejo.”
Usabilidad: Que sea fácil de aprender

27. La curva de aprendizaje
Usabilidad: Que sea fácil de aprender

30. Pixel perfect

31. • Diseño al pixel, contornos
perfectos.
• Grids, alineación de textos y
elementos, tratamiento del
color... etc
Ofrecer lo mejor.
Pixel Perfect

32. Pixel Perfect

33. Pixel Perfect: generando assets

34. Pixel Perfect: generando assets

35. Pixel Perfect: generando assets

36. Pixel Perfect: generando assets

37. Pixel Perfect: generando assets

38. Aplicaciones
satélite
Eo!

40. Adobe Preview CC

41. Adobe Preview CC

43. iOS Sketch Mirror

44. Recursos

51. 36’29€
mes
435’45€
IVA incluido
IVA incluido
año

53. 116’28€
4’99€ Para siempre
IVA incluido
IVA incluido

54. Slash-conclusiones

55. Sea cual sea el software que elijas para diseñar...
Trata de pasarlo bien

56. ¡Muchas gracias!
Izaskun Sáez
UX/UI Designer