Aula 02 – Aula de aplicação de conceito e prática

Apresentação em tema: "Aula 02 – Aula de aplicação de conceito e prática"— Transcrição da apresentação:

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

2 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.

3 1. Analisando um site Acessar site globo.com
Identificar áreas de navegação Portal simples, clean e objetivo. Dona Laura Restaurante Objetivos, cores e formas

4 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.

5 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.

6 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

7 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.

8 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.

9 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.

10 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.

11 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

12 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.

13 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.

14 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.

15 4. Projetando um site pessoal
Brainstorming Briefing Estrutura Logo própria ou nome Portifólio Exemplos

16 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.

17 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.

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,