Envío de Material Gráfico

Para garantizar un desarrollo web ágil y de calidad, es fundamental que el material gráfico se envíe correctamente organizado y en los formatos adecuados.

Las imágenes pueden enviarse en formato PNG (nosotros las convertimos a WEBP*) o directamente en WEBP optimizado: sin metadatos y con compresión al 80 % (sugerido). Todo el material debe entregarse en el tamaño exacto, a 72 dpi, y previamente controlado. Es común que lleguen con líneas blancas o transparentes de 1 o 2 px en los bordes, lo cual debe corregirse antes del envío.

Si una imagen es vectorial, debe enviarse en SVG + PNG, ambos recortados al tamaño real del lienzo o mesa de trabajo.

En lo posible, cada elemento debe entregarse por separado para facilitar la integración al sitio. El formato PNG es especialmente útil porque permite una edición posterior más eficiente.

Si el diseño fue realizado en FIGMA, necesitamos los gráficos ya exportados en los formatos correspondientes (PNG, SVG, etc.), con las medidas exactas. No realizamos exportaciones desde FIGMA.

IMPORTANTE: si se encuentra disponible debe enviarse el acceso a FIGMA o bien un archivo de Illustrator (AI editable) o un PDF con las secciones para poder tomar de referencia visual, copiar textos, etc.

Aclaración preliminar: el ancho total de un sitio web se conoce como "ancho de página", mientras que el ancho del cuerpo del sitio web se conoce como "ancho de contenido". Es importante tener en cuenta que estos términos pueden variar dependiendo del contexto y del lenguaje utilizado en el diseño web. En general, el ancho de página se refiere al tamaño horizontal de todo el sitio web, mientras que el ancho de contenido se refiere al tamaño horizontal del área donde se muestra el contenido principal del sitio web.

Imágenes de "ancho de página"

1920px de ancho por el alto proporcional. (Slides, Fondos, entre otros.)

SLIDES: se sugiere que midan 1920 x 700px, pero podrían medir 1920 x 750px, 1920 x 800px, o 1920 x 1080px...
Lo ideal es contar con versiones móviles de cada Slide para cargarlos solo en Móviles y no en Escritorio, por ejemplo: 768 x 400px*

*Nota: Aunque el ancho sugerido para un Slide Móvil es de 768px, aquellos que contengan texto deben garantizar su legibilidad incluso en una redimensión de hasta 300px de ancho. Los gráficos muy apaisados pueden perder legibilidad en móviles, por eso muchas veces se realizan 2, uno para Escritorio y otro para Móviles y los configuramos para que se muestren en un dispositivo o en el otro.

Ejemplo Slide Escritorio:

Ejemplo Slide Móvil:

FONDOS DE DISEÑO
Medida sugerida: 1920 x 1080px, 1920 x 1280px...

Imágenes de "ancho de contenido"

Medida sugerida: 1240px de ancho por el alto proporcional.
(Banners apaisados, Banners de Llamada a la Acción, entre otros.)

Un Banner de "Llamada a la Acción" se sugiere que mida 1240 x 300px, pero podría medir 275px de alto o menos.

Imágenes de los contenidos

Medida sugerida: 768px de ancho por el alto proporcional.
(Por ejemplo: Banners, íconos, entre otros.)

Un Banner se sugiere que mida 768 x 450px, pero podría medir 350px de alto o menos, o incluso ser cuadrado o vertical.

Galerías:
Las fotos de las galerías, recomendamos que midan 1240px de ancho por el alto proporcional.
Se sugiere evitar medidas inferiores a 1080px.

Imágenes Destacadas de Noticias:
Para mantener una apariencia coherente y garantizar una navegación fluida, es recomendable utilizar imágenes destacadas del mismo tamaño en todas las publicaciones.
Por ejemplo, una Imagen Destacada se sugiere que mida 1240 x 800px, pero podría ser incluso cuadrada.

Más info: https://zaid.com.ar/buenas-practicas-con-imagenes/

UI KIT Básico
Tener un UI Kit preestablecido antes de comenzar con el desarrollo de un sitio web ofrece numerosos beneficios. Actúa como una guía visual y funcional que asegura la coherencia y la eficiencia en el proceso de diseño y desarrollo.

Al definir previamente elementos como botones, tipografía y colores, se garantiza una apariencia uniforme en todo el sitio web. Esto mejora la experiencia del usuario y refuerza la identidad de la marca. Funciona como un lenguaje común entre diseñadores, desarrolladores y otros miembros del equipo. Facilita la comunicación y asegura que todos trabajen con los mismos parámetros y estándares.

Más info: https://zaid.com.ar/ui-kit-basico/

*WebP: cómo enviarlo bien para la web
Para uso web, siempre es mejor usar WebP lossy (calidad 80–90), salvo casos muy puntuales donde se necesite transparencia perfecta o máxima nitidez para detalles técnicos.

✅ WebP en modo lossless (sin compresión) genera archivos muy pesados, casi como un PNG, y no aporta ventajas reales salvo en transparencias complejas.
✅ WebP lossy (con pérdida) en calidad 80–90 mantiene una calidad visual excelente para imágenes de pixeles (raster) o vectoriales, reduciendo notablemente el peso, que es clave para la performance de la web.

👉 Si envían archivos en WebP lossy (80–90), nos ahorran el paso de recomprimir y revisar, y además mantienen mayor control sobre el resultado final.
👉 Si envían WebP lossless, suele ser tan pesado como un PNG; en ese caso, conviene que envíen directamente el PNG original y nosotros definamos el nivel de compresión más adecuado para la web.