#4.1.

Especificao grfica
universidade de aveiro
departamento de comunicao e arte novas tecnologias da comunicao

docentes Benjamim Junior Helder Caixinha Ivo Daniel Pedro Amado

coordenador Jorge T. Ferraz de Abreu colaboradores Pedro Almeida Ricardo Pinto Rita Oliveira

elementos 49722 - lus melo 50766 - marina silva

ndice

Introduo Manual de identidade visual da marca Marca Logtipo Logtipo principal. Logtipo secundrio rea de proteo Escalas Paleta principal Paleta secundria Proteo da logomarca Sistema visual da aplicao Sistema cromtico Paleta principal Paleta secundria Iconografia e controlos Tipografia Opes tipogrficas Hierarquia tipogrfica Estudo de grelhas e ecrs nicos Estudo de cinzentos Simulao e ecrs nicos Concluso

4 5 6 8 9 9 10 11 12 13 14 15 16 17 18 19 28 29 30 31 32 39 52

Introduo

A especificao grfica uma das fases essenciais no desenvolvimento de qualquer projecto pois sem esta a aplicao no tem rosto. O seu papel fundamental para criar um processo de identificao da marca por parte do consumidor, e o objectivo deste documento demonstrar a construo da identidade visual do WiP iTV, tanto no que diz respeito logomarca como tambm aos layouts da aplicao.

1. Manual de identidade visual da marca

1.1. Marca

Perspective um projecto que indica Working in Perspective Working in que nos dedicamos - work = trabalho. a temtica a No entanto a criao do nome um processo complexo, principalmente para todos os projectos que se situem no mercado onde j existe grande nmero de concorrncia como o nosso caso. Assim, tendo em conta que existe uma diversidade elevada de aplicaes que ajudam o pblico na procura de emprego, a nossa diferencia-se pela sua mobilidade, ou seja, permitimos que o utilizador faa desta etapa algo cmodo, existindo trs plataformas - web, tv e mobile onde poder ver quais as ofertas mais indicadas para si de vrios pontos de acesso, da a busca de emprego ser encarada noutra perspectiva (perspective).
7

WiP

A logomarca foi criada com o intuito de integrar o objectivo da aplicao, recorrendo como base ao nome da mesma. Assim, o nome WiP desenhado com uma perspectiva fish-eye conferindo-lhe dinamismo e contemporaneidade. O mesmo acontece com o texto iTV, inserido com o intuito de clarificar qual a plataforma correspondente. A incluso da lupa no logtipo permite uma rpida associao ao conceito-chave deste projecto - procura de emprego. Este logtipo apenas utilizado na aplicao referente televiso interactiva.

logtipo principal logtipo secundrio

Em situaes que se justifiquem, como por exemplo, fundos com cores semelhantes e/ou iguais logomarca principal e impresso em diversos materiais, utilizamos duas possibilidades como logtipo secundrio. Isto permite manter a identidade visual da marca sem comprometer a sua legibilidade.

41px

330px

41px

290px

rea de proteo
Tendo em conta que o logtipo no apresenta uma forma linear, embora parte da lupa seja uma circunferncia, o manpulo da mesma criou a necessidade de uma rea de proteco rectangular evitando assim a interferncia visual com outros possveis elementos.

41px

41px

10

25%

50%

escalas
75%

Sabendo que o logtipo vai ser utilizado numa aplicao direccionada para a televiso e dada a distncia mdia entre a mesma e o utilizador, este deve ser perceptivel de modo a que consiga fazer com o consumidor associe esse smbolo empresa correspondente. Ao fazermos o estudo da reduo de escalas, percebemos que uma reduo de 25% em relao ao tamanho original o mximo que se poder atingir, pois uma reduo superior levaria falta de legibilidade do smbolo e posteriormente uma falha na percepo por parte do utilizador.

100%
11

paleta principal
Tendo em conta a informao recolhida acerca do design de aplicaes para televiso interactiva, optmos por utilizar cores pouco saturadas e garridas, sendo que o azul transmite tranquilidade, proteco, criatividade e conforto. Para realar o conceito de dimenso, volume e perspectiva na logomarca, utilizou-se um gradiente com dois tons de azul para o texto WiP iTV.

RGB: r:21 g:151 b:199 CMYK: c:78 m:26 y:8 k:0 Hex: #1597C7

RGB: r:123 g:204 b:217 CMYK: c:49 m:1 y:14 k:0 Hex: #7BCCD9

12

RGB: r:78 g:78 b:78 CMYK: c:65 m:58 y:57 k:36 Hex: #4E4E4E

RGB: r:176 g:172 b:169 CMYK: c:32 m:28 y:29 k:0 Hex: #B0ADA9

paleta secundria

RGB: r:214 g:213 b:213 CMYK: c:15 m:12 y:12 k:0 Hex: #D6D5D5

