TCC - Road 2 Recovery - Timóteo Thober

Faculdade SENACRS
Curso Superior de Tecnologia em Produo Multimdia
Road 2 Recovery
Desenvolvimento de layout e animao de divulgao para aplicativo
de auxlio a usurios de um site que auxilia pessoas viciadas em pornografia
Timteo Thober
Giovani Ramos da Silva Jnior
Orientador
Me. Franz Johsef Figueroa Ferreira
Porto Alegre, 2015
Agradecimentos
Giovani Jnior
Sou grato a Deus por todo amor e cuidado sempre constantes sobre mim.
Agradeo aos meus pais por me amarem, e me passarem princpios que sempre
levarei comigo e que me trouxeram at aqui. Obrigado por tudo.
Agradeo a minha namorada, Lara, por esse amor inexplicvel por mim e por em
vrios momentos ser minha referncia e inspirao. Obrigado por demonstrar amor
e carinho em cada atitude tua e por me aguentar em momentos de cansao e
estresse. Eu te amo.
Agradeo ao Mestre Franz por aceitar nos orientar nesse projeto desafiador, no
hesitar em nenhum momento da jornada e sempre procurar nos incentivar.
Agradeo ao Mestre Cristiano por sempre esperar o melhor de seus alunos e por
nos fazer refletir sobre nosso projeto, alm de dar dicas valiosas.
Agradeo aos meus amigos por compreenderem minhas ausncias, sono excessivo
e por me aguentarem repetindo a frase no d, to fazendo TCC diversas vezes.
Agradeo a todos os professores do curso de Produo Multimdia, por contriburem
para o meu aperfeioamento profissional e acadmico.
Timteo Thober
Agradeo demais a Deus pelo amor que Ele tem por mim, pela graa dEle que me
sustenta todos os dias e pela vida que vem dEle. Toda a glria a Ele.
Agradeo aos meus pais por me ensinarem a sonhar, questionar, batalhar e andar
com integridade. Pelo carinho, pacincia, amor e energticos que me deram nesse
tempo de TCC. Ao meu irmo, por me aguentar com sono e chato, por me lembrar
que eu preciso almoar, por implicar comigo e me motivar. Amo vocs. Sei que
nada disso seria possvel sem vocs.
Agradeo minha namorada, Daiane, por todo o amor, cobrana, incentivo e ajuda
durante esse semestre. Pela reviso, por ficar acordada pra que eu ficasse
acordado, pelos cafs, por me lembrar do que realmente importa. Por me aguentar
com sono e sem conseguir "processar" direito. Te amo!
Ao Franz Figueroa, por acreditar e decidir nos orientar nesse trabalho de assunto
nada fcil. Por querer continuar a orientao mesmo enquanto estava sendo
atendido pelo SAMU. Tua paixo por pessoas me inspira muito.
Ao Cristiano Ribeiro, por se empolgar com o projeto e com a gente, nos dar uma luz
quando mais precisvamos - o projeto no teria tomado o rumo que tomou se no
fosse por ti.
Paloma Martins e Caroline Cantelli, por serem nossas orientadoras extra-oficiais.
Pelos palpites e sugestes, por surtarem pela gente, por nos incentivarem a
continuar. Valeu mesmo.
Aos meus amigos por entenderem algumas ausncias, me apoiarem, orarem por
mim, me darem dicas. Em especial ao Gustavo Furstenau, pela ajuda na identidade
visual do aplicativo. Aos adolescentes do UpTeens, pelos momentos de
descontrao, crescimento e comida. O apoio de todos vocs foi muito importante
pra mim.
Aos professores da Produo Multimdia, pelo conhecimento passado, pelas lies
de vida ensinadas, pelos puxes de orelha e pelas risadas. Vocs impactaram
minha vida profissional e pessoal.
#PornKillsLove
3
Sumrio
1.
2.
Introduo ...................................................................................................................... 7
1.1.
Apresentao do Projeto......................................................................................... 7
1.2.
Contextualizao e Justificativa .............................................................................. 8
1.3.
Objetivos............................................................................................................... 11
1.3.1.
OBJETIVO GERAL ........................................................................................ 11
1.3.2.
OBJETIVOS ESPECFICOS .......................................................................... 11
1.4.
Definio dos papis dos integrantes da equipe ................................................... 12
1.5.
Metodologia .......................................................................................................... 13
Fundamentao Terica .............................................................................................. 16

2.1.
Aplicativos............................................................................................................. 16
2.2.
Design de Interao .............................................................................................. 17
2.2.1.
2.3.
Animao 2D ........................................................................................................ 21
2.3.1.
PRINCPIOS DA ANIMAO ........................................................................ 22
2.3.2.
MOTION GRAPHICS ..................................................................................... 28
2.4.
Flat Design............................................................................................................ 30
2.5.
Produo de Vdeo ............................................................................................... 32
2.5.1.
3.
DIRETRIZES DE INTERFACE HUMANA PARA iOS ..................................... 20
ROTEIRO ...................................................................................................... 33
2.6.
Pornografia na Internet ......................................................................................... 34
2.7.
NoFap ................................................................................................................... 35
Desenvolvimento do Projeto ........................................................................................ 38

3.1.
Coleta de dados e anlises ................................................................................... 38
3.1.1.
ANLISE DOS APLICATIVOS ....................................................................... 38
3.1.2.
ANLISE DA IDENTIDADE VISUAL .............................................................. 41
3.1.3.
ANLISE TIPOGRFICA............................................................................... 42
3.1.4.
ANLISE DAS FERRAMENTAS E FUNCIONALIDADES .............................. 42
3.1.5.
ANLISE DOS VDEOS ................................................................................ 43
3.1.6.
ANLISE CROMTICA ................................................................................. 46

4
3.1.7.
ANLISE TIPOGRFICA E ICONOGRFICA ............................................... 47
3.1.8.
CONCLUSES DAS ANLISES ................................................................... 48
3.2.
Criatividade/Gerao de alternativas .................................................................... 50
3.2.1.
WIREFRAMES .............................................................................................. 50
3.2.2.
FLUXO DE TAREFAS ................................................................................... 53
3.2.3.
ROTEIRO ...................................................................................................... 53
3.2.4.
STORYBOARD.............................................................................................. 54
3.3.
Resultados ............................................................................................................ 57
3.3.1.
IDENTIDADE VISUAL ................................................................................... 57
3.3.2.
APLICATIVO.................................................................................................. 59
3.3.3.
ANIMAO.................................................................................................... 61
4.
Consideraes Finais .................................................................................................. 62
5.
Referncias.................................................................................................................. 63
6.
Anexos......................................................................................................................... 70
6.1.
Anexo 1 - Pesquisa com usurios do NoFap ........................................................ 70
6.2.
Anexo 2 - Roteiro da animao ............................................................................. 72
6.3.
Anexo 3 - CD com arquivos .................................................................................. 75
LISTA DE FIGURAS
Figura 01: Etapas do Projeto E.
Figura 02: Sequncia de desenhos esboando movimento
Figura 03: Esboo do princpio de antecipao
Figura 04: Esboo do princpio de animao seguida e pose a pose
Figura 05: Esboo do princpio de acelerao e desacelerao
Figura 06: Esboo do princpio da ao secundria
Figura 08: Arte com Quadros de Heris das HQs em Flat Design
Figura 09: Assinatura visual do frum e site NoFap
Figura 10: Telas do aplicativo NoFap Counter
Figura 11: Telas do aplicativo Abstain!
Figura 12: Telas do aplicativo Commit
Figura 13: Anlise da identidade visual dos aplicativos analisados
Figura 14: Anlise tipogrfica dos aplicativos analisados
Figura 15: Anlise de ferramentas e funcionalidades dos aplicativos analisados
Figura 16: Vdeo - CURRENT App Promo
Figura 17: Vdeo - HSBC/RM App
Figura 18: Vdeo - Rent Motion Graphics - Presentation
Figura 19: Anlise cromtica das animaes analisadas
Figura 20: Anlise tipogrfica e iconogrfica das animaes analisadas
Figura 21: Grfico de votao de funcionalidades/conceitos para o app
Figura 22: Paleta de cores padro de aplicativos iOS
Figura 23: Helvetica Neue
Figura 24: Wireframes do aplicativo
Figura 25: Fluxo de funcionalidades do Aplicativo
Figura 26: Storyboard da animao
Figura 27: Tabela de equivalncia de telas e cenas
Figura 28: Logotipo Road 2 Recovery
Figura 29: Paleta de Cores do app
Figura 30: Smbolo do app
Figura 31: cone do app
Figura 32: Telas do aplicativo
Figura 33: Telas da animao
6
1.
Introduo
1.1.
Apresentao do Projeto
Este trabalho apresenta o desenvolvimento de um layout de um aplicativo mobile

para um site que busca auxiliar pessoas que possuem o hbito de assistir
pornografia a abandonar essa compulso, baseando-se em princpios de formao
e mudana de hbitos, usabilidade e design. Bem como o desenvolvimento de uma
produo audiovisual valendo-se de tcnicas de roteiro, direo e animao 2D
(Motions graphics).
O pblico-alvo do projeto so jovens entre 14 e 24 anos, usurios do NoFap comunidade que, desde junho de 2011, se dedica a ajudar pessoas que desejam
parar com o hbito de assistir ou ler pornografia e esto procurando ajuda atravs
desse site e frum, nos quais os usurios contam suas histrias, so encorajados,
buscam conselhos e so desafiados a ficar 90 dias sem assistir pornografia e sem
se masturbar e vencer o ciclo chamado de PMO 1 no frum.
PMO: Pornografia, Masturbao, Orgasmo - o ciclo do hbito da maioria dos usurios.
1.2.
Contextualizao e Justificativa
Nos ltimos 10 anos houve um crescimento exponencial do uso da internet. De

acordo com a Unio Internacional de Telecomunicaes (ITU, 2015), de 2005 a
2014 houve um crescimento de 24,6% no nmero de indivduos utilizando a internet
no mundo. Nos pases desenvolvidos o aumento foi de 27,4%, e nos pases em
desenvolvimento foi de 24,6%.
Esse crescimento demonstra o quo fcil tem se tornado o acesso informao. E
esse acesso no restringido apenas a computadores e locais com internet a cabo
ou wifi: outra pesquisa da ITU (2014) mostra que entre o ano 2000 e 2013 o nmero
de celulares ativos no Brasil cresceu cerca de 240 milhes, ficando em 5 lugar no
ranking mundial. Esse crescimento deve-se principalmente aos aplicativos
disponveis nos smartphones. Uma pesquisa feita pela Corporao Statista (2015)
revela que o nmero de downloads de aplicativos grtis nos anos de 2013 e 2014 foi
de aproximadamente 220 bilhes, e que, de acordo com a tendncia atual, esse
nmero pode alcanar mais de 250 bilhes ao ano em 2017. Segundo Milani (2012,
p. 11), um dos mercados com maior crescimento nos ltimos tempos o de criao
de aplicativos..
Muitas das atividades que antes eram realizadas em computadores de mesa
(desktops) e notebooks, agora podem ser realizadas nos celulares ou tablets, como
acessar redes sociais, checar e-mails, criar planilhas de trabalho, assistir filmes e
seriados, entre outros. Uma das outras coisas que pode ser acessada atravs dos
smartphones e que, por isso, tem crescido exponencialmente tambm, a
pornografia.
Pornografia a juno das palavras gregas porneia - prostituio - e graphein escrever ou registrar. So considerados pornografia filmes, imagens, textos etc.,
que mostram ou descrevem pessoas nuas ou sexo de maneira aberta e direta com
o intuito de causar excitao sexual (MERRIAM-WEBSTER, 2015). De acordo com
uma pesquisa feita em 2015 pelo site PornHub, s no Brasil existem cerca de 200
milhes de usurios de pornografia, colocando o pas em 8 lugar na classificao
mundial de acesso a pornografia (PORNHUB, 2015).
8
Como resultado do crescimento da internet, no mais preciso comprar a

