Material Design en tu página web

Material Design en tu página web

Hace algún tiempo, Google mostró una nueva propuesta de diseño para sus aplicaciones y sitios web llamado Material Design. Se trata de un nuevo lenguaje de diseño que une lo clásico con la innovación y la tecnología. ¿Ya lo conoces? Si la respuesta es no, sigue leyendo.

¿Qué es Material Design?

Material Design es una guía completa para el diseño visual, interactivo y de movimiento en plataformas y dispositivos. A fin de usar material design en tus apps para Android, se deben seguir las pautas definidas en su especificación.

Así mismo, se deben usar los nuevos componentes y estilos disponibles en la biblioteca de compatibilidad de material design.

Ahora bien, como lo mencionamos al principio, Material Design es un estilo creado por Google. Actualmente ha sido implementado en la mayoría de sus aplicaciones.

Como es el caso en Gmail y Drive en sus versiones para ordenador y dispositivos móviles. Hay muchos sitios que ya comenzaron a copiar esta tendencia debido al gran éxito que ha tenido.

Básicamente, Material Design busca hacerse intuitivo y dinámico para el usuario. Así como adaptarse a cualquier pantalla en donde el que lo usa, tendrá siempre el control.

material-design-ejemplos Material Design en tu página web

Para aprovechar las características de los materiales, como el estilo de los widgets de IU estándar, y a fin de optimizar la definición de estilo de tu app, aplica un tema basado en material a tu app.

Reglas del Material Design seguir para su desarrollo

Para desarrollar esta tendencia hay toda una serie de reglas que deben seguirse. Las cuales son las siguientes:

Simplicidad y elegancia

Material Design fue bautizado de esa manera debido a que su diseño está basado en objetos materiales. También, piezas colocadas en un lugar y con un movimiento determinado.

  • Profundidad
  • Superficies
  • Bordes
  • Sombras
  • Colores

Los elementos antes mencionados son los principales de la receta para crear este diseño. El cual intenta aproximarse a la realidad, algo que podría parecer difícil en el mundo virtual.

Ahora bien, las características más importantes del Material Design son las siguientes:

  • La tipografía clara
  • Elementos ordenados
  • Los colores
  • Las imágenes llamativas
  • El buen uso de la luz y sombra

Además, el movimiento juega un papel muy importante en la interfaz. Por ejemplo, un objeto que parpadea significa que quiere llamar la atención o uno que se expande indica que se acaba de abrir. Todos estos movimientos deben crearse en una dirección determinada, según la guía del Material Design.

Un diseño para todas las pantallas

Aunque Google desarrolló este tipo de diseño especialmente para sus aplicaciones móviles de Android es multiplataforma. Es decir, que está disponible para distintos dispositivos, como lo son:

  • Tablets
  • Smartwatches
  • Todos los Smartphone
  • Smart TV
  • Todas las páginas web

Material Design tiene sus propias normas para cada detalle y se mantienen para cada tipo de pantalla. Ese es su punto fuerte, la versatilidad con la que cuenta.

Si eres usuario de Android, ya puedes disfrutar de muchas aplicaciones con este diseño. Aunque aún hay algunas fallas, los desarrolladores realmente lo están intentando y cada vez hay más apps con esta interfaz.

Material Design ha sido criticado debido a que la mayoría de sitios y aplicaciones que lo han desarrollado se parecen. Esto simplemente se debe a que en esta fase inicial se han utilizado los modelos más básicos.

Pero seguramente a medida en que los diseñadores comiencen a entender más la idea de Google serán más originales.

Funciones de apoyo

Android ofrece las siguientes funciones para ayudarte a crear apps de material design:

  • Un tema de app de material design para diseñar todos tus widgets de IU
  • Widgets para vistas complejas, como listas y tarjetas
  • Nuevas API para sombras y animaciones personalizadas

Para ofrecer a tus usuarios una experiencia familiar, usa los patrones de UX más comunes del material:

  • Promueve la acción principal de tu IU con un botón de acción flotante (FAB).
  • Muestra tu marca, navegación, búsqueda y otras acciones con la barra de la app.
  • Muestra y oculta la navegación de tu app con el panel lateral de navegación.
  • Usa uno de los muchos otros componentes materiales para el diseño y la navegación de tu app, como barras de herramientas que se contraen, pestañas, una barra de navegación inferior y mucho más. Para verlos todos, consulta el catálogo de componentes de material design para Android

material-design-ejemplos Material Design en tu página web

Además de las propiedades X e Y, las vistas en Android tienen una propiedad Z. Esta nueva propiedad representa la elevación de una vista, que determina lo siguiente:

  • El tamaño de la sombra. Las vistas con valores Z más altos proyectan sombras más grandes.
  • El orden de dibujo. Las vistas con valores Z más altos aparecen encima de otras vistas.

Las nuevas API de animación te permiten crear animaciones personalizadas para respuestas táctiles en controles de IU, cambios en el estado de las vistas y transiciones de actividades.

Estas API te permiten:

  • Responder a los eventos táctiles en tus vistas con animaciones de respuestas táctiles.
  • Ocultar y mostrar vistas con animaciones con efecto revelar circular.
  • Alternar entre las actividades con animaciones personalizadas de transición de actividades.
  • Crear animaciones más naturales con movimiento curvo.
  • Animar los cambios en una o más propiedades de vista con animaciones de cambio de estado de las vistas.
  • Mostrar animaciones en los elementos de diseño de listas de estado entre los cambios de estado de las vistas.

Para saber más…

Si quieres saber más del Material Design, te dejamos la documentación oficial de Google, además de un video muy interesante en donde podrás ver los distintos elementos del nuevo estilo. ¿Qué piensas del Material Design? ¿Te gustaría desarrollar una app o un sitio con sus características?

¿Te interesa desarrollar un software o plataforma digital para tu negocio o empresa?. Nosotros podemos ayudarte. ¡Contáctanos!, estaremos para escucharte en lo que requieras y/o necesites.

Si te interesa saber más de temas como éste, software, marketing digital, en muchos temas más que te serán de mucha utilidad. Te invitamos a que visites nuestro blog personal.

 

Deja un comentario