Plano Executivo
“A música é o tipo de arte mais perfeita: nunca revela o seu último segredo.” Oscar Wilde
Sumário Sumário Design de Interface 27 Spotify e Itunes 50 Introdução 4 Painel semântico 28 Cartaz e embalagem 51 Conceito de Criação 5 Iconografia 29 Tecnologias Digitais 52 Design de Informação 6 Tipografia 30 Justificativa 7 Paleta 31 Público-Alvo 8 Marca 32 Mapa Mental 9 Logotipo 33 Programa Tvdi 10 Icone de interatividade 34 Aplicativo TVDI 11 Marca d’ água 35 Wireframe 12 Low third 36 Second Screen 14 Cenário 37 Wireframe 15 Roteiro do programa 20 Interface App TVDI 38 Interface App Mobile 39 Design de navegação 21 Storyboard vinheta 25 Design de interação 42 Estratégia de comunicação 48 Facebook e Twitter 49
Introdução
A
nova forma de narrar uma história traz a possibilidade de utilização de novas plataformas para adicionar conteúdo à história principal, aproveitando as características e peculiaridades de cada mídia utilizada, criando também uma nova experiência para o usuário. Utilizando esse conceito foi escolhido o gênero musical para a produção de um programa de televisão digital e interativa, intitulado Sincroniza, o qual demonstraremos de maneira visual e explicativa suas diretrizes de projeto e construção do mesmo, desde a pesquisa do público-alvo até a estruturação das interfaces.
4
Conceito de criação Dado o tema a ser desenvolvido pelo grupo, começamos a projetar nos baseando no conceito de música em si. Uma vez que a música inspira qualquer pessoa a criar, se libertar, se envolver e se desenvolver, buscamos uma maneira que abrangesse a maioria dos gêneros musicais, tornando assim nosso tema muito mais próximo do público. Dessa forma, vamos além da preocupação com a técnica empregada em cada layout ou identidade das aplicações que desenvolvemos, envolvendo a música como experiência não apenas auditiva do usuário, mas também visual e interativa.
O Conceito de aplicação do áudio no programa se aplica principalmente no contexto do vídeo do mesmo, auxiliando a construção de um programa de caráter jovem e de estilos musicais diversos.
5
Design de Informação
Justificativa
Usamos todos o conhecimento adquirido para nos comunicarmos com nosso público alvo de maneira mais pontual e precisa. Usamos as ferramentas de interação com a certeza de que a mensagem a ser passada chegará ao destino com alta qualidade, sem que o público tenha que buscar outras fontes para entendê-la.O design de informação nos ajudou a organizar as ideias e emprega-las em nossos ambientes digitais um meio mais simples de comunica-las a quem realmente interessa, o usuário.
7
Público-Alvo
Pedro - 16 anos
Ana - 25 anos
O público alvo do projeto é representado por jovens e adultos entre 12 e 35 anos representantes das classes C e D, e tem base no perfil de audiência da série “Malhação” exibida anteriormente na grade de programação. Como característica geral, esse nicho possui proficiência no uso de novas tecnologias e redes sociais, sendo esta sua principal forma de comunicação. Compartilham e comentam sobre as informações que são apresentadas e desejam desfrutar de uma experiência musical que combine áudio e vídeo. O programa será exibido na Rede Globo de televisão, emissora escolhida por não apresentar outro programa do gênero musical em sua grade de programação. O programa Sincroniza será exibido toda sexta-feira das 18h30 ás 19:00 horas entre a série “Malhação” e a telenovela “Geração Brasil” Sincroniza terá sua faixa indicativa para maiores de dez anos para se adequar ao públicos alvo estabelecido e as faixas indicativas individuais dos clips de música apresentados.
8
Estuda em período matutino de uma escola pública e faz suas atividades escolares durante a tarde. Quando sai de casa costuma ouvir rádios como MixFM e Metropolitana. Sempre está conectado as redes sociais por dispositivos móveis, compartilhando conteúdos que considera relevantes. A noite disponibiliza seu tempo para assistir TV. Utiliza aplicativos de sound Cloud para ouvir música.
Ana trabalha em período integral como vendedora em uma loja de eletrônicos. Adora tecnologia e sempre acompanha os novos lançamentos. Vai a shows com regularidade e atualiza seus perfis sociais com citações e vídeos de suas bandas favoritas. Ao chegar em casa após suas tarefas rotineiras, ela procura um programa que lhe proporcione entretenimento. Ana ouve música principalmente através de rádio e CD de áudio.
Mapa Mental
9
Programa Tvdi
P
ara a televisão digital interativa serão desenvolvidos filmes em dois blocos que constituirão o programa. O primeiro bloco será construído com uma narrativa não linear. Neste bloco o telespectador terá um tempo para decidir qual sequência de músicas votadas quer ouvir, escolhendo o gênero musical pretendido. Já o segundo bloco do programa será destinado a entrevista com um cantor ou banda de variados gêneros.
No presente episódio foi escolhida a banda americana “Midnight Red”, representantes do gênero Pop internacional, patrocinado pelo site e revista Febreteen .
Fonte: Vevo Brasil
10
Aplicativo TVDI
O
aplicativo para televisão digital interativa será acoplado ao programa e ficará disponível para uso durante a exibição do mesmo. Este será dividido e apresentado durante o decorrer da narrativa do programa de modo a complementar a experiência e informações obtidas pelo telespectador. Possibilitará mais informações sobre o programa, os clips e artistas exibidos, comprar determinada música, assistir outros gêneros de clip, etc.
11
Wireframe
box de informações
menu Icones
12
Limite de texto Limite de ação
N
o aplicativo para TVDI, as informações são apresentadas do “box de informações”, que disponibiliza dados sobre o programa e a programação. A lista de comentários feitos pelo Twitter, opções para ativar e desativar legendas dos clips e selecionar outros temas de clips.
Wireframe Legenda
Legenda dos clips de música internacional.
Comentários twitter
Os comentários do twitter surgem na parte inferior da tela logo após serem postados e moderados pelos integrantes do projeto.
13
Second Screen
A
aplicação para dispositivos móveis, que atuará como second screen, proporcionará ao telespectador um maior aprofundamento nos temas discutidos no tempo da narrativa televisiva. O aplicativo é disponível para acesso a todo momento, porém determinadas informações, somente são atualizadas durante a exibição do programa no horário e emissora definidos. Nele, o usuário poderá votar em quais clips de música gostará de assistir durante o programa, ter informações e curiosidades, adicionar as músicas apresentadas a sua playlist pessoal no aplicativo Spotify, ver pontos de vista e respostas individuais das entrevistas exibidas na tv. Ficará disponível a seleção de músicas feita pelo próprio entrevistado, e os bastidores da entrevista.
Interface aplicativo Sincroniza
14
Wireframe
S
eguindo o conceito de mobile first, serão apresentados os wireframes realizados a partir da menor resolução de tela de dispositivos que tenham a mínima configuração necessária para o bom funcionamento do aplicativo. As interfaces foram projetas para a resolução 480px X 320px, considerando o modelo do dispositivo um Iphone3GS, para que desta forma a interface pudesse se ajustar nos demais tamanhos de tela de dispositivos mais atuais.
boas vindas
Home Na tela de boas-vindas, o logo e o nome do projeto são exibidos, enquanto o aplicativo carrega, para amenizar o tempo de espera do usuário. Na home o interator tem informações do tempo restante até a exibição do próximo programa, e um botão para a página de votação. O menu superior direito estará presente em todas as interfaces principais e além de sua hipertextualidade com as demais páginas do aplicativo, terá um indicativo mostrando se o programa está ao vivo ou não.
15
Wireframe Pág. Vote!
A
página Vote!, disponível tanto durante o programa quanto nos demais dias, disponibiliza os temas dos clips que podem ser votados. A votação se dá através de um modal JQuery que disponibiliza uma lista de músicas que podem ser votadas. Cada música pode ser ouvida e adicionada á conta do usuário do aplicativo Spotify, principal patrocinador do aplicativo. A vinculação do aplicativo com o Spotify se dá através de um framework disponibilizado pela empresa a desenvolvedores e permite que além de ouvir e adicionar a música, o usuário possa acessar o perfil público do Sincroniza no Spotify e ouvir todas as playlists e músicas feitas pelo grupo de qualquer dispositivo móvel ou fixo (computadores).
16
Wireframe 1.Pág. Top5+
2.Pág. Top5+
A página Top5+ será atualizada durante e exibição do programa e suas informações acompanharam o conteúdo assistido na televisão. O usuário seleciona o mesmo gênero escolhido pelo aplicativo da TV, e acompanha curiosidades, informações e outras músicas do artista apresentado no programa.
Ao selecionar um gênero, o usuário pode conferir as notícias e novidades dos artistas e acessar seus perfis nas nas redes sociais.
17
Wireframe 1.Pág. Fala Aê
2.Pág. Fala Aê A página Fala Aê, assim como a anterior, será atualizada durante o programa, e contém informações sobre o artista ou banda entrevistada no programa. Assim, como no episódio produzido foi entrevistada a banda Midnight Red, nesta área as informações e curiosidades da mesma serão exibidos, além de um top5 escolhido por seus integrantes com suas músicas favoritas e um trecho exclusivo da entrevista onde cada integrante responde individualmente a uma pergunta.
18
Um modal Jquery é aberto ao selecionar um vídeo para ampliar o campo de visualização do usuário.
Wireframe
A
pĂĄgina sincronize informa para usuĂĄrio sobre os apresentadores e o programa. Disponibiliza acesso Ă s redes sociais do projeto.
19
Roteiro Do programa
O roteiro do programa segue em anexo, juntamente com as demais peรงas do projeto.
20
Design de navegação 21
Design de Navegação
O
mapa de navegação pelo controle remoto foi definido por meio da ligação das informações fornecidas, de modo com que a interação ficasse clara e eficaz. Durante a apresentação e o encerramento do programa, teremos a interação onde o telespectador poderá ampliar as informações sobre como o programa funciona, e sobre seus apresentadores. No primeiro bloco do programa, a interação será por meio da escolha do gênero musical, sendo os gêneros: “Pop, Rock, Eletrônica e Rap/Hip Hop”, onde o telespectador poderá assistir o Top 5 do gênero escolhido, e se desejar ter acesso a letra do videoclipe exibido e comprar música diretamente do iTunes, após assistir um dos gêneros musicais o telespectador poderá retornar e assistir os demais gêneros disponíveis. No segundo bloco onde a entrevista será apresentada, o telespectador poderá saber mais informações sobre a banda entrevistada, seus integrantes, e sobre o estilo musical a qual ela pertence. Durante todo o programa o telespectador poderá decidir se deseja ver ou não, os tweets fornecidos pelo twitter, através da hashtag #sincronizatv, sobre o que outros telespectadores estão achando do programa.
22
MAPA DE Navegação
A
Top5 POP
C
Top5 ELETRÔNICA
B
Top5 ROCK
D
Top5 HIP HOP
Fluxo televisivo e aplicativo TVDI
23
MAPA DE navegação
24
Aplicativo Second Screen
Storyboard vinheta Vinheta de Abertura do programa
1.Formas geométricas formam o fone. Ele fica girando em torno de si, em 3D. Linhas passando o fundo.
2.O fone já formado se expande com a batida da música e se transforma no “O”.
3.“O” fica girando.
4.As partes separadas que formam o “O” vêm mais à frente da câmera de acordo com a música.
Arte final vinheta
5.O resto da palavra “Sincroniza” aparece a partir do “O” formado.
6.Formas geométricas aparecem e formam o logo em cima do “O”, formando assim o logo do programa.
25
Vinheta Intervalo
Vinheta de fechamento de bloco
1.Logo do programa. Resto da palavra “Sincroniza” desaparece, entrando no “O”.
2.Zoom-in no “O”. O fone treme.
3.O fone explode, espalhando pequenas formas geométricas pela tela.
Vinheta de inicio de bloco
1.Formas geométricas aparecem e se juntam em cima do “O”, formando o fone.
26
2.Zoom-out no “O”.
3. O Restante da palavra “Sincroniza” aparece a partir do “O”, formando o logo.
Design de Interface
Painel Semântico
28
Através do painel semântico que reúne imagens relacionadas com programas do gênero e signos representantes da música, obteve-se as cores mais predominantes utilizadas na paleta do projeto.
Iconografia
N
o decorrer da pesquisa teórica e iconográfica, foi observado a presença de círculos e formas arredondadas nas figuras que representam a televisão e a música, como os fones de ouvido, as teclas do controle remoto, o alto falante de caixas de som, o símbolo representante de sincronia e no logo da emissora escolhida. Aplicamos esse conceito, utilizando a sequência de Fibonacci, para encontrar um círculo áureo construído através de retângulos e quadrados calculados na razão de 1,616. A preocupação com esse conceito 5 se deve a maior harmonização da proporção nas interfaces e no logo.
1,616
Exemplo de contrução da base das interfaces 3 8
29
Tipografia
P
rocuramos escolher a tipografia que se adequasse ao conceito de criação e a ideia de programa que queríamos passar ao teleinterator, mas que ao mesmo tempo não dificultasse a leitura em nenhuma das aplicações desenvolvidas. Sendo assim, fizemos a escolha de uma tipografia principal e uma secundária, ou seja, usamos uma para destaques e títulos e a outra para texto de leitura e aplicações nas mídias necessárias.
30
Irregular e informal, a fonte enfatiza o caráter jovem do programa e é utilizada em títulos e textos de destaque.
É aplicada no corpo do texto, por sua alta legibilidade já que a fonte foi projetada inicialmente para dispositivos móveis em um contexto de tamanho de tela limitado.
Paleta de cores
A
foram inspiradas em tons vibrantes que remetessem a vibração que a música causa em cada pessoa, e dessa forma, definimos que além de contrastantes e vivas (que expressa a vitalidade e traz a essência da juventude) elas precisavam dialogar entre si, obtendo como resultado uma paleta alegre e marcante, mas que ao mesmo tempo estivesse dentro de nosso painel semântico e que por si só conseguisse remeter algo agradável ao nosso público. s cores
31
Marca O
nome do programa foi desenvolvido a partir dos conceitos estabelecidos durante o processo de pesquisa, onde o conceito de sincronia presente na música e a possibilidade de sincronização entre a televisão e os dispositivos móveis no processo de interatividade que será apresentado no programa, formaram um ótimo conceito visual e sonoro do nome SINCRONIZA. O desenvolvimento da logo do programa teve início com utilização da tipografia escolhida e no processo de modificação da mesma. No começo tudo foi desenhado para que remetessem ao conceito de sincronia, além de demonstrar atualidade e pertencer ao universo jovem, até chegarmos em um produto final visualmente limpo e claro por si só, tivemos o cuidado de nossa logo conseguir passar sozinha todo conceito que queremos envolver nossas aplicações.
Primentos Sketches
32
Finalizado
LOGOTIPO
O logotipo “all type” é acompanhado de um símbolo gráfico para maior identificação da marca. Este foi desenvolvido através das formas encontradas na representação iconográfica de sincronização (setas em movimento) e no alto falante presente em caixas de som como foi observado na iconografia do projeto. Foi inserido também o símbolo que é frequentemente utilizado para representação de música, o fone de ouvido. O logo foi desenvolvido pensando nas diversas resoluções dos dispositivos, podendo ser utilizado sem que sua visibilidade seja afetada até 1cm².
5cm 1cm
Restrições na apllicação Evitar a sobreposição do logo em cores muito próximas de sua paleta ou muito vibrantes.
33
Icone de
interatividade
Storyboard
O
s ícones de interatividade atuaram como identificadores do conteúdo que pode ser acessado no aplicativo do programa. Cada ícone, representado pelo próprio logo do programa, indica uma tecla de interatividade presente nos controles das smarTv’s.
Correspondência dos icones de interatividade com as teclas do controle.
34
1.Marca d’agua branca torna-se colorida, da cor correspondente ao conteúdo disponível.
3.O icone movimenta-se para os lados, como se dançasse.
2.Quatro ícones deslizam a partir da marca d’agua, um de cada cor dos botões de interação. Os quatro voltam para o “meioi” e apenas o da cor do conteúdo correspondente fica aparente.
4.O icone colorido vai perdendo a cor, até voltar a ser a marca d’agua branca.
Marca d’ água
O
s ícones de interatividade atuaram como identificadores do conteúdo que pode ser acessado no aplicativo do programa. Cada ícone, representado pelo próprio logo do programa, indica uma tecla de interatividade presente nos controles das smarTv’s.
Marca d’agua com o nome do programa
1.Seta laranja fica girando.
2.Seta azul cai e se junta à laranja.
4.Zoom-out no “O”. Le- 5.Letras voltam para o tras saem a partir dele, “O”, zoom-in nele. formando o logo do programa. Fone aparece em cima da letra O.
3.As duas setas ficam girando, formando o “O”.
6.O ícone torna-se flat e fica branco.
35
Low Third Storyboard
1.Um quadrado azul desliza pela tela.
36
2.Um outro quadrado laranja sai do azul e gira em volta dele, enquanto o fundo para os textos aparece.
3.O quadrado laranja para e os textos aparecem.
Cenário
O cenário reune os elementos simbolicos de música além do próprio logo do projeto . Ele foi realizado atravez do estudo de cenários de outros programas além das bases encontradas nas diretrizes visuais do programa.
Cenário programa Top Mix, Mix Tv.
Cenário Projetado para o programa Sincroniza Cenário programa No Break, Mix Tv.
37
Interface App TVDI
A
interface desenvolvida para o aplicativo de TVDI tem como objetivo ser simples e objetiva para que não interfira nas informações apresentadas pelo vídeo do programa, evitando um acúmulo ou excesso de informação ao usuário. Foram utilizados os conceitos explicados anteriormente neste plano executivo, como a paleta de cores, iconografia e etc.
Teste do aplicativo na smarTV LG 52’ em modo tela cheia e na interface de aplicativos.
38
Interface App Mobile
A
interface para o second screen foi projetada para se adequar ás diferentes resoluções de tela de dispositivos móveis (fluid design) desde Tablets até Smartphones. Ela trabalhará de dois modos “ao vivo” e “não ao vivo”. O primeiro modo será apresentado ao usuário no dia e horário estabelecidos para a apresentação do programa, todas as sextas-feiras às 18h30 min, que resultará na mudança de informações simultaneamente com o conteúdo exibido pelo programa, com mais informações sobre as sessões “Top5+” e “Fala aê”. Nos demais dias e horários, a interface apresenta contagem de tempo até o próximo programa para que o usuário estabeleça uma relação de tempo e crie expectativas para a próxima exibição. Nesse modo será habilitada a votação das categorias dos clips a serem apresentados no próximo episódio.
39
Interfaces
40
Interfaces
41
Design de interação 42
Aplicativo TVDI
A
interação do usuário com o aplicativo para TVDI será realizado através dos botões e setas do controle remoto, que foram também adaptados às teclas do computador para fins demonstrativos. tecla de Home ou Menu (essa variação ocorre dependendo da marca da smartv por isso nesse projeto tomamos como referência uma televisão LG 3D 52” que possui a tecla Home) efetuará a expansão do menu principal, onde setas direcionais para esquerda e direita mudam as opções do menu e o botão “Ok” seleciona a opção demarcada abrindo na tela um “box de informações” como pode ser visualizado nas imagens ao lado e na seção de “design de informação” desde plano executivo. As teclas
A
de interação do controle remoto abrem as janelas de informação. Essa função é habilitada quando os ícones de interação aparecem na tela sinalizando a cor da tecla correspondente.
Menu principal do aplicativo para TVDI
Box de informações que pode ser acessado do menu principal ou teclas de interatividade.
43
Aplicativo mobile
A No canto superior direito da tela fica o acesso ao sprymenu, onde um toque em cima de seu ícone abre a aba com o conteúdo do menu e outro toque no mesmo ícone ou fora desse espaço o fecha.
Contagem do tempo final até o próximo programa.
44
seguir serão detalhadas as formas de interação mais relevantes do second screen, e suas respectivas interfaces.
Um toque sobre um dos links do menu redireciona o usuário para outra página do aplicativo.
Aplicativo mobile
Nessa area será exibido para o usuário se o programa está ou não no ar, o que representará a inserção de novas informações no second screen.
45
Aplicativo mobile
Ao clicar em um dos quatro botões dos temas da semana é aberta uma caixa com os players de cada música e artista que pode ser votado.
46
Para votar, é necessário escolher na lista uma das músicas disponíveis, e então ir até o botão “votar” para concluir a votação.
Aplicativo mobile
Na página “Fala Aê” após selecionado um dos integrantes da banda (figura 1.1), é aberto um modal para melhor visualização do trecho exclusivo da entrevista (figura 1.2) ao girar o dispositivo na horizontal o vídeo se adapta a nova resolução (figura 1.3). Os controladores do vídeo possibilitam dar play e pause, aumentar e diminuir o volume, e expandir o vídeo para o modo tela cheia.
Demonstrativo da interface após rotação do dispositivo
47
Estratégia de comunicação 48
Facebook e Twitter A divulgação do programa e aplicações será feita pelas redes sociais Facebook e Twitter, onde os usuários poderão comentar e compartilhas experiências durante a programação, e ter a oportunidade de vê-los eles exibidas na tela da televisão.
Página Facebook Sincroniza
Página Twitter Sincroniza
49
Spoti fy e Itunes O Itunes constitui o canal comercial do programa e aplicações, através dele o usuário poderá adquirir e fazer o download das músicas ouvidas durante a programação.
A conta do Sincroniza no Spotify possibilitará que os usuários adicionem e ouçam as músicas exibidas no programa a qualquer dia da semana e em qualquer lugar, aumentando a imersão musical e envolvimento com o programa.
50
Cartaz e embalagem
C
omo estratégia de comunicação direta com público, conseguimos unir todos os conceitos abordados em nosso projeto para expor nosso trabalho através do cartaz, chamando nossos interatores diretamente para apresentação do nosso programa de televisão e nossas aplicações.
A
embalagem é a primeira impressão de todo material a ser entregue, sendo assim, é necessário que ela contenha nossos conceitos de criação e nossa marca bem nítida para que consiga fazer a sua função de envolver o projeto como um todo e expor em “primeira” impressão todo trabalho que tivemos até o final.
51
Tecnologias Digitais
N
a realização das interfaces gráficas digitais e físicas foram utilizados softwares como Adobe Illustrator, Adobe Photoshop e Adobe InDesign. Para a finalização do cartaz, vinhetas e cenário foram feitos modelos em 3D apartir do Cinema4D.
Filmagem e Captação de audio
O
s aparelhos e serviços necessários para a filmagem do programa se constituem de câmeras, tripés, estúdio com chroma key e captadores de áudio.
52
Interfaces Gráficas
Tecnologias Digitais
Edição e Pós-Produção
P
ara o desenvolvimento do projeto foram utilizados softwares de edição de vídeo, pós-produção e áudio como o Adobe After Effects, Adobe Audition, Adobe Premiere.
Desenvolvimento de aplicativos
O
s aplicativos foram desenvolvidos em HTML5, CSS3, JQuery e Javascript por serem as linguagens mais atuais em desenvolvimento web. Foram utilizados frameworks como Twitter Bootstrap, que proporciona maior fluidez as interfaces dos aplicativos.
53
Tecnologias Digitais
A
grid utilizada para a realização das interfaces obedece as normas de bom desenvolvimento de aplicativos para TVDI estabelecida pela BBC. Os vídeos produzidos terão 1920 X 1080 px no formato MP4, para se adequar com as exigências do HTML5 sem perder qualidade. O áudio das vinhetas terá o formato WAV de compreensão após editados e tratados com o Adobe Audition.
54
Grid e formatos de arquivos