Presentación
Segunda entrega, de una serie de 3, donde tomamos primer contacto con Material Design 3 para comprender algunas de sus leyes fundamentales, componentes y a partir de la documentación oficial de este Framework para el diseño de interfaces móviles de usuarios. A continuación, te comparto los enlaces la primera y tercera entrega de esta serie:
- Primer contacto con Material Design 2, aspectos relevantes, componentes y más.
- El prototipado UI con Material Design 3 en Figma con Material 3 Design Kit y Material Theme Builder.
¡Comencemos!
Veamos algunos datos importantes relacionados con este video:
Material Design 3
Algunos enlaces importantes
Los fundamentos del diseño en Material Design 3. Documentación oficial.
El punto de partida para comenzar a aprender con fundamentos sobre Material Design 3 es, sin dudas, su documentación oficial. En este sitio encontrarás todo el sistema de diseño de MD3, incluyendo no solamente los aspectos relacionados con el diseño, sino también aquellos vinculados con sus principios de usabilidad, interacción, componentes, programación, novedades, y más. Ahí mismo encontarás los recursos para prototipar en Figma, novedades y lanzamientos de este framework. ¡Sin dudas, un sitio de visita obligatoria!
Enlaces relacionados:
- Página de inicio de Material Design 3: https://m3.material.io/design
- El punto de partida con MD3: https://m3.material.io/get-started
El punto de partida en Material Design 3
Una sección sobre que, si o si deberías estudiar, en la que se exponen los aspectos fundamentales de Material Design 3.
Respecto a la accesibilidad (fundamental), se consideran las tecnologías de asistencia como el teclado y los lectores de pantalla, etc. Se consideran aspectos relacionados con las jerarquías, diagramación y tipografía, tamaños y espaciados entre elementos interactivos, textos alternativos, títulos, subtítulos, textos sobre imágenes, elementos esenciales y no esenciales y lineamientos para la implementación de la accesibilidad, entre otros.
Además de estos aspectos, las bases (foundations) de Material Design abarcan temas relacionados con el diseño de contenidos, uso del color, la interacción
Enlaces relacionados:
- Accesibilidad, aspectos esenciales: https://m3.material.io/foundations/accessible-design/accessibility-basics
- Diseño de contenidos (UX writing y diseño de información): https://m3.material.io/foundations/content-design/overview
- El color en Material Design 3 - Colores dinámicos, colores personalizados y el Material Theme Builder, del que hablaremos en el próximo tutorial: https://m3.material.io/foundations/customization
- La interacción en MD3: https://m3.material.io/foundations/interaction/gestures
- El layout en MD3, tamaños y orientación de dispositivos, retículas de columnas, diagramación de contenidos y más: https://m3.material.io/foundations/layout/understanding-layout/
- Glosario de términos en Material Design 3: https://m3.material.io/foundations/glossary
Aspectos visuales (estilos) para el diseño UI con MD3
Esta sección, destacadísima, de esta guía de estilos, abarca todo lo relacionado con el color, las elevaciones, íconos, movimientos, formas y tipografía en Material Design 3. Esta información resulta básica para quienes quieren alcanzar un nivel profesional en el diseño de interfaces de usuario en entornos que utilicen MD3.
Enlace: https://m3.material.io/styles
¡Continúa aprendiendo!
Consulta sobre nuestros cursos intensivos, talleres a medida, y asesorías personalizadas, o únete a nuestra Comunidad Creativa y continúa aprendiendo, ¡con fundamentos!
Los componentes nativos de Material Design 3
Finalmente, para cerrar los enlaces de apoyo a este tutorial sobre MD3, no podía faltar el enlace hacia la sección que documenta los más de treinta componentes nativos de Material Design 3, presentados en forma de lista y organizados en las siguientes categorías:
- Componentes de acción, que permiten al usuario alcanzar un objetivo.
- Componentes de comunicación, que proporcionan información útil para el usuario.
- Componentes de contención para información y acciones, incluidos otros componentes como botones, menús o chips.
- Componentes de navegación, que permiten el desplazamiento y uso mediante la interfaz de usuario.
- Componentes de selección, que permiten al usuario especificar opciones.
- Componentes de entrada, que permiten a las personas ingresar y editar texto.
Para cada uno de los componentes encontrarás información general sobre los mismos, especificaciones específicas sobre su programación e implementación, guías de uso y aspectos de accesibilidad, fundamentales para el buen diseño de una interfaz gráfica de usuario con Material Design 3.
Ojalá que esta información te sea de utilidad. Pronto estaremos compartiendo la tercera parte de esta serie, donde veremos como prototipar, eficientemente, con Material Design 3 en Figma.
Si te interesan estos y otros temas, únete a nuestra Comunidad Creativa de Diseño y aprovecha nuestros Foros de Diseño, Red Social y Campus Virtual, incluyendo un curso especial que tenemos abierto para toda la comunidad: Espacio Convergente.
Saludos y bonita jornada para ti.
Plácido Luna
