Curso: Desenhista de Produtos Grficos Web

Unidade: Princpios de Web Designer

Sidney Inacio Ferreira

prof.sidney.inacio@gmail.com

Terceira Aula

Estrutura do curso; Ambiente virtual; Mapear a pasta da turma; Profissionais da Web; O que Design; Web Designer; Cores e suas caractersticas; Dicas de utilizao.
2

Princpios de Web Design FireWorks Flash HTML5 com CSS DreamWeaver Projeto Total Especficas Modulo integrador (Psicloga) Total do curso
Primeira Aula

20h 32h 32h 16h 32h 32h 164h 36h 200h

3

www.utic.com.br
Obs.: Se for utilizar o Internet Explorer, antes de acessar o site, v no menu Ferramentas, comando Opes de Internet. Aparecer uma janela, onde devemos clicar na guia Privacidades e em seguida clicar no boto Avanado. Na janela que aparece selecione as opes como na imagem ao lado:

O nome do usurio a combinao dos nmeros do seu CPF. A senha inicial : 123456
ps: troque sua senha e anote para no esquecer.

Supondo que o nmero do seu CPF seja 333.444.555-22, observe que os seis primeiros nmeros e os dois ltimos esto em vermelho, esses nmeros formam seu cdigo de acesso e devero ser digitados no campo Nome de usurio, sem pontos nem trao: 33344422

1. V em Iniciar; 2. Clique com o boto direito em Computador; 3. Selecione o comando Mapear unidade de rede; 4. Em Unidade, escolha uma letra para unidade; 5. Em pasta digite:

\\172.16.0.1\alunos\ti268
6. Clique em concluir.

7. Usurio 8. Senha

AlunoSidneyManha

AlunoSidney08

 Web Designer Desenvolve o design do site, ou seja, trata da parte visual do mesmo, da usabilidade e acessibilidade do site, mas isso falaremos mais tarde; Programador Web (Web Developer) Cria os programas que vo interagir com o usurio e um banco de dados, atravs da interface de uma pgina Web; Web Master Profissional que abrange os dois anteriores, ou seja, ele entende de design, programao, banco de dados e redes. Cabe a esse profissional decidir que tipo de tecnologia a ser usada na construo do site, que linguagem de acesso a dados, que servidor, etc. Normalmente possui nvel superior.
Primeira Aula 7

Em nosso curso iremos abordar as principais ferramentas utilizadas pelo Web Designer, mais existem outras que podem auxiliar o trabalho do mesmo, veja algumas abaixo: PhotoShop Edio de imagens bitmaps e layouts; Illustrator Edio de imagem vetoriais e bitmaps e layouts; CorelDraw Edio de imagem vetoriais e bitmaps e layouts (para Web, o melhor o Illustrator).
Primeira Aula 8

 Design quer dizer: criar, projetar, desenvolver e dar forma atravs de uma seqncia de atividades. Tanto se aplica ao Urbanismo (design urbano), a Arquitetura (design da habitao) como a uma pgina de Internet (Design para Web) e em tudo que usamos hoje.
Primeira Aula 9

Primeira Aula

Pginas Web.

Design industrial.

Smbolo, logotipos, marcas ou logomarcas.

10

 O designer o profissional habilitado a efetuar atividades relacionadas ao design.

Em ingls, o termo se refere a qualquer indivduo que esteja ligado a alguma atividade criativa ou de projeto (desenhador).

Primeira Aula

11

 O Web Designer uma extenso da prtica do design, onde o foco do projeto a criao de web sites e documentos disponveis no ambiente da web (imagens, animaes, banners, etc). A preocupao fundamental em web design agregar os conceitos de USABILIDADE com o planejamento da interface, garantindo que o usurio final atinja seus objetivos de forma intuitiva, permitindo a ACESSIBILIDADE do site.
Primeira Aula 12

 Design envolve trs elementos cores, formas e texturas. Todos os trs devem estar presentes, caso contrrio no haver elementos de design a serem abordados.

Primeira Aula

13

Primeira Aula

A cor uma percepo visual provocada pela ao de um feixe de ftons sobre clulas especializadas da retina, que transmitem atravs de informao pr-processada no nervo ptico, impresses para o sistema nervoso. A cor de um material determinada pelas mdias de freqncia dos pacotes de onda que as suas molculas constituintes refletem. Um objeto ter determinada cor se no absorver justamente os raios correspondentes freqncia

