• 0
      1. Tu carrito está vacío.
    • artículo(s)0,00
agosto 3, 2020
Posted in diseño web
GUIA BRANDING

Recursos para tu Identidad Visual

Recursos para UX y Diseño Web

Recursos para Visibilidad y Marketing Digital

Recursos para SEO

Recursos para Publicidad online y Redes Sociales

Material design es una normativa de diseño enfocado en la visualización del sistema operativo Android, además en la web y en cualquier plataforma. Desarrollado por Google y anunciado en la conferencia Google I/O en junio de 2014.

 

¿De donde salió?

Google previamente realizó diseños para cambiar las interfaces de sus aplicaciones para móviles. El proyecto fue llamado Hera

​ Más adelante fue renombrado comoQuantum Paper’. Para el diseño los desarrolladores se inspiraron en la tinta y el papel para crear este lenguaje de diseño.

Material se trata de un diseño más limpio, en el que predominan animaciones y transiciones de respuesta, el relleno y los efectos de profundidad tales como la iluminación y las sombras.

 “A diferencia del papel, el diseño Material se puede ampliar y redimensionar de manera inteligente. Material Design tiene superficies físicas y bordes’’ – El vicepresidente de diseño de Google, Matías Duarte.

¿En qué se basa Material Design?

El nombre viene porque está basado en objetos materiales. Piezas colocadas en un lugar y con un movimiento determinado.

Se construye un lenguaje visual donde se recogen los principios básicos del ‘buen diseño’ contando con las nuevas tecnologías.

Se trata de un diseño con la profundidad, superficies,bordes, sombras y colores tienen un papel primordial.

Google Material Design tiene como objetivo guiarse por las leyes de la física. Donde las animaciones son lógicas, los objetos puedan superponerse pero nunca atravesarse.. etc

 Google Design

Componentes de Material Design

A continuación, se enumera un listado sobre los componentes que ofrece material design a los desarrolladores:

  • Barras en la parte superior e inferior para las aplicaciones donde se ubica el menú.
  • Fondos para diferenciar las interfaces de la aplicación.
  • Banners.
  • Botones tanto para la navegación como para elecciones del usuario.
  • Tarjetas.
  • Chips.
  • Tablas para representar datos.
  • Diálogos.
  • Divisores de contenido. 
  • Listado de imágenes.
  • Listas de elementos.
  • Menús.
  • Menú lateral.
  • Navegación a través de raíles. 
  • Selectores de fechas.
  • Indicadores de progreso.
  • Controles de selección.
  • Botones para compartir enlaces, editar o eliminar elementos.
  • Botones deslizantes.
  • Elementos de tabulación.
  • Campos para recoger textos.
  • Herramientas para modificar textos informativos cuando el usuario realiza acciones como el hover. 

 

Iconos de Material Design

Al igual que con los componentes, material design ofrece a los desarrolladores un amplio número de iconos que pueden ser utilizados en las aplicaciones para web, iOS y Android. 

Dichos iconos son ofrecidos con distintos tipos de formas:

  • Iconos rellenos.
  • Iconos con contorno.
  • Iconos redondeados.
  • Iconos de dos tonos.
  • Iconos con formas de puntas. 

 

Guía para la accesibilidad

Material Design ofrece a los desarrolladores una guía estructurada para la accesibilidad que se basa en los principios de limpieza, robustez y especificación. 

  • El principio de limpieza ayuda a los usuarios a navegar a través de diseños de estructuras limpias con diferentes llamadas a la acción.
  • El principio de robustez se basa en que el diseño de la aplicación se debe adaptar a distintos tipos de usuario.
  • El principio de especificación se basa en que las tecnologías deben resolver la necesidad al usuario en función del elemento con el que el usuario acceda a la web, como por ejemplo, a través de teclados diseñados específicamente para gente invidente. 

Para ello, se tiene en cuenta el tipo de tecnología utilizada, la navegación, el orden en el que se muestran los elementos que tienen el foco activo, los colores y el contraste, el layout y la tipografía, los tipos de imagen y los sonidos. 

 

Material Design Y Material.io

Material Design  se lanzó con un objetivo claro: unificar los criterios estéticos y funcionales basados en procesos y experiencias en torno al diseño de Google– para la creación de la interfaz de sistemas operativos.

Por lo que, Google creó una nueva web como plataforma donde recopilar las herramientas y recursos que ayuden a diseñar más productivos e inspiradores.

Con el nombre de: Material.io

