Académique Documents
Professionnel Documents
Culture Documents
CURSO:
Auxiliar de Web Design
PROFESSOR:
Francisco Gerson Amorim de Meneses
DISCIPLINA:
Introduo ao Web Design
CARGA HORRIA:
20h/a
NDICE
Unidade I - Design e Web design ...................................................................... 02
1.1 Internet................................................................................................. 02
1.2 Etimologia da palavra design ............................................................... 05
1.3 Conceitos de design ............................................................................ 07
1.4 Design arte, cincia ou tecnologia? ................................................. 10
Exerccio 1 unidade I .............................................................................. 10
1.5 Web design e web designer (design e designer) ................................. 11
Unidade II Estudo das cores .......................................................................... 14
2.1 Introduo ao estudo das cores........................................................... 14
2.2 O que cor? ........................................................................................ 15
2.3 Pixel e resolues ................................................................................ 17
2.4 Tipos de imagens................................................................................. 18
2.5 O modelo de cores RGB ...................................................................... 20
2.6 RGB em bits ........................................................................................ 21
2.7 O modelo de cores CMYK ................................................................... 22
Exerccio 1 unidade II ............................................................................. 23
2.8 Psicologia das cores ............................................................................ 25
Unidade III - Interface, usabilidade e acessibilidade ....................................... 29
3.1 Conceitos ............................................................................................. 29
3.2 Um site acessvel ................................................................................. 29
3.3 Padro textual para a web ................................................................... 30
3.4 Organizao espacial na web .............................................................. 32
3.5 Alguns termos utilizados ...................................................................... 36
Exerccio 1 - unidade III ............................................................................. 38
Unidade IV - Produo para Web ...................................................................... 39
4.1 Processo de produo ......................................................................... 39
4.2 Ferramentas de produo.................................................................... 40
Exerccio 1 - Unidade IV ............................................................................ 42
Bibliografia.......................................................................................................... 43
EUA.
Era
preciso
criar
redundncia no trfego (e no
contedo) de informaes, para
que, mesmo que um ponto da
rede fosse destrudo, os outros
continuassem funcionando. A ideia
tambm e que se criasse uma
rede multiplataforma, ou seja, que no exigisse que todos os computadores da rede
fossem os mesmos.
Com o passar dos anos a rede foi expandindo-se. Passou a ser usada nas
Universidades. No final dos anos 80 houve a exploso da Internet comercial, quando
comeou a ser permitido o acesso aos usurios comuns.
Funcionamento
O protocolo (conjunto de regras para que os computadores "conversem" entre
si) que possibilitou a Internet chama-se TCP/IP (Protocolo de Controle de
Transmisso / Protocolo da Internet). Foi criado pela universidade de Berkley por
encomenda do governo americano.
interpretado pelo TCP/ IP e a de letras foi criada pelo fato do ser humano memorizar
mais facilmente palavras do que sequncias de nmeros.
A cada conjunto de computadores
(exemplo uma rede local) que seja ligada a
Internet, atribudo um nome de domnio e
um grupo de endereos IP correspondentes,
por uma entidade central em cada pas. Nos
EUA existe a INTERNIC que responsvel
pelas atribuies de domnios. Ela e a
entidade controladora de todas as outras no mundo. No Brasil, a responsvel a
FAPESP, em So Paulo. Esse controle centralizado que permite que se encontre
informaes sobre qualquer mquina ligada a Internet e onde ela se encontra.
FTP
Exemplos de navegadores
Designer [Ingl.]
1. Indivduo que planeja ou concebe um projeto ou modelo
2. Restr. Desenhista industrial.
3. Restr. Desenhista de produto.
4. Restr. Programador visual.
desenho
industrial
uma
atividade
projetual,
responsvel
pela
dados ergonmicos,
Exerccio 1 Unidade I
1 - Formule o seu conceito de Web Design:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
10
ou
feio
guardadas
as
devidas
funcionais
do
site
procurar
11
Para isso, importante ter uma viso do design de um site como um todo, e
no apenas como um amontoado de elementos fragmentados que constituiro o
resultado final. Conhecer alguns conceitos como equilbrio dos elementos visuais e
utilizao das cores so fundamentais nesse tipo de processo criativo, alm de
organizao.
ousadia
sem
esquecer de vez a
simplicidade. A tela
do computador o
universo em que o
Web designer deve
trabalhar,
nesse
todos
os
elementos que vo
compor o projeto.
12
Anotaes:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
13
ela
cria
contraste
destaca
beleza
em
uma
esmaecida
pode
Existem vrios modelos de cores, entre eles os mais usados so: RGB,
CMYK, HSB, Lab.
modelo
de
cores
RGB
(vermelho/verde/azul).
14
As
cores
criadas
pela
impresso
15
Pode-se ver, por exemplo, que o amarelo formado por vermelho e verde.
16
17
18
Quer
dizer
que
imagem
est
19
com
que
excita
acendendo
os
um
fsforos
pixel
vermelho na tela.
No modelo de cores RGB, as cores dos pixels podem ser mudadas
combinando-se vrios valores de vermelho, verde e azul. Cada uma das trs cores
primrias tem um intervalo de valores de 0 at 255.
Quando voc combina os 256 possveis valores de cada cor, o nmero total
de cores fica em aproximadamente 16,7 milhes (256 X 256 X 256).
Isso pode parecer uma quantidade imensa de cores, mas lembre-se de que
elas constituem apenas uma parte visvel das cores da natureza.
Contudo, 16,7 milhes de cores suficiente para reproduzir imagens
digitalizadas cristalinas em um monitor capaz de exibir cores 24 bits.
20
Tabela de cores
21
de
impresso
em
quatro
cores
22
Como
uma
pgina
impressa
no
Combinando
magenta
comercial
tintas
amarelo,
pode
de
uma
reproduzir
cor
ciano,
impressora
uma
parte
Exerccio 1 Unidade II
1 - Quais os modelos de cores mais utilizados?
_______________________________________________________________
2 - A cor existe por causa de trs entidades, quais so elas?
_______________________________________________________________
23
24
A cor exerce influncia decisiva nos olhos dos seres humanos, afeta a
atividade muscular, mental e nervosa. A combinao das cores afeta o psicolgico e
pode tornar um ponto importante no interesse do pblico em seu site.
Isto acontece devido ao fato de cada monitor ter uma especificao diferente,
uns podem trabalhar com mais vermelho, ser mais brilhante, ter mais contraste e
etc., e ainda cada um pode estar configurado com uma determinada resoluo como
640x480 pixels, 800x600 pixels e assim por diante.
Branco pureza
Preto negativo
25
Cinza tristeza
Azul pureza, f
Sensaes Acromticas
Sensaes Cromticas
Laranja:
prazer,
xtase,
dureza,
euforia,
outono,
aurora,
festa,
flores grandes, vero, limo, calor da luz solar, iluminao, alerta, euforia.
26
Vermelho-alaranjado:
sexualidade,
agresso,
competio,
Harmonia e Contraste
Espaos em branco podem ser definidos como reas que no contenham
textos, imagens ou qualquer outro elemento grfico. Saber balancear o contedo e o
espao em branco em um site a chave para manter a harmonia dos elementos
dentro da pgina e prender a ateno do usurio.
O que pode ser feito para que isto no acontea seguir as recomendaes
de alguns "gurus" em design:
27
passava era de mais espao. Por exemplo, nunca se deve pintar um teto de preto ou
roxo, essas cores passariam a sensao de opresso e clausura.
Visibilidade
Anotaes:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
28
dos
aspectos
de
interface,
usabilidade
acessibilidade
no
desenvolvimento de um website.
3.1 CONCEITOS
Representa
para
nosso
programas
adequados,
de
contedo
apresentao
da
informao
em
formatos alternativos.
29
Aplicar pouca variedade de tipos, evita uma miscelnea de letras que acabam
por dificultar a leitura e a definio de um estilo para a o conjunto da aplicao.
30
Utilize
tipos
de
letras
para
anotaes.
Ao
adotar,
por
Tipos serifados
Tipos que contem traos nas extremidades
das letras. Guiam os olhos do leitor de uma letra
para outra, imprimindo ritmo e facilitando a leitura
impressa.
Ex: Garamond, humanistic, Aldine, etc.
31
Muitas vezes quando estivermos criando layout, vamos nos deparar com o
problema da distribuio dos elementos grficos. O designer deve tomar todas as
decises para a composio e os resultados dessas decises determinam o objetivo
e o significado do que recebido pelo espectador! Assim sendo o designer exerce
controle sobre o trabalho e direciona o projeto para o pblico que ele quer atingir.
32
Equilbrio
Equilbrio um elemento importantssimo em toda criao, seja para uma
pgina de Internet, revista impressa, panfletos ou obras de arte. considerada
referncia visual mais forte para o homem, chamada de constante inconsciente
formada pelos eixos vertical e horizontal.
Tenso
Tanto para o emissor quanto para o receptor da informao visual, a falta de
equilbrio e regularidade um fator de desorientao. Sempre buscamos um eixo de
retas perpendiculares para a rea onde olhamos primeiro e reconhecemos a
presena ou ausncia de equilbrio da forma.
33
Intuio
Um exemplo que ocorre com frequncia que as pessoas costumam
observar os detalhes de um desenho no sentido da esquerda para a direita, de cima
para baixo, ento importante destacar algumas reas num layout como sendo
pontos "estratgicos", isso no precisa ser necessariamente uma regra a ser sempre
seguida, e dependendo dos outros elementos contidos no "desenho" esses pontos
"estratgicos" podem perder um pouco da sua fora.
Em Web design podemos observar que na maioria das vezes a marca da
empresa ou logotipo esto presentes no topo da pgina e no canto esquerdo
superior, o que na teoria o primeiro ponto observado num layout.
Menus sempre so procurados pelo espectador abaixo do topo ou a esquerda
do layout, o endereo para contato, ou e-mail, quase sempre o ltimo tpico do
menu, etc. importante ter bom senso para no perdermos totalmente a intuio em
um layout, isso sem perder a liberdade de criao.
Elementos Bsicos
Os elementos visuais constituem a substncia
bsica daquilo que vemos, e seu nmero reduzido: o
ponto, a linha, a forma, a direo, o tom, a cor, a
textura, a dimenso, a escala e o movimento. Com eles
fazemos nossas combinaes seletivas.
Uma determinada forma bsica tem seu valor
independente
que
pode
ser
modificado
quando
O ponto: Qualquer ponto tem grande poder de atrao visual sobre o olho,
exista ele naturalmente ou tenha sido colocado pelo homem em resposta a
um objetivo qualquer. Fazemos o reconhecimento de formas atravs de um
agrupamento de pontos. Ex.: rgua, jogo de ligar os pontos.
34
35
Movimento:
elemento
visual
do
movimento
se
encontra
mais
36
O que LAYOUT?
a materializao da proposta visual dos elementos tipologia, cores, estilo
de ilustrao etc tudo que compe o produto.
O que MDIA?
o "veculo" de disseminao da informao, como a mdia impressa (papel),
mdia eletrnica (cd rom ou web) etc.
O que ROUGH?
(l-se "raf") o traado inicial de um layout, tambm conhecido como
rascunho.
O que TIPOLOGIA?
Tipologia (que significa "estudo dos tipos") o conjunto de caracteres
tipogrficos, que tambm so conhecidos como fontes. Elas admitem algumas
variaes de estilos, tais como itlico, negrito, sublinhado, etc. Alguns exemplos de
tipologia so a Times New Roman, Arial, Verdana, Garamond e Helvtica.
37
Anotaes:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
38
39
GIMP
Corel Draw
Inkscape
40
Animaes:
Adobe Flash
FrontPage
Drupal
Wordpress
41
Exerccio 1 - Unidade IV
1 - Levandose em conta os conceitos vistos at o momento, quais caractersticas
voc destacaria como imprescindveis ao projetar o layout de site web.
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
Anotaes:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
42
BIBLIOGRAFIA
o
http://www.compuland.com.br/tutoriais/
http://www.lsc.ufsc.br/~edla/design/web.htm
http://fabricio.skooterweb.com/trabalhos/cores.pdf
http://www.baixaki.com.br/tecnologia/203-o-que-e-pixel-.htm
http://www.photosynt.net/ano2/03pe/questao/12_pixels/index.htm
http://www.slideshare.net/alexsanches/producao-para-web-7366592
43