O documento discute princípios básicos de design de interfaces para web, incluindo definições de design, elementos de design web como navegação e orientação, e teorias como tipologia, cores e usabilidade.

1. designer . interfaces
lungas
Princípios básicos de design aplicados a web

2. O que é design?
Perguntar o que é design é o mesmo que perguntar o que é
arte. Não é possível definir e nem há interesse em fazê-lo,
mas fica implícito que o termo design se relaciona não apenas
com a criatividade mas também com a tecnologia, com o
significado, com a linguagem.
Alexandre Wollner

3. O que é design?
O design faz a ligação entre o plano físico e espiritual das
pessoas. Analisando essa definição pela ótica ocidental
podemos dizer que design é o responsável por satisfazer as
necessidades das pessoas que muitas vezes não são tangíveis.
Kenji Ekuan

4. Não existe Web Designer.
Existe o Designer que faz Web, e esse profissional tem que
aprender tudo: Tipografia, Fotografia, Semiótica, Gestalt,
Matemática, Ótica, Percepção, Comportamento Humano,
etc. Senão ele não consegue fazer Web.
Alexandre Wollner

5. Elementos do Design Web
:: Elementos de Navegação
Ajuda o usuário a se mover dentro do site e acessar áreas
específicas.
elemento de navegação

6. Elementos do Design Web
:: Elementos de Orientação
Diz ao usuário onde ele está dentro do site.
elemento de orientação

7. Elementos do Design Web
:: Elementos de Interação
Processa informações e dados incluídos pelo usuário.
Exemplo: uma busca, formulários, enquetes, etc.

8. Elementos do Design Web
:: Elementos de Conteúdo
Toda a informação em forma de texto, imagens, sons, vídeos
ou animações.
“Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris non sapien in nibh accumsan pharetra. Pellentesque
faucibus. Pellentesque consequat, neque nec pulvinar
lobortis, libero nibh sodales turpis, et pharetra quam orci
non risus. Donec commodo nisl eu turpis.”

9. Elementos do Design Web
:: Elementos de Emoção
Apelam para o sentimento do usuário, provocando curiosidade ou
convidando a continuar a visitação, destacando alguma seção do
site, produto ou serviço. Esses elementos podem ser imagens,
animações, sons ou composições textuais.

10. Uso orientado
:: Influências
- Econômicas
- Regionais
- Culturais
- Faixa Etária
- Profissão

11. Briefing
O briefing é um conjunto de informações passadas em uma
reunião para o desenvolvimento de um trabalho. O briefing
deve criar um roteiro de ação para criar a solução que o cliente
procura, é como mapear o problema, e com estas pistas, ter
idéias para criar soluções

12. Usabilidade
"Qual a coisa mais importante que eu devo fazer se quiser me
assegurar que meu website seja fácil de usar?"

13. Usabilidade
"nada importante deve estar a mais de dois cliques de distância!"

14. Usabilidade

15. Usabilidade

16. Usabilidade

17. Usabilidade

18. Tipologia em Web Design
Tipologia significa o estudo sistemático de tipos, os quais podem
ser divididos em 6 grupos:
Estilo Antigo Sem Serifa
Moderna Manuscrito
Serifa Grossa Decorativo

19. Tipologia em Web Design
:: Contraste de Tipos - TAMANHO
t e n h a m u i t o
CUIDADO
FELICIDADE
n ã o t ê m p r e ç o

20. Tipologia em Web Design
:: Contraste de Tipos - ESPAÇO
SUPERE
Jaiminho
Analista
Ta m a n g a n d a p i o - U C

21. Tipologia em Web Design
:: Contraste de Tipos - PESO
Título
Subtítulo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec massa ut lectus
ullamcorper fringilla. Proin vel odio. Donec vulputate libero id mauris. Fusce lacus sapien,
malesuada sit amet, ullamcorper a, pretium sed, felis. Sed quam ipsum, molestie eget,
pretium vel, sagittis a, ipsum. Maecenas lectus massa, imperdiet porta, semper ac,
commodo eget, mauris. Integer a orci eget ante pharetra auctor. Vestibulum facilisis
quam sed erat. Donec tristique mauris sit amet ipsum. Praesent suscipit leo id arcu.
Aliquam massa dui, tempor ac, faucibus eget, faucibus a, dui. Mauris eget libero ut leo
venenatis fringilla. Mauris cursus metus sit amet ligula. Integer ultricies mollis risus.

