30+ Recursos de material design gratuitos para diseñadores
Material design es una de las tendencias más populares de los últimos años. Comenzó como un conjunto de directrices para los servicios de Google que se inventó para unificar sus interfaces de usuario. Pero hoy en día muchos diseñadores profesionales adoptan sus principios, simplemente porque está enfocado en la usabilidad y parece más genial que el diseño plano regular.
Si deseas empezar a diseñar sitios web y aplicaciones de material design como un profesional, primero lee lo que Google dice sobre esta tendencia, y a continuación examina esta galería de recursos gratuitos y elige algo para tí. Más de 30 freebies ofrecidos aquí se convertirán en una buena plataforma de lanzamiento para tu proyecto de cualquier tamaño.
La entrada se divide en 4 secciones: fondos, kits de IU, iconos y marcos. Cada una de ellas es esencial si deseas dominar material design.
Fondos
40+ Material Design Backgrounds
Un conjunto gratuito de 40 fondos de material design en alta resolución. Están disponibles en formatos .JPG y .AI, por lo que puedes editarloas como quieras. Estos fondos se proporcionan en una variedad de formas y colores, lo que permite aplicarlos a cualquier proyecto impreso o web sin ningún cambio.
***
Usando este motor de búsqueda de vectores gratis, podrás encontrar cualquier fondo de material design o cualquier otro freebie en cuestión de minutos. Teniendo una enorme base de archivos, ¡todo lo que necesitas hacer es escribir una consulta de búsqueda y disfrutar del resultado!
***
10 Material Design Backgrounds
Este paquete incluye 2 diseños de fondo disponibles en 5 combinaciones de colores diferentes. Tienen alta resolución (5000 * 3000px) y alta definición (300 dpi), y son gratuitos para uso personal y comercial.
***
Este conjunto gratuito contiene 5 fondos de colores brillantes: azul, rosa, verde, naranja y amarillo que están disponibles en formato .JPG.
***
New Set of 30 Material Backgrounds
Esta gran colección de 30 fondos ha sido diseñada en colores cuidadosamente seleccionados, texturas elegantes y una amplia gama de formas: cuadrados, rectángulos, triángulos y círculos. Están disponibles en formatos .PNG y .AI.
***
Free Material Design Promotional Backgrounds
Recomendamos utilizar estos fondos para hacer banners o imágenes destacadas para entradas de tu blog, porque sus áreas con forma de diamante sirven perfectamente para este propósito.
***
Free Set of Material Design Backgrounds
Otro genial paquete que incluye 5 fondos de pantalla brillantes.
***
Colored Modern Material Design Vector Background
Este fondo en formato .EPS se lanzó bajo la licencia Creative Commons (Attribution 3.0). Como está basado en objetos vectoriales, puedes personalizarlo fácilmente en cuanto a su forma y color.
***
5 Free Material Design Backgrounds
Un pequeño conjunto de fondos de colores que contiene 5 archivos .JPG en alta resolución. Su versión premium ofrece 40 fondos de este tipo por tan solo 5$.
***
5 Banners de material design en una resolución de 1140x600px. Úsalos para crear imágenes destacadas, cabeceras y fondos para tus proyectos o simplemente como fondos de escritorio.
***
Free New Set of Material Design Patterns
8 Patrones altamente detallados. A diferencia de otros fondos en esta lista, son sin fisuras, lo que significa que puedes aplicarlos a una superficie de cualquier tamaño sin perder la calidad.
***
Kits de IU
Android Material Design UI Kit Sketch Resource
Google suele establecer tendencias en el mundo de diseño, por lo que no es de extrañar que los freebies de material design están disponibles para Sketch. Este kit de IU gratuito ofrece una variedad de elementos de interfaz de usuario: menús, botones, burbujas de diálogo y más.
***
Este pequeño kit de interfaz de usuario está disponible tanto para usuarios de Photoshop como para aquellos que usan Sketch. Parece ser muy dinámico y brillante, por lo que se puede utilizar libremente para diseñar una aplicación relacionada con la música o una versión móvil de algún sitio web.
***
Cisco es un kit de IU de PSD premium que incluye más de 30 pantallas de Android basadas en formas vectoriales. La versión demo contiene 10 pantallas que se puede descargar gratis.
***
Los chicos detrás de InvisionApp saben bien cómo promocionar sus servicios con freebies: su kit gratuito de interfaz de usuario llamado Do es simplemente inmenso. Contiene 130 pantallas, 10 temas prediseñados y más de 250 componentes de diseño. Y sí, es gratuito, no es broma.
***
"BankTag" - Free Material UI Kit
BankTag es un kit de IU limpio de Sketch para crear aplicaciones móviles financieras. Incluye 13 pantallas muy bien diseñadas con una variedad de elementos.
***
DiscoMusica es un kit de interfaz de usuario de colores multipropósito adecuado para diseñar páginas web y aplicaciones. Debido a su estructura, puedes usarlo para crear un sitio web educativo con cursos en línea. Este freebie está disponible para Sketch.
***
Component Based Material Design UI Kit
Este kit de interfaz de usuario gratuito para Photoshop es otra gran y sencilla forma de diseñar una aplicación móvil sin problemas.
***
Crystallize Free Material Ui Kit
Crystallize es un kit de IU femenino brillante, el más adecuado para sitios web de música y belleza. Está disponible en formato .PSD.
***
Como se indica en su nombre, este conjunto de pantallas de aplicaciones de material design sería una gran base para tu próximo proyecto de diseño móvil.
***
Iconos
El conjunto de iconos "más materiales" se ofrece por Google. La colección predeterminada de Google Material Icons contiene cientos de ellos que se actualizan constantemente con nuevos pictogramas. Estos iconos son sencillos y eficientes, por lo que complementan al diseño y no distraen la atención.
***
Este conjunto presenta 6 iconos planos detallados con un toque distintivo de material design. Se han empaquetado en un archivo .PSD para tu comodidad.
***
Un impresionante conjunto de iconos que se compone de más de 1000 iconos diferentes divididos en 9 categorías; y cada icono está disponible en 7 tamaños.
***
Este sitio web con un nombre sencillo te da acceso gratuito a más de 1000 íconos de material design. Contiene el conjunto predeterminado de Google Material Icons y muchos pictogramas subidos por los usuarios. Todos los iconos están disponibles para descargar en varios formatos, incluso en .PNG y .SVG.
***
Otro conjunto de iconos planos de colores, esta vez - para Android. Hay 12 miniaturas de diseño plano con largas sombras.
***
Google Material Design – Free Icon Set
Este conjunto de iconos incluye 40 iconos redondos de la temática del clima que se puede utilizar en el desarrollo de aplicaciones móviles. Se proporcionan en 3 tamaños: 64x64, 128x128 y 256x256, y están disponibles en formato .PNG.
***
Esta es una versión gratuita del Nova Icon Pack adecuado para cualquier entorno de desarrollo debido a la variedad de formatos de archivo que incluye: .Sketch, .AI, .SVG, .PDF, .EPS y .Iconjar. Se compone de 350 iconos, mientras que la versión de pago tiene más de 4000.
***
Server/Hosting Material Design Icons
Este paquete de iconos de colores ha sido diseñado para proveedores de hosting. Incluye 12 iconos con sombras largas que están disponible en formatos .PSD y .PNG.
***
Free Master Set of Material Design Icons
Este conjunto incluye varios iconos redondos relacionados con las aplicaciones y archivos, como Steam, Adobe Illustrator, Adobe Photoshop, Google Chrome, etc. Por lo tanto, se puede utilizarlo en el desarrollo de aplicaciones. En el archivo hay 35 iconos en formatos .PNG, .ICO y .ICNS.
***
Material Design Icon Templates
Este freebie no es un icono en el sentido convencional, sino más bien una plantilla vectorial en formato de Adobe Illustrator. Con su ayuda, podrás diseñar tus propios iconos de material design en muy poco tiempo.
***
Marcos
Materialize es un marco CSS extremadamente popular para los aficionados de material design. Se suministra con una amplia documentación y, en general, es muy fácil de usar, por lo que se ha convertido rápidamente en un marco de interfaz favorito para muchos desarrolladores web.
***
Material UI se encuentra entre los marcos mencionados con mayor frecuencia, junto con Materialize. Se basa en React, una biblioteca JS para construir interfaces de usuario, y debe facilitar la creación de sitios web de material design.
***
Como su nombre lo indica, Material Design Lite es ligero y fácil de usar. Sin embargo, este rasgo no lo hace limitado en cuanto a su funcionalidad. Esta biblioteca de componentes te ayuda a implementar elementos de diseño modernos como tarjetas, sliders, conmutadores y muchos más.
***
MUI es un marco de CSS ligero que cumple con las reglas de material design de Google. Al igual que Material UI, funciona en la biblioteca React JS, por lo que no habrá problemas con dominar MUI si estás familiarizado ya con esta herramienta.
***
Angular Material es un marco de interfaz de usuario para usuarios de AngularJS. Te da control sobre una colección masiva de componentes de interfaz de usuario que cumplen con las reglas de material design de Google.
***
Polymer es un proyecto de Google cuya pestaña de contenido 'Paper' (marcada como Md) está totalmente orientada a material design.
***
Para aquellos que creen que Bootstrap es el único marco viable (sí, parece al chauvinismo de Bootstrap), presentamos este tema Bootstrap de material design.
***
LumX es un marco de front-end basado en Google Material Design.
***
Ionic Material es una biblioteca de extensión para el marco de la aplicación móvil Ionic.
***
Es difícil encontrar recursos de diseño gratuitos (e incluso premium) que cumplen con todas las reglas de Google para material design. Pero, por otro lado, no es tan importante. Después de todo, el diseño tiene que ver con la creatividad, y no hay creatividad en seguir todas las reglas.
Fuente: "40 Free Material Design Resources for Designers" por Jeremy Blackwood
Diane trabja como una redactora del blog MonsterPost España desde hace muchos años. No imagina su vida sin escribir, aprender algo nuevo cada día, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. ¡Síguela en Facebook!