pornografia fisicamente, ou consegu-la com amigos. Esse contedo pode ser
acessado gratuitamente e com privacidade, sendo necessrio simplesmente uma
conexo com a internet, seja ela wifi, 3G ou a cabo. Alm da facilidade de ser
encontrada, existe uma imensa disponibilidade de contedo. Em uma entrevista ao
site BuzzFeed, Roald Riepen, ex-diretor do site adulto Freeones, afirma que
seguro dizer que no h uma ideia real de quo grande a pornografia digital .
(RIEPEN, 2013).
Apesar de assistir pornografia e se masturbar ser considerado por alguns como um
hbito normal (INDEPENDENT, 2009), vrias pessoas lutam com essa compulso
querendo abandon-la, porm sem obter sucesso. Esses homens e mulheres
possuem vrios motivos para largar essa compulso: ansiedade, distoro de
perspectiva sobre sexo e relacionamentos, sensao de culpa, razes morais e/ou
religiosas, entre outras.
Foi olhando para essa necessidade que foi criado em 2011 o site NoFap2 - um
frum para usurios que lutam contra o hbito de assistir pornografia. Hoje, j com
mais de 150.000 usurios registrados, o frum e website3 conta com homens e
mulheres de diversas idades, variadas nacionalidades e muitos problemas, porm
com um alvo em comum - se libertar do controle que a pornografia e masturbao
exercem sobre a vida deles.
Atravs de uma pesquisa realizada pelo frum em 2012 possvel observar que
70% das pessoas pesquisadas gasta 4 horas por semana ou mais acessando
pornografia. De todas essas, mais da metade comeou a usar pornografia entre os
12 e 14 anos de idade. Todos esses usurios tem considerado o uso de pornografia
um problema, e inclusive acreditam ser o causador de problemas como ansiedade,
depresso, disfuno ertil, reduo da sensibilidade genital, entre outros
Website - http://www.nofap.com/ e Frum - http://www.reddit.com/r/NoFap/
Atualmente existe o site oficial do NoFap, onde todas as informaes oficiais esto agrupadas.
Entretanto, isso no motivo para alteraes no pblico-alvo do projeto, j que os usurios so os
mesmos.
(PROJECT KNOW, 2012). Porm, sem obter sucesso na tentativa de mudana do

hbito, esto buscando ajuda
e apoio de pessoas que tambm possuem essa
dificuldade e que querem lutar contra ela.

Observando essa necessidade, juntamente com o avano crescente do mercado de
aplicativos e a falta de um aplicativo iOS eficiente para os usurios do NoFap,
decidiu-se o tema e as mdias desse projeto. Com o desenvolvimento deste
trabalho, pretende-se ajudar os usurios do site (autodenominados Fapstronauts),
a acessar os recursos e funcionalidades existentes no frum, com a adio de
algumas outras, atravs de um aplicativo para a plataforma iOS.
10
1.3.
Objetivos
Para a realizao deste trabalho foram definidos um objetivo geral, que ser
concludo ao trmino do projeto, juntamente com oito objetivos especficos, atravs
dos quais o objetivo geral ser alcanado.
1.3.1.
OBJETIVO GERAL
Desenvolver uma interface para aplicativo mobile para ajudar os usurios do

site NoFap no desafio de abstinncia de pornografia e masturbao, bem
como uma animao em motion graphics para divulgao do aplicativo.
1.3.2.
OBJETIVOS ESPECFICOS
Estudar o frum NoFap e seus recursos, usurios e ferramentas;
Pesquisar referncias de aplicativos para mudana de hbitos;
Estudar usabilidade para construir o aplicativo;
Pesquisar referncias de animaes vetoriais;
Escrever um roteiro para a animao;
Construir um storyboard da animao.
Desenvolver o layout e modelo navegvel do aplicativo;
Produzir uma animao em motion graphics para apresentar o projeto;
11
1.4.
Definio dos papis dos integrantes da equipe
Aps definidos os objetivos, definiu-se o papel que cada integrante da equipe

envolvido no projeto ir desempenhar.
Giovani Jnior:
- Pesquisa de referncias de animaes vetoriais;
- Criao do roteiro e storyboard da animao;
- Arquitetura da informao do aplicativo;
- Design do layout do aplicativo.
Timteo Thober:
- Pesquisa de referncias de layouts mobile;
- Pesquisa de referncias de aplicativos sobre mudanas de hbito;
- Pesquisa sobre a pornografia e o pblico do NoFap;
- Desenvolvimento da animao vetorial;
- Criao dos wireframes e wireflows do aplicativo.
12
1.5.
Metodologia
Segundo Munari (2008),

Tambm no campo do design no se deve projetar sem mtodo,
pensar de forma artstica procurando logo a soluo, sem antes
fazer uma pesquisa sobre o que j foi feito de semelhante ao que se
quer projetar, [...] sem ter definido bem a sua exata funo.
A metodologia a ser utilizada ser o Projeto E, desenvolvida por Meurer e Szabluk

no ano de 2008, geralmente adotada em projetos digitais (PROJETO E). Observase que o Projeto E no constitui um processo meramente sequencial, pois conta
com a recorrente interao das etapas - sendo admissvel e provvel que se retorne
a algumas etapas para reestruturar, reorganizar, reaproveitar e replanejar
alternativas em benefcio do resultado final (MEURER; SZABLUK, 2010).
Figura 1: Etapas do Projeto E.

Fonte: MEURER, SZABLUK, 2012.
As etapas sero aplicadas ao projeto R2R4 do seguinte modo:
R2R: Road 2 Recovery (l-se o 2 como to), do ingls, significa Estrada para Recuperao.
13
1.5.1.
CONTEXTUALIZAO
Identificar o problema em questo, os usurios do frum NoFap e as circunstncias

em que o aplicativo ser utilizado, bem como pesquisar o pblico alvo para a
adequao do projeto ao mesmo. Tambm definir o foco das pesquisas e anlises a
serem realizadas para a execuo do projeto: aplicativos, design de interao,
animao 2D, produo audiovisual, flat design, pornografia na internet e mudana
de hbitos.
1.5.2.
DESCONSTRUO
Pesquisar, analisar e avaliar aplicativos j implementados nas reas de mudana de

hbitos e tambm animaes de mesmo estilo visual - flat - ou propsito final incentivar usurios a conhecer e baixar o aplicativo. Com a anlise e avaliao,
pretende-se observar ferramentas, funcionalidades e outros quesitos que podem
servir de referncia para o desenvolvimento do app R2R e do vdeo de divulgao,
atribuindo escores a cada ponto analisado.
1.5.3.
VERIFICAO
Definir as restries e limitaes, requisitos (o que imprescindvel) e possibilidades

(o que desejvel, mas extra) a serem consideradas no desenvolvimento do
aplicativo Road 2 Recovery, baseando-se nas etapas anteriores e seus resultados.
1.5.4.
RECONSTRUO
Definir as ferramentas, funcionalidades e contedos do aplicativo. Estabelecer a

organizao, hierarqua e inter-relaes dos contedos, criando cenrios hipotticos
para ajudar na observao de como seria a soluo proposta. Estabelecer os
wireframes e wireflows do projeto. Escrever o roteiro e desenhar o storyboard da
animao.
14
1.5.5.
IDENTIDADE
Definir a esttica a ser utilizada no aplicativo e vdeo, de modo que diagramao,

assinatura visual, tipografia, iconografia, animaes e cores estejam em harmonia,
para que o app transmita empatia, credibilidade e confiabilidade.
1.5.6.
DIFERENCIAO
Avaliar a personalidade visual desenvolvida na etapa anterior, atravs de

mapeamento de expresses, para verificar se o objetivo pretendido o mesmo
percebido pelos usurios. Se no for, um indicador de que a etapa de identidade
precisa ser revisada.
1.5.7.
DESENVOLVIMENTO
Elaborar um modelo funcional navegvel que simule o funcionamento do aplicativo,

tendo como base os wireflows desenvolvidos juntamente com a identidade visual
aplicada aos wireframes. Criao da animao 2D.
1.5.8.
VALIDAO
Testar e avaliar continuamente o projeto com usurios para identificar e corrigir

possveis erros no app ou vdeo. Nota-se que essa no uma etapa que realizada
aps a etapa Desenvolvimento, mas vem ocorrendo desde a etapa de
Reconstruo. Por questes de tempo disponvel para o projeto, essa etapa ser
realizada apenas dentro do grupo que desenvolve o projeto (orientador e dois
alunos) e, se possvel, com usurios do NoFap.
15
2.
Fundamentao Terica
Nesse captulo, sero abordardadas as questes pertinentes aos fundamentos tericos e tcnicos que sero utilizados para a construo e produo deste projeto.
2.1.
Aplicativos
De acordo com o Cory Janssen, co-fundador do site Techopedia, um aplicativo

mvel, geralmente chamado de app, um tipo de software designado a rodar em
dispositivos mveis, como smartphones ou tablets (JANSSEN, 2015). Nota-se que,
na sociedade atual, os aplicativos tem feito parte, cada vez mais, do dia a dia da
populao em geral. Em uma pesquisa feita pela empresa Analysys Mason (2014)
percebeu-se que a mdia de tempo dirio que os usurios de smartphones gastam
em seus dispositivos mveis de 194,7 minutos - quase 24 horas ao longo de uma
semana - sendo que, desse tempo, apenas 25% utilizado para comunicao, todo
o restante utilizado em aplicativos. Outra pesquisa, da empresa Comscore, revela
que a maior parte do tempo gasto em meios digitais ocorre em aplicativos mobile
(COMSCORE, 2014).
Isso se deve tambm a um crescimento enorme na quantidade de aplicativos
existentes para smartphones. Em Julho de 2014, estavam registrados 1.300.000
aplicativos diferentes disponveis na Google Play Store5 e 1.200.000 na AppStore6
(STATISTA, 2014). Alm da demanda em constante crescimento, outro fator que
incentiva o aumento do nmero de apps disponveis que h uma grande
versatilidade por parte dos smartphones para executar diferentes aplicativos
(QUERINO FILHO, 2013).
Loja de aplicativos da Google: https://play.google.com/store
Loja de aplicativos da Apple: https://itunes.apple.com/us/genre/ios/id36?mt=8
16
Dentro desse mercado de smartphones, h uma verdadeira competio entre os

sistemas operacionais principais - Android (da Google) e iOS (da Apple). Apesar de
a quantidade de usurios de Android ser superior de usurios de iOS, os usurios
da Apple utilizam mais o smartphone durante o dia - 52,3% do trfego online
proveniente de usurios iOS, enquanto que 26,4% vem de usurios Android
(BOLLUYT, 2014). Por isso, o sistema escolhido para a realizao desse projeto o
iOS.
2.2.
Design de Interao
Atualmente, vrios sites e aplicativos possuem algum grau de interao. Isso quer
dizer que o usurio pode interagir com o contedo apresentado, ao invs de
simplesmente assist-lo (MAIER, 2009). Por existir essa nova possibilidade,
necessrio planejar e pensar como essa interao vai ocorrer para que tudo
acontea da melhor maneira possvel para o usurio. Dessa necessidade vem o
Design de Interao, o design de produtos interativos que fornecem suporte s
atividades cotidianas das pessoas, seja no lar ou no trabalho (PREECE et al.,
2005).
O Design de interao, como o design de experincia do usurio ou UX Design,
evoluiu para facilitar as interaes entre as pessoas e o ambiente. Porm, diferente
do design de UX [..], designers de interao se importam (geralmente) apenas com
a interao entre usurios e computadores (MAIER, 2009).
Preece (2005) define as atividades bsicas dentro do processo de design de
interao. So elas:
-
Identificar necessidades e estabelecer requisitos;
Desenvolver designs alternativos que preencham esses requisitos;
Construir verses interativas dos designs, de maneira que possam ser

