×
A medida que la complejidad del diseño para la web sigue aumentando, crear una experiencia que no sólo se vea bien, sino que se sienta tan natural de usar con el tacto como con el ratón y el teclado es difícil de lograr. Recientemente, Google ha estado tratando de defender el mundo del diseño digital creando su propio lenguaje de diseño llamado Material Design. El objetivo de Google para el Diseño Material es «crear 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». Sigue leyendo para ver si el Diseño de Materiales puede ayudar a ser un activo en tu proceso de diseño y ver cómo se ve una desviación completa de las tendencias como el Diseño Plano.
¿Qué es el material?
El diseño material se basa en la metáfora de la materia, un concepto inspirado en la fisicalidad del mundo real. Piense en la materia como una hoja de papel. Puedes tocarlo, se siente real y sigue las reglas de la física de manera predecible. Es tridimensional, puede ser destruida pero no desaparece sin avisar o moverse a través de una superficie aparentemente sólida. El diseño de los materiales se basa en ese mismo concepto. Al diseñar un sistema en el que el espacio y el movimiento son una parte natural de la experiencia, el mundo digital puede fundirse y mezclarse con el mundo natural. Los usuarios son capaces de aprender y comprender cómo utilizar su aplicación porque se siente natural, y emula las leyes de nuestro mundo que usted espera y comprende sin tener que pensarlo dos veces. Cuando intente comprender lo que es el material, piense en los elementos de la interfaz como si fueran hojas de papel. Puedes ver esto en uso en cualquier aplicación de Google, desde Google Play hasta Google Plus. Cada una tiene el mismo grosor y pueden compartir espacio horizontal o verticalmente, pero cada una tiene su propio espacio reservado a lo largo del eje z. Este sentido de espacio tridimensional está indicado por la dirección e intensidad de las sombras que proyecta en su entorno.
Características del diseño
El énfasis en los fundamentos del diseño como el color, los espacios en blanco, las imágenes y la tipografía sirven para mejorar la experiencia del usuario creando un camino claro hacia los objetivos y ayudando a la comprensión. El diseño se realiza desde una perspectiva tridimensional, lo que significa que la luz, la profundidad y el peso tienen presencia e impacto en el material. Las interfaces están compuestas por múltiples hojas de material, cada una de las cuales tiene una posición a lo largo del eje z y un grosor de un píxel independiente de una sola densidad (dp).en un contraste total con el diseño plano, los colores vivos y saturados son una característica clave en la creación de un diseño material. Generalmente, las paletas de colores de materiales consisten en varios colores atrevidos y un color secundario apagado y neutro como el gris. Las barras de herramientas adoptan diferentes tonos del color primario principal, y los elementos de apoyo de la interfaz de usuario adoptan colores secundarios. El texto debe ser casi negro sobre blanco, con el texto secundario en tonos de gris.las pautas de estilo de los materiales también dictan el diseño de elementos como iconos y gráficos. Todos los elementos gráficos de apoyo deben apoyar un mensaje en lugar de ser puramente de presentación. Al elegir y diseñar los gráficos, deben imitar el comportamiento y las características del material, y aclarar el contexto del contenido circundante.
Movimiento con sentido
Uno de los puntos fuertes del Diseño de Materiales es su énfasis en la importancia de usar bien el movimiento. El movimiento juega un papel muy importante en el apoyo a las acciones del usuario y en la provisión de significado y retroalimentación. El movimiento de un objeto se basa en características del mundo real que ayudan al usuario a inferir la naturaleza del propio objeto. Los objetos materiales operan bajo las reglas de la física. Son estacionarios a menos que se aplique una fuerza externa, las transiciones entre los estados son fluidas y naturales, y los cambios en el estado físico de un objeto nunca deben ser inesperados o inexplicables. El espacio tridimensional también debe ser preservado. Dado que cada material u objeto vive en su propio espacio en el eje z, el orden de apilamiento debe mantenerse si los objetos se mueven por encima o por debajo de los demás. El movimiento debe captar, enfocar y apoyar la interacción del usuario basada en la entrada de la mano, la voz, el ratón y el teclado en lugar de ser arbitraria.aplicado esto significa que, por ejemplo, cuando se toca un botón para abrir un menú, el menú debe pasar sin problemas a su estado visible y activo desde el punto de contacto (el botón). Permanecerá en el estado activo actual hasta que el usuario lo haga inactivo, sin que desaparezca o aparezca inesperadamente. Dependiendo del botón o del elemento de la interfaz, puede ondularse, aumentar de tamaño o elevarse en el eje z al ser pulsado. Si se activa a través de la entrada de voz, puede cambiar de color, elevarse o tener otro método que indique claramente el cambio de estado iniciado por la acción del usuario. Intente hacer clic en una tarjeta y observe el rizo y su origen. Observe los estados de rizado al pasar por encima de diferentes cartas, y cómo el uso de la sombra indica el estado de la carta, y dónde se produce la interacción del usuario. [codepen_embed height=»500″ theme_ slug_hash=»wtApI» default_tab=»result» user=»zavoloklom»]Mira el diseño del material del bolígrafo (basado en CSS) – Azulejos de Sergey Kupletsky (@zavoloklom) en CodePen.[/codepen_embed]
Buceo más profundo
Esto es sólo una muestra de los principios del Diseño Material. Mientras que algunos principios parecen bastante abstractos a primera vista, la especificación de Diseño de Materiales de Google es útil para ver ejemplos más detallados y ayuda para aplicar el Diseño de Materiales a tus propios proyectos. A lo largo de la documentación se encuentran las mejores prácticas para todo, desde los patrones de diseño comunes hasta la correcta aplicación de las sombras en diferentes escenarios. Algunos componentes también se pueden descargar gratuitamente, incluyendo elementos de la interfaz de usuario, iconos, fuentes y paletas de colores. Para obtener más información, consulta la especificación de diseño de materiales de Google.
COMPARTIR:
¿Listo para capacitar a todo tu equipo?
10Licencias¿Necesitas más licencias? Contacte con ventas. Continúe con la compraContinúe con la compraCancelar
Con tu plan, puedes:
Con tu piloto de 14 días, puedes:
- Acceder a miles de videos para desarrollar habilidades críticas
- Darle acceso a hasta 10 usuarios a miles de cursos de video
- Practicar y aplicar habilidades con cursos y proyectos interactivos
- Ver datos de habilidades, uso y tendencias de sus equipos
- Prepararse para las certificaciones con los exámenes de prácticas líderes en la industria
- Medir la competencia entre las habilidades y los roles
- Alinear el aprendizaje a sus objetivos con los caminos y canales
╲╱Solutions Skills FlowGift of View PricingContactar Sales╲╱PlatformBrowse libraryRole IQSkill IQIrisAuthorsProfessional ServicesTechnology Index╲╱CompanyAbout usCustomer storiesInvestorsCareersBlogNewsroomResource centerGuides╲╱ResourcesDownload EventsTeachPartnersAffiliate programOne.orgSubscribe╲╱SupportContactHelp centerIP whitelistSitemapCopyright © 2004 – LLC. Todos los derechos reservadosTérminos de usoPolítica de privacidad
Utilizamos cookies para que las interacciones con nuestros sitios web y servicios sean fáciles y significativas. Para obtener más información sobre las cookies que utilizamos o para saber cómo puede desactivarlas, haga clic aquí.
Acepta las cookies y cierra este mensaje Deshabilitar cookies
Ha desactivado las cookies no críticas y está navegando en modo privado. Para tener la mejor experiencia posible en nuestro sitio web, por favor, acepte las cookies. Para obtener más información, lea nuestra política de privacidad.
Acepta las cookies y cierra este mensaje