Dentro 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.
Tabla de Contenidos
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.
2 Comentarios