Especificação Gráfica - Projecto Uaquest

Sed pretium elit ut erat feugiat porttitor. Morbi sit amet lacus venenatis leo imperdiet accumsan.
Donec egestas ultricies venenatis. Aliquam ac tortor ut odio. Duis luctus posuere tellus, vitae placerat mauris iaculis at. Fusce mattis, risus eu aliquet placerat, nulla nibh volutpat lorem, eget ultrices enim tellus eget orci. Integer vel arcu ac ipsum condimentum semper vitae ac nibh.
Sed pretium elit ut erat feugiat porttitor. Morbi sit amet lacus venenatis leo imperdiet accumsan. Donec egestas ultricies venenatis. Aliquam ac tortor ut odio.
uaQuest - manual de identidade

Sed pretium elit ut erat feugiat porttitor. Morbi sit amet lacus venenatis leo imperdiet accumsan. Donec egestas ultricies venenatis. Aliquam ac tortor ut odio. Duis luctus posuere tellus, vitae placerat mauris iaculis at. Fusce mattis, risus eu aliquet placerat, nulla nibh volutpat lorem, eget ultrices enim tellus eget orci. Integer vel arcu ac ipsum condimentum semper vitae ac nibh.
02
manual de idenitidade da marca

Disciplina de Projecto 2012 Universidade de Aveiro - Novas Tecnologias da Comunicao
Elaborado por: 49490 - Daniel Silva 50011 - Joo Costa

Orientadores: Helder Caixinha Licnio Mano

03
ndice
introduo nome registo grfico marca rea de proteco verses monocromticas sistema cromtico sistema cromtico secundrio sistema tipogrfico hierarquia tipogrfica aplicao sobre fundos reduo de escalas aplicao cone da aplicao cones e controlos grelhas de cinzentos interface da aplicao interface da aplicao e grelhas de cinzentos interface e contexto 05 06 07 07 08 09 10 11 12 13 14 15 16 16 17 20 29 38 47

04

05
introduo
O presente documento tem por objectivo apresentar duas seces correspondentes ao projecto uaQuest, desenvolvido no mbito da disciplina de Projecto do curso de Novas Tecnologias da Comunicao. A primeira parte visa a apresentao do manual relativo marca uaQuest. Este documento contempla o conceito, o logtipo e a sua forma de uso, sistema cromtico e sistema tipogrfico, e por ltimo, o estudo de escalas. A segunda seco apresenta o ambiente e organizao grficos da aplicao a desenvolver. Engloba assim, o estudo de grelhas dos ecrs nicos, apresentando as grelhas de cinzentos com as medidas dos vrios elementos, os ecrs nicos finalizados demonstrando o estilo grfico a adoptar, a apresentao dos cones da aplicao e a sua forma de uso.

06
nome
O nome vai construir a essncia da marca e no deve ser escolhido de forma leviana. No caso deste projecto procurou-se efectuar uma escolha que fosse de encontro aos ideais do projecto - desafio, descoberta, interaco social. Sendo que o projecto engloba um jogo de descoberta da Universidade de Aveiro, pretende-se tambm que o nome seja identificativo do local. O nome uaQuest remete-nos para os valores que pretendemos efectivamente transmitir. A "Quest" reflecte um sentido, um objectivo, algo a ser atingido, descoberta. O ua efectua precisamente a ligao universidade desejada. Na escolha do nome foi tido em conta, no s, o facto de no existir, mas tambm o seu significado. A parte Quest tem um significado bastante enraizado entre os amantes de Role Playing Games, tornado o grau de associao ao conceito pretendido ainda maior.
The right name is timeless, tireless, easy to say and remember; it stands for something, and facilitates brand extensions. Its sound has rhythm
Wheeler, A. (2009), Designing Brand Identity
Na definio do nome procurmos que tivesse uma sonoridade agradvel e uma fcil pronncia. facilmente pronuncivel mesmo por pessoas que no dominem o ingls, uma vez que pronunciado da mesma forma que escrito.

