PROPOSTA DE DESENVOLVIMENTO PROJETUAL
Desenvolvido por Alef Oliveira | Ana Paula Zunkeller Alves | Erika Carvalho da Silva | Julia Moura Alves de Freitas | Rafael Souza Barbosa |
UNIVERSIDADE ANHEMBI MORUMBI
SUMÁRIO CONCEITO DE CRIAÇÃO PÚBLICO ALVO ESTRATÉGIA DE COMUNICAÇÃO DESIGN DE INFORMAÇÃO DESIGN DE INTERFACE Paleta de Cores Tipografia Linguagem Visual e Estilo de Ilustração Logo Layouts DESIGN DE SOM PAINEL SEMÂNTICO DESIGN DE INTERAÇÃO Storyboard
1 2 3 5 9 10 11 12 13 15 16 18
DESIGN DE NAVEGAÇÃO Fluxograma de navegação de imersão Fluxograma de navegação do site CONJUNTO DE TECNOLOGIAS
21 22 23
Conceito de Criação T
endo como tema proposto “Design e Linguagem: a linguagem na Web art como espaço de crítica/denúncia.” e como subtemas para escolha referente às denúncias as áreas econômica, política, social, cultural ou de recursos naturais, optou-se para o desenvolvimento deste projeto a denúncia de teor social e cultural que levou o grupo a abordar sobre Machismo: Violência, tolerância e tradição, para denunciar o machismo e violências contra a mulher como forma de quebrar esse ciclo violento e propor reflexão e conscientização da sociedade, demonstrando como criamos e toleramos uma cadeia de costumes arcaicos e desiguais.
O tema é apresentado utilizando-se de peças artísticas imersivas e interativas na web e infografia para divulgar dados de forma clara e dinâmica, sempre buscando formar um pensamento de igualdade sem conformismo e submissão. A peça interativa e imersiva tem como referência o movimento Surrealismo no qual em sua composição visual fez-se uso de traços para formação de silhuetas e pinturas digitais em aquarela para expressar mais naturalidade e liberdade, aproximando do movimento surrealista, que ambos quando trabalhados minuciosamente,encontram resultados impressionante, instigante e carregado de expressão contestando imageticamente e
poeticamente o que machismo empreende, propondo ao usuário uma experiência sensível acerca do tema. As situações presentes na peça, abordarão desde abuso moral e verbal até sexual e físico. Além disso, o uso do Dente de Leão, escolhido como nome e logo estará sempre presente para enfatizar a ideia de liberdade. E em relação à tipografia, optou-se por escolher fontes que pudessem transmitir um visual limpo e leve, e também com nuance de pintura para condizer com a parte mais artística do projeto e como cores, variações entre roxo, azul e rosa, passando pelos extremos e encontros entre cada tom.
1
Público-Alvo O
público-alvo foi definido para alcançar o máximo de pessoas possíveis e que desejam adquirir uma melhor compreensão e reflexão sobre as questões sociais. Assim, foi estabelecido uma faixa minima a partir dos 15 anos de idade, independente do gênero e classe social., tendo em vista que a tolerância social parte de todos os integrantes da sociedade.
D
este modo, aprofundando o público em uma ideia mais ampla sobre o machismo e as formas de violência contra a mulher e de forma reflexiva, no cotidiano da sociedade como forma de quebrar o conformismo e ajudar a educar a próxima geração de adultos, devemos atingir todas as partes: o agressor, a vítima e a sociedade passiva.
2
Estratégia de comunicação P
ara divulgar algumas informações sobre o trabalho, como o tema, url do site, um breve resumo sobre o conteúdo, a data e o local da apresentação, será feito um cartaz A3 com a identidade visual do projeto e com uso de frases simples e diretas para fácil entendimento do público.
APRESENTAÇÃO
para criar uma conexão entre elas e com o site do projeto, aproveitando a maior audiência alcançada no Facebook e direcionando o público desta rede social às demais, permitindo maior exploração do tema e expansão do conteúdo e informações para o usuário.
11.06.2015 DENTE DE LEÃO 1LEHUWH VH GH VHXV FRVWXPHV 6XHVWLRQH VHX FRPSRUWDPHQWR
E considerando o público-alvo e a intenção de atingir a maior quantidade possível de usuários, expandiremos a divulgação do projeto para o Facebook, no qual postaremos textos, depoimentos, leis de suporte às vítimas e dados relacionados ao trabalho, além de contar com as postagens das outras duas redes sociais
UNIVERSIDADE ANHEMBI MORUMBI
RUA 13 DE MAIO, 1266 - BELA VISTA SALA: 502
Cartaz A3
3
Estratégia de comunicação Mídias Sociais
4
Design de Informação Organização e classificação dos dados do projeto
Os dados do projeto serão organizados em três infográficos, sendo um deles conectado com o banco de dados, para que seja feita uma pesquisa de opinião com os visitantes do site.
Fluxo de processamento e geração da visualização dos dados
A visualização de dados consiste em apresentar dados numéricos de forma a facilitar o entendimento pelos usuários,para isso, são utilizadas ilustrações e/ou gráficos
5
Design de Informação Fluxo de processamento e geração da visualização dos dados e Detalhamento do que foi utilizado em cada infográfico
O
s bancos de dados pesquisados foram refinados para que apenas as informações consideradas relevantes pelo grupo, de acordo com a premissa do projeto, fossem utilizadas. Dessa forma, as informações que mais acrescentariam conhecimento relacionado ao tema proposto foram selecionadas e adaptadas para os infográficos.
N
o infográfico sobre , serão utilizados dados das pesquisas: “Percepção da sociedade sobre violência e assassinato de mulheres”, “Tolerância social à violência contra as mulheres” e “Violência contra a mulher: o jovem está ligado?”, sendo estes o percentual de entrevistados que concordam que o homem deve ser a cabeça do lar, os que afirmam que toda mulher sonha em casar e que a mulher só se sente realizada quando tem filhos, também os que acreditam que “o que acontece com o casal em casa não interessa aos outros”, “em briga de marido e mulher, não se mete a colher” e “roupa suja se lava em casa”,
Além disso, dados sobre a percepção dos riscos que a mulher corre sob determinadas circunstâncias e os principais motivos pelos quais a mulhre agredida não se separa, na opinião dos entrevistados.
6
Design de Informação N
o infográfico sobre serão utilizados dados das pesquisas “Percepção da sociedade sobre violência e assassinato de mulheres” e “Percepção dos homens sobre a violência doméstica contra as mulheres”, sendo estes: Instituições de apoio mais conhecidas pelos entrevistadoso serviço de apoio quedeve ser procurado pelas vítimas
de violência doméstica, o crime mais punido, percentual de entrevistados que acreditam que as mulheres passaram a denunciar mais os casos de violência doméstica e percentual de homens que acreditam que as mulheres passaram a desrespeitá-los (depois do aumento citado) e o percentual de entrevistados conhecem a Lei Maria da Penha.
7
Design de Informação N
o
infográfico
sobre
a contará com dados retirados das pesquisas: “Violência contra a mulher: o jovem está ligado?”, “Percepção da sociedade sobre violência e assassinato de mulheres” e “Percepção dos homens sobre a violência doméstica contra as mulheres”, sendo estes: o percentual de mulheres vítimas de cada tipo de violência, o local em que as mulheres se sentem mais inseguras e o de vítimas de cantadas ofensivas e assédio em
diferentes lugares, o percentual de entrevistados que consideram agressão física e diferentes formas de controle como violência e média de agressores que já xingaram uma mulher - e a média de vezes que o fizeram.
8
Paleta de Cores
A
64%
102
30%
176
50%
124
34%
163
0%
188
1%
205
667CBC
0%
0%
B074B1
Misturas & tons
B0A3CD
31%
176
63%
116
59%
122
0%
177
68%
100
0%
172
0%
7A64AC
0%
9
Tipografia mulher
mulher r feminicidio mulhe feminicidio mulher
E
ssa fonte será usada basicamente para textos corridos e dados de infográficos, sendo ela sem serifa e com base quadrada, suprindo a necessidade de clareza e legibilidade devido a quantidade de informações que serão apresentadas ao usuário.
2015 direitos cidio femini 2015 direitos dio feminici
machismo machismo direitosos 2015 direit 2015 2006 d’arc 2006 d’arc ismo mach luta da mulher machismo
lutaconquistas da mulher d’arc 2006 d’arc 2006 conquistas luta ciclo conqui ciclostas
luta
cicloistas conqu
mulher mulher
Edo SZ
Satellite
S
mulher mulher
feminicidio feminicidio feminicidio
erá aplicada em títulos e textos com mais destaque como subtítulos e descrições de páginas, sendo ela manuscrita e com nuance de pintura, condizendo com a parte artística que baseia-se em pintura.
feminicidio 2015 direitos
2015 direitos 2015 direitos 2015 direitos machismo machismo 2006 d’arc machismo machismo luta 2006 d’arc 2006 d’arc 2006 d’arc conquistas luta ciclo
luta luta
conquistas conquistas conquistas ciclo 10
Linguagem Visual e Estilo de Ilustração
Traços livres
S
erão utilizados para formar silhuetas e formas básicas para a composição, como personagens primários e secundários, e mostrar também a espontaneidade que deve ser passado como ser humanos.
Aquarela
I
rá compor a parte mais expressiva do projeto, pois seus pigmentos se encontram ao dissolver a água ou suspensos sobre suporte, assim carregada de naturalidade e utilizando o acaso para composição, aproximando então do movimento surrealista, que ambos quando trabalhados minuciosamente, encontram resultados impressionantes, instigantes e carregados de expressão, sentimentos e significados subjetivos ao espectador.
11
Logo O
Primeira experimentação. Logo tipográfico criado para homenagear a heroína Joana Dar'c
Terceira experimentação de logo. Neste, em relação ao anterior, foi necessário colocar a escrita” Dente-de-leão” para o lado de fora, pois assim facilitaria sua leitura ao ser aplicado em componentes do projeto.
nome do projeto “Dente de Leão” é referencial à flor de mesmo nome, conhecida por suas sementes leves, que voam com o vento. Delicada porém forte, esta flor pode crescer em diversos solos e sob várias condições climáticas. Na história, era associada à Maria. Simbolicamente, representa acima de tudo, a liberdade. Por isso, foi escolhida como título do projeto, visando a liberdade da mulher, fruto de uma luta contra preconceitos milenares. Seu significado otimista indica que muito já foi conquistado, portanto muito ainda se pode conquistar.
Segunda experimentação de logo. Dente de leão com raízes que a “cobrem”, sufocando-a, porém há uma abertura para as sementes se soltarem e voar livremente (relação à mulher em busca de sua liberdade)
Logo final. Mudança para fundo aquarelado, para seguir melhor a identidade visual do projeto.
12
Layouts EXPERIMENTAÇÃO 1 (wireframe)
EXPERIMENTAÇÃO 2
13
Layouts EXPERIMENTAÇÃO 3
LAYOUT FINAL
14
Design de Som P
ara a linguagem sonora serão utilizadas trilhas que sigam uma das principais características da música surrealista: a ausência de silêncio. A constante apresentação de sons será explorada de forma abrangente e que faça a composição do trabalho audiovisual como um todo, agregando maior relação com o movimento e, também, com a temática proposta.
S
erá utilizado música lounge, que é um gênero musical que pretende provocar no usuário umaa sensação de estar um ambiente, com batidas marcadas (que terão variações de peso no conjunto geral, ficando mais ou menos audíveis ao longo da animação). Esta ficará em looping, trazendo um caráter mais surrealista. Também usaremos sons diegéticos para contribuir na imersão e intensificar a experiência do usuário.
15
ciclo
ciclo
Painel Semântico P
ara um melhor desenvolvmento da identidade visual, uma pesquisa de referência e a construção de um painel semântico foi realizada. Com esse quadro de referências foi possível adquirir melhores conceitos de cores, formas e texturas para a identidade do projeto
O painel semântico serve para transmitir certos sentidos de emoção através de imagens, para afunilar a sua transmissão da informação.”
16
17
Design de Interação A
peça interativa e imersiva será composta por uma animação onde são apresentadas situações de formas de violência cont durante um dia, acompanhando várias personagens, mostrando reações (ou não) das vítimas, ações do agressor e aceitação da socidade, representada com pessoas passivas a estas situações e principalmente com a visão subjetiva do espectador.
:
O circulo inteiro se formará para depois haver o nascimento do dente de leão que quebrará sua moldura, revelando o nome do projeto. Com isso, queremos simbolizar o ciclo de machismo e conformismo criado e então a força da flor, que mesmo crescendo dentro dele, consegue o quebrar.
Homem menospreza mulher no café da manhã com dizeres do estilo: “Vou trabalhar porque alguém tem que colocar comida nessa mesa.” e sai para trabalhar.
18
Design de Interação
: Ao avistar a mulher à sua frente sair do metrõ cheio, o homem, que se encontra na porta do mesmo, “esbarra” nela propositalmente, só para poder ter a chance de tocá-la
: Mulher que está passando pela estação de metrô recebe cantada do homem que acabou de sair de um.
19
Design de Interação
: Homem da cena anterior chega ao escritório onde trabalha. Sua funcionária pede aumento salarial, mas como resposta, ele faz proposta indecente, com dizeres apelando ao assédio sexual, como: “Passa no escritório mais tarde para a gente resolver isso”.
: Mulher que recebe proposta indecente na cena anterior, comenta com a amiga sobre a roupa curta da menina que está passando: “Que piranha… Depois que é abusada, reclama”
20
Design de navegação P
ara representar a interatividade, em todas as situações haverá uma forma de denúncia implícito, com objetos como um celular sobre uma mesa, ou por pessoas, como algum personagem que pode ceder ajuda ao ser acionado. Todas estas formas de denúncia serão clicáveis, com o intuito de que haja uma reação negativa ao ocorrido provinda do espectador, quebrando então o ciclo da violência. Após um curto período de tempo, o objeto ou personagem não será mais clicável, mantendo então a aceitação perante as situações e avançando no desenvolvimento do enredo. E por questão de experiência do usuário haverá um link para a página inicial do site, permitindo então a flexibilidade do usuário durante a navegação.
Introdução
Iniciar?
Cena 1
Não
Intervir?
Cena 2
Sim
Não
Intervir? Sim Sim
Feedback da quantidade de interações feita pelo usuário
Fim
Cena 3
Intervir? Não
Cena 4 Sim
Sim
Feedback da quantidade de interações feita pelo usuário
Cena 6
Não
Intervir?
Cena 5
Intervir? Não
A interatividade não é somente uma comodidade técnica e funcional; ela implica física, psicológica e sensivelmente o espectador em uma prática de transformação.
21
Design de navegação A
navegação do site será aberta e não-linear, pois o menu será constituido pelos links diretos para os infográficos que compõe a área informacional do projeto, assim como também terá link para a peça imersiva e interativa. Para garantir a conectividade entre o projeto, as redes sociais também aparecem como item de navegação, tendo então uma interligação entre as redes sociais mais populares e o projeto.
Home
Infográfico X
Redes Sociais
Imersivo
22
Conjunto de tecnologias P
ara o desenvolvimento do site serão utilizadas as linguagens HTML5, CSS3 e JavaScript - para criação, estilo e interação dos elementos, respectivamente. Os infográficos serão desenvolvidos a partir do banco de dados MySQL e da linguagem PHP, mas a visualização dos dados será feita com ferramentas JavaScript, em sua maioria.
A
s peças sonoras que comporão o trabalho serão desenvolvidas e/ou editadas com a utilização dos programas SoundForge e Audition.
A peça interativa imersiva será desenvolvida no programa Flash, mas terá auxílio do Photoshop e do Illustrator para criação e edição geral das imagens utilizadas na animação e, também, no site em geral.
23