Contexto

Los activos son elementos visuales que no encajan en una categoría, como los colores o las fuentes, entre otros. Pueden ser imágenes o logotipos, por ejemplo.

Imagen de la pantalla de inicio

En este caso, usa toda el área segura para mostrar los elementos visuales ordenados que desees. Como los componentes en la parte superior de la imagen pueden dificultar su visualización en dispositivos más pequeños, recomendamos no colocar texto dentro de ella.

Puedes encontrarla en la plantilla Figma aquí.

Requisitos:

• Relación de aspecto: 16:10
• Tamaño de la imagen: 2880 x 1800 píxeles
• Tamaño máximo: 1 MB
• Formato de la imagen: JPG
• Nombre del archivo: home_background

Logotipo

El logotipo es el símbolo que representa tu marca. Se utiliza sobre todo en el encabezado.

Requisitos

• Área segura: 150 x 48 píxeles para SVG; 300 x 96 píxeles para PNG y JPG
• Tamaño máximo: 128 KB
• Ancho máximo: 150 píxeles
• Formato de la imagen: SVG, PNG y JPG (recomendados)
• Nombre del archivo: brandname_logo

Logotipo: lo que debes y no debes hacer

Lo que debes hacer

• Mantén el logotipo alineado en el borde izquierdo.
• Mantén el ancho.

Lo que no debes hacer

• No dejes espacios vacíos en los laterales.

El logotipo puede tener un espacio en la parte superior o inferior; se posicionará automáticamente según el ancho máximo de un contenedor.

Puedes encontrarlo en la plantilla Figma aquí.

Iconos

Iconos del tipo de pedido

Estos iconos sirven como imagen de marcador de posición para cada tipo de pedido que ofrece un local. Crea un icono para cada tipo de pedido que proporciona tu marca. Se utilizan en la página de inicio.

Puedes encontrarlos en la plantilla Figma aquí.

Requisitos:

• Relación de aspecto: 1:1
• Tamaño de la imagen: 48 x 48 píxeles
• Tamaño máximo: 128 KB
• Formato de la imagen: SVG
• Nombre del archivo: order_type_name_icon

Otros activos

Favicon

Un favicon es un elemento asociado a un sitio web. Muchos lo utilizan como recordatorio visual de la identidad del sitio en las pestañas del navegador.

Puedes encontrarlo en la plantilla Figma aquí.

Requisitos:

• Relación de aspecto: 1:1
• Tamaño de la imagen: 144 x 144 píxeles
• Tamaño máximo: 128 KB
• Formato del archivo: SVG, PNG, JPG
• Nombre del archivo: favicon

Marcadores de ubicación

Como el marcador inferior muestra el punto exacto de las coordenadas, el activo siempre se debe fijar en el borde inferior del contenedor. Uso: mapa del directorio, detalles de la entrega, seguimiento del envío.

Puedes encontrarlos en la plantilla Figma aquí

Requisitos:

• Tamaño de la imagen: 56 x 64 píxeles
• Formato de archivo: SVG
• Nombre del archivo: user_location_pin, venue_open_pin, venue_closed_pin

Marcador del local

Este activo muestra las coordenadas de ubicación del local en el mapa. Debe tener dos imágenes o variantes independientes:

• Local abierto: activo que se muestra en el horario de atención del local
• Local cerrado: activo que se muestra fuera del horario de atención o en caso de que un local no esté abierto por algún motivo

Ubicación del usuario

Este activo se usa para mostrar las coordenadas. Muestra la ubicación del usuario en un mapa tanto si este comparte su ubicación a través del navegador como si elige manualmente una dirección en la búsqueda.

Icono de oferta (cupón)

Si tu marca tiene configuradas ofertas o promociones, pero no cuenta con un programa Loyalty, también debes proporcionar un icono de oferta que se mostrará en la página del menú.

Puedes encontrarlo en la plantilla Figma aquí.

Requisitos:

• Tamaño de la imagen: 48 x 48 píxeles
• Formato de archivo: SVG
• Nombre del archivo: coupon.svg