1.
@ A B N

2.
P R O C E S O D E D I S E Ñ O U I / U X
@ABN

3.
T E O R Í A

4.
P L A T A F O R M A S
Ordenadores Móviles Tablets Wearables

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.
E L M E R C A D O A C T U A L
Mac y PC Smartphones iPad

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.
¿ 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.
M A N O S A L A O B R A

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.
S K E T C H I N G

12.
S K E T C H I N G

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.
¡ M O L E S K I N E M A N D A !

15.
W I R E F R A M I N G

16.
W I R E F R A M I N G

17.
F U E R A L A
C A P A D E
D I S E Ñ O

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.
M E D I O S D E W I R E F R A M I N G
Papel Adobe Omnigraffle Axure

20.
¿ L O H E M O S H E C H O B I E N ?

21.
P R O T O T I P A D O

22.
M E D I O S D E P R O T O T I P A D O
InVision Marvel
Marvel

23.
S I L A R E S P U E S T A E S “ S I ”

24.
E J E C U C I Ó N

25.
I N S P I R É M O N O S

26.
M E D I O S D E I N S P I R A C I Ó N
Dribbble Otras apps Abduzeedo

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.
U S E M O S R E C U R S O S

29.
R E C U R S O S
Iconos
!
Archivos de GUIs
!
Fotografías y stocks
!
Paletas de colores
!
Tipografías

30.
A B R E Y A E L P H O T O S H O P

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.
M E D I O S D E E J E C U C I Ó N
Adobe (principalmente,
Photoshop)
Sketch

33.
E L F E E D B A C K E S B I E N

34.
M E D I O S D E F E E D B A C K
InVision Dribbble Behance

35.
I N V I S I O N

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.
D R I B B B L E

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.
B E H A N C E

40.
B E H A N C E
Es como Dribbble pero menos cool

41.
F U E R A D E C O Ñ A S

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.
G E N T E Q U E L O H A H E C H O B I E N

44.
I N S T A G R A M

45.
M A I L B O X

46.
S P O T I F Y

47.
T W E E T B O T

48.
T U M B L R

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.
W H A T S A P P

51.
T E L E G R A M

52.
G E N T E Q U E L O V A A H A C E R B I E N

53.
A N F I X

54.
O I G U A L N O

55.
@ A B N