¿Probablemente sigues escuchando la frase? ¿Diseño de material? apareciendo en conversaciones. El concepto es bastante nuevo; se introdujo en el verano y hace referencia a un nuevo lenguaje de diseño de la gente de Google.
Pero el diseño material es más que una idea; Es probable que los diseñadores reconsideren completamente los procesos de diseño de aplicaciones y web. Los sitios ya están empezando a implementar esquemas de diseño utilizando la documentación de diseño de materiales de Google. Así que ahora es el momento de aprender de qué se trata y si hay un marco de diseño de material en su futuro.
¿Qué es el diseño de materiales?
El diseño de materiales es un lenguaje visual creado por el equipo de diseño en Google para ayudar a los diseñadores a crear sitios web y aplicaciones accesibles, prácticas y utilizables. El concepto se basa en un documento vivo que está disponible públicamente. La documentación se actualiza constantemente para reflejar los cambios en el alcance y la tecnología.
El diseño de materiales se basa en un conjunto de objetivos y principios que son más fáciles de pensar que de lograr. (Pero está bien. La idea aquí es pensar más sobre el diseño y cómo mejorarlo).
Objetivos de diseño de materiales:
- Cree un lenguaje visual que sintetice los principios clásicos del buen diseño con la innovación y la posibilidad de la tecnología y la ciencia.
- Desarrolle un sistema subyacente único que permita una experiencia unificada en plataformas y tamaños de dispositivos. Los preceptos móviles son fundamentales, pero el tacto, la voz, el mouse y el teclado son métodos de entrada de primera clase.
Principios de diseño de materiales:
- El material es la metáfora: las señales visuales deben basarse en la realidad.
- Negrita, gráfica, intencional: la teoría del diseño básico (uso del tipo, cuadrículas, espacio, escala, color e imágenes) debe guiar las imágenes
- El movimiento proporciona significado: mover objetos o acciones no debe interrumpir la experiencia del usuario y proporcionar coherencia
Los factores de guía para el diseño de materiales son muchos. (La documentación es bastante impresionante.) Se divide en una variedad de conceptos y tratamientos específicos. Google ha creado un conjunto de reglas? para saber cómo crear animaciones, estilos, diseños, componentes, patrones y usabilidad.
Todas estas pautas comienzan con una comprensión de las propiedades físicas básicas, de transformación y de movimiento del diseño de materiales. La teoría guía es que el material se basa en la realidad, donde los objetos residen en un espacio casi 3D. En términos de estética, se sitúa entre la escala del diseño plano y el esqueoumorfismo.
Color y tipografía
Los conceptos de color del diseño de materiales se prestan bastante de la tendencia de diseño plano. Las paletas son llamativas y brillantes. La tipografía sigue el tema plano también con sans serifs simples.
"El color está inspirado en llamativas declaraciones de color yuxtapuestas con ambientes apagados, siguiendo el ejemplo de la arquitectura contemporánea, las señales de tráfico, la cinta de pavimento y las canchas deportivas". Según la documentación del diseño del material. • Enfatizar las sombras en negrita y los resaltes. Introducir colores inesperados y vibrantes.
Lo bueno de los conceptos de color es el uso de contraste distinto. En cada ejemplo, puedes ver "Design School 101". Teorías en acción. Google proporciona una paleta de colores completa con muestras descargables. Los conceptos de color son tan básicos que hay que preguntarse si Google cree que los diseñadores han olvidado la teoría del color.
Las pautas tipográficas son igualmente básicas. Una fuente predeterminada para todas las aplicaciones, Roboto, la predeterminada para las aplicaciones de Android, se proporciona con un enlace de descarga, así como una escalera para el uso de la fuente.
Diseño y diseño
El diseño básico y la estructura de diseño de los proyectos de materiales nace de los conceptos de diseño de impresión. Se recomienda a los diseñadores que creen y utilicen una cuadrícula de línea de base y una estructura matemática para la ubicación de los elementos.
El diseño se divide en regiones que sugieren cómo y dónde colocar los elementos para una interacción óptima del usuario. (También hay pautas sobre cómo deben ser los elementos grandes).
Y cada concepto tiene una plantilla descargable para crear para Android. Los riesgos son terminar con un diseño que sea demasiado simple o tener una aplicación que parezca? ¿Demasiado Android? Expulsado por los amantes de iOS.
Elementos comunes
Cada elemento en el diseño de materiales se describe en detalle. Desde cómo crearlo hasta dónde debería aparecer en la pantalla, sería difícil visualizar algo que no está aquí. (La lista incluye 19 componentes para ser exactos).
- Hojas de fondo
- Botones
- Tarjetas
- Papas fritas
- Diálogos
- Divisores
- Rejillas
- Liza
- Lista de controles
- Menús
- Recolectores
- Progreso y actividad
- Deslizadores
- Snackbars y tostadas
- Subheaders
- Interruptores
- Pestañas
- Campos de texto
- Información sobre herramientas
Los diseñadores a quienes les gusta el aspecto de los componentes destacados pueden incluso descargar un archivo Adobe Photoshop de Illustrator que contiene todos los elementos e iconos del sistema Android. Las hojas de calcomanías vienen con estilos y se adhieren a la cuadrícula sugerida.
Usabilidad e interacción
? Un producto es accesible cuando todas las personas, independientemente de su capacidad, pueden navegarlo, entenderlo y usarlo para lograr sus objetivos. Un producto verdaderamente exitoso es accesible para la audiencia más amplia posible.La documentación de diseño de materiales abre nuestros ojos a los patrones de interacción y usabilidad y las preocupaciones de accesibilidad de una manera que es bastante útil. Si bien muchas de las propiedades estéticas reales pueden parecer básicas para los diseñadores experimentados, algunos de los conceptos de usabilidad e interacción son cosas que deben tenerse en cuenta.
La sección de patrones de interacción es especialmente útil. Detalla un conjunto de ideas para hacer algunos elementos universales en todos los diseños. (Piense en cosas como cómo escribir una hora o fecha o cómo debería funcionar la búsqueda). Estas son algunas de las herramientas más básicas que los usuarios esperan que funcionen y que funcionen de una manera específica para todos los usuarios es un beneficio definitivo.
La accesibilidad es otra preocupación real y una para la que se describe la documentación del diseño del material y que brinda buenas opciones. Pensar en los usuarios que pueden interactuar con un diseño web de una manera que no incluya sonido o color, con alto contraste habilitado, con una pantalla ampliada, sin una pantalla visible o con solo control de voz o incluso una combinación de estos elementos puede explicar una importante población de usuarios.
10 recursos de diseño de materiales
El diseño del material está apareciendo por todas partes. Hay muchas cosas para descargar directamente desde Google, pero otros también están desarrollando formas de usarlo. Aquí hay algunos recursos para ayudarlo a explorar conceptos de diseño de materiales.
- Plantillas de diseño de Google para dispositivos móviles, tabletas y computadoras de escritorio.
- Diseño de material para Bootstrap
- Angular.js Material Project
- Diseñador de polímeros
- Materializar el marco frontal
- Paleta de colores del material
- Interacción de materiales
- Diseño de materiales en la lista de verificación de Android
- Plantilla de dibujo de material de diseño
- Kit de UI de material libre
Galería de Diseño de Materiales
Al igual que con cada tendencia y concepto, hay muchos sitios web y aplicaciones móviles que utilizan los conceptos descritos en el diseño de materiales. Aquí hay cinco ejemplos que muestran los principios y cómo los diseñadores pueden trabajar y experimentar con los conceptos.
Runtastic Running y Fitness
Configuraciones de Google
Conejo Malvado
Línea de tiempo del tiempo
Conclusión
El concepto de diseño de materiales es bueno. Las pautas son limpias y frescas. Pero los diseñadores más experimentados probablemente no necesiten este nivel de orientación. Dentro de la documentación, casi todas las ideas incluyen un truco descargable. ¿Realmente necesitamos tanta ayuda?
La documentación es divertida de leer, te hace pensar y es una vista previa de las cosas que pronto inundarán la web. Juega con los conceptos, pero no te sientas casado con ellos. El diseño, especialmente cuando se trata de tendencias y tecnología, está cambiando tan rápido como podemos imaginarlo.
Como cualquier otra tendencia de diseño, marco o concepto, debe decidir por sí mismo si los conceptos son utilizables en sus proyectos. ¿Te ves usando material de diseño? ¿Por qué o por qué no? Háganos saber en los comentarios.