FluxUS by Anhembi Morumbi

FLU

Allan de Carvalho Guilherme Migliorini Munhon Haylla Tândara Conde do Carmo Pedro Fernando Mattos Baptista Pedro Araujo Pinheiro Policarpo

“Libertar as pessoas é o objetivo da arte, portanto a arte pra mim é a ciência da liberdade.”

Joseph Beuys

Flux Sumário

Site Documental Agradecimento Conceito Criativo Público Alvo Estratégia de Comunicação Design de Interação Efeitos Sonoros Enquete & Infogfráficos Interativos

Desing de Navegação Conteúdo & Roteiro

Desing de Interface Wireframe Layout Paleta de Cores Tipografia Desenvolvimento: Trilha Sonora Desenvolvimento: Podcast Desenvolvimento: Cartaz A3 Desenvolvimento: Infográficos Animados Desenvolvimento: Logotipo

04 05 07 09 12 14 15 16 18 20 21 25 26 29 31 32 33 35 37

Quarta Peça Área Administrativa Conceito Criativo Desenvolvimento da Quarta Peça Banco de Dados Wireframe Layout

41 44 45 47 52

Conjunto de Tecnologias Softwares Linguagem de Programação Projeto Sustentabilidade

53 54 57

Agradecimento

Gostariamos de agradecer ao nosso professor do Projeto Interdisplinar, Ricardo Bontempo, a nossa professora auxiliar, Mércia de Albuquerque, os pais e amigos que nos ajudaram a contribuir para que o projeto se realizasse e aos colegas de grupo que fizeram o trabalho com dedicação.

Conceito Criativo

06 A campanha proposta busca expor o conhecimento que foi empregado para compor o artigo. O meio de distribuição do nosso conhecimento, nos levou a criar um site documental, proposto pela faculdade. Por conseguinte, foi escolhido um site midiático que possui um painel administrativo, para manutenção do conteúdo. Com base em pesquisas realizadas, foi possível findar o visual nas cores e fotografias feitas e utilizadas pelo Movimento Fluxus Art. Levando a realidade do que é visto hoje.

Público Alvo

08 O público alvo, do projeto, é representado por jovens e adultos, entre 17 a 30 anos. Entre estudantes de design em geral, artes e profissionais das áreas interessadas.

Brasil 30% dos usuários entre 25 -34 anos.

18% da população brasileira é joven, entre18-24 anos. De acordo com ConScore(2013), o Público usuário de internet no brasil, é jovem. Em média de 18% dos usuários de idade entre 18-24 e 30% dos usuários de idade entre 25-34.

O público excedente,vem a ser um grupo secundário, onde queremos atingir, porém não é primordial.

Estratégia de OComunicação público excedente,vem a ser um grupo secundário, onde queremos atingir, porém não é primordial.

10 Para a apresentação do site foi elaborado uma vinheta, com o intuito de fixar a marca do site junto ao público alvo. Por isso, seu roteiro baseia-se em apresentar de modo contextualizado o logotipo do site. A tentativa de maximizar o público foi disponibilizar os botões de compartilhar no Twitter e Facebook. Além disso, foi criado a News Letter para manter os usuários mais frequentes atualizados sobre o conteúdo disponível no site. Na área administrativa, foram criados gráficos para permitir o acompanhamento mensal de novas assinaturas da News Letter e também das enquetes mais populares. Levando o público alvo existente, foi produzido um site midiático de fácil utilização e interativo.

11 Visando a comunicação de forma clara e coerente e que tem como intuito a compreensão e acessibilidade de todos os usuários em questão.

Design de Interação

13 A interação humano-máquina vem avançando cada vez mais. Por isso foi desenvolvido, de acordo com o que foi solicitado, uma experiência mais dinâmica e imersiva. A fim de uma boa prática de uso, acredita-se que será possível proporcionar uma experiência envolvente, fácil e simples de utilizar e que atenda a todo o público-alvo a fim de ser um sucesso. O objetivo geral foi de levar a experiência mais adiante, de maneira criativa e emocional, tornando assim o diferencial notável que define a forma como o trabalho foi realizado. O trabalho foi feito a fim de proporcionar não apenas um conteúdo de boa qualidade.

Efeito Sonoro Conforme proposto, no site é possível na página inicial ouvir uma música que achamos que se completa com o conceito do Movimento Fluxus Art e do artista Joseph Beyus. Temos um player onde ao clicar no play, objeto a interação do usuário, pode pausar a música.

Enquetes & Infográficos Para apresentar os infográficos interativos decidimos criar enquetes que se encontram dentro de algumas matérias do site; onde após o usuário dar sua opinião é gerado um gráfico que mostra quantas pessoas responderam cada opção da enquete. Também na parte administrativa do site, foram criados gráficos para permitir o acompanhamento das enquetes mais populares, aonde é possível fazer ‘DRIL-DOWN’ e ver a quantidade de votos em cada opção da enquete selecionada.

