especificação gráfica

#entrega04 - Especificação Gráfica e Técnica

sofia-cruz — Fri, 30 Mar 2012 22:56:40 GMT

Neste quarto módulo da UC de Projecto foi solicitado o desenvolvimento da especificação gráfica e técnica. Pretendia-se, portanto, desenvolver a identidade visual do Museu Virtual de Design Português, bem como a escolha de todos os aspectos técnicos inerentes.

Sendo assim, aqui apresentamos o manual de identidade visual da marca e um documento com todas as especificações gráficas e técnicas.

Manual de Identidade visual da marca:

Open publication - Free publishing - More marca

Manual de Identidade

Documento espeficificação gráfica e técnica:

Open publication - Free publishing - More museu virtual

Documento especificação gráfica e técnica

#entrega04 - Especificação Gráfica e Técnica

ruileite — Fri, 30 Mar 2012 22:09:46 GMT

A conceção da especificação gráfica e técnica do projeto detêm uma enorme relevância para a pormenorização e detalhe das funcionalidades e do grafismo por parte do grupo de trabalho.

Relativamente à especificação gráfica, esta permite a criação de uma identidade visual, no que respeita à marca e ao conceito do projeto.

Quanto à especificação técnica, permite identificar as características e funcionalidades da aplicação, bem como a interação entre os diferentes componentes da aplicação.

Relatório da especificação gráfica e técnica

Open publication - Free publishing - More especificacao

Link: Relatório

Manual de Identidade Visual

Open publication - Free publishing - More identidade

Link: Manual de Identidade

#entrega04

anapgmartins — Fri, 30 Mar 2012 21:02:27 GMT

Introdução:

O objetivo do módulo 4 é o desenvolvimento da especificação gráfica e técnica do nosso projeto. Como o nosso projeto diverge dos restantes, temos tópicos que são diferentes dos restantes projetos, como a interação entre plataformas Web 2.0, o guião prévio e o reconhecimento de locais filmagem.

Especificação gráfica:

O objetivo da especificação gráfica é o desenvolvimento dos estudos gráficos alusivos à nossa marca. Para tal, desenvolvemos um manual da marca, que inclui o logótipo e a sua justificação, bem como os estudos cromáticos e tipográficos. No link abaixo é possível visualizar o nosso manual da marca:

http://pt.scribd.com/doc/87394974

Especificação técnica:

Relativamente à especificação técnica, foi-nos pedido que caraterizassemos a implementação técnica do nosso projeto, desde o documentário até às plataformas Web 2.0 que vamos utilizar para a divulgação do nosso projeto.

EspecificacaoTecnica.pdf

Conclusão:

Esta entrega foi muito importante para consolidarmos ideias e objetivos. Também serviu para percebermos melhor as dificuldades com que nos vamos deparar daqui para a frente. Além disso, foi extremamente importante para nos motivar para a fase seguinte, as filmagens.

© 2012 "Sou diferente e depois?" All Rights Reserved

#entrega_04 - especificação gráfica

carlota-silva — Fri, 30 Mar 2012 18:49:03 GMT

Para a realização da especificação gráfica e, em consequência do que foi referido no post anterior, foram realizados diversos estudos. Depois de definido o nome e de acordadas as linhas base, prosseguimos para a realização dos trabalhos que apresentamos em seguida.

Sendo que já tinhamos decidido que o nosso sistema cromático se iria aproximar ao da Universidade de Aveiro, surge então o primeiro desafio - a criação de uma marca para o projeto.

Para tal, foram realizados diversos estudos que passamos apresentar.

A nossa escolha recai sobre o logotipo apresentado no canto superior esquerdo, por sermos adeptos da simplicidade e por acharmos que seria o que apresentava maior potencial. No manual de identidade encontram-se mais informações sobre o mesmo.

Depois de reunirmos algum material gráfico e antes de partirmos para a concretização do restante trabalho pedido para esta entrega, testámos esse mesmo material no formato em que este será, essencialmente, apresentado - projeção. Percebemos, assim, quais as limitações do mesmo, quer a nível cromático como a nível dimensional.

