DESIGN WEB

PRINCPIOS DE DESIGN
Prof.. Giorgia Barreto L. Parrio [2017]
COR
 TUDO LUZ...
As cores que percebemos so produzidas
pela luz. A luz do sol, aparentemente
branca, , na verdade, composta pelas
sete cores do arco-ris.

Quando a luz do sol ilumina um objeto,

algumas dessas cores so absorvidas,
enquanto as outras so refletidas na
direo dos olhos que as percebem.
Atravs deste fenmeno que os olhos
percebem a cor dos objetos.

Prof. Giorgia Barreto Lima Parrio 3

PERCEPO
A cor percebida atravs da viso.

O olho humano capaz de perceber a cor atravs

dos cones (Clulas cones).

Tal percepo extremamente importante para a

compreenso de um ambiente.
 ADITIVO LUZ | WEB |RGB
o sistema aditivo de cores, ou seja, de projees
de luz, como monitores e Datashow, em
contraposio ao sistema subtrativo, que o das
impresses(CMKY).

A escala de RGB varia de 0 (mais escuro) a 255

(mais claro).

Cor = Luz
Unio = Branco
Ausncia = Preto
5
 SUBTRATIVO PIGMENTO | IMPRESSO |CMYK
Sistema de cores baseado na sntese subtrativa,
segundo a qual, a mistura em partes iguais dos trs
pigmentos primrios subtrativos (ciano, magenta e
amarelo) resulta em preto.

Funciona devido absoro de luz. As cores que

so vistas vm da parte da luz que no
absorvida.

Cor = Pigmento
Unio = Preto
Ausncia = Branco
6
 CORES COMPLEMENTARES
So, opostas umas s outras no disco das cores. Nos sistemas RGB e CMYK, as primrias
de um sistema so secundrias do outro e vice-versa.

Exemplo: Vermelho e Ciano, Verde e Magenta, Azul e Amarelo

7
 CORES ACROMTICAS
So as cores chamadas neutras: o branco, o
preto, as cinzas e os marfins.

So usadas para dar a sensao de

uniformidade e equilbrio.

Prof. Giorgia Barreto Lima Parrio 8

 CONTRASTE
Quando usadas prximas umas das
outras, produzem uma sensao de
choque.

Cores primrias, contrastam sempre com

as cores secundrias e vice-versa.

Prof. Giorgia Barreto Lima Parrio 9

 CORES DE 8 A 16 BITS
Utilizado para armazenar informaes de imagens coloridas em um arquivo de imagem
digital.

No sistema 8 Bits, cada pixel representado por 1 Byte de 8 Bits, fornecendo uma
exibio mxima de 256 cores.

J o sistema de 16 bits, permite a exibio de at 65.536 cores.

Prof Giorgia Barreto Lima Parrio 10

TEMPERATURA DAS CORES

11
 PSICOLOGIA
A COR a parte mais emotiva do processo visual, expressando e reforando a informao.
Exerce ao trplice:
A de impressionar, a de expressar e a de construir.
vista: impressiona a retina.
sentida: provoca emoo.
construtiva: pois tendo um significado prprio possui valor de smbolo, podendo assim,
construir uma linguagem que comunique uma ideia.

Prof. Giorgia Barreto Lima Parrio 12

TIPOGRAFIA
 ANATOMIA
A anatomia dos tipos tambm
determina sua legibilidade e
leiturabilidade.

Prof. Giorgia Barreto Lima Parrio 15

 LEGIBILIDADE
Refere-se s qualidade inerentes aos tipos
em si que as fazem reconhecveis para serem
lidos.

Garante que a mensagem seja transmitida

com eficincia.

Prof. Giorgia Barreto Lima Parrio 16

A legibilidade de um texto depende no somente da forma das letras, mas do tamanho
do corpo utilizado e do contraste desta fonte com os demais elementos da pea. O bom
senso no pode ser esquecido deve-se dar a devida ateno s condies de leitura.
Quanto mais simples for o caractere, mais legvel ele ser.
Deve-se considerar o contexto em que lido levando em conta os objetivos e conceito da
pea.

