museu virtual de design português

Índice

Especificação gráfica e técnica Universidade de Aveiro

2 Helder|Lorenzo|Sofia

Índice

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

Nome ........................................................................................................................................ 4

Estudo gráfico ........................................................................................................................... 5

Logomarca + lettering = Logotipo .......................................................................................... 5

Escala do logótipo ................................................................................................................. 5

Área de protecção ................................................................................................................. 6

Estudo tipográfico ................................................................................................................. 7

Estudo de ícones e controlos..................................................................................................... 8

Estudo cromático ...................................................................................................................... 8

Estudo cromático do logotipo ............................................................................................... 8

Estudo cromático de interfaces ........................................................................................... 10

Directizes de tratamento fotográfico, conteúdo .................................................................. 11

Estudo de interfaces ............................................................................................................... 12

Estudo de interacção .............................................................................................................. 18

Mapa de navegação ................................................................................................................ 19

Arquitectura do Sistema ......................................................................................................... 21

Fluxogramas ......................................................................................................................... 22

Base de Dados ........................................................................................................................ 24



Introdução

A elaboração da especificação gráfica e técnica é uma fase importante para o

desenvolvimento de um bom projecto, visto que é a partir desta que os grafismos e os

processos técnicos ficam decididos.

No que diz respeito à especificação gráfica, esta permite a criação da identidade do

projecto de forma apelativa e criativa, apelando a atenção do seu público-alvo. A

especificação técnica permite saber que características e funcionalidades do sistema

serão implementadas na plataforma.

Sendo assim, este documento subdivide-se pelo estudo gráfico, tipográfico, cromático,

interfaces e interacção. Já na específicação técnica subdivide-se pelo mapa de

navegação, arquitectura do sistema, fluxogramas e pela base de dados do website.



Nome

MUSEU VIRTUAL DE DESIGN PORTUGUÊS

O nome deste projecto é Museu Virtual de Design Português e representa um espaço

online onde é inserida informação sobre a área do Design Português. Sendo um

projecto que já existia antes de nos ser atribuído, a questão do nome já tinha sido

resolvida. Inicialmente, chamava-se de História do Design Português, mas devido às

novas circunstâncias o nome passou a ser Museu Virtual de Design Português.

Com isto, fizemos um pequeno estudo sobre o nome de forma a percebermos se é o

mais indicado ou não para o projecto.

O termo Museu representa um lugar onde se reúnem curiosidades de qualquer

espécie ou exemplares científicos, artísticos, etc. O Virtual representa algo que é

realizado e simulado através de meios electrónicos. O Design é uma disciplina que visa

a criação de objectos, ambientes, obras gráficas, entre outras, sendo ao mesmo tempo

funcionais, estéticos e conformes ao imperativo de uma produção industrial. O

Português representa uma língua oficial ou uma pessoa pertencente a Portugal.

Análise swot:

Forças: O nome consegue representar o conceito do projecto ao usar a palavra Museu

que caracteriza o lugar, a palavra Virtual a plataforma, a palavra Design o tema em e o

Português a nacionalidade dos artistas.

Oportunidades: O nome é um dos elementos que caracteriza o projecto fazendo com

que este seja divulgado por todo o território nacional e quem sabe internacional.

Fraquezas: O nome Museu Virtual de Design Português é bastante extenso, causando

alguns problemas na memorização por parte do público-alvo e posicionamento visual.

Ameaças: Devido à novidade do projecto no mercado, a criação de outras plataformas

com nomes semelhantes é uma grande ameaça.



Estudo gráfico

Logomarca + lettering = Logotipo

O logótipo tem como objectivo representar o conceito do produto de forma apelativa

e que seja entendido por parte do público-alvo. Este logótipo é composto por uma

logomarca e por um lettering.

A ideia para a construção da logomarca surgiu da conjugação de dois termos que

representam o conceito do projecto, o Design e o Português. Ou seja, usando as letras

D e P conseguiu-se criar uma forma simples e apelativa, dando grande destaque visual

ao logótipo. O lettering é representado através de um tipo de letra original

encontrando-se bem organizado. O stroke nas palavras Design Português dá maior

destaque em relação ao Museu Virtual.

Figura 1 – Logótipo da marca

Escala do logótipo

A redução de escalas têm de garantir a legibilidade da identidade. Neste caso, quando

o logótipo é reduzido a 25%, a leitura do lettering já se torna um pouco complexa, mas

a da logomarca encontra-se bem legível.



Figura 2 – Redução logótipo

Área de protecção

As logomarcas necessitam de espaço à volta para aumentar a sua visibilidade. A caixa

que está representada na logomarca define o espaço livre mínimo que deve ser

respeitado.

Figura 3 – Área de protecção



Estudo tipográfico

Museu Virtual de Design Português é direccionado para a divulgação de designers e

obras portuguesas, logo o uso de uma tipografia portuguesa é considerada ouro sobre

