WEB DESIGN I IWEB DESIGN I IAula 02 – Aula 02 – Aula de aplicação de conceito e prática

AULA CONCEITUAL E EXPOSITIVA:

1. Analisando um site 2. Discussão de exercícios em sala 3. Construindo site: briefing, estrutura, cores , formas e

imagens. 4. Projetando um site pessoal 5. Exercícios prático: construção vetorial de layout de

um site para cliente. Verificar briefing.

2 - 18

1. ANALISANDO UM SITE

Acessar site globo.com Identificar áreas de navegação Portal simples, clean e objetivo.

Dona Laura Restaurante Identificar áreas de navegação Objetivos, cores e formas

3 - 18

4 - 18

2. DISCUSSÃO DE EXERCÍCIOS EM SALA

Sobre a proposta do exercício. Cuidados com várias ferramentas. Boa aplicação criativa. Cores Exemplos bem aplicados.

3. CONSTRUINDO SITE: BRIEFING, ESTRUTURA, CORES , FORMAS E IMAGENS.

Brainstorming: inserção de todas as palavras-chave relacionado ao tema do site.

Briefing: lista de itens que irá definir todo o cronograma do projeto/site. Coleta de informações do cliente.

Estrutura: após organizar as informações junto ao cliente . Criar uma estrutura de navegação: todos os itens que deverá conter no site , os níveis e apresentação.

5 - 18

3. CONSTRUINDO SITE: BRIEFING, ESTRUTURA, CORES , FORMAS E IMAGENS.

Cores: item muito importante, relacionada a área de atuação e a logomarca da empresa.

Uma das tarefas mais difíceis para os comunicadores visuais é selecionar combinações de cores harmoniosas.

As combinações de cores perfeitas são resultados de equações matemáticas perfeitas. Diferenças exatas e precisas em luminosidade, cor e saturação criam combinações agradáveis e harmoniosas.

Três sites para a seleção de combinações perfeitas: a) Sessions.edu - Color Calculator b) Color-Wheel-Pro c) Colorimpact

6 - 18

3. CONSTRUINDO SITE: BRIEFING, ESTRUTURA, CORES , FORMAS E IMAGENS.

Formas: aproveitar formas da logomarca e/ou conceitos da área de atuação. Ex.: feminino curvas.

Imagens: fotográficas podem ser produzidas, usar banco de imagens ou criar vetores (elementos). Pode ser para a composição ou para galerias de imagens.

Galeria refere-se ao portifólio da empresa.

Dona Laura Restaurante. Desenhar áreas e amostrar em software vetorial. 7 - 18

3. CONSTRUINDO SITE: BRIEFING, ESTRUTURA, CORES , FORMAS E IMAGENS.

Disco de Newton Para sanar o problema da cor do logo da empresa usar as cores complementares,que estão opostas no círculo das cores .Exemplo, o verde é a complementar vermelho.

Tomar cuidado as cores são complementares quando misturadas. Efeitos negativos.

8 - 18

3. CONSTRUINDO SITE: BRIEFING, ESTRUTURA, CORES , FORMAS E IMAGENS.

As pessoas que são daltônicas não conseguem visualizar essas combinações, sendo que as outras pessoas sentirão certo desconforto ao ler os textos acima.

O daltonismo é uma doença congênita que provoca a confusão de cores, principalmente o verde e o vermelho. Devemos estar atentos a essas cores para não agredir nossos clientes.

A boa combinação: tons de uma única cor com dosagens de branco ou preto ou cores próximas no círculo. Ex.: laranja,vermelho e amarelo.

9 - 18

3. CONSTRUINDO SITE: BRIEFING, ESTRUTURA, CORES , FORMAS E IMAGENS.

Recomendações 01. Não usar itens que piscam. O uso intensivo, sendo

um texto ou imagem, causa fadiga visual,depende do fundo.

02. Evitar fundos escuros: Fundo preto não é recomendado (principalmente em portais de comunicação), pois há poucas cores que contrastam e causa cansaço visual

03. Não usar muitas cores alternativas para links: é mais interessantes fazer uso do sublinhado.

10 - 18

3. CONSTRUINDO SITE: BRIEFING, ESTRUTURA, CORES , FORMAS E IMAGENS.

