Material Design son unas guías de diseño creadas por Google para aplicación en sitios web y aplicaciones de todo tipo.
Con el nombre de Material Design se conoce a las guías de diseño publicadas por Google para la creación de sitios web o aplicaciones específicamente pensadas para los sistemas Android.
Material Design no es un framework o librería de código, sino unas guías de diseño conceptuales que los autores pueden seguir para conseguir diseños y experiencia de usuario acorde con las líneas marcadas por Google para sus aplicaciones y el sistema Android.
Se puede encontrar más información en el sitio oficial: material.io
Dentro de Material Design encontramos distintos tipos de interfaces, colores, iconos, con guías de aplicación. Todo de manera genérica y aplicable a cualquier diseño de interfaz. Luego, basado en Material Design, encontramos diversos frameworks de diseño, componentes de aplicaciones, web components o bibliotecas de iconos. Estos productos son en muchos casos ofrecidos por el propio Google, pero en ocasiones por otras empresas o desarrolladores.
Más información:
Artículos destacados de Material Design:
Materialize CSS
Un popular framework CSS para aplicación sencilla del diseño de Material Design en cualquier web.
Material Web Components
Una biblioteca de Web Components estándar basados en las guías de Material Design.
Angular Material
La biblioteca de componentes Angular oficial para aplicar el diseño Material Design.
Inspiración de Material Design
El design system "Material Design", según sus propios autores, está inspirado en el mundo real y sus texturas, así como en el modo en el que los elementos reflejan la luz y proyectan sus sombras. De este modo, en lugar de líneas y bordes, Material Design usa las sombras para contornar a los elementos y las luces para producir un efecto de profundidad.
Material Design simula las propiedades físicas de los objetos de papel y la tinta. Google quería un diseño que imitara cómo se comportarían estos materiales en la realidad, creando una metáfora visual que sirva para ayudar a los usuarios a comprender cómo funcionan las interfaces de las aplicaciones.
El papel se transforma y se mueve en un solo espacio, y la tinta tiene una presencia inalterable que se utiliza para representar información, así como las posibles interacciones con las interfaces. Debido a ello, los elementos que forman parte de los diseños se deben mover y reaccionar de manera intuitiva a las acciones de los usuarios, tal como lo harían en la vida real.
Por supuesto esta inspiración no condiciona totalmente el diseño, dado que no se rechazan las posibilidades del mundo digital, por ejemplo a la hora de crear animaciones que nada tengan que ver con el movimiento de los elementos estáticos como el papel. Al final el objetivo de la inspiración en la realidad está más encaminado a que sirva para crear interfaces más intuitivas, pero con la libertad y las capacidades mejoradas que nos aporta el medio digital.
Material icons
Uno de los recursos que nos ofrece Google sobre Material Design y que resulta especialmente útil son los Material icons.
Este recurso es muy interesante porque consiste en una biblioteca de iconos bastante grande, con imágenes para casi cualquier cosa que te puedas imaginar. Esos iconos además puedes hacer varias transformaciones para ajustar el grosor de la línea, el tamaño, etc. con lo que es posible personalizarlos bastante.
Si te interesa cualquier icono los puedes descargar en formato png o svg, con lo que puedes conseguir resultados excelentes en páginas adaptables (responsive).
Puedes encontrar los Material Icons en Google Fonts.
Cómo implementar diseños Material Design
La mejor opción para conseguir un diseño con las guías de Material Design es implementar un framework CSS que te ofrezca los componentes ya desarrollados y listos para tu web.
Existen muchos frameworks para material Design siendo el más popular Materialize CSS. Encuentras un listado bastante amplio en la Faq: Framework CSS para Material Design 3.
¿Quieres añadir algo sobre Material Design?
Crea artículos, recursos o comparte información sobre Material Design
Temas relacionados
Preguntas y respuestas de Material Design
Se han recibido 1 faqs en Material Design
Resp.
2
Votos
3