apresentaçao aula 2
DESCRIPTION
Aula 2 - curso webdesign femaTRANSCRIPT
Treinamento de WebdesignTreinamento de Webdesign
O i ãInstrutor: Danilo Rozisca Organização:
Fema-CEPEINJul/2008
SumárioSumário
í- Princípios de Design;- Elementos do Design;g- Imagens / Sistemas de Cores;- Tipografia;- Tipografia;- Psicologia das Cores;
ê- Influência.
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
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
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
3. Contraste, cores e brancos - layouts dinâmicos chamam a atenção e causam impacto.
RADFAHRER, 2000
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
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
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
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
Treinamento de Webdesign - Aula 27. Integração – o design não pode desafinar.
Treinamento de Webdesign Aula 2
RADFAHRER, 2000
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
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.
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Elementos de Navegação
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Design Web: Elementos de Orientação
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Elementos de ConteúdoTextos, fotos, ícones, videos…
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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/
Gerador de Esquemas de CoresGerador de Esquemas de Cores
www studiosol com br/esquema de cores/www.studiosol.com.br/esquema-de-cores/
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Caracteristicas da Web 2.0
ou
Webdesign 2.0, Redesign, Moda da internet?
Influência da Apple
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Design Web: Caracteristicas da Web 2.0
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
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Na PráticaNa Prática
Ph t h CS3- Photoshop CS3-
Treinamento de Webdesign - Aula 2Treinamento de Webdesign Aula 2
Muito ObrigadoMuito Obrigado
Fim
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.
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