Tematización de materiales: ¡Haga que el material sea suyo! | Programar Plus

La web es un medio bello y expresivo que ha evolucionado con el tiempo a medida que han cambiado las tendencias y la tecnología. Los momentos de deleite y estilo son lo que diferencia a las empresas entre sí. Al mismo tiempo, los mejores productos de la actualidad se basan en sistemas de diseño escalables basados ​​en componentes para desarrollar de manera eficiente una marca coherente. ¡Y es más importante que nunca tener accesibilidad y una sólida experiencia de usuario desde el principio! Pero estos dos mundos, el diseño web creativo y el diseño web sistemático, no necesitan estar enfrentados. El hermoso centro pegajoso del mundo del diseño web es donde podemos encontrar una manera de fusionar el diseño web creativo con nuestros sistemas y, afortunadamente, ¡puedes tener ambos!

Uno de esos sistemas de diseño se llama Material Design (¡el equipo al que me acabo de unir en Google!). El material se basa en años de investigación y mejores prácticas para brindar a los diseñadores y desarrolladores acceso a la creación de interfaces de usuario atractivas y accesibles con la menor cantidad de trabajo posible. Pero en su lanzamiento inicial, faltaba una cosa en la ecuación: la capacidad de expresar la personalidad de una marca de una manera fácil de implementar. El equipo escuchó dos comentarios clave:

  1. El material no era estilísticamente lo suficientemente flexible para satisfacer las necesidades de todos los productos, marcas y usuarios.
  2. No fue lo suficientemente fácil aplicar y crear experiencias de marca de manera sistemática en todos los productos.

Y a partir del año pasado (específicamente, I/O 2018), ¡Material anunció nuevas capacidades temáticas! La creación de temas permite a los desarrolladores y diseñadores beneficiarse de todas las partes de Material que lo convierten en un sistema de diseño de clase mundial, ¡y hacerlo propio! En otras palabras: puede personalizar la apariencia de los componentes materiales aplicando cambios globales al color, la forma y la tipografía de su producto.

Los componentes de material están diseñados para múltiples sistemas como Android, iOS y Flutter, y nos centraremos en la web para esta publicación (después de todo, esto es CSS-Tricks). Comencemos con una plantilla de inicio de sesión base usando Componentes de materiales para la web para ver lo fácil que será implementar un tema encima de esto:

Acerca de la tematización

Las implementaciones de temas actuales permiten ajustes de color, tipografía y forma que se filtran a todos los componentes de su producto. Es posible que estos tres subsistemas no parezcan muchas opciones, pero juntos aportan un gran impacto al diseño y son un gran trampolín para saltar con más cambios de diseño en un nivel más granular.

Color

La primera opción temática es el color. Hay una excelente herramienta de selección de color en Material.io para que pueda ver el contraste y ayudar en su proceso de selección de color. Ya que esto es CSS-Tricks, escribamos algo de CSS (bueno, más como SCSS), para comenzar con un ejemplo. En unas pocas líneas de código en nuestro my-theme.scss archivo, podemos cambiar por completo la apariencia de esta pantalla de inicio de sesión:

Hemos establecido:

$mdc-theme-primary: #26418f;
$mdc-theme-secondary: #d1c4e9;
$mdc-theme-background: #fdf6f9;

Aunque no hemos especificado un $mdc-theme-on-primary, el sistema sabe hacer esto blanco ahora (usando una función de contraste de Sass) para ayudarnos a garantizar un contraste de color accesible. También podemos anular el color del texto en los temas primario y secundario con $mdc-theme-on-primary y $mdc-theme-on-secondary. Sin embargo, si no se establece explícitamente ningún valor, estos serán en blanco o negro según el fondo. Consulte el selector de color para obtener más información.

Tipografía

El material establece una escala de tipografía base, que se puede personalizar con temas. Puede ajustar la tipografía para cada nivel de título individual y aplicarla en todo su producto de dos maneras:

  1. Uso de clases CSS para aplicar los estilos. Es decir <h1 class="mdc-typography--headline1">
  2. Usar mixins para extender los estilos de un componente de encabezado a otro (es decir, h1 {@include mdc-typography(headline1);}). Puede ver un ejemplo de esto en nuestro ejemplo de kit de inicio en Glitch.