Passamos apresentar o manual de identidade concebido para a nossa marca - UAW.

Download Manual de identidade - versão PDF

Outro aspeto que tivemos em conta, foram as dimensões e características do local onde vai ser efetuada a projeção. O seguinte esquema representa a "parede" que dará corpo à nossa aplicação.

Tendo em conta as características da navegabilidade numa interface de interação natural, onde a sensibilidade do cursor controlado pelo gesto é, bastante, diferente do comum, foi necessário criar uma grelha que permitisse a inclusão de áreas de grande dimensão para a introdução das zonas interativas. Assim, depois de alguns testes chegámos à grelha representada no documento seguinte.

Download da grelha - versão PDF

Como já foi referido anteriormente, o cursor passa a ter um papel fundamental neste tipo de aplicação, uma vez que é necessário dar ao utilizador um feedback bastante concreto e imediato relativamente às suas ações. Assim, nada mais obvio do que representar a mão do utilizador com um ícone de uma mão com uma cor e contorno que lhe conferem destaque para ser facilmente identificado.

O cursor apresentado apenas terá dois estados: o normal e o de seleção, sendo que, encontramos duas soluções para a concretização do estado de seleção.

Solução 1: A representação do tempo de seleção é representada por um circulo que se vai preenchendo com o passar do tempo.

Solução 2: Posteriormente, surgiu a ideia de aproveitar uma das áreas que compõe o layout que desenhamos como "barra de progresso" para ação seleção.

Optaremos pela que se revelar mais eficiente aquando da realização dos primeiros testes da aplicação.

Relativamente ao layout dos ecrãs que compõe a aplicação, passamos a explicar, de forma sucinta, a funcionalidade dos principais componentes e a navegabilidade.

O logotipo inserido no canto superior esquerdo estará presente em todos os ecrãs, excepto no ecrã de galeria de fotografias e jogos, e possibilitará ao utilizador regressar para o ecra inicial, apresentado em seguida. O mesmo acontece com a barra de menu que contém as três áreas principais da aplicação: a cidade de aveiro, o campus universitário e a ua antigamente cronologia. Assim que o utilizador seleciona ou activa uma destas áreas, esta altera o seu aspeto, cobrindo-se de uma textura de linhas diagonais que serve para indicar ao utilizador em que área se encontra.

Assim que o utlizador avança um nível na aplicação, terá sempre a opção de "voltar" ao ponto anterior, através do botão voltar. Este botão quando selecionado altera a sua cor para verde, sendo assim o seu estado hover.

Na zona inferior à área de conteúdos, situa-se a feedbox, onde será apresentado o caminho que o utilizador está a percorrer na aplicação. A área que se encontra ativa está destacada do restante caminho pela cor branca.

Com o intuito de simplificar a aprendizagem dos movimentos-chave da navegação da aplicação, optámos por manter sempre presente uma legenda/descrição dos gestos a utilizar. O gesto em execução aparece selecionado como ilustra a seguinte figura.

Ecra 1

Este ecrã é demonstrado assim que o utilizador ativa a aplicação, através de um gesto pré-definido. A frase apresentada será de incentivo ao uso deste tipo de aplicação.

Ecrã 2

Este ecrã representa a forma como serão apresentados os diferentes pontos de interesse, neste caso relativamene ao campus. Cada fotografia funciona como botão de acesso à consola de opções para apresentação do respetivo conteúdo. Ao ser selecionada, a fotografia aparece focada e o nome do POI aparece na feedbox, tal como ilustra a figura.

Ecrã 3

A imagem seguinte apresenta a consola referida anteriormente que tem as seguintes opções: galeria de fotografias, info, sabias que e permite regressar ao ecrã anterior.

Ecrã 4

Semelhante ao ecrã anterior, no entanto, a consola é relativa às opções dos jogos.

Ecrã 5

Em todos os ecrãs informativos será apresentado uma breve descrição, bem como contactos e outras informações mais relevantes.

Ecrã 6

