Proceso de diseño UI/UX
-
Upload
alvaro-bernal-nicolas -
Category
Design
-
view
1.656 -
download
4
description
Transcript of Proceso de diseño UI/UX
@ A B N
P R O C E S O D E D I S E Ñ O U I / U X
@ A B N
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. Es decir, la interfaz
de usuario consta de colores, imágenes, iconos, botones… todo lo que sirve para “adornar” una app y hacerla bonita.
¿ 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.
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é plataforma (o plataformas)? !
¿En qué entorno se va a usar? !
¿Nos gusta Daft Punk?
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 !
Lo que tú hagas va a cambiar en más del 50% finalmente
¡ 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 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
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, 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
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 sistema !
Historial de actividad !
Adaptación de la herramienta para pruebas
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ñador !
Supone una gran publicidad !
Es una fuente de inspiración asombrosa !
Es muy cool
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 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
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