1

2
3
4
 Declarao de Direitos Autorais

Declaro, segundo a Lei n9.610 de 19

de fevereiro de 1998, que esta obra foi
totalmente criada por mim, Isabela Francine
da Silva, portadora do RG 52.527.151-x e
CPF 440.751.328-46, e que estou ciente
que esta obra no possui existncia de
plgio. Quaisquer textos extrados possuem
referncias bibliogrficas que sero citadas
no final do relatrio; caso comprove o plgio,
estou ciente que serei penalizada pelo
ocorrido.

Isabela Francine da Silva

5
6
Isabela Francine da Silva

Thats Media

Imerse no universo multimidia

7
8
 Dedicatria
Dedico este projeto a todos que
compartilharam os pedaos que o
completam e aos entusiastas que me
apoiaram, mesmo sem conhec-lo. Minha
mais admirada dedicao vai para os
poucos e bravos criativos que chegaram
at aqui.

9
10
 Agradecimentos
Agradeo a todos aqueles que, de alguma
forma, contriburam para o desenvolvimento
do projeto. Meus mais sinceros
agradecimentos a todos os professores,
suas palavras foram caminhos alm
daqueles que conhecia h dois anos e
seus mundos tornaram os nossos maiores.

11
12
"O que sabemos uma gota; o que ignoramos um oceano."

Sir Isaac Newton

13
14
Prefcio
Thats Media um projeto
de web design, cujo objetivo visa
apresentar ao pblico em geral
a respeito da profisso de um
Produtor Multimdia, relacionando
elementos bsicos e fundamentais
dessa carreira. Para atingir a meta
estabelecida o projeto conta
com recursos textuais, imagens e
projetos artsticos e comunicativos.
A seguir relatado o que , por quem
foi desenvolvido, como utilizado,
por qual motivo utilizar, e como
aplicado de maneira informatizada.
15
16
 Sumrio

Apresentao 19

Objetivo 23

Justificativa 27

Pblico / Mercado 33

Definies 39

Pesquisas 47

Definies 59

Consideraes Finais 101

17
18
Apresentao

19
20
 O trabalho de final de curso Thats Media
um projeto de web design que tem como funo
apresentar a carreira de Produo Multimdia de
modo que o usurio conhea essa rea de atuao
e consiga entender a sua funo desde o processo
criativo dos seus profissionais at a execuo de
projetos e seu impacto na utilizao das novas
mdias.
Multimdia uma carreira que lida com diversos
recursos comunicativos e multissensoriais, que tem
como intuito definir posies estratgicas a partir
de planejamento, criao e execuo em diversas
vertentes comunicativas, com o propsito de
convergir mdias e com uma finalidade interativa ao
pblico-alvo de cada projeto.

Essa graduao prope que o aluno habilitado

empregue tcnicas audiovisuais, criao de
animaes e de vinhetas eletrnicas, alm de
computao grfica, jogos digitais, design grfico,
fotografia e web design.
Sua complexidade est aliada ao seu maior
diferencial, que de interligar tcnicas e criaes
de maneiras complementares, essa capacidade
distingue e qualifica o Produtor Multimdia como
um profissional dinmico. Esse profissional pode
trabalhar em parceria com outros profissionais
como jornalistas e publicitrios na divulgao e
execuo de contedo.

21
 Para o desenvolvimento do projeto foi necessrio
criao da identidade visual que o completa como
cores, formas e elementos grficos. A criao de
todo o contedo disposto na plataforma tambm
foi desenvolvida especialmente para compor o
site e foi idealizada atravs de estudo e pesquisas
relacionadas ao tema.
As referncias partem do princpio de
movimentos famosos do design e todo o contedo
grfico foi desenvolvido com base em inspiraes a
partir de conceitos tericos e prticos estudados ao
decorrer do perodo de graduao.

A plataforma do site tem como objetivo

obedecer a critrios de responsividade e
adaptao em diferentes plataformas de contedo
como smartphones, tablets e computadores de
mesa. Para a obteno de resultados satisfatrios
foram utilizados recursos como: HTML5, CSS3,
Bootstrap4, e Javascript.
Thats Media um site que visa dar visibilidade para
a carreira de Produo Multimdia, apresentando
sua funo para a rea de comunicao e relatando
sobre a necessidade de profissionais que sejam
adaptados para os novos recursos de mdia que so
desenvolvidos a cada dia.

22
Objetivo
23
24
 Atualmente os sites direcionados rea de
comunicao no oferecem contedos relacionados
carreira multimdia o que torna rdua a visibilidade
de profissionais que possuem essa especialidade,
que interliga contedos complexos de comunicao,
e, em uma mesma rea de atuao, ordenando ideias
e administrando a criatividade para a realizao de
contedos diversos, utilizando ferramentas e recursos
multimdia diferenciados.

O projeto tem como objetivo produzir uma

plataforma direcionada a informar de maneira
clara sobre alguns fatos pertinentes na carreira
de um produtor multimdia, como, uma explicao
do que essa profisso de modo geral e todos
os requisitos que a compem; A importncia do
portflio, que uma ferramenta que apresenta
esse profissional no mercado de trabalho, a
partir de seus projetos e criaes; E a proposta
de carreira, e como essa profisso abordada na
prtica com todas as habilidades que a qualificam.

Proporcionar visibilidade, informao e

representatividade para a carreira de um profissional
multimdia para melhor informao e entendimento
do usurio o foco principal do projeto.

25
 OBJETIVO GERAL:

O objetivo do site oferecer visibilidade para a

carreira de Produo Multimdia, possibilitando o fcil
reconhecimento das caractersticas desses profissionais
por meio do usurio.

