Especificação gráfica & técnicastorage.campus.ua.sapo.pt/files/88b2d60bfd556a7b97... · Inicialmente partiu-se de uma abordagem onde o logótipo apresentava uma única cor, porém,

# Especificação gráfica & técnica

Novas Tecnologias da Comunicação

Unidade Curricular de Projeto | 2012

Docentes:

Benjamim Júnior

Hélder Caixinha

Ivo Fonseca

Pedro Amado

Orientadora:

Lídia Oliveira

Discentes:

Alexandra Fernandes | 47130

Rui Leite | 41752

Ano Lectivo 2011/2012

| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

Universidade de Aveiro, 30 de Março de 2012 2

Índice

Introdução ..................................................................................................................................... 3

Especificação gráfica ..................................................................................................................... 4

Especificação técnica ................................................................................................................... 19

Reflexão ....................................................................................................................................... 27

Bibliografia .................................................................................................................................. 28




Introdução

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.




Especificação gráfica

Conceito do projeto (naming)

Para a criação do conceito e nome do projeto partiu-se do nome “garebook”, nome inicial da

plataforma.

O nome escolhido para o projeto foi “start-a-book” (conceito de iniciação de um livro), uma

vez que se torna intuitivo, demonstrando as potencialidades da aplicação. Nesta designação

encontram-se presentes o conceito da diferenciação (unicidade da marca) e portabilidade

(visto que é capaz de ser usado em diferentes sistemas de comunicação).

Pode-se referir ainda que o nome comunica o propósito do projeto (conceção de uma

plataforma de criação de histórias para crianças dos 6 aos 10 anos), salientando a componente

de criação e iniciativa por parte dos utilizadores.

O processo de escolha do nome passou por várias etapas, nomeadamente pela avaliação dos

nomes de projetos da mesma área temática existentes, pelo brainstorming de conceitos,

testes de escrita e de pronúncia e inspiração pelos diferentes elementos envolventes no

projeto.




Estudos gráficos (logótipo, logomarca e lettering)

No seguimento da criação do logótipo da marca, foram efetuados vários estudos de cor,

lettering, nome e logomarca.

Fig.1 – Estudos do nome




Fig.2 – Estudos do logótipo

O logotipo da marca “start-a-book” assenta na ideia de criação de uma marca que vá de

encontro com o público-alvo. A mistura do verde com o preto serve para a criação de

contraste da mensagem transmitida pelo logótipo (conceito de criação de um livro).

O desenvolvimento do logótipo respeita a relação entre o conceito e o público-alvo do projeto,

pela simplificação e pela associação da cor verde à juventude, frescura, esperança e calma.

Inicialmente partiu-se de uma abordagem onde o logótipo apresentava uma única cor, porém,

para transmitir da melhor forma a mensagem, optou-se pela conjugação das duas cores

principais escolhidas na paleta cromática.

O logótipo possui ainda um fundo cinzento de forma a dar destaque ao efeito brilhante à volta

do lettering.




O lettering é constituído por “start-a-book” e referencia o clássico livro de desenho das

crianças, onde podem criar as suas histórias baseadas em balões de fala e desenhos. Aqui a

criação destas histórias é baseada em ícones inseridos na aplicação.

Fig.3 – Logótipo “start-a-book”

É de salientar que o logótipo foi sofrendo alterações na medida em que foi desenvolvido de

forma a poder ser portável para os diversos meios de comunicação. A versão apresentada em

baixo refere-se a uma das versões do negativo e positivo do logo (monocromático e

policromático), de forma a transparecer as linhas gráficas do logo inicial.

Fig.4 – Versões a negativo e positivo do logo (monocromático e policromático)




Escala do logótipo

A legibilidade do logótipo é definida pela sua representação a 25%. Esta dimensão é definida

para que nunca se perca a sua visibilidade.

Fig.5 – Versão mínima do logótipo

O logótipo deve respeitar as dimensões mínimas do nome do projeto de forma a não

comprometer a sua leitura.

Fig.6 – Versão mínima do logótipo

O favicon é representado pela letra “b” com a cor verde.

Fig.7 – Favicon




Zonas de segurança

De forma a preservar uma boa leitura do logótipo, são definidas margens de segurança à sua