Como já foi explicado na grelha, o ecrã da galeria de fotografias sofrerá de uma animação que possibilitará a expansão da área de conteúdos, com o objetivo de aumentar o tamanho da fotografia apresentada. As duas setas em cada uma das laterais - esquerda e direita - funcionam como botões de acesso à fotografia anterior/seguinte, respetivamente.

Ecrã 7

Recorreu-se à utilização de uma cronologia para elaborar o ecrã relativo à "ua antigamente", dividida por décadas que se desdobram em anos e que dão acesso aos conteúdos mais relevantes desse período.

Download do layout - versão PDF

Ao realizar este estudo, percebemos a complexidade que envolve o desenho do layout para uma aplicação de interação natural, não só pelo paradigma de interação mas também, pelo formato de grande escala e neste caso, por se tratar de uma projeção. Estamos conscientes de que poderá surgir a necessidade de alterar algumas das componentes que aqui apresentamos mas vamos aguardar pelos testes de usabilidade para ver se existirá áreas criticas no que diz respeito à interação.

Por fim, tivemos a oportunidade de experimentar a projeção de todo o material que aqui apresentamos e o resultado superou as expectativas.

Referências

http://abduzeedo.com/logo-design-feathers

http://abduzeedo.com/design-process-starting-design-project

http://www.logodesignlove.com/best-logo-design-resources

http://identitydesigned.com/odooproject/

http://www.thinkingwithtype.com/

http://hellohappy.org/beautiful-web-type/

http://webdesignledger.com/

http://www.google.com/webfonts

https://typekit.com/

http://kuler.adobe.com/

#entrega04

adelaidejsousa — Fri, 30 Mar 2012 16:21:53 GMT

O objectivo para esta semana consiste na entrega da Especificação gráfica e técnica. Seguem-se os conteúdos que vão ser alvo de avaliação.

Especificação Gráfica

Sistema Visual - Para o desenvolvimento dos layouts do WIP, recorreu-se ao sistema 960gs (960 grid system) que faz uso de uma área de 960 pixels, adequado para resoluções de 1024x768 e maiores.

Index

(Estudo em escala de cinzas)

(Simulação com conteúdo)

Landing Page - Dividida em três colunas, uma com 200px e as outras duas com 370px;

(Escala de cinzas)

(Simulação com conteúdo a cinzas)

(Simulação com conteúdo)

Resultados da Pesquisa - Dividida em apenas duas colunas, uma com 200px e outra com 750px;

(Simulação com conteúdo a cinzas)

(Simulação com conteúdo)

Todas as páginas tem margens laterais de 32px. O index tem, para alem das margens laterais, uma margem inferior de 24px. Entre as diferentes colunas existe uma goteira de 10px indicada a magenta.

Para completar o módulo da especificação gráfica foi realizado um manual de identidade da marca, que pode ser consultado aqui Manual de Identidade WIP

Especificação Técnica

Arquitectura do Sistema - A especificação começa pelo modelo\arquitectura do sistema. O esquema seguinte representa a relação entre as várias componentes do projecto (hardware e software) assim como do lado do servidor e do cliente. No lado do servidor é processada informação que será depois apresentada no lado do cliente através de um browser e com recurso a HTML.

Mapa de navegação - O mapa de navegação evidencia as páginas principais da aplicação, e as funcionalidades presentes em cada uma delas. É possivel tambem verificar o a direcionalidade da informação, os tipos de utilizadores, e as páginas sempre presentes ao longo de toda a aplicação.

Fluxogramas

Para a realização dos fluxogramas foram escolhidas as funcionalidades que se consideram mais importantes na aplicação Web.

1) Registo e autenticação

O registo e a autentificação do utilizador, uma vez que sem elas, ninguém consegue ter acesso à aplicação e aos seus conteúdos, e também porque o grupo pretende implementar estas funcionalidades com recurso à API do facebook.

2) Pesquisa

o cerne da nossa aplicação é a pesquisa, uma vez que tudo se centra na pesquisa de ofertas de emprego.

3) Recomendação de ofertas por parte do sistema

