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




Quinta-feira, 29 de Março de 2012
#orientação06

A orientação de projeto com o professor Licínio Mano, que decorreu no dia 27 de Março, incluiu a seguinte ordem de trabalhos:
- Avaliação da Base de Dados desenvolvida;
- Avaliação do Mapa de Navegação;
- Avaliação dos diferentes elementos que dizem respeito à especificação gráfica, tais como:
    - Justificação do nome de projeto escolhido;
    - Ecrãs;
    - Manual de Identidade;

- Abordagem da Arquitetura de Sistema a desenvolver;
- Listagem de requisitos para os quais devemos idealizar os respetivos fluxogramas;

 

 

ps: primeira adaptação da nossa marca :)




Segunda-feira, 26 de Março de 2012
#aula06

Na aula de Projeto do dia 26 de Março, o grupo começou a desenvolver a temática proposta – Especificação Técnica. Deste modo, debruçamo-nos na elaboração dos mapas de navegação, associados a cada tipo de utilizador, e no desenvolvimento primordial da nossa Base de Dados.

Em conversa com os docentes presentes em aula, considerámos importante alterar e melhorar a estrutura dos ecrãs apresentados, nomeadamente, a passagem da denominação de “Arquivo” para “Categorias”, e a inclusão do título da categoria na listagem das suas respectivas dicas.
 


tags: |


Sexta-feira, 23 de Março de 2012
Links da semana

E segue-se mais uma edição de Links da Semana

 

 

Janko At Warp Speed - A free set of elements for sketching and wireframing.

 

Danielmckenzie - Designing for iphone android and blackberry platforms

 

User Interface Design Tips - Conjunto de Slides acerca de UI Design

 




Quinta-feira, 22 de Março de 2012
#orientação05

No dia 20 de Março, última terça-feira, o grupo reuniu-se com o seu orientador de projeto, professor Licínio Mano. Este encontro iniciou com a apresentação do trabalho já desenvolvido relativamente à especificação gráfica, a entregar simultaneamente com a especificação técnica, no dia 30 de Março. Relativamente à especificação gráfica, apresentámos ao nosso orientador os exemplos de logótipos desenvolvidos, a tipografia eleita, os possíveis esquemas cromáticos, e um pequeno estudo de escala associado ao logótipo. Em resposta, o professor aprovou o trabalho desenvolvido.
Num segundo momento, abordou-se, de forma superficial, alguns aspectos a ter em conta no desenvolvimento da especificação técnica.
 




Segunda-feira, 19 de Março de 2012
#aula05

Na aula de Projeto do dia 19 de Março, o grupo desenvolveu a temática proposta – Especificação Gráfica. Deste modo, iniciámos a conceptualização do logótipo/ marca, ícone da aplicação, escolha de família de tipos, sistema cromático, estudo de escala do logótipo e da tipografia. Para além disso, começámos a desenvolver alguns ecrãs, tais como, ecrã de Dica e de loading.


tags: |


Sexta-feira, 16 de Março de 2012
WAIT FOR IT.....

 

 


tags:

publicado por fsmendes às 18:43
editado por brunoagarcia às 21:02
link do post | comentar | adicionar aos favoritos |

#entrega03 - Demo Gráfica & Demo Técnica

No que diz respeito à terceira entrega, referente ao Módulo 3, da Unidade Curricular de Projeto, foi-nos solicitado o desenvolvimento de protótipos de baixa fidelidade que ilustrassem o conceito do nosso projeto, tanto a nível gráfico como técnico.
Assim, o grupo preocupou-se em perceber as principais funcionalidades e características que melhor representassem a ideia que defendemos, para o desenvolvimento das demos gráfica e técnica, que de seguida apresentamos.

Demo Gráfica

Na seguinte demo gráfica pretendemos demonstrar o conceito do nosso projeto. Para tal, optámos por apresentar as principais funcionalidades daquilo que consta o nosso conceito, sendo esta ilustração feita com base numa narração exemplificativa do funcionamento e dos moldes da nossa futura aplicação.
Deste modo, considerámos pertinente apresentar as seguintes funcionalidades:

