El Material Design es un conjunto de principios de diseño lanzado por Google en 2014. Aunque tiene sus raíces en el sistema operativo Android, muchos diseñadores han tomado su simplicidad visual y practicidad de navegación para integrarlas en sus propias prácticas de diseño. Conocer los fundamentos del Material Design puede darte nuevas perspectivas sobre cómo abordar tu propio trabajo.
Vivimos en un mundo material
El Material Design se basa en cómo interactuamos físicamente con nuestro entorno. Estas interacciones se utilizan como punto de partida para crear diseños atractivos y una navegación fluida.
Tradicionalmente, hemos consumido contenido a través de materiales impresos. El Material Design toma la experiencia táctil y visual del papel y la traduce a píxeles: bordes nítidos y rectos, y elementos visuales dispuestos en capas para lograr un diseño concreto. Navegar por el Material Design es más sencillo porque es intuitivo; o al menos, eso dicen los diseñadores de Google.
El Material Design utiliza sombras paralelas, colores llamativos y múltiples capas para resaltar y organizar el contenido. Y aunque incorpora muchas líneas rectas, no está limitado por una rigidez estricta; de hecho, si eres usuario de Android, probablemente ya estés viendo más curvas por todas partes. En su lugar, utiliza el movimiento con la clara intención de guiar al usuario e inspirar acciones.
Puedes consultar más sobre estos principios de diseño en las propias palabras de Google sobre el Material Design, pero se pueden resumir en estos tres conceptos principales:
- El material es la metáfora
- El enfoque es audaz, gráfico e intencional
- El movimiento aporta significado
El Material Design gira en torno a la experiencia móvil
El Material Design surgió del Android de Google con la experiencia móvil como eje central. No solo define el aspecto visual en dispositivos móviles, sino que también organiza el contenido y estructura la navegación. Elementos como la navegación inferior hacen que el uso con una sola mano sea práctico y sencillo, mientras que la navegación anidada, las pestañas y los menús laterales han simplificado y agilizado la navegación en los sitios.
Siguiendo el principio de ser "intencional", tiene sentido que los botones en el Material Design sean sencillos. Por lo general, son circulares y cuentan con un icono claro que define su función. Antiguamente, los botones estaban vinculados directamente a contenido específico diseñado para incitar a una acción, pero las nuevas prácticas permiten que los botones se adapten siempre que encajen en el contexto de la página.
En la aplicación Play Books de Google, al desplazarte a la derecha de la opción "Leer ahora", aparece el botón "Mi biblioteca", donde encontrarás todos tus libros descargados. Aunque también puedes acceder desde el menú de hamburguesa en la parte superior, el botón "Mi biblioteca" es una opción más evidente. La intención del botón es clara, simplifica la navegación y está directamente vinculada al contexto.
El Material Design ha dado el salto del móvil al escritorio, influyendo en el diseño web. Echemos un vistazo a ocho sitios web que utilizan Material Design; quizás te inspires para aplicar esta filosofía de diseño en tu propio trabajo.
1. Rumchata
¿Te gusta el ron? ¿Y la horchata? ¿Sí? Entonces Rumchata podría ser la bebida alcohólica perfecta para ti. Es posible que haya visto este sitio web demasiado temprano por la mañana, porque echar un vistazo a estas mezclas azucaradas casi me provoca resaca. Afortunadamente, el Material Design da lugar a un diseño de buen gusto que no me dejó con dolor de cabeza ni con antojo de comida grasienta.
El diseño de Rumchata evoca un ambiente relajado de vacaciones. El movimiento suave de las hojas de palma es parte de su atmósfera tropical. La botella de Rumchata se sitúa en el centro, destacando sobre las capas de color y texturas.
El enfoque aquí está en todas las bebidas que puedes preparar con Rumchata. El sitio recuerda a hojear tarjetas de cócteles o un libro de recetas. Puedes buscar por ingredientes o por ocasión. La experiencia de navegar por las recetas se siente como algo que harías en tu propia cocina.
Es un ejemplo brillante de cómo el Material Design toma algo que hacemos habitualmente y lo traduce en una experiencia digital efectiva. Y sí, algunas de estas recetas de cócteles tienen una pinta bastante buena.
2. Tombow
Tombow es un fabricante japonés de bolígrafos elegantes y otros accesorios de oficina. Su tema de diseño incorpora blancos papel y sombras para capturar el papel fundamental que desempeñan sus productos en la oficina.
Pero las cosas se ponen realmente interesantes en la página dedicada a su dispensador de cinta correctora; sí, este objeto olvidado del armario de suministros de oficina es el protagonista de esta aventura. Unos pocos clics (o un poco de scroll) te llevan a una ilustración de los engranajes y mecanismos internos del dispositivo.
Cada clic nos hace sentir que estamos descubriendo estos detalles dinámicos, en lugar de que nos los tiren a la cara mediante grandes bloques de contenido estático. La demostración del dispensador de cinta es tan ingeniosa que su impacto es memorable.
El sitio web de Tombow es un escaparate de sus productos de oficina de alta gama. Y el Material Design nunca nos deja olvidar su importancia y funcionalidad en el mundo real.
Este diseño no es una superficie plana. Los productos destacan como si estuvieran sobre un escritorio frente a ti; hay dimensión en estas herramientas de oficina. Es este guiño a la fisicidad de los objetos del mundo real lo que le da al Material Design un toque más natural.
La fisicidad y la abstracción digital se unen en la página con una serie de marcadores de colores que flotan. Al pasar el cursor sobre un marcador específico, este se mueve como si lo hubieras tocado con el dedo. Pero este movimiento también activa los círculos que salpican el diseño para mostrar el color de ese marcador. Combinar una acción física para activar algo que solo es posible en un medio digital es una de las fortalezas del Material Design.
3. Botanist
Botanist es una empresa japonesa que fabrica jabones y otros productos de belleza. Su imagen de marca se basa en la sencillez del blanco y negro, con mucho espacio negativo entre las líneas rectas de su diseño.
Este diseño aireado pone sus productos de belleza en primer plano. Las imágenes de alta calidad, combinadas con una cuidadosa variación en el tamaño de las fuentes, evitan que los productos se pierdan en un campo estático de blanco y negro. La mayoría de los productos están fotografiados en un espacio habitable en lugar de en un vacío blanco y estéril. Las sombras y otras capas mantienen el diseño dinámico.
Las microinteracciones y sus pequeños movimientos hacen que estos productos salten de la página y capten tu atención. Esto ofrece un poco más de movimiento que el típico efecto de pasar el ratón y ampliar.
4. Honig Studios
Honig Studios es una productora nominada al Emmy. Su presencia en la web es reflexiva y está llena de detalles divertidos.
Claro, algunas de las funciones son un poco novedosas, ¿pero cuánta gente va a pasar realmente más de 30 segundos jugando al juego de pong integrado? ¿Y cuántos tienen gafas 3D a mano para disfrutar del modo 3D?
Un principio del Material Design es aplicar algo del mundo físico al digital. Honig Studios utiliza este principio en su texto principal: "El contenido se encuentra con la tecnología". Al hacer scroll hacia abajo, se hace añicos en triángulos voladores que revolotean como papel al viento.
Con colores de fondo llamativos y un ligero sombreado en objetos como teléfonos y tabletas, adquieren una presencia física que salta de la pantalla.
Honig Studios utiliza los fundamentos del Material Design con un esquema de color sencillo pero agradable y su propio toque de experimentación. No es una experiencia uniforme, pero es atractiva. Y el contenido nunca pierde el enfoque.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
5. Google Play
Al hablar de Material Design, ¿por qué no ir directo a la fuente y echarle un vistazo a una aplicación de Google? Google Play es una verdadera destilación de Material Design llevada al escritorio.
Es un diseño de cuadrícula simple, un sello distintivo de Material Design. Al pasar el cursor sobre las selecciones musicales, se proyecta una sombra. Esta interfaz limpia hace que encontrar música que se ajuste a tu estado de ánimo sea un proceso eficiente.
Material Design nos demuestra que incluso un reproductor de música digital no tiene por qué ser una experiencia complicada. Al adoptar el principio de "audaz, gráfico e intencional", Google Play ha eliminado acciones y movimientos innecesarios. Todo lo que queda es una funcionalidad fluida.
6. Waaark
Waaark es una agencia de diseño francesa y su sitio web es un híbrido moderno de movimiento e imágenes estilizadas. Las ilustraciones se asientan sobre el mismo plano 2D, pareciendo accesorios de una simulación al estilo Sims. Esto, combinado con un diseño en bloques, podría haber resultado en una experiencia estática y sin emociones. Pero hay muchas microinteracciones y efectos animados para darle vida al asunto.
Pasar el cursor sobre los bordes de los bloques los curva como una banda elástica y hacer clic hace que el fondo se arremoline como si fuera pintura. Esta transición líquida añade mucho interés al diseño; son efectos como estos los que forman parte del encanto de Material Design.
7. Birmingham Airport Holiday Inn
No sé. Nunca he pensado en alojarme en un hotel cerca de un aeropuerto. Parecen un refugio bienvenido para un vuelo cancelado o un viaje de negocios rápido, pero no un... destino. El sitio web del Birmingham Airport Holiday Inn te hará cambiar de opinión sobre los alojamientos cerca del aeropuerto.
Material Design tiene como objetivo tomar nuestras experiencias del mundo real y darles una aproximación digital. Este diseño nos ofrece un recorrido virtual por la selección de habitaciones del hotel. Y la fotografía realmente captura el ambiente del hotel: la mayoría de las imágenes están tomadas a la altura de los ojos, en un ligero ángulo.
Es como si estuvieras asomándote por la puerta de cada habitación. Todo está bien presentado, luciendo fresco y limpio. Sí, incluso esas colchas, las pesadillas de... bueno... muchos de nosotros.
Las fotos surgen de un diseño por lo demás plano compuesto por una paleta de colores simple de blanco, negro y verde. Los detalles importantes se superponen a las imágenes y una iconografía agradable complementa el texto. Obtienes todo lo que necesitas saber en un diseño que se siente fácil de usar.
8. Google Calendar
Google Calendar es otra de esas herramientas de "cómo vivíamos sin ella" que nos ha dado la web. Google facilita añadir eventos, recordatorios y citas, ya sea que lo uses en el móvil o en el escritorio.
Es un diseño de cuadrícula, estándar para cualquier calendario, pero es muy fácil de usar. Es un diseño escaso y casi minimalista, pero sus líneas limpias, el uso inteligente de las sombras y los bloques despejados maximizan su usabilidad.
Perfecciona tus habilidades en Material Design
Por supuesto, la mejor manera de dominar Material es trabajar dentro de sus cuidadosas limitaciones. Y afortunadamente, Google ha lanzado un plugin para Sketch llamado Material Theme Editor, que está diseñado, según Google, para ayudarte a producir trabajos en Material que aún se ajusten a tu marca individual, lo cual ha sido una gran crítica a Material hasta la fecha.
Si prefieres saltarte la fase de diseño estático y pasar directamente a Webflow, ¿podemos recomendarte este kit de interfaz de usuario de Material Design del usuario de Webflow Marcel Mölter?
Material Design tiene los componentes básicos para una mejor experiencia de usuario
Como diseñadores, hay muchas escuelas de pensamiento diferentes de las que podemos obtener inspiración. Algunas filosofías de diseño pueden entrar en conflicto con otras (te estamos mirando a ti, brutalismo). Pero parte de ser un gran diseñador es la capacidad de encontrar lo bueno de diferentes prácticas de diseño y combinarlas en un diseño que sea fresco y fácil de usar. Material Design está aquí para recordarnos que un diseño puede centrarse en la practicidad, sin dejar de tener espacio para la creatividad y la experimentación.
¿Tienes algún sitio favorito que utilice principios de Material Design? Nos encantaría saberlo en los comentarios.