Design de Navegação

17 Nosso principal objetivo no design de navegação é dar a impressão ao usuário, que pode escolher livremente o seu percurso pela aplicação em qualquer instante. Categorizamos o menu do site com o objetivo que vai além de uma simples navegação, pois a partir dele é possível identificar a estrutura do site ou o resumo do conteúdo oferecido. A estratégia de navegação do site é definida como global, que é o conjunto de links (menu), que representa as categorias do primeiro nível do site e que aparece em todas as páginas do site.

18 Segundo irlabr.wordpress.com

97%

89%

A navegação global ocorre em 97% dos casos.

11%

Em 89% dos casos o menu fica localizado no topo da página O menu pode aparecer na lateral superior esqueda que representa 11% dos projetos

Conteúdo & Roteiro Conteúdo A criação do site Flux.Us se baseou no artigo, Fluxus: Happening e a Arte do Improvismo; que foi elaborado pelo grupo (também disponibilizado para download no site).

Roteiro O menu principal apresenta uma série de ícones em que cada um leva a uma informação diferente e que tem como perspectiva atender ao usuário da melhor forma de acesso. Vinheta

Home

Matéria

Download Artigo

News Letter

Matéria sobre Fluxus

Matéria sobre Happening

Galeria

Equipe

George Maciunas

Allan Kaprow

Chamada das Matérias

Matéria Postada

Contato

John Cage

Joseph Beuys Yoko Ono

Design de Interfaces

Wirefrime Menu

Vinheta

Home Player de Música

Carossel de Notícias

Rodapé

22 Menu Chamada da Matéria

Chamada da Matéria

Matéria

Chamada da Matéria

Rodapé Menu

Post da Matéria Autor: Data:

Titulo da Matéria Contéudo

Compartilhamento em rede social

Rodapé

23 Menu

Imagem

Galeria

Imagem

Rodapé Menu

Integrante

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Rodapé

Equipe

24 Menu

Contato

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Nome* Email* Destinatário* Assunto

Mensagem

Enviar

Rodapé Menu

News Letter

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Nome* Email*

Enviar

Rodapé

Layout

O layout por ter uma quantidade de detalhes foi impresso a parte para melhor visualização. Agradecemos a compreensão.

Paleta de Cores A paleta de cores de qualquer projeto é tão importante quanto o layout. Ela serve para fazer com que seu conteúdo e as suas cores e matizes correspondam, criando assim a harmonia em torno do conteúdo. Segundo theartstory.org, todos os alimentos disponibilizados nos “fluxfuneral” e “flufeast e wake” eram preto, branco ou roxo. Por causa desses eventos, escolhemos a cor roxa e as matizes, preto, branco e tons de cinza para compor nossas peças. #9e1e62 #b24685 #74184f #7c1e5c

#8b4789

#652c90

#84236b #8a2579 #8c267f #91278c #9f3a95 #824f9f

27 #0c0c0c

#404041

#000000

#58585b

#ffffff

#6d6e70

#f1f1f2

#808284 #939597 #a7a9ab #bbbdc0 #d1d2d4 #e6e7e8

Utilizamos como paleta secudária as cores. Pois são padrões de alguns plugins utilizados, para tornar o site mais dinâmico. Seria inviável alterar todos dentro do tempo previsto para esse projeto.

28 #8b4789 = C:52% M:85% Y:15% K:1% - R:139 G:71 B:137 #9e1e62 = C:35% M:100% Y:35% K:10% - R:158 G:30 B:98 #b24685 = C:31% M:86% Y:18% K:0% - R:178 G:70 B:133 #74184f = C:47% M:100% Y:40% K:28% - R:166 G:24 B:79 #7c1e5c = C:50% M:100% Y:34% K:19% - R:124 G:30 B:92 #84236b = C:52% M:100% Y: 27% K:10% - R:133 G:35B:107 #8a2579 = C:53% M:100% Y:18% K:3% - R:138 G:37 B:121 #8c267f = C:53% M:100% Y:12% K:2 %- R:140 G:38 B:127 #91278c = C:51% M:100% Y:2% K:0% - R:145 G:39 B:140 #9f3a95 = C:51% M:100% Y:0% K:0% - R:144 G:39 B:143 #824f9f = C:75% M:100% Y:0% K:0% - R:101 G:44 B:144 #652c90 = C:57% M:81% Y:0% K:0% - R:130 G:79 B:159 #000000 = C:75% M:68% Y:67% K:90% - R:0 G:0 B:0 #0c0c0c = C:74% M:67% Y:66% K:85 - R:12 G:12 B:12 #404041 = C:0% M:0% Y:0% K:90 - R:64 G:64 B:65 #58585b = C:0% M:0% Y:% K:80% - R:88 G:88 B:91 #6d6e70 = C:0% M:0% Y:0%K:70% - R:109 G:110 B:112 #808284 = C:0% M:0% Y:0% K:60% - R:128 G:130 B:132 #939597 = C:0% M:0% Y:0% K:50% - R:147 G:149 B:151 #a7a9ab = C:0% M:0% Y:0% K:40% - R:167 G:168 B:171 #bbbdc0 = C:0% M:0% Y:0% K:30% - R:187 G:189 B:192 #d1d2d4 = C:0% M:0% Y:0% K:20% - R:209 G:210 B:212 #e6e7e8 = C:0% M:0% Y:0% K:10% - R:230 G:231 B:232 #f1f1f2 = C:0% M:0% Y:0% K:5% - R:241 G:241 B:242 #ffffff = C:0% M:0% Y:0% K:0% - R:255 G:255 B:255

