View
221
Download
4
Category
Preview:
DESCRIPTION
Projeto visual que transforma o menu da loja virtual em uma vitrine, com seleções das principais promoções e ofertas do site. Um menu atrativo que intima o usuário a navegar por todas opções e conhecer todas as promoções.
Citation preview
Projeto Visual
Menu Vitrine Submarino 2014 Criação Submarino.com
Rio de Janeiro 21 de julho de 2014.
Experiência Menu / Vitrine Tornar a experiência do usuário com o Menu Submarino uma sensação de vitrine única e especial, expondo os principais produtos e descontos do site, além de exibir claramente seus departamentos e suas respecKvas novidades.
Tópicos relevantes: 1. Layout intuiKvo, direto e limpo. 2. Focar na escolha das melhores imagens e promoções para exibição no menu/vitrine. 3. Alinhamento de equipe comercial para os três modelos de exposição de campanhas no menu. 4. Alinhar criaKvos para execução das peças de acordo com as regras e o guide.
Modelos comerciais de exposição no menu:
3. Plano de mídia (Prioridade) Expõe mídias de produtos negociados pelo plano de mída Submarino.com.
1. Faixa de descontos Expõe promoções e campanhas com faixas de descontos do departamento.
2. Seleção de produtos Expõe promoções e campanhas com seleções de produtos do departamento.
Estrutura: HotHot e Lançamentos
Três banners iguais com Títulos, SubYtulos, Background e Imagem do Produto
Títulos: 1 (uma) Linha respeitando o limite de 20px nas laterais (3 palavras). FAMILY: Arial SIZE: 18 (Regular) COLOR: #00ADEF Sub>tulos: 2 (duas) linhas respeitando o limite de 20px nas laterais esquerda e direita. FAMILY: Arial SIZE: 12 (Regular) COLOR: #7D7D7D
Apenas uma Imagem em destaque OBS: Em caso do ítem possuir mais produtos, escolher o que melhor se encaixa para o Hot Hot.
BANNER WOW: Mudar apenas o produto e o texto Respeitando os limites de conteúdo. Permanece selecionado com a borda de 1px a mesma do A:HOVER dos banners superiores. COLOR: #FFCB08
TÍTULO e SUBTÍTULO: Não alterar sem aprovação dos responsáveis.
A:HOVER: Border: 1px
COLOR: #FFCB08
Estrutura: HotHot e Lançamentos
Três banners iguais com Títulos, SubYtulos, Background e Imagem do Produto
Títulos: 1 (uma) Linha respeitando o limite de 20px nas laterais (3 palavras). FAMILY: Arial SIZE: 18 (Regular) COLOR: #00ADEF Sub>tulos: 2 (duas) linhas respeitando o limite de 20px nas laterais esquerda e direita. FAMILY: Arial SIZE: 12 (Regular) COLOR: #7D7D7D
Apenas uma Imagem em destaque OBS: Em caso do ítem possuir mais produtos, escolher o que melhor se encaixa para o Hot Hot.
BANNER PLANO DE MÍDIA: Não é será permiKdo artes fora Do contexto do site. Permanece selecionado com a borda de 1px a mesma do A:HOVER dos banners superiores. COLOR: #00ADEF
TÍTULO e SUBTÍTULO: Não alterar sem aprovação dos responsáveis.
A:HOVER: Border: 1px
COLOR: #00ADEF
Estrutura: Menu CoolStuff
TÍTULO e SUBTÍTULO: Não alterar sem aprovação dos responsáveis.
IMAGEM: Selecionar as melhores imagens da campanha e do produto para exibição no menu.
SELOS: Seguir o padrão de selos do Menu
CALL ACTION: Não alterar posição do Call AcKon.
Layout e Estrutura dos Modelos Comerciais …….
Modelos comerciais:
1. Faixa de descontos
TÍTULO do MENU: Não alterar sem aprovação dos responsáveis.
CALL ACTION:
+ ou -‐ 60% de texto Estrutura
Base e Sombras para imagem: Base para aplicação dos produtos
Caixa Título Menu
TEXTO: Aplicar nas configurações de TEXTOS
Width 550px
Height 495px
Modelos comerciais:
1. Faixa de descontos
TÍTULO do MENU: Não alterar sem aprovação dos responsáveis.
Títulos: 1 (uma) Linha respeitando o limite de até 60% da do banner. FAMILY: Gotham Rounded SIZE: 18 (Book) COLOR: #7D7D7D Sub>tulos: 1(linha) Também respeitando 60% dos limites do banner FAMILY: Gotham Rounded SIZE: 14 (Book) COLOR: #7D7D7D DESCONTOS e PREÇOS: 1(linha) Também respeitando 60% dos limites do banner. FAMILY: Gotham Rounded SIZE: 30 (Bold) COLOR: #00ADEF Textos ExplicaFvos e adicionais 1(linha) Também respeitando 60% dos limites do banner FAMILY: Arial SIZE: 12 (Regular) COLOR: #7D7D7D
CALL ACTION: Não alterar posição do Call AcKon em hipótese alguma.
+ ou -‐ 60%
Regras para aplicações de texto 1. O limite máximo de texto será as 4 linhas nas configurações padrão de texto indicada para o Menu. 2. Cada linha de texto deve possuir no MÁXIMO 60% da largura do banner. 3. A sequência das linhas podem mudar de disposição Sempre respeitando e mantendo a uKlização da área de 60% do banner. 4. Nunca altere o tamanho ou as cores das linhas de texto.
TEXTOS
Modelos comerciais:
2. Seleção de Produtos
TÍTULO do MENU: Não alterar sem aprovação dos responsáveis.
+ ou -‐ 60% de texto Estrutura
Base do Produto: Base para aplicação dos produtos
Caixa Título Menu
TEXTO: Aplicar nas configurações de TEXTOS Aqui vale as mesmas configurações de textos do banner de FAIXAS DE DESCONTOS.
CALL ACTION: Não alterar posição do Call AcKon.
Modelos comerciais:
3. Plano de Mídia
TÍULO DO DEPARTAMENTO:
+ ou -‐ 50% de texto
Estrutura
Base do Produto: Inserir imagem da campanha de mídia do produto
Caixa Título Menu
TEXTOS: Títulos: 1 (uma) Linha respeitando o limite de até 60% da do banner. FAMILY: Gotham Rounded SIZE: 20 (Medium) COLOR: #FFFFFF Sub>tulos: 1(linha) Também respeitando 60% dos limites do banner FAMILY: Arial SIZE: 14 (Regular) COLOR: #FFFFFF CALL ACTION:
Não alterar posição do Call AcKon.
Selos Destaques: Padrão do Menu, não alterar cor.
Base / Cores InsKtucionaiis: Não alterar as cores das vases em hipótese alguma sem autorização e aprovação dos responsáveis .
Layout LIVROS …….
DIAS D: Replicas do Destaque no Menu.
Modelo:
Dia D
ARTE ESPECIAL LIVROS: Prateleira de Livros.
Modelo: Seleção de Produtos
Modelo: Faixas de Descontos
Modelo: Plano de Mídia
Layout GAMES …….
Modelo:
Dia D
Modelo: Seleção de Produtos
Modelo: Faixas de Descontos
Modelo: Plano de Mídia
Layout TELEFONIA …….
Modelo:
Dia D
Modelo: Faixas de Descontos
Modelo: Seleção de Produtos
Modelo: Plano de Mídia
Layout INFORMÁTICA …….
Modelo:
Dia D
Modelo: Faixas de Descontos
Modelo: Seleção de Produtos
Modelo: Plano de Mídia
Layout ELETRÔNICOS …….
Modelo:
Dia D
Modelo: Faixas de Descontos
Modelo: Seleção de Produtos
Modelo: Plano de Mídia
Layout ELETRODOMÉSTICOS …….
Modelo: Faixas de Descontos
Modelo: Seleção de Produtos
Modelo: Plano de Mídia
Layout ELETROPORTÁRTEIS …….
Modelo: Faixas de Descontos
Modelo: Seleção de Produtos
Modelo: Plano de Mídia
Layout MOVÉIS …….
Modelo: Faixas de Descontos
Modelo: Seleção de Produtos
Modelo: Plano de Mídia
Layout MODA …….
Modelo: Faixas de Descontos
Modelo: Seleção de Produtos
Modelo: Plano de Mídia
Layout VIAGENS …….
Modelo: Plano de Mídia
TEXTOS: Coerência na quanKdade de informação.
IMAGEM: SOMENTE UMA IMAGEM Campanhas com layouts definidos só Autorização e aprovação prévia.
CALL ACTION: e SELOS Não alterar posição do Call AcKon.
Obrigado!
Recommended