Issuu on Google+

Ă?ndice


Especificação gráfica e técnica

Universidade de Aveiro

Í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

2 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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.

3 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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.

4 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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.

5 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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

6 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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

7 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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.

8 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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

9 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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

10 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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.

11 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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

12 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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.

13 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

Página obra

Figura 13 – Estrutura ecrã da obra

14 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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.

15 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

Página de perfil

Figura 15 – Estrutura ecrã de perfil

16 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

17 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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.

18 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

Mapa de navegação Utilizador Não Registado

Homepage Resultados Pesquisa

Registo

Autor

Lista de Autores

Obras Recentes

Obras Mais Vistas

Timeline

Obra

Contactos

FAQ

Obra *

Contactos

FAQ

Funcionalidade presente em todas as páginas (pois está no header): Pesquisa; Registo.

Utilizador Registado Homepage Inserir Obra

Resultado Pesquisa

Autor

Lista de Autores

Obras Recentes

Obras Mais Vistas

Editar Obra

Timeline

Perfil de Utilizador

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 – caixa de comentários. 19 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

Administrador

Homepage Painel de Controlo *

Obra **

Resultados Pesquisa

Autor

Lista de Autores

Obras Recentes

Obras Mais Vistas

Timeline

Editar Obra

Perfil de Utilizador

Contactos

Editar Perfil

Funcionalidades presentes em todas as páginas (pois estão no header): Login/logout; Pesquisa; Perfil.

* Funcionalidade presente apenas na página Painel de Controlo: Aprovar/rejeitar/editar as obras inseridas. ** Funcionalidade presente apenas na página Obra: Facebook Connect – moderar comentários.

20 Helder|Lorenzo|Sofia

FAQ


Especificação gráfica e técnica

Universidade de Aveiro

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. 21 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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

22 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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

23 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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. 24 Helder|Lorenzo|Sofia


Especificação gráfica e técnica

Universidade de Aveiro

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.

25 Helder|Lorenzo|Sofia


museu virtual de design português