Tipgrafia O Movimento Fluxus Art olhou para os futuristas e dadaístas para a inspiração como foco principal nos aspectos de desempenho do movimento. Foi escolhido para uso, a fonte Taurus Mono Outline para os títulos e subtítulos, levando em consideração as ideias do movimento. O intuito é de passar a sensação de caligrafia futurista já que é o que a fonte remete.

30 Para o conteúdo do site, foi feito uso da fonte Roboto, a fonte é sem serifa e otimizada para web, já que as tipografias sem serifa era usada no jornal fluxus o que deu origem ao movimento.

Roboto

By Cristian Robertson

Para reforçar à identidade visual da marca adotou-se as tipografias e suas respectivas variações Italic e Bold, nas manifestações visuais.

Desenvolvimento: Trilha Sonora A trilha sonora escolhida foi a música Hunter da bjork que propõe a ideia de várias sensações ao usuário. A música fala sobre caçar os próprios princípios e ter a sua liberdade. Joseph Beuys utilizava animais para suas performaces como forma de demonstrar suas emoções e como ele via a arte. Assim, a música da Bjork nos traz a imagem de que a caça pode nos propor uma saída. E suas batidas e sonoridades podem ser relacionadas as músicas produzidas pelo John Cage.

Desenvolvimento: PodCast Foi elaborado um podcast sobre George Maciunas, uma vez que ele foi o fundador e uma das principais influências no movimento artístico. No PodCast abordamos um pouco sobre a história da vida de Maciunas e citamos algumas de suas obras. O podcast foi criado também para auxiliar pessoas com dificuldades de leitura , para dar mais de uma opção para o usuário obter conhecimento e também estava no normativo do projeto que o Podcast era necessário.

Desenvolvimento: Cartaz A3 O cartaz segue o tema adotado. Ao centro o símbolo do infinito, que é usado no logotipo, com mesclas de imagens de exemplos de happening, como por exemplo, o "Cut Piece" e "Bandaged Orchestra" da Yoko Ono e uma exibição de John Cage. Acima do simbolo de infinito com imagens mescladas há a frase "A arte do acontecer" em referenciada aos happenings.

Desenvolvimento: Infográfico Animado Happening E a Arte do Improvismo O tema do infográfico foi escolhido devido uma das vertentes do artigo, que foi produzido pelo grupo. No infográfico é contado um pouco da história do Happening no movimento artístico. O Movimento Fluxus Art utilizava mais de uma fonte nos textos e com influência futurismo também deixavam as palavras em várias direções dando a sensação de movimento. Foi utilizado uma tipografia sem serifa para a legibilidade.

36 Fluxus Journey

O infográfico foi elaborado com o intuito de mostrar ao usuário ,que o movimento artístico Fluxus Art, teve suas atividades executadas em várias partes do mundo. Com diversos artistas, mostrando de forma simples e dinâmica como isso aconteceu. O infográfico contem um mapa múndi e uma linha do tempo. O mapa reage conforme a data da linha do tempo, que passa mostrando como e onde ocorreu o “fluxo” de alguns artistas envolvidos com o movimento pelo mundo inteiro.

Desenvolvimento: Logotipo O logotipo foi criado sobre o conceito do Movimento Fluxus Art, é composto por duas partes:

• O elemento gráfico do infinito que transmite a ideia de que tudo está em constante exercício, em movimento.

FLU • O logotipo é composto por duas linhas de texto, onde foi aplicado a fonte “BEBAS”, que é e imensamente similar com a fonte usada nas publicações do jornal Fluxus