Una forma rápida de cambiar el tipo de letra es usar Google Fonts, un directorio realmente agradable de fuentes web gratuitas. Vamos a hacer que esto sea fácil para nosotros y seleccionaremos una fuente de Google llamada Josefin Sans. Para usar esto en nuestro proyecto, necesitaremos importarlo y luego podemos configurar la tipografía base para usarlo:

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
$mdc-typography-font-family: unquote("Josefin Sans, sans-serif");

Usamos unquote aquí porque la tipografía en Material se establece en un mapa. Podemos especificar más estilos así:

$mdc-typography-styles-button: (
 font-size: 14px,
 font-weight: 600,
 letter-spacing: 0.05em,
);

Ahora nuestra página de inicio de sesión se ve así:

Forma

¡La forma es otra forma de ser expresivo con tu código! ¿Qué entiendo por forma? En Material, la forma afecta el radio de la esquina de los componentes, como botones, tarjetas y hojas. En el diseño de productos, la forma ayuda a definir su marca. ¿Es angular y parecido a una máquina, o es más redondeado y orgánico? El cambio de forma se filtra a través del resto del sistema. Estos son algunos ejemplos de forma en Material:

El otro aspecto interesante de la forma en Componentes de material es que no tiene que tener la misma forma en cada esquina, o incluso el mismo componente en diferentes tamaños. Hay componentes pequeños, medianos y grandes en Material, y puede aplicar diferentes estilos para estos diferentes tipos de componentes, y puede mezclarlos y especificar cada esquina, uno por uno, en una lista de valores separados por espacios simplemente como lo harías con border-radius.

Actualmente, MDC Web no admite atajos como lo hacen otras plataformas, ya que es una operación no trivial con los estándares web actuales. ¡Esta es otra razón por la que personalmente amo a Houdini y veo un gran impacto en el futuro desarrollo de CSS!

En el ejemplo con el que estamos trabajando, tenemos componentes grandes y pequeños. Los componentes grandes son las entradas del campo de texto, y el componente pequeño es el botón “iniciar sesión”. Podemos aplicar diferentes formas a estos con:

$mdc-shape-small-component-radius: 12px 4px;
$mdc-shape-large-component-radius: 8px;

¡Y voilá! Hemos transformado nuestra aplicación en 12 líneas de código.

¡Temas, temas, por todas partes!

Ahora aquí está la parte donde te vuelves creativo. Hay tantas formas de mezclar y combinar los elementos de color, tipografía y forma para que su marca realmente se destaque. Aquí hay cuatro aplicaciones de ejemplo muy distintas que usan la teoría del color, la tipografía y la forma para diferenciar sus productos, cada una basada en los componentes materiales de referencia:

Temas de la vida real

El propio Google personaliza y amplía los componentes materiales básicos con sus propios productos. Esto se llama Google Material Theme y fue definido por varios equipos de productos, incluidos Gmail, Google News, Google Play y Google Home:

Pero no son la única empresa que utiliza Material Design y sus principios. Algunas empresas también han ampliado los componentes materiales en sus propios productos a gran escala.

Lyft, un servicio de viajes compartidos, es solo un ejemplo. Usaron un componente FAB extendido para resaltar acciones clave y lo diseñaron con un degradado para darle una sensación única con la que los usuarios aún estaban familiarizados. Lyft también aprovechó el sistema de elevación de Material en su propio producto.

Anchor, una aplicación gratuita que ayuda a las personas a grabar, distribuir y alojar podcasts, es otro gran ejemplo de cómo hacer que Material sea tuyo. Muestran su llamativa paleta de colores y la integran con chips de elección para delinear las opciones de visualización, una lista de tarjetas para la selección de contenido y un FAB extendido anclado en la parte inferior para permanecer disponible de forma persistente para las acciones del usuario.

Empezar

Ahora tiene todo lo que necesita para crear su propio Material Theme con Material Components para la web. Es fácil comenzar a crear su proyecto web con nuestro Material Starter Kit y explorar temas con el proyecto Glitch de tema Build a Material que acabamos de lanzar. Cambiar alrededor de las variables en my-theme.scss para explorar cómo pueden personalizar los componentes individuales. Luego, puede abrir cualquier plantilla, pegar esas variables en el my-theme.scssy empezar a construir.

TL;DR: Si pensabas que Material Design no era para ti en el pasado, es un buen momento para comenzar a explorar. ¡Feliz tematización!

(Visited 9 times, 1 visits today)