Dados Pessoais

Daniel Caceiro AversariLara Hernandes de OliveiraMayra Cristina de Araujo GomesNathalia Akemi Habiro

Design Digital - Na3 2008/2

SumarioConceito de Criação

Iconografia

Paleta

Tipografia

Mapa de Conteúdo

Layouts

Diagrama Diagrama

Processos

Público Alvo

9

10

13

15

16

19

2121

23

25

9

Conceito de Criacao

Para a elaboração do projeto, tomamos como base o que pode

ser absorvido em nossa pesquisa teórica.

Absorvemos as idéias da Arte Conceitual em expressar uma

mensagem, fazendo com que o interator dê sua própria inter-

pretação, não valorizando tanto a obra como objeto.

Outro de nossos objetos de estudo foi a Arte Transgênica, a

qual decidimos passar para o design de uma forma diferente,

onde a manipulação feita pelo usuário irá levar a discussão dos

limites, neste caso físicos e estruturais,

Com isso em mente, temos como objetivo discutir os limites do Com isso em mente, temos como objetivo discutir os limites do

Design, onde com um site experimental de Hípermídia, colo-

caremos o usuário em situações onde seus dados serão ma-

nipulados, limites estabelecidos antes por janelas que deixarão

de existir, e a possibilidade do usuário interferir no fluxo de

animações e formas.

Iconografia

10

Fontes:http://ebsco.smartimagebase.com/

http://www.coral-lentes.com.br/

www.3dluvr.com/rogueldr/tutorials/eye/eyes.html

Iconografia

Iconografia

13

RGB: 45, 38, 15

HEX: #2d260fRGB: 248, 7, 7

HEX: #f80707

RGB: 58, 167, 25

HEX: #3aa719

RGB: 41, 40, 59

HEX: #29283b

RGB: 255, 252, 0

HEX: #fffc00

RGB: 249, 251, 248

HEX: #f9fbf8

Para este projeto utilizamos uma paleta de

cores bastante variada, abrangindo desde o

cenário, um esgoto, às características principais

do olho, como o globo ocular, a púpila.

Também utilizamos diversas outras cores devido Também utilizamos diversas outras cores devido

ao objetivo de trabalhar a interação do usuário

com as cores e formas, fazendo com que

dessa forma chamasse maior atenção.

15

Tipografia Utilizada

ABCDEFGHIabcdefghijklmnopqrstu1234567890

ABCDEFGHI

abcdefghijklmnopqrstu

1234567890

Para o desenvolvimento, selecionamos 2 fontes bastante

distintas.

Nos títulos foi utilizada a fonte Broken Planewing, devido às

suas características mais estilizadas, se adequando a situa-

ção proposta tanto no site experimental como no PDP.

Para os textos explicativos, foi selecionada a fonte Vrinda,

por ter uma grande legibilidade devido ao seu formato e ao

espaçamento padrão entre os caracteres.

Mapa de Conteudo

Ao carregar o site será exibida uma pequena animação com um pendulo de

Newton, no qual as bolinhas serão substituídas por olhos.

A entrada do site apresentará uma animação com o olho visto de perto pis-

cando. Ao ser “cutucado” pelo clique do usuário rolará para trás chegando á

um banheiro, onde descerá pelo ralo. O usuário tem a opção de pular essa

introdução.

A partir deste momento o usuário estará em nossa interface de navegação. O

cenário é um esgoto escuro e o olho que chegou pelo ralo é o meio de in-

teração do usuário com o site. Neste esgoto há certos pontos luminosos, nos

quais olho pode ser conectado para que seja exibido o conteúdo. Em cada

ponto de conexão acontece uma animação diferente com o olho e em seguida

o conteúdo chega pelo cano e passa boiando na correnteza do esgoto. O

usuário tem a opção de clicar e vê-lo ou deixá-lo ir embora.

12

3

16

Mapa de Conteudo

O olho é atirado para o outro lado da parede e desce escorrendo. Logo em

seguida duas fitas, como o DNA, descem pelo cano. Se abertas pelo usuário,

as fitas formarão um caminho no qual vários pequenos olhos passarão. A

direção do movimento dos olhos pode ser alterada pelo usuário. A primeira fita

é colorida e os olhos também, já na segunda, os olhos formam uma mon-

tanha e tudo é preto e branco. O principal objetivo é criar uma discussão de

espaço e cores no site. Outras interpretações dependem exclusivamente do in-

terator, como na arte conceitual.

O olho adormece e a tela fica toda escura. Neste caso, o usuário não teve a

opção de pegar o conteúdo da correnteza, a tela simplesmente abre, “obrig-

ando-o” a assisti-la, mas tem a possibilidade de fechá-la. A nova tela é um

desenho deformado de um olho separado por formas que emitem sons difer-

entes. Há uma musica instrumental inicial, o usuário pode acrescentar sons a

ela. Alguns sons serão agradáveis porem outros muito incômodos, esta

definição dependerá do usuário.

Pontos de Conexão:

a

b

DNA

SONS

Mapa de Conteudo

O Olho quica pela tela, e em determinado ponto se choca com algum el-

emento da tela. Ao se chocar, cai uma tela com a seguinte pergunta: Existe

limite para a arte?

O usuário terá a possibilidade de responder esta pergunta em um campo, e

ao clicar em enviar esta mensagem enviada será manipulada resultando em

uma frase praticamente contrariando a opinião do usuário, demonstrando que

tudo que está online pode ser manipulado, mesmo sem autorização do

usuário.

O olho afundará na água, sobrando apenas algumas bolhas. De dentro de

uma desta bolha

Será a área que seguirá um padrão mais tradicional, contendo os detalhes

do grupo, da produção

Pontos de Conexão:

c

d

QUESTÂO

SOBRE

Loading

19Intertface principal

Entrada do site

Bons Sons?

Layouts

Layouts

DNA, o espaço

Para a criação do site foi escolhido um

processo de navegação bem simples e

intuitiva.

Porém mesmo sendo bastante simples, Porém mesmo sendo bastante simples,

segue um meio não-linear, fazendo com

que o usuário possa alternar entre o

conteúdo da forma que quiser tornando o

site único a cada vez que se visita.

Item de

Navegação

Item de

Navegação

Item de

Navegação

Item de

Navegação

Sobre Nós

Questão:

Existe limite p/ Design?

Cores:

DNA e Olhos Caindo

Manipulação de Sons Loading

Anim

ação de Entrada

Diagrama de Navegacao

21

Processos e Linguagem Tecnologica

Para ilustração do olho

Para ilustrações

Manipulação com XML e integração com PHP

Para edição de som

Envio de arquivos para o servidor online

Para as animações e programação em Action Script

23

25

Publico alvo

O site tem como objevo angir jovens e pessoas engajadas no universo das artese do design. Por isso, optamos portrabalhar com uma navegação conceitual enão linear. O conteúdo tem movimento emuita interação, um grande atravo aosjjovens.