comunicados e analisados;
Avaliar o que est sendo construdo durante o processo.
17
Em todas essas etapas, Preece diz que a interao inevitvel. Ou seja, haver a
repetio dessas tarefas em algum momento do processo, decorrente dos
resultados de outra atividade mais frente.
Alguns conceitos-chave direcionam a prtica do design de interao. Maier (2009)
chama eles de design direcionado ao objetivo, interface mgica, affordance,
learnability e usabilidade.
Design direcionado ao objetivo
O usurio possui um objetivo ao utilizar o app. A interface deve ser construda de
maneira a direcion-lo a realizar a tarefa da maneira mais eficaz o possvel.
Interface como mgica
Alan Cooper (2007) diz que idealmente, as interfaces no existiriam na mente do
usurio. Ele deveria simplesmente chegar soluo sem perceber que est
utilizando uma interface, como se fosse mgica. A interface no demora a
responder, no faz o usurio pensar, e no d razo para o usurio ficar irritado
(MAIER, 2009). aqui que entra a ideia de menos mais. centrada ao redor da
noo de que no queremos que nossos usurios pensem mais do que eles
precisem. Quanto menos decises, melhor. (MARTENS, 2010).
Affordance
Expresso criada pelo psiclogo J. J. Gibson na dcada de 1970, representando a
multitude de possibilidades disponveis a qualquer pessoa no ambiente designado
(MAIER, 2009). Norman (2006) fala sobre o termo affordance perceptvel, que
descreve as relaes que podem ser percebidas pelo usurio em um ambiente.
Basicamente, so convites aos usurios a utiliz-las. Norman (2006) ainda descreve
as affordances perceptveis como pistas que podem ser percebidas pelo usurio
para saber o que fazer. Por exemplo, a ala de uma chaleira ou, no meio digital, a
formatao de um link.
18
Learnability
Uma boa interface criada utilizando-se elementos e componentes conhecidos.
Como se houvesse um idioma com o qual o usurio est familiarizado. Se ele est
acostumado a clicar em um boto para enviar o formulrio preenchido, ele vai
procurar por um boto ao terminar o formulrio (MAIER, 2009). O designer no
precisa "reinventar a roda" toda vez que algum desafio semelhante aparece em um
projeto diferente. Geralmente, quando um produto digital (site, aplicativo, jogo, etc)
feito, o designer segue alguns padres, como os encontrados na Biblioteca de
Padres de Design do Yahoo7. Porm se o problema em questo pede uma
interface nica e nova, necessrio que o designer se baseie fortemente nas
convenes atuais de design, affordances e usabilidade para deixar a interface fcil
de aprender. desse princpio que surge a palavra learnable8.
Usabilidade
De acordo com Krug (2008), usabilidade significa ter certeza de que algo funciona
bem, e que uma pessoa de habilidade ou experincia mdia consegue utiliz-lo para
o propsito definido sem se frustrar.
https://developer.yahoo.com/ypatterns/
Juno das palavras em ingls Learn (aprender) e Able (capaz, apto, hbil). Literalmente,
aprendvel.
19
2.2.1.
DIRETRIZES DE INTERFACE HUMANA PARA iOS
Para a construo de interface para aplicativos iOS necessrio que sejam

seguidas algumas diretrizes estabelecidas pela Apple (2015). Os trs princpios
indispensveis para a construo de aplicativos para iOS so Importncia, Clareza
e Profundidade.
Importncia
A interface auxilia os usurios a entender e interagir com o contedo, mas nunca
compete com o contedo.
Clareza
Texto legvel em todos os tamanhos, cones so precisos e lcidos, adornos so
sutis e apropriados, e um foco ntido nas funcionalidades motiva o design.
Profundidade
Camadas visuais e movimentos realistas transmitem vitalidade e tornam o app mais
agradvel e compreensvel.
Sero considerados para o aplicativo R2R os documentos iOS Human Interface
Guidelines9 - um documento fornecido pela Apple para desenvolvedores com todas
as orientaes a serem seguidas - e UI Design Dos and Donts10 - documento
fornecido pela Apple com aplicao de alguns padres e conceitos desejados em
aplicativos da AppStore.
Disponvel em:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
Acesso em: Junho, 2015.
10
Disponvel em: https://developer.apple.com/design/tips/ Acesso em: Junho, 2015
20
2.3.
Animao 2D
Da unio do desenho e da pintura com a fotografia e o cinema, surgiu o cinema de

animao, conhecido tambm como arte sequencial. Esse novo modo de criar
filmes e contar histrias, exigiu a formulao de regras artsticas prprias, as quais
vieram a ser conhecidas como princpios fundamentais da animao, originando
uma nova forma de expresso de linguagem visual (JNIOR, 2005).
Figura 2: Sequncia de desenhos esboando movimento

Fonte: http://www.casadasoficinas.com.br/ (2013)
Podemos enxergar os movimentos das animaes graas a um fenmeno da viso

humana, chamado persistncia retiniana. Graas a ela, quando vemos uma srie de
imagens se substituindo muito rapidamente, no notamos a passagem de uma
imgem para a outra e temos a iluso de que h movimento nesse processo. A
velocidade sequencial dessas imagens o ponto mais importante, pois a partir de
10 quadros por segundo que o crebro humano deixa de perceber as imagens
individualmente e as percebe como movimento. Entretanto, a escolha de quadros
por segundo depende do estilo artstico do animador e da mdia em que a animao
ser exibida (LAYBOURNE, 1998). Ou seja, para um curta de 5 minutos pode ser
necessrio pelo menos 4.500 quadros, exigindo dos animadores muita organizao
e principalmente pacincia.
21
2.3.1.
PRINCPIOS DA ANIMAO
Uma das contribuies mais contundentes da histria da animao para o

desenvolvimento de animaes 2D, proveniente das pesquisas dos estdios
Disney, que sistematizaram 12 princpios fundamentais (que citamos no comeo
desse captulo), ainda na dcada de 1930. Thomas e Johnston, no terceiro captulo
de "The Illusion of Life", oferecem uma nova terminologia para aquilo que os
animadores dos estdios Disney denominaram como os 12 princpios fundamentais
da animao, os quais trataremos a seguir:
Achatar e Esticar:
Considerada a descoberta mais importante para os processos de animao, esse

princpio aplicado a partir da percepo de que, ao se mover, o formato do
corpo/rosto de um ser vivo composto de massa corporal sofre deformaes
(Conforme demonstrado na Figura 04). O corpo dotado de um certo grau de
elasticidade, bem como de compresso, que variam de acordo com a
expresso/ao executada pelo personagem. O maior xito dessa descoberta, no
entanto, diz respeito ao destaque que dado ao movimento: da troca de um
desenho ao outro se torna a verdadeira essncia da animao (THOMAS;
JOHNSTON, 1981, pp. 47-51).
22
Antecipao
Consiste em antecipar a ao que o personagem est prestes a desempenhar,

preparando o espectador para apreciar a maneira como o personagem faz algo, em
detrimento do que ele faz. Assim como na vida real, nenhum movimento surge
instantaneamente; ele comea em um ponto do corpo (geralmente nos quadris e
abdmen), estabelece o equilbrio, e, em seguida, desenvolve-se de fato (THOMAS;
JOHNSTON, 1981, pp. 51-52).
Figura 3: Esboo do princpio de antecipao

Fonte: http://eissomesmoproducao.com.br/
Encenao:
a apresentao de qualquer idia de maneira que ela esteja completa e
inequivocadamente clara. Uma ao encenada para que seja compreendida; uma
personalidade para que seja reconhecida; uma expresso, vista; para que um clima
afete o pblico (THOMAS; JOHNSTON, 1981, p. 53)
23
Animao Seguida e Pose a Pose:
Constituem as duas maneiras principais de animao. Na animao seguida, o

animador desenha/posiciona a figura em um quadro aps o outro, podendo
incorporar novas idias que surgem no processo at alcanar o final da cena. No
modo de animao pose a pose, primeiro so criados os desenhos que contm as
poses-chave (key poses) dos personagens ao longo de uma determinada
seqncia; em seguida, so criados os desenhos intermedirios (inbetweens), que
fazem a transio fluida de um extremo ao outro do movimento, conforme a figura 7.
Geralmente, os dois mtodos so usados pelos animadores, dependendo do
resultado que se almeja alcanar e do tempo de que se dispe. Isso porque, atravs
da animao seguida, o artista pode deixar-se levar pela sua criatividade; todavia, o
controle sobre o trabalho substancialmente reduzido e o tempo para a realizao
aumentado. O inverso ocorre no caso da tcnica de animao pose a pose
(THOMAS; JOHNSTON, 1981, p. 56-58).
Figura 4: Esboo do princpio de animao seguida e pose a pose

Continuidade e Sobreposio da Ao:

Partem da premissa de que as coisas no param de uma vez... primeiro, vem uma
parte e depois a outra (THOMAS; JOHNSTON, 1981, p. 59) o caso de anexos
(orelhas, rabos etc.), que continuam em movimento depois que o resto da figura j
parou, ou do movimento mais lento assumido por partes do corpo onde h mais
carne do que ossos. A continuidade o oposto da antecipao (ambas podem ser
entendidas pelo princpio fsico da inrcia): para realizar uma determinada ao, o
24
corpo executa pequenos movimentos que lhe do sustentao, impulso, fora;

porm, uma vez em movimento, o corpo tende a continuar em sua trajetria (pela
inrcia); assim, ao frear, as partes do corpo que receberam menos fora continuaro
em movimento at que o corpo pare completamente. A sobreposio da ao
informa ao espectador o que aconteceu, como tudo terminou. o caso de quando
um personagem olha para a cmera depois de escorregar numa casca de banana; a
reao dele ao incidente (sua expresso) fala mais sobre o personagem do que a
ao em si. Aps atingir o ponto de repouso, isto , uma nova pose-chave, a
imagem deve permanecer fixa na tela por alguns frames (entre 8 e 16), para que o
espectador tenha tempo de absorver o que acaba de ver (THOMAS; JOHNSTON,
1981, p. 59-62).
Acelerao e desacelerao:
Consiste na velocidade de execuo de um movimento. Na animao, esse efeito

alcanado pelo nmero de desenhos/registros intermedirios mais prximos ou
afastados dos extremos: quanto maior a quantidade, mais rpida a iluso de
movimento, conforme demonstra figura 9 (THOMAS; JOHNSTON, 1981, p. 62).
Figura 5: Esboo do princpio de acelerao e desacelerao

25
Arcos:
Esse princpio parte da observao de que, ao se mover, a maioria dos seres vivos
desempenha uma trajetria circular, um arco. Portanto, ao animar, o artista deve se
lembrar de vigiar os arcos, para que o movimento seja executado com fluidez e
preciso, sem aparentar quebras de uma pose outra (THOMAS; JOHNSTON,
1981, p. 62-63).
Ao Secundria:
So aes que se somam execuo das aes que conduzem a narrativa, com o
intuito de agregar charme ao personagem, disponibilizando detalhes que informam
sobre a sua personalidade. Essas aes sutis suportam a ao principal, uma vez
que a deixam mais interessante, contribuindo para o apelo do que est sendo
mostrado. o caso de um personagem que apresenta um determinado tique em
algum tipo situao; ou uma pessoa envergonhada que coloca seus culos
enquanto recupera a compostura (THOMAS; JOHNSTON, 1981, p. 63-64).

