En 2014, Google anunció el lanzamiento del lenguaje Material Design . Su objetivo original era solucionar problemas con el diseño de aplicaciones para dispositivos Android. El argumento era que el diseño plano no se traducía bien en pantallas más pequeñas. Sintieron que un diseño que carecía de señales visuales claras impedía la capacidad de los usuarios móviles para tomar medidas.
Matías Duarte , vicepresidente de diseño de Google, explicó:
“A diferencia del papel real, nuestro material digital puede expandirse y reformarse de manera inteligente. El material tiene superficies físicas y bordes. Las costuras y las sombras dan significado a lo que puedes tocar”.
Y eso es básicamente lo que es el diseño de materiales ahora: una forma de hacer que los elementos de diseño se vean palpables.
Al lanzar el nuevo lenguaje de diseño y las pautas, Google esperaba resolver los problemas de UX y la confusión para los usuarios de aplicaciones de Android. Dos años más tarde, su lenguaje de diseño ha superado el ámbito de las aplicaciones móviles y ahora es un principio utilizado regularmente en el diseño web .
Como sus creadores, es probable que las propias propiedades de Google sean los mejores ejemplos de diseño de materiales disponibles. Dicho esto, se ha dedicado un sorprendente número de sitios web de inspiración y exhibición al tema. Esta es una colección de nuestros favoritos actuales:
1. Comportamiento
Un gran ejemplo de un sitio web perfecto para inspirarse en el diseño, Behance tiene un tablero después de innumerables tableros de ejemplos a los que puede hacer referencia. Behance también hace uso del diseño de materiales lo suficientemente bien por sí solo, con cuadros que se destacan sutilmente de la cuadrícula, fondos sombreados para ayudar a dirigir la atención e indicadores claros para las acciones en las que se puede hacer clic.
2.CódigoPen
CodePen, el autoproclamado «patio de recreo para el lado frontal de la web», es una mina de oro para los desarrolladores cuando se trata de diseño de materiales. No solo podrá ver algunos ejemplos geniales de diseño de materiales en acción, sino que podrá ver el CSS, HTML y JavaScript subyacentes que los desarrolladores usaron para crear ese diseño o animación.
3. Regate
Si no está familiarizado con ella, Dribble es una red social para diseñadores, desarrolladores, artistas y otras personas visualmente creativas. Una búsqueda de «diseño de materiales» dentro de su sitio solo muestra cuán omnipresente es realmente el diseño de materiales, tanto en el diseño web como en el de aplicaciones. Puede encontrar inspiración aquí desde algo tan simple como un icono hasta el diseño de un sitio web completo.
4. Premios de diseño de materiales de Google Design
Un año después de que Google lanzara Material Design, honró a seis de las mejores aplicaciones de su clase con sus primeros Material Design Awards. Reconocerá muchos de los sitios web, junto con las 12 menciones honoríficas, en esta lista. Si no lo hace, o si actualmente no está utilizando sus aplicaciones, le recomendamos encarecidamente que las eche un vistazo ahora. Si Google se toma el tiempo de etiquetar a alguien como innovador, vale la pena mirarlo.
Aquí hay un video destacado de los ganadores de 2015:
5. Hecho con materiales
Este sitio web, que data de noviembre de 2014, sirve como una gran fuente de inspiración para el diseño de materiales. La mayor parte del sitio muestra capturas de pantalla de alta resolución de sitios web y aplicaciones móviles que emplean la técnica de diseño de materiales. Y aunque puede ser fácil perderse en estos ejemplos inspiradores, no olvide consultar el material de referencia que han incluido para desarrolladores en la barra lateral superior derecha. Esos serán útiles si eliges ir por esta ruta.
6. Blog de diseño de materiales
Este blog es uno de nuestros favoritos no solo porque cubre una gran cantidad de herramientas y temas que pueden interesarle en relación con este tema, sino también porque hace un gran trabajo al emplear la técnica de diseño en sí. Si no ha tenido la oportunidad de presenciar sus animaciones en acción, visite el sitio y haga clic en cualquiera de sus publicaciones de blog.
7. Material arriba
Parte de la familia de sitios web de Uplabs, MaterialUp se enfoca únicamente en el tema del diseño de materiales: ejemplos de sitios web, capturas de pantalla de aplicaciones móviles, herramientas, consejos y más. Incluso si no encuentra algo útil en este momento, eche un vistazo al diseño de su sitio web. El diseño y el aspecto recuerdan a los de Google Drive, ¿verdad? Si está buscando un recurso en el que pueda confiar, ¿quién mejor para recurrir que uno que haga un buen trabajo al ejecutar esos principios de diseño?
8. Pinterest
Si alguna vez hubiera un sitio de colección de imágenes nombrado como la principal fuente de inspiración para el diseño, Pinterest compartiría ese honor con Behance. Con una búsqueda rápida del término «diseño de materiales», tiene acceso instantáneo a videos e imágenes de sitios web y aplicaciones que hacen un buen uso de esta tendencia de diseño.
9. reddit
Reddit probablemente no sea el primer lugar al que pensarías ir cuando buscas inspiración para el diseño. Sin embargo, he aquí que hay un sub-reddit de Material Design. Aproximadamente la mitad de las publicaciones aquí son renovaciones de diseño que la gente ha hecho para mejorar el diseño de un material. La otra mitad son envíos de diseños originales sobre los que los diseños necesitan comentarios. Si está muy interesado en el diseño de materiales, este sería un gran lugar para revisar y discutir otros diseños con personas de ideas afines.
10. Tumblr – Diseño de materiales
Independientemente de si diseña aplicaciones para Android , aplicaciones para iOS, sitios web o cualquier otra cosa, si está interesado en obtener más información sobre cómo ejecutar correctamente el diseño de materiales, este es un buen recurso para consultar. Desplácese por este feed de Tumblr y encontrará ejemplos de todos los diferentes tipos de contenido que le servirán de inspiración para su próximo proyecto.
11. Tumblr – Patrones de materiales
En otro ejemplo de fuente inspiradora de Tumblr, Material Patterns muestra mucha más variedad de la que estamos acostumbrados a ver en este tipo de recursos. Desde aplicaciones de reserva de viajes hasta reproductores de música y páginas de redes sociales hasta aplicaciones de mapas, este es un excelente recurso para los entusiastas del diseño de materiales. Hay mucho color, animaciones fantásticas y una gran combinación de contenido para desplazarse.
12. Paleta de materiales (recurso adicional)
Si bien no iría tan lejos como para llamar a Material Palette una fuente de inspiración cuando se trata de diseño de materiales, este es un recurso absolutamente fantástico para encontrar la paleta de colores brillantes que necesita su diseño de materiales. Elija dos colores y luego deje que la aplicación genere la nueva paleta de colores de su sitio web según las mejores prácticas de diseño de materiales.
13. Recursos de diseño de materiales de Google (recurso adicional)
Aquí hay otro recurso adicional para todas sus necesidades de diseño de materiales. Por supuesto, el sitio web de Google Design es el modelo perfecto para ejecutar el diseño de materiales, pero lo más importante aquí son todos los recursos que Google ha proporcionado para ayudar a los diseñadores y desarrolladores a crear el diseño de materiales perfecto para sitios web, aplicaciones y más.
Conclusión
Cuando a Google se le ocurrió el lenguaje de diseño Material Design en 2014, el usuario final siempre estuvo al frente de su misión. ¿Cómo se podría mejorar el diseño de la aplicación (y luego de la web) para que la navegación y la UX se vuelvan más intuitivas? Su solución fue bastante simple: construir sobre lo que funcionó en el pasado (es decir, diseños minimalistas y receptivos) e infundirle más cualidades de la vida real.
Cuando esté listo para comenzar, tómese un tiempo para revisar las pautas y especificaciones de Google . Le proporcionarán una base sólida para trabajar. Luego, cuando esté listo para comenzar a diseñar, puede usar los recursos de diseño de materiales anteriores para ayudar a inspirar su proceso de diseño y llevar su diseño de materiales en una dirección única.
Ahora te toca a ti: ¿Crees que el diseño de materiales durará o es solo una moda pasajera?
Imagen en miniatura del artículo de Legend_art / Shutterstock.com