Así diseñamos UI para Android con Material Design en 23 — Parte 2
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 , 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).
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.
medium.comhttps://medium.com/p/e31caf2f6a12
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.
“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).
medium.comhttps://medium.com/p/50b8b4a56b05final_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.