posts recentes

arquivos

tags

participar

links

Sexta-feira, 29 de Abril de 2011
Ponto de situação

 Estado corrente do projecto:

A homepage já está praticamente completa. Ou seja, a nível de layout está terminada, apenas faltam uns pequenos ajustes no slider e preencher a BD para alimentar os conteúdos do site.

Outros pormenores:

Para já é tudo. Vamos postando mais alterações/pormenores que achamos relevantes.

 

Para terimnar deixamos aqui um agradecimento ao grupo virtUA pela dica sobre um ad-on do Firefox :)




Quarta-feira, 27 de Abril de 2011
Aula #16 - Abertura do novo módulo » Protótipo de alta fidelidade

Saudações. Parecendo que não, ainda estamos vivos!

Como tal, hoje tivemos a aula de introdução ao novo módulo, o protótipo de alta fidelidade. Os objectivos para este módulo são essencialmente experimentar e testar as principais funcionalidades e interface, bem como o uso das aplicações. Apenas de salientar que prototipar não implica desenvolver todos os detalhes das aplicações: Devido a este facto vamos fazer um protótipo em T, dando prioridade ao upload de fotos e sua descrição/georreferenciação e ao mapa/timeline, que serão as tarefas mais trabalhosas e com mais incerteza técnica. As restantes tarefas teroicamente serão mais simples, portanto deixaremos para o próximo módulo. Não nos compromentemos imediatamente a concluir o perfil e a área de comentários às fotografias, mas caso fiquem resolvidas as nossas prioridades mais cedo que esperamos, avançamos logo para estas últimas. Como dito e pedido na aula, fica aqui o mapa de navegação com o que nos compromentemos a prototipar:

 




Sábado, 16 de Abril de 2011
Packaging do Manual de Identidade Visual

Só por curiosidade (para quem não viu e gostava de ver :] ), aqui ficam algumas fotografias de pormenores do packaging  do Manual de Identidade Visual, desenvolvido para o logótipo FIND MEMORIES  a utilizar em Projeto.

 

 

 

 

 

 

 

 

 




Sexta-feira, 15 de Abril de 2011
Entrega TP04 | Especificação técnica e gráfica

Boas!

Esta entrega consiste nas características que a implementação do sistema deverá apresentar, e é o módulo onde o ambiente e linguagens a utilizar durante o desenvolvimento devem ficar completa e definitivamente definido. Isto no que diz respeito à especificação técnica.

Quanto à especificação gráfica, tivemos que estudar a imagem da marca: estudos gráfico, cromático, tipográfico, de interfaces e de interacção.


ESPECIFICAÇÃO TÉCNICA

Modelo / Arquitectura do Sistema

Representação das relações entre as diferentes componentes (software e hardware)


Começamos então pela arquitectura de alto nível:


Na imagem que se segue apresentamos a arquitectura de baixo nível:



Mapa de navegação

Diferentes caminhos que o utilizador pode percorrer e áreas associadas a cada funcionalidade

 


Fluxogramas das principais funcionalidades

Representa os processos

Fluxogramas.pdf

 

Modelo de base de dados

Define a forma como os dados são guardados, organizados, manipulados e relacionados

 

Base de dados (rar): FindMemories_(Schema_-_memoriasAveiro).rar

Um preview da base de dados:

 

 

ESPECIFICAÇÃO GRÁFICA

Nome /  Conceito

Verdade seja dita que encontrar um nome alternativo para o projecto não foi tarefa fácil. Partimos de "Memórias de Aveiro", nome original do projecto, e aventuramo-nos então numa jornada à procura de um nome novo. Como tal, começamos a "disparar ideias" e esboçamos um mindmap:

 Findos os estudos, surgiu então "a luz", passadas bastantes tentativas fracassadas:

FINDMEMORIES

O nome utilizado remete para a essência da plataforma. Esta possibilita à comunidade a partilha e georreferenciação de fotografias, que retratem a evolução temporal de um dado espaço urbano. O principal objectivo da plataforma é encontrar memórias, facto que justifica o nome dado à mesma.

As fotografias partilhadas no FindMemories deverão estimular e avivar a memória, o que se traduzirá em recordações. Optou-se por utilizar o idioma em inglês, dado que permitirá uma maior facilidade na expansão a nível internacional.

 

Logótipo

Aqui estão os primeiros estudos/rascunhos do logótipo:

 

Na sequência destes estudos chegamos a uma versão final do logótipo (real e monocromático), bem como a sua versão complementar, que servirá também de favicon.

 