OBJETIVOS ESPECFICOS:

Mais reconhecimento;
Visibilidade;
Representatividade da carreira.

26
Justificativa
27
28
 A maioria dos sites que abordam assuntos
relacionados comunicao tem como foco
principal, uma determinada carreira , que
explorada de modo individual, enquanto multimdia
uma rea vasta, que em sua totalidade absorve
muitas vertentes comunicativas e infelizmento
pouco explorada, o que um empecilho para que
haja maior visibilidade e conhecimento de uma
carreira que ainda nova no mercado.

Os profissionais multimdia tem grande

dificuldade em se identificar como tais,
justamente por conta da falta de informao
da sociedade a respeito da existncia de
profissionais habilitados para essa funo,
que engloba diversas tcnicas relacionadas a
comunicao e distribuio de informao a partir
de meios multimdia. Portanto o site visa atender
todas as demandas relacionadas visibilidade
dessa carreira, e tambm proporcionar informao
e facilidade para o conhecimento desses
profissionais e seu papel no mercado de trabalho.

Outro fator que justifica a execuo do projeto

o advento das novas mdias, que geram inmeras
sadas para a divulgao de contedo, principalmente
relacionado ao entretenimento, que tem ligao direta
com a multimdia, a divulgao desse contedo
constante e a criao de novas plataformas que geram
informao aumenta diariamente, o que movimenta
o mercado e prope novas sadas para a carreira do
profissional multimdia.
29
 Possibilitar informao para as novas geraes
sobre diferentes reas de atuao tambm o
foco do projeto, pois o crescimento do mercado
de entretenimento demanda maior necessidade
de mo de obra, e a facilidade e amplo nvel de
conhecimento que o profissional multimdia adquire
durante todo o perodo de formao um diferencial
significativo para o aluno que pretende ingressar na
rea de comunicao relacionada a multimdia.

Hiptese

O site dar visibilidade a profisso de

Produo Multimdia, alm de ser um referencial
informativo para os profissionais da rea que tero
a possibilidade de usufruir de uma ferramenta
independente de outras carreiras da comunicao,
com foco nico para a sua formao.

Pertinncia

O propsito do site trazer acessibilidade para

o reconhecimento de profissionais multimdia,
descrevendo a carreira e suas caratersticas ao usurio.

30
 Problematizao

No existem sites destinados aos profissionais

de multimdia ou que tenham essa carreira como
foco principal para o usurio, e, na maioria das
vezes o profissional multimdia confundido ou no
compreendido a outras carreiras relacionadas
comunicao, esse fato interfere na visibilidade
dessa rea, pois alm de multimdia ser uma profisso
explorada recentemente no mercado de trabalho, o fato
de no ser identificada facilmente pelo pblico
geral contribu pra que seu entendimento seja
prejudicado, e isto um elemento limitador.

Viabilidade

Multimdia abrange um mercado extenso, trazendo

facilidades para a execuo de projetos, com
sistema prtico de organizao e elaborao
de ideias.
Atualmente no existem sites destinados a esse
tema nem sites relacionados que sejam completos
e de fcil entendimento por parte do usurio.
Pode ser utilizado a nveis diversos, tanto
por alunos e profissionais da rea quanto por
usurios padro.
Tem como funo proporcionar visibilidade para a
carreira e aderir novos profissionais.

31
 Relevncia

Atualmente os sites relacionados comunicao

no oferecem contedos relacionados carreira
multimdia o que torna complexa a visibilidade de
profissionais que possuem essa especialidade,
que tem como foco interligar contedos relativos
a diversos setores da comunicao, e, em uma
mesma rea de atuao, ordenando ideias e
administrando a criatividade para a realizao
de contedos diversos, utilizando ferramentas e
recursos multimdia diferenciados.

O site tem como objetivo proporcionar

visibilidade, informao e representatividade para a
carreira de um profissional multimdia para que haja
informao e contedos intrigantes ao usurio.

32
Pblico / Mercado
33
34
 Pblico

As projees de crescimento do entretenimento

para os prximos anos no Brasil um fato que
visa maior ateno para o mercado de trabalho,
pois a demanda por mo de obra para a execuo
de tarefas que relacionam a utilizao de novas
tecnologias voltadas para este setor tende a sofrer
expanso brevemente, e, para determinar que
esse crescimento ocorra de maneira organizada
e gradual, necessrio que haja investimento na
formao de profissionais habilitados para executar
funes dinmicas e correlacionadas em quaisquer
que seja o projeto comunicativo.

Devido ao amplo progresso desse setor

proposto que o pblico-alvo do site sejam, tanto
pessoas que estejam em busca de uma carreira
quanto aos alunos que estejam iniciando o curso de
Produo Multimdia ou similares, pois em ambas
as situaes necessrio que haja conhecimento
aprofundado sobre essa funo e sua importncia e
prtica real no mercado de trabalho para que esses
futuros e possveis profissionais da rea tenham
informao a respeito do que espera-se dele como
um estudioso dessa profisso.

35
 Mercado

As projees de crescimento do entretenimento

para os prximos anos no Brasil um fato que
visa maior ateno para o mercado de trabalho
multimdia, pois a demanda por mo de obra para a
execuo de tarefas que relacionam a utilizao de
novas tecnologias voltadas para este setor tende
a sofrer expanso brevemente, e, para determinar
que esse crescimento ocorra de maneira organizada
e gradual, necessrio que haja investimento na
formao de profissionais habilitados para executar
funes dinmicas e correlacionadas em quaisquer
que seja o projeto comunicativo.

Atualmente muito comum empresas

