post anterior
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
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).r
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
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_Sim
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.
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.
editado por joaofsousa em 16/04/2011 às 02:19
link do post | comentar | adicionar aos favoritos |