A palavra “fluxo" - em latim, é a ação e o efeito de fluir (brotar, correr, circular). O termo é usado, por exemplo, para fazer alusão ao movimento regular das águas de um rio. Logo, Fluir é a palavra que descreve o movimento artístico. O movimento em si está em constante exercicio, já que é visto como um estilo de vida pelo seu criador e seus seguidores, que se opunham as autoridades dos Museus de impor valor financeiro a arte. E não só acreditavam que a arte deveria ser disponibilizada por todo mundo mas também que deveria ser praticada a toda hora.

39 A arte na visão do Movimento Fluxus Art é uma grande intersecção de vários tipos de mídias diferentes, seja a performance ou a pintura, tudo poderia ser combinado.

Quarta Peça Área Administrativa

Conceito Criativo

42 O papel da tecnologia é facilitar os processos e tomadas de decisões no âmbito profissional e doméstico. Como quarta peça, decidimos criar paralelamente com os outros conteúdos, um sistema que é integrado com o site produzido. É importante levar em consideração a quantidade e a qualidade das informações geradas, evitando que as informações fiquem dispersas no site. Com o sistema, a organização e a velocidade com que as informações fluem gera uma vantagem competitiva, já que nossas publicações ocorreram com mais rapidez. O diferencial que adotamos ao projeto está no sistema ou na área administrativa, como chamamos; o tempo que deixou de ser gasto com a verificações e análise ou criações de código.

43 As matérias são processadas de forma rápida, prática e com menor possibilidade de erro. Assim, o sistema foi criado com o intuito de facilitar na integração e otimização do conteúdo do site.

Desenvolvimento: Quarta peça

Banco de Dados

Wireframe Login Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Administração do Sistema

Nome Usuário

Dashboard Menu Lateral a esquerda

Gráfico de novas assinaturas da News Letter

Gráfico das enquetes e votos

48 Administração do Sistema

Menu Lateral a esquerda

Nome Usuário

Matéria Adicionar Matéria

Filtros Título Usuário Pesquisar

Tabela de resultado

Administração do Sistema

Menu Lateral a esquerda

Nome Usuário

Nova Matéria Título Rascunho Sim Imagem de Chamada Resumo

Categoria Conteúdo

Salvar

Não

49 Administração do Sistema

Menu Lateral a esquerda

Nome Usuário

Enquete Adicionar Enquete

Filtros Pergunta Pesquisar

Tabela de resultado

Administração do Sistema

Menu Lateral a esquerda

Nova Enquete Pertunta: Tipo de Gráfico: Vincular Matéria: Salvar

Nome Usuário

50 Administração do Sistema

Menu Lateral a esquerda

Nome Usuário

Imagens da Galeria Adicionar Imagem

Tabela de resultado

Administração do Sistema

Menu Lateral a esquerda

Adicionar Imagem Album: Imagem: Descrição:

Salvar

Nome Usuário

51 Administração do Sistema

Menu Lateral a esquerda

Nome Usuário

Assinantes da News Letter Filtros Nome: Email: Pesquisar

Tabela de resultado

Administração do Sistema

Menu Lateral a esquerda

Meu Perfil Nome: Email: Tipo de Usuário:

Mensagem:

Nome Usuário

Layout O layout por ter uma quantidade de detalhes foi impresso a parte para melhor visualização. Agradecemos a compreensão.

Conjunto de Tecnologia

54 No projeto houveram diversas tecnologias utilizadas para seu desenvolvimento em diversos níveis como a produção do site documental, área de administração, produção da vinheta e infográficos animados e interativo, cartaz A3 e podcast.

Software Adobre After Effects Vinheta e Infográficos Animados

Eclipse Programar

Adobe Photoshop

Adobe Illustrator

Edição de Imagens

Pdp, logotipo, infográficos etc.

FL Studio

Narrativa dos Infográficos E Podcast

Criação do banco de dados

Xampp Sistema que roda PHP

Linguagem de Programação A fim de criar as peças, propostas pela faculdade, dentro do projeto fizemos uso de algumas opções primordiais para a qualidade e essencialidade que atendesse ao mesmo.

Projeto Sustentabilidade

57 Devido a demanda da questão da sutentabilidade presente no normativo deste projeto , utilizamos materiais reciclados na confecção de 90% das peças não digitais do projeto interdisciplinar, com a intenção de reduzir o uso de recursos naturais. Dessa forma reduzimos um pouco o impacto ambiental do projeto, pois a produção de papel comum, utiliza principalmente como materia prima a madeira de eucalipto que e consome energia elétrica e cerca de 100.000 litros de água por tonelada de papel produzido. Além de utiliza diversos produtos químicos para o branqueamento e beneficiamento, os quais os subprodutos são descartados e geralmente despejados sem o tratamento adequado.