tradicionais utilizarem da prtica de tcnicas
multimdiaticas para cativar e fidelizar seu pblico,
pois o crescimento das plataformas eletrnicas
contribuiu para que houvesse uma migrao para
esse tipo de propaganda, devido a esse fenmeno
carreiras como social media, que est diretamente
relacionado a multimdia de maneira geral vem
propiciando uma demanda antes incompreendida.

36
 A facilidade de manobra que um produtor
multimdia possui dentro do mercado de
trabalho de extrema importncia, pois os
meios de comunicao so constantemente
mutveis, o que contribu para o fato de que
o profissional encarregado por exercer essa
funo estar sempre atualizado sobre todas as
mudanas que o meio de comunicao passa, o
mais rpido possvel, e a facilidade do produtor
multimdia se interligar sobre diversos mbitos
considerado uma qualidade valiosa para
empresas e produo de contedo no geral.

37
38
Definies

39
40
 Os meios tecnolgicos vm crescendo de
maneira muito acelerada e esse fato contribuiu
para a carreira do profissional em Produo
Multimdia surgir e crescer de forma que essa
profisso seja atual em relao a outras reas da
comunicao, pois os suportes de comunicao
atuais permitem a juno de diversos tipos de
mdia em um s produto comercial, a partir desse
fato surgiu necessidade de um profissional
que se adequasse a essa funo, havendo
necessidade de que profissionais habilitados em
mais de uma especializao fossem solicitados
para lidar com a popularizao desses produtos.

41
 Multimdia, Transmdia e Hipermdia

As novas formas de disseminar um contedo

possibilitam diferenciadas formas de veicular uma
mensagem ao pblico, e esse pblico disposto de
diversas maneiras de consumir uma informao.
Transmdia uma metodologia que visa contar
uma histria em diversas plataformas, utilizando as
particularidades de cada uma delas. Entender qual
mdia faz mais sentido para o seu pblico-alvo uma
tarefa fundamental para que os resultados obtidos
sejam satisfatrios e utilizar mdias diferentes
em um projeto requer criatividade e muito estudo
sobre o tema requerido, pois necessrio que esse
contedo tenha uma proposta original e exclusiva
sobre a concorrncia.

Multimdia a caracterizao de um mesmo

contedo sobre diversas mdias e de diferentes
maneiras, ou seja, uma mecnica que visa empregar
recursos complementares com o objetivo de se
adaptar em plataformas com finalidades anlogas para
promover uma experincia sinestsica ao pblico com
a interao da tcnologia, um projeto multimdia tem
a perspectiva humana relacionada com a tecnologia.
Hipermdia um conjunto de meios que permitem
acesso simultneo a textos, imagens e sons de
modo interativo e no linear e possui uma navegao
controlada pelo usurio.

42
 Classificao das especialidades
de um profissional multimdia

importante frisar que multimdia uma tcnica

que visa promover um contedo com a utilizao de
diferenciados recursos, o profissional multimdia tem
como objetivo harmonizar os recursos de maneira a
causar um efeito transmiditico sobre o usurio.

A execuo das funes desse profissional

podem ser concretizadas implementando todas,
uma ou algumas tcnicas das quais ele habilitado,
dependendo da caracterstica do contedo
apresentado e sua funo perante a sociedade.

O profissional multimdia habilitado em

diversos recursos relativos ao setor de comunicao:

43
 A. Design Grfico - objetiva a comunicao
visual do contedo, atravs de imagens, textos e
desenhos, onde o designer utiliza habilidades de
desenho, esttica, artes visuais, diagramao e,
principalmente, criatividade.
B. Web Design - responsvel pela concepo da
arquitetura de um site, o que inclui a estrutura e o
aspecto visual das diversas pginas que o compem.
C. Vdeo manipulao de contedo audiovisual,
edio e criao de vdeos para diversas plataformas
de execuo de produtos interativos.

D. Fotografia - domina o uso de mquinas, lentes e

filmes, bem como as tcnicas de revelao, ampliao
e tratamento de imagens.
E. Games elabora projetos de design para
plataforma de jogos
F. Mdias Sociais responsvel por administrar a
comunicao de uma empresa nos novos espaos de
interao social.
G. Cinema domina tcnicas de direo e
produo de vdeos e contedos audiovisuais.

44
 Canais de comunicao

O setor de Mdia e Comunicao se dedica

criao e distribuio de diferentes tipos de mdia,
este setor dominado por grandes conglomerados
de mdia que tm um conjunto diversificado de
atividades e tambm inclui meios de comunicao
com um ou mais pblicos alvo.

Para que a distribuio do contedo seja vinculada

de maneira eficaz necessrio que se consiga atingir
o pblico desejado, e para tal ato, conhecimentos
aprofundados sobre os canais de comunicao e
ideias para cada projeto so fundamentais.

A utilizao adequada dos canais de comunicao

de suma importncia na carreira de um produtor
multimdia, pois no importa qual sua principal rea
de atuao, saber lidar com os diferentes tipos de
projetos e pblico-alvo uma caracterstica que o
diferencia dos demais profissionais de comunicao.

45
 Definio dos Canais de Comunicao

Visual

O canal de comunicao visual ilustra a ordem do

desenvolvimento, projetos com essas caractersticas
tendem a ser mais diretos e com informaes precisas,
formas retas e simples so utilizadas com frequncia.

Auditivo

O canal de comunicao auditivo tem como

foco modernidade e dinamismo. Os projetos so
compostos pela utilizao de diversos recursos
grficos, desequilbrio e movimento.

Sinestsico

O canal de comunicao sinestsico visa abordar

