Projecto da Disciplina de Projecto 3º Ano NTC
pesquisar neste blog
posts recentes

Entrega final, wooo-hooooo!

Testes de Interacção dos Docentes e Usabilidade da Mesa

Entrega Versão Beta

testes versao beta

Actualização das funcionalidades DeCATouch

Lista de bugs protótipo (código, funcionalidades, layout)

Módulos a desenvolver na versão beta

Testes de Interacção dos Docentes

Protótipo de Alta Fidelidade agora com lente

Entrega de Protótipo de Alta Fidelidade

arquivos

Julho 2010

Junho 2010

Maio 2010

Abril 2010

Março 2010

Fevereiro 2010

Segunda-feira, 19 de Abril de 2010
Entrega da Especificação Gráfica

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

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

[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.

 Bem Vindo

[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 - Filtros

[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

[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]- View

[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][Scroll] - Form

[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]

[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] - View

[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.

[Portefólios][Shuffle] - Form

[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
[Mapa Campus] 

 

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.

 

Backoffice - Main

[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.

Backoffice Inserir Projecto

[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).

Backoffice Validar Trabalho

 

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. 

Backoffice Biblioteca de Icons

 


tags: , , ,

publicado por dinisadriano às 23:24

4

De carlossantos a 19 de Abril de 2010 às 23:50
Parabéns pelo vosso trabalho, que me parece de muito boa qualidade, e parabéns também pela forma cuidada com que escreveram e apresentaram este post.

Na minha opinião, é preocupante como frequentemente, algumas regras básicas da comunicação, são esquecidas na apresentação dos trabalhos produzidos.

Não é o vosso caso


De jorge-braz a 21 de Abril de 2010 às 22:56
Concordo plenamente com o Carlos!

Primeiro parabéns pelo conteúdo do trabalho e em segundo parabéns pela forma.
Texto, imagem e todo o conteúdo no corpo do post. Não tenho que andar a saltar para pdfs ou widgets de flash desnecessárias.
Isto sim é uma boa forma de públicar conteúdos e gerar conhecimento que será indexado pelos motores de busca e poderá ajuda/inspirar visitantes de dentro e de fora da nossa universidade!

Força aí, vamos lá ver coisas a mexer


De pamado a 27 de Abril de 2010 às 00:35
Era porreiro poder ter uma versão compilada em PDF... o sapo não gosta da minha ligação (da sapo?!) cá de casa. Não estou a conseguir ver as imagens...

Espero por amanhã...

Repito os parabéns pelo post. Estruturado e eficaz!
Continuação de bom trabalho,
Pedro


De dinisadriano a 27 de Abril de 2010 às 20:24
O problema não era da sua ligação, mas sim do serviço de fotos que esteve durante o dia de ontem algum tempo em baixo. Agora já deve conseguir ver as imagens sem problemas :)


Comentar post

mais sobre mim
Julho 2010
Dom
Seg
Ter
Qua
Qui
Sex
Sab

1
2
3

4
5
6
7
8
9
10

11
13
14
15
16
17

18
19
20
21
22
23
24

25
26
27
28
29
30
31


tags

todas as tags

subscrever feeds

RSSPosts

RSSComentários

RSSComentários do post