04. Reduzir o número de cores: a maioria dos monitores apenas conseguem representar, milhares de cores, outros 256 ou 16 cores, além dos monitores P & B que equipam sistemas comerciais.

Para sistemas comerciais, usar apenas 16 cores, pois ao serem convertidas para monocromático, há padrões de cinza suficientes. Exemplo: imagem com pouco contraste , em monitor monocromático , imagem com bom contraste e em monitor monocromático

11 - 18

3. CONSTRUINDO SITE: BRIEFING, ESTRUTURA, CORES , FORMAS E IMAGENS.

05. Usar sempre textos com letras pretas: A letra preta, sobre um fundo claro, tem melhor legibilidade.

06. Não tornar a tela muito brilhante ou escura use as cores brilhantes em áreas pequenas e cores suaves em áreas maiores.

07. Não apostar na boa habilidade visual de todos os usuários, grande número de pessoas têm algum tipo de disfunção visual tais como os daltônicos. A distorção de algumas lentes também pode provocar estes efeitos.

12 - 18

3. CONSTRUINDO SITE: BRIEFING, ESTRUTURA, CORES , FORMAS E IMAGENS.

08. Não associar muitas cores para serem lembradas (tais como as de links), as cores podem possuir um significado, além daqueles mais populares (vermelho para Pare e Verde para Seguir).

09. Cores Opostas: se vermelho é Pare: o oposto é verde; se vermelho é calor (quente); o oposto é azul (frio).

10. Associações simples melhor captadas por leigos: vermelho: pare, perigo, fogo, quente.amarelo: cuidado, atenção, aviso.verde: siga, aprovação, okay. azul: frio, água, sono.

13 - 18

3. CONSTRUINDO SITE: BRIEFING, ESTRUTURA, CORES , FORMAS E IMAGENS.

IMPORTANTE!!!!

Assegurar que todas as informações vinculadas com a cor estejam também disponíveis sem cor. Ex.: Monocromáticas.

Tenham em mente que as cores mal utilizadas são piores do que não fazer uso delas.

14 - 18

4. PROJETANDO UM SITE PESSOAL

Brainstorming Briefing Estrutura Logo própria ou nome Portifólio Exemplos

15 - 18

5. EXERCÍCIOS PRÁTICO: CONSTRUÇÃO VETORIAL DE LAYOUT DE UM SITE PARA CLIENTE. VERIFICAR BRIEFING.

Criar um site vetorial Respeitando os itens de briefing Briefing simples e logomarca nos computadores.

16 - 18

AVALIAÇÃO/ APRESENTAÇÃO DE TRABALHO

AVALIAÇÃO/ APRESENTAÇÃO DE TRABALHO – Portifólio/página pessoal – individual – (valor 8,0).

Este trabalho será avaliado por etapas, as quais a cada aula o aluno deverá apresentar uma das etapas programadas do trabalho. Conforme as aulas práticas forem aplicadas o aluno deverá implementar em seu trabalho o conteúdo/item dado.

O trabalho seguirá um cronograma e ao final das aplicações cada aluno deverá apresentar seu portifólio ao restante da turma, explicando e conceituando cada item aplicado. O aluno deve entregar um documento explicando a conceituação e aplicação de cada item contido no site.

17 - 18

LINKS E REFERÊNCIAS DE APOIO: COELHO NETTO, J. Teixeira. Semiótica, informação e comunicação.

São Paulo: Perspectiva, 1983. DAMASCENO, Anielle. Webdesign: Teoria e Prática, 2003. DOMINGUES, Delmar Galisi. (2001) O Uso de Metáforas na

Computação, Tese de Mestrado, ECA, Universidade de São Paulo. FRUTIGER, Adrian. Sinais e símbolos: desenho, projeto e significado.

São Paulo:Martins Fontes, 2001. KRUG, Steve. Não Me faça Pensar – Usabilidade na Web- 2ª ed.,

2008 NIELSEN, Jakob. Projetando Websites, 2000. NIEMEYER, Lucy. Elementos de semiótica aplicados ao design. Rio

de Janeiro: 2AB, 2003. PEIRCE, Charles Sanders. Semiótica. São Paulo: Perspectiva, 2000. TURIN, Roti Nielba. Aulas : introdução ao estudo das linguagens,

2007.18 -18