posts recentes

arquivos

tags

participar

links

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 |

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