02 ux nights cdmx vol. xxxix - lenguajes de diseño visual - mauricio angulo s
TRANSCRIPT
![Page 1: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/1.jpg)
Mauricio Angulo S.Sprintmaster & UX Strategist
[email protected]@mauricioangulo | @tesseractspace
www.tesseractspace.com
Lenguajes de Diseño Visual
![Page 2: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/2.jpg)
ConsistenciaEl más conocido y frágil principio de diseño
![Page 3: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/3.jpg)
![Page 4: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/4.jpg)
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
![Page 5: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/5.jpg)
![Page 6: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/6.jpg)
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.
![Page 7: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/7.jpg)
HTMLPHP
PythonRuby
Java?!
PapelJPG / PNGPSD / PDF
PPTX / KEYGIF / MPEG
Diseño Desarrollo
![Page 8: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/8.jpg)
![Page 9: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/9.jpg)
![Page 10: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/10.jpg)
Así se veía GMail hace algunos años...
Web de Escritorio Android Web Móvil
Google | Proprietary & Confidential
![Page 11: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/11.jpg)
El “Proyecto Kennedy” tenía la intención de unificar el diseño de las aplicaciones de Google
Google | Proprietary & Confidential
![Page 12: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/12.jpg)
El primer lenguaje visual para Android se llamó “Holo”
Google | Proprietary & Confidential
![Page 13: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/13.jpg)
Gmail.com(Kennedy)
Gmail para Android(Holo)
...pero aún había inconsistencia entre plataformas
Google | Proprietary & Confidential
![Page 14: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/14.jpg)
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...
![Page 15: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/15.jpg)
Material Design
www.material.io
![Page 16: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/16.jpg)
Superficies tangibles
Basado en diseño impreso
Animación con significado
Diseño adaptivo
![Page 17: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/17.jpg)
![Page 18: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/18.jpg)
![Page 19: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/19.jpg)
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
![Page 20: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/20.jpg)
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
![Page 22: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/22.jpg)
![Page 24: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/24.jpg)
Casos de estudio
![Page 25: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/25.jpg)
Los controles de drawer y las pestañas de navegación ayudan a sus usuarios a moverse fácilmente entre pantallas.
![Page 26: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/26.jpg)
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.
![Page 27: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/27.jpg)
TrelloTrello utiliza componentes de Material Design como el FAB, que ayuda a los usuarios a crear tableros y fomenta que colaboren entre ellos.
![Page 28: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/28.jpg)
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.
![Page 29: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/29.jpg)
Lenguajes de Diseño Visual
![Page 30: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/30.jpg)
https://goo.gl/otdMZ6
![Page 31: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/31.jpg)
![Page 32: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/32.jpg)
![Page 33: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/33.jpg)
![Page 34: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/34.jpg)
![Page 35: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/35.jpg)
https://www.ibm.com/design/language/
![Page 36: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/36.jpg)
![Page 37: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/37.jpg)
![Page 38: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/38.jpg)
http://fluent.microsoft.com
![Page 39: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/39.jpg)
![Page 40: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/40.jpg)
![Page 42: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/42.jpg)
![Page 43: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/43.jpg)
![Page 44: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/44.jpg)
![Page 45: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/45.jpg)
![Page 46: 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S](https://reader035.vdocuments.mx/reader035/viewer/2022062401/5a64bf957f8b9a2c5d8b487b/html5/thumbnails/46.jpg)
Mauricio Angulo S.Sprintmaster & UX Strategist
[email protected]@mauricioangulo | @tesseractspace
www.tesseractspace.com
¡Gracias!