A aplicação será capaz de recomendar ofertas de emprego, com base nos interesses do utilizador, ou nas ofertas que este tenha visualizado.

Base de dados

Identificação das tabelas

Utilizador -> tabela que guarda toda a informação dos utilizadores.

utilizador_has_categorias -> tabela onde são guardados os interesses dos utilizadores.

Categorias ->tabela que guarda as categorias das ofertas (que são também os interesses dos utilizadores).

Follow-> tabela que guarda quais os utilizadores seguidos, e quais os utilizadores seguidores.

not_recomendacao-> tabela que guarda as notificações dos utilizadores, assim como as ofertas que foram recomendadas aos utilizadores por outros utilizadores da aplicação.

Curriculum-> tabela que guarda a informação do currículo do utilizador

curriculum_univ-> tabela que guarda a informação das universidades que o utilizador frequentou.

Ofertas-> tabela que guarda a diversa informação das várias ofertas.

Distritos-> tabela com os distritos de Portugal.

Concelhos-> tabela dos concelhos de Portugal

ofertas_visualizadas-> guarda as ofertas que o utilizador visualizou.

ver_mais_tarde-> guarda as ofertas que o utilizador marcou como favoritas para ver mais tarde.

Empresas-> tabela que guarda a informação das empresas.

cliente_externo-> tabela que guarda os clientes importantes das empresas (adicionado pelas empresas).

cliente_has_empresa->identifica quais os clientes de uma determinada empresa.

cliente_empresa-> tabela que guarda os clientes importantes das empresas(neste caso, uma empresa registada na aplicação pode ser cliente de outra empresa, também registada).

Videos-> tabela que guarda o link para os videos de uma determinada empresa.

Fotos->tabela que guarda o link das fotografias de uma determinada empresa.

Sector-> tabela que refere os sectores que uma empresa se pode inserir.

comentarios-> tabela que guarda os comentários efectuados pelos utilizadores a uma determinada empresa.

É possível aceder ao ficheiro PDF da base de dados final através deste link: Base de Dados Final WIP

Concluindo:

Com a realização desta especificação técnica foi possível compreender como funciona a arquitectura lógica e física do nosso projecto, em conjunto com as duas outras vertentes (mobile+itv). A realização da base de dados foi uma tarefa complicada, mas fulcral uma vez que é comum a todas as vertentes.

Referências:

http://960.gs/ - 960 Grid System;

http://www.gliffy.com/ - Online Diagram software and flow chart

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

http://www.fontsquirrel.com/

http://kuler.adobe.com/

2007, Boulton - Grids are Good;

Slides das aulas de Projecto;

#entrega04

luisfbmelo — Fri, 30 Mar 2012 09:44:12 GMT

De acordo com o plano curricular da disciplina de Projecto, o objectivo desta semana consiste na entrega das especificações gráfica e técnica. Assim sendo, seguem os ficheiros referentes a cada uma das especificações.

Especificação gráfica

Manual_Projecto

Referências das guidelines utilizadas no desenvolvimento da especificação gráfica:

- Johansson, R. (2005). Accessibility and usability for interactive television | 456 Berea Street, a partir de http://www.456bereastreet.com/archive/200512/accessibility_and_usability_for_interactive_television/

- lasseklein. (2006). lasseklein.com >> Blog Archive >> Designing for television acedido a 19-03-2012, a partir de http://lasseklein.com/2006/09/designing-for-television/

- Google. Designing For TV - Google TV - Google Developers acedido a 20-03-2012, a partir de https://developers.google.com/tv/web/docs/design_for_tv

Especificação técnica

especificacao_tecnica

Download dos documentos:

- Manual de identidade visual da marca e do sistema visual da aplicação

- Documento de especificação técnica

- Base de dados

Especificação Gráfica

a-f-horta — Fri, 15 Apr 2011 22:15:15 GMT

NOME

Para iniciar o processo de selecção do nome do serviço, o grupo começou por olhar para o que já existe. Foram recolhidos os nomes de vários produtos/serviços concorrentes ou, pelo menos, semelhantes. O serviço CloudCanvas tem o nome mais relacionados com os conceitos fundamentais do projecto.

