Personalización

Personalizar el tema de tu acción te permite reflejar mejor tu marca y proporcionar contexto visual a la experiencia del usuario.

Descripción general


Color

El color es un identificador de marca fuerte. Puedes personalizar los colores primario y de fondo para representar tu marca. El color principal se usa para destacar componentes importantes de la superficie visual, como el título de la tarjeta y cualquier botón de acción. Este color debe ser el que se suele asociar con su marca.

Primero, elige un color principal.

Después de elegir un color principal, elige un color de fondo que vaya con el color principal y el secundario.

El color de fondo puede ser una versión más clara del color principal.

El color de fondo puede ser complementario.

Para garantizar que se pueda acceder a los colores, realizamos una verificación del contraste de color en la consola para desarrolladores a fin de asegurarnos de que haya suficientes relaciones de contraste de color entre los colores primario y de fondo, y entre los colores secundarios y de fondo. Para obtener más información sobre cómo elegir y coordinar colores principales y de fondo, visita el sitio de Material Design.

Imagen de fondo

Una de las formas más potentes de aportar riqueza visual y dimensiones a una tarjeta es usar una imagen como fondo en lugar de un color sólido. Ten en cuenta lo siguiente cuando elijas una imagen como fondo:
Ten en cuenta que, para garantizar la legibilidad en primer plano, se aplica una máscara de protección oscura a la imagen de fondo. El texto cambiará a blanco automáticamente.

Esta tarjeta básica usa una imagen de fondo. Una imagen de fondo reemplazará cualquier color de fondo; por lo tanto, elija la opción que mejor represente su marca.

La imagen debe ser lo suficientemente neutra para mantener el aspecto deseado en múltiples giros de diálogo. Aquí, la misma imagen de fondo se aplica tanto a la tarjeta básica anterior como a esta tarjeta de carrusel.


Tipografía

La tipografía puede expresar tu marca mientras dirige la atención del usuario hacia la información más importante. Para lograr el mayor impacto, puedes personalizar el texto más grande, como el título, en cada tarjeta de tu acción. En esta ubicación, un tipo de letra expresiva, como una fuente serif, una fuente estilo secuencia de comandos, o una fuente más pesada, pueden atraer la atención y proporcionar contraste con el texto secundario. Para obtener orientación general sobre la tipografía, consulta la Fundación de material design.

Elige una fuente que funcione bien con el texto secundario.

Qué debes hacer:

Con una fuente audaz y un color brillante, esta fuente se destaca en el fondo y atrae la atención hacia el título de la tarjeta.

Qué no debes hacer:

Sin el peso más pesado, esta fuente es difícil de leer y no atrae la atención hacia el título antes del texto del cuerpo.


Forma

Forma de la imagen

En línea con los componentes de Material Foundation, la forma de las imágenes ofrece otra dimensión para la expresividad. Ahora, puedes elegir entre formas angulares y curvas para imágenes en componentes visuales. Elija una forma de imagen que se adapte al estilo general de su marca.

El logotipo es un buen lugar para buscar orientación sobre la forma que puede elegir. En este ejemplo, el logotipo es nítido y angular, por lo que las esquinas angulares se alinean con la marca.

Otros componentes también pueden orientarte en tu decisión. Aquí, los bordes redondeados del botón de acción y el logotipo coinciden con las esquinas curvas de la imagen.

Si deseas obtener más orientación para elegir formas de imágenes, visita el sitio de Material Design.