posts recentes

arquivos

tags

Sexta-feira, 30 de Março de 2012
#entrega04 - Especificação Gráfica e Especificação Técnica

No que diz respeito à quarta entrega, referente ao Módulo 4, da Unidade Curricular de Projeto, foi-nos solicitado o desenvolvimento da especificação gráfica e técnica do projeto. Deste modo, pretendia-se o estudo criativo de toda a componente gráfica da nossa aplicação, bem como a caracterização da implementação técnica da mesma.

Especificação Gráfica

Relativamente à especificação gráfica, pretendia-se o desenvolvimento de estudos gráficos alusivos à nossa imagem de marca/ logótipo, nome, tipografia, estudo cromático, estudo de interfaces e ainda de interação.
Apresentamos então, todos os componentes deste estudo.

Estudo do Nome

Tendo por base o pressuposto inicial nosso projeto “ser uma plataforma influente no quotidiano da população, no que diz respeito à prevenção da saúde e bem-estar”, procurou-se escolher uma designação que assentasse nesta visão e nos valores eleitos, tais como, a sensibilização, partilha, inovação, prevenção e saúde. Deste modo, e em resposta ao pretendido, tentámos encontrar algumas soluções de naming passíveis de associação ao projeto que nos encontramos a desenvolver, e que poderiam transmitir esta cultura de disseminação de dicas preventivas de saúde. Apresentam-se, então, alguns dos exemplos resultantes deste processo:

Das propostas acima apresentadas, julgamos que filgud se adequa melhor ao que pretendemos, e ao feeling que sentimos relativamente a este projeto. Consideramos que esta tradução fonética de feel good – “sentir-se bem”, se associa à cultura e personalidade inicialmente definidas, bem como ao valor e objectivos do produto que pretendemos apresentar, ou seja, a disseminação de boas práticas e dicas preventivas de saúde, pelos indivíduos de uma população, através de dispositivos móveis.
Após nos identificarmos com a denominação filgud, preocupámo-nos em verificar a sua existência, pelo que constatámos a sua utilização numa piscina italiana, numa empresa de climatização e noutra de marketing e publicidade, pelo que consideramos não interferir, nem passível de confundir/ equivocar a nossa identidade, bem como atrapalhar o nosso posicionamento.

Identidade Visual

Neste ponto apresentamos o estudo dos elementos principais da nossa marca - logótipo, ícone e lettering de Filgud, dos seus elementos complementares – cor e versões negativas e positivas, tipografia, regras de uso de escalas, de zona de segurança e de irregularidades e ainda um pequeno imaginário ilustrativo do nosso feelling.

Manual Identidade Filgud

Grelhas e Ecrãs

O estudo da grelha revelou-se de grande importância na elaboração dos ecrãs finas da aplicação móvel. Estes foram desenvolvidos com base nas dimensões 800 x 480px e este estudo de grelhas desenvolvido esteve na base da sua criação. Contudo, estas não foram vistas como restrições ao seu desenvolvimento, mas como ponto de partida.
A maioria dos nossos ecrãs dividem-se em três grandes áreas, nomeadamente, menu superior, zona de informação e menu inferior.
De seguida apresentam-se imagens ilustrativas do processo de desenvolvimento de cada ecrã único da nossa aplicação.

 

Grelha Base

 

 Principais Áreas dos Ecrãs

Ecrã de Dica Diária

Ecrã de Partilha

Ecrã de Acerca

Ecrã de Pesquisa

Ecrã de Categorias

 

Ecrã das Dicas de uma Categoria

Ecrã de Definições

Ecrã de Registo

Exemplo dos Ecrãs em Contexto Real

 

Clique aqui para visualizar uma imagem com todos os ecrãs em alta resolução.

Ícones e Controlos

