Aula 2 Webdesign

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


1. Proximidade e alinhamento- elementos que pertençam a elementos que pertençam a um mesmo grupo devem estar próximos.

RADFAHRER, 2000


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


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


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


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


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.


Design Web: Elementos de Navegação

Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign

Design Web: Elementos de Orientação


Design Web: Elementos de ConteúdoTextos, fotos, ícones, videos…


Design Web: Elementos de Emoção

Apelam para o sentimento do usuário e provocando curiosidade.


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


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



Formato de arquivo GIF(Graphics Interface Format):

- Suporta apenas 256 cores;- Suporta transparência;- Suporta animações(quadro a quadro).

DAMASCENO, 2003



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


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



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



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



Fontes pré-instaladas:

Arial;;Arial black;Comic Sans MS;Courier New;Georgia;Impact;p ;Times New Roman;Trebuchet MS;V dVerdana.


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.



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


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


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/


Design Web: Caracteristicas da Web 2.0

ou

Webdesign 2.0, Redesign, Moda da internet?

Influência da Apple


Design Web: Caracteristicas da Web 2.0


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.



Na PráticaNa Prática

Ph t h CS3- Photoshop CS3-


Muito ObrigadoMuito Obrigado

Fim

Treinamento de Webdesign - Aula 2

Referências:


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 ):


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

Documents

Aula 2 Webdesign