Your SlideShare is downloading. ×
0
Treinamento de Webdesign


Instrutor: Danilo Rozisca    Organização:
                             O    i   ã
             ...
Sumário

-   Princípios de Design;
         í
-                      g
    Elementos do Design;
-   Imagens / Sistemas de ...
Treinamento de Webdesign - Aula 2

Princípios de design

A execução de um design consistente envolve - mesmo que
seja inst...
Treinamento de Webdesign - Aula 2


1. Proximidade e alinhamento
- elementos que pertençam a
um mesmo grupo devem estar
pr...
Treinamento de Webdesign - Aula 2


2. Equilíbrio, proporção e simetria -
todos os componentes devem ser
complementares.

...
3. Contraste, cores e brancos - layouts dinâmicos
chamam a atenção e causam impacto.




                                 ...
Treinamento de Webdesign - Aula 2

Design Web: Equilíbrio entre Elementos


 Ter espaço em branco adequado em torno de
 ag...
4. Ordem, consistência e repetição - liberdade para
criar as regras, mas deve segui-las.
                          segui l...
5. Simplificação – simplicidade é sinônimo de elegância,
objetividade e, acima detudo clareza
   Treinamento de tudo, clar...
Treinamento de Webdesign - Aula 2

6. Legibilidade - textos existem para serem lidos.
Exemplo:

   Curiosidade, inovação e...
7. Integração – o design não pode desafinar.
   Treinamento de Webdesign - Aula 2




                                    ...
Treinamento de Webdesign - Aula 2

Convenções de desenho de Interface

A padronização d interfaces é um d conceitos mais
 ...
Treinamento de Webdesign - Aula 2

Design Web: Elementos

Um bom design web se difere por sua funcionalidade e
harmonia es...
Treinamento de Webdesign - Aula 2

Design Web: Elementos de Navegação
Arquitetura da Informação e Webdesign

Design Web: Elementos de Orientação
Treinamento de Webdesign - Aula 2

Design Web: Elementos de Conteúdo
Textos, fotos, ícones, videos…
Treinamento de Webdesign - Aula 2

Design Web: Elementos de Emoção




  Apelam para o sentimento do usuário e provocando ...
Treinamento de Webdesign - Aula 2

Design Web: Diagramação (Construção de Layout)

É a distribuição de elementos gráficos ...
Treinamento de Webdesign - Aula 2

Design Web: Extensões de Gráficos para Web

GIF e JPG: Estes formatos fazem parte das i...
Treinamento de Webdesign - Aula 2

Design Web: Extensões de Gráficos para Web

Formato de arquivo GIF(Graphics Interface F...
Treinamento de Webdesign - Aula 2

Design Web: Extensões de Gráficos para Web

Formato de arquivo JPG(Join Photografic Exp...
Treinamento de Webdesign - Aula 2

Design Web: Tipografia


É a arte, o processo de criação e a classificação do
desenho d...
Treinamento de Webdesign - Aula 2

Design Web: Tipografia

 As fontes tipográficas
 (ou apenas fontes) são
 classificadas ...
Treinamento de Webdesign - Aula 2

Design Web: Tipografia


Fontes Tipográficas diferentes podem significar fantasia ou
se...
Treinamento de Webdesign - Aula 2

Design Web: Tipografia

Fontes pré-instaladas:
      Arial;
           ;
      Arial bl...
Fontes legíveis para web:

Nome da Fonte   Caracteristica
Arial           Moderna, limpa, básica.

                Fonte c...
Treinamento de Webdesign - Aula 2

Design Web: Sistema de Cores

RGB:

  • Sistema de cores subtrativamente(pigmento);
  •...
Treinamento de Webdesign - Aula 2

Design Web: Psicologia das cores

Desde os primórdios da humanidade, a cor já é utiliza...
Design Web: Psicologia das cores
As cores podem ter alguns significados e provocar lembranças e sensações
diferentes às pe...
Treinamento de Webdesign - Aula 2

Design Web: Combinação de cores

Círculo cromático - Método de representar o
   espectr...
Círculo cromático

Esquema Triádico

   – Combina três cores eqüidistantes
     (triangulação);

   – Como a intensidade e...
Gerador de Esquemas de Cores




www.studiosol.com.br/esquema-de-cores/
www studiosol com br/esquema de cores/
Treinamento de Webdesign - Aula 2

Design Web: Caracteristicas da Web 2.0

                       ou

Webdesign 2.0, Redes...
Influência da Apple
Treinamento de Webdesign - Aula 2

Design Web: Caracteristicas da Web 2.0
Treinamento de Webdesign - Aula 2

Considerações Finais:

  Com a prática d simplicidade na construção d l
  C        áti ...
Treinamento de Webdesign - Aula 2




           Na Prática

        - Ph t h CS3-
          Photoshop CS3
Treinamento de Webdesign - Aula 2




      Muito Obrigado


                               Fim
Treinamento de Webdesign - Aula 2

Referências:

DAMASCENO, ANIELLE
Webdesign: Teoria e Prática; Visual Books; Florianópol...
Treinamento de Webdesign - Aula 2

Referências (Sit ):
             Sites

CAVICHIOLI ODAIR JR
http://cavichioli.blogspot....
Upcoming SlideShare
Loading in...5
×

Aula 2 Webdesign

3,353

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,353
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
358
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Aula 2 Webdesign"

  1. 1. Treinamento de Webdesign Instrutor: Danilo Rozisca Organização: O i ã Fema-CEPEIN Jul/2008
  2. 2. Sumário - Princípios de Design; í - g Elementos do Design; - Imagens / Sistemas de Cores; - Tipografia; - Psicologia das Cores; - Influência. ê
  3. 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. 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. 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. 6. 3. Contraste, cores e brancos - layouts dinâmicos chamam a atenção e causam impacto. RADFAHRER, 2000
  7. 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. 8. 4. Ordem, consistência e repetição - liberdade para criar as regras, mas deve segui-las. segui las. RADFAHRER, 2000
  9. 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. 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. 11. 7. Integração – o design não pode desafinar. Treinamento de Webdesign - Aula 2 RADFAHRER, 2000
  12. 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. 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.
  14. 14. Treinamento de Webdesign - Aula 2 Design Web: Elementos de Navegação
  15. 15. Arquitetura da Informação e Webdesign Design Web: Elementos de Orientação
  16. 16. Treinamento de Webdesign - Aula 2 Design Web: Elementos de Conteúdo Textos, fotos, ícones, videos…
  17. 17. Treinamento de Webdesign - Aula 2 Design Web: Elementos de Emoção Apelam para o sentimento do usuário e provocando curiosidade.
  18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. Gerador de Esquemas de Cores www.studiosol.com.br/esquema-de-cores/ www studiosol com br/esquema de cores/
  33. 33. Treinamento de Webdesign - Aula 2 Design Web: Caracteristicas da Web 2.0 ou Webdesign 2.0, Redesign, Moda da internet?
  34. 34. Influência da Apple
  35. 35. Treinamento de Webdesign - Aula 2 Design Web: Caracteristicas da Web 2.0
  36. 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
  37. 37. Treinamento de Webdesign - Aula 2 Na Prática - Ph t h CS3- Photoshop CS3
  38. 38. Treinamento de Webdesign - Aula 2 Muito Obrigado Fim
  39. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×