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:
- Filgud
- Dailydose
- Live+
- Dailycare
- Care+
- +Cuidado
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.
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/down
http://www.hablamosjuntos.org/signage/sy
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
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/3
http://www.smashingmagazine.com/2010/07/2
http://www.google.com/webfonts
http://www.gliffy.com/
http://coding.smashingmagazine.com/2011/0
http://www.slideshare.net/AndroidDev/and
http://en.wikipedia.org/wiki/Multitier_a
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 :)
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.
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
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.
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.
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/topic
http://developer.android.com/reference/a
http://stackoverflow.com/questions/60140
edit: Queríamos deixar um especial agradecimento ao nosso colega Daniel Silva pela sua disponibilidade e ajuda no desenvolvimento da demo técnica.
link do post | comentar | ver comentários (1) | adicionar aos favoritos |
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 :)
link do post | comentar | ver comentários (1) | adicionar aos favoritos |
AS MELHORAS PARA O BEST ORIENTADOR 2011/2012
BEIJO E ABRAÇOS!
link do post | comentar | ver comentários (3) | adicionar aos favoritos |