Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
@ A B N
P R O C E S O D E D I S E Ñ O U I / U X
@ABN
T E O R Í A
P L A T A F O R M A S
Ordenadores Móviles Tablets Wearables
S I S T E M A S O P E R A T I V O S
iOS Android Windows Phone ¿BlackBerry?
E L M E R C A D O A C T U A L
Mac y PC Smartphones iPad
¿ Q U É E S “ U I ” ?
La interfaz de usuario es lo que define la parte visible de
una aplicación o un software en general. ...
¿ Q U É E S “ U X ” ?
Entendemos por experiencia de usuario lo que define las sensaciones
que recibe aquel que usa una app,...
M A N O S A L A O B R A
C O N F O R M A C I Ó N D E L A I D E A
¿Qué queremos hacer?
!
¿Qué vamos a solucionar?
!
¿A quién va dirigido?
!
¿En qué ...
S K E T C H I N G
S K E T C H I N G
S K E T C H I N G
Lo importante es descargar la idea
!
No tienes por qué cuidar los detalles, con que se entienda sobra
!
...
¡ M O L E S K I N E M A N D A !
W I R E F R A M I N G
W I R E F R A M I N G
F U E R A L A
C A P A D E
D I S E Ñ O
W I R E F R A M I N G
Lo importante es la estructura
!
Prestar atención a la distribución de los elementos
!
Identificar mu...
M E D I O S D E W I R E F R A M I N G
Papel Adobe Omnigraffle Axure
¿ L O H E M O S H E C H O B I E N ?
P R O T O T I P A D O
M E D I O S D E P R O T O T I P A D O
InVision Marvel
Marvel
S I L A R E S P U E S T A E S “ S I ”
E J E C U C I Ó N
I N S P I R É M O N O S
M E D I O S D E I N S P I R A C I Ó N
Dribbble Otras apps Abduzeedo
“ L O S B U E N O S A R T I S T A S
C O P I A N … L O S M E J O R E S ,
R O B A N ”
P A B L O P I C A S S O
U S E M O S R E C U R S O S
R E C U R S O S
Iconos
!
Archivos de GUIs
!
Fotografías y stocks
!
Paletas de colores
!
Tipografías
A B R E Y A E L P H O T O S H O P
E J E C U C I Ó N
Debemos tener en cuenta los colores
!
Debemos tener en cuenta la tipografía
!
Respetamos los wireframes,...
M E D I O S D E E J E C U C I Ó N
Adobe (principalmente,
Photoshop)
Sketch
E L F E E D B A C K E S B I E N
M E D I O S D E F E E D B A C K
InVision Dribbble Behance
I N V I S I O N
I N V I S I O N
Feedback privado, no público
!
Posibilidad de prototipado
!
Comentarios interactivos y con un muy buen sis...
D R I B B B L E
D R I B B B L E
Plataforma súper exclusiva, lo cual es bueno
!
Sólo encontrarás contenido de calidad, palabra de niño dise...
B E H A N C E
B E H A N C E
Es como Dribbble pero menos cool
F U E R A D E C O Ñ A S
B E H A N C E
Permite agregar mucha más información a nuestros trabajos
!
Permite subir trabajos en proceso
!
Es mucho más...
G E N T E Q U E L O H A H E C H O B I E N
I N S T A G R A M
M A I L B O X
S P O T I F Y
T W E E T B O T
T U M B L R
G E N T E Q U E N O L O H A H E C H O
B I E N
W H A T S A P P
T E L E G R A M
G E N T E Q U E L O V A A H A C E R B I E N
A N F I X
O I G U A L N O
@ A B N
Proceso de diseño UI/UX
Prochain SlideShare
Chargement dans…5
×

Proceso de diseño UI/UX

Un repaso bien completo a todos los pasos del proceso de diseño de una interfaz web o mobile, desde que tenemos una idea hasta que la dejamos lista para programación. Además, incluyo unos claros ejemplos de diseñadores que lo han hecho bien.

  • Identifiez-vous pour voir les commentaires

