El Google I/O 2018 ha sido un éxito en todos los aspectos y en todos los ámbitos que la compañía Google ha tocado en esta edición de la Keynote. Este post está enfocado a la parte más UX y de diseño, la cual tuvo un importante peso en todas las conferencias: 28, de las más de 380 actividades, fueron dedicadas al diseño, las cuales se dividen entre 20 sesiones, 4 app reviews y 5 office hours.


Imagen extraída de una de las Keynotes de Google.

Los temas más destacados fueron:

  • Flutter Apps: aplicaciones construidas con la nueva SDK de Google y que acoge al Material Design en su máxima expresión
  • El diseño en realidad aumentada
  • La evolución del Material Design 

Hoy profundizamos en este último punto, esencial para nuestro Design Team, así como en las nuevas herramientas que lo acompañan. Nuestro equipo de diseño se ha puesto manos a la obra y ha estado jugando con las herramientas que ha traído Google de la mano del Material Design. ¡Y esto es lo que nos pueden decir!

Material Design

“La marca se representa visualmente con colores, fuentes y formas”

Material, tal y como se presentó en la Keynote, es un sistema de diseño adaptable que unifica los componentes de Android y ayuda a los equipos a agilizar la construcción de experiencias digital de gran calidad. Componentes open-source, nuevas herramientas y nuevas guías de estilo son los tres grandes bloques que han evolucionado en esta nueva edición.


Los objetivos que pretendía cubrir Google con esta nueva edición son dos. Por un lado, mejorar el flujo de trabajo, es decir, hacer la experiencia de usuario más fácil de construir. Por otra parte, conseguir un sistema más adaptable y flexible: componentes y estilos se unen en uno solo. ¿Y cómo lo han hecho? Creando dos nuevas herramientas: Material Theme Editor y Material Gallery

Material Theme Editor

Esta herramienta, que se implementa como plugin en Sketch, tiene incorporada 4 plantillas base a partir de las cuales se puede empezar cualquier proyecto. Y es que ahí ¡está todo! Labels para texto, iconos, botones, elementos de navegación, etc. Todo ello dirigido desde un panel de control con el que se ajusta la paleta de colores del proyecto en cuestión. ¿Por qué? Porque desde ahí es donde se cambia en todos los componentes y, consecuentemente, en todo el proyecto. Cada uno de los elementos, desde el icono más simple a las estructuras ya preestablecidas, son símbolos, lo que en Sketch significa que puede estar en 100 pantallas que si este se modifica, el cambio se refleja en todas las pantallas dónde esté.


Desde el equipo de diseño de Slashmobility, recomendamos altamente esta herramienta porque:

  1. Ahorra cantidades infinitas de tiempo en cambios ¡el tiempo es oro!
  2. Los estilos no solo ya están establecidos, por lo que la UI a aplicar es más ágil, sino que ya son parte de la librería: solo hay que aplicarlas al diseño.
  3. Porque con un solo color identificativo, esta herramienta genera el resto de la paleta de color, para usar en los distintos estados de elementos como los botones, sin tener que plantearlos

MATERIAL GALLERY

“El trabajo compartido es más fácil”

Material Gallery es una herramienta que permite compartir, organizar y colaborar en el la fase de diseño de cualquier producto. Seis razones por las que nos encanta Gallery:

  • Con el plugin puedes subir y sincronizar las pantallas directamente desde Sketch.
  • Puedes crear accesos rápidos a los documentos relacionados con el proyecto, el briefing, alcance funcional, excel de estimación, usability testing, etc. ¡Todo centralizado en un único sitio!
  • Puedes ver el histórico de una pantalla, wireframe low fidelity, high fidelity, layout v1, layout v2… desde los primeros esbozos hasta el diseño final.
  • Invitar a otros a revisar o colaborar en el diseño sin necesidad de añadir un email, puedes compartir un enlace.
  • Material Gallery disponible para iOS y Android, puedes subir fotos y dejar comentarios para los demás colaboradores.
  • Modo Inspección, si subimos las pantallas con el Plugin de Material, podremos ver las distancias, medidas, colores, tipografía, etc. Todos los recursos necesarios para los developers.

 

 

 

 

 

 

En esta primera versión de Gallery, los specs todavía son mejorables, en el sentido que sea lo suficientemente potente como para sustituir  Zeplin, pero es solo cuestión de tiempo que Google mejore esta funcionalidad como para que valga la pena utilizarla en nuestro día a día y ¡es gratis!

En definitiva, Google ha dado nociones muy valiosas estos días en la Google I/O Keynote y ha hecho recordatorio de muchas otras, pero con la presentación de estas dos grandes herramientas, los ojos nos han hecho chiribitas… ¡y seguiremos jugando! Os mantendremos informados.

Nuestro Design Team, es el autor de este post.

Recommended Posts

Leave a Comment

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