Como cor complementar utilizmos o cinzento, com recurso a vrios tons, com o intuito de realar o elemento secundrio da logomarca - a lupa. Esta escolha deve-se tambm ao facto da cor desempenhar um papel neutro no logtipo, dando assim espao para destaque ao nome da marca. A aplicao destes tons em gradiente refora o dinamismo que se pretende transmitir.

13

No deformar a logomarca

No alterar rotativamente a disposio da logomarca

da

proteo

No alterar as cores j predefinidas

No aplicar quaisquer efeitos logomarca

Sendo que a logomarca o rosto da WiP iTV, importante ter em ateno aos exemplos de aplicaes no permitidas, de forma a que se mantenha a consistncia e coerncia j construda pela marca junto do cliente.
No adicionar nenhuma moldura logomarca

WiP
No alterar a tipografia utilizada na logomarca

iTV

No utilizar a logomarca numa verso monocromtica

No aplicar a logomarca em fundos com cores iguais e/ou semelhantes ao sistema cromtico da mesma

14

2. Sistema visual da aplicao

15

2.1. Sistema cromtico

16

Nota: quando utilizada em fundo possui uma transparncia de 88%

RGB: r:13 g:14 b:30 CMYK: c:82 m:76 y:57 k:76 Hex: #0D0E1E

RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA

paleta principal
Como principais cores no que respeita aplicao, optmos por escolher duas tonalidades de azul. A razo destas cores corresponde ao facto de que na televiso deve-se tentar evitar cores demasiado saturadas bem como demasiado claras ou contrastantes. Dessa forma, consideramos que o azul escuro resulta como fundo da aplicao e para os botes e o azul claro para o focus e border correspondentes. Assim, mais fcil para o utilizador perceber qual a informao relevante, a que ele deve dar ateno, e qual a informao que secundria. Para alm disso, decidimos aplicar uma transparncia de 88% ao fundo azul escuro de forma a que o utilizador no sinta algum incmodo ou insegurana por ter perdido o canal que estava a ver antes de abrir a aplicao. Assim este sente-se mais seguro e confiante enquanto est a usufruir do WiP iTV. Em relao cor do texto, optmos pelo branco, uma vez que esta cor contrastante com os azuis escolhidos pelo que o utilizador consegue sempre saber qual ser a informao correspondente aos botes bem como perceber qual ser o resultado da aco com os mesmos. 17

RGB: r:230 g:231 b:232 CMYK: c:0 m:0 y:0 k:10 Hex: #E6E7E8

Sendo que a aplicao WiP iTV tem como base apenas tons de azul, e considerando que pretendemos manter a simplicidade, uma vez que estamos a utilizar um dispositivo que implica alguma distncia fsica com o consumidor, optamos por usar o minmo de cores possvel. Assim, e para no retirar o nfase ao contedo relevante, a cor secundria apenas se aplica nas estrelas referente ao rating.

RGB: r:255 g:222 b:23 CMYK: c:0 m:10 y:95 k:18 Hex: #FFDE17

paleta secundria

RGB: r:156 g:137 b:53 CMYK: c:38,67 m:37,73 y:96,12 k:9,25 Hex: #9C8935

18

2.2. Iconografia e controlos

19

Sem focus
Sem focus Com focus
28px

Sair

32px

Border de 1 px Canto redondo de 5px RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA

Fundo RGB: r:13 g:14 b:30 CMYK: c:85 m:79 y:57 k:77 Hex: #0D0E1E

Outter glow Cor: RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Opacidade: 50% Blux: 1px

Logout

Com focus
Ajuda

Border de 1 px Fundo Canto redondo de 5px RGB: r:2 g:138 b:170 RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Hex: #028AAA

Outter glow Cor: RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Opacidade: 50% Blux: 1px

20

Sem focus
Sem focus
63px

Com focus

Vdeos

54px

Border de 1 px Canto redondo de 7px RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA

Fundo RGB: r:13 g:14 b:30 CMYK: c:85 m:79 y:57 k:77 Hex: #0D0E1E

Outter glow Cor: RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Opacidade: 72% Blux: 2px

Fotografias

Com focus
Mais informao

i
Border de 1 px Canto redondo de 7px RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Fundo RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA

Outter glow Cor: RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Opacidade: 72% Blux: 2px

21

Sem focus
Gradiente radial - ngulo de 20,36 Interior RGB: r:213 g:215 b:216 CMYK: c:0 m:0 y:0 k:18 Hex: #D5D7D8 Exterior RGB: r:135 g:135 b:135 CMYK: c:0 m:0 y:0 k:47 Hex: #999B9E Outter glow Cor: RGB: r:142 g:142 b:142 CMYK: c:47 m:39 y:39 k:3 Hex: #8E8E8E Opacidade: 59% Blux: 1px