equilbrio entre a composio produzida, a leveza
e suavidade so exploradas para que se consiga
sucesso nos resultados obtidos.

46
Pesquisas

47
48
 O primeiro estgio relativo ao processo de
pesquisas inicia-se com a definio do tipo de
trabalho a ser apresentado, e, conforme estudado
minuciosamente a respeito da melhor opo a ser
escolhida, o segmento de web design foi classificado
como satisfatrio para os resultados a serem obtidos,
por haver identificao e curiosidade para lidar com as
questes tcnicas do projeto.
Entretanto houve necessidade de mais pesquisas
para que o tema a ser explorado fosse finalmente
definido, e para tal escolha alguns critrios bsicos
foram estabelecidos, tais quais:

O site deveria abranger um tema pouco

divulgado;
Este tema deveria ter alguma relevncia
significativa para o usurio;
Alm de relevncia o site deveria focar em um
contedo direto para que o usurio fosse devidamente
esclarecido sobre o assunto em pauta;
Este tema deveria ter alguma ligao com as
tendncias do mercado, para que de alguma forma
auxiliasse o usurio em algum mbito;
O tema deveria ter alguma ligao direta com
um problema atual da sociedade brasileira;
O tema deveria ter alguma ligao direta com a
rea de comunicao e entretenimento.

49
 Conforme anlises a respeito de todos esses
critrios, algumas pesquisas foram realizadas para
a obteno de uma definio justa s causas da
execuo do projeto, e foi identificado um srio
problema com relao ao mercado de trabalho em
decorrncia da crise financeira atual vivida no pas,
como relatado a seguir:

[...] Mais um milho de brasileiros ficaro sem emprego

em 2017. Crise no mercado de trabalho continua, com 13,7
milhes em busca de uma vaga (Lucianne Carneiro - OGlobo,
12/2016)

[...] Brasil ter maior alta do desemprego entre grandes

economias em 2016, prev Organizao Internacional do
Trabalho. Entidade diz que 700 mil brasileiros devem perder
o emprego e alerta que crise levar a uma queda severa no
mercado de trabalho. (Jamil Chade, O Estado de S.Paulo,
01/2016).

[...] Crise financeira j afeta a gerao de emprego no pas

(Reinaldo Azevedo, Veja, 02/2016).

50
 A partir desse fator foi definido que o site de
alguma maneira pudesse colaborar para que
esse fato fosse visualizado de outras maneiras
apresentando solues eficazes ao usurio,
portanto mais pesquisas foram realizadas, porm
agora com foco para a resoluo desse problema,
e como resultado foi identificado uma tendncia
para o crescimento das plataformas de mdia,
principalmente no Brasil, como apresentado:

51
52
 Aps a realizao das pesquisas iniciais foi
definido que o site iria abordar assuntos referentes ao
mercado de trabalho na rea de entretenimento.
Portanto mais pesquisas, agora com foco em
visualizar sites que abordassem esse assunto foram
realizadas e foi detectada que no havia nenhum
site que tivesse como foco a rea de Multimdia,
uma profisso que abrange diversos mbitos da
comunicao e, portanto seria muito interessante
apresentar essa carreira aos usurios que esto em
busca de uma profisso relacionada comunicao.
O fato de no haver nenhum site que tivesse como
tema apresentar a carreira de multimdia colaborou
para que a execuo do projeto tivesse mais um
propsito relevante ao site.

53
54
 Conforme as necessidades que surgiram ao
decorrer do desenvolvimento do site conhecimentos
relativos a reas de design grfico, design editorial
e web design foram aperfeioados e ajudaram
a construir uma base relativamente razovel de
conhecimentos.
As pesquisas didticas trouxeram as informaes
importantes que auxiliaram na realizao de muitos
tpicos relativos execuo do site, alm de
contribuir para um maior conhecimento dos assuntos
relacionados a carreira multimdia de forma geral.

55
 Alguns conceitos relativos teoria da
comunicao foram empregados e estudados a
fundo para que houvesse maior discernimento com
relao a proposta inicial do site.
As seguintes pesquisas e adequaes tiveram
como base quesitos tcnicos e tericos com relao
ao tema anteriormente definido, alguns temas
especficos foram explorados para a compreenso
de algumas dvidas e curiosidades, livros, artigos da
internet e orientao de alguns professores tiveram
importncia fundamental para que a execuo do
projeto tivesse andamento.

Principais pesquisas utilizadas relativas Web

Design:

Bootstrap 4;
Hamburguer Menu;
Javascript;
Parallax.

56
 Principais pesquisas utilizadas relativas
Produo Multimdia:

Transmdia;
Hipermdia;
Meios de Comunicao;
Multimdia.

Principais pesquisas utilizadas relativas Design

Grfico:

Teoria das cores;

De Stijl;
Design Grfico Japons;
Minimalismo;
Bauhaus;
Tipogrfia;
Canais de Comunicao.

57
58
Definies
59
60
 Contedo do site

Devido ao tema do projeto explorar um assunto

especfico, em que a formulao do contedo
autoral, foi necessrio que os textos expostos no
site fossem produzidos a partir de pesquisas e
fontes de contedo devidamente analisadas.
Alguns livros foram utilizados para que houvesse
entendimento aprofundado sobre os fenmenos
que pautam a sociedade moderna perante as novas
mdias e as modificaes de comportamento da
sociedade perante tal.

Segundo afirmaes de Alvin Toffler, Mudana

