Material Design por Google

Material Design por GoogleGoogle es una de las compañías más grandes en el mundo que abarca diseño, programación e incluso marketing, tiene herramientas absolutamente para todos, pero lo mejor de todo es que Google imparte cursos y ofrece todo el contenido para que todos se capaciten, ya depende de ti como lo uses…

Material Design

Google en el año 2014 en una de sus presentaciones anuales más grandes del mundo como lo es Google I/O hizo un anuncio de lo que hoy en día conocemos como Material Design. Todo comenzó con la nueva interfaz de Google Now (viejo asistente virtual de Google) y cuando Google notó que esta nueva interfaz se adecuó muy bien a las apps, todo empezó a girar alrededor del Material Design y luego cuando se presentó la actualización 5.0 Lollipop, Google decidió reemplazar absolutamente todo lo que conocíamos de la interfaz y convertirlo en Material Design.

Todo indica que Holo (interfaz de Google 4.0) fue reemplazada por lo que Google llama Material Design, pero no fue solo la interfaz, fue absolutamente todas las apps de Google como Calendario, Gmail, Search e incluso Docs. Posteriormente cuando Google liberó Android Studio como compilador oficial de Android, también dio la gran noticia de liberar las librerías, los tips y todo el uso de Material Design, de esta manera, los desarrolladores podrían aplicarlo sin tantos conocimientos a sus apps independientes, posteriormente los desarrolladores webs se llenaron de mucha audacia y lo aplicaron al diseño web, sin mencionar que Google actualiza diariamente esta documentación.

Elementos para el diseño

Material Design abarca hasta la mas mínima opción que aparece dentro de una interfaz de Google porque ellos lo han aplicado incluso en los formularios, pero hoy vamos a hablar solo del diseño, tanto para las apps como para el diseño web.

  • Colores

Dentro de la documentación oficial de Google podemos ver cómo le dan un uso especial al color, ya que en el Material Design esta es una de las características que hizo más relevancia dentro del diseño web, entre ellas podemos encontrar todos los colores con su degradado recomendable por Google, además de tener herramientas para crear temas, hacer test de accesibilidad, previsualizar como se vería en una interfaz el color, las paleta de colores recomendadas por Google y también la usabilidad que se le puede dar, si quieres saber nuestra recomendación, te invito a visitar paleta de colores Material Design recomendadas por Google.

  • Iconos

Google también nos ofrece la gran herramienta de adquirir todos los iconos tanto en color negro como blanco para su web o su app, lo mejor de todo es que están diseñados por Google ¿Qué puede salir mal? Es una de las mejores compañías en cuanto a diseño, están optimizadas, renderizadas y perfeccionadas para que puedas usarla en cualquier interfaz. Existe poco menos de mil iconos en lo que puedes seleccionar o buscar para descargarlo en formato SVG, PNG o incluso en formato de código, en caso de que no tengamos la posibilidad de incrustarlo con archivo multimedia.

  • Imágenes

La forma en la que Google trata las imágenes es dándole un enfoque mucho más practico que una “simple decoración”, por eso le ha ido tan bien… Por eso Google en este apartado del Material Design te ofrece los principios básicos de cómo utilizar las imágenes para perfeccionarlas, luego elegir cuales son las mejores prácticas para elegirlas y personalizarlas, por ultimo Google te imparte toda la capacitación para que lo integres a una interfaz, ya sea web o para las apps, desde resolución hasta la protección del texto para que haga suficiente contraste con la interfaz.

  • Tipografía

Google tiene  una tipografía muy fresca, entre el estándar para la tipografía o el tipo de fuente utilizan Roboto y Noto, aunque para las Android apps el estándar siempre va a ser Roboto. Por defecto Google recomienda que todas las apps sean nativas al idioma ingles o que al menos tengan una traducción hacia este idioma, además en este apartado del Material Design vamos a aprender sobre la caracterización de lenguaje, los estilos (normal, negrita y cursiva) y el tamaño del texto, ya que Google se enfocará en enseñarte en que apartado de una app o un diseño web puedes elegir que tan grande debe ser la tipografía.

  • Escritura

Escritura no es lo mismo que tipografía, no nos confundamos con estas dos características que Google tiene por separado… La escritura para Google tiene que ver en cómo vamos a organizarlo, ya que tiene que ser una escritura en general, sin importar en que idioma se encuentra. Google nos enseñará en este apartado como dirigirnos a un usuario (primera persona o segunda persona) así como evitar el pronombre “nosotros”, escribir directo y conciso, el tono en el que debemos escribir como invitar siempre al usuario y también el uso de la puntuación.

Prácticamente Google dentro del apartado diseño parece una universidad por presentarnos cada uno de los principios y de los temas avanzados del diseño para el Material Design, es como una pequeña biblia de todo lo que necesitamos saber para el diseño web o para las apps, por eso sigue siendo una de las mejores compañías del mundo.

