Ă?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