Recetas de diseĂąo para Cornershop
IntroducciĂłn Recetas de diseĂąo para Cornershop.
Introducción
Acerca de este libro Este libro es una guía de diseño para Cornershop. Al igual que un libro de cocina, contiene instrucciones, ingredientes y cantidades que, como cualquier receta, buscan conseguir deleite y alegría en quienes la prueben. Las secciones de este libro fueron pensadas para ser seguidas por cualquiera. Ya sea que estés haciendo una presentación en Google Docs o usando una aplicación de Adobe. El sartén no hace al cocinero—sólo el amor por la cocina. Está permitido experimentar y mejorar las recetas a gusto.
2
La marca La marca de Cornershop incluye nuestro nombre, el logo (que incluye la gráfica del canasto o ”Canastoldo”), el término "Shopper", y cada frase que identifique nuestros servicios. Esto incluye, por ejemplo, nuestra promesa de entrega en "Menos de 90 minutos".
La marca
Logo
2. El logo sin “Canastoldo” Esta es la versión recomendada para los productos, la web, y
La marca de Cornershop siempre debe estar bien espaciada
el material promocional.
y en la posición correcta respecto a su contexto.
1. El logo con tipografía Ésta es la versión más clásica del logo. Considera W como el alto de la “C” en Cornershop
3. El logo con tipografía horizontalmente Sólo disponible para marketing, permite combinar el logo y el "Canastoldo" horizontalmente.
Considera W como el alto de la “C” en Cornershop
Considera W como el alto de la “C” en Cornershop 4
Casos y variaciones según uso
c. Evita usar el logo con la tipografía horizontalmente
Cuando requieras usar la marca, presta especial atención y
En ciertos contextos, el elemento de “Canastoldo” puede re-
cuidado con siguientes problemas:
sultar distractor. Sólo usa esta combinación cuando el espacio vertical te sea reducido y requieras más atención por par-
a. Al usar el “Canastoldo”, adáptalo al contexto.
te del espectador—como un anuncio promocional.
Si el fondo es negro, el elemento de manilla y las barras verti-
Considera, además, que estás utilizando más espacio hori-
cales deben cambiarse a blanco.
zontal del necesario. Se sugiere enérgicamente usar el logo sin canastoldo.
d. No uses el “Canastoldo” sin incluir la tipografía La marca está definida por la palabra “Cornershop” y no puede ser mostrada opcionalmente.
b. Si el fondo tiene más de un color, evita el “Canastoldo”. En su lugar, usa la marca con el logo sin el “Canastoldo” . De lo contrario, es posible que estés haciendo la marca difícil de identificar. 5
La marca
Cómo no usarla La marca de Cornershop nos representa e identifica. Nunca la modifiques ni alteres de ninguna forma. No debes: 1. Rotar o cambiar la dirección del logo. 2. Animar el logo. 3. Añadir otros elementos al logo. 4. Cambiar los colores del logo. 5. Añadir efectos al logo. 6. Usar gráficos similares al logo que se podrían confundir con éste.
6
traslúcida. Cada caso y contenido es diferente, pero como
La marca
Colores
regla primordial, utiliza un nivel opacidad mayor al 90%.
Estos colores mantienen el equilibrio y la consistencia entre nuestros productos. En términos culinarios sencillos, son el aceite de oliva a la cocina italiana.
Color
●
Pantone
Valor RGB
Hexachrome Black C
36 36 36 Utiliza el color ● 1788 C exclusivamente para el logo y mate-
●
1788 C
240 54 54
●
1785 C
255 67 81
rial promocional. Para elementos de interfaz tales como botones, utiliza la variación más clara ● 1785 C
Botón Cuando requieras superponer la marca con algún conteni-
Para más información acerca de la aplicación de colores en
do, no utilices colores. Especialmente no uses el color gris.
interfaces, consulta Colores en Interfaces.
Utiliza blanco o negro, dependiendo si el contenido es oscuro o claro. Si la legibilidad lo permite, puedes hacer la marca 7
La marca
Tipografía
Cornershop
Utiliza estas tipografías según los contextos indicados para garantizar consistencia e impacto visual.
Cornershop Hurme Geometric No 4 1.
Cornershop
Para aplicar en nuestra marca (Semibold).
64pt
48pt
36pt
Cornershop 24pt 2.
Para aplicar en submarcas y divisiones (Light).
Cornershop 18pt
Avenir Next
Avenir Next 1.
Para aplicar en la web.
2.
Para aplicar en material promocional.
3.
Para todas las demás aplicaciones.
Avenir Next Avenir Next
64pt
48pt
36pt
Avenir Next 24pt Avenir Next 18pt
8
Interfaces Introducciรณn a los conceptos y estructura de las interfaces de Cornershop.
Figura La interfaz de catálogo en iOS.
Interfaces
Catálogo El catálogo de Cornershop permite navegar las tiendas para encontrar productos. La presentación del catálogo debe ser representada jerárquicamente en cuatro niveles:
1. Tiendas Lista de tiendas cercanas. 2. Detalle de la tienda Los clientes esperan la misma presentación del catálogo en
Muestra las diferentes secciones de la tienda.
todas las interfaces. No hay necesidad de un cliente deba
3. Colección de productos
aprender distintas maneras para utilizar Cornershop.
Lista la colección de productos pertenecientes a una sección
No introduzcas nuevos niveles o cambies el orden de la pre-
de la tienda, como un pasillo o un departamento.
sentación.
4. Detalle de producto
No uses menús laterales o de “hamburguesa”.
Muestra la descripción de un producto y permite agregarlo al carro.
10
2. Decoración
Interfaces
Colores
El color no debe ser utilizado sólo por el propósito de deco-
Las interfaces de Cornershop utilizan el color a continuación
tallas.
rar. Evita utilizar el color para fondo de barras, menús o pan-
para indicar interactividad y selección en los elementos de la interfaz, además de presentar una estética distintiva que representa la marca Cornershop. Color
Pantone
Valor RGB
●
1785 C
255 67 81
1. Interactividad
3. Legibilidad
Utiliza el color para indicar que elementos de la interfaz se
Presta especial atención en mantener contraste entre los ele-
pueden seleccionar.
mentos de la interfaz y el contenido. También ten cuidado de garantizar la legibilidad del texto al utilizar color.
Sin color, los controles pueden parecer estar deshabitados.
11
3. Prefiere utilizar la marca “Tienda”
Interfaces
Material promocional
A menos que estés creando material promocional para una
Asegúrate de que tu material promocional cumpla con estos
cio o en su defecto “Tienda”.
tienda en especial o estés autorizado, utiliza un nombre ficti-
requisitos.
1. Mantén tu barra de estado en regla Para screenshots de las aplicaciones, asegúrate que la barra de estado no contenga el nombre de tu operador telefónico o el nivel de batería. En iOS la hora debe ser 9:41 AM.
2. Utiliza material de alta calidad Utiliza material oficial o de alta calidad. Por ejemplo, si necesitas mostrar un iPhone o la marca de “App Store”, utiliza el material promocional diseñado por Apple.
12
Interfaces
Tipografía El texto en las interfaces no debe tener un tamaño menor a 11 puntos para asegurarte que sea legible. Siempre prefiere la tipografía sans serif del sistema:
Plataforma
Tipografía
iOS, watchOS, y tvOS
San Francisco
Android
Roboto
macOS, Windows y otros
Avenir Next
En la web, puedes utilizar este código CSS: .cornershop { font-family: "Avenir Next", Avenir, sansserif; }
13
Promociones Hacer material de marketing para ser usado con el catรกlogo.
Promociones
Material de marketing Este capítulo fue creado para ayudar a promover correctamente la afiliación de una marca o producto con Cornershop.
Antes de comenzar Asegúrate de: 1. Leer las guías y requerimientos de material de marketing. 2. Usar un mensaje directo y claro para comunicarse. 3. Hacer tu propio diseño, no imitar el material de Cornershop o su tipografía.
15
Promociones
Arte promocional El arte promocional es una imagen para promocionar una sección del catálogo.
Componentes: • Área para arte: Debes mantener los elementos importantes como caras, productos o talento en el área verde. Incluye el contenido esencial aquí para que no sea cortado u obstruido.
Márgenes
• Texto: No incluyas imágenes, elementos, o un fondo que pueda afectar la legibilidad en el área roja. Debes garan-
Área para arte
tizar que texto pueda ser leído encima de este área. • Márgenes: Puedes incluir arte suplementario. No inclu-
Texto
yas caras u otros elementos importantes. Usa el área amarilla para balancear el arte.
16
Buenas prácticas • Evita agregar nombres, mensajes de marketing y logos al
• Evita cortes abruptos de cabezas., partes del cuerpo, u
arte:
otros elementos:
• El arte debería usar el tamaño completo disponible:
• Usa imágenes de alta resolución. No permitas upscaling:
17
Políticas No se permitirá arte promocional si incluye cualquiera de los siguientes: • Direcciones de sitios web. El arte no debe contener o mostrar ninguna URL. • Iconos de apps. Por favor utiliza un logo o título en el arte, no un icono. • La palabra “Cornershop” o el logo de Cornershop. • Una representación visual de un dispositivo (Android, iPhone, iPad, etc) o cualquier interfaz de software de Cornershop. • Referencias a precios, como por ejemplo “En oferta”, “Bajo precio”, “Descuento”, o “Promo”. • Referencias a drogas o violencia. • Imágenes o lenguaje que se puede interpretar como racista, misógino, u homofóbico. • Marcas de terceros sin autorización o derechos de uso.
18
Formato de entrega
• Propuesta de título
Para el arte promocional debes entregar:
El título se muestra en el área de texto de la imagen y no puede ser más largo que dos líneas. Si el fondo es oscuro, debes especificar que el contenido es claro o no se mostrará correc-
Arte promocional
tamente.
Tamaño: 1360 x 552 píxeles Resolución: 72 dpi Formato: PNG Color Space: RGB
También debes especificar: • Color de fondo El color de fondo se mostrará mientras la imagen está siendo descargada. Proveer un color de fondo mejora significativamente la experiencia en las aplicaciones y es obligatorio. Por ejemplo, si la mayoría del arte es naranjo, puedes elegir un color anaranjado. 19
Promociones
Departamentos Un Departamento Promocional es un tipo de sección especial del catálogo para promocionar una colección de productos. Contiene opciones adicionales de marketing como imágenes y descripciones.
Debes proporcionar las descripciones para: • Nombre: Un nombre para mostrar en la navegación. • Título: Un mensaje directo, claro, y breve que describe la promoción. • Pasaje: Un párrafo para comunicar las condiciones requeridas para participar en la promoción u otros detalles importantes. • Aviso legal: Las condiciones generales de la promoción. Importante: Recuerda mantener brevedad y claridad en los mensajes. De lo contrario, desperdiciarás espacio para mostrar productos.
20
Descripción adicional
• Arte con detalles que no sean legibles en representaciones pequeñas.
Si la promoción requiere mostrar más información que no puede ser incluida en el pasaje o en el aviso legal, puedes
• Incumplimiento de las políticas descritas en la sección de
incluir un texto de descripción adicional.
“Arte Promocional”.
Esta presentación soporta múltiples párrafos y estará disponible desde el menú “Más información” al seleccionar la cabe-
Formato de entrega
cera de promoción
Para el arte de departamento debes entregar: Arte de departamento
Arte de departamento
El arte de departamento es una imagen que acompaña la
Tamaño: 800 x 800 píxeles
descripción de una promoción. Se recomienda cualquiera de los siguientes:
Resolución: 72 dpi
• Logo de una marca o producto con afiliación a Cornershop.
Formato: PNG
• Arte de una marca o producto en promoción. Color Space: RGB No se permitirá arte de departamento que incluya:
Nota: No debes agregar bordes redondeados a tu imagen. Los bordes serán agregados por el catálogo.
• Texto de cualquier tipo incluyendo frases promocionales.
21
Información de promoción
Promociones
Productos
Para destacar que el producto participa en una promoción,
Los productos del catálogo pueden personalizarse para des-
un icono de promoción. Este icono se puede personalizar.
se puede especificar un título y mensaje para mostrar junto a
tacar una promoción:
Información de envío Si una promoción se relaciona con el servicio de envío, se puede especificar un título y mensaje para mostrar junto a un icono de entrega.
Etiqueta Una etiqueta es un texto breve que acompaña a las celdas de producto. Puedes indicar, por ejemplo, que el servicio de envío es gratis con la etiqueta “Envío gratis”.
22
Extras
Extras
Sopa de lentejas Si reproduces “Maybe I’m Amazed” de Paul McCartney hacia atrás, se escucha la receta de una rica sopa de lentejas. Ésta es la transcripción de la receta oculta:
• Una cebolla mediana, picada • Dos cucharadas de aceite vegetal • Un diente de ajo, machacado • Una taza de zanahorias, picadas • Dos tallos de apio, picados • Media taza de lentejas Video 5.1 Paul McCartney en The Simpsons
• Una hoja de laurel
Un extracto del episodio “Lisa the Vegetarian” de la sépti-
• Una cucharada de perejil picado
ma temporada.
• Sal y pimienta al gusto • Dos tazas y cuarto de caldo de verduras o agua 24
Canastoldo Parte de la marca de Cornershop, es la figura con forma de canasto que aparece encima de “Cornershop�.
Related Glossary Terms Drag related terms here
Index
Find Term
Shopper Una persona entrenada hace lo mejor posible para comprar tu pedido. Siempre busca las mejores frutas y verduras, tal como el cliente las hubiera elegido.
Related Glossary Terms Drag related terms here
Index
Find Term