Image Image Image Image Image Image Image Image Image Image á
Scroll to top

Top

Sin Comentarios

El combo definitivo de Google para diseñadores y desarrolladores: Material Design

Oriol Selles

Hace ya mucho tiempo que la empresa Google comenzó a tomar la delantera en diversos campos, comenzando ahora a avanzar en el apartado tecnológico, y en lo que se refiere a la parte visual no se ha quedado atrás. A través de un diseño simple, funcional y con un uso de colores vivos, ha sabido desarrollar un sistema unificado que conecta con un sector en continuo cambio y adaptación.

Como recopilación útil para cualquier diseñador o desarrollador que quiera aproximarse al universo Google, traemos un “combo” de 5 webs imprescindibles:

MATERIAL DESIGN

A través de Material Design Google proporciona una fuente de recursos con ese lenguaje visual propio tan característico, con la finalidad de unir los principios básicos del diseño con la innovación de la tecnología, unificando las experiencias para todas las plataformas pero centrándose en un diseño natural y fresco para el diseño de aplicaciones.

La página web cuenta con una serie de explicaciones básicas y de consejos de cada uno de los diferentes apartados que se deben tener en cuenta a la hora de diseñar, en las que, a través de ejemplos y de su propia experiencia, quieren indicar a diseñadores y desarrolladores la que para ellos es la mejor forma de diseñar de forma eficiente y funcional.

Esta “librería” contempla desde colores, formas, contrastes, iconos, sombras, propiedades físicas de los elementos, animaciones y transiciones… Toda una serie de recursos y trucos con los que diseñar o desarrollar bajo estos parámetros.

Material Design

MATERIAL UP

En Material Up encontramos un tablero abierto en el que se comparten constantemente trabajos desarrollados con el diseño de “Material design”. Se trata de una red social en la que diseñadores y desarrolladores pueden compartir, discutir y mostrar trabajos nacidos del sistema Google. Sin duda se trata de una excelente web de inspiración si un proyecto requiere de este concepto gráfico y de desarrollo.

Material Up

MATERIAL PALETTE

La funcionalidad de Material Palette reside en su facilidad de uso para la combinación de colores. Únicamente indicando los dos colores base con los que quieres trabajar (uno primario y uno secundario), este te mostrará una paleta de colores nacida de esos colores y también en qué aplicarla en base a las guías sugeridas en Material Design. Además incluye la opción de guardar esta paleta en varios formatos (CSS, SVG, XML, PNG…). De aquí se puede extraer la conclusión de que esta corriente gráfica apuesta por un color principal y sus diferentes gamas, un color secundario para dar matices y establecer jerarquías y una discreta combinación de grises para el resto de componentes y fondos.

MATERIAL_PALETTE_02

MATERIALIZE CSS y MATERIAL DESIGN LITE

 

Esta web ofrece recursos CSS, plantillas y ejemplos, así como el material necesario para desarrollarlos. En ellas podrás encontrar patrones de colores, jerarquías tipográficas, rejillas y estructuras, efectos, tablas, botones… con los que generar sites o apps bajo los patrones gráficos planteados en Material Design. Gracias a Materialize CSS y Material Design Lite, los programadores podrán recopilar recursos y comprender la lógica con la que interactúan y reaccionan los elementos. Además, hay varios tutoriales sobre desarrollo y usabilidad en móviles, lo que supone un plus para renovarse y adaptarse a las inercias del mercado digital.

Otros factores a tener en cuenta son las animaciones y la usabilidad; uno de los retos que se trataron de solventar era desarrollar una experiencia de usuario muy orgánica en la cual los elementos interactuasen y respondiesen de una forma fluida y natural. Para ello se facilitan varios tutoriales en los que se explica la lógica y la física de los elementos para ser consecuentes con esta premisa.

Materialize CSS
Material Design Lite

CONCLUSIÓN Y DEBATE

Se trata de una excelente iniciativa mediante la cual, facilitando recursos a los diseñadores y desarrolladores, Google consigue expandir su estilo, lógica y visión de la comunicación digital y la tecnología.

No obstante, y aquí surge el debate, hay quien podría verlo como un acto unilateral y autoritario del gigante de las letras de colores, lo que podría significar la homogeneización de los criterios gráficos y, por ende, la trivialización del grafismo y desarrollo web como una sinergia de perspectivas diferentes.

Y tú, ¿qué opinas?

Envíanos tu comentario