posts recentes

arquivos

tags

Sexta-feira, 30 de Março de 2012
#entrega_04 - especificação gráfica

 

Para a realização da especificação gráfica e, em consequência do que foi referido no post anterior, foram realizados diversos estudos. Depois de definido o nome e de acordadas as linhas base, prosseguimos para a realização dos trabalhos que apresentamos em seguida.

Sendo que já tinhamos decidido que o nosso sistema cromático se iria aproximar ao da Universidade de Aveiro, surge então o primeiro desafio - a criação de uma marca para o projeto.

Para tal, foram realizados diversos estudos que passamos apresentar.

estudo_logo

A nossa escolha recai sobre o logotipo apresentado no canto superior esquerdo, por sermos adeptos da simplicidade e por acharmos que seria o que apresentava maior potencial. No manual de identidade encontram-se mais informações sobre o mesmo.

Depois de reunirmos algum material gráfico e antes de partirmos para a concretização do restante trabalho pedido para esta entrega, testámos esse mesmo material no formato em que este será, essencialmente, apresentado - projeção. Percebemos, assim, quais as limitações do mesmo, quer a nível cromático como a nível dimensional. 

Passamos apresentar o manual de identidade concebido para a nossa marca - UAW.

 


 

 

 Download Manual de identidade - versão PDF 


Outro aspeto que tivemos em conta, foram as dimensões e características do local onde vai ser efetuada a projeção. O seguinte esquema representa a "parede" que dará corpo à nossa aplicação.

dimensoes_parede

Tendo em conta as características da navegabilidade numa interface de interação natural, onde a sensibilidade do cursor controlado pelo gesto é, bastante, diferente do comum, foi necessário criar uma grelha que permitisse a inclusão de áreas de grande dimensão para a introdução das zonas interativas. Assim, depois de alguns testes chegámos à grelha representada no documento seguinte.

grelha

grelha2

 

Download da grelha - versão PDF


Como já foi referido anteriormente, o cursor passa a ter um papel fundamental neste tipo de aplicação, uma vez que é necessário dar ao utilizador um feedback bastante concreto e imediato relativamente às suas ações. Assim, nada mais obvio do que representar a mão do utilizador com um ícone de uma mão com uma cor e contorno que lhe conferem destaque para ser facilmente identificado.

cursor_mao

O cursor apresentado apenas terá dois estados: o normal e o de seleção, sendo que, encontramos duas soluções para a concretização do estado de seleção. 

Solução 1: A representação do tempo de seleção é representada por um circulo que se vai preenchendo com o passar do tempo.

cursor pensativo

 

Solução 2: Posteriormente, surgiu a ideia de aproveitar uma das áreas que compõe o layout que desenhamos como "barra de progresso" para ação seleção.

cursor_pensativo_2

 

Optaremos pela que se revelar mais eficiente aquando da realização dos primeiros testes da aplicação.

 

Relativamente ao layout dos ecrãs que compõe a aplicação, passamos a explicar, de forma sucinta, a funcionalidade dos principais componentes e a navegabilidade.

O logotipo inserido no canto superior esquerdo estará presente em todos os ecrãs, excepto no ecrã de galeria de fotografias e jogos, e possibilitará ao utilizador regressar para o ecra inicial, apresentado em seguida. O mesmo acontece com a barra de menu que contém as três áreas principais da aplicação: a cidade de aveiro, o campus universitário e a ua antigamente cronologia. Assim que o utilizador seleciona ou activa uma destas áreas, esta altera o seu aspeto, cobrindo-se de uma textura de linhas diagonais que serve para indicar ao utilizador em que área se encontra.

 

 

menu_logo

 

 

Assim que o utlizador avança um nível na aplicação, terá sempre a opção de "voltar" ao ponto anterior, através do botão voltar. Este botão quando selecionado altera a sua cor para verde, sendo assim o seu estado hover

 

botao_voltar

 

Na zona inferior à área de conteúdos, situa-se a feedbox, onde será apresentado o caminho que o utilizador está a percorrer na aplicação. A área que se encontra ativa está destacada do restante caminho pela cor branca.

 

feed_box

 

Com o intuito de simplificar a aprendizagem dos movimentos-chave da navegação da aplicação, optámos por manter sempre presente uma legenda/descrição dos gestos a utilizar. O gesto em execução aparece selecionado como ilustra a seguinte figura.

 

sistema_ajuda

 

Este ecrã é demonstrado assim que o utilizador ativa a aplicação, através de um gesto pré-definido. A frase apresentada será de incentivo ao uso deste tipo de aplicação. 

 

Este ecrã representa a forma como serão apresentados os diferentes pontos de interesse, neste caso relativamene ao campus. Cada fotografia funciona como botão de acesso à consola de opções para apresentação do respetivo conteúdo. Ao ser selecionada, a fotografia aparece focada e o nome do POI aparece na feedbox, tal como ilustra a figura.

ecra2

 

A imagem seguinte apresenta a consola referida anteriormente que tem as seguintes opções: galeria de fotografias, info, sabias que e permite regressar ao ecrã anterior.

consola_opçoes

 

Semelhante ao ecrã anterior, no entanto, a consola é relativa às opções dos jogos.

consola jogos

 

 

Em todos os ecrãs informativos será apresentado uma breve descrição, bem como contactos e outras informações mais relevantes.

info

 

Como já foi explicado na grelha, o ecrã da galeria de fotografias sofrerá de uma animação que possibilitará a expansão da área de conteúdos, com o objetivo de aumentar o tamanho da fotografia apresentada. As duas setas em cada uma das laterais - esquerda e direita - funcionam como botões de acesso à fotografia anterior/seguinte, respetivamente.

galeria_fotos

 

Recorreu-se à utilização de uma cronologia para elaborar o ecrã relativo à "ua antigamente", dividida por décadas que se desdobram em anos e que dão acesso aos conteúdos mais relevantes desse período.

timeline

 

 Download do layout - versão PDF

 

Ao realizar este estudo, percebemos a complexidade que envolve o desenho do layout para uma aplicação de interação natural, não só pelo paradigma de interação mas também, pelo formato de grande escala e neste caso, por se tratar de uma projeção. Estamos conscientes de que poderá surgir a necessidade de alterar algumas das componentes que aqui apresentamos mas vamos aguardar pelos testes de usabilidade para ver se existirá áreas criticas no que diz respeito à interação. 

Por fim, tivemos a oportunidade de experimentar a projeção de todo o material que aqui apresentamos e o resultado superou as expectativas.

 

Referências

http://abduzeedo.com/logo-design-feathers

http://abduzeedo.com/design-process-starting-design-project

http://www.logodesignlove.com/best-logo-design-resources

http://identitydesigned.com/odooproject/

http://www.thinkingwithtype.com/

http://hellohappy.org/beautiful-web-type/

http://webdesignledger.com/

http://www.google.com/webfonts

https://typekit.com/

http://kuler.adobe.com/



publicado por carlota-silva às 19:49
editado por joao-amorim em 12/04/2012 às 17:11
link do post | comentar | adicionar aos favoritos |

mais sobre nós

 

Junho 2012
Dom
Seg
Ter
Qua
Qui
Sex
Sab

1
2

3
4
5
6
7
8
9

10
11
12
14
15
16

17
18
19
20
21
22
23

24
25
26
27
28
29
30