o processo no qual o futuro invade nossas vidas,
e, conforme se complementa o processo de
modificao dos meios, ao qual o conhecimento
passa a ser um recurso dominante da sociedade, as
tcnicas multimdia agem como ferramenta auxiliar
ao processo de incluso tecnolgica, promovendo
acesso ao conhecimento em diferentes escalas e
fontes de informao.

61
 Bill Gates em A estrada para o futuro,
1995, afirma que, As principais mudanas
dizem respeito maneira como as pessoas vo
se comunicar entre si. A tcnica multimdia
se caracteriza como um dos alicerces dessa
mudana, promovendo meios de interao e
envolvimento da sociedade sobre a maneira
que a divulgao de informao distribuda.

O crescimento das fontes de divulgao, e

execuo de contedo, causa um fenmeno
de digitalizao da matria, dessa forma a
busca por novos profissionais, cada vez mais
habilitados e preparados para os mecanismos
da modernizao dos meios aumenta de maneira
gradativa, importante que a nova gerao de
profissionais seja dinmica, criativa, e cada vez
mais preparados para manusear diferentes canais
de comunicao, com administrao intuitiva
das ferramentas disponibilizadas e colocaes
diferenciadas e inovadoras.

O contedo do site visa explanar sobre

as caractersticas que formam um profissional
multimdia, seu intuito apresentar de forma
branda a importncia da formao desses
profissionais e o perfil dessa carreira, para tal ato o
projeto dividido em etapas que visam organizar a
distribuio de informao do site, tais quais:

62
 O que multimdia - O primeiro tpico do site
tem como foco apresentar multimdia ao usurio,
com uma breve explicao dos elementos aos quais
a compem.

Carreira - O segundo tpico do site tem como

objetivo informar a respeito da carreira de um
profissional multimdia, alm de mencionar as
aptides adquiridas e que os completam como tais.

Mercado - O terceiro tpico do site informa

sobre a tendncia de crescimento da carreira ao
usurio, importante frisar que o objetivo do projeto
alm de apresentar o universo multimdia ao leitor
essencial abranger justificativas para que haja
interesse do pblico pela carreira em pauta.

Portflio - O quarto tpico do site visa informar

sobre o mtodo de apresentao que o profissional
dessa rea deve utilizar que o portflio, alm
de sanar questionamentos, dvidas e ilustrar a
importncia que esse elemento de divulgao
profissional detm.

Desenvolvimento - O quinto tpico do

site relata a razo da consumao do projeto,
enfatizando sobre a importncia de divulgao do
tema explorado.

63
 Tcnicas empregadas

Perfil Multimdia

O perfil multimdia do projeto se enquadra no

fato de mais de uma linguagem ser utilizada na
composio final do site, alm de web design foi
necessrio utilizar conhecimentos relativos e design
grfico na composio da identidade visual do
site, alm de conhecimentos aprofundados sobre
produo multimdia na formulao do contexto
referente ao contedo exposto no site e leitura
e produo de texto para harmonizar a dinmica
textual ao usurio.

Disciplinas Relacionadas

O site tem como sua principal funo apresentar

a carreira multimdia ao pblico e como prpria
exemplificao de um projeto que envolve
Transmida ele possu diferentes vertentes desse
seguimento, tais quais:

Web Design

Estuda a respeito da tecnologia e arquitetura

da informao unida ao conceito artstico que
visa dar significado a uma estrutura pr-definida.
64
 Design Grfico

o estudo prtico e terico do conceito da

identidade visual de uma obra, para isso utiliza
de diversas pesquisas relacionadas a cores,
tipografia, canal comunicativo, composio,
histria do design e muitas outras referencias
acadmicas para sua compreenso.

Histria da Arte

Permite que haja um pensamento crtico

quanto forma e expresso desejada na
composio do site, uma boa criao multimdia
utiliza de fatos histricos para sua execuo.

Representao Eletrnica

Tem como principal objetivo tornar possvel

a execuo de todos os preceitos grficos
empregados no site, sua funo tornar prtica
e ligeira possveis alteraes relacionadas ao
design grfico e tambm o estudo da composio
dos elementos presentes em um site.

65
 tica e Gesto

Um site que tem como objetivo passar

informao ao pblico tem como dever social
trabalhar conforme a tica, pois esse tipo de
projeto deve agir de acordo com um principio
moral de respeito ao usurio.

Produo Multimdia

Produo Multimdia uma matria diretamente

relacionada com o tema do site, pois informaes,
teorias e conhecimentos sobre o tema explorado
so fundamentais para a criao do contedo
do projeto, e analise correta das definies
desenvolvidas em sua consumao.

66
 Identidade visual

Conceitos

Minimalismo, De Stijl e Design Japons so as

principais inspiraes para a criao do site, que tem
como objetivo interligar esses trs conceitos em uma
obra nica.

Baseado na objetividade o Design Japons

composto por linhas e formas simples. Ikko Tanaka
uma das principais referncias do Design Japons, pois
utilizou conceitos baseados na cultura de seu pas em
suas criaes, o que contribuiu para que suas obras
tivessem uma identidade consolidada transmitindo
delicadeza e o respeito pela harmonia entre natureza
e espao urbano utilizando recursos sustentveis.

67
 O design De Stijl tem destaque pela rigorosa
preciso da diviso dos espaos, que inclu divises
de linhas negras, o que causa contraste e equilbrio,
as formas bsicas, cores primrias tambm
so utilizadas com o propsito de promover a
identidade com a mxima simplicidade nas solues
estabelecidas, a tipografia sem serifa e a remoo
das curvas tambm so caractersticas do design
De Stijl, e a cor vermelha, geralmente utilizada em
contraste com o preto representa a revoluo em
busca do equilbrio universal e harmonia da arte.

