proceso de diseño ui/ux
DESCRIPTION
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.TRANSCRIPT
![Page 1: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/1.jpg)
@ A B N
![Page 2: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/2.jpg)
![Page 3: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/3.jpg)
P R O C E S O D E D I S E Ñ O U I / U X
@ A B N
![Page 4: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/4.jpg)
T E O R Í A
![Page 5: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/5.jpg)
P L A T A F O R M A S
Ordenadores Móviles Tablets Wearables
![Page 6: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/6.jpg)
S I S T E M A S O P E R A T I V O S
iOS Android Windows Phone ¿BlackBerry?
![Page 7: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/7.jpg)
E L M E R C A D O A C T U A L
Mac y PC Smartphones iPad
![Page 8: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/8.jpg)
¿ 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.
![Page 9: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/9.jpg)
¿ 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.
![Page 10: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/10.jpg)
M A N O S A L A O B R A
![Page 11: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/11.jpg)
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?
![Page 12: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/12.jpg)
S K E T C H I N G
![Page 13: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/13.jpg)
S K E T C H I N G
![Page 14: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/14.jpg)
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
![Page 15: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/15.jpg)
¡ M O L E S K I N E M A N D A !
![Page 16: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/16.jpg)
W I R E F R A M I N G
![Page 17: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/17.jpg)
W I R E F R A M I N G
![Page 18: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/18.jpg)
F U E R A L A C A P A D E
D I S E Ñ O
![Page 19: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/19.jpg)
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
![Page 20: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/20.jpg)
M E D I O S D E W I R E F R A M I N G
Papel Adobe Omnigraffle Axure
![Page 21: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/21.jpg)
¿ L O H E M O S H E C H O B I E N ?
![Page 22: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/22.jpg)
P R O T O T I P A D O
![Page 23: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/23.jpg)
M E D I O S D E P R O T O T I P A D O
InVision Marvel
Marvel
![Page 24: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/24.jpg)
S I L A R E S P U E S T A E S “ S I ”
![Page 25: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/25.jpg)
E J E C U C I Ó N
![Page 26: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/26.jpg)
I N S P I R É M O N O S
![Page 27: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/27.jpg)
M E D I O S D E I N S P I R A C I Ó N
Dribbble Otras apps Abduzeedo
![Page 28: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/28.jpg)
“ 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
![Page 29: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/29.jpg)
U S E M O S R E C U R S O S
![Page 30: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/30.jpg)
R E C U R S O S
Iconos !
Archivos de GUIs !
Fotografías y stocks !
Paletas de colores !
Tipografías
![Page 31: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/31.jpg)
A B R E Y A E L P H O T O S H O P
![Page 32: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/32.jpg)
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
![Page 33: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/33.jpg)
M E D I O S D E E J E C U C I Ó N
Adobe (principalmente, Photoshop)
Sketch
![Page 34: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/34.jpg)
E L F E E D B A C K E S B I E N
![Page 35: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/35.jpg)
M E D I O S D E F E E D B A C K
InVision Dribbble Behance
![Page 36: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/36.jpg)
I N V I S I O N
![Page 37: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/37.jpg)
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
![Page 38: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/38.jpg)
D R I B B B L E
![Page 39: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/39.jpg)
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
![Page 40: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/40.jpg)
B E H A N C E
![Page 41: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/41.jpg)
B E H A N C E
Es como Dribbble pero menos cool
![Page 42: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/42.jpg)
F U E R A D E C O Ñ A S
![Page 43: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/43.jpg)
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
![Page 44: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/44.jpg)
G E N T E Q U E L O H A H E C H O B I E N
![Page 45: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/45.jpg)
I N S T A G R A M
![Page 46: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/46.jpg)
M A I L B O X
![Page 47: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/47.jpg)
S P O T I F Y
![Page 48: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/48.jpg)
T W E E T B O T
![Page 49: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/49.jpg)
T U M B L R
![Page 50: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/50.jpg)
G E N T E Q U E N O L O H A H E C H O B I E N
![Page 51: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/51.jpg)
W H A T S A P P
![Page 52: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/52.jpg)
T E L E G R A M
![Page 53: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/53.jpg)
G E N T E Q U E L O V A A H A C E R B I E N
![Page 54: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/54.jpg)
A N F I X
![Page 55: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/55.jpg)
O I G U A L N O
![Page 56: Proceso de diseño UI/UX](https://reader033.vdocument.in/reader033/viewer/2022060115/557b867ad8b42aff318b57df/html5/thumbnails/56.jpg)
@ A B N