Sem rating ou Com rating ou focus focus

19px

Rating

18px 6px 6px

Com focus
Gradiente radial - ngulo de 20,36 Outter glow Cor: Exterior Interior RGB: r:142 g:142 b:142 CMYK: c:47 m:39 y:39 k:3 RGB: r:156 g:137 b:53 RGB: r:255 g:222 b:23 Hex: #8E8E8E CMYK: c:0 m:10 y:95 k:18 CMYK: c:38,67 m:37,73 y:96,12 k:9,25 Opacidade: 59% Hex: #9C8935 Hex: #FFDE17 Blux: 1px

22

Sem focus
Sem focus
62px

Com focus

Pesquisa

54px

Border de 1 px Canto redondo de 7px RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA

Fundo RGB: r:13 g:14 b:30 CMYK: c:85 m:79 y:57 k:77 Hex: #0D0E1E

Outter glow Cor: RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Opacidade: 72% Blux: 2px

Ordenao

Com focus
Filtragem
Border de 1 px Fundo Canto redondo de 7px RGB: r:2 g:138 b:170 RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Hex: #028AAA Outter glow Cor: RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Opacidade: 72% Blux: 2px

23

Boto nvel 1:
Sem focus
272px 12px 10,7px

Perfil
Nome do boto (Texto nvel 4)

32px

Texto (outter glow) Border de 1 px Cor: Fundo Canto redondo de 7px RGB: r:2 g:138 b:170 RGB: r:2 g:138 b:170 RGB: r:13 g:14 b:30 CMYK: c:83 m:32 y:24 k:1 CMYK: c:83 m:32 y:24 k:1 CMYK: c:85 m:79 y:57 k:77 Hex: #028AAA Hex: #028AAA Hex: #0D0E1E Opacidade: 72% Blux: 2px

Com focus
Texto (outter glow) Border de 1 px Cor: Fundo Canto redondo de 7px RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 RGB: r:2 g:138 b:170 RGB: r:2 g:138 b:170 Hex: #028AAA CMYK: c:83 m:32 y:24 k:1 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Hex: #028AAA Opacidade: 72% Blux: 2px

Perfil

24

Boto nvel 2:
Sem focus
63px 10px 4px

Limpar

18px

Border de 1 px Fundo Canto redondo de 7px RGB: r:2 g:138 b:170 RGB: r:13 g:14 b:30 CMYK: c:83 m:32 y:24 k:1 CMYK: c:85 m:79 y:57 k:77 Hex: #028AAA Hex: #0D0E1E

Texto (outter glow) Cor: RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Opacidade: 50% Blux: 1px

Com focus
Border de 1 px Fundo Canto redondo de 7px RGB: r:2 g:138 b:170 RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Hex: #028AAA Texto (outter glow) Cor: RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Opacidade: 50% Blux: 1px

Limpar

25

Boto nvel 3:
133px 12px 7px

Sem focus
Border de 1 px
64px

Vendedor telecomunicac Equipa Interna(m/f) Queluz Texto nvel 7

Fundo RGB: r:13 g:14 b:30 CMYK: c:85 m:79 y:57 k:77 Hex: #0D0E1E

RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA

Com focus
Border de 1 px RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Fundo RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA

Vendedor telecomunicac Equipa Interna(m/f) Queluz

26

Boto nvel 4:
Sem focus
270px 6px 6px 55px 57px 6px

Border de 1 px
67px

Fundo RGB: r:13 g:14 b:30 CMYK: c:85 m:79 y:57 k:77 Hex: #0D0E1E

Ttulo da oferta

RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA

Com focus
Ttulo da oferta
Border de 1 px RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA Fundo RGB: r:2 g:138 b:170 CMYK: c:83 m:32 y:24 k:1 Hex: #028AAA

27

2.3. Tipografia

28

No que diz respeito logomarca, o tipo de letra utilizado foi criado especialmente para a marca sendo possvel identificar que este pertence a uma tipografia no serifada. Em ao tipo de letra secundrio, a nossa escolha baseou-se numa imagem minimalista contempornea que se pretende dar aplicao. Tendo em conta tambm que esta funciona em televiso, foi crucial optar por uma letra no serifada que demonstrasse uma estrutura consistente e diferenciadora entre os vrios caracteres.

opes tipogrficas

Asap Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ~!@#$%^&*()_+=-[]{}?

Asap Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ~!@#$%^&*()_+=-[]{}?

29

As minhas ofertas
Ver mais tarde
Procura-se serralheiro Logout
Numero de empregados

NVEL 1 Asap Bold, 24px Leading 28px NVEL 2 Asap Bold, 20px Leading 28px NVEL 3 Asap Bold, 16px Leading 19px NVEL 4 Asap Regular, 16px Leading 13px NVEL 5 Asap Bold, 14px Leading 16px NVEL 6 Asap Regular, 14px Leading 16px