Os ícones da nossa aplicação são provenientes de duas grandes galerias, a galeria de ícones oficiais do SO Android e a galeria de ícones oficiais das diversas áreas de saúde, disponíveis nos seguintes endereços: http://developer.android.com/design/downloads/index.html
http://www.hablamosjuntos.org/signage/symbols/default.using_symbols.asp
Deste modo, o grupo optou por utilizar os ícones oficias do SO Android, de forma a facilitar a utilização da nossa aplicação por parte dos utilizadores nativos deste sistema. O ícone de dica do dia é o único ícone desenvolvido inteiramente pelo grupo e corresponde ao nosso logótipo, na sua versão monocromática negativa.
Apresentam-se de seguida imagens ilustrativas dos ícones e controlos da nossa aplicação.

É de salientar que, a versão ativa dos botões corresponde ao estado destes quando são pressionados pelo utilizador e na maioria das vezes, esta versão corresponde à inversão ou alteração do gradiente de fundo dos botões ou à variação da cor do texto.
 

Especificação Técnica

Referente à especificação técnica foi-nos proposto que caracterizássemos a implementação técnica da nossa aplicação, nomeadamente, a definição de todas as linguagens e ambientes em que se fundamenta. Esta especificação consiste numa conclusão e total definição de todos os parâmetros que lhe dizem respeito, sustentando-se no estudo primordial da viabilidade técnica e na validação da mesma, através da demo anteriormente desenvolvida.
Face a este objetivo, foram desenvolvidos os seguintes elementos.

Modelo/Arquitetura do Sistema

No seguinte modelo/arquitetura apresentamos os principais componentes do nosso sistema, bem como as relações existentes entre eles.

 

Modelo de Camadas

 

Arquitetura Formal

*A próxima imagem ilustra todos os serviços presentes no nosso projeto

Mapa de Navegação

Nas seguintes ilustrações evidenciamos os possíveis “caminhos” nos quais, os diferentes tipos de utilizador podem “navegar”, evidenciando também as diferentes áreas funcionais da nossa aplicação.

 

Utilizador Não Registado

Utilizador Registado

Fluxogramas

Para o desenvolvimento dos fluxogramas foram selecionados os principais requisitos funcionais da nossa aplicação, de forma a representarmos os seus processos/algorítmos que respondam devidamente às soluções que se pretendem implementar.
Deste modo, as funcionalidades escolhidas foram as seguintes:

 

Login

 

 

 

 

Aceder a uma Dica

 

 

 

Pesquisa

 

 

 

Avaliar uma Dica

 

Base de dados

Feita a análise de todas as funcionalidades a implementar na nossa plataforma, foram tidas em conta as que requeriam armazenamento e gestão de dados, e desse modo, procedemos ao desenvolvimento da seguinte Base de Dados que guarda, organiza, relaciona e permite a manipulação dos dados através de sql e que são persistidos do lado do servidor do nosso serviço.

 

Conclusão

De forma a concluir esta entrega, importar referir a importância deste módulo e objetivos adjacentes, na medida em que nos permitiram desenvolver pontos cruciais para evolução do nosso projeto. Foram assim definidas pormenorizações importantes, quer a nível gráfico como técnico, que nos levarão ao desenvolvimento de um futuro protótipo de alta fidelidade.

 

Links Visitados

http://inspirationfeed.com/inspiration/35-perfect-examples-of-branding-design/

http://www.smashingmagazine.com/2010/07/21/designing-style-guidelines-for-brands-and-websites/

http://www.google.com/webfonts

http://www.gliffy.com/

http://coding.smashingmagazine.com/2011/06/30/designing-for-android/

http://www.slideshare.net/AndroidDev/android-ui-design-tips

http://en.wikipedia.org/wiki/Multitier_architecture




mais sobre mim

 

Junho 2012
Dom
Seg
Ter
Qua
Qui
Sex
Sab

1
2

3
4
5
6
7
8
9

10
11
12
14
15
16

17
18
19
20
21
22
23

24
25
26
27
28
29
30