Qualquer coisa pela beleza by Anhembi Morumbi

Sumario Introdução

Público alvo e estratégia de comunicação

Tipografia

Vinheta de apresentação e capa imersiva

Linha do tempo

Infográficos

Paleta de cores

Idealize beleza - Processing

Logo

Vídeo imersivo

Conceito de Criação

Debate

Conceito de Navegação

Saiba mais

Criação de Layout

Elementos sonoros

Wireframe

Cartaz

Layout

Embalagens e rótulos

Mock-up mobile

Créditos

Introducao O projeto que será descrito ao longo desta proposta de desenvolvimento foi criado pelo grupo Block, que foi formado com o intuito de realizar os projetos interdisciplinares do curso de Design Digital da Universidade Anhembi Morumbi. Este projeto do 3º semestre tem como objetivo criar uma denúncia social com o tema Obsessão por Beleza, utilizando o design e as linguagens com o auxílio do movimento dadaísta para desenvolver um site imersivo que critique como a comercialização do belo ideal manipula a população, que obcecada por esse padrão de beleza acaba prejudicando sua própria saúde.

Escolhemos esse tema pela polêmica que persegue o padrão de beleza relacionado às grandes modificações e riscos aos quais as pessoas se sujeitam para segui-lo, e utilizaremos do movimento artístico dadaísta para desenvolver o nosso projeto já que o mesmo remete a mudança, a espontaneidade, a liberdade pessoal, o aleatório, a contradição, o caos, e a imperfeição. Acreditamos que essas características consigam mostrar como as pessoas se focam no belo ideal e esquecem a saúde.

Publico alvo e estrategia de comunicacao

O nosso público-alvo terá como foco os adolescentes dos 14 aos 24 anos, de ambos os sexos, que residem no Brasil. Definimos esta faixa etária por essa ser a fase da vida onde passamos por alterações mentais, físicas e sociais que capacitam o indivíduo a assumir os deveres e papéis sociais do adulto. Entretanto, queremos que a denúncia seja vista por qualquer faixa etária, por isso o vídeo imersivo e a vinheta do site serão veiculados nos anúncios do Youtube, site que permite que seus usuários carreguem e compartilhem vídeos em formato digital. Além disso, a fim de interagir com o públicoalvo e gerar discussão sobre o assunto teremos uma página no Facebook que auxiliará na veiculação da denúncia.

Página Facebook

Tipografia Embasadas na obra Kleine Dada Soirée (1922) de Theo Van Doesburg and Kurt Schwitters as tipografias escolhidas lembram recortes de jornal e revistas, o que sustenta a ideia de colagem (característica dadaísta) que estará presente ao longo do desenvolvimento do projeto, com exceção da tipografia utilizada para texto que é sem serifa, de bom entrelinhamento e pregnância, priorizando a legibilidade. Tipografias para Títulos: - Bring me the Gummy Bears. - Traveling Typewriter. Tipografia para texto: - Roboto.

Kleine Dada Soirée, 1922

Obs: As seguintes tipografias foram utilizadas somente para apoiar a característica de desconstrução e colagem do dadaísmo na criação do logo do projeto e na construção do universo onde se passa o vídeo imersivo. - Jockey Full Of Bourbon. - Burn out, Fade away. - Eternal Call.

Tipografias utilizadas

Logo do trabalho

Paleta de cores A paleta de cores ĂŠ composta pelo vermelho, verde, azul, branco e preto baseados na capa da revista Cabaret Voltaire do artista Tristan Tzara. Durante o projeto essas cores serĂŁo aplicadas em transparĂŞncia e tons completos.

C:33% R:113 M:91% G:35 Y:84% B:28 K:48%

C:77% R:67 M:63% G:75 Y:40% B:97 K:31%

Capa da revista Cabaret Voltaire

#71231C

C:70% R:56 M:53% G:63 Y:58% B:59 K:59%

#383F3B

#434B61

C:91% R:0 M:79% G:0 Y:62% B:0 K:97%

#000000

C:0% M:0% Y:0% K:0%

