40 Recursos Gratuitos de Material Design para Diseñadores

Material design es una de las tendencias más populares de los últimos 2 años. Comenzó como un conjunto de directrices de Google, que se utilizó para unificar sus interfaces de usuario. Pero hoy en día muchos diseñadores profesionales adoptan sus principios, en primer lugar porque esta tendencia centra en la facilidad de uso y tiene un aspecto más fresco que el diseño plano simple.

Si deseas comenzar a diseñar sitios y aplicaciones en este estilo, primero, echa un vistazo a lo que Google dice acerca de esta tendencia, y a continuación, navega por esta galería de recursos gratuitos para recoger algo a tu gusto. Los 40 freebies ofrecidos aquí pueden convertirse en una base buena para un proyecto de cualquier tamaño.

Todos los materiales se dividen en 4 secciones: fondos, kits de interfaz de usuario, iconos y frameworks (marcos).

Fondos

40+ Material Design Backgrounds

1-1Un conjunto de 40 fondos en alta resolución. Los archivos están disponibles tanto en en mapa de bits (.JPEG), como en vectores (.AI), por lo que puedes editarlos de cualquier manera.

***

10 Material Design Backgrounds

1-2Este paquete incluye 2 diseños de fondo en 5 combinaciones de colores. Los fondos son en alta resolución (5000 * 3000px) y alta definición (300 dpi). Gratis para uso personal y comercial.

***

Material Design Backgrounds

1-3Este conjunto gratuito contiene 5 fondos de colores vivos - azul, rosa, verde, naranja y amarillo. Ellos están disponibles en formato .JPG.

***

New Set of 30 Material Backgrounds

1-4Esta enorme colección contiene 30 fondos con cuadrados, rectángulos, triángulos y círculos. Disponibles en formatos .PNG y .AI.

***

Free Material Design Promotional Backgrounds

1-5Recomendamos utilizar estos fondos para crear banners e imágenes destacados de blog, como sus formas de diamante son los más apropiados para este objetivo.

***

Free Set of Material Design Backgrounds

1-6Otro mini-paquete creativo que incluye 5 fondos de pantalla en material design.

***

Colored Modern Material Design Vector Background

1-7Este fondo en formato .EPS se distribuye bajo la licencia Creative Commons (Attribution 3.0). Ya que se basa en objetos vectoriales, puedes personalizar sus colores fácilmente.

***

5 Free Material Design Backgrounds

1-8Un pequeño conjunto gratuito de fondos que contiene 5 archivos .JPG en alta resolución. Su versión de pago incluye 40 fondos sólo por 5 $.

***

Material Banners

1-9-25 banners con resolución de 1140x600px. Utilizalos para crear imágenes destacadas, cabeceras, fondos para obras de arte, o simplemente como fondos de pantalla de escritorio.

***

Free New Set of Material Design Patterns 

1-108 patrones muy detallados. A diferencia de otros fondos de esta lista, ellos son sin fisuras, lo que significa que puedes aplicarlos a una superficie de cualquier tamaño sin perder la calidad.

***

UI Kits

Android Material Design UI Kit Sketch Resource

2-1-1Google es un pionero de la moda en el mundo del diseño, por lo que no puede extrañar que estos materiales gratuitos están disponibles para Sketch. Este UI kit ofrece una variedad de elementos de la interfaz de usuario: menús, botones, globos de texto, y mucho más.

***

Material UI Kit

2-2Este pequeño kit es una opción buena tanto para los usuarios de Photoshop, como para los que usan Sketch.

***

Cisco Material App UI

2-3Cisco es un kit de interfaz de usuario PSD que incluye más de 30 pantallas de Android basadas en formas vectoriales. La demo gratis contiene 10 pantallas.

***

Do App UI Kit

2-4-1Los autores de InvisionApp saben cómo promover sus servicios: su kit de interfaz de usuario es inmenso. Contiene 130 pantallas, 10 temas y más de 250 componentes de diseño. Y es gratis!

***

“BankTag” – Free Material UI Kit

2-5-1BankTag es un UI kit para aplicaciones móviles financieras. Incluye 13 pantallas muy bien diseñadas con una variedad de elementos.

***

DiscoMusica – Free Web UI Kit

2-6-1DiscoMusica es un kit multiuso adecuado tanto para diseños web, como para diseños de aplicaciones. Debido a su estructura, puedes utilizarlo para crear un sitio web educativo con cursos en línea.

***

Component Based Material Design UI Kit

2-7-1

Este kit de interfaz de usuario para Photoshop es otra gran manera de diseñar una aplicación móvil sin problemas.

***

Crystallize Free Material Ui Kit

2-8Crystallize es un kit con carácter femenino que es apropiado, tanto para sitios web de música, como de belleza. Está disponible en formato PSD.

***

Free Material Design UI Kit

2-9Este conjunto de pantallas de aplicaciones es una gran base para tu proyecto futuro.

***

Sepia Material UI Kit

2-10-1Este UI kit está diseñado en los colores poco comunes para material design e incluye todo lo necesario para diseñar una aplicación móvil impresionante.

***

Iconos

Google Material Icons

3-1-1

***

Material Web Icons

3-2-1

***

1000 Material Design Icons 

3-3

***

Material Design Icons

3-4

***

Android Lollipop Icons

3-5-1

***

Google Material Design – Free Icon Set

3-6-1

***

Nova Icons

3-7-1

***

Server/Hosting Material Design Icons

3-8

***

Free Master Set of Material Design Icons

3-9-1

***

Material Design Icon Templates

3-10-1

***

Frameworks

Materialize

4-1Materialize es un marco CSS muy popular para todos los aficionados a material design. Incluye una amplia documentación y es, en general, muy fácil de usar.

***

Material UI

4-2-1Material UI es uno de los marcos más mencionados, junto con Materialize. Está construido a base de React - una biblioteca JS para crear interfaces de usuario.

***

Material Design Lite

4-3Como su nombre indica, Material Design Lite es una aplicación ligera y fácil de usar. Sin embargo, estas características no significan que su funcionalidad es limitada. Esta biblioteca de componentes te ayuda a implementar tales elementos de diseño moderno, como tarjetas, sliders, toggles y muchos más.

***

MUI

4-4MUI es un marco CSS ligero que sigue las directrices de Google. Así como Material UI, funciona a base de la biblioteca JS React, por lo que es muy fácil de usar.

***

Angular Material

4-5-1Angular Material es un marco de interfaz de usuario para los usuarios de AngularJS. Te da el control sobre una gran colección de componentes de interfaz de usuario que cumplen con las directrices del Google.

***

Polymer

4-6-1Polymer es un proyecto de Google cuya pestaña 'Paper' (marcado Md) está totalmente orientada al material design.

***

Material Foundation

4-7ZURB Foundation es un marco popular entre los desarrolladores de Magento. Esta es la versión 'material' de este marco que combina los principios de codificación de ZURB, pero está optimizada para la creación de sitios web en material design.

***

Material Design for Bootstrap

4-8Para aquellos, que piensan que Bootstrap es el único marco viable...

***

LumX

4-9LumX es un marco de front-end basado en Google Material Design.

***

Ionic Material

4-10Ionic Material es una biblioteca de extensión para el marco de aplicaciones móviles Ionic.

***

Fuente: "40 Free Material Design Resources for Designers" por Jeremy Blackwood



Diane Parks

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!