Post on 06-Jul-2015
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.