azul. É importante divulgar os trabalhos dos nossos artistas porque há muito talento

no nosso país e este não é tão visível como devia de ser.

Sendo assim, a marca Museu Virtual de Design Português usa a tipografia de um

designer português, Natanael Gama, chamada Exo. Caracteriza-se como uma fonte

moderna e original, usando caracteres com formas um pouco diferentes, não

perdendo a sua leitura. Esta tem uma família de fontes muito completa, contendo

nove tipos em versão regular e em itálico e faz parte da categoria Sans Serif.

Figura 4 – Tipo de letra Exo



Estudo de ícones e controlos

Ao longo da plataforma, o utilizador poderá encontrar alguns ícones que representam

acções e aos quais são esperados resultados finais. Sendo assim, estes terão

diferentes estados: o estado actual representado pelo vermelho e o estado de hover e

pós-clique pelo cinzento.

Figura 5 – Exemplos de ícones

Os ícones aqui apresentados foram alvo de estudo, de forma a percebermos quais os

mais indicados para ajudar o utilizador a interagir com a plataforma, como por

exemplo, ajudar a classificar e a navegar pelas diversas obras através da sequência de

bolinhas e estrelas ou então ajudar a editar as informações do seu perfil, através do

lápis. No entanto, poderá exisitir a necessidade de usar mais ícones do que os

apresentados na figura 5.

Estudo cromático

Estudo cromático do logotipo

O logótipo é sempre reprsentado por uma única cor. Neste caso o vermelho pode ser

considerado a cor ofícial, representando uma cor quente, viva e cheia de energia.

Quando o logótipo se encontra sobre superfícies claras o vermelho é a cor

predominante, mas se for ao contrário, a cor do logótipo passa a ser branco para que

se possa contrastar e ter uma boa leitura.



Figura 6 – Informação cor vermelha

Policromático Positivo

Figura 7 – Logótipo policromático positivo

Policromático Negativo

Figura 8 – Logótipo policromático negativo



Estudo cromático de interfaces

Ao longo da plataforma, o uso das cores e das formas não irão variar muito,

conseguindo uma unidade no design singular. A utilização de uma paleta de cores faz

com que esta tenha uma coerência visual, representando a marca no seu melhor.

Figura 9 – Paleta de cores



Figura 10 – Ecrã principal

Segundo a paleta de cores, usamos o vermelho para o header do website, dando

grande destaque visual ao logótipo, que se encontra em policromático negativo.

Para os fundos conjugamos os diferentes tons de cinzento criando um ambiente

coerente e bastante apelativo.

Directizes de tratamento fotográfico, conteúdo

O projecto Museu Virtual de Design Português dá a possibilidade de os utilizadores

registados inserirem os conteúdos que irão dar vida à plataforma, logo para que seja

possível, os utilizadores tem que cumprir algumas limitações.

No que diz respeito ao upload de imagens, estas tem que ter uma resolução (px)

mínima de 400x400px e máxima de 1920x1080px; um tamanho máximo de 4 MB; e

uma qualidade mínima de 72 DPIs.



Relativamento à informação escrita, deve ser da autoria do próprio utilizador, não

contendo erros ortográficos nem repetições (informação enviada para o moderador).

Estudo de interfaces

Estudo da grelha

Durante a fase de especificação gráfica, foi necessário efectuar a divisão das páginas

em áreas e estabelecer as suas dimensões. Todas as páginas tem um header (com um

menú) e um footer sempre iguais, mudando só a estrutura do corpo. A largura máxima

do nosso layout é de 960px e a mínima é de 320px, isto porque o website tem de ter

uma estrutura adaptável tanto ao mobile como para a web.

Página

Principal

Figura 11 – Estrutura ecrã principal



Figura 12 – Ecrã principal com grelha

A página principal contém um header e um footer como já foi referido. Na zona do

corpo esta tem uma estrutura parecida com uma galeria, apresentando diversas

imagens das obras dos autores. Ou seja, esta tem como objectivo destacar as obras

mais recentes que são introduzidas na plataforma.



Página obra

Figura 13 – Estrutura ecrã da obra



Figura 14 – Ecrã da obra com grelha

A página da obra segue a mesma linha visual que a página inicial, mudando só a

estrutura do corpo. Este apresenta-se em duas colunas, distribuíndo a informação de

uma forma visualmente correcta, ou seja, colocação de imagens à esquerda e do texto

à direita. Contém também um espaço para os comentários no fundo da página, que

serão feitos à obra pelos utilizadores.



Página de perfil

Figura 15 – Estrutura ecrã de perfil





Figura 16 – Ecrã do perfil com grelha

A página de perfil do utilizador é outro caso de um layout com uma estrutura do corpo

diferente, ou seja, esta encontra-se representada por dois rectângulos horizontais,

onde são editados os dados do utilizador e visualizadas as obras que este insere na

