Material Design con Gallery User Experience Design Mauricio Angulo S. Gerente de User Experience Design Coppel Omnicanal > [email protected] > @MauricioAngulo > @CoppelUX 

Mauricio Angulo S. Gerente de Diseño de UX en Coppel Omnicanal Trabajo en Gerente de UX en Coppel, soy responsable del diseño de experiencia de los productos digitales de la empresa y de un equipo de diseñadores gráficos e interactivos, investigadores y optimizadores en Culiacán, Guadalajara y Cd. México. Soy mentor del programa de aceleración de startups Google for Startups Accelerator y miembro de la comunidad de Microsoft Regional Director como mentor en usabilidad, diseño y desarrollo de software. En 2014 co-fundé UX Nights, una comunidad sobre experiencia de usuario. Soy escritor, ponente internacional y formador técnico. > [email protected] > about.me/mauricioangulo 

Material Design 

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 web 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 

No content

Principios de Material Design https://material.io/design 

No content

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

No content

No content

No content

App de GMail con Material Design Otra app de correo electrónico 

Material Design no implica copiar el diseño de 

Material Design es un sistema de recomendaciones de diseño, no de reglas 

Entiende los principios e interprétalos según tu contexto y necesidades 

https://material.io/design/introduction 

Temas en Material Design 

Un botón base de Material Design El mismo botón, pero personalizado 

1. Tipografía 

https://fonts.google.com 

2. Colores 

https://material.io/design/color/the-color-system.html 

3. Iconografía 

https://material.io/resources/icons/ 

4. Forma 

29 

Principios de Temas de Diseño Para resaltar las capacidades que ofrece Material Theming, cada estudio de Material expresa una marca diferente. Expresivo Para garantizar que la temática del material y los componentes aborden tantas necesidades de productos como sea posible, los estudios de materiales representan diferentes tipos de productos. Diverso Para replicar productos reales lo más cerca posible, cada estudio identifica a los usuarios, muestra los flujos de usuarios funcionales y aplica restricciones del mundo real. Basado en la realidad 

No content

No content

No content

No content

No content

No content

No content

38 

https://www.gallery.io Galería: comparte, organiza y colabora fácilmente en diseños de productos Gallery es una herramienta de colaboración para publicar proyectos de diseño, obtener comentarios y realizar un seguimiento de las revisiones de manera rápida y eficiente. Optimizado para Material, Gallery genera guías y se conecta a los recursos de desarrollador para implementar Componentes de Material Design. Es compatible con Android y iOS 

Comparte proyectos Comparte diseños, desde exploraciones tempranas hasta simulaciones finales y especificaciones de diseño Carga capturas de pantalla, bocetos y sesiones de pizarra con las aplicaciones Gallery iOS y Android Invita rápidamente a otros a revisar o colaborar en cualquier diseño, sin necesidad de adjuntar correos electrónicos https://www.gallery.io 

Organiza tus proyectos Dale seguimiento a las revisiones para que tu equipo esté siempre actualizado con el último cambio al diseño. Organiza tu trabajo en proyectos que agreguen contexto y hagan lucir tu diseño. Añade documentación a cualquier proyecto en Gallery, dando a tus colaboradores la información que necesitan. Encuentra proyectos por diseñador, https://www.gallery.io 

Ofrece retroalimentación Evalúa los diseños desde web o en dispositivos móviles utilizando las aplicaciones de iOS y Android de Gallery Inicie sesión con tu cuenta de Google para comenzar rápidamente. Puedes agregar comentarios contextuales sobre cualquier imagen https://www.gallery.io 

Utiliza el Plugin de Gallery Descarga e instala el plugin de Gallery para Sketch (requiere macOS Sierra 10.12 o posterior) Carga y sincroniza rápidamente los artboards de Sketch a las colecciones de Gallery https://www.gallery.io 

No content

No content

Crear un tema de material para la web Crea un tema Material para Android Remezcla el proyecto en Glitch: Descarga el código para usar con Android Studio https://glitch.com/~material-theme-builder https://goo.gl/7xBvuv Material Themes 

https://material.io/resources/color/ 

https://material.io/components 

https://material.io/develop/web/components/top-app-bar/ 

https://material-components.github.io/material-components-web-catalog/#/component/top-app-bar 

https://material-components.github.io/material-components-web-catalog/#/component/top-app-bar 

https://glitch.com/~material-theme-builder 

No content

No content

No content

¡Muchas gracias! User Experience Design Mauricio Angulo S. Gerente de User Experience Design Coppel Omnicanal > [email protected] > @MauricioAngulo > @CoppelUX