Desassombrando by Anhembi Morumbi

PDP Proposta de Desenvolvimento Projetual Orientadora: Maria Salete Souza dos Santos CĂŠsar Yukio Yamashita Daniela Frederico LĂłpez Felipe Naoki Matsumoto Keilla Kaori Imai Mariana Missae Yoshida

SUMÁRIO Introdução....................................................................................... Público Alvo..................................,............................................... Conceito de Criação.................................................................... Diagrama.......................................................................................... Painel Semântico.......................................................................... Caracterização dos Estilos dos Vídeos.............................. Conceito de Criação dos Logos............................................... Linguagem Visual.......................................................................... Paleta de Cores............................................................................ Tipografia........................................................................................ Tipografia - Experimentações............................................... Estratégia de Comunicação..................................................... Projeto de Informação - Programa..................................... ´

4 4 5 6 7 8 9 10 11 12 13 14 15

Projeto de Navegação - Programa....................................... Projeto de Interação - Programa....................................... Projeto de Informação - Hot Site...................................... Projeto de Navegação - Hot Site....................................... Projeto de Interação - Hot Site........................................ Mockups............................................................................................ Linguagem Sonora......................................................................... Vinheta de Abertura................................................................ Vinheta de Fechamento............................................................ Vinheta de Abertura de Bloco.............................................

16 17 18 19 20 24 25 26 27 28 Vinheta de de Apresentação e Promoção - Comercial...... 29 Conjunto de Tecnologias.......................................................... 30 Ficha Técnica................................................................................. 31

Introdução ‘Desassombrando’ é um documentário que traz os dois lados da lenda urbana, a lenda e a história real por trás dela. As lendas urbanas fazem parte da cultura de um lugar, mas devido a fama que criam sobre elas, muitas pessoas sentem medo antes mesmo de escutá-las, e por causa disso as evitam. As lendas urbanas, possuem em sua ‘sombra’, tragédias, histórias interessantes e até mesmo lindos pontos turísticos. E é isso que queremos trazer com o programa, desmitificar a lenda, mas sem fazer as pessoas desacreditarem totalmente nelas. Com isto, atraíremos não só as pessoas que gostam deste assunto, mas também pessoas que evitavam, talvez sintam vontade de assistir, e cada um continua acreditando no que achar melhor.

Público Alvo O programa piloto de televisão está voltado para o público em geral, destinado a pessoas que se interessem ou busquem informações sobre o assunto, o programa será produzido para pessoas de qualquer idade que saibam utilizar o ambiente digital, porém, após a realização da pesquisa de campo, foi estipulada uma faixa etária de 18 a 50 anos.

Conceito de Criação Para elaborar o conceito de criação do projeto, foram realizadas as pesquisas de campo e iconográficas. Na linguagem visual utilizamos as referências iconográficas relacionadas às lendas urbanas. E a pesquisa de campo ajudou na linguagem textual e mensagem do programa, em como transmitir as informações. Paisagens noturnas, cemitérios, gatos pretos, morcegos e outras coisas típicas de lendas urbanas, irão compor o visual do projeto. O visual, porém será minimalista, sem muito detalhes, como se fossem apenas sombras, silhuetas, contornos dos objetos. Usaremos cores escuras opacas, que dará o clima sombrio nos cenários. As peças que irão compor este projeto serão: um programa interativo, que contém 2 blocos, uma vinheta de abertura, uma vinheta de abertura de bloco e créditos finais; um hot site do programa, onde os usuários encontrarão mais informações sobre as lendas urbanas e poderão interagir com outros usuários; e 2 redes sociais como meio de publicidade e comunicação com os usuários.

Diagrama Questionário

Ideia

Briefing

Pesquisa de Campo

Visitação

Pesquisa Científica

Bibliográfica

Metodologia

Pré-Projeto

Webgrafia Iconografia Design de Informação Design de Interface Design de Navegação Design de Interação

PDP

Artigo Científico Filmagem / Gravação Produção

Edição

Produto Final

Programação

Painel SemĂ˘ntico

Visual

Logo Canal

Lendas de SĂŁo Paulo

Paleta de cores

Tipografia .

Logo programa

Caracterização do Estilo dos Vídeos #SPASSOMBRADA do canal LENDA URBANA Link: https://www.youtube.com/user/lendaurbanabrasil O ‘SP Assombrada’ serviu de inspiração em uma das aberturas do projeto, onde há vários takes dos principais locais da cidade de São Paulo. Além do modo de edição nas lendas, deixando com um tom sombrio.

