O Portal do Instituto Natura é um espaço online dedicado à divulgação dos projetos sociais do grupo Natura. Estes projetos estão relacionados ao apoio à educação elementar, trabalhando em conjunto com governos do Brasil e alguns países da América Latina. Através do portal, os usuários podem ter acesso a informações sobre os projetos, bem como acompanhar o andamento das ações.
Após estudar o material do Instituto, foi dado início à diagramação dos wireframes, que é um estudo da hierarquia das informações em forma de protótipo. Após a aprovação inicial, por parte dos stakeholders do projeto, foi elaborado um design system enxuto, de forma a facilitar o trabalho de codificação da interface. Após a segunda aprovação, foi feita a diagramação final das interfaces, com aplicação de cores, imagens e textos de exemplo.
Para facilitar a navegação,
confira os trabalhos nas
divisórias a seguir:
Site Institucional
O site do instituto foi diagramado para ser um espaço focado em leitura de notícias e longos textos relacionados à projetos voltados para a educação. A diagramação foi realizada com espaçamentos em branco bem distribuídos que tornam a leitura agradável e com imagens bem relacionadas aos temas.
● Apresentação do site em dispositivos
Site Institucional
A seguir, confira algumas páginas da etapa de construção dos wireframes. Nesta fase foram realizados alguns testes, a fim de explorar formatos diferenciados para as divisórias de conteúdos. Devido a isso, algumas páginas ficaram um pouco diferentes umas das outras, no entanto, foi feita a unificação de estilo na etapa final.
● Seleção de telas de wireframes
Construção
Embora o portal tenha bastante conteúdo, o seu sistema de estilo é bastante enxuto, com poucas variações de fontes e cores. Abaixo, segue a versão normal e a adaptada para o modo noturno dos navegadores.
● Tabela de estilos normal
● Tabela de estilos adaptada
Diagramação
Devido ao prazo de construção do portal, foi fornecida um versão guia para o responsável pela codificação, com padrões mobile predefinidos a serem seguidos, a partir da observação da versão desktop. O projeto todo teve como foco a versão desktop — decisão tomada após análise de comportamento de usuários em plataformas de analytics.
● Exemplos de versão mobile
Diagramação
O site do instituto foi diagramado para ser um espaço focado em leitura de notícias e longos textos relacionados à projetos voltados para a educação. A diagramação foi realizada com espaçamentos em branco bem distribuídos que tornam a leitura agradável e com imagens bem relacionadas aos temas.
Contém as chamadas para as seções do site, podendo ser acessados tanto pelo menu superior, ou ao rolar a página. Possui chamadas com fotografias relacionadas aos seus respectivos temas.
● IMAGEM DA PÁGINA INICIAL DO SITE
A área superior do site possui algumas funcionalidades, como a posssibilidade
de mudar para versões do site em outros países, idiomas, visualizar as redes sociais, usar a função de busca
e acessar opções de acessbilidade, como alterar o tamanho da font, acessar a leitura por libras (plugin externo), e
modificar a interface para visualização em alto contraste.
Além disso, possui alguns menus flutuantes que, para acessá-los, basta passar o ponteiro
nas opções com seta.
● Mapa da parte superior do site
Contém o manifesto do instituto, além de chamadas para outras seções do site.
● Página do instituto A
● Página do instituto B contendo o poema
Possui uma linha do tempo da história do Instituto, separado por datas, cujo o conteúdo e as imagens de fundo se altenam
ao clicar no ano desejado, segundo o seu conteúdo.
Além disso, possui as listagens dos profissionais, bem como as suas respectivas fotos e hierarquia da empresa.
● Versão final da Home
Contém as listagens das notícias do site, a página do texto e os resultados de busca.
● Página de lista de notícias
● Página com a notícia aberta
● Página de busca por notícias
São semelhantes à página de lista de notícias, contendo materiais, como artigos com temas específicos e outros tipos de publicações.
● Tela de artigos
● Tela de publicações
Contém informações sobre os segmentos atuantes do grupo Natura, dentre eles, alfabetização, ensino médio, agendas prioritárias, educação para colaboradores Natura e outras iniciativas.
● Tela de alfabetização
● Tela de ensino médio
● Tela de agendas prioritárias
● Tela de consultores natura
● Tela de outras iniciativas
Aqui é possível encontrar informações sobre os resultados em números do Instituto Natura, separados por estados e municípios.
● Imagem do cadastro inicial
Direciona para notícias sobre o Instituto e outros textos, como política de privacidade e fale conosco.
● Tela saiu na mídia
● Tela política de privacidade
● Tela fale conosco
