Diseño web material design

Inicio » Diseño web material design

Diseño web material design

escritorio con material design

Material Design es el estándar para diseñar y crear sitios web y aplicaciones. Ha sido una respuesta a los estilos de diseño antiguos, poco amigables con el usuario y caóticos, y su objetivo es traer orden y unidad al diseño web. Aprende a usarlo.

Desde su creación, la cara de la web ha sufrido muchos cambios. Lo que esencialmente comenzó como un salvaje oeste del diseño en los años 90 y principios de los 2000, acabó dando paso a sitios web más sencillos, limpios y predecibles.

En este artículo, vamos a hablar de Material Design, mostrarte algunos ejemplos de sitios web que utilizan Material Design hoy en día, y proporcionarte recursos para ayudarte a utilizar Material Design en tu propio diseño y desarrollo de sitios web. Así que, empecemos.

Fue alrededor de 2010 cuando el skeuomorfismo saltó a la fama. Se trataba de un estilo de diseño que hacía que los elementos de la interfaz de usuario se parecieran a los objetos reales en los que se basaban. Lo vimos mucho en los fondos e iconos de los sitios web.

El Material Design se inspiró en el mundo físico. Pero no se trataba de un intento de devolver el diseño a los días skeuomórficos. Es una metáfora (que veremos en breve cuando exploremos sus principios).

ejemplos de material design

Los esquemas de color utilizados en Material Design se basan en un color primario y un color de acento que se pueden personalizar. Estos colores se especifican en el nombre del archivo CSS siguiendo este patrón: material.{primary}-{accent}.min.css (por ejemplo, material.indigo-pink.min.css). Nuestra CDN aloja una serie de combinaciones de colores basadas en los colores comunes de Material Design. Para descubrir y previsualizar las combinaciones de colores disponibles, utilice nuestra herramienta de personalización y previsualización.

Las combinaciones de colores utilizadas en Material Design se basan en un color primario y un color de acento que usted puede personalizar. Utilice la herramienta de personalización y previsualización para seleccionar y previsualizar las combinaciones de colores primarios y de acento para su sitio. Luego descargue su CSS personalizado de Material Design Lite usando el botón y simplemente reemplace el `material.min.css` con el personalizado.

Utilizando este método no podrás personalizar la combinación de colores de los elementos de MDL. Si desea personalizar el esquema de colores prefiera las bibliotecas alojadas en CDN o descargables. En este caso, utilice nuestra herramienta de personalización y previsualización.

iconos de material

Por esta razón, sólo consideraría el uso de las directrices de Material Design en una aplicación de iOS donde no entre en conflicto con las directrices de la interfaz humana de Apple, a menos que el elemento de Material Design proporcione una mejora significativa para el usuario final. Una de estas áreas es el movimiento/animación, que en mi experiencia se sirve mucho mejor de Material Design.

Material Design ofrece unas directrices increíbles basadas en la interacción con el usuario y en los amplios comentarios de los usuarios. Hay muchos sitios que incorporan varias características que promueve MD sin utilizar realmente las directrices completas de MD. A tener en cuenta: la diferencia entre aplicaciones y páginas web se está difuminando. A medida que las aplicaciones web progresivas toman más protagonismo compitiendo con las aplicaciones móviles nativas (las aplicaciones web tienen muchas ventajas), las aplicaciones y las páginas web (aplicaciones web) no serán necesariamente distinguibles como lo son ahora.

Material Design es genial para pensar en las funciones de diseño del futuro. Utilizar la inspiración del mundo material parece una progresión lógica. El DM utiliza el material del papel como inspiración. También hay lugar para el vidrio, el ladrillo, la madera, etc. Hay que pensar con originalidad. Al final, se trata de la usabilidad y la ACEPTACIÓN de los usuarios.

material design css

Por esta razón, sólo consideraría el uso de las directrices de Material Design en una aplicación de iOS donde no entre en conflicto con las directrices de la interfaz humana de Apple, a menos que el elemento de Material Design proporcione una mejora significativa para el usuario final. Una de estas áreas es el movimiento/animación, que en mi experiencia se sirve mucho mejor de Material Design.

Material Design ofrece unas directrices increíbles basadas en la interacción con el usuario y en los amplios comentarios de los usuarios. Hay muchos sitios que incorporan varias características que promueve MD sin utilizar realmente las directrices completas de MD. A tener en cuenta: la diferencia entre aplicaciones y páginas web se está difuminando. A medida que las aplicaciones web progresivas toman más protagonismo compitiendo con las aplicaciones móviles nativas (las aplicaciones web tienen muchas ventajas), las aplicaciones y las páginas web (aplicaciones web) no serán necesariamente distinguibles como lo son ahora.

Material Design es genial para pensar en las funciones de diseño del futuro. Utilizar la inspiración del mundo material parece una progresión lógica. El DM utiliza el material del papel como inspiración. También hay lugar para el vidrio, el ladrillo, la madera, etc. Hay que pensar con originalidad. Al final, se trata de la usabilidad y la ACEPTACIÓN de los usuarios.

Scroll al inicio
Ir arriba