R:255 G:255 B:255

#FFFFFF

Paleta de cores

Logo No logo do projeto aplicamos as tipografias utilizadas para título, complementadas pela “Jockey Full Of Bourbon” usada para dar ênfase à palavra “Qualquer” e a “Eternal Call” empregada à palavra “Beleza” para representar como é delicado o seu significado. Ao adotarmos os tons de cinza para o termo “Qualquer coisa” e o vermelho para “Beleza”, conseguimos dar a impressão de que a beleza é mais importante dos que os meios explorados para alcançá-la, remetendo ao foco da crítica da nossa denúncia.

Logo “Qualquer coisa pela beleza?”

Conceito de criacao Fundamentado pelas características dadaístas e pelas obras de Raoul Haussman, a identidade visual foi trabalhada com sobreposições de imagem e colagens, no intuito de representar a grande variedade de objetos e métodos voltados para a comercialização da beleza. O site foi criado pensando em sua interação com o usuário final - concluímos que ao explorar a interatividade com os espectadores conseguiríamos fazer com que os mesmos refletissem mais sobre o assunto, já que precisam participar do site para ter acesso as informações. Para não confundir ou interromper a linha de raciocínio do usuário final

criamos um site de página única. “O projeto de espaços para comunicação é a interação humana” (WINIGRAD T. 1997, p.160, apud DESIGN DE INTERAÇÃO, ROGERS, SHARP, PREECE, 2013, p. 8). “[...] é o espectador que faz a obra [...] a arte nada tem a ver com a democracia [...]” (M. DUCHAMP, apud ARTE E INTERATIVIDADE, PLAZA JULIO.).

Raoul Haussmann, Tatlin em Casa

Raoul Hausmann, O CrĂtico da Arte

Conceito de navegacao O site consiste de uma página única. Cada seção possui um fundo diferente, conforme o seu conteúdo. O menu acompanha a rolagem, estando sempre presente, caso o navegante queira trocar de seção rapidamente. Ao chegar no final da página, encontrase o sitemap, com os links de todas as partes do site. Os infográficos requerem a interação do usuário, assim como outras seções – Capa imersiva de apresentação (aparece após a vinheta de apresentação); Introdução (linha do tempo); Idealize Beleza (desenvolvido em Processing); o espaço para discussão; Saiba Mais (com links referente ao assunto trabalhando com hipermídia). Obs: o link de contato encaminha para o site do Grupo Block que possui um formulário de contato para que o usuário possa entrar em contato conosco.

Sitemap

CRIACAO DE LAYOUT Os layouts experimentais tinham como foco a exploração da navegação em página única e a disposição das informações no site.

Layouts experimentais

Wireframe

Wireframe do site

layout

layout do site

Mock ups Mock-up Ipad

Mock-up Iphone

Vinheta de apresentacao e capa imersiva

A introdução do site mostra uma diversidade de padrões de beleza em um espelho que quebra quando aparecem pessoas que adquiriram sequelas ou doenças durante a sua busca pela beleza. Quando o espelho quebra ele revela o logo da denúncia, questionando o espectador. Após a vinheta aparece a capa imersiva feita com imagens relacionadas com a comercialização da beleza, que através da interação por clique do espectador se estilhaça revelando imagens de pessoas que adquiriram sequelas ou doenças em prol do belo ideal.

Storyboard da vinheta de apresentação

Capa imersiva

linha do tempo A linha do tempo é um complemento a introdução do site e foi baseada no livro História da Beleza de Umberto Eco, com o propósito de mostrar ao espectador que a definição do belo não é eterna, ela varia de acordo com o tempo e espaço.

Linha do tempo

Infograficos Um infográfico é uma representação visual de uma informação que precisa ser passada para um público. Essa informação mistura textos e imagens para que o conteúdo apresente um esclarecimento maior e que o processo de entendimento não seja dificultado. Segundo a definição apresentada, utilizaremos esse veículo de comunicação para transmitir o conhecimento coerentemente e que entre em harmonia com as propostas apresentadas. No infográfico de maquiagem, o efeito é mouse over, ao colocar o mouse em cima dos círculos determinados, a informação aparece.

