material-design-frameworks-teaser

En Vogue: 9 marcos de diseño de materiales para sitios web de vanguardia

Al presentar su Material Design para Android, Google desencadenó una de las mayores tendencias de diseño actuales. Tomó algo de tiempo, pero Android se ve bien por fin. Algunos dicen que incluso puede mantenerse al día con iOS, otros afirman que ha sido más hermoso que la iteración de Apple de todos modos. Y Material Design hace más que admitir aplicaciones móviles. Un número creciente de sitios web también lo utilizan. Para aprovechar todo el potencial del diseño, puede probarlo usted mismo o utilizar uno de los muchos marcos de diseño de materiales que se ofrecen. La siguiente publicación presenta una gama de Frameworks que le permiten crear su próximo sitio web utilizando el nuevo y elegante Material Design.

¿Qué es el diseño de materiales?

Sobre todo, Material Design contiene pautas de diseño para usar al desarrollar aplicaciones para teléfonos inteligentes y tabletas para Android. Aunque Material Design se presentó por primera vez en el E/S de Google 2014, también se puede diseñar para Chrome OS de Google. La idea de Google se centra en un lenguaje de diseño claro y simple, así como en colores llamativos y una tipografía característica. El objetivo de las pautas de Material Design es crear una experiencia de usuario uniforme en todas las plataformas. Google proporciona información detallada pautas e información en cuanto a animaciones, colores, tipografía, estructura y patrones clave. Este ejemplo muestra una aplicación de Android usándolo perfectamente:

aplicación-de-ejemplo-de-diseño-de-materiales

Google también proporciona un video de introducción bastante sencillo: https://youtu.be/Q8TXgCzxEnw

Diseño de materiales: marcos de diseño web

Si planea crear sitios web utilizando Material Design, puede encontrar algunos marcos realmente buenos en estos días. Ocho de los nueve marcos presentados aquí han sido creados por desarrolladores externos (es decir, no por el mismo Google), lo que no afecta en absoluto su eficacia ni la calidad de su diseño.

1. Materializar

Materializar

Materialise es un marco CSS de diseño front-end actualizado basado en Material Design. Ofrece la opción de usar SCSS además de CSS. Se incluyen iconos de JavaScript y Material Design, al igual que la fuente Roboto, que también se utiliza en el Material Design original. Además, las cuadrículas, formularios, botones, navegaciones y las nuevas tarjetas son parte del paquete. Todos están invitados a perfeccionar aún más este marco en Github. Hay una plantilla de inicio disponible y puede ver un video sobre el tema de inicio aquí.

2. Interfaz de usuario de materiales

Material-IU

Material UI es un marco de diseño CSS para desarrollar sitios web utilizando Material Design. Admite elementos como botones, diálogos, menús desplegables, íconos, formularios y mucho más. Puede encontrar Material UI en Githubtambién.

3. Bootswatch de papel para Bootstrap

Tema de material de papel para Bootswatch

El tema del papel es uno de los temas del marco Bootstrap. Viene con todos los componentes incluidos en Bootstrap, pero esta vez adaptados a Material Design. Además del tema Paper, Bootstrap ofrece algunos adicionales, realmente temas impresionantes.

4. Material de arranque

Material-Diseño-para-Bootstrap

Al igual que Paper, Bootstrap Material es un tema para el marco Bootstrap. Es por eso que Bootstrap Material contiene todos los elementos que ofrece el marco Bootstrap. Además, es compatible con los 740 iconos de diseño de materiales originales de la Biblioteca de iconos de diseño de materiales de Google.

5. Hoja BETA

hoja-beta-material-diseño-marco

El marco Leaf CSS fue desarrollado por Kim Korte. Todavía está en versión beta, por lo que es posible que falten algunos componentes o que no estén completamente diseñados. Aún así, ya contiene una amplia gama de elementos. Botones, controles deslizantes, tarjetas, menús, pestañas y mucho más forman parte de este marco cuidadosamente diseñado, lo que amplía sus posibilidades de diseño. Los íconos utilizados no se toman de la biblioteca de Google, sino que los proporciona Icomoon, lo que no afecta en absoluto su funcionalidad. Por cierto, Aguja se utiliza aquí como preprocesador de CSS. El marco de diseño de material de hoja también está en GitHub.

6. Marco MUI CSS

Marco CSS de diseño de materiales de MUI

El marco MUI es un marco ligero de HTML y CSS para crear sitios web de acuerdo con las pautas de diseño de materiales de Google. MUI ha sido desarrollado para ser una herramienta rápida, menos compleja, fácil de usar y fácil de manejar. Contiene solo los componentes básicos que necesita para desarrollar un sitio web de acuerdo con las pautas de diseño de Google. No hay dependencias externas, lo que evita que cualquier proyecto creado con este marco se hinche. MUI también está en GitHub y todos están invitados a seguir desarrollando el proyecto.

7. Proyecto Polímero

Marco de diseño de materiales poliméricos

El proyecto Polymer de Google tiene como objetivo permitir el desarrollo web basado en elementos personalizados encapsulados e interoperables. No es un mero marco HTML/CSS para el desarrollo web, sino que también se puede utilizar para desarrollar aplicaciones móviles. En este momento, Polymer se encuentra en su etapa inicial, llamada «Revisión del desarrollador». Aún así, la mayoría de los componentes ya están casi completamente desarrollados. Todos los navegadores populares (IE 10+, Chrome, Safari, Firefow) muestran el diseño y los elementos de Polymer correctamente. Polymer proporciona una amplia gama de documentaciones, manuales breves y vídeos para principiantes. https://youtu.be/2toYLLcoY14?list=PLRAVCSU_HVYu-zlRaqArF8Ytwz1jlMOIM

8. LumX

Marco de diseño de materiales LumX

Marco material nt1m

El marco nt1m/Material Design es un marco CSS simple y receptivo que le permite usar Material Design con su próximo proyecto web. Puedes descargarlo a través de Github. Todos están invitados a unirse y mejorar el proyecto.

Conclusión

Discutimos una selección de 9 marcos de Material Design aquí. Ahora te toca a ti elegir el que mejor se adapte a tus necesidades. Por mi parte, revisaré Materialise y las dos extensiones de Bootstrap. ¡Disfruta probando Material Design y los frameworks tú mismo!

Enlaces relacionados

(dpe)

#Vogue #marcos #diseño #materiales #para #sitios #web #vanguardia

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.