07
registo grfico
marca
Pretendia-se que o logtipo assumisse um estilo futurista, de modo a transmitir os valores do projecto e a ideia de tecnologia e inovao associada prpria universidade. A partir desta ideia, o nome, foi personalizado partindo do uso do tipo de letra Orbitron, o qual foi estilizado para se assemelhar a uma interface futurista. A aparente quebra do nome representa os enigmas, as peas que os jogadores tm de encaixar para completar o jogo. O logtipo desenvolvido recorrendo ao azul uaQuest e ao branco, sendo utilizados brilhos e transparncias para acentuar o estilo pretendido. O branco representa a luz, sendo associado ao xito e ao sucesso, e o azul representa a compreenso, a tranquilidade, a paz, associando desta forma a universidade a um local calmo de conhecimento e sucesso, valores positivos a transmitir aos novos alunos.

08
registo grfico
rea de proteco
As reas de proteco do logtipo foram definidos tendo em conta a medida dos tringulos existentes. Desta forma preserva-se o logo contra outros elementos grficos. A rea de proteco exterior, refere-se rea mnima entre o logtipo e outros elementos, enquanto que a rea interna, corresponde distncia entre o texto e as linhas contentoras.

09
registo grfico
verses monocromicas
As verses monocromticas devem ser utilizadas, em detrimento da policromtica, sempre que no for possvel garantir a sua correcta utilizao em cores. Foram assim desenvolvidas duas verses, fundos escuros e claros.

10
registo grfico
sistema cromtico
web: #22DDDD rgb: r34 g211 b211 cmyk: c60% y0% m22% k0%
A aplicao baseia a sua identidade essencialmente em trs cores. O fundo da aplicao ir utilizar um padro semelhante ao carbono, no entanto, quando no possvel, ir ser utilizada a cor azul-escura. A cor principal de toda a aplicao reside no azul uaQuest, assim denominado para fcil referncia, sendo utilizado para todos os elementos da interface. O branco insere-se para efeitos de contraste, como os elementos textuais. O azul-escuro encontra a sua utilizao apenas em certos itens da aplicao utilizando-se como fundo semi-transparente. O vermelho utilizado para apresentar certos elementos em caso de erro. Este novamente utilizado de forma semi-transparente para suavizar a tonalidade.
azul uaQuest
web: #EC1C24 rgb: r236 g28 b36 cmyk: c1% y99% m97% k0%
web: #141414 rgb: r20 g20 b20 cmyk: c73% y67% m66% k81%
web: #FFFFFF rgb: r255 g255 b255 cmyk: c0% y0% m0% k0%
vermelho
azul escuro
branco

11
registo grfico
sistema cromtico secundrio
A aplicao possui uma palete de trs cores secundrias utilizadas especialmente para a construo dos itens.
web: #F7EE5C rgb: r247 g238 b92 cmyk: c6% y0% m77% k0%
web: #50C878 rgb: r80 g200 b120 cmyk: c6% y0% m77% k0%
web: #94D74A rgb: r148 g215 b74 cmyk: c46% y0% m91% k0%
amarelo claro
verde esmeralda
verde claro

12
registo grfico
sistema tipogrfico
A aplicao utiliza essencialmente dois tipos de letra. Um dedicado aos titulos e elementos da interface - Orbitron. Este tipo de letra vai de econtro ao estilo futurista da aplicao, atravs do seu estilo rectilneo. Para os elementos textuais foi escolhida uma letra, que alm do facto de remeter para o futurismo, de fcil leitura - Muli.
Orbitron
ABCDEFGHIJKLMNOPQSTUVWXYZ abcdefghijklmnopqstuvwxyz 0123456789
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet sodales leo non faucibus. Curabitur est lectus, vehicula at tempus nec, hendrerit non nunc.
Muli
ABCDEFGHIJKLMNOPQSTUVWXYZ abcdefghijklmnopqstuvwxyz 0123456789
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet sodales leo non faucibus. Curabitur est lectus, vehicula at tempus nec, hendrerit non nunc.