Paleta de colores Material Design recomendadas

Paleta de colores Material Design recomendadasDentro del diseño web se toman bases para atraer a los usuarios, no basta con el contenido y los servicios que ofrecemos, también tiene que ver con el diseño y desde hace un par de años, la paleta de colores ha sido la base de todo.

Material Design

Desde hace un par de años el término “Material Design” ha sido reconocido por mucho tiempo, lo que muchos no saben es que no se trata de una plantilla de colores o de materiales para el diseño web, sino de la modernización que tuvo Google en su sistema operativo Android, que partiendo del diseño de Android fue que tuvo inicio el Material Design, luego fue que se viralizó este uso en otras plataformas como las páginas web u otros sistemas operativos, anteriormente el Material Design de Google era conocido como Holo y todo inició en Google Now.

Lo que hizo Google fue tomar todas las bases del diseño, aplicarlas a Google Now y al ver que tuvo tanto éxito ampliarlo hasta aplicarlo completamente a la versión 5.0 de Android (Lollipop), luego se empezaron a aplicar a todas sus apps hasta que Google formalizo el termino para todos los desarrolladores, tanto que Google tiene una web especial para la paleta de colores y todos los usos que se le puede dar al Material Design, tanto que puedes descargar los paquetes de iconos actualizados para utilizarlo en más de 4 tamaños distintos, tanto en blanco como en negro en varios formatos.

Paleta de colores Material Design

Google se tomó la molestia de hacer todas las paletas de colores para el Material Design, pero no de cualquier forma colocando todos los colores ahí, sino de una manera tan organizada que puedes ver como se hace contraste a un color varias veces, pero no venimos a hablar de los colores sino de las combinaciones recomendadas que ofrece Google para los desarrolladores, lo mejor de todo es que día a día Google actualiza según sus términos y sus modelos que le han funcionado en su sistema operativo y en todas sus webs, mira que son muchas…

Tema Light (claro)

Para los temas claros Google recomienda la utilización de varios tonos de color blanco y gris, además de utilizar sombras negras para que haga contraste con los textos y con el contenido. Este es la paleta de colores que utiliza casi cualquier app de Google, además de utilizar colores primarios de un tono azul, verde o incluso rosado, depende del contraste que uses, pero esta es la paleta recomendada para el tema light:

  • Color gris numero #E0E0E0 – Status bar
  • Color gris numero #F5F5F5 – App bar
  • Color gris numero #FAFAFA – Background
  • Color blanco numero #FFFFFF – Cards/Dialogs

Tema Dark (oscuro)

Para el tema oscuro de Material Design recomienda una combinación desde el color negro más oscuro hasta un tono gris, debemos tratar de hacer una buena combinación con el tono de color adecuado, ya que si no acatamos los colores recomendados de Google podemos hacer especie de un coloración de neón, si estás buscando esta paleta de colores estaría bien, pero si no te sale intencionalmente podrías tener muchos problemas con tu app o diseño web.

  • Color negro numero #000000 – Status bar
  • Color gris numero #212121 – App bar
  • Color gris numero #303030 – Background
  • Color gris numero #424242 – Cards/Dialogs

Texto en fondos

El fondo y la combinación de colores en el texto tienen mucho que ver con la legibilidad, no podemos tener un fondo negro y colocar un texto negro ¿Cómo lo diferenciaríamos?

  • Fondo claro: Cuando el fondo es blanco o un color muy claro se puede hacer una combinación de texto color negro numero #000000 pero utilizar opacidad hasta un 38% para textos ocultos.
  • Fondo oscuro: Cuando utilizan un color oscuro como negro, azul, rosado o incluso verde se necesita utilizar un color blanco para el texto, 100% blanco para diferenciar bien el texto en el fondo.

Color primario y secundario

La base del Material Design tiene mucho que ver con dos colores, el color primario que va a tomar toda originalidad del color dominante en todo el diseño web o de la app, por defecto Google recomienda utilizar un color índigo numero #3F51B5 y en cuanto al color secundario que frecuentemente es utilizado para los botones, botones con texto, selección de texto, campos de escritura, controles, barras de progreso e incluso hipervínculos, entre las recomendaciones que utiliza por defecto Google es un color rosado numero #FF4081 o un color verde azulado numero #455A64, estas son las recomendaciones del Material Design.

Diferencia al Flat Design

En el diseño web el Flat Design es un diseño muy plano como su nombre lo dice, por eso cuando Google hizo mención del Material Design muchos diseños web cambiaron toda su forma de presentar los colores en una forma de degradado ascendente y descendente, esto crea un efecto 3D y sombras, por eso el Material Design ha triunfado y se ha tomado como base para el diseño web y para las apps, tanto para Android como para iOS aunque tomen otra base, se tiene en cuenta incluso los iconos del Material Design desarrollado por Google.