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.
maite.com.br
Reestruturação, redesenho e montagem em html e css do site da atriz Maitê Proença
Minhas tarefas
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.
Reconhecendo e redefinindo o terreno
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:
- Claro e objetivo
- Disruptivo / experimental / vanguarda
- Otimista nas suas cores e imagens
No que dizia respeito a sua estrutura:
- Diminuir setorização
- Arrumar conteúdo de forma mais inteligente
- Separar profissional do pessoal
- Tratar clipping de forma diferente
- Sugerir conteúdo novo
- Integrar com redes sociais – facebook e instagram
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.
Layouts
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.
HTML e CSS
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.
Antes e depois
Mais portfólio
- maite.com.brReestruturação, redesenho e montagem em html e css do site da atriz Maitê Proença
- Aplicativo SGU Aluno PUC-RioDesign de interface para aplicativo da PUC-Rio