Temporizao:
Como foi dito a respeito da animao seguida e da pose a pose, o nmero de

desenhos/registros usados para compor um movimento determina a quantidade de
tempo que a ao ir durar na tela. A temporizao um dos aspectos mais
determinantes do filme, tanto com relao narrativa quanto com relao
26
caracterizao dos personagens. Isso porque a maneira como o tempo tratado - a

durao e o ritmo das aes, das seqncias e do filme como um todo - informa ao
espectador a respeito do clima do filme e da personalidade dos personagens:
letrgico, agitado, tenso, relaxado, agressivo, passivo, etc. Nesse sentido, a
animao pode ser feita em Uns (Ones) ou Dois (Twos); isto , uma nica imagem
pode ser fotografada uma ou duas vezes (ser responsvel por um ou dois frames do
filme) (THOMAS; JOHNSTON, 1981, p. 64-65).
Exagero:
Quando Walt solicitava realismo, ele queria uma caricatura do real (THOMAS;
JOHNSTON, 1981, p. 65-66) O exagero depende do estilo de animao que est
sendo produzida, j que ele pode ser utilizado de formas diferentes. Onde se
pretende uma animao com movimentos mais notveis, claros e perto da
realidade, no necessrio o uso desse princpio, porque fugiria ao escopo do
projeto.
Desenho Volumtrico:
A animao realista tem, particularmente, uma relao especial com o desenho. Se

almeja criar uma caricatura do real, o animador deve ser capaz de posicionar a
figura em todas as posies possveis, a partir de diversos ngulos de viso, sem
como isso perder a proporcionalidade, a perspectiva e sem deform-la alm do
prprio limite do corpo. Com base nos ensinamentos do desenho renascentista, o
artista deve criar uma figura volumtrica, slida e tridimensional, forjando na
imagem as impresses de peso, profundidade e equilbrio (THOMAS; JOHNSTON,
1981, p. 66-68).
27
Apelo
Caracterstica bastante subjetiva, o apelo, de acordo com o estilo Disney, aquilo
que uma pessoa gosta de olhar, uma qualidade de charme, design agradvel,
simplicidade, comunicao e magnetismo (THOMAS; JOHNSTON, 1981, p. 68) .
Figura 7: Esboo do princpio de apelo

2.3.2.
MOTION GRAPHICS
Steve Curran (2000) define Motion Graphics como termo usado para descrever um
vasto campo de solues que designers se utilizam para estabelecer uma
comunicao dinmica e acertiva para diversas mdias. Trata-se de um campo que
combina aptides de design, direo audiovisual, roteirizao, animao, arquitetura
da informao e produo de trilha sonora.
De acordo com Velho (2008, p.16), o termo motion graphics pode ser entendido
como uma rea de criao, onde se permitido combinar e manipular livremente no
espao-tempo camadas de imagens de todo o tipo, temporalizadas ou no (vdeo,
fotografias, grafismos e animaes), juntamente com msica, rudos e efeitos
sonoros, que podem ser traduzidos por design do movimento, sendo o que passa
uma ideia mais ampla sobre o assunto, englobando todo e qualquer tipo de design
para mdias que possuam com imagens em movimento. Segundo Woolman (2004)
a incluso da palavra graphic necessria e importante, pois ela compreende o
contedo
formal
enfatizado
atravs de smbolos,
cones,
imagens bi
tridimensionais, frequentemente misturado com filmagens.

28
A terminologia Motion Graphics, de acordo com Velho (2008), relativamente

recente e surge para designar a retomada da colagem dinmica de imagens
bidimensionais iniciada na dcada de 1980. Para o autor, Motion Graphics, do ponto
de vista tcnico, pode ser definido como uma aplicao sortida de tecnologias de
computao grfica e vdeo digital; do ponto de vista conceitual um ambiente
privilegiado de exerccio de projeto grfico atravs de imagens em movimento.
Afim de ilustrar a relevncia e a presena do Motion Graphics na atualidade, a
seguir so delimitados os seus campos de atuao (VELHO, 2008, p.30):
Cinema:
Crditos de abertura e encerramento Material associado a filmes e programas de
televiso, que tm como funo principal, na maior parte das vezes, apresentar a
equipe de produo e contextualizar o produto audiovisual ao qual se destina;
Interferncias de apoio Material eventualmente necessrio para dar suporte a
certos tipos de filmes narrativos e programas de TV;
Interttulos Elementos visuais que informam divises internas em narrativas e
sees de programas de TV.
Televiso:
Vinhetas de identidade visual Material produzido para emissoras de televiso
para exibio, em geral, nos intervalos da programao, como reforo de identidade
visual;
Suporte de infografia para programas jornalsticos e esportivos Elementos
informativos de suporte para matrias jornalsticas e coberturas esportivas;
Spots comerciais Publicidade especialmente produzida para o intervalo da
programao de emissoras de TV , destinados a vender produtos de terceiros;
Chamadas de programao Material de divulgao dos programas de emissoras
de TV veiculado nos intervalos da programao;
Interprogramas Peas de curta durao, em geral entre 30 e 1 minuto, de cunho
cultural ou informativo, que ajudam a preencher o intervalo da programao das
emissoras de TV.
29
Vdeos:
Videoclipes Material associado divulgao de artistas musicais e seus
trabalhos;
Videoarte e vdeo experimental Experincias artsticas com objetivo de
experimentao da linguagem audiovisual, desvinculadas de canais de distribuio
comercial convencionais. Em alguns casos, so voltados para exibio em
exposies e instalaes; em outros busca espao em canais como festivais,
mostras de vdeo, e mais recentemente, busca a difuso pela Internet.
Poesia visual Experincias utilizando texto potico em movimento, com nfase
na visualidade das tipografia escrita como fonte de novas camadas semnticas com
ou sem a adio de outros elementos grficos;
Vdeos narrativos de curta durao Material produzido, em geral, para sites de
Internet voltados para distribuio, exibio e compartilhamento de vdeo digital,
sem maiores compromissos com os formatos convencionais de contedo para
cinema e TV;
Suporte de infografia para vdeos institucionais e educativos Material de
informao iconogrfica e textual que servem de apoio a programas de carter
didtico ou institucional.
2.4.
Flat Design
Flat design uma filosofia do design que defende a simplicidade e clareza em

materiais e interfaces. (CAMPBELL-DOLLAGHAN, 2013). H pouco mais de trs
anos, esse estilo comeou a ganhar fora. A Google sempre procurou trabalhar com
o flat design e com o minimalismo. Por ser uma referncia mundial, ela acabou
influenciando boa parte do mercado a seguir esta tendncia. Seus produtos de
maior relevncia neste ponto foram o Android e o Google Chrome, que sendo,
respectivamente, um sistema operacional de plataforma aberta e um navegador de
internet, foram utilizados por diversas outras empresas (HORVATH, 2013).
30
Figura 8: Arte com Quadros de Heris das HQs em Flat Design

Fonte: http://www.lucasdomingos.com.br/blog/flat-design-o-que-e/
Algumas caratersticas dessa tendncia so:

O Minimalismo: O menos mais. So utilizados poucos elementos - a ateno fica
voltada ao contedo.
A Objetividade: O contedo transmitido de forma direta e quase auto-explicativa
com o auxlio de elementos simples e tipografia valorizada.
O destaque para formas, cores e tipografia: Esse um fundamento para que a
arte criada se torne mais atrativa. As formas so cruas e sem detalhes; as cores so
geralmente vibrantes e contrastantes; a tipografia complementa a informao, sendo
sempre priorizada na composio das peas, sejam elas grficas ou audiovisuais.
A Versatilidade: facilmente adaptvel a qualquer tipo de tela ou formato de
produto, seja de uma tela de smartphone ou televiso at flyers e outdoors.
31
2.5.
Produo de Vdeo
As etapas para produo de um vdeo so bem demarcadas e cada uma delas

possui uma importncia vital para que haja um produto final de qualidade. O tempo
investido em cada etapa varia de acordo com as peculiaridades de cada projeto.
Segundo Kindem & Musburger (1997), o processo de produo de um vdeo tem
basicamente trs etapas:
Pr-produo: Consiste na preparao, planejamento e projeto do vdeo a ser
produzido. Essa etapa abrange todas as demais atividades que sero realizadas,
desde a concepo da idia inicial at a filmagem:
Sinopse ou storyline: resumo geral do que vai ser exibido no vdeo;
Argumento: passo intermedirio entre a sinopse e o roteiro cujo objetivo
descrever, de forma breve, como se desenvolver a ao.
Roteiro: detalhamento de tudo o que vai acontecer no vdeo. O roteiro tem uma
linguagem prpria - que se destina a orientar a equipe de produo nas filmagens
e divide o vdeo em cenas com o objetivo de informar textualmente - o leitor a
respeito daquilo que o espectador ver/ouvir no vdeo.
Storyboard: a representao das cenas do roteiro em forma de desenhos
sequenciais, semelhante a uma histria em quadrinhos. Tem o objetivo de tornar
mais fcil, para a equipe de produo, a visualizao das cenas antes que sejam
gravadas.
Produo: Esta a etapa em que so feitas as filmagens das cenas que compem
o vdeo. As filmagens so realizadas em tomadas, isto , intervalos de tempo entre
o incio e o trmino de cada gravao. Uma cena, portanto, composta por um
conjunto de tomadas, e um vdeo composto por um conjunto de cenas. Depois de
terminadas as filmagens se d incio ps-produo do vdeo.
32
Ps-Produo: Essa ltima etapa revisa todas as atividades at ento realizadas

para a finalizao do vdeo quando ento se faz a edio e a organizao das
tomadas gravadas para composio das cenas e do vdeo como um todo.
Com a boa execuo destas 3 etapas e o cumprimento do roteiro dentro dos prazos
e custos estipulados, espera-se ter uma pea audiovisual de qualidade atendendo
todos os requisitos necessrios para atingir os espectadores.
2.5.1.
ROTEIRO
O roteiro o mtodo geralmente escolhido para iniciar e tambm gerenciar o

desenvolvimento e execuo de qualquer projeto audiovisual. O roteiro tem papel
crucial em um projeto audiovisual porque o planejamento est diretamente
relacionado ao roteiro, uma vez que nele estaro todas as informaes importantes
para a realizao do trabalho, como: a locao, a iluminao, os objetos de cena, os
ngulos e os movimentos das cmeras, os dilogos, as instrues para os atores,
etc. (ANG, 2007).
importante frisar a diferena entre script e roteiro, j que muitas vezes eles so
confundidos. O script formado somente por dilogos de personagens, enquanto o
roteiro composto pelo script e por todas as outras orientaes que dizem respeito
a equipe tcnica, como indicaes sobre a iluminao, as marcaes de tempo e as
aos descritas para determinada cena. Um roteiro deve dispor as informaes
principais de forma que o diretor, o elenco e os demais integrantes da equipe
possam identific-las rapidamente (ANG, 2007).
O roteiro tem um padro de escrita prprio e singular, com cabealho que informa o
nmero da cena, se ela interna ou externa, o local e por fim se dia ou noite. Em
seguida parte para uma breve sinopse da cena. Sendo uma animao vetorial, o
presente projeto se basear em cores de fundo, elementos, movimentos desses
elementos, cortes e transies. O texto do roteiro escrito na fonte Courier em
tamanho 12, pois estima-se que uma pgina com este formato corresponde
aproximadamente a um minuto de tela (RABIGER, 2003).
33
Como visto, o roteiro a pea chave para a execuo de uma boa animao. Tanto
para o gerenciamento do projeto e sua execuo, quanto para a estruturao de
uma boa histria e comunicao com os espectadores.
Para a produo final ser considerada satisfatria necessrio, alm de um bom
roteiro, uma boa administrao das etapas de produo para que haja a entrega do
projeto audiovisual dentro do prazo, custo e qualidade predefinidos.
2.6.
Pornografia na Internet
No se tem uma data exata da criao de imagens sexuais. Desde tempos