volta. Esta área de segurança, tem como referência o circulo correspondente ao interior das

letras “a”, “b” e “o”.

Assim, todas as versões da marca devem preservar o espaço livre definido, de forma a manter

uma boa leitura e visibilidade, protegendo o logótipo quando este se encontra perto de outros

elementos.

Fig. 8 – Zona de segurança do logotipo

Especificações tipográficas

Na escolha da tipografia optou-se por uma tipografia sem serifas, uma vez que proporciona

uma melhor leitura no ecrã e por ser concordante com a linha gráfica aplicada em toda a

aplicação. Escolheu-se o “Calibri” por se tratar de uma fonte de sistema.

Fig. 9 – Tipografia plataforma




Preferiu-se a aplicação de um tipo de letra que não fosse de sistema para o logotipo, uma vez

que as opções de escolha seriam maiores. Assim, a fonte escolhida para o logótipo foi a

“Arista”. Esta também é um tipo de letra não serifado, de fácil leitura e open-source.

No que concerne às características deste tipo de letra a sua boa visibilidade, associação com

formas arredondadas, identificação com as crianças, transmissão de harmonia e estrutura

forte fortalecem a mensagem lúdica e educativa da plataforma.

De acordo com as necessidades da plataforma, subsiste a necessidade de estabelecer uma

hierarquia visual no que concerne aos textos expostos.

Os títulos e subtítulos são a negrito com espaçamento duplo, sendo que o tamanho difere, o

texto tem tamanho 12pt e 14pt em alguns locais, com espaçamento de 1,5pt.

Os títulos, subtítulos e corpo de texto são a preto. Os links são a verde no estado normal e

cinzento-escuro no estado hover.

Relativamente aos botões da aplicação, estes apresentam os mesmos tons de verde, com

letras brancas e, na passagem do rato sobre o botão, as cores são invertidas.

Fig. 10 – Exemplo dos botões (normal e estado hover)

Fig. 11 – Exemplo dos links




Estados de ícones e controlos

Ao longo da aplicação, optou-se pela utilização de botões com texto. Rejeitou-se a utilização

de ícones, por não serem considerados intuitivos para o público-alvo em questão. A par do

desenvolvimento do projeto foram efetuados estudos visuais de plataformas com a mesma

dinâmica, e conclui-se que a colocação de ícones é substituída por palavras simples e diretas.

Desta forma, decidiu-se pela colocação de palavras associada a botões e links para tentar ser o

mais intuitivo possível.

Porém, na componente de criação da história são utilizadas as setas direcionais, acompanhas

com texto explicativo, uma vez que se considerou percetível.

Fig. 12 – Exemplo das setas direcionais

Também nas componentes de “Ajuda” “Vídeo Demonstrativo” e “Mapa do Jogo” são

apresentados alguns ícones.




Fig. 13 – Ícones e controlos da plataforma

O estudo dos ícones recai sobre as cores da paleta cromática escolhida para o projeto, bem

como para os ícones reconhecidos nas diferentes plataformas.

Especificações cromáticas

Relativamente à paleta cromática escolhida, optou-se pelas tonalidades dos verdes associados

aos cinzas. A escolha do verde deve-se à associação ao portal Biblon (que também utiliza o

verde na plataforma), mas também tendo como base a cor do logotipo da Universidade de

Aveiro.

O “verde lima” foi escolhido como cor predominante na plataforma uma vez que transmite

equilíbrio, esperança, frescura, energia e vitalidade. Estes valores estão associados ao

crescimento dos utilizadores juniores.

Escolheu-se ainda tonalidades cromáticas escuras para que o texto e botões funcionem melhor

sobre o rosto da aplicação.




Fig. 14 – Paleta cromática

Expomos ainda o estudo cromático, com as cores utilizadas na plataforma, bem como as cores

relativas às mensagens de feedback ao utilizador.




Fig. 15 – Estudo cromático da plataforma

Estudo da grelha (atomic base e macro grid units)

Para a construção da grelha dividiu-se a página em 8 grandes colunas (com 100 pixéis cada), 9

goteiras (de 10 pixéis) e uma margem de 134 pixéis, ou seja, 67 pixéis à esquerda e outros

tantos à direita.

Desta forma, a área útil de plataforma são 890 pixéis, uma área relativamente reduzida,

relativamente a toda a área do browser. Estas opções devem-se ao facto da plataforma ser

otimizada pensando no computador “Magalhães”, com resoluções de 1024 pixéis por 600

pixéis e também por ser desenhada para crianças dos 6 aos 10 anos, evitando desta forma as

barras de scroll.




Fig. 16 – Estudo da grelha

Composição de ecrãs únicos

Em relação à plataforma, esta apresenta um design minimalista, claro, à base de linhas

direitas.

Fig. 17 – Grelha do ecrã inicial




Fig. 18 – Grelha do ecrã de entrada

Fig. 19 – Grelha do ecrã de registo




Fig. 20 – Grelha do ecrã de login

Fig. 21 – Grelha do ecrã “Casa”




Fig. 22 – Grelha do ecrã de criação de histórias




Especificação técnica

Para a especificação da aplicação foi usado como modelo o computador pessoal “Magalhães”

uma vez que este é o que estará mais facilmente disponível ao público-alvo e é um

computador pouco avançado tecnologicamente quando comparado com outros computadores

no mercado atual.

As características principais deste dispositivo são:

Processador: Intel Atom de 1.60 MHz,

Memória RAM de 1GB,

Disco rígido de 30 GB (particionados do seguinte modo - 10GB Windows; 10GB Linux CM; 10GB

Dados do utilizador)

Ecrã de 9 polegadas com uma resolução de 1024 × 600 pixels.

Como tal, foi decidido que as tecnologias a ser utilizadas do lado do utilizador seriam algo

ultrapassadas para garantir que não existem erros de compatibilidade. As tecnologias

utilizadas serão: MySQL, PHP5.4.0, HTML4.01, CSS2, ActionScript2.0 e XML1.0.




Arquitetura do Sistema

A base de dados usa MySQL que é processado no servidor por ficheiros PHP. A informação

gerada é transposta para HTML, CSS, XML e ActionScript e enviada para o browser do

utilizador. O XML é depois lido pela aplicação Flash.

Fig. 23 – Arquitetura do Sistema




Mapa de Navegação

A aplicação estará centrada na zona “Home” e é possível aceder-lhe a partir da maior parte da

aplicação. É possível aceder a essa zona fazendo o registo/login. A partir dessa zona é possível

aceder a todas as funções da aplicação (criação e consulta de histórias, edição do perfil,

interação social, etc…).

Fig. 24 – Mapa de Navegação




Fluxograma

Nestes fluxogramas são demonstrados os logaritmos “Registo”, “Carregar Fotografia” e “Login”

a ser utilizados na aplicação.

Na função “Registo” o utilizador insere os dados requeridos (nome de utilizador, palavra-

passe, nome, apelido, e-mail, género, país, cidade, escola e avatar). Se o nome de utilizador já

existir, a aplicação não permite o registo; se não existir, um novo registo é adicionado à base

de dados.

Na função “Carregar Fotografia”, o utilizador adiciona uma imagem à base de dados que lhe

fica associada.

Na função “Login”, os dados inseridos na aplicação (nome de utilizador e palavra-passe) são

comparados com os registos da base de dados. Se os dados inseridos forem os corretos, o

utilizador entra na aplicação; se os dados estiverem errados, a aplicação não lhe permite a

entrada.

Fig. 25 – Fluxograma 01




Nestes fluxogramas são explicados os logaritmos “Partilhar Histórias”, “Convidar Amigos” e

“Aceitar Amigos”.

Na função “Partilhar Histórias”, o utilizador seleciona uma história da sua lista e escolhe os

amigos com os quais a quer partilhar. Uma mensagem de aviso é-lhes enviada.

Na função “Convidar Amigos”, o utilizador procura no registo de utilizadores um nome. Esse

nome é comparado com os registos na base de dados, o utilizador escolhe o utilizador da lista

apresentada e é automaticamente enviada uma mensagem com o pedido para o utilizador

escolhido.

Na função “Aceitar Amigos”, o utilizador lê a mensagem enviada com o pedido e pode negá-lo

