User Experience Design Portfolio of Martina Pérez

Artículos en español

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?

01.png

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

02.png

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

03.png

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

04.png

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.

05.gif

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:

  1. Solo la imagen.

  2. Solo el filtro.

  3. Imagen + texto.

  4. Imagen + filtro.

  5. 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.

06.png

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!

Espero que esta información te haya sido útil. Gracias por leerme. :)


Publicado originalmente en Medium en español

martina perez