Dona Yayá - Doc Mogi News do canal Glauco Ricciele Link: https://www.youtube.com/watch?v=zdQRdPDwXB8 Este video, foi fonte de inspiração para enquadramentos, cenas e takes que poderiam ser possíveis. Foi inspiração também para efeitos de“‘antigo’ nas edições.

Conceito de Criação dos Logos Experimentações

Experimentações

Logo Final

O nome do programa, ‘Desassombrando’, veio do fato de que o objetivo é contar a história real do lugar, o que acabaria desassombrando, desmitificando a lenda. O logo é uma vela em forma de ‘D’, que é a inicial do nome, e a ideia da vela é de que lendas, originalmente, são histórias orais e antigas, o que nos faz lembrar de história contadas em volta da fogueira, e de lugares mal-assombrados em que não há energia, e precisa-se de uma vela ou um lampião para explorar o local.”

Foi pensado a identidade do canal, em que a grade de programação seria toda de suspense/terror, e um dos programas, seria o Desassombrando. O nome do canal é ‘Expresso do Medo’, e o logo uma caveira com detalhes de trem e um chapéu de maquinista. A ideia veio do Trem Fantasma, por isso os detalhes de trem e o nome, um convite aos trilhos do medo. A caveira seria o guia dessa viagem, por isso o chapéu de maquinista.

Linguagem Visual Identidade Visual 1

Identidade Visual 2

Layout hot site

Etiqueta

esassombrando Orientadora: Maria Salete César Yukio Yamashita Daniela Frederico López Felipe Naoki Matsumoto Keilla Kaori Imai Mariana Missae Yoshida Projeto Interdisciplinar Universidade Anhembi Morumbi - Paulista 2 Design Digital 2015/2

Cartaz

Layout programa

Universidade Anhembi Morumbi - Paulista 2 Projeto Interdisciplinar

Reza a lenda, que se você não comparecer na sala 803, perderá uma super apresentação!

esassombrando Data: 26 de Novembro de 2015. Hora: 13:30h. Sala: 803. Endereço: Rua Treze de Maio, 1266 - Bela Vista. CEP: 01327-002

Universidade Anhembi Morumbi Câmpus Paulista 2 Design Digital 2015/2

Capa CD

C: M: Y: K:

75% 68% 67% 90%

R:0 G:0 B:0

C: M: Y: K:

0% 0% 0% 0%

R:255 G:255 B:255

#ffffff

#000000

C: M: Y: K:

89% 100% 25% 22%

R:61 G:19 B:101

C: M: Y: K:

100% 95% 36% 43%

R:9 G:26 B:75

#091a4b

#3d1365

C: 13% M: 69% Y: 100% K: 2% #d36b1b

R:211 G:107 B:27

C: 8% M: 14% Y: 99% K: 0% #eece15

R:238 G:206 B:21

Paleta de Cores A paleta de cores tem como objetivo harmonizar com o tema de lendas urbanas. As cores utilizadas tanto no site quanto no canal apresentam menos saturação, serão utilizadas cores escuras e opacas que remetem a noite e ao ‘terror’, para dar um clima sombrio nos cenários. Não serão utilizadas cores berrantes, fortes ou que se destaquem das demais cores utilizadas, com excessão do laranja e do amarelo, que foram inspirados nas chamas de uma vela.

Tipografia .

Para títulos foram escolhidas as fontes Monsterama e Alice in Wonderland (do filme Alice No País das Maravilhas de 2010, dirigido por Tim Burton), pois consideramos que essas duas fontes passam a sensação de suspense, terror, ou de algo macabro. Para o texto, decidimos utilizar a fonte King, sua aparência lembra as impressões feitas pelas antigas máquinas de escrever, seu resultado acaba por estabelecer um vínculo com nosso tema dando um ar de suspense e mistério ao produto final. Por ser uma fonte considerada simples e sem detalhes, não irá deixar a leitura cansativa.

Alice in Wonderland ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789

A N a n

Monsterama ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789

King B C D E F G H I J K L O P Q R S T U V W X Y b c d e f g h i j k l o p q r s t u v w x y 0 1 2 3 4 5 6 7 8 9

M Z m z

Tipografia - Experimentações .

Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui.Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo.

Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. aidjaiojdoias asdonsdsnaodansdsadpas

Experimentação tipográfica com as fontes: King (fonte utilizada para textos), Monsterama (fonte utilizada para título).

sma a t Fan

ei ron

O velho do saco

Lendas Urbanas mu ga n oberman Engasgado

MULHER JOGADA DO 27º ANDAR

oira do banheiro

Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé praquem é amistosis quis

Ladrão de Orgãos

morte branca

Noticias