Exemplo de onda

Primeira Aula

15

Dispositivos que misturam pigmentos coloridos, (impressora, Scanner, etc), seguem o modelo subtrativo cujas cores primrias so: amarelo, magenta e ciano. A mistura de todas as cores produz o preto.
Dispositivos baseados na emisso de luz (monitor, data-show, etc) seguem o modelo aditivo, cujas cores primrias so vermelho, verde e azul. A mistura de todas as cores produz o branco.
Primeira Aula 16

O sistema RGB o padro de cores na WEB. um sistema de cores baseado na combinao de 3 cores primria (Red, Green e Blue). o modelo usado em TV e monitores.

Primeira Aula

17

A escala de RGB varia de 0 (mais escuro) a 255 (mais claro) para cada cor (R,G e B). Nos programas de edio de imagem, esses valores so habitualmente representados por meio de notao hexadecimal, indo de 00 (mais escuro) at FF (mais claro) para o valor de cada uma das cores. Assim, a cor #000000 o preto, pois no h projeo de nenhuma das trs cores; em contrapartida, #FFFFFF representa a cor branca, pois as trs cores estaro projetadas em sua intensidade mxima.

Ex.:

Decimal
Em Hexadecimal

153 0 21
#990015

Primeira Aula

18

http://www.universodacor.com.br/index .php?scr=misturador_cor

Primeira Aula

19

Primeira Aula

O crculo cromtico representa o espectro de cores em forma circular. As cores so arrumadas em seqncia em forma circular. O crculo cromtico formado por cores quentes e frias.

Primeira Aula

Cores primrias so aquelas que no podem ser obtidas a partir da mistura de outras cores, portanto so bsicas. As cores primrias consistem no amarelo, no azul e no vermelho.

As cores secundrias so aquelas originadas pela mistura de duas cores primrias. Por exemplo, misturando o azul com amarelo, obtm-se o verde. A mistura do amarelo com o vermelho, resulta no laranja. J o azul, mais o vermelho deriva o violeta, como ilustrao abaixo:

J as cores tercirias so aquelas que resultam da mistura de uma cor primria com uma cor secundria. Exemplificando, o amarelo alaranjado se consegue misturando o amarelo (cor primria) com o laranja (cor secundria). Misturando-se o vermelho (cor primria) com o laranja (cor secundria), chega-se ao vermelho alaranjado:

Primeira Aula

Cores Complementares
So aquelas que esto opostas no Crculo das Cores. So contrastantes entre si, ou seja, permitem um maior contraste.

Cores Anlogas
So aquelas que esto vizinhas no Crculo das Cores. No permitem um bom contraste, mas uma combinao mais sutil ladoalado.

Primeira Aula

Complementares
Melhor utilizadas uma sobre a outra para dar um melhor destaque.

Anlogas
Melhor utilizada uma do lado da outra para dar uma transio suave de uma cor para outro. No d um bom destaque uma sobre a outra.

Primeira Aula

A temperatura das cores, designa a capacidade que as cores tm de parecer quentes ou frias. Quando se divide um disco cromtico ao meio (figura ao lado) com uma linha vertical cortando o amarelo e o violeta, percebe-se que os vermelhos e laranjas do lado direito, so cores quentes, vibrantes. Pr outro lado, os azuis e verdes do lados esquerdo so cores frias, que transmitem sensaes de tranqilidade.

Primeira Aula

Transmitem um efeito ou sentimento clido ao observador, do sensao de atividade, de alegria, de dinamismo, de confiana e amizade. Se observamos o crculo cromtico, vemos que as cores quentes so aquelas que participam da mistura com vermelho ou amarelo com qualidades positivas, atrevidas, excitantes, vibrantes e expansivas. Sugerem calor, fogo, luz de sol, sangue, e possuem carcter inquieto, vivo e estimulante.

Primeira Aula

Transmitem ao observador uma sensao de frieza, mas tambm de tranquilidade, de seriedade, de distanciamento. So as cores que participam do azul com carcter negativo, intimista, e reservado tranquilo e relaxantes. Sugerem frio, umidade, agua, luz de lua e relaxe. Na natureza sempre encontramos as cores quentes ao lado das cores frias. E se encontramos cores frias juntas, uma delas ser com tendncia mais quente que a outra.

Primeira Aula

