A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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

Apresentações semelhantes


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

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

2 A ULA 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. A NALISANDO 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

4 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. C ONSTRUINDO 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. C ONSTRUINDO 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 CalculatorSessions.edu - Color Calculator b) Color-Wheel-ProColor-Wheel-Pro c) ColorimpactColorimpact

7 3. C ONSTRUINDO 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. C ONSTRUINDO 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. C ONSTRUINDO 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. C ONSTRUINDO 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. C ONSTRUINDO 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. C ONSTRUINDO 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. C ONSTRUINDO 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. C ONSTRUINDO 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. P ROJETANDO 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, DAMASCENO, Anielle. Webdesign: Teoria e Prática, 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, KRUG, Steve. Não Me faça Pensar – Usabilidade na Web- 2ª ed., 2008 NIELSEN, Jakob. Projetando Websites, NIEMEYER, Lucy. Elementos de semiótica aplicados ao design. Rio de Janeiro: 2AB, PEIRCE, Charles Sanders. Semiótica. São Paulo: Perspectiva, TURIN, Roti Nielba. Aulas : introdução ao estudo das linguagens,


Carregar ppt "WEB DESIGN I I Aula 02 – Aula 02 – Aula de aplicação de conceito e prática."

Apresentações semelhantes


Anúncios Google