E o porquê do logotipo ser laranja [#EE3E24]?

A escolha da cor deve-se ao facto de ser vibrante, forte, jovem, lúcida, amigável, confortável, libertadora, enérgica. Qualidades que reflectem os valores e objectivos da marca. A nível técnico, por ser uma cor quente, realça a representação da informação e melhora alguns aspectos cognitivos, tais como a eficiência do olhar, que faz perdurar na nossa mente a mancha de cor visualizada. Esta também está associada ao desenvolvimento intelectual e à vitalidade.

 

De seguida estão presentes as reduções de escala e a área de protecção do logótipo

 

 

Estas e outras informações encontram-se no manual de identidade

Open publication - Free publishing - More identidade


Estudo da grelha (goteiras, baseline grid, micro e macro base units)

Para a construção da grelha dividiu-se a página em 9 grandes colunas (com 100 px cada), 8 goteiras (de 10px) e uma margem de 44px, ou seja, 22px à esquerda e outros tantos à direita. Isto resulta numa área útil de 980px, uma área relativamente extensa, que é o que o projecto precisa, devido ao uso de mapas: quanto mais "espaço", mais área de visualização haverá; e resulta numas margens com espaço suficiente para a scrollbar, sem desformatar ou sobrepor o layout.

 

Composição de ecrãs únicos

Em relação ao layout, é de design minimalista, clean, à base de linhas rectas (KISS - Keep It Simple  [http://pt.wikipedia.org/wiki/Keep_It_Simple]  )

 

 

Open publication - Free publishing - More estudo

 

PDF: bruno-brandao.com/pdf/estudo_grelha.pdf

 

Quanto aos ecrãs, apenas um ponto a referir: não respeitamos nem seguimos cegamente a grelha, pois há conteúdos que terminam a meio de uma macro unidade.

 

“ The grid system is an aid, not a guarantee.
It permits a number of possible uses and each
designer can look for a solution appropriate to his
personal style. But one must learn how to use the
grid; it is an art that requires practice. ”
Josef Müller-Brockmann

          http://www.thegridsystem.org/

 

Biblioteca dos estados de ícones e controlos

Relativamente aos controlos, o seu estudo só faz sentido se, efectivamente, forem outros que não os "por defeito". Então, visto que serão utilizados os controlos por defeito, não foi realizado o seu estudo.

Quanto aos ícones, aqui estão os que são usados no website:

Todos os ícones, à excepção do primeiro (o mapa), serão utilizados como botões.

De referir ainda que não serão alterados os seus estados, isto é, mesmo em mouseover, os ícones não se alteram.

 

Especificações cromáticas

Em primeiro lugar, aqui revelamos a palete do nosso site, onde "brincamos" com cinzentos e o laranja do logótipo, para contrastar e não tornar a aplicação monótona.

 

Apresentamos ainda o estudo cromático, com as cores utilizadas na plataforma, com a respectiva transparência (a 50%), bem como as cores relativas às mensagens de feedback ao utilizador.

 

Especificações tipográficas

Será utilizada a tipografia Arial. Em primeiro lugar porque é um tipo de letra sem serifa, o que proporciona  uma melhor leitura em ecrã. Em segundo lugar porque está de acordo como a restante linha gráfica. Segundo o typetester.org (aplicação para comparar simultaneamente vários tipos de letra) é o tipo de letra mais  requisitado e utilizado pela comunidade.

É ainda uma fonte condensada, ou seja, cumpre os requisitos fundamentais para a plataforma, dado que as zonas de espaço disponíveis para colocar informação são reduzidas. A Arial permite uma fácil leitura e é familiar a todos os utilizadores, até porque é uma fonte de sistema.

 

Para concluir

Podemos concluir com convicção que a presente entrega foi extremamente importante para a próxima fase que se aproxima, na medida em que contribuirá para a continuação da elaboração do nosso projecto, a começar já pelo protótipo. Nesta entrega foram trabalhados e esquematizados todos os detalhes da especificação técnica e gráfica, o que fez com que ficassem delineados o ambiente e linguagens a utilizar, tal como a imagem da marca. Neste sentido foi desenvolvido o layout do website com as respectivas grelhas, goteiras, medidas, entre outras especificações enumeradas anteriormente ao longo do post.
Estes estudos ajudaram o grupo a perceber a necessidade das especificações, pois assim a margem para erro será diminuta, nomeadamente ao nível das especificidades técnicas, que ficaram todas resolvidas e explicadas e ao nível gráfico, onde já se começaram a definir regras e a surgir a linha gráfica de toda a aplicação.
Isto ajudou também o grupo a clarificar as tarefas que irá desenvolver posteriormente no âmbito do projecto.



publicado por nelsontaleite às 15:38
editado por joaofsousa em 16/04/2011 às 02:19
link do post | comentar | adicionar aos favoritos |

Quarta-feira, 13 de Abril de 2011
Aula #15 - Apoio a nível gráfico

 Aula. Trabalho. Pedro Amado. Apoio na especificação gráfica.

 

Uma vez mais do mesmo: trabalhar para a especificação gráfica, estudo de grelhas e hoje já começamos a "dar uns toques" nas especificações cromáticas, tipográficas e nos ícones. A par disto continuamos a melhorar e corrigir a arquitectura e os fluxogramas.

O único aspecto de referir sobre o apoio na especificação foi que o professor Pedro Amado passou apenas de "raspão" no nosso grupo, porque na segunda-feira já tinhamos conferenciado sobre o assunto.

E assim acaba mais um dia de trabalho. Com as mais cordiais saudações académicas, um até já.




Terça-feira, 12 de Abril de 2011
Remodelações

 Pois bem, hoje foi dia de remodelações. Foi remodelada / aperfeiçoada a arquitectura de sistema, o estudo da grelha foi redesenhado e os fluxogramas melhorados. E pronto, a nível de projecto foi "só" isto, mas já tem muito que se lhe diga. Amanhã, como é dia de aula, vai ser dia de trabalho intensivo, portanto, força nisto!




Segunda-feira, 11 de Abril de 2011
Aula #14 + Reunião com orientadores #7 - All about feedback

 Muito bem, hoje foi um dia de correcções e edições no material que já tínhamos desenvolvido.

Em primeiro lugar, na reunião com os orientadores, tivemos feedback/ajuda quanto aos fluxogramas e traçamos a linha gráfica do site.

Já na aula, os professores Nuno Ribeiro e Benjamim Júnior, deram-nos importantes conselhos, opiniões e reparos, nomeadamente sobre a arquitectura do sistema, na qual tínhamos uma pequena dúvida. Entretanto fomos trabalhando também sobre a grelha. Terminada a aula, fomos ter com o professor Pedro Amado para umas dicas sobre o estudo da grelha e sobre as cores a utilizar. Digamos que ficamos bem mais esclarecidos em como construir a grelha correctamente e tivemos várias sugestões, de um ponto de vista graficamente mais rigoroso, em especial sobre o logotipo e a gama de cores a utilizar. Desde já dizemos então que adoptamos maioritariamente por cinzas.

E pronto, hoje ficámos por aqui, amanhã há mais 




Arranque de mais uma semana

 Cá estamos.

 

Apesar deste breve período de ausência de postamentos, bastante se trabalhou. Não há muito a dizer, pois o trabalho tem vindo a ser sobre o mesmo. Apenas de referir que demos por encerrada a modelação da base de dados, iniciamos os fluxogramas e o estudo da grelha está em bom ritmo.

Nada mais a acrescentar, a não ser que daqui a nada teremos reunião com os orientadores e à tarde teremos aula. Mais novidades aguardam para o dia de hoje, vamos então trabalhar no duro!




Quinta-feira, 7 de Abril de 2011
Projectum: Correntis Estadus

 Muito boas noites!

 

Ora bem, o dia de hoje foi um dia mais "gráfico"; ou seja, hoje foi a vez da arquitectura de sistema levar um tratamento estético, bem como fazer experiências cromáticas no logotipo. O estudo de grelha hoje esteve em pausa, enquanto que a base de dados esteve e está em construção/remodelação.

Desta feita, amanhã é mais um dia de trabalho, vamos continuar!




Quarta-feira, 6 de Abril de 2011
Aula #13 - Especificações

 Mais uma vez, cá estamos.

Desta vez a aula consisitu apenas em trabalhar, trabalhar, trabalhar. Estivemos entretidos com a arquitectura, mapa do site e iniciamos o estudo da grelha. Enquanto isso, o professor Nuno Ribeiro esteve com o nosso grupo e deu-nos algum feedback, nomeadamente no que diz respeito ao mapa de navegação e à arquitectura.

 

Terminada a aula, continuamos a trabalhar, até ao fim do dia. Sendo assim, de manhã deixamos quase em definitivo a escolha de um novo nome para o projecto (sim, parece que está difícil). Já da parte da tarde, tivemos grande rendimento. Demos por terminado a primeira fase do mapa de navegação, terminamos a arquitectura do sistema e começamos e acabamos uma primeira versão da estrutura da base de dados. Além disso, o estudo da grelha avançou consideravelmente, pelo que podemos admitir que estamos a avançar a bom ritmo. Brevemente, em posts posteriores, colocaremos previews do que está a acontecer no seio da família que é o nosso grupo. 

Como objectivos próximos, a par da construção do restante do estudo da grelha, vamos começar a fazer os fluxogramas. 

 

Sim, hoje trabalhamos muito... tempo. O que não impediu de comermos uns biscoitinhos cobertos de chocolate, ou até mesmo uma saudável maçã, com casca, para não desperdiçar vitaminas. Foi isso e as meninas do RedBull que andaram a passear pelo DeCA e pronto, lá nos ofereceram umas latas da bebida, para podermos trabalhar mas afincadamente. E visto que estava muito calor, uma bebida fresquinha até soube bem.




mais sobre mim

 

Junho 2011
Dom
Seg
Ter
Qua
Qui
Sex
Sab

1
2
3
4

5
6
7
8
9
11

12
13
14
15
16
18

19
20
21
22
23
24
25

26
27
30