O documento discute princípios básicos de design como teoria das cores, contraste, escalas cromáticas e convenções para web, TV e celular. Ele fornece informações sobre como projetar interfaces levando em consideração o dispositivo e o público-alvo.

1. 10/27/09
Teoria básica das Cores
Princípios de design Aula 2
Círculo de cores
Designer de Interação:
Fabrício Fava Características das cores
fabriciofava@gmail.com
Todas as cores possuem 3 características (Matiz, Tom, Intensidade)
Síntese das cores
Adaptações Cores aditivas e subtrativas
Especialista em Usabilidade: Escalas de cores
Kelma Madeira Como combinar as cores
kelma.madeira@gmail.com
Características das cores
Todas as cores possuem 3 características.
Círculo de cores
O que é COR? Matiz é a característica que define e distingue uma cor. Por
A luz é composta exemplo, vermelho, verde ou azul são matizes. Para se
por sete cores, mudar o matiz de uma cor, acrescenta-se a ela outra matiz.
vermelho, laranja,
amarelo, verde, Tom refere-se à maior ou menor quantidade de luz presente
azul, anil e violeta. na cor. Quando se adiciona preto a determinado matiz, este
Quando a luz se torna gradualmente mais escuro, e essas graduações são
incide sobre um chamadas escalas tonais. Para se obterem escalas tonais
objeto parte dela é mais claras, acrescenta-se branco.
absorvida e parte
dela é refletida. Intensidade diz respeito ao brilho da cor. Um matiz de
A cor que intensidade alta ou forte é vívido e saturado, enquanto o de
enxergamos é a intensidade baixa ou fraca caracteriza cores apagadas ou
luz refletida por pastel. Por exemplo, o disco de cores mostra que o amarelo
um objeto. tem intensidade alta, enquanto a do violeta é baixa.
Cores primárias aditivas Cores primárias subtrativas
Escala RGB, também conhecida por cor-luz Escala CMY, também conhecida por cor-pigmento
No sistema RGB (Red Green Já no Sistema CMY
Blue) as cores primárias são (Cyan Magenta Yellow)
vermelho, verde e azul e as primárias são ciano, magenta
secundárias são, ciano, e amarelo e as secundárias
magenta e amarelo. A junção são vermelho, azul e verde. A
de todas as cores-luz resulta junção de todas as cores-
na luz branca. pigmento resulta na cor preta.
Quais seriam as cores terciárias?
Quais seriam as cores terciárias?
1

2. 10/27/09
Curiosidades Curiosidades
Qual dos dois sistemas consiste naquele utilizado Qual dos dois sistemas consiste naquele utilizado
em monitores, televisões, câmeras digitais, para os sistemas de impressão?
scanners e afins?
R- CMY
R- RGB, mas ambos os sistemas estão presentes nos nossos
Dica:
cotidiano; a exemplo, o sistema cor-pigmento é fundamental
Trabalhe sempre em RGB no seu computador. Isso porque as
para a pintura.
imagens que usamos são captadas no sistema RGB.
Quando terminar o layout, transforme em CMY e observe o
A televisão e os monitores funcionam a partir de uma
resultado. Faça os ajustes necessários. Depois, salve o
imagem formada por pontinhos de cor-luz primárias, que ao
arquivo como um TIFF e mande para a gráfica.
serem vistos de longe formam as outras cores que são
necessárias para a reprodução da imagem.
Escala monocromática Contraste de valor
Variação de claro e escuro da mesma cor Variação de claro e escuro da mesma cor
Contraste de valor
Variação de valor, mantendo um mesmo matiz, como é o caso das
escalas monocromáticas, não provocam desconforto visual.
Em combinações predominantemente claras, os escuros chamam
mais atenção e vice-versa.
Isto representa uma boa combinação.
Escala de cores análogas Escala de cores complementares
São as que aparecem lado a lado no disco São as que aparecem opostas no disco
Isto também representa uma razoável combinação. Consiste na combinação mais conflitante existente.
2

3. 10/27/09
Escala complementares divididas Contraste complementar
Cores que aparecem ao lado de seu complementar Variação de claro e escuro da mesma cor
Contraste complementar
O mais intenso dos contrastes, gerado entre cores complementares,
podendo provocar um certo desconforto visual na combinação.
Esta combinação é menos conflitate que a anterior.
Contraste simultâneo Escala de cores quentes
Cores que variam do amarelo ao violeta
Contraste simultâneo
Fenômeno explicado pela necessidade do olho de buscar a
complementar da cor observada para diminuir a tensão na retina
provocada por ela.
Porque o preto possui menos luz Porque o azul
reforçando desta forma, o brilho do tende a buscar seu
amarelo. complementar
Escala de cores frias Contraste quente/frio
Cores que variam do verde ao azul Cores que variam do verde ao azul
Contraste quente/frio
Cores quentes, normalmente mais claras quando saturadas,
chamam mais atenção ao serem combinadas às cores frias.
Uma boa combinação é a mistura de cores quentes com frias.
3