Prof. Giorgia Barreto Lima Parrio 17

 LEITURABILIDADE
Relaciona-se qualidade do conforto visual, facilidade de compreenso dos texto,
tornando agradvel sua leitura.
 KERNING
Espaamento entre caracteres, se for
inadequado cria reas de tenso
visual ou lacunas estranhas entre eles
prejudicando a leitura.
 ENTRELINHA interrompe o fluxo natural da
informao criando reas de
tenso tica causadas pela coliso
de ascendentes e descendentes.

Espaamento entre as linhas de um texto.

O parmetro ideal que a

entrelinha tenha 120% do
Retarda o tempo de leitura e tamanho do texto.
prejudica a capacidade do olho
encontrar o ponto de partida da
prxima linha.
 ALINHAMENTO
Dificuldade em encontrar o ponto
de partida da leitura, dificultando
o processamento da informao e
causando fadiga ocular.

Cria um ponto de partida comum,

auxiliando o olhar a rastrear
rapidamente o texto, processando
rapidamente a informao.

Dificuldade em encontrar o ponto

de partida da leitura, dificultando
o processamento da informao e
causando fadiga ocular.
Apesar de favorecer o eixo de
leitura, causa inconsistncia na
leitura em virtude das lacunas
criadas no texto.
 PESO
Determina importncia
hierrquica e guia a leitura
subdividindo a informao.
[OGRADY, 2008]

Prof. Giorgia Barreto Lima Parrio 22

 SERIFAS
Os tipos serifados tendem a guiar
nossos olhos de uma letra para outra,
dando direo e ritmo leitura, o que
a facilita a leitura.
Prof. Giorgia Barreto Lima Parrio
O desenho do tipo muito uniforme. Nem
sempre so tipos elegantes e bonitos, por
isso difcil saber como empreg-los.
Uma boa soluo contrastar pesos
(bold, extra, medium, light).
 PSICOLOGIA
Certos caracteres exercem uma ao psicolgica, conforme sua forma.
Alguns do impresso de positivos, ponderados, racionais. Outros, pelo contrrio, de
rigidez, peso. E outros, ainda, de flexibilidade, leveza, alegria etc.

Prof. Giorgia Barreto Lima Parrio 24

 DICAS
Costumamos transformar os ttulos de um site em imagens, pois geralmente so
utilizadas para este fim fontes fantasia, que carregam um significado.
Para pargrafos devem ser utilizadas fontes nativas como Times, Verdana,
Tahoma, Arial ou Courier.
Os usurios leem na tela decompondo pginas: selecionam frases, grficos e tpicos.
Estudos recentes feitos por Jacob Nielsen indicam que 79% sempre esquadrinham
novas pginas em busca da prpria seleo e s 16% leem palavra-a-palavra.
A harmonia e simetria entre os textos, imagens e cores, tambm influenciam a
legibilidade do site.

Prof. Giorgia Barreto Lima Parrio 25

 Se colocarmos vrios elementos piscando, com cores diferentes, em movimento, a
ateno no ser direcionada informao que o mais importante.
Abaixo algumas frmulas bsicas:

1. palavras-chave destacadas (cor, fonte)

2. ttulos, subttulos, resumos significativos
3. listas por tpicos (como esta)
4. uma ideia por pargrafo
5. comear pela concluso
6. usar a metade do nmero de palavras
7. aprofundamento seletivo (hipertexto)

Prof. Giorgia Barreto Lima Parrio 26

GESTALT
A teoria da Gestalt traz uma explicao sobre porqu algumas
formas nos agradam mais que outras.

Ela estuda o fenmeno da percepo pela interpretao do nosso

crebro."
 HARMONIA
Predomina a organizao formal dos elementos da composio. Apresentando fatores
de equilbrio, ordem e regularidade, permitindo assim uma leitura simples e clara do
observador.