Assim, como ponto de partida para a definição de um novo nome, esse nome foi decomposto nos seus dois elementos fundamentais, Cloud e Canvas, que serviram de ponto de partida para o brainstorming de ideias.

Após algumas fases de brainstorming, com sucessiva escolha de nomes e iteração sobre osmesmos, o grupo chegou a alguns nomes possíveis:

1. Draw it!

Este nome vale, não só pela simplicidade e poder descritivo, como pela modularidade que possibilidade, abrindo a porta a possíveis expansões futuras ao serviço, dada a facilidade com que se pode substituir a primeira palavra por qualquer outro verbo.

2. Canvas 2.0

Apesar de soar algo genérico, este nome envolve na perfeição os conceitos atrás referidos, com o “Canvas” a representar a possibilidade de criação de imagens e o “2.0” a remeter para a comunidade e a comunicação.

3. Canvanize!

Este nome pretende fazer o trocadilho entre a expressão “galvanize”, neste caso com o sentido de algo energético ou energizado, e canvas, sugerindo um serviço dinâmico.

4. Tabula Rasa

Um nome algo mais “conceptual”. Baseado na teoria de John Locke, segundo a qual todo o conhecimento humano é adquirido. Sendo assim, o ser humano recém-nascido é uma tábua rasa ou um quadro vazio, a ser “preenchido” pela experiência humana. Da mesma forma, o projecto pretende criar uma comunidade inicialmente “vazia”, pronta a ser preenchida com o resultado da criatividade colectiva dos seus utilizadores.

5. weDraw

A conjugação das palavras “we” e “draw” passa a ideia de um local onde se desenha em conjunto, tocando assim tanto a componente da comunidade e colaboração, juntamente com a do desenho e arte.

No fim a escolha caiu, decisivamente, sobre o nome mais foneticamente distante da inspiração original. Ainda assim, as ideais e conceitos presentes nesse nome encontram-se presentes neste: weDraw.

O nome Draw it! seria uma alternativa viável, mas foi descartada pela existência de pelo menos dois projectos que, nesta fase, estariam a considerar nomes semelhantes. A possibilidade de expansão desse nome verifica-se também no nome escolhido.

LOGO

Como havia sido explicado com o nome, quisemos ter presente tanto o conceito de comunidade como o conceito de desenho, não apenas no nome, mas no conjunto inteiro do logotipo em si.

Dessa forma, temos aqui representado o aspecto da comunidade através de uma nuvem, que simboliza conceitos internet, partilha e trabalho colaborativo. Juntamente com a nuvem voram adicionadas “pingas” de tinta, deixando transparecer o aspecto artistico de desenho aqui presente.

Foram criadas duas versões: acima encontra-se a versão para impressão, abaixo a versão a ser utilizada na web.

Construção

O desenvolvimento do logotipo teve como base a fonte Hiruko, a partir dela ajustaram-se as letras com modificações nos vectores, com vista a torná-las mais interessantes.

Através de uma combinação de elipses com strokes da própria letra, foi então possivel construir a nuvem para o elemento de fundo ao qual foram adicionadas as gotas.

Juntando tudo têm-se então finalmente, o nosso logotipo.

Hipóteses Abandonadas

A construção de um logotipo implica uma longa fase de várias experiências, aqui pode-se ver testes de estudo de logotipo. Versões que foram testadas mas por uma razão ou outra, como por exemplo falha em transparecer um dos aspectos de desenho ou comunidade, foram abandonadas.

Regras de Utilização

A utilização do logotipo deve ser feita em um fundo branco, com bastante espaço em redor e um stroke branco à volta.

Caso essas condições não se verifiquem, ou então o logotipo no seu estado principal não se adequar, utiliza-se o logotipo invertido que se encontra abaixo.

Escala de redução

Para manter a boa legibilidade e detalhe do logo, é preferifel que as suas dimensões nunca sejam reduzidas a menos de 25% do original que possui 52 pixels de altura e 118 pixels de largura.

