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