a sequncia e organizao lgica dos elementos integrantes de um Layout e afinidade

visual entre os elementos(formato geomtrico, textura, cor, etc.);

Fatores predominantes:
Equilbrio, ordem e regularidade;
Possibilita uma leitura simples e clara;
Depende da interao do mesmo com o receptor.
29
 ORDEM
o efeito produzido atravs da ordem e
uniformidade na imagem, que se
consegue pela padronizao do estilo de
igualdade dos objetos dispostos para
comp-la.

Prof Giorgia Barreto Lima Parrio 30

 REGULARIDADE
Possui o mesmo efeito da Ordem, mas
no se permite irregularidades na
composio da forma, sendo que o
padro do estilo adotado deve
permanecer dentro de um todo.

Neste caso o objetivo alcana um estado

absoluto de nivelamento em termos de
equilbrio visual.

31
 EQUILBRIO
Em uma composio equilibrada, todos os fatores como configurao, direo e
localizao determinam-se mutuamente, no havendo alteraes

Desorganizado Organizado
Prof. Giorgia Barreto Lima Parrio 32
 PROXIMIDADE
Elementos prximos tendem a se agruparem, constituindo uma unidade. Elementos vo parecer
mais prximos e unificados quanto menor for a distncia entre eles.

Em condies iguais, eventos prximos no tempo e espao tendero a permanecer unidos,

formando um s todo.

Voc nota os 16 crculos, ou os 4

grupos de crculos na imagem
abaixo?

Prof. Giorgia Barreto Lima Parrio 33

 SEMELHANA
Objetos similares se agruparo entre si. Essa semelhana se d por intensidade, cor, odor, peso,
tamanho, forma e se d em igualdade de condies.

Na imagem acima, a maioria das pessoas v colunas de quadrados e colunas de crculos. Poucas pessoas vo associar isto
como uma linha horizontal onde quadrados e crculos se intercalam.
 CONTINUIDADE
Pontos que esto conectados por uma linha reta ou curva, so vistos de uma
maneira a seguirem um caminho mais suave. Em vez de ver linhas e ngulos
separados, linhas so vistas como uma s.

Prof. Giorgia Barreto Lima Parrio 35

 PREGNNCIA
tambm chamado de lei da simplicidade. Ela dita que objetos em um ambiente so vistos da
forma mais simples possveis. Quanto mais simples, mais facilmente assimilada. Na imagem
abaixo, vemos vrios crculos em vez de uma forma complexa.

Prof. Giorgia Barreto Lima Parrio 36

 FECHAMENTO
Elementos so agrupados se eles parecem se completar. Ou seja, nossa mente ver um objeto
completo mesmo quando no h um.

Prof. Giorgia Barreto Lima Parrio 37

UNIFICAO
Na lei da unificao, mesmo uma imagem abstrata pode ser entendida pela mente humana
pois preenchemos os espaos vazios instintivamente, como no logo do Johnnie Walker ou da
WWF (um homem caminhando e um urso panda).

Prof. Giorgia Barreto Lima Parrio 38

 CONTRASTE
uma oposio acentuada entre dois ou mais
objetos, sendo que um se sobressai perante os
demais, tornando-se uma poderosa ferramenta
de expresso.

Funo:
Criar interesse para o contedo;
Auxiliar na organizao das informaes;
Estabelecer hierarquia entre os elementos pela
Atrao;
Intensificar o significado, simplificando a
comunicao;
Desequilibra, sacode, estimula e atrai a ateno.
 HIERARQUIA
a organizao do que mais e menos relevante
para ser enxergado dentro de uma pea.

Por exemplo: em um cartaz de um evento, onde

