Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
×

Apresentaçao Aula 2

1,563 views

Published on

Aula 2 - curso webdesign fema

Published in: Design
  • Be the first to comment

Apresentaçao Aula 2

  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

×