Así diseñamos UI para Android con Material Design en 23 — Parte 2
Juntando las piezas
Notas preliminares: Esta es la segunda parte de la serie de posts enfocados en Material Design para Android usando Sketch, la aplicación que usamos en 23 para diseñar interfaces. Si aún no has leído la primera parte, te recomiendo hacerlo antes de continuar.
En esta parte hablaré de los elementos básicos para diseñar apps: colores, tipografía, iconos y componentes nativos. Todo esto en conjunto será una guía para quienes quieran iniciar o mejorar sus habilidades para diseñar Android en Sketch.
“We used Material’s principles as a guide rather than strict rules that must be followed to the letter.” — Fyza Hashim
Colores
En Material Design, los colores son el punto de partida para implementar el branding sin limitarse a elementos como el logo, además son la mejor forma para diferenciarse de otros productos dentro de la plataforma misma.
Aún cuando tu producto no tiene colores definidos, es muy fácil seleccionar unos con la paleta de Material Design. Google recomienda limitar la selección a tres tonalidades de la paleta primaria y un color de acentuación de la segunda paleta (los colores que comienzan con A).
A pesar de la importancia de los colores, Sketch no cuenta con una opción para importarlos y/o exportarlos, por lo que a veces resulta más fácil copiar los valores hexadecimales de los colores en la lista oficial aunque tiende a ser un proceso tedioso.
Uno de los aspectos que más valoro de Sketch es su basta comunidad en extensiones que dan valor al flujo de trabajo. Pero de todas las opciones que he visto hasta el momento, mi favorita es la que recientemente Roman Nurik, desarrollador y diseñador en Google, brindó a la comunidad: una paleta de colores flotante.
Usarla es muy sencillo. Basta con descargar la aplicación, instalarla y ¡bum! tenemos la hermosa paleta de colores Material Design a la mano. No es perfecta pero facilita la elección de colores e implementarlos en el proyecto.
Naturalmente existen otras soluciones, como la que propone hannah lee clonar la paleta directamente en los colores globales de Sketch para tenerlos listos en cualquier proyecto. Al final, lo importante es tener una paleta de colores bien definida para tu producto y poder trabajar libremente con ella.
Tipografía
Desde 2011, cuando Android 4.0 Ice Cream Sandwich fue lanzado, la tipografía en Android tomó una relevancia mayor. Roboto sustituyó a Droid Sans como la tipografía del sistema, marcando el inicio de una nueva era en el diseño para la plataforma.
Roboto es una gran tipografía diseñada y refinada para dispositivos digitales, que abarcan desde relojes hasta televisiones, con diferentes variantes (Roboto Condensed o Roboto Slab). Y una forma efectiva de implementar branding en Material Design es aprovechar la flexibilidad de las reglas usando la tipografía de marca en lugar de Roboto. ¿El secreto? Conjugar jerarquía, retícula base, opacidad y escalas recomendadas con la tipografía en cuestión.
“The baseline grid and scale recommendations within material design still apply, regardless of the typeface.” –Google Design
Como ya sabemos, los elementos visuales se acomodan en retículas basadas en cuadrados de 8dp. La excepción a la regla la tiene la tipografía que se alinea a grillas de 4dp. Esto significa que los espaciados entre párrafos deben basarse en múltiplos de 4.
Al no ser un experto en tipografía trato de apegarme al máximo a este tipo de reglas. El truco consistente en tener una guía de estilos tipográficos basados en los que da Material Design y modificarlos con la tipografía del producto. Una vez definida te darás cuenta lo fácil que es aplicarla en un producto.
A continuación les dejo algunos enlaces que profundizan más en el tema, sobre todo en cómo explotar al máximo el uso de tipografías en cualquier plataforma de diseño.
Iconos
La iconografía en Material Design conlleva muchos aspectos. En este post les cuento de 2 de los más importantes: definición y exportación. La parte “fácil” es la primera, la parte confusa es la segunda. Las diferentes densidades de pantalla en Android no ayudan a dejar esto claro, pero yo les ayudaré con eso.
En la fase de definición entra a escena The Noun Project, un sitio que comenzó como un proyecto para recopilar los iconos más comunes y que ahora, logrado su objetivo, es un repositorio de iconos de todo tipo. En 23 esta plataforma nos sirve más para referencia que para obtener los íconos, algo así como las búsquedas que haces en Google Images para asociar palabras con imágenes.
Normalmente, cuando los productos que diseñamos necesitan iconografía especializada recurrimos a paquetes de iconos o, en casos muy raros, iconografía diseñada por nosotros mismos. Si el producto no necesita iconos específicos usamos los que Apple y Google proveen para sus respectivas plataformas. Esto da algunas ventajas, como que la librería de iconos de Google te permita descargarlos listos para ser usados en el desarrollo del producto.
Por otro lado, si usas un paquete de iconos diferente o creas uno propio, debes exportarlos para que el desarrollador pueda usarlos en su proceso. Para eso recordemos un poco las densidades de pantalla en Android y sus tamaños.
La unidad base es MDPI, el equivalente a los assets 1x de iOS. Después, las medidas que nos importan actualmente son HDPI, XHDPI y XXHDPI. Es importante saberlo porque estos son los tamaños en los que exportaremos los iconos.
Una de las opciones para exportar es Android Asset Studio, una herramienta también desarrollada por Roman Nurik. No sólo sirve para exportar de forma correcta los iconos sino para hacer adecuaciones a sus tamaños y proporciones. Si aún trabajas con iconos 9-patch (please, stop!) también incluye una herramienta para crearlos de la mejor forma posible. La desventaja es que hay que trabajar icono por icono, además de que en algunas cosas ya se está quedando atrás.
En 23, la primera opción para entregar proyectos a los desarrolladores es Zeplin. Hasta ahora, es la mejor forma que hemos encontrado para exportar assets en diferentes plataformas (si conocen alguno mejor, no duden en dejar un comentario).
final_final_este_es_el_bueno_02_01_con_detallitos.sketch
Diseñar Material Design tiene su lado especial. Contrario a lo que se cree, el conjunto de reglas que abarca este framework visual no limita en absoluto al diseñador. Fue hecho para ser flexible y abierto, ayudando a mantener cohesión con base en fundamentos que cualquier diseñador debería tener en cuenta. Antes de llegar 23 sabía las reglas, pero fue aquí cuando realmente comencé a explorar su potencial.
Ahora es tu turno, los siguientes pasos van por tu cuenta. Pero si hay algún tema en específico que quieras que profundice, no dudes en preguntar.
¡Hasta la próxima!
No olvides visitar 23 Design para conocer más de nosotros.