O design Minimalista um estilo esttico que

teve origem na dcada de 60 sendo uma reao aos
movimentos ps-modernos, que busca questionar
os excessos atravs da filosofia less is more, sua
inspirao provm da cultura japonesa e sua maior
caracterstica a utilizao limitada de cores e
elementos a fim de promover uma inteno, mesmo
com poucas varincias.

68
 Defesa de criao

O site possui uma esttica baseada nos

conceitos de Design Japons, De Stijl e Minimalista,
e sua criao se embasa na utilizao de elementos
bsicos como crculos, quadrados e tringulos,
alm de utilizao das cores primrias como base do
projeto, e seus complementares e anlogos como
auxiliadores para criar a sensao de movimento
entre os assuntos abordados.

A criao do projeto se embasa em unir

cores, elementos e movimento com o objetivo de
apresentar o tema do site e tambm proporcionar
uma experincia sinestsica ao usurio, pois
produo multimdia uma rea de atuao que
interage com todos os sentidos do ser humano, de
diferentes formas e com intenes diversas.

69
 Paleta de Cores

A paleta de cor utilizada na execuo da

identidade visual do site parte do princpio de origem
dos elementos, assim como no logotipo do projeto,
que faz uso das formas geomtricas bsicas
As cores escolhidas para formar a composio
dos elementos so tonalidades das cores primrias,
amarelo, vermelho e azul. Estas cores do origem
a todas as outras de um circulo cromtico, alm de
fazer referncia ao movimento De Stijl, que utiliza
essas cores com frequncia.

a partir destas trs cores principais que as

demais cores da paleta foram selecionadas, pois
conceito de analogia e complemento foi utilizado e
estudado para que houvesse harmonizao de toda
a sua totalidade.
A seguir possvel observar a paleta de cor
oficial do site e seus valores correspondentes em
RGB, CMYK e Hexadecimal:

70
Cores principais:

71
 Formas

As formas geomtricas bsicas so

utilizadas na composio dos elementos
apresentados no site. Tal escolha se deve aos
conceitos empregados, que em sua totalidade
pregam pela simplicidade e disposio
harmnica do contedo a ser elaborado.
Os retngulos unidos que esto dispostos
ao lado direito do site so inspirados no design
japons. As cores variam conforme o site
apresenta todo seu contedo para que passasse
a sensao de dinamismo, com o objetivo de
caminhar junto ao usurio.

72
 Logotipo

A proposta do logotipo consiste na utilizao

de figuras geomtricas para a composio de um
elemento nico.Originado a partir das formas bsicas.
Sua inspirao vem do movimento De Stijl, utilizando
as cores amarelo e vermelho, e tambm na escola
Bauhaus que faz uso de formas geomtricas para a
composio de suas obras.

logotipo principal

O logo foi idealizado para que fizesse referncia a

movimentos muito estudados em design grfico, pois
na carreira de um profissional multimdia de extrema
importncia que haja conhecimentos a respeito da
histria do design e artes em geral.
A tipografia utilizada Gravity Light e Gravity
Regular, sem serifa, tem como objetivo apresentar
leveza ao logo, e o alinhamento horizontal utilizado.

73
 Cores utilizadas

As cores vermelho e amarelo foram utilizadas

na composio do logo e como cores destaque do
projeto. O amarelo utilizado como cor complementar
ao vermelhow para que haja sensao de animao
e inspirao, enquanto o vermelho associado
inovao. O objetivo principal da utilizao destas
cores proporcionar uma sensao afetiva ao usurio.

Paleta de cores do logotipo

74
Verso P&B

Verso tons de cinza

75
 Tipografia do Logotipo

76
Usos Alternativos

Smbolo do logotipo

Verso com nome

Verso com alinhamento vertical

77
 Alinhamentos

Verso com alinhamento horizontal

Verso com alinhamento vertical

78
Escala de reduo

79
 Espaamento

20 mm de distncia

80
 Backgrounds

O site conta com backgrounds que possuem

variaes de cores, conforme a paleta de cores
utilizada para o projeto, esses backgrounds no
repetem entre as mudanas de Parallax e tem como
objetivo separar os contedos que so exibidos no
site por categorias.

Background da tela inicial

81
 Exemplo - backgrounds do corpo do site

Os backgrounds inseridos no corpo do site

possuem uma variao de cor, conforme a paleta de
cores do projeto:

A cor bege utilizada como cor base dos

elementos geomtricos do background.

82
 Especificaes

Fluxogramas

Desde a concepo da ideia inicial do site foram

desenvolvidos dois principais modelos de fluxogramas:

Primeiro modelo:

83
 Aps estudos e conversas com os professores
chegou-se a concluso que o projeto deveria
absorver todo contedo referente multimdia sem
que houvesse um foco maior ou menor para qualquer
que fosse a ramificao dessa profisso, pois assim o
usurio teria uma viso abrangente sobre o assunto,
sem tendncia a considerar esta uma carreira focada
em somente uma vertente comunicativa.

O fluxograma inicial, como mostra a imagem

abaixo, tem como caracterstica dar enfoque para
reas de vdeo, web e design, considerando as demais
ramificaes como somente uma sobra da profisso,
um conceito completamente errneo e que no diz
respeito ao objetivo inicial do site:

Posteriormente o fluxograma oficial do site foi

desenvolvido e pensado com o cuidado para que fosse
amplo o suficiente para dar entendimento ao usurio
sem que fosse subjetivo e causasse o efeito contrrio,
confundindo-o ainda mais com relao a essa carreira.

84
 Wireframes

A composio do wireframe foi elaborada em

