1. - Café.art.br

REBELDES
Com Causa
Direitos reservados © Brivo Comunicação 2014
O Conceito
“Com Causa”
O reposicionamento da Reserva se baseia na identificação que a marca
já possui com o tema Causas Sociais, enfatizando projetos e campanhas
realizadas dentro desse tema, além de apoiar e permitir a divulgação
de ONG’s com as quais a Reserva de identifica.
O Papel
da Brivo
A Brivo tem como objetivo traduzir visualmente esse reposicionamento
para o cliente Reserva, fazendo essa transição de forma clara, porém fiel
à identidade já consolidada da marca.
Para isso, a Brivo possui foco em todo o processo, desde a arquitetura
da informação, disposição de conteúdos visuais, até a experiência
final que o usuário terá no site, bem como sua integração ao ambiente
de e-commerce atual.
Layout
e Interatividade
Nesta segunda etapa, apresentamos propostas visuais de como
o conteúdo será exibido em algumas área do site. Estabelecemos
critérios de uso das cores, tipografia da marca, estilo de fotos, botões
e sugestões de interatividade geral do site.
A ideia é que o site seja visualmente impactante e possua uma navegação
diferenciada, proporcionando assim, uma experiência única ao usuário.
Layouts
iniciais
Obrigado.
1. home
1
1. Header
Menu reduzido, estilo “mobile”
para manter o visual clean
do site + botão para visualizar
a versão em inglês e logo da
Reserva, para que o usuário
possa voltar ao e-commerce.
2
2. Home
Fundo com video ou foto
impactantes + logo “rebeldes
com causa” e botão de “saiba
mais” linkando para a área
“sobre” do site.
2. menu
1
1
1. Menu Diferenciado
A ideia é que a experiência do
usuário seja única e diferenciada
desde a abertura do menu.
Para isso, pensamos em um menu
feito de imagens, que ocupe toda
a tela e seja dividido em blocos
correspondentes a cada uma das
áreas do site.
2. menu
1. Hover Menu
Cada bloco possui letterings,
fotos com texturas e elementos
gráficos diferentes, que serão
animados no momento do hover,
tornando a navegação ainda mais
interativa.
1
3. rebeldes
1
1. Fotos dos Rebeldes
A ideia é que essa área funcione
como um jogo de encaixe.
É póssível visualizar as infos
básicas de cada rebelde/causa
de forma interativa, promovendo
também compartilhamento
em redes sociais.
1
2
2. Call to Action
Os blocos dos rebeldes se alternam
também com blocos maiores que
possuem chamadas para as causas
e compartilhamento social.
2
3. rebeldes
1
1
2
1. Hover dos Rebeldes
Ao passar o mouse sobre as fotos,
as infos básicas de cada rebelde/
causa aparecem e “empurram” os
outros blocos para baixo ou para
o lado, rearranjando a estrutura.
4. perfil rebeldes
1
2
2
1
1. Video
Ao clicar no rebelde escolhido,
abre-se uma nova tela com trecho
do video do rebelde ao fundo
em looping, e botão de “play”
para ver o video completo.
2. Perfil Rebelde
Por cima do video, aparece o perfil
completo da causa e do rebelde
+ botões de compartilhamento
em redes sociais.
4. perfil rebeldes
1
2
2
1
1. Video
Ao clicar no rebelde escolhido,
abre-se uma nova tela com trecho
do video do rebelde ao fundo
em looping, e botão de “play”
para ver o video completo.
2. Perfil Rebelde
Por cima do video, aparece o perfil
completo da causa e do rebelde
+ botões de compartilhamento
em redes sociais.
4. perfil rebeldes
1
2
1
1. Video
Ao clicar em “play”, é possível
ver o video completo, ocupando
toda a tela.
Versão
mobile
Obrigado.
1. home
1
1. Header
Menu reduzido, para manter o visual clean do site + botão para visualizar
a versão em inglês e logo da Reserva, para que o usuário possa voltar ao e-commerce.
2. Home
Fundo com foto impactantes + logo “rebeldes com causa” e botão de “saiba mais”
linkando para a área “sobre”do site.
2
2. menu
1
1. Menu Diferenciado
O menu mobile é um pouco mais simplificado que o desktop e como não possui
hover, as animações já acontem assim que ele é aberto, porém de forma mais sutil.
3. rebeldes
1
1. Fotos dos Rebeldes
No mobile essa área continua sendo blocada, porém a ideia é que cada bloco seja
um slide individual. Ao tocar na tela, é possivel interagir com o a foto do rebelde,
movendo para cima e para baixo, ou para os lados e visualizar sua descrição,
redes socias, etc.
2
2. Call to Action
Os blocos maiores, também podem conter diferentes chamadas para as causas
e compartilhamento em redes sociais.
3. rebeldes
1
1. Fotos dos Rebeldes
No mobile essa área continua sendo blocada, porém a ideia é que cada bloco seja
um slide individual. Ao tocar na tela, é possivel interagir com o a foto do rebelde,
ou visualizar sua descrição, redes socias, etc.
2
2. Call to Action
Os blocos maiores, também podem conter diferentes chamadas para as causas
e compartilhamento em redes sociais.
4. perfil rebeldes
1
1. Fundo
Ao clicar no rebelde escolhido, abre-se uma nova área com uma foto/frame do video
do rebelde ao fundo.
2. Perfil Rebelde
Por cima da foto, aparece o perfil completo da causa e do rebelde, botão de “play”
linkando para o video no youtube/vimeo e botões de compartilhamento em redes sociais.
2
Obrigado.