Rubens Castro's profileElaine Navarro's profile

Website SESC Sorocaba

Website SESC Sorocaba
Hotsite de inauguração da nova unidade do SESC em Sorocaba

Link: sescsp.org.br/sorocaba
 
O hotsite do SESC Sorocaba conta com integração de API's de diversos sites e redes sociais. O design do site segue a mesma linha de layout proposta para a campanha interna do SESC, sendo um pouco diferente da cara da campanha de divulgação externa.
O site conta com alguns detalhes, que acrescentam na experiência do usuário ao visitar o site. Alguns elementos das páginas foram animados através de jQuery, como o sol e os passáros da ilustração.

A animação acontece quando o usuário chega a determinado ponto da página através do scroll.
Na página de programação, para dar ênfase ao fato de que as programações do SESC acontecem durante todo o dia, uma animação que simula a transição de tempo foi feita via jQuery.

De imediato, ao acessar a página, o sol é substituído por uma lua com estrelas, o fundo escurece e a marca do SESC é trocada pela sua versão cor branca.

A animação se mantem em um ciclo com um intervalo entre elas.
Ainda na página da programação, a barra de navegação se torna fixa no topo da página ao rolar até o início das programações.

Foi inserido um menu para agilizar a navegação entre as categorias de programação.
Para ajudar na localização atual das programações, ao rolar a página, o menu muda seu ítem selecionado automaticamente para o ítem que está sendo exibido na tela.
A página encontre-se com você é onde toda a cobertura online dos dias de inauguração se concentra.
Crie, Publique e Compartilhe é uma campanha que o SESC em geral costuma utilizar para divulgar a possibilidade de você fazer parte da inauguração. A tag definida para isso foi #MEUNOVOSESC.
Para acompanhar a tag, foram escolhidos os cinco principais sites e redes sociais: Foursquare, YouTube, Instagram, Facebook e Twitter.

Neles, qualquer material com a tag #meunovosesc é capturado e exibido no site.
O Instasesc exibe todas as fotos publicadas no Instagram utilizando a tag #meunovosesc. Exibido de maneira personalizada, ele cria um link para a imagem diretamente no site do Instagram.
A página do YouTube exibe vídeos com a tag #meunovosesc e as tags "Sesc Sorocaba 2012", para um filtro mais preciso.

Os vídeos são exibidos de maneira personalizada na página.
O Foursquare exibe quantos Check-ins foram feitos no total e quantas pessoas únicas fizeram check-in na venue SESC Sorocaba.

Caso mais de duas pessoas estejam no SESC no momento, ele exibe a quantidade de pessoas na venue no momento de acesso a página.

Além disso, ele exibe todas as fotos que a venue possui no Foursquare.
No final da página, todas as tips (dicas) deixadas pelos usuários são exibidas de maneira personalizada, exibindo o nome e avatar do usuário que a deixou.
Direção de Arte/Design: Elaine Navarro
Desenvolvimento web/Programação: Rubens Castro
Website SESC Sorocaba
Published:

Website SESC Sorocaba

Hotsite de inauguração do novo SESC Sorocaba.

Published: