apresentaçao aula 2
DESCRIPTION
Aula 2 - curso webdesign femaTRANSCRIPT
![Page 1: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/1.jpg)
Treinamento de WebdesignTreinamento de Webdesign
O i ãInstrutor: Danilo Rozisca Organização:
Fema-CEPEINJul/2008
![Page 2: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/2.jpg)
SumárioSumário
í- Princípios de Design;- Elementos do Design;g- Imagens / Sistemas de Cores;- Tipografia;- Tipografia;- Psicologia das Cores;
ê- Influência.
![Page 3: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/3.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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 gcomo 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
![Page 4: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/4.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
1. Proximidade e alinhamento- elementos que pertençam a elementos que pertençam a um mesmo grupo devem estar próximos.
RADFAHRER, 2000
![Page 5: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/5.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
2. Equilíbrio, proporção e simetria -todos os componentes devem ser todos os componentes devem ser complementares.
IMAGENS, Textos,cores e ALINHAMENTOS.
RADFAHRER, 2000
![Page 6: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/6.jpg)
3. Contraste, cores e brancos - layouts dinâmicos chamam a atenção e causam impacto.
RADFAHRER, 2000
![Page 7: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/7.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Equilíbrio entre Elementos
Ter espaço em branco adequado em torno de t di i t ã d á iagrupamentos direciona a atenção dos usuários para
pontos importantes sem forçar a visão.
NIELSEN; LORANGER, 2007
![Page 8: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/8.jpg)
4. Ordem, consistência e repetição - liberdade para criar as regras, mas deve segui-las.criar as regras, mas deve segui las.
RADFAHRER, 2000
![Page 9: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/9.jpg)
Treinamento de Webdesign - Aula 25. Simplificação – simplicidade é sinônimo de elegância, objetividade e acima de tudo clarezaTreinamento de Webdesign Aula 2objetividade e, acima de tudo, clareza.
RADFAHRER, 2000
![Page 10: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/10.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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 layout e artes gráficas têm acesso a um público enorme, que pode ver seus trabalhos a 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
![Page 11: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/11.jpg)
Treinamento de Webdesign - Aula 27. Integração – o design não pode desafinar.
Treinamento de Webdesign Aula 2
RADFAHRER, 2000
![Page 12: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/12.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Convenções de desenho de Interface
d d f é dA padronização das interfaces é um dos conceitos mais 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
![Page 13: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/13.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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 de Orientação;Elementos de Orientação;•Elementos de Conteúdo; •Elementos de Emoção.
![Page 14: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/14.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Elementos de Navegação
![Page 15: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/15.jpg)
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Design Web: Elementos de Orientação
![Page 16: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/16.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Elementos de ConteúdoTextos, fotos, ícones, videos…
![Page 17: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/17.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Elementos de Emoção
Apelam para o sentimento do usuário e provocando curiosidade.
![Page 18: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/18.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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 2008CAVICHIOLI, 2008
![Page 19: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/19.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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
![Page 20: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/20.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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
![Page 21: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/21.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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
![Page 22: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/22.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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, 2008CAVICHIOLI, 2008
![Page 23: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/23.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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
![Page 24: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/24.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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, 2007NIELSEN; LORANGER, 2007
![Page 25: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/25.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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;V dVerdana.
NIELSEN; LORANGER, 2007
![Page 26: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/26.jpg)
Fontes legíveis para web:
Nome da Fonte Caracteristica
Arial Moderna, limpa, básica.
GeorgiaFonte com serifa projetada para leitura on-line.Aparência Tradicional, visual mais moderno que Times News Roman.Times News Roman.
Trebuchet MS Moderna, simples.
VerdanaFonte on-line mais legivel, mesmo em texto pequeno
Todas com 10 pontos ou acima.
pequeno
Todas com 10 pontos ou acima.
NIELSEN; LORANGER, 2007
![Page 27: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/27.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Sistema de Cores
RGB:
• Sistema de cores subtrativamente(pigmento);• 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
![Page 28: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/28.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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 significadosdiferentes significados.
DAMASCENO, 2003
![Page 29: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/29.jpg)
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, "pare";
Azul: harmonia, confidência, conservadorismo, austeridade, monotonia, dependência tecnologia liberdade;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;
ê êBrancoBrancoBranco:: pureza, inocência, reverência, paz, simplicidade, esterilidade, rendição;
Preto: poder, modernidade, sofisticação, formalidade, morte, medo, Preto: poder, modernidade, sofisticação, formalidade, morte, medo, anonimato, raiva, mistério.
CAVICHIOLI, 2008
![Page 30: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/30.jpg)
Treinamento de Webdesign - Aula 2Treinamento 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, Seu gráfico é conhecido como Roda das cores, Círculo das cores ou Círculo cromático.
CAVICHIOLI, 2008
![Page 31: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/31.jpg)
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/
CAVICHIOLI, 2008
Dica: http://www.studiosol.com.br/esquema de cores/
![Page 32: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/32.jpg)
Gerador de Esquemas de CoresGerador de Esquemas de Cores
www studiosol com br/esquema de cores/www.studiosol.com.br/esquema-de-cores/
![Page 33: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/33.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Caracteristicas da Web 2.0
ou
Webdesign 2.0, Redesign, Moda da internet?
![Page 34: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/34.jpg)
Influência da Apple
![Page 35: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/35.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Caracteristicas da Web 2.0
![Page 36: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/36.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Considerações Finais:
C áti d i li id d ã d l Com a prática da simplicidade na construção de layouts para websites seguindo cuidadosamente os elementos de design, resultam em layouts elegantes e funcionais em layouts elegantes e funcionais.
Cada ícone, figura, imagem e animação devem servir a um propósito
e comunicar algo significativo.
NIELSEN; LORANGER, 2007
![Page 37: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/37.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Na PráticaNa Prática
Ph t h CS3- Photoshop CS3-
![Page 38: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/38.jpg)
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Muito ObrigadoMuito Obrigado
Fim
![Page 39: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/39.jpg)
Treinamento de Webdesign - Aula 2
Referências:
Treinamento de Webdesign Aula 2
Referências:
DAMASCENO, ANIELLEWebdesign: Teoria e Prática; Visual Books; Florianópolis; 2003.
MEMÓRIA, FELIPEDesign para Internet: projetando a experiência perfeita;Rio de Janeiro; Elsevier; 2005.
MORROGH, EARLInformation Architecture: An Emerging 21st Century Profession;New Jersey; Prentice Hall; 2003.
PEON ESPANTOSO JOSE JUANPEON ESPANTOSO, JOSE JUANO 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, LULIDesign/Web/Design:2; 2ª Edição; 2000;Formato: PDF;Disponibilizado no endereço: http://www.luli.com.br/dwd2.
ROSENFELD, L. ; MORVILLE, POS N , . ; MO V , Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006.
![Page 40: Apresentaçao Aula 2](https://reader033.vdocuments.net/reader033/viewer/2022042614/555e251ed8b42a6a4c8b4e64/html5/thumbnails/40.jpg)
Treinamento de Webdesign - Aula 2
Referências (Sit ):
Treinamento de Webdesign Aula 2
Referências (Sites):
CAVICHIOLI ODAIR JRhttp://cavichioli.blogspot.com/Acessado: 26/05/2008Slide - Design de Interface;- Tipografia;- Teoria das Cores;- Diagramação de Sites.
MUNIZ RODRIGOMUNIZ, RODRIGOhttp://rodrigomuniz.com/blog/moda-no-design-para-a-web/Acessado: 23/06/2008- Influência da Apple.
WIKEPÉDIAhttp://www.wikepedia.orgAcessado: 27/05/2008- Webdesign.
DIGITAL PAPERhttp://digitalpaperweb.com.br/ezine/tipografia/o-que-e-tipografiahttp://digitalpaperweb.com.br/ezine/tipografia/o que e tipografiaAcessado: 01/06/2008- Tipografia.
PINCELADAS DA WEBhttp://www.pinceladasdaweb.com.br/blog/category/web-20/A d 26/06/2008Acessado: 26/06/2008- Web 2.0