GUIDE LINE ONLINE. superama.com. Última actualización: 26 junio de 2017

Transcripción

1 GUIDE LINE ONLINE Última actualización: 26 junio de 2017

2 BANNER PRINCIPAL Área de Trabajo ÍNDICE Banner Principal Banner Secundario Banner Categoría Banner Micrositio Micrositios Botones (CTA), Badges e Iconos AdServer Cintillo para Newsletter

3 BANNER PRINCIPAL Área de Trabajo ESPECIFICACIONES GENERALES A B C Los proveedores deberán adaptarse a nuestra página haciendo un híbrido entre ambas. Se deben utilizar nuestras tipografías debido a que debemos homologar visualmente dentro de los micrositios, acorde al lineamiento de diseño y estilo del sitio de Superama Se deben emplear los mismos Call to Action permitidos tanto en tamaño, colores así como en textos para unificar. F G Se deberá respetar los lineamientos de los elementos fijos ya establecidos en el presente manual, como por ejemplo, en los Menús de Micrositios o medidas de Banners, los cuales no podrán ser modificados. En términos generales en los Micrositios, es posible que el proveedor pueda crear un contenido libre, siempre y cuando se respeten los lineamientos que se presentarán a continuación en el presente manual y no modificando los elementos ya establecidos, como se comentó anteriormente. D E Ocupar los tamaños establecidos en tipografías. La tipografía empleada es Lato Light y su variante Lato Regular. Los textos de preferencia deberán ir en altas y bajas. La tipografía de los logos y marcas se respetará en todo el micrositio, sin embargo el contenido deberá ser con la tipografía del sitio (Lato Light o Regular). H No se podrá redireccionar a ningún sitio externo a Superama. Los artes de cada proveedor, deberán adaptarse al Sitio de Superama. Cada banner, micrositio o cualquier otro elemento proporcionado será revisado por el Departamento de UX para su aprobación, modificación o sugerencia.

4 GUIDELINE ONLINE WEB / MÓVIL BANNER PRINCIPAL

5 BANNER PRINCIPAL Visualización Desktop Mobile Facturación Electrónica Ayuda en línea Compra por teléfono Mi Cuenta Regístrate aquí Ingresa Recetas Subtotal de Compras: $0.00 M.N. Qué deseas buscar?

6 BANNER PRINCIPAL Área de Trabajo Desktop Mobile Color sólido hexadecimal # B Banner Principal Desktop D Legales o Vigencia E Términos y Condiciones A Ver más 1000 x 400 pixeles C Color sólido hexadecimal # B Banner Principal Móvil G I Legales o Vigencia J Términos y Condiciones F Ver más 640 x 400 pixeles H G A B C D E ESPECIFICACIONES DESKTOP Medidas de Banner Principal Desktop (BPD): 1000 x 400px. Mantener un margen de separación de 20px para contenido de Banner. Aplica Laterales difuminados con colores sólidos en hexadecimal. Aplica Call To Action (Detalle: pág. 6) Considerar espacio para Vigencia o Legales (en caso de aplicar) Considerar espacio para botón Términos y Condiciones (si aplica) ESPECIFICACIONES MOBILE F Medidas de Banner Principal Mobile (BPM): 640 x 400px. Mantener un margen de separación de 20px para contenido de Banner. G NO aplica laterales con difuminado H Aplica Call to Action (Detalle: pág. 6) I Considerar espacio para Vigencia o Legales (en caso de aplicar) J Considerar espacio para botón Términos y Condiciones (si aplica)

7 BANNER PRINCIPAL Tipografías y tamaños Desktop s fuente Lato Ligtht 24 pts o 30pts o 36 pts (como máximo) en altas y bajas Los textos fuente Lato Light o Regular a 18 pts en altas y bajas. La justificación va de acuerdo al diseño Ver sección de botones o Call to Action Compra aquí en la siguiente hoja Legales o Vigencia: Fuente Lato light, Regular a 13 pts a 16 pts en altas y bajas Mobile EDITABLES Enviar en formato PSD, con tipografías establecidas. En caso de tipografías que formen parte del logo enviar (imágenes inteligentes) sin rasterizar VIGENCIA Cuando haya una promoción, siempre debe de tener una vigencia indicando el periodo de la misma de la siguiente forma: Vigencia: del 00 al 00 de enero de 2015 BOTÓN - TÉRMINOS Y CONDICIONES Considerar espacio de 8px en la parte inferior y centrada del Banner para un botón de Términos y Condiciones en caso de aplicar. Ver sección de botones o Call to Action en la siguiente hoja s fuente Lato Light 24pts o 30 pts o 36pts (como máximo) en altas y bajas Los textos fuente Lato Light o Regular a 18 pts en altas y bajas. La justificación va de acuerdo al diseño Compra aquí Legales o Vigencia: Fuente Lato light, Regular a 13 pts a 16 pts en altas y bajas