13
registo grfico
hierarquia tipogrfica
Durante a aplicao, o tipo de letra Orbitron apenas deve ser utilizado em elementos com um nmero de caracteres reduzidos, como botes ou identificadores de ecr. Esta deve ser apresentada a branco com um tamanho de 14px. Para assegurar uma correcta legibilidade, os textos e elementos com um elevado nmero de caracteres devem ser apresentados com o tipo de letra Muli, tambm a branco, mas com 12px.
Nome do elemento com 14px

Tipo de letra para texto com 12px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet sodales leo non faucibus. Curabitur est lectus, vehicula at tempus nec, hendrerit non nunc.

14
registo grfico
aplicao sobre fundos
O logtipo no encontra utilizao em fundos claros, no entanto foi desenvolvida uma verso policromtica adaptada para ser utilizada caso necessrio. aqui apresentada a aplicao do logtipo da uaQuest sobre vrios tipos de fundos grficos, representando vrias tonalidades.

15
registo grfico
reduo de escalas 100%
O logtipo ir sobretudo ser integrado numa interface mvel, no entanto pode assumir vrias dimenses consoante o aparelho. Torna-se pertinente apresentar o logtipo em vrias dimenses para compreender se este se mantm legvel. , assim, apresentado a 100%, 75%, 50% e 25%.
75%
50%
25%

16
aplicao
cone da aplicao
Sendo uma aplicao para um dispositivo mvel tornou-se necessrio desenvolver um cone para o menu do prprio telemvel. Foi utilizado o tema do logtipo principal, no entanto apenas se utilizou o Q como como smbolo para uaQuest. Utilizou-se esta abordagem uma vez que, sendo a nica letra maiscula no nome, um elemento distintivo.
48x48px
O cone foi desenvolvido com 48px de lado, correspondentes aos valores definidos para os cones num dispositivo Android de densidade mdia. Ser posteriormente necessrio modificar o cone para os dispositivos de densidade baixa, alta e muito alta.

17
aplicao
cones e controlos
So aqui apresentados so vrios cones a serem utilizados na aplicao, sendo que estes variam entre o azul e o branco representando os vrios estados. Todos os elementos possuem um brilho de 5px que, quando desenhado em azul, apresentam uma transparncia de 50% e, quando desenhado em branco, a transparncia reduzida para 30%.
Confirm
Confirm
Confirm
Confirm
Os botes iro possuir quatro estados, sendo representados pela seguinte ordem: activo, focado, pressionado, bloqueado. Tm uma dimenso de 110x30px.
Os botes referentes aos itens do inventrio, por exemplo, apenas so necessrios trs estados: activo, focado, pressionado. Neste caso o ltimo estado, representado a vermelho, indica um erro e apenas utilizado quando o utilizador tenta combinar itens incompatveis na mesa de montagem. Dimenso de 48x48px.

18
aplicao
cones e controlos
Os cones referentes aos marquers no mapa, apresentam-se em duas cores. O marquer azul representa a posio do utilizador no mapa, enquanto o vermelho representa o ponto de interesse para onde se tem de dirigir.
Para apresentar as vrias caractersticas que os itens podem conferir aos avatares foram desenhados cinco cones. Estes so construdos com apenas uma cor, azul uaQuest, utilizando transparncias para simular a alterao de tonalidades. Da esquerda para a direita, os cones representam: energia, vida, defesa, ataque e velocidade. So utilizados com uma dimenso mxima de 20x20px.
Itens so criados atravs de formas geomtricas sem qualquer ligao sua funo, gerando assim cdigo novo recheado de futurismo. Estes cones so apenas exemplos, devendo sempre estar centrados na caixa. Numa caixa de 48x48 no devem exceder os 28x28px, enquanto numa caixa de 64x64 no devem exceder os 38x38px

19
aplicao
cones e controlos
Os cones apresentados representam as opes passives de serem tomadas no menu da mesa de combate: combate, trocas e loja. No sendo necessrio o estado bloqueado, estes cones tambm apresentam apenas trs estados: activo, focado, pressionado. Sendo os cones principais no menu, so apresentados com uma dimenso de 100x100px

