Un botón de material es más que un botón

Cómo aplicar estilo (y diferenciar) a los botones usando el diseño de materiales

Material Design lanzó recientemente guías de forma actualizadas, herramientas y estudios de casos para mostrar lo fácil que es diseñar los componentes de la interfaz de usuario con Material Theming. Para ilustrar aún más las capacidades de creación de temas del nuevo sistema de formas, creamos ejemplos en vivo de Botones de materiales en una variedad de temas usando Materiales Componentes para la Web en Glitch. Glitch permite que cualquiera (incluso usted) mezcle estos ejemplos de botones y se dé cuenta de su potencial expresivo utilizando el código. En pocas palabras, los siguientes ejemplos de botones giran los mismos mandos proverbiales dentro de Material Theming para lograr resultados visuales muy diferentes. A medida que más y más marcas existen exclusivamente en el espacio digital, los componentes temáticos ahora son tan importantes como un logotipo en la forma en que los usuarios se relacionan con su marca.

Cada botón en Glitch ha sido diseñado para reflejar una marca o producto ficticio, como un servicio de entrega de flores o una aplicación de podcast. Esta guía deconstruirá el tema de cada botón en términos de marca y los sistemas de Color, tipo y forma del material.

Material DIY: aprenda a mezclar estos botones usted mismo en el archivo .readme del botón.

Synergee

Aplicación de orientación de meditación

Synergee es una aplicación de guía de meditación que guía a los usuarios a través de viajes de meditación a través de tecnología háptica y otros medios no visuales. La marca de Synergee tiene los siguientes atributos: brillante, humilde y sofisticado.

Color

El uso de azules claros y oscuros domina la marca de Synergee y habla de sus atributos brillantes y humildes. Al replicar la sensación de mirar al cielo, los colores expresan cierta familiaridad que se siente agradablemente amigable.

$ mdc-theme-primary: # ded7ff;
$ mdc-theme-on-primary: # 003db8;

Tipo

Synergee expresa su atributo de marca sofisticado mediante el uso de K2D, un tipo de letra tailandés y latino creado por Cadson Demak. K2D incluye formas de letras tradicionales tailandesas que son intrínsecamente redondas y "en bucle", es genial ver cómo las características de diseño del alfabeto latino y la abugida tailandesa se transformaron en algo único y emocionante.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-typography-styles-button: (
 tamaño de fuente: 14px,
 peso de fuente: 500,
 espacio entre letras: 0.05em,
);

Forma

El brillante atributo de marca de Synergee dicta que el tema debe expresar una sensación de amistad y optimismo. Para expresar esto, el sistema de formas de Synergee está muy redondeado con componentes pequeños como botones completamente redondos.

$ mdc-shape-small-component-radius: (24px);

Rosas rojas

Servicio de entrega de flores

Red Roses es un servicio de entrega de flores que promueve la positividad a través del acto de dar y encarna los siguientes atributos de la marca: natural, alegre y elegante.

Color

El sistema de color utiliza tonos rojos que hablan de la naturalidad de las rosas y facilitan la creación de contraste entre los diferentes componentes. Los botones usan el color primario de su tema de material de forma predeterminada.

$ mdc-theme-primary: # b31839;
$ mdc-theme-on-primary: #ffffff;

Tipo

El tema Red Roses usa Cabin, un tipo de letra humanista sin fuente que se encuentra en Google Fonts; Las formas de letras de Cabin poseen una combinación de contornos redondos y afilados que hablan de los atributos naturales y elegantes de la marca Red Roses. (Cabin se inspira en Gill Sans, inspirada en el "Alfabeto subterráneo" del metro de Londres).

$ mdc-typography-font-family: unquote ("Cabina, sans-serif");
$ mdc-typography-styles-button: (
 tamaño de fuente: 14px,
 peso de fuente: 500,
 espacio entre letras: 0.05em,
);

Forma

El sistema de forma de Red Roses habla tanto de sus atributos de marca alegres como naturales al imitar los pétalos de flores. Los radios alternos para este botón reflejan la (im) perfección de la flora y el mundo natural; En combinación con el color, esta forma crea un fuerte impacto visual.

$ mdc-shape-small-component-radius: (4px 12px 4px 12px);

¡Hecho!

Aplicación de gestión de tareas

¡Hecho! es una aplicación de gestión de tareas que enfatiza experiencias rápidas y compactas para permitir a los usuarios completar sus tareas, sin distracciones. El hecho! La marca tiene los siguientes atributos: profesional, rápido y conciso.

Color

Para hablar con los atributos de marca profesionales y simples de Done!, El tema utiliza una paleta conservadora que consiste en blanco y un azul bastante neutro. Además, para minimizar la distracción y la velocidad exprés, los botones de Listo se abstienen de incluir una sombra.

$ mdc-theme-primary: # 5973bf;
$ mdc-theme-on-primary: #ffffff;

Tipo

