Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Design Themes con Gallery

Coppel UX
March 26, 2020

Material Design Themes con Gallery

Un recorrido por la historia de Material Design, el popular sistema de diseño de Google, y cómo usarlo para crear sistemas de diseño personalizados (o temas) usando Material Design Gallery y Material Design Web Components.

Coppel UX

March 26, 2020
Tweet

More Decks by Coppel UX

Other Decks in Design

Transcript

  1. Material Design con Gallery User Experience Design Mauricio Angulo S.

    Gerente de User Experience Design Coppel Omnicanal > [email protected] > @MauricioAngulo > @CoppelUX
  2. 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
  3. Así se veía GMail hace algunos años... Web de Escritorio

    Android Web Móvil Google | Proprietary & Confidential
  4. El “Proyecto Kennedy” tenía la intención de unificar el diseño

    de las aplicaciones web de Google Google | Proprietary & Confidential
  5. Gmail.com (Kennedy) Gmail para Android (Holo) ...pero aún había inconsistencia

    entre plataformas Google | Proprietary & Confidential
  6. 29

  7. 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
  8. 38

  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. ¡Muchas gracias! User Experience Design Mauricio Angulo S. Gerente de

    User Experience Design Coppel Omnicanal > [email protected] > @MauricioAngulo > @CoppelUX