Así diseñamos UI para Android con Material Design en 23 — Parte 1
Preparando el canvas
Sketch es fantástico. Como diseñadores de productos digitales, se ha convertido en nuestra herramienta básica; el lápiz y papel del día a día. Lo amamos porque fue hecho precisamente para diseñar productos digitales, tanto el tradicional iOS como Android (novedoso para muchos diseñadores), así como la siempre amada-odiada web, por supuesto.
Ya sea que seamos diseñadores, desarrolladores o ambos, la idea de Sketch es facilitar la tarea al momento de crear prototipos en nuestro flujo de trabajo. Para lograrlo, configurar el entorno es esencial. La personalización ayuda a evitar que acciones simples retrasen el cumplimiento de tareas.
La idea con esta serie de publicaciones no es explicar la filosofía detrás de Material Design, sino cómo ejecutarla en un entorno óptimo entendiendo los conceptos clave. Un entorno que en 23 fuimos definiendo en los últimos 6 meses y que me gustaría compartir. Sugerencias (y críticas) al sistema son bienvenidas.
La cubeta de Legos
De entrada, Sketch incluye algunas herramientas útiles para diseñar en Android. La primera y más importante es el stickersheet que aparece como template desde Sketch 3.3. Este stickersheet es el mismo que Google brinda desde la sección Resources de Material Design y contiene prácticamente todos los componentes nativos, incluyendo grillas, tamaños, estados, estilos… Casi todo.
Para abrirlo es necesario ir a File → New From Template → Material Design. Verán que también existe el template Android Icon Design, del que más adelante platicaré.
Es importante poder copiar y pegar elementos para ahorrar tiempo; por ello, hay que tener abierto el template y el proyecto simultáneamente. Es como si tuviéramos una cubeta de Legos para construir una nave espacial. Además es útil para consultar rápidamente las guías visuales más básicas de Material Design (como sombras, espaciados o tamaños de los mismos componentes), sin tener que entrar a ellas.
Para los desarrolladores Android, muchos de estos elementos se crean usando Android Design Support Library, mientras que en web se utiliza Material Design Lite con elementos material. Aquí unos enlaces para saber más al respecto:
Artboards y unidades de medida
Continuando con la integración nativa que Sketch ya tiene con Material Design, nos encontramos con los artboards (Insert → Artboard). Dentro de la lista tenemos la sección Material Design que cubre 4 diferentes tamaños de pantalla: teléfonos con 360 x 640 dp (Sketch lo maneja en pixeles, ahorita explicamos la razón), tablets de 7 y 9 pulgadas y aplicaciones de escritorio.
Hagamos un paréntesis para explicar los pixeles de densidad-independiente (DIP o DP). Son el equivalente a los puntos en iOS y es la unidad de medida fundamental en Android. Fue creada para estandarizar una forma de medida, ya que Android tiene una gran cantidad de pantallas con densidades de pixeles muy variadas.
“Measuring and sizing things in DPs ensures your designs have a consistent physical size across devices of varying density.” — Google Design
La definición matemática es simple: 1dp = 1px @ 1x (donde 1x en Android es 160 dpi; la base). Es muy importante tener esto en cuenta al exportar assets (más adelante los detalles).
Una vez que conocemos la equivalencia de 1 dp, podemos saber el tamaño de las pantallas de cualquier dispositivo en pixeles de densidad-independiente:
dp = (tamaño en pixeles * 160 (1x — MDPI) / densidad de pantalla (1x, 2x, 3x…).
¿Y qué tiene que ver esto con los 360 x 640 dp que Sketch nos provee? Pues ese tamaño cubre la mayoría de los teléfonos actuales. Esto quiere decir que, aunque tengan diferentes tamaños, píxeles y densidades de pantalla, todos comparten la misma cantidad de dp en ancho y alto. Hagamos las matemáticas para comprenderlo mejor:
Moto G: (720 x 1280 px) * 160) / 320 dpi (2x — XHDPI)= 360 x 640 dp
Nexus 5: (1080 x 1920 px) * 160 / 480 dpi (3x — XXHDPI) = 360 x 640 dp
Galaxy S6: (1440 x 2560 px) * 160 / 640 dpi (4x — XXXHDPI) = 360 x 640 dp
La conclusión es que, sin importar el tamaño físico de un dispositivo, la relación entre los pixeles reales y su densidad determina el tamaño que tendrá cualquier elemento en Android.
Aquí algunos enlaces para mayor información del tema:
Grid base y líneas clave
Una vez que tenemos un artboard, es hora de sacar las reglas y escuadras para no perdernos en el diseño e implementación de componentes.
Uno de los mejores trucos para tener en cuenta, es la regla de los múltiplos de 8. Consiste en basar todas las medidas del diseño en múltiplos de 8 (con excepción de iconos y tipografía). Así nuestros grids serán de la base 8dp (pixeles para Sketch).
Hace unos meses, en 23 diseñamos la app de Toky para Android. El perfil de usuario es un buen ejemplo en el uso de esta regla. Las líneas clave marcadas en rosa (16 y 72 dp), están basadas en el grid de 8dp, creando la atmósfera natural de una aplicación nativa en Android.
- El grid de 8 dp se establece en las configuraciones de Grid, a 8 px por bloque y sin líneas gruesas (View → Canvas → Grid Settings).
Además del grid, también es necesario configurar las líneas clave (keylines) que nos servirán para diseñar layouts complejos, por ejemplo, listas. Las reglas de Sketch permiten agregar líneas guía fijas.
- Activamos las reglas desde View → Canvas → Show Rulers.
- Posando el puntero sobre las reglas agregamos tres reglas verticales a: 16dp, 72dp y 344dp (360–16).
En estos enlaces encontrarán más información de las líneas clave, el grid base de 8dp y una app fantástica que todo diseñador Android debe tener en su teléfono: Keyline Pushing, que traza grids encima de cualquier app que tengas instalada. Es excelente para analizar y probar diseños.
¡Fantástico! Ya tenemos nuestro lienzo listo para recibir amor.
En la segunda parte de la serie puedes conocer más a fondo sobre colores, tipografía e iconografía.