A Mulher da Estrada

A brincadeira do copo

lhe Dama de Vermelho g ue rd do or pal os to ha dil ço ace ra do

A noiva na mata

Experimentação tipográfica com a fonte Shlop (fonte utilizada para o Logo do programa).

Estratégia de Comunicação Escolhemos duas redes sociais para divulgação do projeto: o Facebook e o Instagram. Através do Facebook pretendemos fazer publicações sobre o tema e o programa, sendo a forma mais eficaz para atingir um público de maior escala, e para comunicação direta com os usuários. E o Instagram será utilizado para postagem de curiosidades e propaganda do programa. Na página contato do site, haverá links para as redes sociais e divulgação do programa. E os usuários também terão acesso ao site através do QR Code que aparecerá na tela durante o programa. Ou seja, um conectará o outro.

Redes sociais: Facebook e Instagram

Página de contato do Site

QR Code

Projeto de Informação - Programa Introdução Introdução sobre o que é lendas urbanas.

Vinheta de Abertura

Introdução do Episódio

Tela de Interação

Sequências

Final

Apresentação da cidade que se passará as lendas do episódio.

Aqui, a pessoa escolhe qual a sequência de lendas que quer assistir.

Cada sequência conta: com três histórias*; comercial e vinheta de bloco após a primeira.

Encerramento do programa e créditos finais.

*Cada história narra a lenda, a história real e possui uma entrevista.

Projeto de Navegação - Programa Introdução Lendas Urbanas

Créditos finais

Final

Cemitério

Créditos finais

Final

Yayá

Créditos finais

Final

Cemitério

Créditos finais

Final

Créditos finais Créditos finais

Tela de Interação

Introdução São Paulo

Vinheta de Abertura Yayá

Vinheta de bloco

Comercial

Capela

Cemitério

Vinheta de bloco

Comercial

Capela

Vinheta de bloco

Comercial

Yayá

Capela

Cemitério

Vinheta de bloco

Comercial

Yayá

Final

Capela

Yayá

Vinheta de bloco

Comercial

Cemitério

Final

Yayá

Capela

Vinheta de bloco

Comercial

Cemitério

Curiosidades e Ajuda

Projeto de Interação - Programa

1- Tela de interação - usuário escolhe a ordem dos locais. Programa começa; 2- Ao clicar no botão vermelho, aparecem algumas curiosidades. E ao clicar no botão voltar, elas desaparecem; 3- Ao clicar no botão azul, aparece ajuda, caso o usuário tenha alguma dúvida. Ao clicar no botão voltar, desaparece. O QR code, estará sempre presente a partir da tela de interação, assim o usuário poderá entrar no hot site no momento que achar melhor.

Projeto de Informação - Hot Site Home

Episódios

Galeria

Seu Espaço

Contato

Logo do programa, slider de divulgações, e menu do site.

Página com ficha técnica dos lugares transmitidos no programa.

A galeria será dividida entre a página de fotos* e a página de vídeos*.

Página de interação com o usuário. Aqui o usuário poderá enviar suas histórias, dar sua opinião, conversar com outras pessoas de mesmo interesse.

Na página de contato, teremos a cláusula de reserva, redes sociais e informações de contato do grupo e do programa.

*Fotos dos lugares mencionados nas lendas urbanas. Vídeos extras e do programa.

Projeto de Navegação - Hot Site

Projeto de Interação - Hot Site O menu do hot site é responsivo. Quando se navega pelo computador, o menu aparece em uma barra horizontal. E quando navegamos através de um aparelho mobile, todas as páginas exceto a home, possuem o menu de ‘hamburger’, que, ao clicar tem-se o acesso à outras páginas

Home do hot site, ícones com acesso para as outras páginas

Projeto de Interação - Hot Site Página Episódios: 1- Possuí menu em abas separando os episódios; 2- Ao rolar a página para baixo, aparece um botão para retornar ao topo da página; 3- Click ‘EP.2’: Possível ver as informações; 4- Click ‘D’: Informações do programa.

Projeto de Interação - Hot Site Página Galeria: 1- Dividida em duas abas, uma de fotos e outra de vídeos; 2- Ao clicar em uma das imagens, abre-se uma galeria de fotos do local escolhido; 3- E ao abrir a galeria e clicar em uma imagem, ela expande. E é possível passar as fotos através das setas;

3 4- Ao clicar na aba do ícone: Filmadora, abre-se a galeria de vídeos; 5- Ao clicar em um dos vídeos, ele expande.

