Universidade Anhembi Morumbi Design Digital MB3

Transcrição

1

2 Universidade Anhembi Morumbi Design Digital MB3 FELIPE GIORDANO FERNANDO THOMÉ GABRIEL OLIVEIRA GIOVANNA ZANETTIM PITTER MARQUES RODRIGO CHISTÉ TOMMY KEPPK São Paulo 2010/1

3 Introdução A partir do tema Design, Arte e Tecnologia, foi criada a proposta de projeto de desenvolver um site experimental interativo, tomando por base os conceitos do artista Chico MacMurtrie, trazendo-os para uma aplicação hipermidiática, e assim desenvolver de maneira autoral algo criativo e artístico. Vamos tomar alguns conceitos base que irão então nortear o desenvolvimento desse projeto. Este PDP tem como finalidade demonstrar o conceito de projeto, as tecnologias utilizadas, e as etapas de desenvolvimento do projeto, incluindo também nosso cronograma...

4 Conceito de Criação Partindo das obras de Chico MacMurtrie, levantamos o conceito de Antropomorfismo, a atribuição de características ou aspectos humanos a, no nosso caso, robôs, nosso site irá discutir como a humanidade se esculpi com a tecnologia, aonde, através de um experimento o usuário irá ter a visão desse avatar (personagem), e por meio de interações que têm em conta processos mentais como: percepção, memória, decisão e reações motoras bem como sua interferência nas relações entre humanos e outros elementos dos sistemas (HOEZEL, 2004, apud MEIRELLES, 2009, p.17), ele irá em busca de descobrir o que esse avatar realmente é, um homem ou uma máquina (robô). Neste ponto, o usuário perceberá que ele tem características de máquina, devido sua interface, a visão que ele terá do ambiente, e algumas de suas ações, porém ele perceberá que possui sentimentos, uma característica desconhecida dos robôs humanóides, e se o usuário conseguir de forma exploratória interagir com todas essas experiências, ele poderá descobrir o que realmente é aquele experimento. Refletindo o que podemos nos tornar moldado por tanta tecnologia, esta aventura se desenvolvera num ambiente que retratara o próprio processo de criação desse experimento, retomando assim a questão do design e suas etapas de projeto.

5 Referência Iconográfica Para a criação dos elementos do website, além das fotografias de Chico MacMutrie, foi realizada uma pesquisa iconográfica de cenários para a interface do site. Fœtus to Man: Growing, raining tree Totemobile Mechanical Mural Inflatable Architectural Growth Imagens retiradas do site

6 As imagens abaixo serviram também de referência para estudo de layout e cores para nosso projeto. A primeira imagem apresenta o estudo de cores, formas e humanos artificiais que será utilizada no inter. As 3 imagens seguintes serviram de base para o layout da interface principal, ou seja a sala de observação e para a disposição de puzzles. AmalgaMATE Champion skating rink Sala de Cinema Cena do jogo portal

7 Paleta de Cores Tipografia Foi escolhida a família tipográfica Gunship Condensed para os títulos pois ela remete a tecnologia porém de uma forma moderna e meio orgânica. A escolha da família tipográfica Walkway Rounded, também foi por seu aspecto tecnologico e orgânico e possuir maior legibilidade em textos corridos. Para o logotipo foi utilizada a fonte Hybrid por também trabalhar com os dois aspectos citados acima. Gunship Condensed ABC-123.!@ Walkway Rounded ABC-123.!@

8 Proposta de Layout Estudos elaborados para a criação do layout da interface do website. Concept do login inicial do site feito por Pitter Marques. Primeiro concept de sala de observação feito pelo Pitter Marques. No projeto desenvolvido pelo grupo, a visão do usuário será em primeira pessoa com um HUD na frente. O HUD funciona da seguinte forma..., quando o usuário aproxima o mouse das bordas o HUD se direciona para os cantos da tela.

9 Concept art da interface principal sem os puzzles só estudando cores e formas. Sketch do gerador, um dos puzzles, a idéia do puzzle é estimular a memória do usuário. O gerador terá uma esfera em que dentro dela será gerado um "buraco negro" daonde será captada a energia. O anel em volta seria um mini acelerador de partículas, o que dará início ao 'buraco negro". A estrutura a esquerda é a estrutura final do gerador em que se localiza dois vidros mostrando a capitação da energia. Sketch do puzzle de percepção. A idéia aqui é apresentar uma bancada de vidro em que através de um controle virtual holográfico o usuário será capaz de selecionar objetos. Terá um protótipo de uma mão meio robótica meio humana,, que através de um laser poderá analisar as "informações" presentes em um cérebro.

10 Sketch de objetos. Apresentação do acessório de visão.., o lado externo do HUD. Uma pulseira para ser colocada em nosso "avatar" O recipiente dos espiritos criados... para o puzzle de ação e reação., em que as ações dos usuário reflete no espírito que ele formará no final do puzzle. Finalmente na esquerda, o painel, em formato de DNA que vai ser inserido o código.. para liberar o usuário para a animação final.. Esse sketch representa a saida que o avatar do usuário terá após abrir a porta... final. Ele vai passar por um corredor, sair por outro tipo de porta e acabar em uma plataforma em que encontrará uma produção em massa de humanos artificiais assim como ele.

11 proposta do blog

12 Mapa do Site O website iniciará com uma tela de identificação... Essa tela enquanto está escaneando o usuário, entra em pânico e começa uma interfêrencia. O processo de identificação se reinicia e o usuário terá que "logar" no sistema com sua senha localizada na primeira tela de identificação. Após o '"login" o usuário chega na tela inicial do site, uma espécie de sala de observação em que ele estará acordando e a visão geral será em primeira pessoa. Será possível explorar o ambiente até o usuário dar de cara com os puzzles localizados no ambiente.. Os puzzles exploram a percepção, a ação e reação, memória, decisão e imaginação. Conforme a performace do usuário diante os puzzles, ele vai adquirindo números que ao final de tudo irá gerar uma sequência numérica. A idéia é imergir o expectador e deixar a dúvida se ele é um ser humano ou robótico durante o processo. Após juntar os números o usuário terá que colocar a sequência no painel final que apresenta um formato de DNA e cairá na animação final em que encontrará um jogo de cameras que revelará uma produção em massa de humanos artificiais e finalmente mostrará o usuário como é sua verdadeira aparência. O fato dele ser um humano artifícial passa ao usuário a mensagem de como a humanidade se esculpi com a tecnologia.

13 Diagrama de Interação Página de loading, junto a animação de estática Página principal _ Sala de Observação Puzzle da Imaginação Puzzle da Ação e Reação Puzzle da Decisão Puzzle da Percepção Painel de controle Página final. Animação dos androids

14 Processos e Linguagem Técnologicas Os recursos utilizados pelo grupo na produção das peças foram os softwares:: Adobe Photoshop usado no tratamento, criação de alguns elementos e produção dos layouts das páginas, capa do PDP, painel A2 e blog. Adobe Iillustrator usado no processo de vetorização das peças gráficas. Adobe Indesign para a diagramação do PDP. Adobe Flash usado na produção do projeto final, animações e interatividade. Sound Forge para a edição de efeitos sonoros.