10 fragmentos de código de diseño de materiales útiles

La moda del diseño de materiales está arrasando en el mundo web. Todos los meses encuentro nuevos sitios que se ejecutan en el estilo material utilizando marcos o kits de interfaz de usuario personalizados.

Pero esto no es malo, ¡todo lo contrario! Esta es una forma de simplificar su proceso de diseño al trabajar con tendencias comprobadas que Google reconoce como su propio lenguaje de diseño preferido.

Si te gusta el estilo de diseño de materiales, estos fragmentos de código son para ti. Estos son solo 10 de mis favoritos que ofrecen una variedad de diseños y componentes para elegir.

Tabla receptiva

Aquí hay un fragmento de material design con un toque único. Esta tabla receptiva creada por Sergey Kupletsky en realidad alberga otros enlaces a fragmentos de diseño de materiales. ¡Muy genial!

Esto se crea naturalmente utilizando técnicas de diseño de materiales, por lo que la mesa debe encajar perfectamente en su propio diseño. Pero la parte más difícil del diseño móvil es hacer mesas que funcionen en pantallas más pequeñas.

Creo que este método es una de las mejores maneras de manejarlo. Su código también se mantiene limpio, lo que lo hace muy fácil de codificar, limpiar y administrar, independientemente del tamaño de su tabla.

Transiciones de la interfaz de usuario de la tarjeta

El desarrollador Ivan Villamil creó este diseño de interfaz de usuario de tarjeta único con algunas animaciones bastante locas.

Eche un vistazo a la página e intente hacer clic en cualquiera de las tarjetas. Obtendrá un efecto animado único en el que el contenido de la tarjeta se anima sobre el contenedor y aparece a la vista. Es como algo que esperarías encontrar en una aplicación móvil, ¡pero trasladado a la web!

Los efectos de animación son impecables y muestran cuánto puedes hacer en la web hoy. Sin mencionar que el estilo del material es perfecto para esta combinación de interfaz de usuario web/móvil.

Inicio de sesión compacto

He visto algunos formularios de inicio de sesión muy interesantes durante mis años como diseñador. Pero este diseño loco podría llevarse la palma por sus características interactivas y estilos únicos.

Cuando haces clic en el ícono rosa brillante en la esquina superior derecha, obtendrás un campo de registro que aparece sobre la página. Es bastante único y crea una interfaz realmente útil.

Entonces, ¿cuál es el truco? Esto usa mucho JavaScript, por lo que no es la solución más ordenada en cuanto al código. Pero sigue siendo un excelente ejemplo de diseño con características compactas.

Rellenar animación

Scott Kellum desarrolló este intrigante diseño de tarjeta de material que se completa automáticamente una vez que se carga la página. Esto se desarrolla en una cuadrícula en la que puede pasar el cursor sobre cada tarjeta para ver las características del diseño del material en acción.

No puedo decir cuán útil es esto en un proyecto directo o cuánto podría obtener de él. Pero este es un fragmento divertido que muestra un diseño fuera de la red para la web, mezclando un toque de material con animaciones flotantes.

Material BS4 Botones

De las muchas plantillas de Bootstrap disponibles en línea, es mejor que crea que algunas de ellas usan diseño de materiales. Y este bolígrafo muestra todas las cosas interesantes que puede hacer con el diseño de materiales en Bootstrap 4.

En realidad, esto es solo una colección de botones rediseñados en el lenguaje material de Google. Pero todo se ejecuta en el marco BS4 más nuevo, por lo que puede agregarlos a cualquier página impulsada por Bootstrap.

Si te tomas en serio Bootstrap, echa un vistazo a la versión más reciente para ver lo que piensas. Funciona muy bien como base para cualquier cosa, y eso es especialmente cierto para los sitios materiales.

Menú de selección de diseño de materiales

Los menús de selección desplegables son un elemento básico en el diseño de formularios. Permiten a los usuarios elegir entre un puñado de respuestas sobre temas relevantes como estados, países, idiomas, etc.

Esta selección de diseño de materiales eleva el menú de selección HTML común a un nivel completamente nuevo.

No se basa en el estilo de documento típico para elegir una opción. En cambio, esto usa una lista desordenada con jQuery manejando las animaciones y el proceso de selección. Y tengo que decir que esta cosa clava el estilo material.

Sombras materiales

Google realmente empuja las sombras para obtener profundidad en su documentación material. Eso es lo que verá en este bolígrafo, donde todos los círculos tienen sus propios efectos distintivos de sombra paralela.

Con las sombras, puede designar la jerarquía de los elementos de la página para que algunos aparezcan en la parte superior y otros en la parte inferior. Crea una ilusión de espacio en la pantalla que es especialmente útil en las pantallas táctiles.

Un efecto bastante bueno y ciertamente algo que podrías copiar en tus propios proyectos.

Interfaz de usuario de la tarjeta meteorológica

El desarrollador Thomas Vallez creó esta increíble tarjeta meteorológica que se ejecuta en HTML y CSS puros. Utiliza un efecto de aparición gradual simple en la carga de la página, pero la verdadera belleza aquí es el estilo de diseño del material.

Todo, desde los colores hasta las fuentes e incluso el ícono del clima, todos se basan en estilos de materiales naturales.

Puede tomar esta plantilla y usarla para prácticamente cualquier tipo de diseño de tarjeta. Es fenomenal y sin duda uno de los proyectos más sencillos de esta lista.

Pestañas de materiales

Aquí hay un proyecto interesante que se basa en la idea de las pestañas de diseño de materiales. Michael Richins creó este bolígrafo con algo de JavaScript básico y cierto conocimiento de las pautas de diseño de Google.

Las pestañas funcionan tal como se esperaría en otros dispositivos similares, como teléfonos inteligentes o tabletas con Android. Sin mencionar que esto se ejecuta en JavaScript simple , por lo que nunca tendrá que preocuparse por jQuery ni nada de eso.

Un efecto bastante bueno si buscas pestañas en tu sitio. Solo asegúrese de probar los estilos para ver si se combinan naturalmente con su página.

Haga clic en Animación de respuesta

El desarrollador Emmanuel Pilande creó este genial efecto de respuesta como una forma sencilla de replicar las microinteracciones materiales de Google.

Haga clic en cualquier parte de las tarjetas de materiales para ver el efecto. Y puede aplicar esto a prácticamente cualquier cosa, desde botones hasta contenedores de página o campos de entrada.

Se basa en algo de JavaScript, pero también es fácil de agregar a cualquier proyecto. Entonces, si busca ese aspecto de material au naturale , este es un excelente fragmento para guardar.