pr-histricos j existem esttuas e figuras nuas. Na Renascena (entre os sculos
XIV e XVII) os pintores retratavam mulheres nuas realizando atividades comuns
(como a Vnus de Urbino). Porm essas pinturas no so consideradas pornografia,
j que no eram feitas com o intuito de causar excitao sexual (MERRIAMWEBSTER, 2015). J algumas obras produzidas na Era Vitoriana podem ser
encaixadas nessa categoria (como a obra Olympia, de Man). Antes dessa poca,
j haviam escritores que se referiam a temas erticos em seus livros, como o ingls
John Cleland - escritor do livro Fanny Hill, considerado a primeira pornografia em
forma de prosa (HYDE, 1965). Porm, foi s em 1896, apenas um ano depois da
inveno do cinema, que foi feito o primeiro filme com propsito ertico - um curta
de striptease (ABEL, 2004). A partir do sculo XX iniciou-se a produo de vdeos
explcitos, geralmente exibidos em clubes de cavalheiros, porm sem muita
repercusso. Foi com a chegada da internet e das cmeras digitais - e a reduo de
custos que essas revolues trouxeram - que essa indstria decolou (PAPPAS,
2010).
Hoje, a pornografia est espalhada em todos os cantos da internet, mas seu
tamanho, a quantidade de contedo disponvel online desconhecido e imenso
(RIEPEN, 2013). Estima-se que, em 2009, a indstria pornogrfica tenha faturado
2.8 bilhes de dlares em vendas s nos Estados Unidos11. Juntamente com a
11
De acordo com a publicao da Time Business de Abril de 2012. Disponvel em:

http://business.time.com/2012/04/04/sex-on-the-internet-sizing-up-the-online-smut-economy/ Acesso
em: Abril, 2015
34
internet de banda larga, veio gradativamente a facilidade de acesso ao contedo.

Em 2002, uma pgina simples levava em mdia 16 segundos para carregar, e um
vdeo de cinco minutos poderia demorar cerca de uma hora para ser baixado. Em
2012 essa mesma pgina levava 6 segundos, e esse mesmo vdeo, apenas 1
minuto para ter seu download concludo12.
A facilidade, praticidade e velocidade de acesso internet permitiu s pessoas ver
em pornografia mesmo quando esto fora de casa, em seus smartphones, tablets e
notebooks, inclusive arriscando suas carreiras profissionais assistindo filmes
pornogrficos no trabalho13.
2.7.
NoFap
O Reddit14 um site que disponibiliza fruns de humor, motivao, ideias, etc.

baseado totalmente na interao dos usurios e depende deles para a criao dos
Subreddits - sub-comunidades sobre algum tpico especfico, agrupando vrias
postagens dentro deles (REDDIT, 2015).
Criado em 20 de Junho de 2011, o NoFap surgiu como um subreddit a partir de uma
postagem feita em uma outra sub-comunidade cujo tpico era motivao. A ideia
inicial veio como um desafio de o ms de Julho ser o ms oficial do NoFap15 - ou
seja, sem pornografia e/ou masturbao. O tpico e a discusso cresceram, e
decidiu-se criar o frum NoFap. No comeo, o site se parecia com um site de
competies. De fato, a maioria dos 60 fapstronautas estavam l ou pelo desafio
ou pela competio. Alguns usurios decidindo ficar uma semana, um dia ou at
mesmo um ms sem se masturbar. Uma semana depois da criao, surgiu a ideia
de prestar contas atravs de um monitoramento do progresso de cada usurio. Logo
12
Infogrfico - A internet uma dcada depois: http://www.bestedsites.com/the-internet-a-decade-later/

Na pesquisa realizada, 63% dos homens e 36% das mulheres admitiram ter acessado pornografia
ao menos uma vez no trabalho no perodo de 3 meses anteriores pesquisa.
http://www.provenmen.org/2014pornsurvey/pornuseatwork/
13
14
Reddit. Disponvel em: http://www.reddit.com/ Acesso em: Abril, 2015.
15
Fap ou Fapping - Gria da internet para masturbar-se.
35
depois, eventos de desafios de semanas ou meses sem pornografia e sem

masturbao surgiram (NOFAP, 2012).
Figura 9: Assinatura visual do frum e site NoFap

Fonte: nofap.com (2014)
Em novembro de 2011, foi construdo o primeiro sistema de insgnias do frum,

onde, de forma semelhante ao programa Alcolicos Annimos, a pessoa ganha uma
insgnia depois de determinado tempo de absteno (um dia, uma semana, um ms,
etc). Ao final do ms de maro daquele mesmo ano, o frum j possua 10.000
inscritos, e seu foco no era mais simplesmente o desafio ou o suposto aumento de
testosterona que uma semana abstmio causava - passou a ser sobre ter uma vida
melhor (NOFAP, 2012).
Hoje, o frum possui 155.752 usurios inscritos e, mesmo com um nmero grande
de pessoas que utilizam o computador frequentemente - a maioria nativos digitais
(nasceram na era da internet) - os aplicativos que possui esto longe de serem
bons16. Os principais so o NoFap
Counter17, o Abstain!18 e o NoFap
Emergency19. Os dois primeiros so aplicativos bsicos de contagem de dias, onde

o usurio entra e acrescenta mais um dia, podendo at ter notificaes e insgnias,
e o NoFap Emergency um aplicativo que mostra imagens com frases
motivacionais. Porm, no h nenhum aplicativo que traga todas as funes e
recursos do frum.
16
Conforme pesquisa feita apresentada no Anexo 1.
17
NoFap Counter: https://play.google.com/store/apps/details?id=com.ksubedi.nofapcounter
18
NoFap: https://play.google.com/store/apps/details?id=com.alphaenvy.nofap
19
NoFap Emergency: https://play.google.com/store/apps/details?id=org.nofap.emergency
36
Para fins desse projeto, ser utilizado como base o frum do reddit e no o site.
Fez-se ento uma pesquisa com 541 usurios do NoFap (Anexo 1). Dentre esses
usurios foram identificados 62 pases diferentes, sendo a lngua predominante do
NoFap o ingls. As idades variam entre 13 e 43 anos, sendo sua maioria entre 15 e
24 anos. Nessa pesquisa constatou-se que 66% dos entrevistados utilizam algum
aplicativo para ajud-los no combate ao impulso de assistir pornografia, ler
contedos erticos e/ou masturbar-se. Desses 66%, a nota mdia atribuda pelos
usurios aos apps que eles utilizam foi de 3.7 (conforme Anexo 1). Quando
perguntados se possuam interesse em um aplicativo que reunsse as ferrramentas
e recursos existentes no frum, 72% respondeu Gosto da ideia, e utilizaria o
aplicativo.
Para manter o app discreto, optou-se por no mencionar o NoFap no nome do app
nem no logotipo a ser desenvolvido. Alm disso, foi decidido criar a opo stealth20
nas configuraes do aplicativo. Quando habilitada, ela transforma o aplicativo em
um app de jogo da velha, que pode ser jogado normalmente. Para o usurio acessar
o aplicativo em si, ele dever apertar e manter o dedo no ttulo e inserir a senha
configurada quando requisitado.
20
Stealth: palavra em ingls para discrio, furtividade.
37
3.
Desenvolvimento do Projeto
3.1.
Coleta de dados e anlises
Para buscar referncias e contribuir para a etapa de Desconstruo, analizaram-se

trs aplicativos que possuem propsito semelhante ao do R2R - mudana de
hbitos, e trs vdeos com estilo flat design.
3.1.1.
ANLISE DOS APLICATIVOS
Anlise 1: NoFap Counter
Figura 10: Telas do aplicativo NoFap Counter

Fonte: Google Play
O NoFap Counter21 um aplicativo Android para usurios contarem os dias que

esto livres do ciclo PMO. Ele possui um sistema de patentes - nveis - que, de
acordo com o aumento do nmero de dias de absteno, vo sendo adicionados ao
usurio. Ele tambm possui uma aba de postagens para um frum online prprio,
onde outros usurios podem comentar para incentivar.
21
NoFap Counter. Disponvel em:

https://play.google.com/store/apps/details?id=forinnovation.onatimer.app&hl=en Acesso em: Abril,
2015.
38
Anlise 2: Abstain!
Figura 11: Telas do aplicativo Abstain!

Fonte: App Store
O Abstain!22 um app tambm com a funo de contador de dias sem pornografia

e/ou masturbao. Alm de marcar diariamente, o usurio pode habilitar a opo
"lembrete dirio" para ser notificado em determinado horrio, ao entrar no app.
Assim como o NoFap Counter, ele concede aos usurios insgnias de incentivo de
acordo com o tempo de absteno. Um diferencial dele o visual espacial, tendo
como tema os "Fapstronautas".
22
Abstain! Disponvel em: https://itunes.apple.com/us/app/abstain!/id773485399?mt=8&ignmpt=uo%3D2 Acesso em: Abril, 2015.
39
Anlise 3: Commit
Figura 12: Telas do aplicativo Commit

Fonte: App Store
Para a terceira anlise foi escolhido o aplicativo Commit23, que no

especificamente destinado a auxiliar usurios de pornografia, pois engloba todo e
qualquer hbito ou atividade diria. O app possui esttica simples e intuitiva,
possuindo um sistema de lembretes e cobranas dirias. Na parte inferior da
interface h uma barra, que mostra o progresso do usurio.
23
Commit. Disponvel em: https://itunes.apple.com/us/app/commit/id473527073?mt=8 Acesso em:

Abril, 2015.
40
3.1.2.
ANLISE DA IDENTIDADE VISUAL
Analisando os trs apps, percebe-se que no h um padro fixo para cores. Porm,
todos os logos denotam movimento, ao - um cronmetro de corrida, um foguete
espacial, e um check para tarefas cumpridas.
Figura 13: Anlise da identidade visual dos aplicativos analisados

Fonte: os autores
41
3.1.3.
ANLISE TIPOGRFICA
Os trs apps utilizam fontes sem serifa, mantendo a simplicidade e minimalismo

(conforme visualizado na figura 23).
Figura 14: Anlise tipogrfica dos aplicativos analisados

Fonte: os autores
3.1.4.
ANLISE DAS FERRAMENTAS E FUNCIONALIDADES
Percebe-se que algumas funes so comuns entre os aplicativos (figura 24):

contador de dias, algum meio de manter registro e alguma maneira de recompensa
ao usurio - sistema e insgnias, sistema de marcos, barra de progresso-.
Figura 15: Anlise de ferramentas e funcionalidades dos aplicativos analisados

Fonte: os autores.
42
3.1.5.
ANLISE DOS VDEOS
Foram analisadas trs animaes que apresentam caractersticas interessantes e

