02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S.
46
Mauricio Angulo S. Sprintmaster & UX Strategist [email protected] @mauricioangulo | @tesseractspace www.tesseractspace.com Lenguajes de Diseño Visual
Transcript of 02 UX Nights CDMX Vol. XXXIX - Lenguajes de Diseño Visual - Mauricio Angulo S.
Mauricio Angulo S.Sprintmaster & UX Strategist
[email protected]@mauricioangulo | @tesseractspace
www.tesseractspace.com
Lenguajes de Diseño Visual
ConsistenciaEl más conocido y frágil principio de diseño
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
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.
HTMLPHP
PythonRuby
Java?!
PapelJPG / PNGPSD / PDF
PPTX / KEYGIF / MPEG
Diseño Desarrollo
Así se veía GMail hace algunos años...
Web de Escritorio Android Web Móvil
Google | Proprietary & Confidential
El “Proyecto Kennedy” tenía la intención de unificar el diseño de las aplicaciones de Google
Google | Proprietary & Confidential
El primer lenguaje visual para Android se llamó “Holo”
Google | Proprietary & Confidential
Gmail.com(Kennedy)
Gmail para Android(Holo)
...pero aún había inconsistencia entre plataformas
Google | Proprietary & Confidential
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...
Material Design
www.material.io
Superficies tangibles
Basado en diseño impreso
Animación con significado
Diseño adaptivo
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
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
Casos de estudio
Los controles de drawer y las pestañas de navegación ayudan a sus usuarios a moverse fácilmente entre pantallas.
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.
TrelloTrello utiliza componentes de Material Design como el FAB, que ayuda a los usuarios a crear tableros y fomenta que colaboren entre ellos.
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.
Lenguajes de Diseño Visual
https://goo.gl/otdMZ6
https://www.ibm.com/design/language/
http://fluent.microsoft.com
Mauricio Angulo S.Sprintmaster & UX Strategist
[email protected]@mauricioangulo | @tesseractspace
www.tesseractspace.com
¡Gracias!
