AVIDITE ART
plano
executivo
avidite art
Universidade Anhembi Morumbi LAUREATE INTERNATIONAL UNIVERSITIES
INTEGRANTES amanda Hack fernandes Caio Vinicius de Oliveira Beraldi Carolina Negreiros Marileia Destro dos Santos Paula arissa Takagi UNIVERSIDADE ANHEMBI MORUMBI Design Digital 201 6/1
Orientadores: Ricardo A. Bontempo Marcelo Falco
“A ganância insaciável é um dos tristes fenômenos que apressam a autodestruição do homem.”
Sinceros agradecimentos aos nossos professores e orientadores, por todo o apoio.
Claudio Benossi Marcelo Falco de Deus Marly de Menezes MÉrcia DE ASSIS Albuquerque Pedro Camilo Rosa Ricardo Alexandre Bontempo
07
ESTRATÉGIAS DE COMUNICAÇÃO
O PROJETO
13
PROJETO DE INFORMAÇÃO
17
21
PROJETO DE navegação
SUMÁR
PROJETO DE INTERFACE
LINGUAGEM SONORA
31
PROJETO DE INTERAÇÃO
49
CONJUNTO DE TECNOLOGIAS
53
59
O
PROJETO
O
PROJETO O objetivo do nosso projeto foi selecionar setores onde a Art Deco atuou e relacionar com impactos ambientas ao qual esses segmentos causaram e ainda causam no meio ambiente. Escolhemos usar como exemplo o movimento Art Deco pois ele fez grande uso de diversos materiais, muitos aos quais quando extraídos de modo indevido causam grandes problemas ao meio ambiente. Queremos demonstrar o que tem por trás de toda a beleza desses seguimentos, que as vezes a ganância de obter mais lucros acabam afetando de maneira drástica o ecossistema.
09
O
PÚBLICO Nosso público foi definido como pessoas com interesses relacionados à sustentabilidade, ecologia e arquitetura, entre 20 à 35 anos, de ambos os sexos, que utilizam a internet para contribuir com a conscientização dos impactos ambientais. Através de uma pesquisa nas redes sociais, como Facebook e Twitter, notamos que se interessam por páginas como Hypeness, Mater Natura e Catraca Livre, aos quais abordam temas relacionados ao meio ambiente.
10
conceito de
CRIAÇÃO O intuito do nosso projeto foi fazer uma relação entre os segmentos em que a Art Deco atuou e os impactos ambientais. Pois, ao decorrer da pesquisa identificamos que o estilo utilizou diversos materiais em suas concepções, com isso achamos interessante apresentar a contribuição degradativa desses segmentos ao meio ambiente. Para representar nossa idéia optamos por seguir o mesmo ideal do estilo, e assim utilizamos na nossa WebArt ilustrações referentes à objetos e construções Art Deco e através delas apresentamos informações sobre os impactos ambientais.
11
Estratégias de
COMUNICAÇÃO
VÍDEO
CHAMADA Decidimos criar uma vídeo-chamada para apresentar de maneira rápida e direta o que será abordado em nosso projeto, exibindo algumas ilustrações sobre o conteúdo; e ao final da vídeo-chamada convidamos o espectador para acessar nosso site e conhecer mais profundamente sobre o assunto.
15
O
INSTAGRAM Para a divulgação e, também como uma maneira de o usuário interagir, decidimos criar uma conta no Instagram, onde a princípio serão postadas fotos sobre nossa proposta de projeto, e posteriormente serão postadas através da colaboração dos usuários fotos que tenham referência à crítica exposta em nosso trabalho.
Publicamos a vídeo-chamada no instagram para divulgar mais o projeto.
16
PROJETO de
INFORMAÇÃO
as
informações Ao definirmos qual seria nossa proposta, separamos os blocos de informações, decidimos começar o WebArt com uma introdução do que será tratado, em sequência comparamos o Art Deco com outros estilos. Depois abordamos nas páginas seguintes um resumo do estilo seguindo uma linha cronológica e finalizamos dando nosso ponto de vista relacionado a crítica. vídeo introdutório sobre o projeto resumo sobre qual será o assunto tratado na webart.
comparação da art deco com outros estilos. utilizamos um prédio que se modifica conforme o usuário seleciona o estilo para notar as diferenças entre eles.
18
ilustrações interativa das peças art deco Ao ser acessada terá informações sobre a peça, relacionando aos impactos ambientais.
conclusão da crítica texto relacionado ao nosso possicionamento sobre a crítica dos impactos ambientais.
Participação do público Usuário poderá contribuir através do instagram que será vinculado com o site.
19
PROJETO de
NAVEGAÇÃO
O
WIREFRAME Para concepção do site decidimos realizar um wireframe prévio com grids, com o intuito de auxiliar na distribuição do conteúdo, e assim, obter uma melhor navegação para o usuário. PÁGINA INICIAL - animação do logo 310 x 70 px
LOGO 660 px X 660 px
23
PÁGINA 1 - introdução e vídeo 249,5 x 38,5 px CAIXA DE TEXTO 941 X 176 px DecoNeue Bold 36 pt 314,5 x 250,5 px
VIDEO 940 X 210 px
PÁGINA 2 - comparação de estilos arquitetônicos 250 x 60 px
CAIXA DE TEXTO 940 X 170 px DecoNeue Bold 30 pt
389 x 273 px IMAGEM 660 X 324 PX
300 x 645 px
botaotradicional 240 x 70 px
600 x 645 px
botaoultramoderno 240 x 70 px
24
900 x 645 px
botaoartdeco 240 x 70 px
PÁGINA 3 - interiores 842 X 0 px TÍTULODECONEUE EXTRABOLD 60 PT 236 x 42 px
imagemlustre1 370 x 253 px
181 X 130 px
CAIXA DE TEXTO 624 x 169 px DecoNeue Bold 30 pt
168 X 443,5 px
895 X 489 px
imagemmesa1 572 X 509 px 519 x 334 px imagempoltrona1
imagemcomoda 343 x 252.5 px
282,5 x 287 px
PÁGINA 4 - veículos 807 x 0 px 176 x 26 px
189 x 57 px
CAIXA DE TEXTO TÍTULO DECONEUE
EXTRABOLD 60 PT
176 x 101 px
CAIXA DE TEXTO 624 x 134 px DecoNeue Bold 30 pt
imagemaviao 472,5 x 289 px
420,5 x 332,5 px
553,5 x 384,5 px
imagemtrem
347,5 x 447,5 px
420,5 x 332,5 px
imagemmoto
160 x 563,5 imagemcarro px
275,5 x 220,5 px
458,5 px x 192 px
imagemnavio 275,5 x 220,5 px
25
PÁGINA 5 - arquitetura primeira fase 842 X 0 px
176 x 25,5 px
950,5 x 26 px
349 x 101 px
296 x 41 px
CAIXA DE TEXTO TÍTULO DECONEUE EXTRABOLD 60 PT
TÍTULODECONEUE EXTRABOLD 60 PT 236 x 42 px
imagemlustre1 CAIXA DE TEXTO 370 x 253 px
541 x 112,5 px
181 X 130 px
CAIXA DE TEXTO 898 x 181 px DecoNeue Bold 30 pt 624 x 169 px 192 x 774 px DecoNeue Bold 30 pt
imagemempire
688 x 271,5 px
imagemchrysler 357 x 372,5 px
884 x 328,5 px
1066 x 376,5 px
146 x 687 px
168 X 443,5imagemcentral px
imagembanespa 205 x 529 px
572 X 509 px 190 x 427 px imagemmesa1 519 x 334 px imagempoltrona1 282,5 x 287 px
imagemboe 188,5 x 472 px 895 X 489 px imagemradiator
imagemcomoda 206 x 424 px 343 x 252.5 px
PÁGINA 6 -arquitetura 176 x 26 pxT
456,5 x 57 px
CAIXA DE TEXTO TÍTULO DECONEUE
EXTRABOLD 60 PT
176 x 96 px
CAIXA DE TEXTO 915 x 142 px DecoNeue Bold 30 pt
176 x 247 px 748 x 269,5 px 520 x 285,5 px
imagempredioazul imagemprediodourado
464 x 389 px
532,5 x 337,5 px imagemprediodourado 392 x 429 px
26
PÁGINA 5 - IMPACTOS AMBIENTAIS 473 x 57 px
176 x 26 px
CAIXA DE TEXTO TÍTULO DECONEUE EXTRABOLD 60 PT
176 x 96 px
CAIXA DE TEXTO 915 x 169,5 px DecoNeue Bold 30 pt
373,5 x 305,5 px
imagemindustria 780 x 513 px
PÁGINA 8 - interação instagram 189 x 74,5 px
282 x 84,5 px
iconeinstagram 780 x 513 px
189 x 178 px
150 x 150 px
359 x 74 px
CAIXA DE TEXTO TÍTULO DECONEUE EXTRABOLD 60 PT
CAIXA DE TEXTO 944 x 102,5 px DecoNeue Bold 30 pt
150 x 150 px 150 x 150 px
150 x 150 px
PÁGINA oito 0 x 660 px
rodapé cláusula 1280 x 140 px cor: #D2AB66
27
150 x 150 px
150 x 150 px
MAPA DE
NAVEGAÇÃO Definimos que a navegação do site poderá ser feita de duas maneiras, podendo seguir através do botão de transição, assim o usuário irá seguir uma linha cronológica, ou através do menu onde ele decide qual caminho traçar pela navegação.
INDEX ANIMAÇÃO LOGO
BOTÃO TRANSIÇÃO
P. INTRODUÇÃO
SEQUENCIAL
SAUDAÇÃO E VÍDEO
1
INSTAGRAM USUÁRIO
INSTAGRAM DO PROJETO
POST COM HASHTAG
REPOST
MENU LATERAL
INTERAÇÃO INSTAGRAM
8
IMPACTOS AMBIENTAIS
7
ARQUITETURA HORIZONTAL
6
PARTICIPAÇÃO DO USUÁRIO
CONCLUSÃO
ÍCONES USUÁRIO ACESSA QUALQUER PÁG
ILUSTRAÇÕES INTERATIVAS
ARQUITETURA 5 VERTICAL ILUSTRAÇÕES INTERATIVAS
P. ESTILOS ARQ
INTERIORES
VEÍCULOS
COMPARAÇÃO INTERATIVA DE PRÉDIOS
ILUSTRAÇÕES INTERATIVAS 2 INTERFACES
ILUSTRAÇÕES INTERATIVAS
2
3
29
4
PROJETO de
INTERFACE
A
Iconografia Criamos um painel semântico contendo características do movimento, para assim fundamentarmos nossas escolhas de criação. Encontramos grande uso de objetos geométricos, o uso constante da cor dourada e ilustrações que trabalham com contraste de luz.
33
A
Tipografia Optamos por utilizar em todo nosso projeto a família de fonte DecoNeue, escolhemos ela por conter característica Art Deco, não ser uma fonte que dificultaria a leitura pois utilizamos ela em textos pequenos no WebArt e também por ser uma fonte que contém acentos, o que é bem difícil de achar por conta da maioria ser fontes estrangeiras.
DecoNeue ExtraBold foi utilizada na logo, em títulos na WebArt e no vídeo de chamada para o site.
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !„“@§$%&/)=? äöüàáâãåçèéêëñòóôõùúû DecoNeue Bold foi utilizada em textos na WebArt.
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !„“@§$%&/)=? äöüàáâãåçèéêëñòóôõùúû
34
A
Paleta
As cores foram escolhidas a partir do painel semântico, notamos que as cores douradas e azul foram muito utilizadas no estilo artĂstico e para complementar essas duas cores escolhemos o preto.
#D2AB66 C: 1 8% r: 21 0 M: 31% G: 1 71 Y: 70% B: 1 02 K: 0%
#78B2E1
C: 51% r: 1 20 M: 1 8% G: 1 78 Y: 0% B: 225 K: 0%
35
#000000 C: 75% r: 0 M: 68% G: 0 Y: 67% B: 0 K: 90%
O
logotipo Decidimos utilizar as cores preto e o dourado que foram muito utilizadas pelo estilo artístico, e em relação as formas, utilizamos linhas na horizontal e vertical para fazer referência as duas fases da Art Deco. Em relação à crítica, que seria os impactos ambientais, nós utilizamos o prédio Art Deco do Rio De Janeiro, "Central do Brasil", de maneira espelhada, onde o mesmo localizado na parte superior representa o prédio construído pela industrialização, e o na inferior representa o impacto causado por essa construção.
36
A ideia da animação é representar que para a indústria construir seus recursos ela precisa retirar as matérias do meio ambiente, por isso conforme o logo superior é constituído o inferior também é porém do lado oposto e há diferenças entre ambos para aludir aos impactos ambientais.
PARA VER A ANIMAÇÃO ACESSE:
37
AS
Ilustrações O principal objetivo da Art Deco foi o de decorar, assim resolvemos trazer isto para nosso WebArt, por tanto resolvemos vetorizar elementos do movimento criando ilustrações que remetem as características do movimento, como uso de figuras geométricas e trabalhar com contraste de luz.
iNTERIORES
38
39
ARQUITETURA Selecionamos prédios do movimento Art Deco de todo o mundo para vetorizar e criar as ilustrações, optamos que ficassem em projeções isométricas para podermos trabalhar com contraste de luz.
40
41
ícones Para o menu do site decidimos trabalhar com ícones, assim cada ilustração representa o tema abordado na página. introdução
arquitetura mundial
interiores
veículos
arquitetura 1
arquitetura 2
indústria
42
A
INTERFACE Na interface trabalhamos com os próprios objetos e arquitetura do estilo Art D eco e utilizamos um fundo escuro com linhas douradas na vertical e horizontal para aludir as duas fases do estilo, para que o usuário compreenda as caracteristicas do estilo através da identidade visual. Interface 01 - animação logo
43
Interface 2 - página de apresentação
Interface 3 - arquitetura geral
44
Interface 3 - INTERIORES I
Interface 4 - INTERIORES II
45
Interface 4 - VEÍCULOS
Interface 5 - ARQUITETURA VERTICAL
46
Interface 6 - ARQUITETURA HORIZONTAL
Interface 7 - IMPACTO AMBIENTAL
47
Interface 6 - INTERAÇÃO INSTAGRAM
48
LINGUAGEM
SONORA
LINGUAGEM
SONORA
Escolhemos a música de Artie Shaw chamada "Blues" para ser utilizada como backtrack de nosso site, por conta do estilo Art Deco também ter sido conhecido como "Jazz-Deco". Para isso, optamos utilizar um Jazz com uma melodia tranquila e relaxante, para não atrapalhar a leitura e a observação do nosso usuário no decorrer do site. Utilizamos o software "Adobe Audition CS6" para cortar e fazer um looping na música original para que ela permaneça constantemente durante o site e que não demonstre uma pausa, ou interrupção ao fim dela. PARA ouvir a música Acesse:
51
PROJETO de
INTERAÇÃO
A
INTERAÇÃO Para a divulgação e, também como uma maneira de o usuário interagir, decidimos criar uma conta no Instagram, onde a princípio serão postadas fotos sobre nossa proposta de projeto, e posteriormente serão postadas através da colaboração dos usuários fotos que tenham referência à crítica exposta em nosso trabalho. TRANSIÇÕES As transições das páginas foram feitas para representar as duas fases do estilo Art Deco, conhecidas como vertical e horizontal, realizadas com JQuery e CSS3.
55
INTERAÇÃO COM OS OBJETOS Em todas as páginas terão objetos referentes ao estilo Art Deco, os quais o usuário poderá clicar para obter informações sobre o objeto e também relacionado à crítica. exemplo ao passar o mouse o objeto muda de cor para que o usuário identifique que pode ser clicado
ao ser clicado abre uma caixa com as informações.
56
INstagram Utilizamos uma interação com o Instagram para que o usuário possa enviar imagens relacionadas aos impactos ambientais. exemplo
ao postar a foto o usuario deverá marcar nosso instagram para que assim possamos analisar o poste, assim repostar e aparecer no site.
57
conjunto de
TECNOLOGIAS
conjunto de
TECNOLOGIAS Para criarmos a vídeo-chamada e a vinheta de animação do logotipo utilizamos o Adobe AFTER EFFECTS CC2015, pois nos dá a liberdade de manusear efeitos e movimentos sobre os objetos utilizados na produção. Para a vetorização das ilustrações e diagramação do plano executivo utilizamos o Adobe ILLUSTRATOR CC2015, pois achamos ser a melhor ferramenta e a de maior praticidade para a realização desses processos. Para a criação do site utilizamos o Adobe DREAMWEAVER CS6 por ser uma excelente ferramenta de marcação.
Utilizamos o Adobe AUDITION CC 2015 para criarmos o looping da música utilizada no site.
61
Foi utilizado o HTML5 para organizar a estrutura semântica de todas as nossas páginas.
Para criar as interfaces, definindo aparência, transições, animações e determinando a adaptação do site em qualquer dispositivo, utilizamos o CSS3. O JAVASCRIPT foi aplicado em todas as interfaces de nossas páginas, sendo utilizado para efetuar as transições e efeitos. Foi utilizado o JQUERY para executar funções da nossa interatividade junto com o JavaScript, fazendo com que todas as interfaces de nossa página efetuassem as transições e efeitos presentes no menu e nas ilustrações do site. Utilizamos o PROCESSING para criar a animação do logotipo do nosso projeto junto com o JavaScript.
62