Projeto de Interação - Hot Site Página Seu Espaço: 1- Usuários podem mandar suas histórias; 2- Logo abaixo, há os plugins do Facebook, onde é possível curtir a página e fazer comentários, interagindo com outras pessoas.

2 Página Contato: 3- Há a cláusula de reserva e as redes sociais do programa e do grupo; 4- Ao clicar no local indicado, ambos aparecem.

Mockups Celular LG G3 Stylus 5.5 polegadas / 960 x 540 pixels

Notebook HP Pavilion G4 Notebook PC 14 polegadas e alta definição (1366 x 768)

Tablet Samsung Galaxy - GT-N5100

8 polegadas/ 1280 x 800 pixels

Linguagem Sonora Vinheta de Abertura Foi feita uma mistura de músicas de suspense e há efeitos tipicos de filmes de terror, para deixar com um ar misterioso. Com intensão de deixar o espectador aflito e curioso ao mesmo tempo.

Vinheta de Fechamento A música é calma por ser o final do programa e todas as lendas já foram reveladas, não queremos causar aflição ao espectador.

Vinheta de Abertura - Bloco Por ser um canal que passa programas relacionados ao terror, o som é mais similar a músicas de filme de terror, junto com o grito de uma mulher, que é para o espectador entender que está em um canal de terror. Durante as cenas de lendas urbanas Enquanto o programa está contando uma lenda urbana, há uma trilha sonora similar ao filme de terror, para que o público sinta o clima de lenda urbana.

Durante a história real Por tratar da história real, a trilha sonora é mais calma, com a música de piano, para que o espectador sinta ‘alívio’ após a trilha sonora de lendas urbanas.

Vinheta de Abertura Músicas ambientes: Anxiety - Kevin MacLeod Evening Of Chaos - Kevin MacLeod Ghost Story - Kevin MacLeod

910

1- Fundo preto com vela; 2- Mão aparece com fósforo; 3- Fósforo acende vela; 4- Zoom na vela; 5- Monstro aparece e foge; 6- Outro monstro aparece e foge; 7- Vela começa a derreter; 8- Vela se transforma no logo; 9- Logo vai para o canto esquerdo e forma o nome do programa; 10- Tela escura. FADE OUT.

Vinheta de Fechamento Música ambiente: Quinns Song A New Man - Kevin MacLeod

1 1 1

2 2 2

3 3 3

4 4 4

5 5 5

6 6 6

1- Fundo preto; 2- Vela(logo) no canto inferior esquerdo. 3- Créditos sobe; 4- Fim dos créditos com os logos; 5- Assopro. Vela se apaga; 6- Tela escura. FADE OUT.

Vinheta de Abertura - Bloco Música ambiente: Horror Style BGM 001 (003) - Sanche Scream Of Women - On-jin 12345-

Fundo: Túnel, trilho de trem; Trem (logo) vindo de encontro a tela (pequeno); Trem (logo) vai aumentando de tamanho conforme se aproxima da tela; Logo ocupa a tela (Fade In) e o logo fica transparente. Logo muda de tamanho e é transferido para o canto inferior direito da tela.

Vinheta de Apresentação e Promoção - Comercial

1- Início do comercial; 2- Gruta - Parque da Luz. Narração: ‘No primeiro episódio do Desassombrando, você vai conhecer os dois lados da história de alguns dos lugares mais mal assombrados da principal cidade do país’; 3- Cut - Takes de São Paulo; 4- Lendas urbanas de SP; Narração (3 e 4): ‘São Paulo é uma das cidades mais populosas e influentes do mundo, em sua grande extensão territorial guarda muitos segredos e mistérios’; 5- Vinheta do canal. Narração: Não perca: Desassombrando, no canal: Expresso do Medo; 6- Final do comercial;

Conjunto de Tecnologias

Adobe Illustrator e Adobe Photoshop

Adobe InDesign

Adobe Audition

Adobe Premiere

Softwares utilizados para tratamen-

Software utilizado

to e criação de imagens.

para formatação do

para sonorização

PDP.

dos vídeos.

Fruity Loops Studio 12 Software

utilizado

criação de aúdio.

para

PHP MySQL

Notepad++

Software utilizado para a

Software utilizado para

criação do banco de dados.

programação do site e do programa.

Ficha Técnica Início do Projeto: 13 de Agosto de 2015. Término do Projeto: 26 de Novembro de 2015. Professor Responsável: Maria Salete Souza dos Santos. Responsável pelo Grupo: Keilla Kaori Imai. Pesquisa: Todos os componentes do grupo. Designer de Informação: Todos os componentes do grupo. Designer Visual: Todos os componentes do grupo. Programação: Todos os componentes do grupo.