duas etapas, primeiramente um modelo inicial foi
criado nas verses mobile e desktop, porm no
eram eficientes para o estilo de contedo que seria
criado na plataforma:

Modelos iniciais de wireframes

85
86
 Esta primeira verso foi inspirada baseada na
primeira idealizao do projeto, contendo sua proposta
de nome inicial e paleta de cores antiga tambm.

A segunda verso foi elaborada com objetivo

de fornecer mais praticidade ao usurio, visto que
o foco principal do projeto justamente fornecer
informao de maneira prtica. Portanto, no era
vivel uma interface de difcil manuseio.

Modelos finais de wireframes

87
88
 As telas finais foram projetadas conforme as
especificaes do modelo final de wireframe, elas
esto dispostas em uma coluna, na qual contm uma
diviso proporcional aos textos e imagens inseridas
no site. Contudo a tela inicial do site possui duas
colunas e uma linha para melhor adaptao do
contedo. Todas as projees foram realizadas
utilizando o framework Bootstrap 4.

Prints de telas do site

89
 Tecnologias empregadas

HTML 5

uma linguagem de marcao lanada na dcada

de 90. a tecnologia que estrutura as pginas para
internet. executado em milhes de computadores
pessoais e em bilhes de dispositivos em todo o
mundo, inclusive em telefones celulares.

CSS 3

CSS 3 uma ferramenta que foi criada por

Harkon Wium Lie e Bert Boss na dcada de 90, com
objetivo de formatar o contedo desenvolvimento
em HTML e controlar a aparncia do documento,
para que fique mais atrativa ao usurio.

90
 CorelDraw

O CorelDraw um programa de desenho vetorial

bidimensional para design grfico desenvolvido
pela Corel Corporation, sediada Canad. um
aplicativo de ilustrao vetorial e layout de pgina
que possibilita a criao e a manipulao de
produtos.

Adobe illustrator

Adobe illustrator um editor de imagens vetoriais

desenvolvido e comercializado pela Adobe Systems.
Foi criado inicialmente para o Apple Macintosh em
1985, e, foi comercializado para todo o pblico em
1995 como complemento comercial de software
de fontes da Adobe e da tecnologia PostScript
desenvolvida pela empresa. A sua verso mais
recente Adobe Ilustrator CC.

Bootstrap 4

Bootstrap uma coleo de vrios elementos

e funes personalizveis para projetos da web,
foi criado como uma soluo interna para resolver
inconsistncias de desenvolvimento dentro da
equipe de engenharia do Twitter. A sua verso mais
recente Bootstrap 4.

91
 jQuery

jQuery uma biblioteca de funes JavaScript

que interage com o HTML, desenvolvida para
simplificar os scripts interpretados no navegador
do cliente. Lanada em dezembro de 2006 no
BarCamp de Nova York por John Resig.

92
Programas utilizados

Brackets

Adobe Indesign

93
 Adobe illustrator

Corel Draw

94
 Recursos Utilizados

Animate.cc - um recurso que permite a execuo

de recursos animados ao site, simplificando o processo
de criao desses elementos.

Hamburger menu - um cone encontrado

em programas e sites, seu objetivo minimizar a
quantidade de contedo de um menu tradicional,
alm disso esse menu muito utilizado em sites
para dispositivos mveis por facilitar a visualizao
da pgina ao usurio.

95
 Parallax - um recurso que tem como objetivo
causar uma iluso de profundidade nas interfaces
de um projeto.

Slider - uma estrutura que tem como objetivo

apresentar um carrosel de imagens, que pode ou
no conter informaes referntes ao contedo
exibido na pgina.

96
 Criao

O site foi idealizado para ser uma plataforma

mobile, para tal objetivo o framework Bootstrap 4
foi utilizado na execuo do projeto.Esse framework
permite que o site seja separado por linhas e
colunas, para que assim o modo responsivo seja
aplicado com maior facilidade pelo desenvolvedor .

O conceito de Parallax tambm foi aplicado ao

projeto, com intuito de tornar a plataforma fluda
para o usurio, incentivando a leitura de todo o
contedo, por no apresentar uma separao das
pginas somente atravz de links e menus, tornando
a plataforma dinmica.

97
 Requisitos de Execuo

Resoluo ideal: 1366 x 768 px

Requisitos para Browsers:

Internet Explorer - 11 ou anteriores

Google Chrome - 62.0.3202.62 ou anteriores

Mozilla Firefox - 53.0.3 ou anteriores

Microsoft Edge

Requisitos para mobile:

Android - 7.1.2 ou anteriores

iOS - 11 ou anteriores

Windows Phone - 8.1 ou anteriores

98
 A adaptao do site tanto para dispositivos
mveis quanto para navegadores com verses
anteriores dever ser acrescentada de maneira
gradativa, para que assim todos os recursos
sejam implementados com xito de acordo com as
especificaes de cada ambiente de navegao.
Porm o site pode ser visualizado normalmente
durante o perodo de adaptao em todos os
dispositivos citados anteriormente.

Frequncia de atualizao

As atualizaes tcnicas do projeto sero

desenvolvidas mensalmente, e conforme
houver necessidade de modificaes visuais
e acrscimos de contedo sero includos no
projeto a cada trs meses.

99
 Hospedagem e Domnio

O projeto passou pelos processos de

hospedagem e domnio ao final de sua execuo.
O domnio leva o nome do projeto, thatsmedia.
com.br sendo realizado no site Registro.com, o
site foi hospedado no servidor Hostgator.

Mapeamento

Sitemaps um recurso que visa possibilitar