Refere-se ao maior ou menor quantidade de preto ou branco na cor. Quando se adiciona preto a determinado matiz, este se torna gradualmente mais escuro, e essas graduaes so chamadas escalas tonais. Para se obter escalas tonais mais claras acrescenta-se branco.

Primeira Aula

As cores podem parecer diferentes em funo da cor do fundo.

Primeira Aula

Qual dos crculos maior?

Resposta: eles so exatamente do mesmo tamanho.

Na cultura, as cores trazem significados ou sentimentos aos seres humanos. Alguns estudiosos afirmam que podem provocar lembranas e sensaes s pessoas. s vezes, as pessoas no ano-novo colocam roupas com cores especficas para, no ano seguinte, ter o que a cor representa. Esta carga emotiva pode se refletir nas marcas, nas roupas e costumes, designando aquilo que se quer representar. O preto est associado idia de morte, luto ou terror, no entanto tambm se liga ao mistrio e fantasia, sendo hoje em dia uma cor com valor de uma certa sofisticao e luxo. Significa tambm dignidade.
Primeira Aula 32

Primeira Aula

33

Primeira Aula

34

Primeira Aula

35

Primeira Aula

36

 Apenas 216 podiam ser escolhidas livremente com a garantia de poderem ser apresentadas tanto numa mquina com o sistema Windows como com o Mac. Ento, essas 216 cores receberam o nome de cores seguras da Web. Essas cores so conseguidas usando-se cdigos hexadecimais que combinam nmeros indicados na tabela seguinte:
Primeira Aula

00

33

66

99

CC FF

37

 Cores COMPLEMENTARES como cor de fundo e cor de texto. Geralmente as cores complementares do destaque maior quando combinadas uma sobre a outra. Cuidado ao usar cores ANALOGAS (similares), principalmente quando elas precisam ser sobrepostas, como um logo laranja sobre um fundo amarelo, por exemplo. Quanto utilizar IMAGENS COMO FUNDO, deve-se preocupar-se que a mesma no acabe por interferir na aparncia e na leitura do contedo do site, sem contar Primeira queAula essa prtica acaba deixando o site ainda mais lento38 de ser carregado.

 Na hora de escolher as cores de um site tome cuidado com as combinaes. Evite usar letras claras em fundos claros ou cores escuras em fundos escuros. Tenha cuidado ao utilizar cores extravagantes, como verde limo brilhante, rosa-choque, etc, pois estas cansam a vista, quando utilizadas em excesso. A TONALIDADE das cores no podem transparecer como sendo muito apagadas (sem vida) ou muito fortes que acabam atrapalhando a visualizao do site.
Primeira Aula 39

Luz e sombra, no mundo real, esto em toda parte. Tudo que voc v, reflete a luz e, consequentemente, geram sombras. Visualmente, luz e sombra nos ajudam a dar sentido aquilo que vemos e nos ajudam a compreender textura, dimenso e perspectiva.

Na figura abaixo podemos ver que a fonte de luz vem da esquerda. O destaque o lugar onde a luz mais forte e as sombras surgem sobre o lado mais distante da fonte luminosa. Luz e sombra nos diz muito sobre as superfcies e texturas da imagem.

Primeira Aula

Viso normal

Daltonismo

Daltonismo

Daltonismo

42

Primeira Aula

Conceitos-chave para Daltonismo Desafio Soluo Esta no normalmente um problema, exceto nos casos em que as cores devem transmitir informaes importantes. Nestas circunstncias voc ter que mudar o grfico ou fornecer um meio adicional de obter as mesmas informaes. Muitas vezes a forma mais adequada de fazer isso o de fornecer uma explicao no texto. Utilize o programa ColorOracle (http://colororacle.org/) para testar as cores de seu site.

Cores podem ser indistinguveis

43

 Utilize recursos disponveis na WEB para escolha de cores que so harmnicas. Um exemplo a calculadora Sessions de cor:
http://www.sessions.edu/ilu/ilu_1.asp

Primeira Aula

44

http://www.universodacor.com.br/index.php?scr= esquemas_cores

Primeira Aula

45

Existem vrios sites especializados nas ferramentas de desenvolvimento para Web, abaixo alguns exemplos:
WebMasters online
www.wmonline.com.br

WebTutoriais
www.webtutoriais.com.br

CriarWeb.com
www.criarweb.com

ScriptBasil
www.scriptbrasil.com.br

Apostilando
www.apostilando.com

Download de imagens de alta resoluo

www.sxc.hu
Primeira Aula 46