Em 2015 a atriz Maitê Proença decidiu que estava na hora de mudar seu branding pessoal e sua presença virtual.
Ela contratou para essa tarefa o escritório de branding AVO, que se juntou com a Realejo, empresa para a qual eu fazia freelas e juntos repensamos seu site pessoal e profissional.
Como designer freelancer, participei da reestruturação e da criação do novo conceito e identidade visualdo do site da atriz.
Também fui responsável pela montagem do site em HTML e CSS.
Iniciamos a reestruturação do site, definindo junto com a atriz como sua presença online deveria refletir a sua personalidade. Depois de algumas reuniões, chegamos a alguns pontos considerados essenciais para o novo site.
Com relação ao seu visual, ele deveria ser:
No que dizia respeito a sua estrutura:
Definidos esses pontos, sugerimos a nova estrutura. Com a ideia de simplificar sua navegação, mas sem eliminar muito conteúdo, reorganizamos as páginas e sua distribuição no mapa do site. Essa estrutura foi sendo melhor moldada ao longo do projeto, mas essa foi a nossa base para começar.
Nesta fase foi apresentado também um wireframe, com o objetivo de mostrar como o conteúdo poderia ser inserido no novo site. A ideia era brincar bastante com a navegação, com caixas que se descobrem, abrem e fecham e conteúdos apresentados como linhas do tempo.
Junto com os wireframes e a nova estrutura, apresentamos estudos de look and feel para decidirmos junto com a atriz o que melhor a representaria.
Por ser uma figura pública e uma mulher muito bonita, ficou claro, logo de início, que deveríamos usar e abusar do enorme acervo de imagens da atriz e que o site deveria ter um forte apelo visual.
Além das imagens, o texto também se tornou protagonista no projeto, pois além de atriz Maitê também é escritora e muitos dos seus textos estariam presentes no site. Escolhemos uma fonte forte e com bastante personalidade: Circular Std.
A paleta de cores foi definida com cores fortes e o para o texto e o cabeçalho escolhemos manter o preto, que apesar de ser uma cor neutra também imprime força.
Com a ideia de manter um caráter experimental e disruptivo, definimos que o layout teria um grid que transmitisse uma ideia de elementos flutuantes e que causasse um pequeno incômodo.
E esse incômodo aparece logo de cara no cabeçalho do site, onde o nome da atriz surge cortado.
A homepage é marcada pelo uso de imagens da atriz, que mudam cada vez que o usuário acessa o site ou volta pra sua página de abertura. O caráter lúdico também está presente na navegação da home.
Mantendo o espírito de navegação mais livre e layout sem muitas amarras, na página “Vida e Obra”, brincamos com textos, cores, imagens e espaços em branco.
Como a atriz já percorreu o mundo todo, a sessão “Viagens” deveria trazer todo esse conteúdo para seus fãs e a forma mais simples que encontramos de organizar esse enorme acervo foi agrupando-o geograficamente.
O caráter disrupitvo também foi trazido pras páginas com conteúdo textual, como por exemplo “Entrevistas” e “Crônicas”. No lugar de simples listas de textos e datas, decidimos que os títulos deveriam ficar mais soltos pela tela e os textos apareceriam na própria página, conforme o visitante fosse clicando.
Imagens, imagens e imagens, essa foi uma das forças predominantes no site. Usamos e abusamos de mega banners e muita cor.
Como etapa final da minha participação no projeto, fiquei encarregada de entregar o site em HTML e CSS.
E para que ele pudesse ser visualizado em qualquer dispositivo, foi montado de forma responsiva, fazendo uso da versão 3.3 do Bootstrap.
usabilidade ruim com menus que surgem e somem ao passar do cursor sobre os links
links colapsáveis com cores diferentes para cada nível
telas abrem em janelas separadas
mantivemos as telas abrindo em janelas separadas, a pedidos dos usuários
cores da paleta da BR, mais espaçamento entre gráficos e legendas
tela muito poluída, ilustrações detalhadas demais
maior espaçamento entre os ítens, ilustrações mais simples e objetivas
tela muito poluída, ilustrações detalhadas demais
maior espaçamento entre os elementos, ilustrações mais simples e claras
ilustrações misturadas com imagem, falta de unidade visual
ilustrações foram simplificadas, para dar foca às informações de monitoramento
as telas com mapas seguia uma identidade visual completamente diferente
aplicamos a mesma identidade visual criada para o sistema