No infográfico de pele, a interação se dá ao comparar duas imagens – ao arrastar o retângulo cinza, uma das imagens fica em evidência.

No de cabelo, ao clicar em um dos números nas mechas, a imagem de fundo fica desfocada – com apenas a mecha selecionada nítida - e a informação aparece.

No infográfico de cirurgia plástica, partes do corpo da modelo estão em destaque. Ao clicar em uma das partes, uma linha é desenhada e a informação aparece.

No de riscos e resultados, ao clicar no título, os dados ficam visíveis.

No infográfico Alimentação em Risco, as características dadaístas de colagem e desconstrução aparecem após a interação do usuário com o recheio do lanche. Ao clicar no tomate e alface os dados sobre bulimia e anorexia são apresentados e no fundo do infográfico aparecem colagens de pessoas com a doença. Em contrapartida, ao clicar no bacon e hambúrguer os dados sobre vigorexia e obesidade aparecem e o fundo muda para corresponder a esses dados.

Processing Idealize Beleza é uma seção que propõe ao usuário montar um corpo com as imagens oferecidas (cabeças, troncos e pernas) com o propósito de reforçar a ideia de que a beleza varia conforme a opinião das pessoas, descontruindo dessa forma um suposto padrão a ser seguido. A imagem construída pode ser salva para que o usuário a compartilhe em nossa página do Facebook como uma representação de sua opinião.

Processing

Video imersivo O vídeo imersivo critica como a comercialização do belo ideal manipula a população que fica obcecada pela beleza a tal ponto de prejudicar a sua saúde. Sua linguagem visual segue características dadaístas de desconstrução e colagem, usando imagens e fundos que já foram utilizados no site para criar uma conexão entre as duas peças.

Storyboard do video

Debate A seção debate permite ao usuário participar de uma discussão sobre o tema da denúncia, para fazêlo “mergulhar” e criar uma posição sobre o assunto.

Saiba mais Seção que trabalha com imagens e hiperlinks, disponibilizando outras fontes de informações ao público.

Elementos sonoros

No site, o áudio é acionado pelo clique. Após a vinheta de apresentação ser executada, o espaço se transforma em uma capa de apresentação imersiva. Ao clicar, a primeira imagem se estilhaça e aparece outra no fundo. Quando isso acontece, o som de vidro quebrando é acionado, para simbolizar um espelho se partindo. Além disso, os links dos infográficos no menu e nos índices dos mesmos possuem sons que são ativados pelo click. O link para o índice Cosméticos, assim como os títulos dos infográficos (Maquiagem, Pele e Cabelo) possui o som de um secador de cabelos. O som para o índice Cirurgias Plásticas, assim como os títulos dos infográficos (Qual é a cirurgia mais popular?, Riscos e Resultados) é um batimento cardíaco. O infográfico de Distúrbios Alimentares não possui um índice por ser o único de seu tema, portanto os sons de mastigação estão presentes no link do menu e na própria interação do infográfico. 27

Cartaz Para a criação do cartaz de divulgação do trabalho utilizamos os mesmos elementos constituintes da capa de apresentação imersiva do site, juntamente com um efeito de papel rasgado que revela as informações sobre a apresentação do projeto. O logo em destaque instiga a curiosidade por estar questionando o público.

Embalagens e rotulos

Assim como o cartaz as embalagens sĂŁo baseadas na colagem presente na capa imersiva para criar uma uniĂŁo visual entre as peĂ§as.

Embalagem

Etiqueta cd

Creditos Professora/Orientadora: MĂŠrcia de Assis Albuquerque.

Integrantes: AndrĂŠ Ferreira Bruniera Beatriz Cardoso Salazar Gabriel Amorim Vecchio Ingrid Mayra Brasil Schwinden Jessica Silva Losano Renata Bueno Pires Tassinari Ricardo Braz Garrido Cadima

Tecnicas e softwares utilizados