Page 1

SITE TOCCA

APRESENTAÇÃO DA LINHA CRIATIVA

Imagem meramente ilustrativa.


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.

obs: layout aprovado no dia 8 de novembro.


7 obs: layout aprovado no dia 8 de novembro. Alteração realizada: expansão do menu superior.

PÁGINA INICIAL | DETALHAMENTO

O cabeçalho foi resumido aos itens de mais importância, buscando minimizar o excesso de itens que havia antes.

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 Classificados foram recolocados em boxes, garantindo grande destaque e dividindo o peso que havia antes no cabeçalho.


8

PÁGINA INICIAL | IMAGENS DO CARROSSEL DE FOTOS

obs: layout aprovado no dia 18 de novembro.


9

PÁGINA INICIAL | IMAGENS DO CARROSSEL DE FOTOS

obs: layout aprovado no dia 18 de novembro.


10

PÁGINA INICIAL | IMAGENS DO CARROSSEL DE FOTOS

obs: layout aprovado no dia 18 de novembro.


11

PÁGINA INICIAL | DETALHAMENTO

obs: layout aprovado no dia 8 de novembro. Alteração realizada: substituição dos cursos.

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.


12

PÁGINA CADASTRE-SE | OVERVIEW


13

PÁGINA INICIAL | DETALHAMENTO

obs: layout aprovado no dia 8 de novembro.

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 “efetuar minha matrícula agora!”, que direciona o usuário para o pagamento da matrícula. Valores apenas demonstrativos, serão atualizados futuramente.


14

PÁGINA INICIAL | DETALHAMENTO

obs: layout aprovado no dia 8 de novembro. Alteração realizada: adição dos “Patrocinadores” e substituição da imagem do canto inferior direito.

Botões para todos os parceiros TOCCA, com hyperlinks para suas homepages e navegação horizontal.

Rodapé do site com as informações principais.


15

AGENDA | OVERVIEW E DETALHAMENTO

obs: layout aprovado no dia 8 de novembro.

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.


16

EQUIPE | OVERVIEW

obs: layout aprovado no dia 8 de novembro. Alteração realizada: nomes dos integrantes

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.


17

FALE CONOSCO | OVERVIEW

obs: layout aprovado no dia 8 de novembro.

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.


18

EMPRESA | OVERVIEW

obs: layout aprovado no dia 18 de novembro.

Na construção da página “Empresa”, as páginas “Missão” e “Depoimentos” foram assimiladas por conteúdo compatível. O resultado foi uma página com mais conteúdo com menus animados. A parte superior, onde há um box cinza, é um espaço que foi reservado para as fotografias da sede da TOCCA Pet Escola.


19

EMPRESA | DETALHAMENTO

obs: layout aprovado no dia 18 de novembro.

Os depoimentos deixam de ser uma página estática, tornando-se um menu animado na lateral direita da página. Os depoimentos sobre a TOCCA serão mais visíveis e de fácil acesso ao usuário. Sugerimos que a própria TOCCA colete os depoimentos e insira no gerenciador. Isso fará com que o conteúdo dos depoimentos seja sempre filtrado pela empresa antes de ir para o ar, evitando conteúdo indesejável. Cada depoimento será separado por autor. Clicando no seu nome, expande-se um box revelando todo o conteúdo. Mais abaixo, setas indicam a adição de mais conteúdo e navegação entre os demais depoimentos.


20

NOTÍCIAS | OVERVIEW E DETALHAMENTO

obs: layout aprovado no dia 18 de novembro.

A página “Notícias” foi adaptada para se assemelhar à portais de notícias. Cada item fica disposto verticalmente com um limite de caracteres, caso o usuário se interesse pela notícia, ele pode clicar no botão “leia mais”, que fará com que o restante do conteúdo se expanda. A data fica na lateral esquerda, em destaque, e há a possibilidade de navegar para notícias mais antigas, clicando no botão “mais antigas” na parte inferior. Outra novidade é a possibilidade de inserir uma imagem, opcional por item. Essa imagem também pode ser ampliada para melhor visualização.


21

POLÍTICA DE PRIVACIDADE | OVERVIEW

obs: layout aprovado no dia 18 de novembro.


22

CLASSIFICADOS | OVERVIEW E DETALHAMENTO