temos o ttulo, a data, o local e a programao.
Temos a seguinte ordem de relevncia:
1. Ttulo / Nome do evento
2. Subttulo
3. Data
4. Local / Programao
ZONAS DE VISUALIZAO
1- Primria/Principal: o primeiro lugar visualizado
pelo observador. Deve conter um elemento forte para
atrair a ateno e o interesse.
2 - Secundria: A viso se desloca em diagonal para o
lado inferior oposto.
3 e 4 Mortas: Devem ser preenchidas com aspectos
atrativos para que a leitura se torne ordenada com
racionalidade, sem o deslocamento brutal da viso. Por
isso deve-se colocar elementos de grande atrao
visual para conduzir a leitura de forma confortvel e
rpida.
5- Centro tico: Est situado um pouco acima do centro
geomtrico, quando do cruzamento das diagonais. A
altura varia de acordo com as dimenses da pagina
dependendo da relao: altura x largura.
6- Centro Geomtrico : Deve-se observar as mesmas
caractersticas das zonas mortas.
Prof. Giorgia Barreto Lima Parrio 44
Prof. Giorgia Barreto Lima Parrio 45
 1 3
5
6

4 2

Prof. Giorgia Barreto Lima Parrio 46

LAYOUT
 DEFINIO...
A arte de dominar o papel em o principal
desafio na hora de criar um anncio.
Entretanto se voc j estabeleceu o Target, o
Foco e Conceito, j ter bons subsdios para
iniciar a Criao.
Para elaborarmos um bom layout, devemos
em primeiro lugar planejar como iremos
justapor os elementos, distribuir as
informaes e valorizar os espaos para
atrair a ateno. Os principais elementos de
um layout so: Imagens, Ttulo, Texto, Cor,
Tipografia e Diagramao.

Prof. Giorgia Barreto Lima Parrio 48

 IMAGENS
As imagens utilizadas na internet devem ser salvas em RGB e com resoluo entre 72 e 90 PPIs,
preferencialmente na extenso PNG que a extenso preconizada pelo W3C.

DICAS:
Evite imagens simplistas, aquelas que todos usam;
Fuja dos bancos de imagens da internet;
Tome cuidado com imagens incompreensveis, de baixa qualidade e para que no se
tornem legendas do contedo;
Imagem, ttulo e texto devem se completar, observando-se os pesos de cada um na
comunicao visual;
Use uma imagem que transmita a mensagem/conceito da campanha, do contrario no use
nada.
 DIAGRAMAO
Nada mais do que a disposio dos elementos
essenciais(imagem, ttulo e texto) no anncio. Na
web usamos o Wireframe para diagramao.

Dicas:
Favorea sempre o contraste, o equilbrio, a
legibilidade
Fatores determinantes: conceito, usurios e
adequao
Quanto maior o n. de elementos, menores
sero os pontos de atrao
 WIREFRAME
O Wireframe apresenta um projeto inicial de distribuio das informaes pela tela,
garantindo a aplicao da Arquitetura proposta para o projeto.
A ideia de Grid, de estrutura modular de uma superfcie, basicamente instrumental, no uma
ferramenta de tortura, restrita.
Os wireframes so os documentos que serviro de guia para todas as etapas posteriores de
um projeto.
Neles, devem estar todas as indicaes das funcionalidades idealizadas pelo arquiteto, para
serem conhecidas e seguidas por toda a equipe de criao e tecnologia.
Wireframe Layout
 Wireframe Layout
Como Crie seu Filme Campees de Jogo dos 7
Participar Bilheteria Erros

LETREIRO
A VIDA UM FILME

Crie seu filme

Voc e seus amigos podem ser os astros desta
histria. Escolha uma das opes para fazer o seu
filme:

Apenas um protagonista
| ver exemplo

Protagonista e Coadjuvantes
| ver exemplo

Apenas coadjuvantes
| ver exemplo

Jogo dos Campees de

7 erros Bilheteria

Conhea a Galeria de Filmes da Gradiente

Tenho 66 m2 para montar um
apartamento

Arquitetura Convencional
 Arquitetura WEB
960 pixels 960 pixels
580 pixels

580 pixels
Tela 1024 x 768
RESOLUO DE TELA
 Obrigada!
Obrigada!!!
Prof.. Giorgia Barreto

Prof. Giorgia Barreto Lima Parrio 57