Aquando da primeira utilização da aplicação:
- Abrir a aplicação através do ícone;
- Possibilidade de escolher receber, ou não, a notificação diária com a dica preventiva de saúde;
- Visualização do ecrã da dica diária;
- Possibilidade de registo na aplicação para a realização das seguintes atividades:
- avaliar dica;
- partilhar;
- Sair da aplicação.

Aquando da indicação de notificação recebida:
- Abrir a notificação;
- Visualização da dica;
- adicionar aos favoritos (após ter efectuado o registo).

 

 

A execução desta demo gráfica teve por base a utilização das seguintes tecnologias e software:
- Justinmind Prototyper 4.5.0 Pro (Prototipagem);
- Camtasia Studio (Gravação de ecrã);
- Adobe Soundbooth CS5 (Gravação de som);
- Adobe Audition CS5.5 (Edição e montagem de som);
- Adobe Premiere Pro CS5.5 (Edição e montagem de vídeo);
- Adobe Photoshop CS5.5 (Edição de imagem).

Demo Técnica

A seguinte demo técnica tem como objectivo demonstrar a viabilidade tecnológica da funcionalidade chave do nosso projeto. Assim, achámos relevante a representação de push notifications, na medida em que se mostra como um componente bastante identificativo do nosso conceito.
Para além disso, é demonstrada a comunicação entre um servidor e um dispositivo móvel, ou seja, acesso a informação remota, posteriormente visualizada no ecrã de dica diária. Para esta demo o grupo utilizou o servidor de um dos elementos do grupo.

 

 

 

 (Capturas de ecrâ ilustrativas do desenvolvimento em Eclipse)

 

A execução desta demo técnica teve por base a utilização das seguintes tecnologias e softwares:
- Eclipse (Interface de desenvolvimento);
- SDK Android (Emulador);
- DreamWeaver CS5.5 (desenvolvimento de páginas php);
- MySQL Workbench (Criação e Gestão de Base de Dados);
- Java (Linguagem de programação para desenvolvimento de Android);
- php (Linguagem de programação para desenvolvimento de páginas web);
- Adobe Photoshop CS5.5 (Edição de imagem);
- Adobe Premiere Pro CS5.5 (Edição e montagem de vídeo);

Conclusão

Com a realização destes protótipos de baixa fidelidade, tanto a nível gráfico como técnico, conseguimos ficar com uma ideia de como se processará todo o desenvolvimento deste projeto.
Respeitante à demo gráfica, pensamos ter sido um processo bastante benéfico para o futuro desenvolvimento gráfico, uma vez que a nossa experiência de desenvolvimento de interfaces para dispositivos móveis era nula, e este processo de experiência e testes permitiu-nos ter contacto com os aspectos ergonómicos a ter em conta, para a nossa aplicação móvel.
Nesta ultima semana, ao longo do desenvolvimento da demo técnica, deparámo-nos com a dificuldade de lidar com a nova linguagem de programação, Java, no entanto consideramos importante o facto de atingirmos o objectivo desta fase inicial de exploração e testes de desenvolvimento do sistema, ao implementarmos as principais funcionalidades, acesso a dados remotos e push notifications.

Principais Links Visitados

http://developer.android.com/guide/topics/ui/notifiers/notifications.html

http://developer.android.com/reference/android/app/Notification.html

http://stackoverflow.com/questions/6014028/closing-application-with-exit-button

 

edit: Queríamos deixar um especial agradecimento ao nosso colega Daniel Silva pela sua disponibilidade e ajuda no desenvolvimento da demo técnica.

 




Quarta-feira, 14 de Março de 2012
Ponto de Situação...

Bem... hoje a nossa atenção centrou-se na plataforma Android e na linguagem Java.
Após Hello World's.. testes de botões etc etc investigámos o funcionamento e características das notificações e já no final do dia conseguimos implementá-las com sucesso, e já com o nosso icon provisório (ainda que acionadas por eventos provocados pelo utilizador final e não por um servidor).
Próximo grande objetivo é estabelecer a comunicação entre o dispositivo e o servidor :)


P.s: É favor não ter em atenção o português nem a user interface :)

 

 


tags:


AS MELHORAS PARA O BEST ORIENTADOR 2011/2012

 

BEIJO E ABRAÇOS!


tags:


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