obs: layout aprovado no dia 22 de novembro.

O nome da página “Vagas” foi alterado para “Classificados” por conta do seu uso: anunciantes a utilizam para anunciar vendas, currículos e vagas de emprego. O link para divulgação, que foi movido para fora do bloco do texto, agora se encontra dentro da imagem de um “post it”, com destaque para facilitar o acesso. O design dos anúncios foi totalmente reconstruído, resultando em uma página mais atraente e com melhor visualização. A data dos anúncios, que antes não existia, foi inserida à esquerda, com destaque. Os anúncios ficarão em ordem de crescente, ou seja, os mais atuais no topo. Na parte superior identificamos as informações principais do anunciante: o título, identificação do anunciante e cidade. O corpo do anúncios foi dividido em duas colunas: à esquerda a descrição, e à direita as demais informações do anúncio. Sugerimos que os anúncios com mais de 1 ano de data sejam ocultados.


23

CLASSIFICADOS - FICHA DE CADASTRO | OVERVIEW

obs: layout aprovado no dia 22 de novembro.


24

PARCEIROS | OVERVIEW

obs: layout aprovado no dia 22 de novembro.


25

EVENTOS | OVERVIEW

obs: layout aprovado no dia 22 de novembro.

A página de eventos foi reconstruída para agrupar a “Galeria de Eventos”, “Eventos TOCCA Pet Escola” e “TV TOCCA”, dessa forma, o usuário não precisa mudar de página para visualizar estes conteúdos que são análogos. A página também ficou mais completa e com mais recursos. À esquerda, a Galeria de Eventos e à direita os Eventos TOCCA Pet Escola e a TV TOCCA. A seguir apresentamos o detalhamento de cada item.


26

EVENTOS | DETALHAMENTO

A Galeria de Eventos ganha maior destaque e equilíbrio, pois as miniaturas sequem um padrão de tamanho. Ao clicá-las, a foto é ampliada, como no exemplo na página a seguir.

obs: layout aprovado no dia 22 de novembro.

Os Eventos da TOCCA Pet Escola tomam lugar no layout na parte direita, por ordem crescente de eventos mais recentes. As datas ficam sempre em destaque. Ao clicar no “Nome do Evento”, expande-se mais informações como: descrição, horário e local.


27

EVENTOS | DETALHAMENTO

Ampliação da imagem da Galeria de Eventos.

obs: layout aprovado no dia 22 de novembro.


28

EVENTOS | DETALHAMENTO

obs: layout aprovado no dia 22 de novembro.

Os vídeos da TV TOCCA também fica, ao lado direito do layout, abaixo dos Eventos TOCCA.

Galerias dos demais eventos.


29

CLIPPING | OVERVIEW E DETALHAMENTO

obs: layout aprovado no dia 22 de novembro.

A página de Clipping oferece duas possibilidades: inserir matérias on-line e matérias impressas escaneadas À direita, a matérias on-line possuem os detalhes de Título da Notícia, data da publicação e site de origem. Ao clicar sobre o link, o usuário é direcionado para a página da notícia. Essas notícias ficam separadas por ano de publicação, sendo que o topo é o ano atual. Ao clicar no ano desejado, expande-se um menu com as notícias. À esquerda do layout, espaço para matérias escaneadas. A última matéria inserida sempre fica no topo e em maior formato. Sobre a imagem, é possível inserir a seguintes informações: Título da notícia, data e fonte. Ao clicar sobre a imagem ela é ampliada, veja o exemplo na página a seguir.


30 obs: layout aprovado no dia 22 de novembro.

Ampliação da matéria do Clipping. A imagem serão ampliada para seu tamanho original. Imagem meramente ilustrativa.


31

FRANQUIA - INSTITUCIONAL | OVERVIEW

obs: layout aprovado no dia 28 de novembro.


32

SITE RESPONSIVE VISUALIDADE DA PÁGINA INICIAL EM DIVERSOS DISPOSITIVOS


MONITOR LAPTOP OU DESKTOP

Imagem meramente ilustrativa.

33


TABLETS

Imagem meramente ilustrativa.

34


SMARTPHONES

Imagem meramente ilustrativa.

35


Apresentacao site TOCCA v6  
Read more
Read more
Similar to
Popular now
Just for you