8 BANNER PRINCIPAL Botones / Call to action Botones / Call to action de banner principal web y mobile. Ocupar sin escalar (Tamaño real) Tamaño para Desktop Tamaño para Mobile Tamaño Tipografía 19 pts Fuente: Lato Light Compra aquí height: 40px Tamaño Tipografía 19 pts Fuente: Lato Light Compra aquí height: 40px width: 168px width: 168px Call to action permitidos Redirección y Ubicación del Call to Action Canjear aquí Agregar todos Compra aquí Ver recetas Ver más Agregar Participa Clic aquí Cuando un CTA (Call to Action) rediriga: a) Micrositio deberá ser su leyenda Ver más b) Combo de productos deberá ser Compra aquí La ubcación del cta dentro del banner, deberá ser acorde A LA DIREC- CIÓN DE LECTURA DE LA INFORMACIÓN. BOTONES / CALL TO ACTION Un banner siempre debe incluir un botón o Call to Action que redigirá ya sea a un micrositio o un combo de productos a comprar. Si es un combo debe utilizarse Compra aquí. Si es a micrositio o contenido deberá utilizarse Ver más. El alto del botón no debe modificarse acorde a las COLORES PARA CALL TO ACTION medidas establecidas. El ancho del botón puede variar depediendo del # texto a utilizar pero no se podrá hacer menos #e87800 ancho. Los call to action permitidos son Compra aquí, Ver #e41c2c recetas, Participa, Ver más, Agregar y Clic aquí. muestran a continuación:

9 GUIDELINE ONLINE WEB / MÓVIL BANNER SECUNDARIO

10 BANNER SECUNDARIO Visualización Web Mobile Facturación Electrónica Ayuda en línea Regístrate aquí Ingresa 999 Compra por teléfono Mi Cuenta 0 Recetas Subtotal de Compras: $0.00 M.N. Qué deseas buscar? FRUTAS Compra aquí VINO DEL MES Ver más CEREALES Ver más

11 BANNER SECUNDARIO Área de Trabajo y Especificaciones Web y Mobile B B Legales o Vigencia: Fuente Lato light o Regular a 13 pts a 16 pts en altas y bajas A 80 px 549 x 353 pixeles ESPECIFICACIONES Medida 549 x 353 px Peso Máximo 80 Kbs Resolución 72 dpi Formato jpg A B EDITABLES Enviar en formato PSD. Se recomienda usar solo imagen sin textos y se debe de contemplar un espacio de 80px en la parte inferior, por el efecto de hover y thumbnail existente en la página. Enviar la imagen de buena calidad. En caso de logos sin reseterizar (imágen inteligente). Considerar espacio para Vigencia o Legales (en caso de aplicar).

12 GUIDELINE ONLINE WEB / MÓVIL BANNER CATEGORÍAS

13 BANNER CATEGORÍA Visualización Web Mobile Facturación Electrónica Ayuda en línea Compra por teléfono Mi Cuenta Regístrate aquí Ingresa Recetas Subtotal de Compras: $0.00 M.N. Qué deseas buscar?

14 BANNER CATEGORÍA Área de Trabajo Desktop Mobile Color sólido hexadecimal # B Banner Categoría Desktop E D Legales o Vigencia Términos y Condiciones A Compra aquí C 1000 x 320 pixeles C Color sólido hexadecimal # B G Banner Categoría Mobile Legales o Vigencia J Términos y Condiciones I F Compra aquí H G 640 x 320 pixeles A B C D E ESPECIFICACIONES DESKTOP Medidas de Banner Categoría Desktop (BPD): 1000 x 320px. Mantener un margen de separación de 20px para contenido de Banner. Aplica Laterales difuminados con colores sólidos en hexadecimal. Aplica Call To Action (Detalle: pág. 6) Considerar espacio para Vigencia o Legales (en caso de aplicar) Considerar espacio para botón Términos y Condiciones (en caso de aplicar) ESPECIFICACIONES MOBILE F Medidas de Banner Catgoría Mobile (BPM): 640 x 320px. Mantener un margen de separación de 20px para contenido de Banner. G NO aplica laterales con difuminado H Aplica Call to Action (Detalle: pág. 6) I Considerar espacio para Vigencia o Legales (en caso de aplicar) J Considerar espacio para botón Términos y Condiciones (en caso de aplicar).

15 BANNER CATEGORÍA Tipografías y tamaños Desktop s fuente Lato Ligtht 24 pts o 30pts o 36 pts (como máximo) en altas y bajas Los textos fuente Lato Light o Regular a 18 pts en altas y bajas. La justificación va de acuerdo al diseño Ver sección de botones o Call to Action Compra aquí en la siguiente hoja Legales o Vigencia: Fuente Lato light o Regular a 13 pts a 16 pts en altas y bajas Mobile EDITABLES Enviar en formato PSD, con tipografías establecidas. En caso de tipografías que formen parte del logo enviar (imágenes inteligentes) sin rasterizar VIGENCIA Cuando haya una promoción, siempre debe de tener una vigencia indicando el periodo de la misma de la siguiente forma: Vigencia: del 00 al 00 de enero de 2015 BOTÓN - TÉRMINOS Y CONDICIONES Considerar espacio de 8px en la parte inferior y centrada del Banner para un botón de Términos y Condiciones en caso de aplicar. Ver sección de botones o Call to Action en la siguiente hoja s fuente Lato Light 24pts o 30 pts o 36pts (como máximo) en altas y bajas Los textos fuente Lato Light o Regular a 18 pts en altas y bajas. La justificación va de acuerdo al diseño Compra aquí Legales o Vigencia: Fuente Lato light o Regular a 13 pts a 16 pts en altas y bajas

