SITE TOCCA
APRESENTAÇÃO DA LINHA CRIATIVA
2
APRESENTAÇÃO
Este documento contempla a Linha Criativa desenvolvida para o site, segundo as demandas da Instituição TOCCA. Nesta construção, optamos por uma linha de design “clean”, minimalista e moderna, na qual as imagens, as cores e os elementos foram cuidadosamente selecionados buscando transmitir credibilidade, profissionalismo e, além de tudo, bem estar: para os animais e para àqueles que os amam e cuidam. As imagens que seguem foram reconstruções de algumas páginas, entre elas: a página inicial, página da equipe, do fale conosco e da agenda. Este demonstrativo serve para que acompanhem a nossa produção, e, se for de interesse da TOCCA, a aprovação da linha. Estamos abertos à quaisquer considerações.
3
TIPOGRAFIA
Proxima Nova estende a distância entre fontes como Futura e Akzidenz Grotesk. O resultado é uma fonte híbrida que combina proporções modernas com uma aparência geométrica. Originalmente lançada em 1994, como Sans Proxima, expandiu- se em seis fontes originais (três pesos com itálico) em uma família completa e versátil de 42 fontes (seis pesos em três larguras com itálico). Nos últimos anos, Proxima Nova tornou-se uma das fontes mais populares da web, em uso em milhares de sites em todo o mundo.
4
PALETA DE CORES
Azul A cor azul possui grande poder de atração e representa modernidade e saúde. Por esse motivo, a selecionamos para representar a maior parte dos elementos do site.
Laranja Cor derivada do vermelho, mas com resultados um pouco mais moderados. Igualmente chamativa, foi utilizada para representar os destaques e seleções que o usuário venha a fazer no site
Cinza O cinza simboliza estabilidade, sucesso e qualidade. Sua neutralidade oferece equilíbrio e flexibilidade para o fundo das páginas.
5
AS PÁGINAS DESIGN E FUNÇÕES
6
PÁGINA INICIAL | OVERVIEW Sendo o primeiro contato, a página inicial irá garantir a permanência do usuário no site por um período maior de tempo. Nesta reconstrução, ela se apresenta de forma dinâmica, atrativa e de fácil navegação. A seguir, o detalhamento.
7
PÁGINA INICIAL | DETALHAMENTO
O cabeçalho foi resumido aos itens de mais importância, buscando minimizar o excesso de links que havia.
O carrossel de imagens foi reconstruído, o usuário pode navegar entre as imagens clicando nos botões em formato de “patinhas”, símbolo da Instituição. Serão utilizadas imagens que remetem à bem estar e profissionalização.
Os links para as páginas de Eventos, Agenda e Vagas foram recolocados em boxes, garantindo grande destaque e dividindo o peso que havia antes no cabeçalho.
8
PÁGINA INICIAL | DETALHAMENTO A grande inovação do layout da página principal é a representação dos cursos em blocos. Como produto principal, recebe seu devido destaque, além da fácil navegação do usuário para realizar a inscrição.
No menu lateral, respectivamente: • Botão para cadastramento; • Busca no google integrada ao site; • Botão da Agenda; • Plugin do facebook.
9
PÁGINA INICIAL | DETALHAMENTO Ao clicar no bloco do curso desejado, expande-se um box contendo todas informações sobre o curso: coordenador, duração, resumo do curso ofertado. Buscando facilitar a inscrição, foram adicionadas informações como o valor do curso e o botão “inscreva-se agora”, que direciona o usuário para o site do Pag Seguro, onde ele poderá escolher a melhor opção de pagamento.
10
PÁGINA INICIAL | DETALHAMENTO
Botões para todos os parceiros TOCCA, com hyperlinks para suas homepages e navegação horizontal.
Rodapé do site com as informações principais.
11
AGENDA | OVERVIEW E DETALHAMENTO
A agenda foi reconstruída para facilitar sua navegação. Permanecendo o calendário trimestral, o usuário poderá visualizar os cursos previstos para início sem ser direcionado para outra página. E, ainda, clicando sobre o curso de interesse, é expandido um menu com as informações adicionais.
12
EQUIPE | OVERVIEW
A página da equipe possui um novo layout onde o usuário pode visualizar todos os integrantes e, clicando sobre o box, o menu expande-se contendo informações detalhadas de cada um. Foram adicionados botões para páginas sociais e e-mail dos integrantes. Sugerese o envio ou a produção de novas fotografias, em boa resolução(serão inseridas nos quadrados em branco), e informações sobre os canais de comunicação de cada integrante TOCCA.
13
FALE CONOSCO | OVERVIEW
Plugin do Google Maps, indicando a localização da TOCCA no mapa.
Informações importantes, como: telefone, endereço e e-mail para contato.
Formulário de contato, com assuntos padronizados TOCCA.
14
SITE RESPONSIVE VISUALIDADE DA PÁGINA INICIAL EM DIVERSOS DISPOSITIVOS
MONITOR LAPTOP OU DESKTOP
15
TABLETS
16
SMARTPHONES
17