Guía de handoff para un diseño pixel perfect. Parte I
A lo largo de mi carrera he tenido la oportunidad de colaborar con muchos diseñadores UI/UX, y me he fijado en algo muy curioso de su forma de trabajar: no siguen guías establecidas para completar los proyectos. Si entras como desarrollador nuevo en una empresa, tus compañeros pueden pasarte un enlace a GitFlow o GitHub Flow y en 10 minutos sabrás todo lo necesario sobre la gestión del repositorio. Los desarrolladores podemos añadir linters a un proyecto y todo el mundo seguirá la misma guía de estilo de código. Pero ¿qué le puedes dar a tu diseñador para asegurarte de que te entrega todo lo que necesitas? Para eso precisamente sirve esta guía de handoff.
No te pierdas las otras partes:
Parte 2: grid, diseño responsive, animaciones y prototipos
Software
Photoshop tiene muchos plugins útiles para agilizar el trabajo, pero recomendamos Sketch o Adobe XD. Estas herramientas combinan las ventajas de los gráficos vectoriales con la facilidad para ajustar las propiedades de las imágenes rasterizadas. Son especialmente útiles al diseñar aplicaciones móviles para dispositivos con alta densidad de píxeles. En estos casos no tendrás que preocuparte por el perfil de color, tus archivos de proyecto pesarán menos y podrás aprovechar muchas funciones que te ayudan a trabajar de forma más eficiente.
Nombres de los assets
Usa guiones en los nombres de tus assets
Google lo recomienda para todos los archivos, incluidos HTML, PDF y .jpg. Aquí tienes un vídeo de Google Webmasters sobre el tema. Aunque en el backend se puede renombrar todo, lo mejor es mantener los nombres coherentes.
- Usa solo caracteres latinos.
- No uses espacios.
- Usa solo minúsculas.
- Usa los sufijos @2x o @3x para preparar imágenes para dispositivos con distintas densidades de píxeles.
- Aplica las mismas reglas a los nombres de las carpetas.
Optimización de imágenes
Habrá quien diga que esto es tarea del desarrollador. Sin embargo, desde mi punto de vista, si quieres que el diseño se implemente exactamente como lo has creado, asegúrate de que el desarrollador no tome decisiones sobre aspectos visuales como la calidad de las imágenes o el nivel de compresión.
Intenta usar SVG
Si usas SVG para iconos o ilustraciones, no tienes que preocuparte por los dispositivos con distintas densidades de píxeles ni por preparar versiones @2x y @3x. Otra ventaja es que los gráficos SVG ocupan menos espacio y se comprimen muy bien con gzip en el servidor.
Piénsatelo dos veces antes de enviar a un desarrollador un asset de más de 1 MB
Si lo haces, lo más probable es que pase una de estas dos cosas. La primera: que el desarrollador no tenga en cuenta el peso de las imágenes y la web tarde demasiado en cargar. La segunda: que comprima demasiado la imagen y aparezcan artefactos, pérdida de calidad o cambios en el perfil de color. No te escaquees pasándole el trabajo al desarrollador: la calidad visual del proyecto es responsabilidad tuya. Echa un vistazo a esta guía de optimización de imágenes de Google y ten en cuenta lo siguiente:
- Usa .jpg para imágenes sin transparencia y cuando puedas sacrificar calidad a cambio de peso.
- Para obtener la mejor calidad y soporte de transparencia, usa .png.
- Para animaciones, usa formatos de vídeo o GIF. Ten en cuenta que el GIF es un formato muy antiguo, así que un archivo de vídeo tendrá más calidad y pesará menos.
Herramientas de optimización
Usa herramientas de optimización como Kraken, ImageOptim u Optimage. Herramientas como Photoshop y Sketch guardan por defecto los metadatos de la imagen y no usan los algoritmos óptimos para que la imagen se vea igual ocupando menos espacio.
Kraken ofrece varias opciones en su modo experto para optimizar tus imágenes.
Define qué nivel de compresión es aceptable para las imágenes no estáticas
Prueba distintos niveles de compresión en Photoshop o pide a tu desarrollador que te enseñe cómo va a procesar las imágenes, para decidir qué relación entre calidad y peso puedes aceptar. A continuación tienes una tabla de referencia con los pesos aceptables para distintos tipos de imágenes.
No hagas sprites
Un sprite es un archivo .jpg, SVG o .png que contiene todos los gráficos necesarios de la web y ayuda a evitar peticiones adicionales al servidor para cargar assets. Es un truco de optimización útil, pero no intentes hacer los sprites por tu cuenta. El desarrollador los generará automáticamente, porque no solo necesita el sprite, sino también la posición y el tamaño de cada elemento dentro de él. Si le pides que mida cada elemento a mano, le harás sufrir de lo lindo. La generación automática de sprites mantiene los iconos actualizados y te ahorra crear versiones @2x o @3x. Aunque no uses sprites SVG, te librará del engorro de añadir imágenes nuevas a un sprite ya existente.
SVG
Convierte el texto de los SVG a curvas; si no, obtendrás objetos de texto con la fuente por defecto (opción "crear contornos" en Adobe Illustrator).
Comprueba que no haya una imagen en base64 insertada dentro del SVG. Puede aparecer cuando intentas exportar como SVG una imagen rasterizada.
Optimiza el SVG eliminando toda la información innecesaria con SVGOMG. Normalmente, un archivo SVG incluye por defecto metainformación (como título y descripción), código formateado en lugar de minificado en línea, grupos sin usar o contenedores vacíos. Puedes eliminar todo eso sin perder calidad con SVGOMG.
Revisa el SVG en un navegador antes de añadirlo a tus assets. Así te aseguras de que lo has exportado bien y de que se renderiza como esperabas. Podrás detectar algunos fallos, como un alto o un ancho sin definir, o problemas de renderizado, antes que el desarrollador. Usa solo valores enteros para el ancho, el alto y la posición de los elementos.
Favicon
- Prepara dos archivos con dimensiones distintas.
- Llama al primero favicon.png y dale un tamaño de 32x32. Todos los navegadores modernos admiten .png para los favicons, así que no hace falta convertirlos a formato ico.
- Llama al segundo favicon-180x180.png y dale un tamaño de 180x180 para los iconos en móvil.
Muchos artículos en internet dicen que hay que preparar un montón de favicons en distintos tamaños, como 16x16, 24x24 o 48x48. No te preocupes por eso: 32x32 y 180x180 funcionan bien en la mayoría de los casos. Además, los navegadores redimensionan el icono existente si es necesario. Y no olvides pasar también los favicons por las herramientas de optimización de imágenes.
