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.
5. P L A T A F O R M A S
Ordenadores Móviles Tablets Wearables
6. S I S T E M A S O P E R A T I V O S
iOS Android Windows Phone ¿BlackBerry?
7. E L M E R C A D O A C T U A L
Mac y PC Smartphones iPad
8. ¿ 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.
9. ¿ 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.
11. 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?
14. 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
19. 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
20. M E D I O S D E W I R E F R A M I N G
Papel Adobe Omnigraffle Axure
32. 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
33. M E D I O S D E E J E C U C I Ó N
Adobe (principalmente,
Photoshop)
Sketch
37. 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
39. 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
43. 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