O documento fornece diretrizes para a criação visual do menu e vitrine do site Submarino.com, definindo modelos comerciais, estruturas, layouts e regras para exibição de produtos, campanhas, departamentos e informações de forma intuitiva e alinhada à identidade da marca.

1. Projeto
Visual
Menu
Vitrine
Submarino
2014
Criação
Submarino.com
Rio
de
Janeiro
21
de
julho
de
2014.

2. 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.

3. Modelos
comerciais
de
exposição
no
menu:
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.
3.
Plano
de
mídia
(Prioridade)
Expõe
mídias
de
produtos
negociados
pelo
plano
de
mída
Submarino.com.

4. 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.
TÍTULO
e
SUBTÍTULO:
Não
alterar
sem
aprovação
dos
responsáveis.
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

5. A:HOVER:
Border:
1px
COLOR:
#FFCB08

6. 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.
TÍTULO
e
SUBTÍTULO:
Não
alterar
sem
aprovação
dos
responsáveis.
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

7. A:HOVER:
Border:
1px
COLOR:
#00ADEF

8. 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.

9. Layout
e
Estrutura
dos
Modelos
Comerciais
…….

10. 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
Caixa
Título
Menu
Base
e
Sombras
para
imagem:
Base
para
aplicação
dos
produtos
TEXTO:
Aplicar
nas
configurações
de
TEXTOS
Width
550px
Height
495px

11. 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

12. Modelos
comerciais:
2.
Seleção
de
Produtos
Estrutura
TÍTULO
do
MENU:
Não
alterar
sem
aprovação
dos
responsáveis.
+
ou
-­‐
60%
de
texto
Caixa
Título
Menu
Base
do
Produto:
Base
para
aplicação
dos
produtos
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.

13. Modelos
comerciais:
3.
Plano
de
Mídia
TÍULO
DO
DEPARTAMENTO:
+
ou
-­‐
50%
de
texto
Estrutura
Caixa
Título
Menu
Base
do
Produto:
Inserir
imagem
da
campanha
de
mídia
do
produto
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
.

14. Layout
LIVROS
…….

15. DIAS
D:
Replicas
do
Destaque
no
Menu.
Modelo:
Dia
D

16. ARTE
ESPECIAL
LIVROS:
Prateleira
de
Livros.
Modelo:
Seleção
de
Produtos

17. Modelo:
Faixas
de
Descontos

18. Modelo:
Plano
de
Mídia

19. Layout
GAMES
…….

20. Modelo:
Dia
D

21. Modelo:
Seleção
de
Produtos

22. Modelo:
Faixas
de
Descontos

23. Modelo:
Plano
de
Mídia

24. Layout
TELEFONIA
…….

25. Modelo:
Dia
D

26. Modelo:
Faixas
de
Descontos

27. Modelo:
Seleção
de
Produtos

28. Modelo:
Plano
de
Mídia

29. Layout
INFORMÁTICA
…….

30. Modelo:
Dia
D

31. Modelo:
Faixas
de
Descontos

32. Modelo:
Seleção
de
Produtos

33. Modelo:
Plano
de
Mídia

34. Layout
ELETRÔNICOS
…….

35. Modelo:
Dia
D

36. Modelo:
Faixas
de
Descontos

37. Modelo:
Seleção
de
Produtos

38. Modelo:
Plano
de
Mídia

39. Layout
ELETRODOMÉSTICOS
…….

40. Modelo:
Faixas
de
Descontos

41. Modelo:
Seleção
de
Produtos

42. Modelo:
Plano
de
Mídia

43. Layout
ELETROPORTÁRTEIS
…….

44. Modelo:
Faixas
de
Descontos

45. Modelo:
Seleção
de
Produtos

46. Modelo:
Plano
de
Mídia

47. Layout
MOVÉIS
…….

48. Modelo:
Faixas
de
Descontos

49. Modelo:
Seleção
de
Produtos

50. Modelo:
Plano
de
Mídia

51. Layout
MODA
…….

52. Modelo:
Faixas
de
Descontos

53. Modelo:
Seleção
de
Produtos

54. Modelo:
Plano
de
Mídia

55. Layout
VIAGENS
…….

56. Modelo:
Plano
de
Mídia
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.
TEXTOS:
Coerência
na
quanKdade
de
informação.

57. Obrigado!