«Esta web, además de construir una nueva identidad visual para la iniciativa Material Design, servirá de apoyo a nuestra última guía visual y a los nuevos lanzamientos mediante todo tipo de recursos, desde herramientas hasta elementos a utilizar» – Nicholas Jitkoff, uno de los colaboradores de design.google.com

 

¿Cómo los vemos en Android?

Podemos resumirlo en 3 partes:

  • Elementos ordenados e imágenes claras

Hablamos de un diseño con tipografía clara, colores e imágenes llamativos para no perder el foco, y un sentido del orden y la jerarquía muy marcado.

 

  • Luz y sombras sensación de jerarquía

La luz y las sombras son elementos clave. Una buena iluminación, nos da los indicios de cómo se comportará un elemento y en qué nivel se encuentra.

 

  • Movimiento, la mejor forma de guiar al usuario

Nos encontramos ate otro elemento clave. PE: un elemento que parpadea significa que trata de llamarte la atención, un elemento que se contrae es que se acaba de cerrar.

Todos los movimientos se crean en una determinada dirección.

 

Diseño para todas las pantallas

Material Design es multiplataforma, esto quiere decir, que pueden hacer uso de su diseño los smartphones, tablets, televisores…

Este diseño ha sido creado pensando en todos los sistemas no solo Android, también las páginas web pueden hacer uso del diseño.

A lo largo de éste tiempo ya hemos podido disfrutar de las aplicaciones con elementos de Material, pero una de las críticas que más tuvo, es que parecían todas iguales, pero según vayan los desarrolladores y diseñadores entendiendo Material Design, es ahí cuando aparecen los verdaderos trabajos originales.

 

 

Ejemplo uso Material Design

WhatsApp web

Es uno de los mejores ejemplos de web Material Design que se pueden observar. No solo porque todos los elementos han sido construidos con este diseño y con esta tecnología, si no porque además representa perfectamente lo que pretende Google, trasladar la experiencia móvil a la web, siendo esta última un reflejo de lo que ocurre en Android.

whatsapp webInbox

Por otro lado, tenemos a Inbox de Google, se trata de la alternativa a gmail. Nos encontramos ante otro servicio que consigue aprovechar Material Design para mejorar su funcionalidad.

Han añadido menús laterales, botones flotantes, opciones desplegables…. Básicamente una aplicación convertida en web muy fácil.

inbox

 

 

Material Design es el cambio más importante de Android 5.0 Lollipop.

Es un cambio que define en parte la estrategia de los grandes de Google.

Recursos para construir tu Identidad Visual

+ Microsoft Fluent Design System

Fluent Design es el sistema de diseño de Microsoft. Conoce sus elementos, reglas y muchos ejemplos aplicados.

Descarga gratis nuestro ebook: ”Guía práctica para Vender Online”

Hemos desarrollado una guía completa de estos pasos. Incluye cuestiones de estrategia, como por ejemplo los diferentes modelos de negocio disponibles, cómo crear una estrategia de marketing y qué datos analizar. Puedes descargar el ebook gratis aquí:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Get in Touch
newsletter

Suscríbete al newsletter sobre ecommerce y transformación digital

Tendencias, consejos
y lo último en tecnologías
para vender online.

Además, te regalamos el primer capítulo del libro
“Conecta tu negocio. La transformación digital de los canales de venta”

newsletter
Get in Touch
Contact
conecta-logo-blanco-retina

Producto

Info

Soporte

Conecta tu Negocio.

Branding

En HUB 360 encontrarás toda la tecnología y servicios para tu estrategia de comercio electrónico.

Ecommerce

Integra tu ecommerce con tu ERP sistema de gestión y todos tus canales para vender online.

Analytics

Los cuadros de mando de BI Studio son tu herramienta de Business Intelligence de última generación.

922-014-341

Proyecto Cofinanciado por el Fondo Europeo de Desarrollo Regional. Beneficiario: Conecta Software Soluciones SLU. Nº expediente: PI2019010001. Inversión Aprobada: 6.444,80 €. Comienzo: 17/10/2018. Finalización: 16/10/2019. El presente proyecto tiene como objetivo el desarrollo de un software conector que automatiza la generación de catálogos virtuales para que la empresa pueda ofrecer en su Tienda online productos con una amplia descripción y con imágenes que hagan la experiencia del usuario más rica y completa.

© 2020 TODOS LOS DERECHOS RESERVADOS. CONECTA SOFTWARE

Contact