estatsticas de indexao e texa de rastreamento
de um site. Alm de oferecer servios de
pagarank. Seu objetivo guiar os mecanismos de
busca para que o site possa ser identificado com
mais facilidade.
O recurso escolhido para ser anexado ao
site foi o Sitemap.html, que recomendado ao
usurio padro.

100
Consideraes Finais

101
102
 Houve grande satisfao em poder apresentar
este projeto acadmico concludo depois de todo o
processo de pesquisa, anlise e desenvolvimento.
Thats Media uma enorme realizao que, desde o
inicio, focou no intuito de oferecer um contedo de boa
qualidade e diferenciado. Desde o incio, o objetivo,
essencialmente, apresentar a carreira de multimdia
e suas diversas contribuies sociedade.

Espero que o projeto possa servir de auxlio,

completando a misso de levar qualidade, informao
e contedo aos usurios. Aos futuros alunos do curso
de Produo Multimdia da Universidade Santa Ceclia,
desejo que este projeto inspire, guie, auxilie e mude
mundos, como mudou a mim.

103
104
Bibliografia

GATES, Bill; MYHRVOLD, Nathan; RINEARSON,

Peter. A estrada do futuro. Companhia das Letras,
1995.

LEO, Lucia. O Labirinto da hipermdia, Editora

Iluminuras Ltda, 1999.

TOFFLER, Alvin. O choque do futuro. 2nda Ed. Rio

de Janeiro: Record, 1970.

TOFFLER, Alvin. A terceira onda: a morte do

industrialismo e o nascimento de uma nova civilizao.
Rio de Janeiro: Record, 1980.

105
Comentrios bibliogrficos

O choque do futuro Possui abordagem sobre

tendncias futursticas atravs de anlises do autor
sobre o ritmo da vida ligado a conexes existentes
associadas ao homem, esse contexto utilizado
ao analisar a importncia da multimdia perante as
interaes entre o homem e os meios.

A terceira onda O livro foi utilizado como

referncia para que houvesse maior compreenso
a respeito dos fenmenos que as modificaes
do estilo de vida da sociedade moderna causam
sobre a mdia e meios de comunicao, que se
modificaram conforme a gerao atual tambm se
modificou com relao s sociedades anteriores.

106
 A estrada do futuro Compreender sobre a
modificao da informao atravs de diferentes
meios de distribuio, e como ocorre o processo
de viso sobre tendncias auxiliou para que os
conhecimentos sobre como a distribuio da informao
explorada na economia, e consequentemente no
mercado de comunicao atrelado aos processos
tecnolgicos, o que auxiliou a execuo do contedo
relativo ao site, principalmente em tpicos relacionados
ao mercado de trabalho do profissional multimdia.

Labirinto da hipermdia O livro foi utilizado

para promover maior conhecimento a respeito
da hipermdia e seu significado na nova era da
informao. Os conhecimentos adquiridos a partir
dessa leitura auxiliaram na criao dos textos, tanto
da monografia quanto do contedo final do site.

107
Referncias Bibliogrficas
Os artigos abaixo foram utilizados com o base
para a obteno de referncias no desenvolvimento
da monografia e contedo do site.

LVY, Pierre. A emergncia do cyberspace

e as mutaes culturais. Ciberespao: um
hipertexto com Pierre Lvy. Porto Alegre: Artes
e Ofcios, p. 12-20, 2000.

LIMA, Rosngelis Rodrigues Fernandes.

TOFFLER, Alvin. O choque do futuro. Rio de
Janeiro: Record, 1970. Revista Formadores, v.
3, n. 1, p. 85-90, 2010.

Referncias Virtuais
Adobe Kuler: Color wheel | Color schemes
Disponvel em: <https://color.adobe.com/>
Acesso em: 13 Ago. 2017. - Site utilizado para
desenvolvimento da paleta de cores do projeto.

Bootstrap The most popular HTML, CSS,

and JS framework Disponvel em: <https://
getbootstrap.com/> Acesso em: 12 Ago. 2017. -
Site utilizado para consulta da documentao do
framework bootstrap.

108
 jQuery: The Write Less, Do More Disponvel
em: <https://jquery.com/> Acesso em: 5 Set. 2017.
- Site utilizado para consulta da documentao do
framework jQuery.

Tableless - Artigos sobre HTML, JavaScript

CSS Disponvel em: <https://tableless.com.br/
parallax-scrolling/> Acesso em: 9 Set. 2017. - Site
utilizado para consultas sobre parallax.

Animate.CSS Disponvel em: <https://daneden.

github.io/animate.css/> Acesso em: 11 Out. 2017. -
Site utilizado para criao de efeitos animados no site.

Bounce.js Disponvel em: <http://bouncejs.

com/> Acesso em: 4 Out. 2017. - Site utilizado para
criao de efeitos animados no site.

Hamburger Menu to X ~ CodeMyUI Disponvel

em: <https://codemyui.com/hamburger-menu-
to-x/> Acesso em: 21 Ago. 2017. - Site utilizado
como referncia para desenvolvimento do menu.

Stack Overflow Disponvel em: <https://

stackoverflow.com/> Acesso em: 2 Set. 2017. - Site
utilizado para respostas e entendimento de dvidas
tcnicas do projeto.

109
Anexos
Os seguintes anexos tem como objetivo
ilustrar os sites que foram referncia para o
desenvolvimento do projeto e da identidade
visual do site.

http://nordic.design/

http://www.culturalsolutions.co.uk/

110
 https://www.helloheco.com/

http://www.melas.eu/en

http://heartbeat.ua/

111
112
 Este livro foi composto pela famlia de fontes Gravity e

impresso em papel couche 115g/m

113