10 cosas a tener en cuenta al trabajar con Sketch & Zeplin. ¡Los desarrolladores te lo agradecerán!

Después de sopesar los pros y los contras de Sketch & Zeplin antes de comenzar a usarlos, parecía que había muchos más pros que contras, pero aún tiene la misma carga de trabajo y dificultades para comunicarse con el equipo de desarrollo. Te preguntas si los desarrolladores no saben cómo usar una herramienta tan simple como Zeplin.

Acaba de subir todos sus diseños a Zeplin y de repente recibe un mensaje de uno de los desarrolladores pidiéndole que exporte todos sus iconos e imágenes y los envíe en un archivo zip. Y te preguntas, ¿por qué no los descargan directamente de Zeplin? Le dijeron que cargara una captura de pantalla a Zeplin porque no pueden ver los márgenes entre los elementos ... y usted piensa, entonces, ¿para qué sirve esta herramienta?

Si una de estas cosas te está sucediendo, este artículo es para ti. Estas son las 10 cosas que lo ayudarán a aprovechar al máximo su tiempo y encontrar un medio feliz con los desarrolladores.

1. Tamaño de las mesas de trabajo

iOS

  • @ 1X: 375 x 667 px

Androide

  • mdpi: 360 x 640 px

Web

¿En qué dispositivos se verá su producto? Defina los puntos de interrupción y tenga en cuenta las consultas de medios que los desarrolladores van a utilizar. Hable con su desarrollador si no sabe qué es.

  • 1920 x 1080 px
  • 1200 x 900 px
  • 1024 x 768 px
  • 320 x 480 px

2. Cómo funcionan los puntos de interrupción en diseños receptivos

Cargue una obra de arte en Zeplin con el diseño receptivo (de acuerdo con los puntos de interrupción que ya ha establecido), en otras palabras, comparta cómo se ve su diseño en diferentes resoluciones de pantalla y dispositivos.

Cree que está claro que el diseño estará centrado horizontalmente a resoluciones más altas, como 1920 x 1080 píxeles, pero los desarrolladores no son lectores de la mente.

Compartir el diseño receptivo

3. Tamaño de imágenes ráster

Asigne el tamaño máximo a las imágenes ráster para evitar la pérdida de calidad cuando el diseño se muestre en pantallas con resoluciones más altas. Por ejemplo, si está trabajando en una aplicación para iOS, configure el tamaño de las imágenes en @ 3x. Si no hace esto, recibirá un mensaje del desarrollador como el siguiente:

Envíeme las imágenes de gran tamaño porque se ven pixeladas cuando veo el diseño en un iPhone 7.

4. Haga exportable el grupo de iconos, pero también los objetos individuales por separado

Los desarrolladores pueden estar interesados ​​en exportar uno o más de los elementos de su ícono, o el ícono completo. Por lo tanto, haga que todos los artículos se puedan exportar por separado y como grupo. Más adelante en Zeplin, el equipo de desarrollo podrá exportar activos individuales, así como el grupo completo.

5. Hacer exportables las imágenes, no el texto

Imagine un banner que contiene una imagen, un texto y un filtro, y el filtro no se puede construir con CSS. Luego, los desarrolladores deben poder exportar:

  1. Solo la imagen
  2. Solo el filtro
  3. Imagen + filtro

6. Altura de línea

La altura de la línea del texto del cuerpo tiene que ser 6px más que el tamaño de fuente actual, la excepción puede ser títulos o textos superpuestos donde desea impactar al usuario al potenciar los gráficos de un elemento.

Luego, verifique las alturas de línea de los diferentes cuadros de texto. Tenga en cuenta que el desarrollador seleccionará un cuadro de texto y copiará y pegará el alto de línea. Establezca la misma altura de línea en todos los cuadros de texto para guardar coherencia a lo largo de su diseño.

7. Ancho del cuadro de texto

Establezca el ancho de un texto de una sola línea en "auto". Esto permitirá que su equipo de desarrollo vea el margen entre el texto y otros elementos de la interfaz, o los límites del diseño de la pantalla.

8. Elimine el área alrededor del icono.

Algunos de los iconos que importa en Sketch tienen un área circundante, lo que es bueno para exportar el activo, pero es difícil para el desarrollador cuando intenta verificar el margen entre los objetos en Zeplin. Elimine este espacio para permitir que los desarrolladores puedan verificar el margen entre el icono y el siguiente elemento de la interfaz.

9. Estados del botón

Has hecho tu diseño en Sketch y has subido las pantallas a Zeplin. Ahora surge la pregunta del desarrollador.

Cuál es el comportamiento del ícono, texto, botón, qué sucede cuando el usuario se desplaza al hacer clic, ...

Cree una nueva ilustración con todos los estados para los diferentes componentes que está utilizando en la interfaz. Puede nombrarla "Especificaciones".

10. Cómo organizar las pantallas de diseño en Zeplin

Zeplin le permite organizar las pantallas por etiquetas. Puede ordenar los diseños de sus pantallas por contenido (por ejemplo, las secciones de su sitio web) o funcionalidades.

Ordene las pantallas siguiendo el flujo del usuario en cada una de las etiquetas (sección o funcionalidad). De esa manera, la primera pantalla en Zeplin será la primera pantalla en su sitio web o aplicación.

¿Qué más?

No pierdas el tiempo creando una guía de estilo, puedes agregar los colores y las tipografías directamente desde Zeplin (pestaña Guía de estilo).

PD: ¡No te olvides de invitar al equipo de desarrollo al proyecto de Zeplin!

Espero que esto ayude, ¡avíseme si tiene alguna pregunta!

Únase a mi clase de Skillshare sobre cómo construir prototipos en inVision usando el complemento Sketch & Craft para obtener más consejos: https://skl.sh/2Y4hj6l