16 BANNER CATEGORIA Botones / Call to action Botones / Call to action de banner principal web y mobile. Ocupar sin escalar (Tamaño real) Tamaño para Desktop Tamaño para Mobile Tamaño Tipografía 19 pts Fuente: Lato Light Compra aquí height: 40px Tamaño Tipografía 19 pts Fuente: Lato Light Compra aquí height: 40px width: 168px width: 168px Call to action permitidos Redirección y Ubicación del Call to Action Canjear aquí Agregar todos Compra aquí Ver recetas Ver más Agregar Participa Clic aquí Cuando un CTA (Call to Action) rediriga: a) Micrositio deberá ser su leyenda Ver más b) Combo de productos deberá ser Compra aquí La ubcación del cta dentro del banner, deberá ser acorde A LA DIRECCIÓN DE LECTURA DE LA INFORMACIÓN. BOTONES / CALL TO ACTION Un banner siempre debe incluir un botón o Call to Action que redigirá ya sea a un micrositio o un combo de productos a comprar. Si es un combo debe utilizarse Compra aquí. Si es a micrositio o contenido deberá utilizarse Ver más. El alto del botón no debe modificarse acorde a las COLORES PARA CALL TO ACTION medidas establecidas. El ancho del botón puede variar depediendo del # texto a utilizar pero no se podrá hacer menos #e87800 ancho. Los call to action permitidos son Compra aquí, Ver #e41c2c recetas, Participa, Ver más, Agregar y Clic aquí. muestran a continuación:

17 GUIDELINE ONLINE WEB / MÓVIL BANNERMICROSITIO

18 BANNER MICROSITIO Visualización Web Mobile Facturación Electrónica Ayuda en línea Compra por teléfono Mi Cuenta Regístrate aquí Ingresa Recetas Subtotal de Compras: $0.00 M.N. Qué deseas buscar? Vigencia del 1 al 15 de enero Términos y Condiciones Términos y Condiciones

19 BANNER MICROSITIO Área de Trabajo Desktop Mobile Términos y Condiciones Vigencia del 1 al 15 de enero Términos y Condiciones Vigencia del 1 al 15 de enero Color sólido hexadecimal # B Banner Micrositio Desktop C Legales o Vigencia D Términos y Condiciones A 1000 x 250 pixeles Color sólido hexadecimal # B F Banner Micrositio Mobile Legales o Vigencia H Términos y Condiciones E G 640 x 250 pixeles F A B C D ESPECIFICACIONES DESKTOP Medidas de Banner Micrositio Desktop(BMD): 1000 x 250px. Mantener un margen de separación de 20px para contenido de Banner. Aplica Laterales difuminados con colores sólidos en hexadecimal. Considerar espacio para Vigencia o Legales (en caso de aplicar) Considerar espacio para botón Términos y Condiciones (en caso de aplicar). ESPECIFICACIONES MOBILE E Medidas de Banner Micrositio Mobile (BMM): 640 x 250px. Mantener un margen de separación de 20px para contenido de Banner. F NO aplica laterales con difuminado G Considerar espacio para Vigencia o Legales (en caso de aplicar) H Considerar espacio para botón Términos y Condiciones (en caso de aplicar).

20 BANNER MICROSITIO Tipografías y tamaños Desktop s fuente Lato Ligtht 24 pts o 30pts o 36 pts (como máximo) en altas y bajas Los textos fuente Lato Light o Regular a 18 pts en altas y bajas. La justificación va de acuerdo al diseño Legales o Vigencia: Fuente Lato light, Regular o Medium a 13 pts a 16 pts en altas y bajas Mobile EDITABLES Enviar en formato PSD, con tipografías establecidas. En caso de tipografías que formen parte del logo enviar (imágenes inteligentes) sin rasterizar VIGENCIA Cuando haya una promoción, siempre debe de tener una vigencia indicando el periodo de la misma de la siguiente forma: Vigencia: del 00 al 00 de enero de 2015 BOTÓN - TÉRMINOS Y CONDICIONES Considerar espacio de 8px en la parte inferior y centrada del Banner para un botón de Términos y Condiciones en caso de aplicar. s fuente Lato Light 24pts o 30 pts o 36pts (como máximo) en altas y bajas Los textos fuente Lato Ligh o Regular a 18 pts en altas y bajas. La justificación va de acuerdo al diseño Legales o Vigencia: Fuente Lato light, Regular o Medium a 13 pts a 16 pts en altas y bajas

21 GUIDELINE ONLINE WEB / MÓVIL MICROSITIOS

22 Compra por teléfono llamando al o al Regístrate aquí Ingresa 999 MICROSITIOS Visualización Web Tablet Mobile Facturación Electrónica Ayuda en línea Compra por teléfono Mi Cuenta 0 Regístrate aquí Ingresa 999 Qué deseas buscar? Recetas Subtotal de Compras: $0.00 M.N.