Proceso de diseño UI/UX

  1. 1. @ A B N
  2. 2. P R O C E S O D E D I S E Ñ O U I / U X @ABN
  3. 3. T E O R Í A
  4. 4. P L A T A F O R M A S Ordenadores Móviles Tablets Wearables
  5. 5. S I S T E M A S O P E R A T I V O S iOS Android Windows Phone ¿BlackBerry?
  6. 6. E L M E R C A D O A C T U A L Mac y PC Smartphones iPad
  7. 7. ¿ Q U É E S “ U I ” ? La interfaz de usuario es lo que define la parte visible de una aplicación o un software en general. Es decir, la interfaz de usuario consta de colores, imágenes, iconos, botones… todo lo que sirve para “adornar” una app y hacerla bonita.
  8. 8. ¿ Q U É E S “ U X ” ? Entendemos por experiencia de usuario lo que define las sensaciones que recibe aquel que usa una app, un programa o cualquier tipo de software. Es decir; usabilidad y funcionabilidad, interacción, comportamiento de la app, estructuras intuitivas, etc.
  9. 9. M A N O S A L A O B R A
  10. 10. C O N F O R M A C I Ó N D E L A I D E A ¿Qué queremos hacer? ! ¿Qué vamos a solucionar? ! ¿A quién va dirigido? ! ¿En qué plataforma (o plataformas)? ! ¿En qué entorno se va a usar? ! ¿Nos gusta Daft Punk?
  11. 11. S K E T C H I N G
  12. 12. S K E T C H I N G
  13. 13. S K E T C H I N G Lo importante es descargar la idea ! No tienes por qué cuidar los detalles, con que se entienda sobra ! Lo que tú hagas va a cambiar en más del 50% finalmente
  14. 14. ¡ M O L E S K I N E M A N D A !
  15. 15. W I R E F R A M I N G
  16. 16. W I R E F R A M I N G
  17. 17. F U E R A L A C A P A D E D I S E Ñ O
  18. 18. W I R E F R A M I N G Lo importante es la estructura ! Prestar atención a la distribución de los elementos ! Identificar muy bien qué es cada cosa (formularios, botones, imágenes…) ! En blanco y negro para evitar distracciones del objetivo principal ! El objetivo principal es definir usabilidad y funcionalidad
  19. 19. M E D I O S D E W I R E F R A M I N G Papel Adobe Omnigraffle Axure
  20. 20. ¿ L O H E M O S H E C H O B I E N ?
  21. 21. P R O T O T I P A D O
  22. 22. M E D I O S D E P R O T O T I P A D O InVision Marvel Marvel
  23. 23. S I L A R E S P U E S T A E S “ S I ”
  24. 24. E J E C U C I Ó N
  25. 25. I N S P I R É M O N O S
  26. 26. M E D I O S D E I N S P I R A C I Ó N Dribbble Otras apps Abduzeedo
  27. 27. “ L O S B U E N O S A R T I S T A S C O P I A N … L O S M E J O R E S , R O B A N ” P A B L O P I C A S S O
  28. 28. U S E M O S R E C U R S O S
  29. 29. R E C U R S O S Iconos ! Archivos de GUIs ! Fotografías y stocks ! Paletas de colores ! Tipografías
  30. 30. A B R E Y A E L P H O T O S H O P
  31. 31. E J E C U C I Ó N Debemos tener en cuenta los colores ! Debemos tener en cuenta la tipografía ! Respetamos los wireframes, pero debemos ser conscientes de que la idea original va a sufrir alteraciones ! Debemos trabajar al estilo “píxel-perfect” ! Debemos estar en continua comunicación con el resto del equipo, así como con los clientes (o jefes) en caso de que estos existan
  32. 32. M E D I O S D E E J E C U C I Ó N Adobe (principalmente, Photoshop) Sketch
  33. 33. E L F E E D B A C K E S B I E N
  34. 34. M E D I O S D E F E E D B A C K InVision Dribbble Behance
  35. 35. I N V I S I O N
  36. 36. I N V I S I O N Feedback privado, no público ! Posibilidad de prototipado ! Comentarios interactivos y con un muy buen sistema ! Historial de actividad ! Adaptación de la herramienta para pruebas
  37. 37. D R I B B B L E
  38. 38. D R I B B B L E Plataforma súper exclusiva, lo cual es bueno ! Sólo encontrarás contenido de calidad, palabra de niño diseñador ! Supone una gran publicidad ! Es una fuente de inspiración asombrosa ! Es muy cool
  39. 39. B E H A N C E
  40. 40. B E H A N C E Es como Dribbble pero menos cool
  41. 41. F U E R A D E C O Ñ A S
  42. 42. B E H A N C E Permite agregar mucha más información a nuestros trabajos ! Permite subir trabajos en proceso ! Es mucho más abierto que Dribbble ! Por norma general, no sólo encontramos diseño UI/UX sino que el estándar es diseño gráfico y branding
  43. 43. G E N T E Q U E L O H A H E C H O B I E N
  44. 44. I N S T A G R A M
  45. 45. M A I L B O X
  46. 46. S P O T I F Y
  47. 47. T W E E T B O T
  48. 48. T U M B L R
  49. 49. G E N T E Q U E N O L O H A H E C H O B I E N
  50. 50. W H A T S A P P
  51. 51. T E L E G R A M
  52. 52. G E N T E Q U E L O V A A H A C E R B I E N
  53. 53. A N F I X
  54. 54. O I G U A L N O
  55. 55. @ A B N

×