20
aplicao
grelhas de cinzentos
Com a grelha de cinzentos pretende-se demonstrar como os elementos esto organizados na interface e quais as dimenses que estes iro assumir. Ecr de login - Apresentado ao utilizador caso este necessite de se autenticar.

21
aplicao
Ecr de tutorial - Apresentado ao utilizador na primeira utilizao de cada ecr.

22
aplicao
Ecr mapa - Corresponde ao ecr principal e apresenta o mapa do campus, com a localizao do utilizador e para onde este se tem de deslocar

23
aplicao
Ecr menu de mesa de combate - Apresenta o menu da mesa de combate aps validao da tag correspondente.

24
aplicao
Ecr de combate - Apresentado no decorrer de um combate.

25
aplicao
Ecr de trocas - Apresentado ao utilizador assim que este escolher a opo trocas do menu da mesa de combate.

26
aplicao
Ecr de loja - Apresentado ao utilizador assim que este escolher a opo loja no menu da mesa de montagem. Permite a compra de itens.

27
aplicao
Ecr de inventrio - Apresenta o inventrio do jogador.

28
aplicao
Ecr de mesa de montagem - Apresentado ao utilizador assim que este validar a tag da mesa de montagem. Permite combinar as partes de um item lendrio.

29
aplicao
interface da aplicao
Nesta seco apresentada a interface dos ecrs nicos da aplicao mvel tendo sido desenhada a partir das grelhas definidas. Ecr de login - Apresentado ao utilizador caso este necessite de se autenticar.

30
aplicao

31
aplicao

32
aplicao

33
aplicao

34
aplicao

35
aplicao

36
aplicao

37
aplicao

38
aplicao
interface da aplicao e grelhas de cinzentos
Com vista a compreender qual os alinhamentos e distribuio dos elementos na interface, aqui apresentada com as linhas guia, e dimenses sobrepostas. Ecr de login - Apresentado ao utilizador caso este necessite de se autenticar.

39
aplicao

40
aplicao

41
aplicao

42
aplicao

43
aplicao

44
aplicao

45
aplicao

46
aplicao

47
aplicao
interface e contexto
De modo a percepcionar a interface no seu contexto, alguns ecrs exemplo foram inseridos num esqueleto de um dispositivo Android.

48
aplicao

49
aplicao

Especificação Gráfica - Projecto Uaquest

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Especificação Gráfica - Projecto Uaquest

Enviado por

Direitos autorais:

Formatos disponíveis

Sed pretium elit ut erat feugiat porttitor. Morbi sit amet lacus venenatis leo imperdiet accumsan.

uaQuest - manual de identidade

manual de idenitidade da marca

Elaborado por: 49490 - Daniel Silva 50011 - Joo Costa

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

sistema cromtico secundrio

uaQuest - manual de identidade

uaQuest - manual de identidade

Nome do elemento com 14px

uaQuest - manual de identidade

aplicao sobre fundos

uaQuest - manual de identidade

reduo de escalas 100%

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

Ecr de tutorial - Apresentado ao utilizador na primeira utilizao de cada ecr.

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

Ecr de combate - Apresentado no decorrer de um combate.

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

Ecr de inventrio - Apresenta o inventrio do jogador.

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

Ecr de tutorial - Apresentado ao utilizador na primeira utilizao de cada ecr.

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

Ecr de combate - Apresentado no decorrer de um combate.

uaQuest - manual de identidade

uaQuest - manual de identidade

uaQuest - manual de identidade

Ecr de inventrio - Apresenta o inventrio do jogador.

uaQuest - manual de identidade

uaQuest - manual de identidade

interface da aplicao e grelhas de cinzentos

uaQuest - manual de identidade

interface da aplicao e grelhas de cinzentos

Ecr de tutorial - Apresentado ao utilizador na primeira utilizao de cada ecr.

uaQuest - manual de identidade

interface da aplicao e grelhas de cinzentos

uaQuest - manual de identidade

interface da aplicao e grelhas de cinzentos

uaQuest - manual de identidade

interface da aplicao e grelhas de cinzentos

Ecr de combate - Apresentado no decorrer de um combate.

uaQuest - manual de identidade

interface da aplicao e grelhas de cinzentos