Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Google Material Design
Webdesign

Material Design de Google: Actualizaciones, Mejoras y Nuevas Herramientas

by
Length:ShortLanguages:

Spanish (Español) translation by Betty (you can also view the original English article)

Vamos a hablar de lo nuevo, qué ha cambiado, y lo que se ha mejorado en Material Design más nuevo de Google.

Ver el Screencast

¿Qué es Material Design de Google?

Material Design es un lenguaje de diseño visual, desarrollado por Google en el 2014. Creció de una necesidad de tener más consistencia entre los productos de Google, multiplataforma. En tiempo, se desarrolló, fue lanzado como fuente abierta, y sus ideas continúan creciendo gracias a un gran número de colaboradores.

httpsmaterialio
material.io

Este año, en la Conferencia de desarrolladores de Google 2018 I/O, anunciaron una versión actualizada del Material Design. Según el equipo detrás de él, el Material es ahora:

"un diseño adaptable sistema – respaldada por el código de fuente abierta – que ayuda a los equipos crear experiencias digitales de alta calidad"

Material Design ya no es sólo un lenguaje de diseño. Evoluciona en un conjunto de herramientas destinadas a mejorar el flujo de trabajo de diseño y desarrollo. Vamos a empezar por mirar "Tematización de Material".

Introducción de Material para la Tematización

"Material Editor de Temas" es un plugin para Sketch y se le da (asumiendo que usted está un bosquejo y por lo tanto el usuario de Mac OS) un control total sobre colores, tipografía, componentes y más. Para descargarlo, cabeza encima al sitio Material y presione el botón prominente. Haga doble clic en el paquete a instalar, luego en el dibujo se puede acceder a través de Plugins > Material Design Material > Editor de Temas Abiertos...

Haga clic en Crear Nuevo Tema en el cuadro de diálogo que aparece, después de lo cual puede elegir entre una selección de temas predefinidos y Guardar.

selecting a new theme
Seleccionando un Nuevo Tema

Ahorro toma un momento, porque bosquejo esencialmente crea un nuevo documento, rellenar con los activos de Material Design y componentes, todo perfectamente arreglado en muestras, estilos, símbolos y páginas.

extensive symbols arranged well
La extensa lista de símbolos, organizado perfectamente

Colaborar y Compartir Con "Gallery"

Gallery es otra nueva característica Material, lo que le permite compartir y colaborar en sus diseños. Se trata de una plataforma en línea que puede acceder visitando https://gallery.io. Iniciar sesión usando tu cuenta de Google:

Para agregar proyectos a la galería, volver al bosquejo y vaya a Plugins > Material > Subir la Galería... Se le pedirá que seleccione un proyecto o agregar uno nuevo, lo mismo va para la colección que desea agregar. ¡Eso es todo! El proyecto está ahora disponible para compartir con los demás. Colaboradores pueden dejar comentarios e incluso inspeccionar elementos dentro de sus diseños, dándoles acceso a las dimensiones y detalles sin necesidad de bosquejar a sí mismos.

Los usuarios también se dará una referencia a la documentación para el componente están inspeccionando – ahora que es útil!

Diseño Fácil Con la Herramienta de Color de Material

La herramienta de Color es que oferta de Material Design para ayudarle a experimentar con combinaciones de colores y paletas en un entorno intuitivo. Visite https://material.io/tools/color/ para acceder a él.

Material Designs Color Tool

Haga clic en su camino alrededor de la interfaz de usuario para definir un color primario, un color secundario y otros detalles como su color primario y el texto en su secundario. Las vistas previas de darán actualizaciones en tiempo real para mostrar lo que parece.

También hay una pestaña de accesibilidad que le avisará de cualquier combinación de color que no cumplen con las pautas recomendadas de legibilidad.

Cuando usted está feliz con su combinación de colores que puede exportar a Android, iOS o la web (en la forma de una CodePen):

Material Design Color Tool export options
Opciones de Exportación de Herramienta de Color de Material Design 

Nuevos Componentes

Una lista completa de todos los componentes nuevos que Material tiene que ofrecer está disponible en el sitio web, pero aquí hay un par que considero especialmente interesante:

Inferior las Barras de Aplicación

Estos se utilizan para la visualización de navegación y acciones clave, en la parte inferior de las pantallas móviles.

Telones de Fondo

Telones de fondo son para los componentes que aparecen detrás de otras superficies, útil para la visualización de contenido contextual.

Banners

Entonces tenemos banners. Estos son componentes nuevos que muestran mensajes y acciones relacionadas.

Listas de Imágenes

Listas de imagen son también una nueva incorporación, aunque anteriormente eran conocidos como las poco menos versátil "listas de red".

Campos de Texto

Por último, tenemos los campos de texto. No nuevo exactamente, pero un reemplazo para la generación anterior y ahora disponible en sabores rellenas y contorno.

Conclusión

Bueno ahi la tenemos; un resumen rápido de novedades de la última iteración del Material Design de Google. Apenas es necesario decir, pero hay mucho más para aprender y tomar a bordo, así que echa un vistazo, buceo profundo y háganos saber lo que te impacta más sobre lo que es nuevo.

Enlaces Utiles

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.