El tipo de letra rígido Libre Franklin destaca valiente y confiablemente en contraste con la conservadora paleta de colores de Done! Libre Franklin es una expansión de la tipografía Franklin Gothic, que a menudo se usaba para titulares de periódicos o vallas publicitarias; es fácil ver las cualidades comerciales de Libre Franklin en el contexto del botón Hecho!

$ mdc-typography-font-family: unquote ("Libre Franklin, sans-serif");
$ mdc-typography-styles-button: (
 tamaño de fuente: 14px,
 peso de fuente: 500,
 espacio entre letras: 0.02em,
 transformación de texto: capitalizar,
);

Forma

El sistema de forma de Done habla de la velocidad y la concisión de la marca al abstenerse de agregar el peso visual de las esquinas curvas o anguladas.

$ mdc-shape-small-component-radius: (0px);

Moodie

Aplicación de anillo de humor

Moodie es una misteriosa aplicación de anillo de humor que determina tu estado de ánimo mediante la recopilación de datos biométricos. Su marca tiene los siguientes atributos de marca: misterioso, técnico y encantador.

Color

Los atributos de marca misteriosos y técnicos de Moodie se caracterizan por el uso de marcas de verde "terminal", a menudo asociado con gráficos y sistemas informáticos antiguos. A diferencia de las interfaces más comunes, el uso del color por parte de Moodie habla en gran medida de la narrativa ambigua de la marca y sirve como base para la magia de cambio de color de imitar un anillo de humor.

$ mdc-theme-primary: # 009b3b;
$ mdc-theme-on-primary: # 003db8;

Tipo

IBM Plex Mono exagera el atributo técnico de marca de Moodie de manera similar a su sistema de color; El uso de una fuente monoespacio sugiere el tecnicismo relacionado con el producto de Moodie. En combinación con un misterioso y encantador llamado a la acción, IBM Plex Mono actúa subtextualmente, insinuando algo extraño.

$ mdc-typography-font-family: unquote ("IBM Plex Mono, sans-serif");
$ mdc-typography-styles-button: (
 tamaño de fuente: 14px,
 peso de fuente: 600,
 espacio entre letras: 0.05em,
);

Forma

Continuando con temas de ambigüedad, la historia de la forma de Moodie se centra en el espacio intermedio de suave y rígido, redondo y afilado, para expresar nuevamente una visión distorsionada pero lúdica de la tecnología "misteriosa" detrás del producto.

$ mdc-shape-small-component-radius: (8px);

Waverly

Aplicación de transmisión de podcast

Waverly es un servicio de transmisión de podcast que se centra en la curación de listas de reproducción para diferentes tipos de contenido en torno a un solo tema, como podcasts, artículos, videos o música. Waverly encarna los siguientes atributos de marca: trabajador, contemporáneo y curado.

Color

Para centrarse principalmente en el contenido seleccionado, el tema Material de Waverly es un tema oscuro, lo que significa que la mayoría de la interfaz de usuario es de color oscuro con acentos de color claro para indicar elementos accionables, como sus botones. En el caso laborioso de Waverly, el gris oscuro resalta un naranja brillante para garantizar su jerarquía en un entorno de contexto pesado.

$ mdc-theme-primary: # FE8A00;
$ mdc-theme-on-primary: # 003db8;

Es importante tener en cuenta que un "tema" oscuro es diferente de un "modo" oscuro. Un usuario activa un modo oscuro al realizar una acción específica, mientras que un tema oscuro es inherente al tema basado en los colores de la marca u otros factores .

Tipo

El atributo de marca contemporánea de Waverly se expresa con Montserrat, un tipo de letra creado por Julieta Ulanovsky, residente del barrio de Montserrat de Buenos Aires. Aunque solo es similar a primera vista a un tipo de letra como Gotham, con letras anchas y contornos llamativos, Montserrat encaja perfectamente en el fenómeno contemporáneo conocido como "tipos de letra de marca" con una simpatía redondeada que ha encontrado su camino en la identidad de muchos productos.

$ mdc-typography-font-family: unquote ("Montserrat, sans-serif");
$ mdc-typography-styles-button: (
 tamaño de fuente: 14px,
 peso de fuente: 600,
 espacio entre letras: 0.05em,
);Forma

En este ejemplo en particular, Waverly está usando un botón de texto Material en el que no hay un contorno o cuadro para indicar una forma. Aunque no hay una forma visible, al interactuar (como desplazarse con el cursor o tocar) un usuario puede ver los límites de un botón y su forma. La historia de la forma de Waverly es suave y habla de sus atributos contemporáneos y laboriosos al aprovechar la forma básica familiar de Material.

$ mdc-shape-small-component-radius: (4px);

Diseño de materiales + falla

Material Design quiere que cualquiera pueda construir productos hermosos, más rápido. Nuestros componentes de código abierto le brindan todo lo que necesita para comenzar a construir. Glitch hace que sea fácil comenzar a jugar directamente en el navegador, inspirando el aprendizaje a través del juego. Alentamos a todos y cada uno a que mezclen estos ejemplos para crear sus propios botones y sus propios temas, incluso si nunca antes lo han codificado.

¡Remezcla y comparte lo que haces!
glitch.com/@material