Hermosas implementaciones de Material Design en aplicaciones móviles

Publicado: 2021-08-23

Muchas personas en estos días buscan hermosas implementaciones de Material Design en aplicaciones móviles para inspirarse.

Sí, Material Design llegó y cambió la historia del diseño y durante los últimos dos años fue bastante popular en el diseño de aplicaciones móviles y hay una gran cantidad de hermosas implementaciones de Material Design en aplicaciones móviles.

Pero antes de eso, entendamos qué es Material Design y por qué se ha convertido en el lenguaje de diseño más popular y exitoso.

¿Qué es el diseño de materiales?

Material Design es un lenguaje de diseño desarrollado en 2014 por Google. Ampliando los motivos de "tarjetas" que debutaron en Google Now, Material Design hace un uso más liberal de diseños basados ​​en cuadrículas, animaciones y transiciones receptivas, relleno y efectos de profundidad como luces y sombras.

A partir de 2015, la mayoría de las aplicaciones móviles de Google para Android habían aplicado el nuevo lenguaje de diseño, incluidos Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox.

Todas las aplicaciones de la marca Google Play y, en menor medida, el navegador Chrome y Google Keep. Las interfaces web de escritorio de Google Drive, Docs, Sheets, Slides e Inbox también lo han incorporado.

La implementación canónica de Material Design para interfaces de usuario de aplicaciones web se llama Polymer.

Consiste en la biblioteca Polymer, un shim que proporciona una API de componentes web para navegadores que no implementan el estándar de forma nativa, y un catálogo de elementos, incluida la "colección de elementos en papel" que presenta elementos visuales de Material Design.

El sistema, que se enfoca en diseños basados ​​en cuadrículas, efectos de transición y profundidad, pronto se abrió paso en las aplicaciones de Android y llevó el sistema al estándar de diseño de iOS.

Los principios del diseño de materiales

Señales visuales inspiradas

Google usa el término "realidad táctil" para describir su filosofía de diseño, porque las superficies y los bordes dentro del diseño de materiales están inspirados en estudios de papel y tinta de la vida real.

Esto ayuda a los usuarios a comprender visualmente la interfaz digital en su pantalla sin ninguna dificultad. El diseño basado en la realidad hace que los objetos en la pantalla sean reconocibles y fáciles de interactuar.

Estética atrevida

Las opciones de color en el diseño de materiales son audaces y deliberadas. Los llamativos esquemas de color funcionan con técnicas fundamentales de diseño basadas en impresión para sumergir al usuario en la experiencia.

Se utilizan espacios en blanco intencionales, imágenes de borde a borde y tipografía grande para enfatizar las acciones del usuario. De esta forma, el usuario comprende rápidamente el propósito y la funcionalidad de la interfaz en su pantalla.

Publicación relacionada: Errores más comunes en el diseño de aplicaciones móviles

Significado hecho a través del movimiento.

En lugar de animaciones artificiales y mecánicas, el movimiento en Material Design parece fluido y natural. Google recomienda hacer esto de diferentes maneras:

  • Aceleración y desaceleración naturales: para evitar movimientos no naturales, los elementos de una página deben acelerar y desacelerar suavemente. Los arranques, paradas y cambios de dirección bruscos son molestos y distraen al usuario.
  • Continuidad visual: una transición entre dos estados visuales debe ser suave y sin esfuerzo para que el usuario no se desvíe. Demasiadas campanas y silbatos cuando un sitio web o una aplicación se mueven de una página a la siguiente son innecesarias.
  • Tiempo jerárquico: los elementos que contienen el contenido más importante deben enfatizarse colocándolos en el camino más fácil de seguir para el ojo. En otras palabras, es importante llamar la atención sobre elementos importantes.
  • Coreografía coherente: los elementos animados no deben cambiar de forma aleatoria, ya que pueden distraer. En cambio, deben viajar en caminos ordenados que tengan sentido.

Material Design no solo crea orden, crea orden con propósito y significado. Es una expresión sensorial de la marca de Google.

Si encuentra compra, podría ser la primera amenaza seria para el aparente monopolio de Apple sobre la experiencia de usuario sublime. Como devoto del iPhone, debo confesar que por primera vez comencé a lanzar miradas de soslayo al modo de Android.

La especificidad aturdidora de Material Design es una respuesta a dos hechos:

  • Si es posible que un desarrollador arruine una interfaz de usuario, lo hará.
  • La alternativa al buen diseño no es no tener diseño, es mal diseño.

Ahora, estas son algunas de las implementaciones más hermosas de Material Design en aplicaciones móviles.

Quién puede implementar Material Design mejor que quienes lo crearon. Google Calendar es una de las implementaciones más hermosas de Material Design en aplicaciones móviles. Con más de 1.000.000 de descargas, seguro que hace la fiesta.

calendario de Google

Para empezar, la aplicación de Google finalmente eliminó el diseño skeuomorphic convencional que usan la mayoría de las aplicaciones de calendario que imita el diseño de un planificador físico.

Ya no hay restricción por la necesidad de anotar nuestro horario en un papel. El calendario de Google le brinda un diseño vertical y coloca el día actual en la parte superior de la página.

De esta manera, solo verá los próximos días y eventos. Los días en los que no pasa nada se condensan y esto agiliza aún más la experiencia para mostrarte solo lo que es realmente útil.

Este único cambio en la interfaz permite al mismo tiempo que el usuario permanezca en el centro de la experiencia para que la interfaz de usuario se mueva a su alrededor. Agregue un poco de desplazamiento de paralaje y tendrá una aplicación realmente genial que combina.

Evernote

Evernote es a menudo elogiado por su versión del diseño de materiales y es un ejemplo llamativo de las hermosas implementaciones de Material Design en aplicaciones móviles.

La aplicación tiene un esquema de color fuerte y consistente en todas partes y está tan bien diseñada como funcional. Los íconos indican de manera clara y eficiente si se trata de una nota de texto, una nota escrita a mano o una foto que tomará.

El ícono del Elefante es simple y elegante, mientras que el sitio web, iOS y las aplicaciones de Windows 10 también están cuidadosamente diseñados y presentados.

Salud de Microsoft

Microsoft Health es en realidad uno de los mejores ejemplos en Play Store.

La aplicación está diseñada para funcionar con el rastreador de ejercicios Band y muestra todas sus estadísticas en un diseño vertical simple junto con íconos planos blancos. Cuando haga clic en uno de estos encabezados, el panel se 'abrirá' para revelar sus estadísticas.

La interfaz de usuario es excelente para permitirle obtener una descripción general de un vistazo y, al mismo tiempo, tener la opción de profundizar más si es necesario, lo cual es un sello distintivo de un buen diseño de aplicaciones.

Fabuloso: Motívame

Mucha gente piensa que Fabulous: Motivate Me es la implementación de diseño de materiales más precisa y profundamente pensada en aplicaciones móviles.

La aplicación explora nuevos principios de diseño de materiales en todas las formas normales con sus imágenes nítidas y planas y colores llamativos, pero también tiene algunas de las animaciones más atractivas en Play Store.

La lista no estaría completa sin la aplicación móvil de Facebook Live.

La aplicación es un ejemplo mínimo, pero efectivo, de Material Design. Utiliza el sombreado de una manera que normalmente no se ve; usando sombras claras en lugar de oscuras para proporcionar profundidad.

Hace un uso interesante de la iconografía, la animación y el diseño de interacción, aspectos clave de Material.