4. 10/27/09
Primeiros passos
Design de interface Entendendo o produto e público-alvo.
Primeiros passos Que informações serão disponibilizadas
Entendendo o produto e público-alvo. O que será informado, a quem e com o quê.
Projeto de interface Quem é o usuário
Oferecer ao usuário o entendimento da aplicação. O melhor meio de conhecê-lo é realizando pesquisas.
Profissional deve conhecer as convenções do dispositivo
alvo.
Primeiros passos Primeiros passos
Entendendo o produto e público-alvo. Entendendo o produto e público-alvo.
Primeiros passos Primeiros passos
Entendendo o produto e público-alvo. Entendendo o produto e público-alvo.
4

5. 10/27/09
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Conhecer as convenções do dispositivo alvo Web
O Profiossional deve conhecer quais as convenções de
formatação, de conteúdo, e desenho de interface (Bench
Mark).
Oferecer ao usuário o entendimento da aplicação.
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Convenções para web
Convenções para web
Comprimento da página:
Por exemplo, caso eu vá desenvolver um site de notícias, o
primeiro passo será pesquisar sites de notícia e observar • Recomenda-se uma ou duas telas inteiras.
as convenções quanto à:
• Não mais do que 3 telas inteiras (entre 1000 e
1600pxs)
• Comprimento da página
• Logotipo
• Pesquisa
• Navegação
• Cores do texto e plano de fundo
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Convenções para web Convenções para web
Logotipo: Pesquisa:
• Geralmente no canto superior esquerdo. • Preferencialmente no canto superior (esquerdo ou
direito).
• Tamanho padrão 80x68px
• Utilizar uma caixa branca, para pelo menos 25
caracteres (30 é o ideal) e o label pesquisar (search)
ou ir (go) no botão de busca.
5

6. 10/27/09
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Convenções para web Convenções para web
Navegação: Cores do texto e plano de fundo:
• Texto preto,
• Menu à esquerda, • Tamanho de fonte 12 (cambiável) e sem serifa. AL
• Abas, • Plano de fundo branco.
• Menu superior
• Categorias.
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
TV Digital TV Digital
Conhecer o dispositivo - televisão Conhecer o dispositivo – Controles Remotos
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Convenções para TV Convenções para TV
Assistir aos vídeos e observar as convenções quanto à:
Comprimento da página:
• Recomenda-se uma tela inteira.
• Média de 13 linhas de texto e 10 palavras por linha.
• Comprimento da página
• Dividir o conteúdo através de paginação.
• Logotipo
• Pesquisa
• Navegação
• Tipografia e plano de fundo
• Organização visual da TV
6

7. 10/27/09
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Convenções para TV Convenções para TV
Logotipo: Pesquisa:
• Geralmente no canto superior esquerdo. Geralmente indisponível.
• Tamanho padrão 80x30px.
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Convenções para TV Convenções para TV
Navegação: Cores do texto e plano de fundo:
Menu à esquerda, menu inferior ou categorias. Texto geralmente branco, tamanho 24 (mínimo 18) e sem
serifa.
Plano de fundo geralmente azul ou preto.
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Celular Celular
7

8. 10/27/09
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Celular Celular
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Celular Celular
Projeto de interface Projeto de interface
Oferecer ao usuário o entendimento das aplicações. Oferecer ao usuário o entendimento das aplicações.
Celular Celular
8

9. 10/27/09
Outros Bons Artifícios Outros Bons Artifícios
Utilização de Hints (Dica) Utilização de Hints (Dica)
Outros Bons Artifícios Outros Bons Artifícios
Campos predefinidos Alinhamento dos Campos
Outros Bons Artifícios Outros Bons Artifícios
Ilustrações - Utilização de imagens (botões) Onde estou? - Mapa do Site/Sistema (Espinha de Peixe)
9

10. 10/27/09
Outros Bons Artifícios Outros Bons Artifícios
Ajuda (Helps, Tutorial e Afins) Ajuda (Helps, Tutorial e Afins)
Outros Bons Artifícios
Guias de Estilos (CSS)
CSS foi proposto pelo W3 Consortium (comitê que define os
 Elabore
as telas de seu Sistema (Trabalho da AV1),
padrões de programação para a internet).
baseado nos:
Foi introduzido pela primeira vez pela Microsoft, no
lançamento do Internet Explorer 3.0.
 Princípios de organização visual;
Guia de estilos - Cascading Style Sheets (CSS) ou ainda  Contraste de tipos;
Folhas de Estilo em Cascata, é um padrão de formatação para  Cores;
adicionar estilos aos documentos, ou seja é um conjunto de
 Design de interface.
tags que auxiliam a formatação, proporcionando ao designer
um maior controle sobre os atributos visuais (layout das
páginas) tais como: margem do texto, tamanho e cor das
fontes, espaçamento entre linhas e caracteres, sobreposição
de texto sobre texto ou texto sobre imagens (utilizando
layers), dentre outros.
10