plataforma.

Estudo de interacção

Sendo um projecto direccionado para os utilizadores interessados em artes criativas,

que querem saber um pouco mais sobre o design português, estes tem que ter uma

boa interação com a plataforma. Através do API do facebook, podem visualizar toda a

informação presente e ainda comentar, gostar e partilhar com todos os seus

amigos/conhecidos, divulgando também o website.



Mapa de navegação

Homepage

Registo Resultados Pesquisa

Autor Lista de Autores

Obras Recentes

Obras Mais Vistas

Timeline Obra Contactos FAQ

Utilizador Não Registado

Funcionalidade presente em todas as páginas (pois está no header):

Pesquisa;

Registo.

Utilizador Registado

Homepage

Inserir Obra

Editar Obra

Resultado Pesquisa


Obras Recentes

Obras Mais Vistas

Timeline Obra *

Perfil de Utilizador

Contactos FAQ

* Funcionalidade presente apenas na página Obra:

Facebook Connect – caixa de comentários.

Funcionalidades presentes em todas as páginas (pois estão no header):

Login/logout;

Pesquisa;

Perfil.



Homepage

Painel de Controlo *

Obra **

Editar Obra

Resultados Pesquisa


Obras Recentes

Obras Mais Vistas

Timeline Perfil de

Utilizador

Editar Perfil

Contactos FAQ

Administrador

Funcionalidades presentes em todas as páginas (pois estão no header):

Login/logout;

Pesquisa;

Perfil.

** Funcionalidade presente apenas na página Obra:

Facebook Connect – moderar comentários.

* Funcionalidade presente apenas na página Painel de Controlo:

Aprovar/rejeitar/editar as obras inseridas.



Arquitectura do Sistema

Este diagrama representa a arquitectura em que o Museu Virtual se baseia, tendo

como ponto de partida o pedido da página por parte do utilizador, através do browser.

Este pedido é encaminhado para o servidor Web, que vai utilizar a linguagem PHP para

interagir com o SQL, que por sua vez pede a informação necessária à Base de Dados.

Esta informação é devolvida ao servidor Web, seguindo para o browser; o Javascript e

o CSS actuam na camada mais próxima deste.

Pensando na crescente convergência da Web, o grupo decidiu ligar um Web Service ao

servidor Web do projecto: o Facebook Connect, através do plugin da caixa de

comentários, permitindo aos visitantes utilizarem a sua conta de Facebook para

comentar uma obra.



Fluxogramas

1. Login

O sistema faz a validação dos dados introduzidos e se, não houver nenhum erro,

avança para a verificação da existência do username. Aí compara-se a password

inserida com aquela existente na BD; se coincidirem é feito o login, que redirecciona o

utilizador para a homepage.

2. Registo



O sistema efectua a validação dos campos, seguindo-se a verificação da existência dos

dados introduzidos em relação à Base de Dados. Havendo sucesso nesta fase, os dados

são introduzidos na BD e o PHP encarrega-se de enviar uma email de activação de

conta. Depois do utilizador activar a sua conta, é redireccionado para a página

principal.

3. Pesquisa

Quando o utilizador pretende efectuar uma pesquisa, começa por inserir texto no

campo respectivo. Depois de submeter esse texto, é efectuada uma validação; se não

houver nenhum erro, o SQL procura a string na BD e apresenta os resultados.

4. Inserção de Obra



Neste processo, o utilizador tem a possibilidade de escolher um autor já existente no

sistema ou de introduzir um novo, preenchendo os campos pedidos. Em qualquer dos

casos, é obrigatório preencher os campos relacionados com a obra. Seguidamente é

efectuada uma validação por parte do sistema, que insere os dados na BD.

Numa segunda fase do processo, é necessário haver aprovação/rejeição da obra por

parte do administrador. Esta fica em standby e só é apresentada quando for aprovada.

No entanto, se a obra for rejeitada, o utilizador tem a possibilidade de a editar,

enviando-a de novo para aprovação.

Base de Dados

A Base de Dados que servirá o Museu Virtual de Design Português está aqui

representada em forma de diagrama. Todas as tabelas, bem como a maior parte dos

seus campos, já existem na versão actual do Museu.

Partindo desse ponto, o grupo decidiu acrescentar apenas dois campos de forma a

servir novas funcionalidades.



Um deles é o “código_activacao” que se encontra na tabela “utilizadores”: tem como

propósito armazenar o número aleatório que é gerado no envio do email de activação,

quando o utilizador faz o seu registo.

O segundo campo que foi adicionado encontra-se na tabela “obras” e tem o nome de

“activo”: permite que uma obra inserida fique em standby até o administrador do

sistema aprovar, usando para isso uma checkbox de activação.

Date post:	05-Feb-2016
Category:	Documents
Upload:	sofia-cruz
View:	217 times
Download:	0 times

museu virtual de design português

Documents