10 cosas a tener en cuenta trabajando con Sketch & Zeplin: ¡Los desarrolladores te darán las gracias!
Has decidido empezar a utilizar Sketch y Zeplin, pero no sabes exactamente los beneficios de utilizar estas herramientas… Sigues teniendo la misma carga de trabajo y las mismas dificultades a la hora de comunicarte con el equipo de desarrollo. Te preguntas, ¿los desarrolladores no saben utilizar una herramienta tan simple como Zeplin?
Acabas de subir todos tus diseños a Zeplin y de repente recibes un mensaje de uno de los desarrolladores pidiéndote que exportes todos los iconos e imágenes y se los envíes en un .zip. Y te preguntas, ¿por qué no se los descargan directamente desde Zeplin? Te han dicho que vuelvas a subir una pantalla a Zeplin porque no pueden ver los márgenes entre los elementos y piensas, ¿Entonces para qué sirve esta herramienta?
Si esto es lo que te ocurre a diario, este artículo es para ti. Estas son las 10 cosas que te ayudarán a optimizar tu tiempo y discutir menos. Los desarrolladores te darán las gracias.
1. Tamaño de las mesas de trabajo
iOS
@1X: 375 x 667 px
Android
mdpi: 360 x 640 px
Web
¿En qué dispositivos se va a ver tu producto? Define los breakpoints y ten en cuenta los media queries que van a utilizar los desarrolladores. Habla con tu desarrollador si no sabes qué es esto.
1920 x 1080 px
1200 x 900 px
1024 x 768 px
320 x 480 px
2. Muestra el ‘responsive’
Sube una mesa de trabajo a Zeplin con el diseño responsive (de acuerdo a los breakpoints que has establecido previamente), es decir, muestra cómo se verá tu diseño en diferentes resoluciones de pantalla o dispositivos.
Sí, para ti es obvio que el diseño se verá centrado en una pantalla de 1920 x 1080 px, pero los desarrolladores no son adivinos.
Responsive
3. Tamaño de las imágenes rasterizadas
Da el máximo tamaño a las imágenes rasterizadas para evitar la pérdida de calidad cuando el diseño se vea en pantallas con resoluciones mayores. Por ejemplo, si estás trabajando en una app para iOS establece el tamaño de las imágenes a @3x. Si no haces esto, recibirás un mensaje del desarrollador del tipo:
Envíame las imágenes en tamaño grande porque se ven pixeladas cuando veo el diseño en un iPhone 7.
4. Haz exportable el icono completo, pero también sus elementos individuales
Los desarrolladores pueden estar interesados en exportar uno o varios de los elementos de tu icono, o el icono completo. Así que haz todos los elementos exportables por separado y en grupo.
5. Haz exportable las imágenes por separado del texto
Imagina un banner que está formado por una imagen, un texto y un filtro. Los desarrolladores tienen que poder exportar:
Solo la imagen.
Solo el filtro.
Imagen + texto.
Imagen + filtro.
Todo el banner.
6. ‘Line-height’
El interlineado del cuerpo de texto tiene que ser al menos 6px mayor que el tamaño de tu fuente. La excepción puede ser en títulos o textos overlay sobre imagen donde buscas impactar al usuario potenciando el grafismo de un determinado elemento.
Además, revisa los interlineados de las diferentes cajas de texto. Ten en cuenta que el desarrollador va a seleccionar una caja de texto y copiar y pegar el interlineado. Configura el mismo interlineado en todas las cajas de cuerpo de texto para guardar coherencia en tu diseño.
7. Ancho en cajas de texto
Configura el ancho de una caja de texto con una sola línea a auto en Sketch. Esto permitirá a los desarrolladores ver los márgenes del texto con respecto a los límites de la pantalla.
8. Elimina el área de seguridad de los iconos
Algunos iconos que importas en Sketch tienen un margen de seguridad que indica el espacio mínimo que tiene que haber entre ese icono y cualquier elemento de la interfaz. Elimina el área de seguridad para permitir que los desarrolladores descarguen sólo el icono y puedan ver el margen que hay entre el icono y el siguiente elemento de la interfaz.
9. Estados de los botones
Has hecho tu diseño en Sketch y has subido todas las pantallas a Zeplin. Ahora viene la pregunta del desarrollador.
¿Cuál es el comportamiento del icono, texto, botón, qué ocurre cuando el usuario hace ‘hover’, clic…?
Crea una mesa de trabajo nueva con todos los estados para los diferentes componentes que estás utilizando en la interfaz, puedes llamarla Specs.
10. Cómo organizar las pantallas en Zeplin
Zeplin te permite organizar las pantallas en diferentes tags. Puedes agrupar tus pantallas por contenido (por ejemplo, las secciones de una página web) o por funcionalidades.
Dentro de cada tag (sección o funcionalidad) ordena las pantallas siguiendo el flujo del usuario. Así, la primera pantalla en Zeplin será la primera pantalla que ve el usuario cuando accede a tu producto o servicio.
¿Qué más?
No pierdas el tiempo creando una guía de estilo, puedes añadir los colores y tipografías que estás utilizando directamente desde Zeplin (pestaña Styleguide).
PD: ¡No olvides invitar al equipo de desarrollo a tu proyecto de Zeplin!
Si quieres saber más, únete a mi clase en Skillshare sobre cómo construir prototipos en inVision usando Sketch y Craft plugin:
Espero que esta información te haya sido útil. Gracias por leerme. :)