A Elevus desenvolve actividade na rea da Consultoria em Recursos Humanos e utiliza metodologias inovadoras, procurando encontrar solues que proporcionem aos seus clientes vantagens competitivas e elevada produtividade dos seus RH.
Telecomunicaes

hierarquia tipogrfica

NVEL 7 Asap Regular, 12px Leading 13px TEXTO DE VER MAIS TARDE Asap Bold, 12px Leading 13px

Vendedor telecomunicac Equipa Interna(m/f) Queluz 30

2.4. Estudo de grelhas e ecrs nicos

31

Para a criao da grelha de forma a conseguirmos perceber como iramos distribuir todo o contedo pelos vrios ecrs, e de forma a que consegussemos ter um nmero suficiente de guias tendo em conta o elevado nmero de elementos nos ecrs, decidimos ento que cada seria dividido em 9 colunas com 63px cada uma, 8 goteiras de 6px, havendo uma margem esquerda de 20px para a colocao da barra da aco Voltar e uma margem direita de 6px, tal como as goteiras. No total, so utilizados 576px. Apesar de a dimenso mxima de uma resoluo 4:3 ser de 720px de comprimento e 576px de altura, apenas decidimos utilizar 80% desse valor, uma vez que essa percentagem corresponde rea segura em que teremos a certeza que todos os contedos aparecem correctamente em qualquer televisor. O mesmo se aplica resoluo de 16:9, ou seja, apesar de o comprimento desta ser de 1024px e a altura de 576px, apenas utilizmos 80% dessa dimenso uma vez mais por questes de segurana.

estudo de cinzentos

32

Estudo de grelha e cinzentos do ecr Pgina Pessoal (4:3)

33

Estudo de grelha e cinzentos do ecr Pgina Pessoal (16:9)

34

Estudo de grelha e cinzentos do ecr As minhas ofertas (4:3)

35

Estudo de grelha e cinzentos do ecr As minhas ofertas (16:9)

36

Estudo de grelha e cinzentos do ecr Detalhes da empresa (4:3)

37

Estudo de grelha e cinzentos do ecr Detalhes da empresa (16:9)

38

simulao de ecrs nicos

Em relao ao desenho dos ecrs nicos, o grupo selecionou os ecrs que, apesar de partilharem a grelha de forma idntica, so os ecrs que possuem uma disposio de contedo completamente diferente dos restantes. Desta forma, optmos por desenhar tanto o estudo de cinzentos como a respectiva grelha e simulao de ecr: da pgina pessoal, pois este possui os vrios menus que iro permitir ao utilizador navegar pela aplicao; da pesquisa das ofertas, pois era necessrio compreender como iriam estar dispostas as vrias ofertas ao longo do ecr; e do detalhe das empresas, uma vez que este o que possui um maior nmero de informao e era necessrio compreender como iriam ser colocados os vdeos e fotografias das empresas, bem como a respectiva informao textual. Em todos eles so j representados os botes com e sem o focus, bem como os cones tambm com e sem o focus.

39

Simulao do ecr Pgina Pessoal (4:3)

40

Simulao do ecr Pgina Pessoal (16:9)

41

Nota: de notar que neste ecr desenhado, est incluinda na zona superior do ecr um boto de Limpar e ao seu lado a palavra que o utilizador pesquisou. Apesar de estes dois elementos apenas estarem presentes quando o utilizador pesquisa alguma oferta, decidimos inclu-los para podermos construir uma grelha que fosse consistente com as vrias funcionalidades disponveis.

Simulao do ecr As minhas ofertas (4:3)

42

Simulao do ecr As minhas ofertas (16:9)

43

Simulao do ecr Detalhes da empresa (4:3)

44

Simulao do ecr Detalhes da empresa (16:9)

45

Simulao do ecr Pgina Pessoal (4:3)

46

Simulao do ecr Pgina Pessoal (16:9)

47

Simulao do ecr As minhas ofertas (4:3)

48

Simulao do ecr As minhas ofertas (16:9)

49

Simulao do ecr Detalhes da empresa (4:3)

50

Simulao do ecr Detalhes da empresa (16:9)

51

Concluso

Aps o desenvolvimento desta etapa concluiu-se principalmente qual a posio visual que pretendemos transmitir com a marca WiP iTV. Neste sentido, orientmo-nos por uma linha grfica minimalista e lmpida, sem acrescentar elementos desnecessrios ao utilizador. O facto de a plataforma deste projecto ser uma televiso tambm limitou o processo criativo, pelo que existem regras a serem cumpridas, como por exemplo o sistema cromtico e o tipo de letra. No entanto, tentmos contornar esta barreira, tirando o maior potencial da nossa criatividade com as ferramentas disponveis.

52