En esta presentación hablo sobre cómo lograr una buena consistencia en diseño visual para interfaces visuales usando lenguajes de diseño, y reseño los cuatro más utilizados actualmente: Material Design, Apple Human Interface Guidelines, Microsoft Fluent Design System y IBM Living Design System.

1. Mauricio Angulo S.
Sprintmaster & UX Strategist
mauricio@tesseractspace.com
@mauricioangulo | @tesseractspace
www.tesseractspace.com
Lenguajes de
Diseño Visual

2. Consistencia
El más conocido y frágil principio de diseño

4. La consistencia en el diseño:
● Reduce la fricción y la curva de aprendizaje
● Aprovecha nuestra tendencia natural de encontrar patrones
● Es crítica para la construcción de una marca
● Ayuda a los usuarios a reconocer sus productos favoritos
● Refuerza las experiencias positivas
Google | Proprietary & Confidential

6. Problemas en la consistencia de diseño
● Equipos multidisciplinarios que trabajan bajo presión.
● Equipos diferentes trabajando en diferentes secciones.
● Equipos distribuidos geográficamente.
● Sistemas muy grandes o multiplataforma.
● Sistemas antiguos o con mantenimiento no planeado.
● Cambios en la plataforma tecnológica.
● Mala documentación.

7. HTML
PHP
Python
Ruby
Java?!
Papel
JPG / PNG
PSD / PDF
PPTX / KEY
GIF / MPEG
Diseño Desarrollo

10. Así se veía GMail hace algunos años...
Web de Escritorio Android Web Móvil
Google | Proprietary & Confidential

11. El “Proyecto Kennedy” tenía la intención de unificar el diseño de
las aplicaciones de Google
Google | Proprietary & Confidential

12. El primer lenguaje visual para Android se llamó “Holo”
Google | Proprietary & Confidential

13. Gmail.com
(Kennedy)
Gmail para Android
(Holo)
...pero aún había inconsistencia entre plataformas
Google | Proprietary & Confidential

14. En 2014 un grupo de diseñadores en diversas áreas de
Google buscaban arreglar este problema de consistencia y
comenzaron a trabajar en un lenguaje visual que fuera
multiplataforma y más allá de guías de estilo.
Querían crear un sistema de diseño que considera diseño,
animación e interacción. Este sistema debería usarse no solo
dentro de Google sino en toda la industria...

15. Material Design
www.material.io

16. Superficies
tangibles
Basado en
diseño impreso
Animación con
significado
Diseño
adaptivo

19. La paleta de color viene con colores primarios y llena el espectro para crear una paleta
usable y completa para Android, Web y iOS.
Paleta de colores

20. Limita tu selección de colores eligiendo tres tonos de tu
paleta primaria y un color de contraste de tu paleta
secundaria.
Ejemplo de paleta primaria Ejemplo de paleta secundaria
Paleta de colores

24. Casos de estudio

25. Pocket
Los controles de
drawer y las
pestañas de
navegación ayudan a
sus usuarios a
moverse fácilmente
entre pantallas.

26. Los cambios en Pocket han ayudado a
conseguir sus más de 170,000
calificaciones de 5 estrellas en la Play
store, y le ayudó a ganar el Premio de
Material Design por Diseño Adaptivo.

27. Trello
Trello utiliza
componentes de
Material Design como el
FAB, que ayuda a los
usuarios a crear
tableros y fomenta que
colaboren entre ellos.

28. Desde su cambio a Material Design en
2015, Trello ha aumentado 10% el
número de inicio de sesión por
usuario por semana, y cada sesión
aumentó un 42% la creación de
nuevos tableros y 63% más usuarios
se agregaron a los tableros.

29. Lenguajes de
Diseño Visual

30. https://goo.gl/otdMZ6

35. https://www.ibm.com/design/language/

38. http://fluent.microsoft.com

41. https://www.youtube.com/watch?v=vcBGj4R7Fo0

46. Mauricio Angulo S.
Sprintmaster & UX Strategist
mauricio@tesseractspace.com
@mauricioangulo | @tesseractspace
www.tesseractspace.com
¡Gracias!