23 999 Compra por teléfono llamando al o al Regístrate aquí Ingresa 0 MICROSITIOS Especificaciones Media Queries Large Device Desktop Tablet Mobile Facturación Electrónica Ayuda en línea Compra por teléfono Facturación Electrónica Ayuda en línea Compra por teléfono Mi Cuenta Regístrate aquí Ingresa 999 Regístrate aquí Ingresa Qué deseas buscar? Recetas Subtotal de Compras: $0.00 M.N. Recetas Subtotal de Compras: $0.00 M.N. Desktop large devices: Desktop: Tablet: Phone and (min-width:1336px){ } esta es opcional de acuerdo a lo que se realice. No aplica Media Queries Medidas aplicables y generales para desktop. Estas medidas serán tomadas en cuenta para IE8, ya que no existe soporte de Media Queries para dicha versión, no obstante otros navegadores y versiones que sí (min-width:992px){ (max-width:768px){ }

24 Facturación Electrónica Cómo comprar? Quiénes Somos Superama a Domicilio Directorio de Tiendas Pago de Servicios Garantía 200% Garantía de precios bajos Aviso de Privacidad Ayuda en línea Recetas Formas de Pago Banco Walmart Tipos de pedido Modalidades de Entrega Horarios y Teléfono Términos y Condiciones Mapa del Sitio Los precios publicados en la página pueden variar con respecto a los publicados en tienda. *La información y consejos citados de la Revista: Superama Sabor y Estilo, se difunden para fines informativos y/o recomendatorios. Wal Mart de México, S.A.B. de C.V., no se hace responsable de los contenidos generales publicados en dicha revista. Tu Pedido Chat Contáctanos Preguntas Frecuentes Imprimir Lista Básica Factura Electróinca 0034 o al Superama a domicilio es la mejor opción para hacer tu súper desde casa, oficina, gimnasio o donde quiera que te encuentres y recibir tu despensa en las puertas del domicilio que nos indiques. lo necesites en varios estados de la República Mexicana como el D.F., Estado de México, Aguascalientes, Guanajuato, Guerrero, Jalisco, Michoacán, Morelos, Nuevo León, Puebla, Querétaro, Quintana Roo, San Luis Potosí, Todos los derehos reservados Superama 2015 Hola, Claudia Mi Cuenta Salir Providencia Subtotal de Compras: Wal-Mart México Wal-Mart Supercenter Sam s Club México Películas Vadu Suburbia México Bolsa de Trabajo Compra por teléfono MICROSITIOS Especificaciones Contenedor Principal Large Device Contenedor Principal. Ejemplo Se cuenta con una clase para un contenedor general ya establecida con el nombre de containersup y se aplica: Base 12 columnas Facturación Electrónica Ayuda en línea Compra por teléfono Contenedor Principal $000, screen and (min-width:1336px).containersup { margin: 0 auto; padding: 0px 16px; width:90%; max-width: 1336px; } Recetas Regístrate aquí Ingresa Subtotal de Compras: $0.00 M.N. Superama Servicios Seguimiento a Pedidos Información screen and (max-width:1335px).containersup { margin: 0 auto; width: 90%; } Cuadrícula de Columnas: El contenido se distribuye en proporción a 12 columnas (parecido al Framework Boostrap), de hecho es posible que se puedan utilizar las clases establecidas por boostrap para las columnas, o personalizarlas. Para la modificación o adición de sus clases podrán realizarlas en el archivo de css llamado custom-style.css, incluido en la carpeta de Micrositio o Landing Demo.

25 Facturación Electrónica Cómo comprar? Quiénes Somos Superama a Domicilio Directorio de Tiendas Pago de Servicios Garantía 200% Garantía de precios bajos Aviso de Privacidad Ayuda en línea Formas de Pago Banco Walmart Tipos de pedido Modalidades de Entrega Horarios y Teléfono Términos y Condiciones Mapa del Sitio Los precios publicados en la página pueden variar con respecto a los publicados en tienda. *La información y consejos citados de la Revista: Superama Sabor y Estilo, se difunden para fines informativos y/o recomendatorios. Wal Mart de México, S.A.B. de C.V., no se hace responsable de los contenidos generales publicados en dicha revista. Hola, Claudia Mi Cuenta Salir Providencia Recetas $ Súper ahorros Rincón Gourmet Exclusivos Recomendados 0034 o al Superama a domicilio es la mejor opción para hacer tu súper desde casa, oficina, gimnasio o donde quiera que te encuentres y recibir tu despensa en las puertas del domicilio que nos indiques. lo necesites en varios estados de la República Mexicana como el D.F., Estado de México, Aguascalientes, Guanajuato, Guerrero, Jalisco, Michoacán, Morelos, Nuevo León, Puebla, Querétaro, Quintana Roo, San Luis Potosí, Todos los derehos reservados Superama 2015 Tu Pedido Chat Contáctanos Preguntas Frecuentes Imprimir Lista Básica Factura Electróinca Subtotal de Compras: Wal-Mart México Wal-Mart Supercenter Sam s Club México Películas Vadu Suburbia México Bolsa de Trabajo Compra por teléfono MICROSITIOS Especificaciones Contenedor Principal Desktop Contenedor Principal. Ejemplo 999 $999, M.N..containersup { margin: 0 auto; padding: 0px 16px; width: 90%; max-width: 968px; } Base 12 columnas Facturación Electrónica Ayuda en línea Recetas Compra por teléfono 999 Regístrate aquí Ingresa Subtotal de Compras: $0.00 M.N. Superama Servicios Seguimiento a Pedidos Información Coporativa Desktop: No aplica Media Queries Medidas aplicables y generales para desktop. Estas medidas serán tomadas en cuenta para IE8, ya que no no existe soporte de Media Queries para dicha versión, no obstante otros navegadores y versiones que sí posean. De prefrencia siempre utilizar media queries con max-width(); para que puedan ser visualizadas correctamente en IE8. En caso de requerir medidas para otros tamaños o dispositivos utilizar en conjunto con min-width(); Distribución a 12 columnas. (parecido al Framework de Boostrap).

26 teléfono o al Superama a domicilio es la mejor opción para hacer tu súper desde casa, oficina, gimnasio o donde quiera que te encuentres y recibir tu despensa en las puertas del domicilio que nos indiques. Puedes seleccionar una o más direcciones para de débito, tarjeta de crédito, vales de despensa, vale electrónico, tarjetas Wal-Mart de crédito o débito, tarjeta de regalo o pago en línea para necesites en varios estados de la República Mexicana como el D.F., Estado de México, Aguascalientes, Guanajuato, Guerrero, Jalisco, Michoacán, Morelos, Nuevo León, Puebla, Querétaro, Quintana Roo, San Luis Potosí, Tabasco, Veracruz y Yucatán. El compromiso de Superama es Todos los derehos reservados Superama 2015 Compra por teléfono llamando al o al $ 0 - Compra por teléfono llamando al o al Regístrate aquí Ingresa MICROSITIOS Especificaciones Contenedor Principal Tablet Contenedor Ejemplo Regístrate aquí Ingresa Recetas (max-width: 1000px) {.containersup{ margin:0 auto; padding: 0 16px; max-width: 1000px; width: 90%; } } Base 12 columnas Superama Servicios Seguimiento a Pedidos Quiénes Somos Formas de Pago Tu Pedido Superama a Domicilio Banco Walmart Chat Directorio de Tiendas Tipos de pedido Contáctanos Pago de Servicios Modalidades de Entrega Preguntas Frecuentes Garantía 200% Horarios y Teléfono Imprimir Lista Básica Garantía de precios bajos Términos y Condiciones Factura Electróinca Aviso de Privacidad Mapa del Sitio Información Coporativa Wal-Mart México Wal-Mart Supercenter Sam s Club México Películas Vadu Suburbia México Bolsa de Trabajo Tablet: De prefrencia siempre utilizar media queries con max-width para que puedan ser visualizadas correctamente en ie8 Distribución a 12 columnas. (parecido al Framework de (max-width:992px){ }

27 Quiénes Somos Superama a Domicilio Directorio de Tiendas Pago de Servicios Garantía 200% Garantía de precios bajos Aviso de Privacidad Tu Pedido Chat Contáctanos Preguntas Frecuentes Imprimir Lista Básica Factura Electróinca Formas de Pago Banco Walmart Tipos de pedido Modalidades de Entrega Horarios y Teléfono Términos y Condiciones Mapa del Sitio Wal-Mart México Wal-Mart Supercenter Sam s Club México Películas Vadu Suburbia México Bolsa de Trabajo Los precios publicados en la página pueden variar con respecto a los publicados en tienda. *La información y consejos citados de la Revista: Superama Sabor y Estilo, se difunden para fines informativos y/o recomendatorios. Wal Mart de México, S.A.B. de C.V., no se hace responsable de los contenidos generales publicados en dicha revista. Todos los derehos reservados Superama MICROSITIOS Especificaciones Contenedor Principal Mobile Contenedor Ejemplo Mi Cuenta Más de Superama (max-width: 768px) {.containersup{ margin:0 auto; padding: 0 16px; max-width: 768px; width: 90%; } } Mi Cuenta 0 Qué deseas buscar? Base 2 columnas Superama Servicios Seguimiento a Pedidos Información Coporativa Más Información Mobile (Phone) and small: De prefrencia siempre utilizar media queries con max-width(); para que puedan ser visualizadas correctamente en ie8 Distribución a 12 columnas. (parecido al Framework de (max-width:768px){ }

28 MICROSITIOS Tipografía y tamaños de uso La tipografía que se deberá usar es Lato en las varientes Light y Regular. En la parte superior se especifíca en dónde se utiliza en sus generalidades. Lato Light Nombre de la tipografía Variantes ABCDEFGHIJKLMNOPQRSTVWXYZ ! $%&/()=? {} Ç ^[]^*`,.-;:_<> Dispositivo s Subtítulos Copys (descripciones) Desktop Tablet Mobile 30-26px 30-26px 24-20px 24-20px 24-20px 18-16px 22-18px 22-18px 20-16px Párrafos 16-14px 16-14px Legales 12px 12px 12px Se utiliza como la tipografía base del sitio Regular ABCDEFGHIJKLMNOPQRSTVWXYZ ! $%&/()=? {} Ç ^[]^*`,.-;:_<> Se usa principalmente para títulos o para resaltar alguna frase o palabra. En esta parte se especifícan los tamaños tipográficos para cada dispositivo, favor de seguirlo para lograr unificación en el sitio.

29 Facturación Electrónica Ayuda en línea Recetas Regístrate aquí Ingresa Subtotal de Compras: Compra por teléfono Facturación Electrónica Ayuda en línea Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis t montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec Recetas Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue nsequat ante, dapibus in, viverra quis, feugiat a, tellus.velit Regístrate aquí Ingresa Subtotal de Compras: Compra por teléfono 999 Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. MICROSITIOS Plantilla 1 (home ejemplo) 999 Aquí va el logotipo $0.00 M.N. Aquí va el logotipo $0.00 M.N. Menú Menú Menú Asset fijo Menú Menú Menú Titulo del bloque del bloque Titulo posible para poner aqui en este espacio orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donean vulputate eleifenicies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget Contenedor Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur Titulo de algo importante que se quiera decir orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donean vulputate eleifenicies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget Contenedor Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam Parece que mi hija pinta la ropa pero no la hoja, pero le echo una cucharada de Vanish al ciclo de lavado y me despreocupo de las manchas Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam quat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Assets intercambiables Titulo de algo importante que se quiera decir orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donean vulputate eleifenicies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget Se generaron diseños muestra para que el proveedor pueda adecuarse a la nueva imagen del sitio de Superama, sin embargo podrán intercambiar, duplicar o quitar assets de acuerdo a la información de cada proveedor y tendrán que ser responsivos. Se deberán respetar (no cambiar, tamaños establecidos ni especificaciones generales ) de: - Banners - Logotipo - Menú En el slider del banner principal hay espacio para 3 banners.

30 Compra por teléfono llamando al o al Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam Parece que mi hija pinta la ropa pero no la hoja, pero le echo una cucharada de Vanish al ciclo de lavado y me despreocupo de las manchas Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam quat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur MICROSITIOS Plantilla 1 (home) - Ejemplo Ejemplos de como se observará en forma responsiva Facturación Electrónica Ayuda en línea Compra por teléfono Mi Cuenta Regístrate aquí Ingresa 999 Regístrate aquí Ingresa Recetas Subtotal de Compras: Aquí va el logotipo $0.00 M.N. Aquí va el logotipo Más de Superama Aquí va el logotipo Menú Menú Menú Menú Menú Titulo posible para poner aqui en este espacio orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donean vulputate eleifenicies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque Maecenas nec odio et ante tincidunt rutrum. Aenean imperdiet. Etiam ultricies tempus. Donec vitae sapien ut libero nisi vel augue. Curabitur venenatis faucibus. Nullam Titulo posible para poner aqui en este espacio orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donean vulputate eleifenicies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus Maecenas nec odio et ante tincidunt varius laoreet. Quisque rutrum. tempus. Donec vitae sapien ut libero Aenean imperdiet. Etiam ultricies nisi venenatis faucibus. Nullam vel augue. Curabitur Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam Parece que mi hija pinta la ropa pero no la hoja, pero le echo una cucharada de Vanish al ciclo de lavado y me despreocupo de las manchas Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam Parece que mi hija pinta la ropa pero no la hoja, pero le echo una cucharada de Vanish al ciclo de lavado y me despreocupo de las manchas Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam quat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam quat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

31 Facturación Electrónica Ayuda en línea Recetas Regístrate aquí Ingresa Subtotal de Compras: Compra por teléfono 999 Facturación Electrónica Ayuda en línea Recetas Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Done, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi tincidunt. Duis leo. Sed fringilla ma Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. Cur Regístrate aquí Ingresa Subtotal de Compras: Viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augu loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augu loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augu loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augu Compra por teléfono 999 MICROSITIOS Plantilla 2 (home ejemplo) $0.00 M.N. Asset fijo Aquí va el logotipo $0.00 M.N. Menú Menú Menú de la sección en general Titulo del bloque Contenedor Assets intercambiables Contenedor de bloque Se generaron diseños muestra para que el proveedor pueda adecuarse a la nueva imagen del sitio de Superama, sin embargo podrán intercambiar, duplicar o quitar assets de acuerdo a la información de cada proveedor y tendrán que ser responsivos. Se deberán respetar (no cambiar, tamaños establecidos ni especificaciones generales ) de: - Banners - Logotipo - Menú En el slider del banner principal hay espacio para 3 banners.

32 Facturación Electrónica Ayuda en línea Compra por teléfono Facturación Electrónica Ayuda en línea Recetas 999 Subtotal de Compras: Compra por teléfono MICROSITIOS Plantilla 2 (home) - Ejemplo Ejemplos de cómo se observará en forma responsiva Mi Cuenta Regístrate aquí Ingresa 999 Regístrate aquí Ingresa 0 Recetas Subtotal de Compras: $0.00 M.N. $0.00 M.N. Más de Superama

33 999 MICROSITIOS Plantilla 3 (home ejemplo) Facturación Electrónica Ayuda en línea Compra por teléfono Facturación Electrónica Ayuda en línea Compra por teléfono Regístrate aquí Ingresa Regístrate aquí Ingresa 999 Recetas Subtotal de Compras: $0.00 M.N. Recetas Aquí va el logotipo Subtotal de Compras: $0.00 M.N. Asset fijo Submenú Asset fijo Contenedor Assets intercambiables Contenedor Titulo del bloque Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies nisi vel augue. Curabitur tellus. Phasellus viverra nulla cies nisi vel augue. CurAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla cies nisi vel augue. CurabiturAliquam loremet. Etiam ultricies Puedes quitar o poner bloques en este caso se eliminan 2 Se generaron plantillas muestra para que el proveedor pueda adecuarse a la nueva imagen del sitio de Superama, sin embargo podrán intercambiar, duplicar o quitar assets de acuerdo a la información de cada proveedor y tendrán que ser responsivos. Se deberán respetar (no cambiar, tamaños establecidos ni especificaciones generales ) de: - Banners - Logotipo - Menú En el slider del banner principal hay espacio para 3 banners.

34 MICROSITIOS Plantilla 3 (home) - Ejemplo Ejemplos de cómo se observará en forma responsiva

35 MICROSITIOS Interiores Visualización Interiores Se sugiere utilizar nombres de clases específicas y/o acorde al nombre de la campaña o proveedor, para EVITAR que puedan parecerse a los estilos generales que se manejan en el sitio y provocar problemas de funcionalidad o rompimiento de estilos.

36 MICROSITIOS Interiores Especificaciones Interiores Banner principal de micrositio Imágenes o Texto en contenido puede o no estar en el interior Artículos cargados de forma dinámica En los interiores de cada micrositio sólo se podrá diseñar la parte banner o texto en contenido esta siempre va abajo de cada título que se presente dentro de esta página pero si es suficiente la imagen principal de micrositios el banner de contenido se puede omitir quedando el título seguido de los productos. Se sugiere utilizar nombres de clases específicas y/o acorde al nombre de la campaña o proveedor, para EVITAR que puedan parecerse a los estilos generales que se manejan en el sitio y provocar problemas de funcionalidad o rompimiento de estilos.

37 MICROSITIOS Especificaciones el menú css para cambiar el color del botón.cbp-hrmenu > ul.importado > li css para cambiar el hover del botón.cbp-hrmenu > ul.importado > li:hover css para cambiar el color.cbp-hrmenu > ul.importado No se debe modificar este color La clases se deben de personalizar de acuerdo a cada proveedor ejemplo:.cbp-hrmenu > ul.nombredecampañadeproveedor en todos los css del y html

38 MICROSITIOS Visualización de el menú

39 MICROSITIOS Estructura de carpetas y nombre de archivos Ejemplo de posible estructura assets Carpeta que incluye todos los archivos necesiario para visualizar localmente. NO mover y/o modificar. Ruta/Ubicación Descripción nombre-del-micrositio Rutas de los archivos css custom-style.css master-style.css nombre-del-micrositio/css/custom-style.css nombre-del-micrositio/master-style.css CSS para agregar todas las clases que se necesiten crear para el nuevo micrositio. CSS que integra todas las clases ya creadas por y que son la base para el micrositio. images Carpeta contenedora de todas las imágenes que requerirá el micrositio menudinamico Index cshtml Interior cshtml Carpeta que contiene todos los archivos para la funcionalidad del menú. NO mover y/o modificar. nombre obligatorio home.cshtml Parecido a index.html es nuestro archivo base. Puede cambiar Nombre obligatorio nombre-del-interior-detalle.cshtml Archivo con para el interior de micrositio. El nombre de la carpeta es el nombre del micrositio. Debe ser en minúsculas, pueden utilizarse guines medios y no poseer caracteres especiales. Se recomienda usar HTML4 En los cshtml sólodebe de incluirse el contenid.en las hojas de estilos se recomienda no usar etiquetas generales, si se desean usar se deben de personalizar NO usar etiquetas HTML5 Las librerías que se encuentran cargadas son las iguientes: JQuery 11.2 JQuery UI 11.2

40 MICROSITIOS Especificaciones el menú 260 x 150 pixeles cada imagen Es importante que no se modifiquen o cambien los scripts para no alterar la funcionalidad del menu Se puede personalizar: El color background del menu y su respectivo hover. El ménu puede incluir botones sencillos (con unlink) o con submenú el submenú desplegara sus opciones con imagen y texto que pueden ser editables Al adaptarse a dispositivos móviles (Phone y Tablet) El menú cambia la estructura autoáticamente a partir de un max-width de 768 px y se repliegan dentro de un sólo botón que se llama menú, junto con un botón de inicio (ícono de casa).

41 MICROSITIOS Especificaciones el menú 580 x 560 pixeles cada imagen Hover predefinido solo cambia color Botón Sin Combo (Sencillo) Código para Crear Botones Sin Combo (Sencillos): Código para Crear Botones con Combo: Botón con Combo <li id="nombre"> <!-- Nombre de la sección--> <a href= nombre.html" onclick="ga('send', 'event', 'Micrositios - Demo UX', 'Main Navigation', 'Tipografia');">Botón Sencillo</a> </li> <li class="combo-submenu Combo-Menu"> <!-- Se debe poner la clase combo-submenu, la clase seguida, es el nombre de la sección del Combo--> <a class="combo-link" href="#">contenido</a> <!--agregar la clase combo-link --> <div class="cbp-hrsub"> <ul class="cbp-hssubmenu cbp-hssub-rows"> <li> <a class="effect-micro-hover" href="contenido.html" onclick="ga('send', 'event', 'Micrositios - Demo UX', 'Main Navigation',Btn1);"> <img src="img/bgsubmenu_1.jpg" alt="" /> <span>btn1</span> </a> </li> <li> <a class="effect-micro-hover" href="contenido.html" onclick="ga('send', 'event', 'Micrositios - Demo UX', 'Main Navigation',Btn1);"> <img src="img/bgsubmenu_1.jpg" alt="" /> <span>btn1</span> </a> </li> </ul> </div> </li>

42 GUIDELINE ONLINE WEB / MÓVIL BOTONES Y BADGES

43 BOTONES Y BADGES Colores y Especificaciones COLORES ESTABLECIDOS PARA BOTONES Y BADGES: #e87800 #e41c2c # #457abb (exclusivo de farmacia Superama) Cada uno de los botones o Call to Action (CTA), así como los badges e iconos, están diseñados en formato PSD para un empleo práctico. Cuando se trabaja en un Banner Principal, por ejemplo, se puede utilizar el botón, badge o icono correspondiente e insertarlo directamente en nuestro archivo de trabajo y poseerá la medida, color y especificación establecida automáticamente. ESPECIFICACIONES Cada uno de los botones, badges e iconos, se encuentran en la carpeta denominada Botones-Badges-Iconos-UX que se adjunta con la presente guía.

44 BOTONES Y BADGES Visualización y Tipos Botones o Call to Action (CTA) Precio Normal Compra aquí Compra aquí Compra aquí Ver más Ver más Ver más Ver más Width: 168px Height: 40px Tamaño Tipografía: 19 pts Fuente: Lato Regular Cuando un CTA (Call to Action) rediriga: a) Micrositio --> deberá ser su leyenda Ver más b) Combo de productos --> deberá ser Compra aquí La ubcación del cta dentro del banner, deberá ser acorde A LA DIRECCIÓN DE LECTURA DE LA INFORMACIÓN. ESPECIFICACIONES Cada uno de los botones, badges e iconos, se encuentran en la carpeta denominada Botones-Badges-Iconos-UX que se adjunta con la presente guía. Al colocar directamente cada Badge o Botón en su archivo de PSD les proporcionará la medida exacta que debe tener cada botón. Inlcuye una librería de botones para Newsletters con medidas especiales.

45 BOTONES Y BADGES Visualización y Tipos Badges $ $ $ $ AGOTADO x kg Precio Normal Precio Normal Exclusivos Precio Normal Farmacia Precio por kg Agotado De $ a $ De $ a $ De $ a $ $ x kg 3 x $ Baja de Precio Normal Baja de Precio Exclusivos Baja de Precio Farmacia Súper Ahorro x kg Súper Ahorro 3x.. ESPECIFICACIONES Cada uno de los botones, badges e iconos, se encuentran en la carpeta denominada Botones-Badges-Iconos-UX que se adjunta con la presente guía. Al colocar directamente cada Badge o Botón en su archivo de PSD les proporcionará la medida exacta que debe tener cada botón. Inlcuye una librería de botones para Newsletters con medidas especiales. La posición de los badges y botones deberá ser acorde al orden de la lectura de la información. El tamaño de tipografía depende en gran medida de su uso. Existe en la carpeta de Botones, las diferentes medidas que existen para estos badges, ya que hay para NL, para Banners, para BS, etc.

46 BOTONES Y BADGES Visualización y Tipos Botones o CTA Particulares Compra aquí para AdServer - 160x600 Compra aquí Tipografía: 27 pts Lato Regular Compra aquí Compra aquí para Cintillo NL 650x100px Tipografía: 23 pts Lato Regular Compra aquí para AdServer - 728x90 Compra aquí para AdServer - 300x250 Compra aquí Compra aquí Tipografía: 23 pts Lato Regular Tipografía: 23 pts Lato Regular Compra aquí para AdServer - 320x50 Compra aquí Tipografía: 17 pts Lato Regular ESPECIFICACIONES Cada uno de los botones, badges e iconos, se encuentran en la carpeta denominada Botones-Badges-Iconos-UX que se adjunta con la presente guía. Al colocar directamente cada Badge o Botón en su archivo de PSD les proporcionará la medida exacta que debe tener cada botón. Inlcuye una librería de botones para Newsletters con medidas especiales. La posición de los badges y botones deberá ser acorde al orden de la lectura de la información.

47 BOTONES, BADGES E ICONOS Visualización y Tipos Iconos para Banners EXCLUSIVOS ONLINE Exclusivos Online SÚPER AHORRO ESPECIFICACIONES Cada uno de los botones, badges e iconos, se encuentran en la carpeta denominada Botones-Badges-Iconos-UX que se adjunta con la presente guía. Al colocar directamente cada Badge o Botón en su archivo de PSD les proporcionará la medida exacta que debe tener cada botón. Inlcuye una librería de botones para Newsletters con medidas especiales. La posición de los badges y botones deberá ser acorde al orden de la lectura de la información.

48 GUIDELINE ONLINE WEB / MÓVIL ADSERVER

49 ADSERVER Visualización y Especificaciones 160x x x50 640x x90 ESPECIFICACIONES Existen 5 AdServer con las medidas: 160x x x50 640x x90

50 ADSERVER Especificaciones 160x x x50 640x x90 ESPECIFICACIONES Entre más pequeña sea la medida del AdServer, se podrán eliminar elementos (como imágenes) que no sean esenciales, a fin de optimizar los espacios y que se pueda apreciar la información principal. Obsérvese el ejemplo entre el AdServer de 160x600 y el de 250x50 La tipografía deberá ser Lato-Light o Lato-Regular totalmente legible, en especial para la medida de 320x50.

51 ADSERVER Tamaños de botones de AdServer Compra aquí para AdServer - 160x600 width: 140px height: 33px Tipografía: 27 pts Lato Regular Compra aquí para AdServer - 320x250 width: 118px height: 28px Tipografía: 17 pts Lato Regular Compra aquí para AdServer - 320x50 Compra aquí width: 90px height: 21px Tipografía: 23 pts Lato Regular Compra aquí para AdServer - 650x100 width: 120px height: 28px Tipografía: 23 pts Lato Regular Compra aquí para AdServer - 728x90 width: 120px height:28px Tipografía: 23 pts Lato Regular ESPECIFICACIONES Los botones (CTA) fueron diseñados a proporción dependiendo de la medida de cada AdServer. Cada uno de los botones, badges e iconos, se encuentran en la carpeta denominada Botones-Badges-Iconos-UX que se adjunta con la presente guía.

52 GUIDELINE ONLINE WEB / MÓVIL CINTILLO NL

53 CINTILLO PARA NL Visualización y Especificaciones Cintillo para Newsletter: 650x100 Descubre nuestra selección de Productos ESPECIFICACIONES La medida del Cintillo para Newsletters es de 650x100. La tipografía deberá ser Lato-Light o Lato-Regular totalmente legible. El botón deberá ubicarse de preferencia en la parte media derecha del Cintill o haciendo alusión a los productos promocionados.

54 CINTILLO PARA NL Botón para NL Compra aquí para Newsletter- 160x600 Compra aquí width: 120px height: 28px ESPECIFICACIONES Los botones (CTA) fueron diseñados a proporción dependiendo de la medida de cada AdServer. Cada uno de los botones, badges e iconos, se encuentran en la carpeta denominada Botones-Badges-Iconos-UX que se adjunta con la presente guía.