O documento resume um treinamento sobre webdesign. Ele discute 7 princípios básicos de design, como proximidade e alinhamento. Também aborda elementos de design como navegação, orientação e conteúdo. Por fim, explica conceitos como tipografia, sistemas de cores e psicologia das cores.
2. Sumário
- Princípios de Design;
í
- g
Elementos do Design;
- Imagens / Sistemas de Cores;
- Tipografia;
- Psicologia das Cores;
- Influência.
ê
3. Treinamento de Webdesign - Aula 2
Princípios de design
A execução de um design consistente envolve - mesmo que
seja instintivamente - conceitos estéticos consagrados
j g
como função e estrutura, além dos princípios básicos da
Gestalt. Todos esses fatores são meras variações do mesmo
ç
tema de sempre, o bom senso.
Eles podem ser resumidos em sete tópicos:
RADFAHRER, 2000
4. Treinamento de Webdesign - Aula 2
1. Proximidade e alinhamento
- elementos que pertençam a
um mesmo grupo devem estar
próximos.
RADFAHRER, 2000
5. Treinamento de Webdesign - Aula 2
2. Equilíbrio, proporção e simetria -
todos os componentes devem ser
complementares.
IMAGENS, Textos,
cores e ALINHAMENTOS.
RADFAHRER, 2000
6. 3. Contraste, cores e brancos - layouts dinâmicos
chamam a atenção e causam impacto.
RADFAHRER, 2000
7. Treinamento de Webdesign - Aula 2
Design Web: Equilíbrio entre Elementos
Ter espaço em branco adequado em torno de
agrupamentos di i
t direciona a atenção d usuários para
t ã dos ái
pontos importantes sem forçar a visão.
NIELSEN; LORANGER, 2007
8. 4. Ordem, consistência e repetição - liberdade para
criar as regras, mas deve segui-las.
segui las.
RADFAHRER, 2000
9. 5. Simplificação – simplicidade é sinônimo de elegância,
objetividade e, acima detudo clareza
Treinamento de tudo, clareza. - Aula 2
e Webdesign
RADFAHRER, 2000
10. Treinamento de Webdesign - Aula 2
6. Legibilidade - textos existem para serem lidos.
Exemplo:
Curiosidade, inovação e descoberta: o desafio do
design digital
A World Wide Web abriu fronteiras inacreditáveis: pela primeira vez os profissionais de
layout e artes gráficas têm acesso a um público enorme, que pode ver seus trabalhos a
enorme
qualquer instante.
Alguns dizem que o conjunto das tais “páginas pessoais” é a maior exposição pública de
arte da história.
Sob alguns aspectos, esse público é até maior que o dos publicitários, pois não tem
restrições de tempo.
RADFAHRER, 2000
11. 7. Integração – o design não pode desafinar.
Treinamento de Webdesign - Aula 2
RADFAHRER, 2000
12. Treinamento de Webdesign - Aula 2
Convenções de desenho de Interface
A padronização d interfaces é um d conceitos mais
d das f dos
importantes para se projetar websites.
Estão relacionadas a conceitos de psicologia cognitiva,
como facilidade de aprendizado e memorização,
p ç ,
diminuindo as chances de dúvidas e erros por parte dos
usuários.
MEMÓRIA, 2005
13. Treinamento de Webdesign - Aula 2
Design Web: Elementos
Um bom design web se difere por sua funcionalidade e
harmonia estética entre seus elementos:
•Elementos de Navegação;
•Elementos
Elementos de Orientação;
•Elementos de Conteúdo;
•Elementos de Emoção.
16. Treinamento de Webdesign - Aula 2
Design Web: Elementos de Conteúdo
Textos, fotos, ícones, videos…
17. Treinamento de Webdesign - Aula 2
Design Web: Elementos de Emoção
Apelam para o sentimento do usuário e provocando curiosidade.
18. Treinamento de Webdesign - Aula 2
Design Web: Diagramação (Construção de Layout)
É a distribuição de elementos gráficos em um espaço
limitado, buscando a clareza, a organização e a
confiabilidade das informações;
Lógica visual, criando um perfeito equilíbrio entre a
sensação visual e as informações gráficas;
CAVICHIOLI,
CAVICHIOLI 2008
19. Treinamento de Webdesign - Aula 2
Design Web: Extensões de Gráficos para Web
GIF e JPG: Estes formatos fazem parte das imagens
bitmaps, obtidas através de processos de compressão de
imagens que tornam o arquivo mais leve, possibilitando o
carregamento mais eficiente em várias velocidade de
conexão.
DAMASCENO, 2003
20. Treinamento de Webdesign - Aula 2
Design Web: Extensões de Gráficos para Web
Formato de arquivo GIF(Graphics Interface Format):
- Suporta apenas 256 cores;
- Suporta transparência;
- Suporta animações(quadro a quadro).
DAMASCENO, 2003
21. Treinamento de Webdesign - Aula 2
Design Web: Extensões de Gráficos para Web
Formato de arquivo JPG(Join Photografic Experts Group):
- Permite manter as caracteristicas originais da imagem;
g g
- Trabalha com milhões de cores.
DAMASCENO, 2003
22. Treinamento de Webdesign - Aula 2
Design Web: Tipografia
É a arte, o processo de criação e a classificação do
desenho de letras do alfabeto e de caracteres usados para
formar palavras.
CAVICHIOLI, 2008
23. Treinamento de Webdesign - Aula 2
Design Web: Tipografia
As fontes tipográficas
(ou apenas fontes) são
classificadas em 4 grupos
básicos: as com serifas, as
sem serifas, as cursivas e
as fontes dingbats.
DigitalPaperWeb.com.br, 2008
24. Treinamento de Webdesign - Aula 2
Design Web: Tipografia
Fontes Tipográficas diferentes podem significar fantasia ou
seriedade e, tamanho e cores podem dar maior destaque ao
conteúdo.
NIELSEN; LORANGER, 2007
25. Treinamento de Webdesign - Aula 2
Design Web: Tipografia
Fontes pré-instaladas:
Arial;
;
Arial black;
Comic Sans MS;
Courier New;
Georgia;
Impact;
p ;
Times New Roman;
Trebuchet MS;
Verdana.
V d
NIELSEN; LORANGER, 2007
26. Fontes legíveis para web:
Nome da Fonte Caracteristica
Arial Moderna, limpa, básica.
Fonte com serifa projetada para leitura on-line.
Georgia Aparência Tradicional, visual mais moderno que
Times News Roman.
Trebuchet MS Moderna, simples.
Fonte on-line mais legivel, mesmo em texto
Verdana
pequeno
Todas com 10 pontos ou acima.
NIELSEN; LORANGER, 2007
27. Treinamento de Webdesign - Aula 2
Design Web: Sistema de Cores
RGB:
• Sistema de cores subtrativamente(pigmento);
• Formado por vermelho (Red), verde (Green) e azul (Blue);
• É utilizado na eletrônica e recursos visuais eletrônicos.
CAVICHIOLI, 2008
28. Treinamento de Webdesign - Aula 2
Design Web: Psicologia das cores
Desde os primórdios da humanidade, a cor já é utilizada
como elemento de sinalização;
Para cada sociedade do planeta, uma mesma cor possui
diferentes significados
significados.
DAMASCENO, 2003
29. Design Web: Psicologia das cores
As cores podem ter alguns significados e provocar lembranças e sensações
diferentes às pessoas dependendo de sua cultura:
Cinza: elegância, humildade, respeito, reverência, sutileza;
Vermelho: paixão, força, energia, amor, velocidade, liderança, masculinidade,
alegria (China), perigo, fogo, raiva, revolução, quot;parequot;;
Azul: harmonia, confidência, conservadorismo, austeridade, monotonia,
dependência, tecnologia,
dependência tecnologia liberdade;
Verde: natureza, primavera, fertilidade, juventude, desenvolvimento, riqueza,
dinheiro (Estados Unidos), boa sorte, ciúmes, ganância;
Amarelo: concentração, otimismo, alegria, felicidade, idealismo, riqueza
(ouro), fraqueza;
Branco:
Branco: pureza, inocência, reverência, paz, simplicidade, esterilidade,
ê ê
rendição;
Preto: poder, modernidade, sofisticação, formalidade, morte, medo,
anonimato, raiva, mistério.
CAVICHIOLI, 2008
30. Treinamento de Webdesign - Aula 2
Design Web: Combinação de cores
Círculo cromático - Método de representar o
espectro visível agrupando as cores na seqüência
da freqüência espectral;
q p ;
Seu gráfico é conhecido como Roda das cores,
Círculo das cores ou Círculo cromático.
CAVICHIOLI, 2008
31. Círculo cromático
Esquema Triádico
– Combina três cores eqüidistantes
(triangulação);
– Como a intensidade entre as cores
são pouco distintas, esse esquema
é mais versátil;
– Pode-se utilizar essa técnica para
diminuir a vibração óptica das
cores.
Dica: http://www studiosol com br/esquema-de-cores/
http://www.studiosol.com.br/esquema de cores/
CAVICHIOLI, 2008
32. Gerador de Esquemas de Cores
www.studiosol.com.br/esquema-de-cores/
www studiosol com br/esquema de cores/
33. Treinamento de Webdesign - Aula 2
Design Web: Caracteristicas da Web 2.0
ou
Webdesign 2.0, Redesign, Moda da internet?
36. Treinamento de Webdesign - Aula 2
Considerações Finais:
Com a prática d simplicidade na construção d l
C áti da i li id d ã de layouts para
websites seguindo cuidadosamente os elementos de design, resultam
em layouts elegantes e funcionais
funcionais.
Cada ícone, figura, imagem e animação devem servir a um propósito
e comunicar algo significativo.
NIELSEN; LORANGER, 2007
39. Treinamento de Webdesign - Aula 2
Referências:
DAMASCENO, ANIELLE
Webdesign: Teoria e Prática; Visual Books; Florianópolis; 2003.
MEMÓRIA, FELIPE
Design para Internet: projetando a experiência perfeita;
Rio de Janeiro; Elsevier; 2005.
MORROGH, EARL
Information Architecture: An Emerging 21st Century Profession;
New Jersey; Prentice Hall; 2003.
PEON ESPANTOSO, JOSE JUAN
ESPANTOSO
O arquiteto da informação e o bibliotecário do futuro; Revista de Biblioteconomia de Brasília, v.23/24, n.2, p.135-146;
1999/2000.
RADFAHRER, LULI
Design/Web/Design:2; 2ª Edição; 2000;
Formato: PDF;
Disponibilizado no endereço: http://www.luli.com.br/dwd2.
ROSENFELD, L. ; MO V
OS N , . MORVILLE, P ,
Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006.
40. Treinamento de Webdesign - Aula 2
Referências (Sit ):
Sites
CAVICHIOLI ODAIR JR
http://cavichioli.blogspot.com/
Acessado: 26/05/2008
Slide - Design de Interface;
- Tipografia;
- Teoria das Cores;
- Diagramação de Sites.
MUNIZ,
MUNIZ RODRIGO
http://rodrigomuniz.com/blog/moda-no-design-para-a-web/
Acessado: 23/06/2008
- Influência da Apple.
WIKEPÉDIA
http://www.wikepedia.org
Acessado: 27/05/2008
- Webdesign.
DIGITAL PAPER
http://digitalpaperweb.com.br/ezine/tipografia/o que e tipografia
http://digitalpaperweb.com.br/ezine/tipografia/o-que-e-tipografia
Acessado: 01/06/2008
- Tipografia.
PINCELADAS DA WEB
http://www.pinceladasdaweb.com.br/blog/category/web-20/
Acessado: 26/06/2008
A d
- Web 2.0