ou aceitá-lo. Se aceitar, ambos os utilizadores são registados como amigos.





Nestes fluxogramas são demonstrados os logaritmos “Editar Perfil”, “Mensagens” e

“Recuperar Password”.

Na função “Editar Perfil”, o utilizador modifica alguns dos dados do seu perfil (nome, palavra-

passe e avatar) ou apaga-os. Os dados modificados são atualizados na base de dados.

Na função “Mensagens”, o utilizador lê as suas mensagens registadas na base de dados e pode

responder-lhes. Se escolher “responder”, uma nova mensagem é registada na base de dados.

Na função “Recuperar Password”, o utilizador insere o seu e-mail e a aplicação envia uma

mensagem para esse e-mail com uma nova palavra-passe.





Nestes fluxogramas são explicados os logaritmos “Criar História” e “Modificar História”.

Na função “Criar História”, o utilizador dá um nome e adiciona objetos à sua história. Pode

depois finalizar a sessão de criação publicando a história (o que cria um ficheiro externo) ou

guardando o trabalho para ser finalizado posteriormente. Ambas as opções gravam a história

criada na base de dados.

Na função “Modificar História”, o utilizador pode alterar uma história já criada. O utilizador

escolhe uma das suas histórias de uma lista, modifica/adiciona/remove objetos e grava as

alterações. Aqui pode também publicar as alterações num ficheiro externo ou guardar para

depois. Ambas as opções gravam as modificações na base de dados.





Modelo de Base de Dados

Na base de dados estão armazenados os dados dos utilizadores, as mensagens enviadas entre

eles, as histórias criadas e os objetos com que podem ser criadas. Os dados pessoais do

utilizador são guardados numa só tabela (“user”). Esta tabela é o centro da base de dados e

estabelece ligações com as principais tabelas usadas na aplicação. A tabela “historias” guarda

informação sobre as histórias produzidas pelo utilizador, mais propriamente quais os objetos

utilizados, a sua localização e que texto lhes foi adicionado (se aplicável). O nome da história

criada é armazenado na tabela que relaciona o utilizador com a história. Os objetos usados

para a criação da história são guardados por categoria na tabela “objetos”. A tabela “avatar”

guarda as escolhas feitas pelo utilizador para a criação da sua representação virtual. As

comunicações entre os utilizadores (mensagens e pedidos de amizade) são guardados na

tabela “mensagens” juntamente com o remetente, destinatário, data de envio e estado

(lido/não lido).

Fig. 29 – Modelo da Base de Dados




Reflexão

A finalização da especificação gráfica e técnica permitiu-nos completar o estudo da imagem da

aplicação e a consolidação das escolhas efetuadas até então, tanto a nível gráfico como a nível

técnico. Permitiu-nos também avançar com a produção da aplicação no que toca a elementos

visuais, distribuição das áreas da aplicação, estruturação das componentes de armazenamento

de dados, logaritmos necessários ao seu funcionamento e caminhos de navegação esperados

do utilizador.




Bibliografia

− http://kuler.adobe.com/#create/fromacolor [visitado a 21/03/2012];

− http://www.typetester.org/ [visitado a 21/03/2012];

− http://www.dgidc.min-edu.pt/eescolinha/Mod1_Maga.html [visitado em 29-03-2012];

− http://www.gliffy.com/ [visitado em 29-03-2012];

− http://www.clker.com/clipart-3512.html [visitado em 30-03-2012];

− http://www.clker.com/clipart-black-and-white-trash-can.html [visitado em 30-03-

2012];

− http://www.clker.com/clipart-4755.html [visitado em 30-03-2012];

− http://www.clker.com/clipart-2809.html [visitado em 30-03-2012].

http://kuler.adobe.com/#create/fromacolor

http://www.typetester.org/

http://www.dgidc.min-edu.pt/eescolinha/Mod1_Maga.html

http://www.gliffy.com/

http://www.clker.com/clipart-3512.html

http://www.clker.com/clipart-black-and-white-trash-can.html



Documents

Especificação gráfica & técnicastorage.campus.ua.sapo.pt/files/88b2d60bfd556a7b97... · Inicialmente partiu-se de uma abordagem onde o logótipo apresentava uma única cor, porém,