Margem de Segurança

O logo deve possuir a todas as alturas uma margem de segurança de 10 pixels a toda a sua volta, livre de outros elementos gráficos que não sejam simples manchas de cor.

Sistema Visual

960gs

Para o desenvolvimento dos layouts da weDraw, recorreu-se ao sistema 960gs (960 grid system) que faz uso de uma área de 960 pixels, adequado para resoluções de 1024x768 e maiores.

O sistema 960gs têm variantes de 12, 16 e 24 colunas. Para o desenvolvimento do layour optou-se pelo sistema de 12 colunas, cada uma com 60 pixels.

Divisão

A vantagem de utilizar o sistema 960gs é a divisão em colunas que pode ser usada em diferentes configurações. No nosso caso, utiliza-se uma divisão de 4x4x4, criando efectivamente um layout de 3 colunas, cada uma com uma dimensão de 300 pixels.

Margens e Goteiras

Entre cada uma das 3 colunas do layout, existe uma goteira de 20 pixels (indicada a magenta) para criar um aspecto mais organizado. Existe também uma margem de 10 pixels em cada um dos lados, criando uma área útil com 940 pixels de largura.

Baseline

De forma a melhor estruturar e organizar os textos e elementos, aplicou-se também uma baseline de 15 pixels. Isto cria uma unidade macro dentro das colunas de 15 pixels de altura com 60 largura, separadas por uma unidade micro de 15 pixels de altura com 20 de largura para melhor alinhar os conteúdos dentro de cada coluna.

Estudo de Cinzentos

Tendo sido construida a grelha é então possivel planificar a disposição do conteúdo no site como pode ser visto. Estas manchas de conteúdo permitem ver de maneira simplificada zonas com grande densidade visual e um alinhamento mais simples dos elementos.

Simulação

Tendo depois como base a grelha e os estudos de cinzento, pode-se passar à criação de simulações, dispondo os conteúdos de acordo com as manchas anteriormente indicadas. Consegue-se com este processo criar um layoyt mais limpo, organizado e com um forte balanço estético.

Outros ecrâs

Perfil de Utilizador

Fazendo uso do sistema de 3 colunas, agrupa menus na coluna esquerda, usando as outras duas em junção para conteúdos.

Página Principal

Fazendo uso do sistema de 3 colunas, agrupa menus na coluna esquerda, usando as outras duas em junção para conteúdos.

Ferramenta de Desenho

Tendo em conta a necessidade de um canvas grande, nesta página optou-se por usar a largura inteira da janela em vez de apenas os 940 pixels

Página de Ficheiros

Fazendo uso do sistema de 3 colunas, inverte o esquema anterior, usando a barra da direita para menus, e as restantes para os conteúdos.

Tipografia

As fontes escolhidas para a utilização na weDraw são a Gill Sans MT para os titulos e a Verdana para os restantes textos. Caso por algum motivo essas fontes não sejam visiveis, usam-se como fontes alternativas/secundárias a Trebuchet MS para os títulos e a Helvetica World para o corpo de texto.

Hieraquia de Fontes

Usando sempre um leading de 15 pixels, as dimensões do texto é de:

- 36 pt para os titulos de maior dimensão,

- 18 pt para os elementos na barra de navegação,

- 16 pt para os titulos de menor dimensão

- 12 pt para os textos restantes e links

Um caso único é a utilização de texto a 11 pt, exclusivamente no footer a cinzento com informaão weDraw.

Sistema Cromático

Seguindo um esquema de cores simples, a utilização de cores é predominantemente azul nos titulos, com preto nos textos e magenta nos links. A cor alternativa de azul deve ser usada exclusivamente na barra inferior, tal como o cinzento escuro deve ser apenas usado no footer.

O cinzento mais claro deve ser usado como border de um pixel à volta de imagens com formas regular e para marcar items não activos. Tanto o vermelho como o verde apenas devem ser usados como feedback de interacção.

Por fim o fundo deve estar sempre a branco.

Ícones

