BRIEF MKT

La regla de oro es que el sitio no aloja los videos directamente (como archivos brutos), sino que los reproduce a través de Google Drive o, preferiblemente, YouTube.

Especificaciones para Videos

1. Formato y Compresión

• Contenedor: MP4 (es el más compatible y estándar).

• Códec de video: H.264 (máxima compatibilidad con navegadores).

• Códec de audio: AAC (estéreo).

• Bitrate: Entre 5 y 8 Mbps para 1080p es suficiente para web.

2. Resolución y Relación de Aspecto

• Estándar (Horizontal): 1920 x 1080 px (1080p). Es el balance ideal entre calidad y peso.

• Relación de aspecto: 16:9 (panorámico). Evita formatos cuadrados o verticales a menos que sea una sección muy específica, ya que el Sitio deja franjas negras a los lados en sus contenedores estándar.

3. Peso del Archivo

• Límite recomendado: Menos de 50 MB si el video es corto (30-60 segundos).

• Nota crítica: Aunque permite archivos grandes, un video pesado tardará en "bufferear" (cargar) para el usuario final. Si el video es largo (más de 2 min), lo ideal es que lo suban a un canal de YouTube (como oculto si no quieren que sea público) e inserten el link.

 Optimización para Responsive

Este Sitio ajusta el reproductor automáticamente, pero para que el video se vea bien en móviles:

• Eviten detalles pequeños: En pantallas de celulares, los textos pequeños dentro de un video no se leen.

• Miniatura (Thumbnail): Es vital que generen una imagen de portada (JPG de 1280 x 720 px) atractiva, ya que es lo primero que se ve antes de darle al play.

• Vídeos de fondo (Background):  NO permite videos de fondo con reproducción automática (autoplay) de forma nativa en el banner. Si necesitan ese efecto, se suele usar un GIF de alta calidad (aunque pesa mucho) o un código insertado de YouTube en bucle.

Resumen para el equipo de Marketing

Característica + Especificación Recomendada

FormatoMP4 (H.264)

Resolución1920 x 1080 (Full HD)

Relación de Aspecto16:9

FPS (Cuadros)24 o 30 fps (evitar 60 fps para web)

Peso< 50 MB (idealmente)

Tip Pro: Si el video es para que se reproduzca en bucle y no tiene sonido, pídeles que lo exporten directamente sin pista de audio. Esto reduce considerablemente el peso del archivo sin perder calidad visual.

Especificaciones Técnicas para Imágenes 

Para garantizar que el sitio cargue rápido (SEO) y se vea bien en cualquier dispositivo, sigan estas directrices:

1. Banner Principal (Encabezado)

Es la parte más crítica porque es totalmente responsive (el sitio recorta los bordes según la pantalla).

• Tamaño recomendado: 1920 x 1080 px (Relación 16:9).

• Zona Segura (Safe Area): Mantener el contenido importante (logos, texto, caras) en el centro de la imagen (un área de 800 x 400 px en el medio).

• Comportamiento: el Sitio utiliza un ajuste de "anclaje". Si el diseño tiene elementos en los bordes, es probable que desaparezcan en versiones móviles.

2. Imágenes de Cuerpo / Contenido

• Ancho estándar: 1200 px (para secciones de ancho completo).

• Logotipos: 400 x 100 px (formato horizontal) o 512 x 512 px (cuadrado para el favicon).

• Iconos de marca: 512 x 512 px.

3. Calidad y Formato

• Formatos preferidos: WebP (es el estándar actual para web por su alta compresión sin pérdida de calidad). Si no es posible, usar JPG para fotos y PNG para gráficos con transparencia.

• Resolución: 72 dpi (no es necesario más para web).

• Peso del archivo: Intentar que ninguna imagen supere los 200 KB. Los banners grandes no deberían pesar más de 500 KB.

Consideraciones para Diseño Responsive

El Sitio estira o recorta las imágenes dependiendo de si el usuario entra desde una PC, Tablet o Smartphone. 

1. Eviten texto incrustado en la imagen: Es mejor subir la imagen limpia y usar el cuadro de texto sobre ella. Así, el texto siempre será legible y escalará correctamente.

2. Contraste: Si van a poner texto blanco encima, la imagen debe tener un filtro oscuro o ser lo suficientemente limpia para que no afecte la legibilidad.

Resumen para el equipo de Marketing

Elemento + Tamaño Sugerido (px) + Formato + Notas

Banner (Hero) 920 x 1080 - WebP / JPG - Centrar elementos clave.

Imágenes de sección 1200 x 800 - WebP / JPG - Proporción 3:2 o 4:3.

Logotipo Altura mín. 100px - PNG (transp.) - Formato horizontal preferible.

Favicon 512 x 512 - PNG / ICO - El icono que aparece en la pestaña.

1. Especificaciones Técnicas: Imágenes

Necesitamos que todas las imágenes sean entregadas en formato WebP (preferible) o JPG/PNG optimizado, a 72 dpi.

Elemento   +   Tamaño (px)  +  Propósito  + Notas

Banners (Hero) 1920 x 1080 - Encabezados de página - Importante: Mantener el contenido clave en el centro (área segura de 800x400px).

Imágenes Cuerpo - 1200 x 800 - Secciones de contenido - Relación de aspecto 3:2 o 4:3.

Logotipo Altura mín. 100px - Identidad - Formato PNG transparente.

Favicon  512 x 512  - Icono de navegador - Diseño simplificado, legible a tamaño pequeño.

Botones / Iconos 400 x 400 - Call to Action (CTA) - Estilo coherente y fondo transparente.

2. Especificaciones Técnicas: Video 

Los videos se alojarán en Google Drive/YouTube para su inserción.

• Formato: MP4 (Códec H.264).

• Resolución: 1920 x 1080 px (1080p).

• Peso máximo: 50 MB (para carga rápida).

• Thumbnail: Incluir una imagen de portada estática por cada video (1280 x 720 px).

• Sin Audio: Si el video es para bucle de fondo, exportar sin pista de audio para reducir peso.

3. Lineamientos de Diseño (UX/UI)

Para que el sitio se vea moderno y profesional, solicitamos seguir estas pautas:

• Zona Segura Responsive: recorta los bordes de las imágenes en dispositivos móviles. Evitar colocar texto o logos importantes cerca de los marcos de la imagen.

• No Texto Incrustado: Preferimos que las imágenes de fondo no tengan texto (este se agregará de forma nativa en la plataforma para asegurar legibilidad y SEO).

• Consistencia de Color: Utilizar exclusivamente la paleta de colores institucional (Proveer códigos Hexadecimales: #000000).

• Estilo Iconográfico: Todos los iconos deben pertenecer a la misma familia (ej. todos lineales o todos rellenos).

Entrega de Materiales

• Nomenclatura: Nombre_de_seccion_tipo_de_activo (ej: inicio_banner_principal.webp).

• Plataforma de entrega:   AQUI

💡 Nota para el equipo:

Este Sitio es una herramienta de diseño basado en bloques. El éxito visual dependerá de la calidad de los activos y de respetar las "zonas seguras" para que nada se corte en móviles. 

¡Gracias por el apoyo!