Material Design: Recursos e Inspiración

Material Design es el nuevo lenguaje visual de Google. Este pretende combinar un diseño visual de calidad con tecnología para así mejorar la experiencia del usuario. El concepto de “Material Design” es tan innovador que apenas existe información al respecto. No obstante, he encontrado una serie de recursos para que pueda iniciarse e inspirarse en el estilo del “Material Design”.

Recursos ofrecidos por Google

Google es tan bueno con los usuarios que les facilita una lista de recursos bastante amplia. Entre ellos se encuentran diversos tipos de plantilla en formato Adobe Illustrator, que puede descargar gratuitamente en el siguiente enlace de la página de Google (dentro del apartado “Material Design Guide”): Resources Page. Si busca algo más específico, también puedo ofrecérselo. Aquí podrá encontrar y descargar algunos de los archivos más logrados:

Diseñadores que inspiran

He incluido en la lista capturas de Dribbble y CodePen para que pueda disfrutar del increíble trabajo inspirado en el “Material Design” de otros diseñadores. Da gusto ver lo que otras personas pueden lograr con este nuevo estilo de diseño. Además, algunos de los desarrolladores han creado recursos como, por ejemplo, los botones de “Material Design”, con el fin de despertar nuestro interés sobre el concepto.

Archivo de proyecto gratuito de After Effects

Free After Effect Project File

Jelio Dimitrov es el creador de esta animación tan divertida de After Effects, un recurso indispensable para todo aquel que intente crear animaciones con el estilo “Material Design”.

Botones Material Design UI

Material Design UI Buttons

A continuación, encontrará algunos de los programas que incluyen diversos elementos de “Material Design UI”, todos ellos codificados en CSS, entre los que se incluyen botones, elementos cuadrados, un cuadro de alerta, así como cuadrados, imágenes y círculos lisos. Una biblioteca de pequeño tamaño, pero que le resultará útil para iniciarse en este estilo.

Plataforma de juego Material Design

Material Design Playground

Esta plataforma de juego es un git repo, diseñado por Eric Bidelman, que contiene una gran cantidad de elementos de “Material Design” y es, asimismo, uno de los “jardines-código” más extensos que existen. Sáquele provecho y aprenda los conceptos básicos del “Material Design”:

Botones Material Design

Material Design Buttons

Se trata de una colección de botones de diferentes formas: cuadrados, redondos y en forma de algún tipo de figura. Lo que la hace más interesante es la opción añadida por la cual se puede cambiar el color del fondo.

Sincronización jerárquica del “Google Material Design”

Google Material Design Hierarchical Timing

El “Material Design” está lleno de animaciones, en especial cuando cargas un elemento nuevo. Esta es una simulación de animación para todos aquellos que estén interesados en usar este tipo de animación en cualquier proyecto (que no tiene por qué estar relacionado con Google).

El icono de plantilla “Google Design”

Google Design Icon Template

Por otro lado, si lo que quiere es crear iconos de “material design”, este es el Dribbble perfecto para usted. Grahm Macphee creó un icono de plantilla que puede descargar de forma totalmente gratuita y usar cuando los necesite.

Android L – El sistema “Icon-Grid”

Material Design Icon Grid System

Si lo que desea es un icono de plantilla más completo, este está hecho para usted, puesto que incluye dos plantillas rectangulares, una circular y una cuadrada. Esta plantilla está diseñada específicamente para iconos Android L.

Nueva interfaz Android L

New Android L Interface

En cambio, si lo que necesita es un Android L PSD, este es el ideal. Se trata de un conjunto de UIs gratuito, que podrá utilizar para crear modelos de aplicaciones o interfaces para Android L. Es increíble lo bonitas que quedan estas asociaciones de colores.

Casillas de selección de “Material Design”

Material Design Checkboxes

Este es un programa de código para crear casillas de selección. Es un producto que lo tiene casi todo. En mi opinión, solo le faltaría tener un código que permitiese otros tipos de entrada, como un menú desplegable.

Presentación de diapositivas ”Material Design”

Material Design Slideshow

Para aquellos que estén interesados en documentos un poco más formales, Harrison Weber, editor de noticias en VentureBeat, ha creado un programa con el que poder presentar diapositivas, con el que explica de forma breve los conceptos básicos sobre el “Material Design”. Puede descargarlo y compartirlo desde este enlace.

”Material Design”

Material Design

Esta animación corta creada por el estudiante Jovie Brett está diseñada para mostrar en qué consiste el “material design” de una manera natural. La animación es absolutamente espectacular y además conserva muy bien la esencia del “material design”. Me encanta el toque lúdico que confiere al “material design” un aspecto alegre.

Iconos de plantilla “Material Design”

Material Design Icon Templates

En esta captura de Dribbble se adopta el estilo UI del “material design”, ya que se abarcan todos los tipos de fuente, colores y estilos de línea.

Panel de control de “Material Design” de Google

Google’s Material Design Dashboard

He aquí una captura de Sam Mearns, en la que se muestran los distintos modos en los que se puede explotar el potencial del concepto del “material design” de Google. Con ello pretende dar a conocer su proyecto interno.

WhatsApp – “Material Design”

WhatsApp – Material Design

Si por algo es conocido WhatsApp es por sus constantes cambios de diseño. Amruth Pillai fue quien tomó una de las primeras capturas de pantalla mientras cambiaba el diseño de la aplicación por otro basado en el estilo del “material design”. Tiene muy buena pinta (y la copia también es peculiar).

Iconos de sistema – “Material Design”

System Icons

Aquí encontrará un conjunto de iconos para Android L creados por Google. Fíjese en que no se trata de iconos vacíos o que formen figuras. Esta propuesta de Google es muy interesante. Como puede ver, el icono presenta un formato impoluto tanto en lo que se refiere al vector como al dibujo.

El botón de acción

Action Button

Si lo que busca es una navegación inspirada en el “material design”, aquí la tiene. Se trata de una animación elegante exclusiva para el botón de navegación de Android L. Contiene incluso un enlace CodePen para que pueda incluir esta animación.

Set Android L PSD

Android L PSD Kit

Rasmus Nielsen es el creador de este fantástico set para Android L. Sus diseños son geniales. El diseño es elegante, los colores son bonitos y la calidad general es increíble.

Aplicación Prayers Times

Prayers Times App

Vincent Tantardini creó esta aplicación que sirve como recordatorio para aquellos que participan en la celebración del Ramadán. De nuevo, los colores poseen un gran brillo y los detalles UI, así como las líneas divisorias son espectaculares. El “material design” está bastante logrado.

Conclusión

En verdad, esto no ha hecho más que empezar. Los recursos son escasos, pero por lo menos existe una introducción para que la gente como usted pueda iniciarse en el mundo del “material design”. Se trata de un diseño estético muy elaborado que dará forma a nuestras interfaces, empezando por Android L. Mientras el “material design” se siga desarrollando, siempre tendremos nuevos recursos. Si alguna vez ha desarrollado algo con el estilo del “material design”, cuéntenos su experiencia y deje un enlace en un comentario.

Si quieres mantenerte al día con nuestros artículos, puedes seguirnos en Twitter, Facebook, Google+, o incluso suscribiéndote a nuestro hilo RSS.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres