Apresenta-se, em seguida, a proposta gráfica para o projecto DeCATouch:

Interface da Aplicação

[Home] - Este será o ecrã inicial (home) que serve de entrada na plataforma e para o qual a aplicação será enviada depois de algum tempo de inactividade. Neste, podemos visualizar informações referentes a actividades do Campus da UA (ex: almoço da cantina, senha actual dos SAC...)

[Home]- Quando existir algum tipo de actividade por parte do utilizador, é-lhe pedido que desenhe um círculo de modo a entrar na plataforma

[Home] - Uma vez desenhado o círculo, o utilizador é presenteado com um ecrã de boas-vindas e um menu geral da plataforma com as áreas de interacção disponíveis (Home, Portefólios, Mapa do Campus).

Este menu, depois de recolhido, pode, a qualquer momento, ser chamado através do gesto circular ou através da técnica de arrasto sobre o mesmo.

 

[Portefólios] - Quando o utilizador entra na área de Portefólios é-lhe dada a opção de filtrar os conteúdos respectivos (NTC, Design, Música, Outros)

[Portefólios][Scroll]- Uma vez na área de Portefólios, é possível ao utilizador alternar entre dois modos de visualização, scroll e shuffle, podendo o utilizador alternar entre estes a qualquer momento através do ícone no canto inferior esquerdo. Começando por explicar o modo scroll: aqui ao utilizador é apresentado, ao longo de uma linha temporal, os vários trabalhos disponíveis para visualização, podendo este arrastar a linha temporal para a esquerda ou para a direita.

[Portefólios][Scroll] - Ao executar um double tab numa das pré-visualizações acima mencionadas, é mostrado ao utilizador o trabalho com mais detalhe (podendo estar no máximo 2 trabalhos a serem visualizados ao mesmo tempo) e o scroll que contém as pré-visualizações passa para segundo plano. O recipiente que contém o projecto tem 2 estados, um primeiro onde é possível ver as informações relativas ao mesmo, onde são disponibilizadas 2 acções (através do uso dos botões e/ou gestos que activem o mesmo evento) a de fechar o projecto e a de "virar" o projecto.

Caso o utilizador "vire" o projecto são-lhe mostrados os comentários efectuados ao mesmo e ficam disponíveis mais 2 acções, a de inserir um comentário no projecto e a de enviar o projecto para um e-mail.

[Portefólios][Scroll] - Caso o utilizador decida comentar ou enviar o projecto é-lhe disponibilizado um teclado virtual acompanhado de um formulário para a acção pretendida.

[Portefólios][Shuffle] - O modo Shuffle tem as mesmas acções base para cada trabalho, sendo que, no entanto, os projectos se apresentam misturados e independentes uns dos outros, sendo a cada um destes permitido alterar a escala, posição e rotação dos mesmos.

[Portefólios][Shuffle] - Neste modo, quando um trabalho atinge uma certa escala, são apresentadas ao utilizador as mesmas acções disponíveis no modo Scroll

[Portefólios][Shuffle] - Tal como acontece no modo Scroll, quando o utilizador decide comentar ou enviar um projecto por e-mail é-lhe apresentado um teclado virtual acompanhado de um formulário para executar a acção pretendida.

[Mapa Campus Ua] - Na área do mapa do Campus é permitido ao utilizador navegar na mesma usando gestos que permitem a rotação, escala, ou arrasto
 

 

Biblioteca de ícones e controlos:

Relativamente à biblioteca de ícones tentámos dar forma gráfica às diversas acções que podem ser efectuadas na aplicação. Temos a destacar o menu principal onde foram usados 3 ícones associados à navegação principal, que são respectivamente o "home" que está associado ao estado inicial da aplicação, o segundo é o icone de projectos que está associado ao logo da UA, pois corresponde à área onde se encontram os projectos do departamento e o último icone é onde se encontra o mapa do campus.

Quanto às acções disponíveis na visualização dos projectos, temos pela seguinte ordem os ícones, de fechar projecto, o "virar" projecto, inserir comentário e enviar o projecto.

Há ainda a referir que temos dois estados de ícone que que se encontram presentes no canto inferior esquerdo, que correspondem ao modo de organização dos projectos na área de portefolio.

Opções Tipográficas:

Optou-se por escolher uma fonte não serifada pois estas encaixam esteticamente no layout do projecto, por serem mais modernas e uma vez que também não temos grandes manchas de texto que obriguem o utilizador  a uma grande capacidade de concentração. Depois de algumas pesquisas e testes efectuados com fontes não serifadas, escolhemos a font DIN no seu formato regular e medium.

Estudos de cor:

Quanto às cores escolhidas, optámos por nos basear no verde da UA, tanto para a aplicação como para o backoffice. No entanto, usámos um tom mais jovial e moderno. Optámos também por usar cores escuras como base da aplicação, de modo a que haja grande contraste entre os conteúdos. Escolhemos também os tons escuros para que a imagem projectada funcione melhor sobre o rosco (tela de projecção). 

 

Estudos de lógotipo:

No que diz respeito aos estudos de lógotipo optamos por associar o nosso produto à imagem da UA e não optar por nenhum logotipo, apesar disso fizemos alguns estudos que se encontram ilustrados na figura em baixo.

Backoffice

 

[Main] - O layout do backoffice segue uma estrutura geral de Header e Footer com duas colunas de tamanho fixo. Optou-se por esta disposição por ser simples e intuitiva permitindo aos utilizadores prestarem mais atenção à área de notificações quando entram na aplicação. O Login, LogOut e Registo estarão ao topo direito alinhados com o extremo das restantes áreas, de largura total de 960 pixeis. As colunas medem 250 e 690 pixeis sendo a mais pequena a da esquerda, já referida anteriormente como contendo as notificações. A área de maiores dimensões será, no fundo, onde toda a exibição de conteúdo aparecerá, ao longo de todas as áreas do backoffice, sendo que, na página principal tem os trabalhos publicados pelo utilizador, seguindo o mesmo esquema como outras listas de trabalhos. O Header contém, ao fundo, o menu principal que irá variar consoante o tipo de utilizador, representou-se, aqui o do professor por ser aquele que mais opções terá neste aspecto. No footer teremos links para áreas úteis para os utilizadores da plataforma web do decatouch, ou seja, outros serviços da UA.

 

[Inserir] - No layout seguinte que pode representar a área de edição e inserção dos trabalhos, pode verificar-se, mais uma vez, a mesma estrutura referida anteriormente, sendo que o footer se ajusta à altura do site ficando sempre a uma distância mínima de 20 pixeis do topo da área anterior.

[Validar] - No écran de visualização do trabalho para validação pode dizer-se que a descrição do mesmo, bem como o seu autor, as unidades curriculares que o publicador preencheu e links para download do ficheiro do trabalho se encontram no espaço restante a 400 pixeis (definidos como a largura máxima da imagem).

 

Biblioteca de ícones e controlos:

Na imagem podem ver-se os diversos tipos de links e ícones presentes no backoffice decatouch tanto no seu estado inicial como em hover (nos que são passíveis de ser clicados), bem como uma breve descrição das características gerais de alguns pormenores do layout. Neste aspecto podemos referir ainda a tentativa de identificação da função dos ícones com os desenhos neles contidos, sendo que o mais complexo neste aspecto foram os ícones de identificação dos tipos de trabalho, da esquerda para a direita, respectivamente: interactivo, música, vídeo, escrito, imagem e web.