que so referncias para o projeto.
As animaes foram escolhidas levando em considerao o uso do design flat,
duraes mais diminutas - tendncia geralmente utilizada para promoo de
aplicativos - e serem produzidas utilizando-se motion graphics. As anlises das
animaes a seguir esto baseadas nos critrios: narrao, efeitos sonoros,
durao, transies, tipos de elementos, cores e trilha sonora.
Anlise 1 - CURRENT App Promo
Figura 16: Vdeo - CURRENT App Promo

Fonte: Vimeo (https://vimeo.com/85901781)
O vdeo possui 1 minuto e 6 segundos e apresenta um app fictcio para controlar a

energia eltrica domstica. A animao conta somente com elementos 2D e sua
conduo fica por conta da narradora. O vdeo utiliza poucos efeitos sonoros,
somente na hora de desligar algum aparelho eltrico e no momento de mostrar a
economia feita ao utilizar o app, e possui uma msica alegre, baseada em violo,
43
como fundo. A maioria das transies feita com crculos que surgem do meio da
tela, sendo apenas uma um slide vindo da direita. Quanto s cores, o vdeo se limita
paleta de cores do app, mantendo uma cor de fundo enquanto utiliza cores
complementares para os objetos, elementos e textos.
Anlise 2 - HSBC/RM App
Figura 17: Vdeo - HSBC/RM App

O vdeo HSBC/RM App uma animao promocional do aplicativo da HSBC para

seus clientes com durao de 54 segundos. Possui um narrador, e suas transies
so feitas a partir dos elementos da animao, que variam entre grficos, imagens
do app, e elementos simblicos de unio, proteo, sonhos, etc. No campo de
efeitos sonoros, possui vrios, porm sempre sutis e nunca sobrepondo a narrao
ou a msica, essa sendo um sintetizador em loop, com ocasionais percusses. As
cores utilizadas so, em sua maioria, parte de uma paleta de seis cores
complementares ao vermelho caracterstico da HSBC, e o fundo se mantm em
cores slidas e discretas.
44
Anlise 3 - Rent Motion Graphics - Presentation
Figura 18: Vdeo - Rent Motion Graphics - Presentation

O vdeo Rent Motion Graphics uma apresentao para um site que facilita o
aluguel de bens entre usurios. Bastante baseado na tipografia e nos elementos de
um site, ele utiliza somente trs cores - azul claro, laranja em gradiente e branco.
No possuindo efeitos sonoros, o vdeo contm narrao e uma msica estilo
lounge24. Os cortes so todos slides onde entra a cor diferente (entre o azul e o
laranja). Possui durao de 1 minuto e 4 segundos, e utiliza bastante fogos de
artifcios animados para dar destaque a cada seo da animao.
24
Lounge - Estilo de msica caracterstico de elevadores e salas de espera.
45
3.1.6.
ANLISE CROMTICA
Ao analisar as cores dos vdeos, percebe-se que h um padro de utilizao de tons

de amarelo e azul, por serem cores complementares. O que se pode identificar
que as duas animaes que so de apps usam as cores da interface do app como
base.
Figura 19: Anlise cromtica das animaes analisadas

Fonte: os autores.
46
3.1.7.
ANLISE TIPOGRFICA E ICONOGRFICA
Observa-se que a tipografia utilizada nos trs - apesar de pouco utilizada no Current
e HSBC - sem serifa. Nos vdeos Current e Rent, so utilizados mais objetos
fsicos e tangveis, j no HSBC so em sua maioria elementos intangveis, como
unio, confiana, educao. No vdeo Current, os elementos so multi-coloridos
(mantendo-se na paleta de cores), j no HSBC so grande parte monocromticos,
utilizando o branco com alguma outra cor da paleta, e no Rent, os elementos so
em branco sobre o fundo colorido, possuindo apenas um elemento em laranja, junto
ao mapa mundi (vide Figura 29).
Figura 20: Anlise tipogrfica e iconogrfica das animaes analisadas

Fonte: os autores.
47
3.1.8.
CONCLUSES DAS ANLISES
Conclui-se, com base nas anlises dos apps e da pesquisa realizada (figura 19),
que os conceitos ou ferramentas mais importantes para os usurios em um
aplicativo do NoFap so: contador de dias na forma de linha do tempo, dica do dia
ao abrir o aplicativo, sistema de insgnias, boto de emergncia NoFap25, discrio e
um desafio semanal26. Em razo do tamanho do projeto e do tempo dedicado para o
seu desenvolvimento, decidiu-se deixar de fora o sistema de prestao de contas e
postagem no frum.
Figura 21: Grfico de votao de funcionalidades/conceitos para o app

Fonte: pesquisa feita com usurios do frum (Anexo 1)
Em relao s cores, como no h correlao entre os apps estudados, optou-se

por utilizar o azul pois, segundo Collaro (2007), uma cor discreta, nos remete a
viagens e comprovadamente uma cor que acalma (COLLARO, 2007). Para
decidir qual tom de azul seria utilizado, foi usado como base a paleta de cores
25
Essa opo foi adicionada mais tarde na pesquisa, j que foi sugerida tanto na pgina do frum
quanto na opo Outros das funcionalidades. Por isso, apesar de no possuir um ranking alto na
figura 19, ser abordada no projeto.
26
Mesmo no aparecendo na pesquisa, essa funcionalidade foi sugerida por vrios usurios, tanto
no campo Outros da pesquisa, quanto na postagem no frum.
48
sugerida pela Apple no iOS Human Interface Guidelines que possui dois tons de
azul (figura 20), juntamente com dois tons levemente mais escuros dos presentes
na paleta.
Figura 22: Paleta de cores padro de aplicativos iOS

Fonte: iOS Human Interface Guidelines
Seguindo os padres dos apps analisados, e as sugestes da Apple, a tipografia a

ser utilizada no app ser a Helvetica Neue (figura 21), padro de aplicativos iOS.
Figura 23: Helvetica Neue

Fonte: os autores
Para a animao decidiu-se combinar elementos tangveis e conceituais. Quanto s

cores utilizadas na animao, sero as do aplicativos (os tons de azul escolhidos), e
algumas cores que auxiliem a identificar os elementos utilizados - por exemplo, um
telhado ou um mapa.
49
3.2.
Criatividade/Gerao de alternativas
Aps analisar as referncias e concluses das etapas anteriores, foram

desenvolvidos os wireframes e fluxo de tarefa do aplicativo, juntamente com o
roteiro e storyboard da animao.
3.2.1.
WIREFRAMES
De acordo com Unger e Chandler (2009), um wireframe um prottipo de baixa

fidelidade de uma pgina na Web ou da tela de uma aplicao. Um wireframe
usado para identificar os elementos que sero exibidos na pgina ou na tela.
Para o app R2R, foram elaboradas 10 wireframes dos recursos bsicos do
aplicativo.
Tela inicial do aplicativo

onde so encontradas o
boto de pnico, o
grfico de contagem do
usurio, o boto para
adicionar
acontecimentos, o boto
de ir para as insgnias e
o de ir para os desafios.
Ao clicar no smbolo +, o
usurio tem a opo de
adicionar uma queda
na sua jornada, uma
vontade muito grande
de assistir pornografia
ou um humor daquele
dia.
Ao selecionar adicionar
uma queda, o app
solicita que o usurio
informe qual o horrio
do ocorrido e em qual
plataforma o usurio
acessou pornografia.
50
O
usurio receber
medalhas
digitais
conforme prosseguir no
uso do app. Na tela de
insgnias ele poder
visualizar as medalhas
j conquistadas.
Ao selecionar um dos
desafios,
o
app
perguntar ao usurio
se ele completou o
desafio. Caso escolha
no, o app volta tela
dos desafios.
Na tela de insgnias no
conquistadas, o usurio
poder consultar quais
medalhas
ele
pode
receber, e o que deve
ser feito para tanto.
Caso responda que

terminou o desafio, ser
exibido uma tela de
confirmao e incentivo
ao usurio, o instruindo
a voltar no dia seguinte
para um novo desafio.
Na tela de desafios,
sero exibidos dois
desafios, um dirio e um
semanal. Os desafios
possuem a durao do
seu tempo respectivo.
Ao
iniciar
o
app,
aparecer uma dica do
dia, com sugestes,
pequenas informaes
sobre o progresso do
usurio, entre outras
dicas.
51
Na tela de configuraes o
usurio poder habilitar as
notificaes dirias, o tempo
adaptado das notificaes, o
modo discreto, ligar ou
desligar a dica do dia e
conectar sua conta do
NoFap.
Figura 24: Wireframes do aplicativo
Fonte: os autores
52
3.2.2.
FLUXO DE TAREFAS
Um fluxo de tarefa, tambm conhecido como wireflow, um recurso utilizado para

identificar caminhos ou processos que os usurios podero fazer ao utilizar um
aplicativo (UNGER; CHANDLER, 2009). O fluxo do app Road 2 Recovery o
apresentado na figura 25.
Figura 25: Fluxo de funcionalidades do Aplicativo

Fonte: os autores
3.2.3.
ROTEIRO
O roteiro foi desenvolvido em colunas - a primeira contendo o nmero da cena, a

segunda o texto a ser exibido na tela, a terceira os elementos visuais e cortes
utilizados em cada cena. O roteiro pode ser lido no anexo 2.
53
3.2.4.
STORYBOARD
De acordo com Canfi (2012), um storyboard a histria do filme desenhada, como

se fosse histria em quadrinhos. Foram desenvolvidas 16 telas para o storyboard
da animao deste projeto (conforme figura 26).
54
Figura 26: Storyboard da animao

Fonte: os autores
As telas do storyboard so equivalentes com as seguintes cenas do roteiro

(conforme figura 27).
Tela do Storyboard
Cena do Roteiro
01
02
03
04
04
05
06
06
07
10
08
11
09
12
10
55
13
11
14
12
15
13
16
13
Figura 27: Tabela de equivalncia de telas e cenas

Fonte: os autores
56
3.3.
Resultados
Com base nos estudos do captulo anterior, foram desenvolvidos a identidade visual
do projeto, as telas do aplicativo e a animao. Tanto o modelo navegvel do app
quanto a animao podero ser visualizadas no CD em anexo. Como visto na
pesquisa, e mencionado anteriormente no captulo sobre o NoFap, os usurios so
de toda parte do mundo. Unindo-se a isso o fato de que o frum totalmente em
ingls, optou-se por produzir a interface e a animao em ingls.
3.3.1.
IDENTIDADE VISUAL
Logotipo
A tipografia escolhida para o logotipo do aplicativo foi a Big John. Alterou-se o T de
TO para ser uma flecha apontando para Recovery (figura 28).
Figura 28: Logotipo Road 2 Recovery

Fonte: os autores
57
Paleta de Cores
As cores utilizadas foram 4 tons de azuis (figura 29).
Figura 29: Paleta de Cores do app

Fonte: os autores
cone
Para criar o cone do app, foi utilizado um R da fonte Big John - com algumas
alteraes - com um 2 no lugar da contraforma original, e uma linha abaixo do R
(figura 30).
Figura 30: Smbolo do app

Fonte: os autores
58
Para fazer a aplicao na forma de cone de aplicativo iOS, usou-se o smbolo na

cor branca, sobre um fundo em degrad azul, utilizando uma long shadow, e dentro
das propores definidas pela Apple (figura 31).
Figura 31: cone do app

Fonte: os autores
3.3.2.
APLICATIVO
Tendo como base os wireframes desenvolvidos, foram criadas 15 telas do aplicativo

(figura 32), juntamente com um modelo navegvel disponvel no CD em anexo.
59
Figura 32: Telas do aplicativo

Fonte: os autores
60
3.3.3.
ANIMAO
A animao produzida tem durao de 1 minuto e 5 segundos. A trilha sonora

animada porm sem ser infantil, e contribui muito no sincronismo com as transies
no vdeo. Abaixo esto algumas telas da animao (figura 33).
Figura 33: Telas da animao

Fonte: os autores
61
4.
Consideraes Finais
Ao iniciar o projeto, esperava-se desenvolver uma interface de aplicativo que

pudesse auxiliar os usurios do frum NoFap a se manterem abstmios da
pornografia e masturbao. Ao chegar ao final do projeto a equipe, alm de
satisfeita com os resultados obtidos, percebe o poder que um aplicativo pode ter em
ajudar pessoas a mudar de vida.
Ao desenvolver esse projeto, a equipe aprendeu muito sobre o impacto e poder de
movimentos como o NoFap. Ao ler depoimentos, confisses e desabafos no frum,
descobriu-se o quo grande e profundo o problema da pornografia . Alguns fatores
estavam presentes em quase todos os casos: a vergonha, o medo e a insegurana.
Histrias de tentativa de suicdio, de desespero e de desesperana. E observar o
apoio que esses usurios recebiam de outros usurios motivou de forma
excepcional a continuao do projeto por parte da equipe.
Para a concretizao desse projeto, foi necessrio estudar aplicativos, usabilidade,
motion graphics, etc. Tambm pesquisar referncias de aplicativos e animaes.
Mas uma das etapas mais importantes do processo foi conhecer o pblico alvo, pois
foi possvel entender as necessidades, dificuldades e a realidade desses usurios,
redirecionando o projeto em algumas reas.
Durante a elaborao do presente trabalho, houve dificuldades e obstculos. O
curto perodo de tempo disponvel para execut-lo, a falta de clareza em relao ao
pblico alvo, as viagens do orientador para fora do pas, entre outros, foram
algumas delas. Porm, ainda assim, os objetivos propostos foram alcanados.
Ao perceber como esse projeto pode afetar as vidas de vrias pessoas, alm de dar
continuidade construo do aplicativo aps a concluso da graduao, pretendese elaborar tambm uma verso para celulares Android. Poder ser estudada a
possibilidade de o projeto, seus princpios e funcionalidades serem aplicados
tambm a outros vcios e compulses, tais como o alcoolismo e o tabagismo, como
foi sugerido mais de uma vez na pesquisa e por outras pessoas envolvidas no
projeto ao longo do semestre.
62
5.
Referncias
ABEL, Richard. Encyclopedia of Early Cinema. Londres: Taylor & Francis,
2004.
ANALYSYS MASON. Consumers use smartphones for 195 minutes per

day, but spend only 25% of that time on communications. Maio, 2014.
Disponvel em: <http://www.analysysmason.com/About-Us/News/Insight/consumerssmartphone-usage-May2014-RDMV0/> Acesso em 02 de Maio de 2015.
ANG, Tom. Vdeo digital: uma introduo. So Paulo: Ed. Senac So

Paulo, 2007.
APPLE.
iOS
Human
Interface
Guidelines.
Disponvel
em:
<https://developer.apple.com/library/ios/documentation/userexperience/conceptual/m
obilehig/> Acesso em 04 de Maio de 2015.
BOLLUYT, Jess. Apple vs. Google: More Android Users, But More iOS
Use. Agosto, 2014. Disponvel em: <http://www.cheatsheet.com/technology/applevs-google-more-android-users-but-more-ios-use.html/?a=viewall> Acesso em 03 de
Maio de 2015.
BOSTWICK, Michael; BUCCI, Jeffrey. Internet sex addiction treated with

naltrexone.
Fevereiro,
2008.
Disponvel
em:
<http://www.ncbi.nlm.nih.gov/pubmed/18241634> Acesso em 20 de Maro de 2015.

CAMPBELL-DOLLAGHAN, Kelsey. O que flat Design? Maio, 2013.
Disponvel em: <http://gizmodo.uol.com.br/o-que-e-flat-design/> Acesso em 23 de
Abril de 2015.
CANFI, Netta. What is a storyboard? Maro, 2012. Disponvel em:
<http://www.the-flying-animator.com/what-is-a-storyboard.html> Acesso em 21 de
Maio de 2015.
63
COLLARO, Antnio Celso. Produo Grfica: Arte e tcnica da mdia

impressa. So Paulo: Pearson Prentice Hall, 2007.
COMSCORE. The U.S. Mobile App Report. Agosto, 2014. Disponvel em:
<http://www.comscore.com/layout/set/popup/content/download/26291/1346569/versi
on/1/file/The+US+Mobile+App+Report.pdf> Acesso em 02 de Maio de 2015.
COOPER, Alan. About Face 3: The Essentials of Interaction Design.

Indianpolis: Wiley Publishing Inc, 2007.
CURRAN, Steve. Motion Graphics: Graphic Design for Broadcast

and Film. California: Rockport Publishers, 2001.
DUHIGG, Charles. O poder do hbito: por que fazemos o que fazemos na
vida e nos negcios. Rio de Janeiro: Objetiva, 2012.
FTND.
Porn
is
like
drug.
Agosto,
2014.
Disponvel
em:
<http://fightthenewdrug.org/porn-is-like-a-drug/> Acesso em 05 de Maro de 2015.

GIKOVATE, Flvio. Hbitos, Compulses e Vcios. Agosto, 2014.
Disponvel em: <http://flaviogikovate.com.br/habitos-compulsoes-e-vicios/> Acesso
em 04 de Maio de 2015.
HEATH, Dan; HEATH, Chip. Switch: How to change when change is hard.
Nova York: Broadway Books, 2010.
HILTON, Donald L.; WATTS, Clark. Pornography Addiction: A
Neuroscience Perspective. Fevereiro, 2011. Disponvel em:
<http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3050060/> Acesso em 30 de Maro
de 2015.
HILTON, Donald. Pornography addiction a supranormal stimulus
considered in the context of neuroplasticity. Julho, 2013. Disponvel em:
64
<http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3960020/> Acesso em 30 de Maro

de 2015.
HORVATH, Eduardo. Flat Design x Skeumorfismo: tendncia ou
necessidade? Junho, 2013. Disponvel em: <http://www.uxdesign.blog.br/designde-interfaces/flat-design-skeumorfismo/> Acesso em 25 de Abril de 2015.
HYDE, H. Montgomery. A History of Pornography. Nova York: Farrar,
Straus and Giroux, 1965.
INDEPENDENT. All men watch porn, and it is not bad for them.
Dezembro, 2009. Disponvel em: <http://www.independent.co.uk/life-style/healthand-families/health-news/all-men-watch-porn-and-it-is-not-bad-for-them1833949.html> Acesso em 04 de Junho de 2015.
ITU. The 2005-2014 ICT data for the world, by geographic regions and by
level of development. Janeiro, 2015. Disponvel em: <http://www.itu.int/en/ITUD/Statistics/Documents/statistics/2014/ITU_Key_2005-2014_ICT_data.xls> Acesso
em 27 de Maro de 2015.
ITU. Mobile-cellular subscriptions. Maro, 2014. Disponvel em:
<http://www.itu.int/en/ITUD/Statistics/Documents/statistics/2014/Mobile_cellular_2000-2013.xls> Acesso em
27 de Maro de 2015.
JNIOR, Alberto Lucena. Arte da Animao: Tcnica e Esttica atravs da
histria. 2 ed. So Paulo: Editora Senac, 2005.
KINDEM, G.; MUSBURGER, R. B. Introduction to Media Production: from
analog to digital. Boston: Focal Press, 1997.
KRUG, Steve. No me faa pensar! Uma abordagem de bom senso
usabilidade na web. Rio de Janeiro: Alta Books, 2008.
65
LAYBOURNE, Kit. The Animation Book. Nova York: Three Rivers Press,
1998.
LESHNER, Alan. Addiction Is a Brain Disease, and It Matters. Agosto,
2011. Disponvel em: <https://www.ecnp.eu/~/media/Files/ecnp/communication/talkof-themonth/Wim%20van%20den%20Brink/Addiction%20is%20a%20brain%20disease%2
0and%20it%20matters.pdf> Acesso em 30 de Maro de 2015.
JANSSEN, Cory. Mobile Application (Mobile App). Disponvel em:
<http://www.techopedia.com/definition/2953/mobile-application-mobile-app> Acesso
em 04 de Junho de 2015.
MAIER, Andrew. Complete Beginners Guide to Interaction Design.

Dezembro, 2009. Disponvel em: <http://www.uxbooth.com/articles/completebeginners-guide-to-interaction-design/> Acesso em 03 de Maio de 2015.
MARTENS, Trent. Less is More: Simplifying your User Experience.

Outubro, 2010. Disponvel em: <http://www.uxbooth.com/articles/less-is-moresimplifying-your-user-experience/> Acesso em 03 de Maio de 2015.
MERRIAM-WEBSTER. Pornography - Definition and more. Disponvel em:

<http://www.merriam-webster.com/dictionary/pornography> Acesso em 29 de Maro
de 2015.
MEURER, Heli; SZABLUK, Daniela. Projeto E: aspectos metodolgicos

para o desenvolvimento de projetos dgito-virtuais. Ao Ergonmica
ERGODESIGN II. V.5, N. 2, 2010.
MILANI, Andr. Programando para iPhone e Ipad - Aprenda a construir

app para o iOS. So Paulo: Novatec Editora, 2012.
66
MUNARI, Bruno. Das coisas nascem coisas. 2 ed. So Paulo: Martins

Fontes, 2008.
NESTLER, Eric. Is there a common molecular pathway for addiction?
Outubro,
2005.
Disponvel
em:
<http://www.nature.com/neuro/journal/v8/n11/full/nn1578.html> Acesso em 30 de
Maro de 2015.
NOFAP [site institucional]. Get a new grip in life. Disponvel em:
<http://nofap.com> Acesso em 13 de Maro de 2015.
NOFAP. NoFap Survey Data - Complete Datasets. Junho, 2012. Disponvel
em:
<http://www.reddit.com/r/NoFap/comments/updy4/rnofap_survey_data_complete_da
tasets> Acesso em 05 de Maro de 2015.
NOFAP. Ever wondered about r/nofap's history? Dezembro, 2012.
Disponvel
em:
<http://www.reddit.com/r/NoFap/comments/nzbvk/state_of_the_subreddit/>
Acesso
em 25 de Abril de 2015.
NOFAP.
State
of
the
Subreddit.
Janeiro,
2012.
Disponvel
<http://www.reddit.com/r/NoFap/comments/nzbvk/state_of_the_subreddit/>
em:
Acesso
em 25 de Abril de 2015.
NORMAN, Donald A. O Design do Dia-a-Dia. Rio de Janeiro: Rocco, 2006.
PAPPAS, Stephanie. Live Science: The History of Pornography No More
Prudish Than the Present. Disponvel em: <http://www.livescience.com/8748history-pornography-prudish-present.html> Acesso em 28 de Abril de 2015.
PERSEUS. Greek Word Study Tool - . Disponvel em:
<www.perseus.tufts.edu/hopper/morph?l=pornogra%2Ffos&la=greek> Acesso em
29 de Maro de 2015.
67
PITCHERS, Kyle et al. Natural and Drug Rewards Act on Common Neural
Plasticity Mechanisms with FosB as a Key Mediator. Julho, 2013. Disponvel
em: <http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3865508/> Acesso em 30 de
Maro de 2015.
PORNHUB. PornHub Insights: Pornhub & Brazil. Janeiro, 2015. Disponvel
em: <http://www.pornhub.com/insights/pornhub-brazil/> Acesso em 30 de Maro de
2015.
PREECE, Jennifer et al. Design de Interao: Alm da interao homemcomputador. Porto Alegre: Bookman, 2005.
PROJECT KNOW. The nofap experiment: a voyage through porn
addiction,
support
and
recovery.
Disponvel
em:
<http://projectknow.com/discover/taking-a-whack-at-porn-addiction/> Acesso em 14
de Maro de 2015.
PROJETO E. Metodologia projetual como modelo de aprendizagem
baseada em projeto. Disponvel em: <http://projetoe.com> Acesso em 04 de Maio
de 2015.
QUERINO FILHO, Luiz Carlos. Criando aplicativos para iPhone e iPad :
uma
abordagem prtica do nvel bsico ao avanado. So Paulo: Novatec
Editora, 2013.
RABIGER, Michael. Direo de Cinema: Tcnicas e Esttica. 3 ed. Rio de
Janeiro: Elsevier, 2003.
REBOOT NATION [site institucional]. Disponvel em: <http://rebootnation.org>
Acesso em 13 de Maro de 2015.
68
REDDIT. Frequently Asked Questions. Fevereiro, 2015. Disponvel em:

<http://www.reddit.com/wiki/faq> Acesso em 04 de Maio de 2015.
RIEPEN, Roald. The Internets Dirty Secret: Nobody knows how much
porn there is. Maio, 2013. Disponvel em:
<http://www.buzzfeed.com/charliewarzel/the-internets-weirdest-secret-nobodyknows-how-much-porn-the> Acesso em 30 de Maro de 2015.
STATISTA. Number of free mobile app downloads worldwide from 2012
to 2017. Disponvel em: <http://www.statista.com/statistics/241587/number-of-freemobile-app-downloads-worldwide/> Acesso em 27 de Maro de 2015.
STATISTA. Number of apps available in leading app stores as of July
2014. Julho, 2014. Disponvel em:
<http://www.statista.com/statistics/276623/number-of-apps-available-in-leading-appstores/> Acesso em 01 de Maio de 2015.
THOMAS, Frank; JOHNSTON, Ollie. The Illusion of Life: Disney

Animation. New York: Disney Editions, 1981.
UNGER, Russ; CHANDLER, Carolyn. O guia para projetar UX. Rio de
Janeiro: Editora Alta Books, 2009.
VELHO, Joo. Motion Graphics: linguagem e tecnologia

anotaes para uma metodologia de anlise. Dissertao de Mestrado
Programa de Ps - graduao da Esdi. Rio de Janeiro, 2008.
WOOLMAN, Matt. Motion Design: Moving Graphics for television,
music video, cinema and digital interfaces. 2004.
69
6.
Anexos
6.1.
Anexo 1 - Pesquisa com usurios do NoFap
A pesquisa foi feita num perodo de uma semana com 541 usurios do frum
NoFap, atravs da plataforma de formulrios TypeForm27. A pesquisa foi realizada
em ingls. Porm, para facilitar a compreenso, foi traduzida aqui.
Pergunta 01: Quantos anos voc tem?
13-18 anos: 204 usurios
Pergunta 02: De onde voc ?
EUA: 209 usurios
Europa: 205 usurios
Amricas (exceto EUA): 51 usurios
sia: 34 usurios
Oceania: 31 usurios
frica: 11 usurios
Pergunta 03: Voc um fapstronauta ou femstronauta 28?
Fapstronauta: 233 usurios
Femstronauta: 8 usurios
Pergunta 04: Antes de encontrar o NoFap, com que frequncia voc assistia
pornografia, lia contedo ertico e/ou se masturbava?
Esporadicamente: 12 usurios
1 a 3 vezes por semana: 85 usurios
4 a 5 vezes por semana: 113 usurios
Todos os dias: 306 usurios
Mais de uma vez por dia: 24 usurios
27
28
TypeForm. Disponvel em: http://typeform.com/

Fapstronauta: Usurio do NoFap. Femstronauta: Usuria do NoFap
70
Pergunta 05: Voc possui smartphone?

Sim: 512 usurios
No: 29 usurios
Pergunta 06: Se sim, utiliza aplicativos?
Sim: 499 usurios
No: 13 usurios
Pergunta 07: Se utiliza aplicativos, utiliza algum para ajud-lo(a) na jornada
contra PMO?
Sim: 177 usurios
No: 322 usurios
Pergunta 08: Caso sua resposta foi sim, que nota voc d para tal aplicativo?
Mdia de 3.75
Pergunta 09: O que voc acha da ideia de um app que possua ferramentas e
recursos existentes no subreddit NoFap?
No acho que seja uma boa ideia: 7 usurios
Acho uma boa ideia, mas no usaria o app: 110 usurios
Acho uma boa ideia e usaria o app: 406 usurios
Sem resposta: 18 usurios
71
6.2.
Anexo 2 - Roteiro da animao
Roteiro escrito e utilizado na produo da animao vetorial em motion graphics.
Cena
Texto
Online pornography has been growing

01
throughout the years
Elementos visuais
XXX aparece
progressivamente como
reticncias e aumenta de
tamanho para a direita,
cmera acompanha o
movimento.
02
And there is a lot of people

struggling with it
XXX esquerda, texto

direita.
Entra o logo do NoFap na
esquerda.
03
There are more than 150,000 users

on NoFap
Bonequinhos aparecem
progressivamente abaixo
do texto e vo
aumentando. Cmera segue
o crescimento para a
direita.
04
From different countries and ages
Cabea de um dos
bonequinhos se
transforma num globo
terrestre.
Globo se movimenta para
metade superior da tela
e diminui de tamanho.
Texto no meio da tela.
Trs bonequinhos de
tamanhos diferentes
aparecem na metade
inferior da tela.
05
NoFaps been helping a lot of

people since 2011
2011 escrito com efeito

Write on, ltimo 1 se
alonga continuamente
para baixo, cmera
segue.
72
06
And now it goes with you

/on your phone
Linha centraliza, 1
texto surge esquerda.
Linha encontra celular,
2 texto direita do
celular.
07
Graphic day counter
Cmera aproxima,
entrando no celular.
Texto aparece no canto
superior esquerdo.
Grfico crescente.
Movimento de cmera para
a direita.
08
Badges for accomplishments

superior direito.
Uma insgnia, no meio da
tela, que se movimenta e
se transforma em outras.
Movimento de cmera para
baixo.
09
Panic button!

inferior esquerdo.
Boto azul surge,
apertado.
Cmera se movimenta para
a esquerda.
10
Daily & weekly challenges
Texto no canto superior

esquerdo.
Livro surge na metade
esquerda da tela.
Casinha canina sendo
consertada surge na
metade direita da tela.
Desfoque de cmera.
11
All of that
/and more!
1 texto aparece na
metade superior da tela.
2 texto aparece na
metade inferior da tela.
Cmera se distancia do
centro, saindo do
celular.
73
12
Road 2 Recovery
/Take the first step
13
Download on the App Store
Celular se movimenta
para a esquerda, com
logo do app aparecendo.
1 texto aparece ao lado
direito do celular.
2 texto surge abaixo do
1 texto.
Corte seco.
Smbolo oficial da Apple
Store no centro da tela.
Fade out para preto.
74
6.3.
Anexo 3 - CD com arquivos
No CD abaixo esto contidos:
Este relatrio em PDF;
A animao vetorial;
As telas do app;
O link para o modelo navegvel.
75

TCC - Road 2 Recovery - Timóteo Thober

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TCC - Road 2 Recovery - Timóteo Thober

Uploaded by

Copyright:

Available Formats

Faculdade SENACRS

Curso Superior de Tecnologia em Produo Multimdia

Contextualizao e Justificativa .............................................................................. 8

OBJETIVO GERAL ........................................................................................ 11

OBJETIVOS ESPECFICOS .......................................................................... 11

Definio dos papis dos integrantes da equipe ................................................... 12

Fundamentao Terica .............................................................................................. 16

Design de Interao .............................................................................................. 17

PRINCPIOS DA ANIMAO ........................................................................ 22

MOTION GRAPHICS ..................................................................................... 28

Produo de Vdeo ............................................................................................... 32

DIRETRIZES DE INTERFACE HUMANA PARA iOS ..................................... 20

Pornografia na Internet ......................................................................................... 34

Desenvolvimento do Projeto ........................................................................................ 38

Coleta de dados e anlises ................................................................................... 38

ANLISE DOS APLICATIVOS ....................................................................... 38

ANLISE DA IDENTIDADE VISUAL .............................................................. 41

ANLISE DAS FERRAMENTAS E FUNCIONALIDADES .............................. 42

ANLISE DOS VDEOS ................................................................................ 43

ANLISE CROMTICA ................................................................................. 46

ANLISE TIPOGRFICA E ICONOGRFICA ............................................... 47

CONCLUSES DAS ANLISES ................................................................... 48

Criatividade/Gerao de alternativas .................................................................... 50

FLUXO DE TAREFAS ................................................................................... 53

IDENTIDADE VISUAL ................................................................................... 57

Consideraes Finais .................................................................................................. 62

Anexo 1 - Pesquisa com usurios do NoFap ........................................................ 70

Anexo 2 - Roteiro da animao ............................................................................. 72

Anexo 3 - CD com arquivos .................................................................................. 75

Este trabalho apresenta o desenvolvimento de um layout de um aplicativo mobile

PMO: Pornografia, Masturbao, Orgasmo - o ciclo do hbito da maioria dos usurios.

Nos ltimos 10 anos houve um crescimento exponencial do uso da internet. De

Como resultado do crescimento da internet, no mais preciso comprar a

Website - http://www.nofap.com/ e Frum - http://www.reddit.com/r/NoFap/

(PROJECT KNOW, 2012). Porm, sem obter sucesso na tentativa de mudana do

e apoio de pessoas que tambm possuem essa

dificuldade e que querem lutar contra ela.

Desenvolver uma interface para aplicativo mobile para ajudar os usurios do

Estudar o frum NoFap e seus recursos, usurios e ferramentas;

Pesquisar referncias de aplicativos para mudana de hbitos;

Estudar usabilidade para construir o aplicativo;

Pesquisar referncias de animaes vetoriais;

Escrever um roteiro para a animao;

Construir um storyboard da animao.

Desenvolver o layout e modelo navegvel do aplicativo;

Produzir uma animao em motion graphics para apresentar o projeto;

Definio dos papis dos integrantes da equipe

Aps definidos os objetivos, definiu-se o papel que cada integrante da equipe

Segundo Munari (2008),

A metodologia a ser utilizada ser o Projeto E, desenvolvida por Meurer e Szabluk

Figura 1: Etapas do Projeto E.

As etapas sero aplicadas ao projeto R2R4 do seguinte modo:

Identificar o problema em questo, os usurios do frum NoFap e as circunstncias

Pesquisar, analisar e avaliar aplicativos j implementados nas reas de mudana de

Definir as restries e limitaes, requisitos (o que imprescindvel) e possibilidades

Definir as ferramentas, funcionalidades e contedos do aplicativo. Estabelecer a

Definir a esttica a ser utilizada no aplicativo e vdeo, de modo que diagramao,

Avaliar a personalidade visual desenvolvida na etapa anterior, atravs de

Elaborar um modelo funcional navegvel que simule o funcionamento do aplicativo,

Testar e avaliar continuamente o projeto com usurios para identificar e corrigir

De acordo com o Cory Janssen, co-fundador do site Techopedia, um aplicativo

Loja de aplicativos da Google: https://play.google.com/store

Loja de aplicativos da Apple: https://itunes.apple.com/us/genre/ios/id36?mt=8

Dentro desse mercado de smartphones, h uma verdadeira competio entre os