En el último evento de I / O de 2014, Google regresó con sus nuevas sorpresas. Además de lanzar oficialmente la nueva actualización de Android con el nombre en código Lollipop, Google también presentó su nuevo lenguaje de diseño, Material Design . Es un sistema de diseño que no solo está pensado para las nuevas mejoras de la interfaz de usuario de Lollipop, sino también para todos los dispositivos y entornos.
Material Design tiene algunas características importantes que lo diferencian entre otras tendencias de diseño con sus propias formas únicas. Al igual que su nombre, se inspiró en materiales reales y los combinó en un sistema de diseño para crear una experiencia de usuario elegante, intuitiva, hermosa e interactiva. En esta publicación, veremos qué hay dentro de Material Design y te daremos una guía rápida sobre cómo implementarlo. Al citar el blog de Google, voy a decir: "Esto es Material Design".
Una introducción
Material Design es un sistema de diseño unificado, lo que significa que se diseñó para funcionar con todos los dispositivos y plataformas disponibles en la actualidad. Desde tabletas, teléfonos inteligentes a computadoras de escritorio y desde Android, iOs, Windows a plataformas web. Todo el diseño se ve y se siente debe ser igual donde sea.
Principios Principales
Hay tres principios principales que construyen Diseño de materiales. Estas son la parte más fundamental de lo que ofrece Material en general.
- El material es la metáfora . El desarrollo de Material se inspiró en el estudio de los elementos táctiles que utilizamos todos los días, papel y tinta . Hace que el objeto luz, superficie y movimientos sean mejores cuando interactúan entre sí.
- Negrita, gráfica e intencional . La tipografía, las cuadrículas, el espacio, la escala, el color y el uso de las imágenes que se utilizan en el diseño basado en la impresión mejoran el contenido del Material.
- El movimiento proporciona significado . Esta es una de las cosas más destacadas. En Material, debe tener un movimiento significativo y apropiado, retroalimentación sutil y clara y una transición eficiente y coherente.
Los componentes
Material Design presta atención a cada detalle de sus componentes para que puedan ser utilizados universalmente. Estos componentes te ayudarán a crear una aplicación y un sitio increíbles. Hay muchos componentes proporcionados por Material como botones, interruptor, tarjeta, entrada de texto, fab (botón de acción flotante), diálogo, tostada, submenú, pestaña y más. Cada uno de ellos tiene su propia regla y guía sobre cómo construirlos para que no tenga elementos intrascendentes.
Patrones de cosa
Además de los componentes, Material también le proporciona algunos patrones básicos para una interfaz de usuario adicional. Estos patrones mejorarán la interfaz de usuario que creaste con los componentes de Material. Los patrones incluyen formato de datos, cajón de navegación, errores, gestos, técnica de desplazamiento, búsqueda, configuración, carga de imágenes, deslizar para actualizar y más.
Materiales de diseño de colores
Los colores en Material han sido diseñados de tal manera que no te harán sentir incómodo, extraño y plano. Inspirándose en nuestros entornos cotidianos, como las señales de tráfico, la arquitectura contemporánea, la cinta para pavimentos y las canchas deportivas, Material Design le ofrece colores inesperados y de gran espíritu. Hay tantas paletas de colores para elegir que le brindan más comodidad al desarrollar aplicaciones o sitios. También puede descargar las muestras de color para uso local como para su colección de Photoshop.
Icono de material
Si eres un desarrollador de Android, debes estar familiarizado con algunos paquetes de iconos gratuitos que Google proporcionó. Usualmente se usan solo para el elemento principal y la barra de acción. Mientras que para otros recursos, tenemos que buscar otros íconos como carpeta, archivo, copiar y pegar, etc. manualmente. En Material Design, Google ha solucionado el problema con toneladas de paquetes de iconos que puedes usar.
Cada uno de los iconos ha pasado por un enfoque de diseño que también utiliza el estudio de los materiales táctiles. También están manteniendo el principio material, que es consistente. Puedes descargar estos íconos en GitHub, vienen con alguna opción para diferentes usos como para iOs, web, Android o svg. Si desea una opción más amplia para una fácil personalización, probablemente quiera ver los paquetes de iconos de Material Design en FlatIcon. Dentro del paquete, obtendrás el vector de iconos (SVG y EPS), PSD y PNG.
Animación del material
Estas son las características del Material que más me gustan. Las animaciones en Material son tan reales e intuitivas. Cada animación tiene transiciones de tiempo significativas, consistentes y correctas. La demostración gif que se muestra a continuación es solo una de las bellas animaciones de Material. Para proporcionar una interacción atractiva y receptiva, el equipo de Google también crea una animación similar a una onda de agua para el efecto de entrada del usuario. Se utiliza principalmente en botones y tarjetas.
Esas características que expliqué son solo una pequeña parte de lo que ofrece Material Design. Para obtener más información sobre Material World, solo dirígete a la página de documentación.
Implementación
De forma predeterminada, Material Design viene como la nueva actualización de la interfaz de usuario para Android Lollipop. Todas las pautas que el Material ha tenido aplicadas en su interior. Ya que Material está dirigido a todo tipo de entornos, implementarlo en otro sistema no será difícil. Y gracias a las comunidades, es mucho más fácil con algunas herramientas que crearon.
Estas son varias formas que puede lograr para obtener Material Design fuera de Android, por ejemplo, en la web.
Usando CSS Frameworks
Esta es la forma más fácil si desea implementar Material Design en la plataforma web. Con los marcos, todo lo que necesita hacer es inicializarlo y luego escribir los elementos que necesita. Hay muchos marcos que puede usar como Materialise, Material UI o Polymer para nombrar algunos. Mi elección personal cae en materializar. Es más fácil de usar y entender y tiene una excelente documentación con una bonita demostración.
Sigue las directrices
Si desea implementar Material sin la ayuda de Framework y prefiere jugar con los códigos, debe seguir las pautas de Material. Allí, encontrará todos los consejos y prohibiciones que debe tener en cuenta para lograr los principios materiales. Verá toda la guía básica para crear componentes, diseño, animación, color, patrones y más. Es posible que desee ver una lista de verificación de Material para un desarrollo más fácil.
Conclusión
El diseño de materiales es un gran sistema de diseño y se ha convertido en una de las tendencias más esperadas del año. En los próximos dos meses, podemos verlo en todas partes. Más aplicaciones y sitio se pulirán con esta nueva actualización de diseño de Google.
Y con Material Design, Google ha demostrado su superioridad como una de las mayores empresas de tecnología. Hace que Google no solo sea líder en el área de motores de búsqueda y sistemas operativos móviles, sino también en el campo del diseño. Por ahora, no hay otras compañías que desarrollen esta gran cosa como lo hizo Google. Pero la experiencia dice que no durará mucho. Esperemos que otras empresas respondan al Diseño de Materiales de Google.
