Ficha Técnica Elementos Visuales E-commerce

Banner completo

(ancho pantalla completa)

• Tamaño por imagen (ancho x alto) = 1920 px x la altura deseada (recomendada: a partir de 325 px)

• Resolución: 72 dpi

• Color mode: RGB

• Formato: PNG - JPG (para web)

• Peso por imagen: máximo 300KB, ideal menor.

• Recomendación: textos (deben ser cortos), botones e información principal de la imagen debe diseñarse ubicándose a centro manera que pueda adaptarse bien a la versión responsive

Banner centrado

• Tamaño por imagen (ancho x alto) = 1664 px x la altura deseada (recomendada: a partir de 325 px)

• Resolución: 72 dpi

• Color mode: RGB

• Formato: PNG - JPG (para web)

• Peso por imagen: máximo 300KB, ideal menor.

• Recomendación: textos (deben ser cortos), botones e información principal de la imagen debe diseñarse ubicándose a centro manera que pueda adaptarse bien a la versión responsive.

Diseño x 2 imágenes

• Tamaño por imagen (ancho x alto) = 824 px x la altura deseada

• Resolución: 72 dpi

• Color mode: RGB

• Formato: PNG - JPG (para web)

• Peso por imagen: máximo 200KB, ideal menor.

Diseño x 3 imágenes

• Tamaño por imagen (ancho x alto) = 544 px x la altura deseada

• Resolución: 72 dpi

• Color mode: RGB

• Formato: PNG - JPG (para web)

• Peso por imagen: máximo 200KB, ideal menor.

Diseño x 4 imágenes

• Tamaño por imagen (ancho x alto) = 404 px x la altura deseada

• Resolución: 72 dpi

• Color mode: RGB

• Formato: PNG - JPG (para web)

• Peso por imagen: máximo 200KB, ideal menor.

Diseño x 5 imágenes

Centrado o carrusel con botones

(este puede estar compuesto por 3 o 4 imágenes también)

• Tamaño por imagen (ancho x alto) = 264 px x la altura deseada

• Resolución: 72 dpi

• Color mode: RGB

• Formato: PNG - JPG (para web)

• Peso por imagen: máximo 200KB, ideal menor.

Si se realiza una opción de diseño x 5 imágenes con productos destacados o nuevos o las + vendidos se utilizará la misma imagen de producto detallado original de 640 x 810 px manteniendo su proporción visualizandose cada imágen de 264 x 334 px.

En caso de que el diseño sea un carrusel, este puede ir con o sin botones (en este caso se puede hacer automático)

Diseño x 6 imágenes

• Tamaño por imagen (ancho x alto) = 264 px x la altura deseada

• Resolución: 72 dpi

• Color mode: RGB

• Formato: PNG - JPG (para web)

• Peso por imagen: máximo 200KB, ideal menor.

Si se realiza una opción de diseño x 6 imágenes con productos destacados o nuevos o las + vendidos se utilizará la misma imagen de producto detallado original de 640 x 810 px manteniendo su proporción visualizandose cada imágen de 264 x 334 px. Estas podrían ser estáticas o cambiarse de manera automática.

Diseño combinado

Este incluye la posibilidad de combinar los formatos anteriormente descritos, siempre y cuando la combinación se ajuste a la grilla de 12 columnas, es decir, puede combinarse por ejemplo el tamaño de imagen del diseño por 2 imágenes con el tamaño de diseño x 4 imágenes o x 6 imágenes, haciendo secciones más dinámicas en el diseño.

Si se desean utilizar las imagenes o fotos de producto detallado en un diseño combinado, debe tenerse en cuenta mantener la proporción del tamaño original de 640 x 810 px.

En la imagen ejemplo se muestran algunas opciones.

Foto PRODUCTO detallado

(Foto modelo o producto)

• Tamaño por imagen (ancho x alto) = 640 x 810 px

• Resolución: 72 dpi

• Color mode: RGB

• Formato: PNG - JPG (para web)

• Peso por imagen: máximo 200KB, ideal menor.

Esta se adaptará proporcionalmente a miniaturas en detalle, carruseles, catálogo, detalle de compra y demás diseños donde estas se van a visualizar.

Imagen COLOR detalle producto (Picker)

• Tamaño por imagen (ancho x alto) = 60 x 60 px

• Resolución: 72 dpi

• Color mode: RGB

• Formato: PNG - JPG (para web)

• Peso por imagen: máximo 3KB

Videos

• Formato: Mp4/H264 (formato mp4 especial para internet)

• Preset (calidad de salida): 720p HD ó Match Source - Adaptive Low Bitrate

• Peso: máximo por video 2MB

• Programa recomendado para ajustarlo: Adobe Media Encoder

• Tamaño video de producto detallado: 640 x 810 px

• Tamaño video para banners o otro tipo de diseño: debe tenerse en cuenta la medida de la pieza anteriormente descrita y realizarse con la altura deseada determinada para la misma.

Estos videos deben ser cargados a una plataforma como YouTube o Vimeo (ocultos si la marca no desea que queden visibles en dicha plataforma) y de ahí poder llevarlos al sitio para mejorar tanto el performance general del sitio y el del video como tal.

Cómo nombrar las imágenes

Esquema para nombrar las imágenes de producto

La estructura de cómo nombrar las imágenes es de libre decisión de acuerdo a la estrategia de la marca. Sin embargo a continuación describimos algunos detalles importantes para tenerse en cuenta en este el proceso:

1. El nombre debe ser único para cada imagen. Esto puede lograrse simplemente variando uno de los elementos descriptivos que se incluyan.

2. Se recomienda, por SEO, que la imágen comience por un nombre genérico (ejemplo: camiseta, brazier, pantie) seguido un nombre fantasía o específico de la marca. Comenzar el nombre de un producto con códigos, ya sea SKU o REF, no es lo más recomendable ya que afecta directamente el SEO, al no ser conceptos de búsquedas comunes.

3. En el nombre del producto pueden incluirse toda la información que deseen: si es para hombre o mujer, color, número de REF o SKU, tipo de la foto, la marca a la que corresponde, etc.

4. Cada uno de los datos debe estar separado por un "guión bajo" "_" para que pueda cargarse e identificarse correctamente a nivel técnico, es importante tener presente que no se deben incluirse caracteres especiales como tildes, eñes, ampersand &, entre otros).

A continuación compartimos algunas estructuras ejemplo recomendadas:

NombreGenerico_NombreFantasia_Genero_Color_00000_TipoFoto_Marca.(png o jpg)

NombreGenerico_NombreFantasia_00000_TipoFoto.(png o jpg)

NombreGenerico_NombreFantasia_01_Marca_00000.(png o jpg)

NombreGenericoNombreFantasia_TipoFoto_Marca.(png o jpg)

Esquema para nombrar las imágenes de diseños o banners generales

La estructura de cómo nombrar las imágenes de diseños o banners generales es de libre definición, sin embargo a continuación realizamos algunas recomendaciones para tenerse en cuenta en este el proceso:

1. El nombre debe ser único para cada imagen. Esto puede lograrse simplemente variando uno de los elementos descriptivos que se incluyan.

2. Se recomienda, por practicidad de todas las áreas y personas involucradas, que se genere un esquema para nombrar práctico y entendible para todos, ejemplo: banner_productosnuevos_home.(png o jpg) ó imagen1_carruselx2_home.(png o jpg)

3. Cada uno de los datos debe estar separado por un "guión bajo" "_" para que pueda cargarse e identificarse correctamente a nivel técnico, es importante tener presente que no se deben incluirse caracteres especiales como tildes, eñes, ampersand &, entre otros).