Tendo adoptado um aspecto mais minimalista, a weDraw não dispões de um número elevado de ícones, no entando ainda existem alguns que importa destacar: As mensagens privadas, o promover e despromover do sistema de reputação e o botão de ver mais.

Os estados representados são, o activo ou estado normal, o hover quando se passa o cursor por cima e o inactivo quando não existe interacção de momento.

O botão de ver mais não possui estado inactivo pois caso não exista algo mais para ver, ele simplesmente não irá ser visivel.

Interacção

A weDraw vai dispor de dois principais mecanismos de interacção.

O primeiro mecanismo trata-se de uma lightbox para se poder visualizar os ficheiros em dimensão total, iria estar principalmente presente nas páginas de ficheiros.

O segundo mecanismo de interacção trata-se de um slide down menu. Ao tentar salvar um ficheiro criado no svg-edit ou fazer um upload, um efeito de slide irá fazer surgir um novo ecrã no topo da ferramenta para inserir os detalhes e submeter, avisando para fazer o login ou registo caso necessário. Adicionalmente, usam-se progress bars para dar feedback sobre o estado do upload.

Pode fazer download de uma versão em pdf aqui: weDraw.pdf

Adicionalmente pode visulizar online aqui: LINK

Entrega TP04 | Especificação técnica e gráfica

nelsontaleite — Fri, 15 Apr 2011 14:38:28 GMT

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.

Reunião com orientadores e fluxogramas

anapgmartins — Thu, 14 Apr 2011 15:32:16 GMT

Olá boa tarde!

O grupo encontra-se reunido a trabalhar para a entrega do módulo 4 que ocorrerá amanhã. Ontem não reunião com os orientadores estivemos a trocar ideias acerca do logótipo que já havíamos mostrado aos professores e postado no blog. Também mostramos aos professores alguns dos fluxogramas já realizados que, depois de algumas correcções já estão concluídos, pelo que os postamos de seguida, tal como o mapa de navegação corrigido:

Esquema 1 - Mapa de navegação;

Esquema 2 - Fluxograma de login de utilizador;

Esquema 3 - Fluxograma de votação;

Esquema 4 - Fluxograma de validação;

Esquema 5 - Fluxograma de comentários;

Para concluir esta fase ainda nos falta realizar o fluxograma de upload de imagem que está em processo de desenvolvimento e será postado brevemente.

Cumprimentos

Reunião dia 7 de Abril

diogompereira — Thu, 07 Apr 2011 11:50:06 GMT

Boa dia!

Na passada quarta-feira, dia 7 de Abril, a reunião com o orientador de projecto teve a presença de um funcionário da PT que nos irá explicar o funcionamento da norma SCORM com o nosso conteúdo multimédia.

Tópicos fundamentais da reunição

- Visualização do especificação gráfica feita até à data. Fechamos o nome para o projecto que ficou " Know it" . O logo também já ficou referenciado, ficando apenas por definir as cores usadas e o tipo de letra.

- Abordagem às especificações técnicas e mapas de navegação.

- Conversa com o Pedro, funcionário da PT, sobre a norma SCORM e consequente ligação com os conteúdos multimédia que serão introduzidos na plataforma.

Layouts em nova grelha de 960px

brf — Sat, 08 May 2010 21:41:56 GMT

Boa noite,

O projecto cicloria continua a crescer e assim também cresceu a grelha base em que assentam os layouts das páginas, que passa agora a contar com uma área total de 960px.

Esta opção baseou-se no aumento do espaço útil para o utilizador visualizar os mapas. Ficaram salvaguardadas, as proporções das páginas anteriormente criadas, pois esta nova grelha baseia-se igualmente em 12 colunas.

Segue em baixo o ficheiro em que estão as páginas de: Registo de Novo utilizador / Parceiro; Notícias; Eventos; Projecto; Parceiros; Ajuda (Mapa do site); Contactos; Administrador (Mensagens) adpatadas à nova grelha.

Novas páginas assentes em grelha de 960px cicloria

Anabela Santiago | Bruno Fernandes | Nuno Oliveira | Tiago Martins