23. Tipologia em Web Design
:: Contraste de Tipos - ESTRUTURA
d o c e
ViDA MAXIMIZE
Suas Opções

24. Tipologia em Web Design
:: Contraste de Tipos - FORMA
lobo
LOBO
Construa que eles virão
Co n s t r u a q u e el e s v i rã o

25. Tipologia em Web Design
:: Contraste de Tipos - DIREÇÃO

27. Teoria das cores
:: Influência Biológica
Baseado no nosso sistema de percepção, percebemos a cor
vermelha com muito mais intensidade, por exemplo, que a cor
azul. Por isso na natureza encontramos poucos elementos
realmente vermelhos ( a não ser as rosas e algumas flores que de
fato chamam bastante atenção ).

28. Teoria das cores
:: Influência Cultural
Nossa percepção da cor está fortemente ligado a influências
culturais.Mesmo o design corporativo é
distinguido freqüentemente por uma cor ou por uma combinação
específica da c o r, utilizado normalmente como
a identidade própria da empresa, fazendo parte de sua cultura
visual.

29. Teoria das cores
:: Influência Individual
Todas as nossas influências e aversões a cores especiais, o que
gostamos e não gostamos podem ser levados em conta nessa
hora. A moda é muito influenciada por nossos gostos. Por
exemplo, a cor laranja era bastante popular na década de 70 e foi
utilizada por bastante tempo e que no início de 2000 ressurgiu. O
degradê de cores utilizado em sites CSS é um exemplo da
influência individual, da moda, tendência.

30. Teoria das cores
:: RGB
Essa ação cria linhas compostas de três cores básicas, o
vermelho, verde e azul,cuja abreviatura em inglês é RGB ( Red,
Green and Blue ). Essas cores quando misturadas através da
variação de luminosidade resultam em 255 níveis de cor
cada uma, resultando em 255 x 255 x 255 = 16 milhões de cores.
16 milhões de cores.
256 canais 256 canais 256 canais

31. Teoria das cores
:: RGB
Nos programas de edição de imagem, esses valores são habitualmente
representados por meio de notação hexadecimal, indo de 00 (mais escuro) até
FF (mais claro) para o valor de cada uma das cores. Assim, a cor #000000 é o
preto, pois não há projeção de nenhuma das três cores; em contrapartida,
#FFFFFF representa a cor branca, pois as três cores estarão projetadas em sua
intensidade máxima.
#000000 #FFFFFF

32. Teoria das cores
:: Influência das cores
Cinza: elegância, humildade, respeito, reverência, sutileza;
Vermelho: paixão, força, energia, amor, liderança, masculinidade,
alegria (China), perigo, fogo, raiva, revolução, “pare”;
Azul: harmonia, confidência, conservadorismo, austeridade, monotonia,
dependência, tecnologia, liberdade;
Verde: natureza, primavera, fertilidade, juventude, desenvolvimento,
riqueza, dinheiro (Estados Unidos), boa sorte, ciúmes, ganância, esperança;
Amarelo:velocidade, concentração, optimismo, alegria, felicidade, idealismo,
riqueza (ouro), fraqueza, dinheiro;

33. Teoria das cores
:: Influência das cores
Alaranjado: energia, criatividade, equilíbrio, entusiasmo, ludismo;
Branco: pureza, inocência, reverência, paz, simplicidade, esterilidade, rendição;
Preto: poder, modernidade, sofisticação, formalidade, morte, medo, anonimato,
raiva, mistério, azar;
Castanho: sólido, seguro, calmo, natureza, rústico, estabilidade, estagnação,
peso, aspereza.

36. designer . interfaces
lungas