Issuu on Google+

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



Apresentação site Tocca