Você está na página 1de 44

Introduo ao Web Design

CURSO:
Auxiliar de Web Design
PROFESSOR:
Francisco Gerson Amorim de Meneses
DISCIPLINA:
Introduo ao Web Design
CARGA HORRIA:
20h/a

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

1
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




PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

2
Unidade I - Design e Web design
Tempo previsto: 5h/a

Objetivo: Ao completar essa unidade o aluno ir saber os conceitos que envolvem a
atuao de um web designer, assim como, ter o conhecimento do seu ambiente de
atuao que a internet.

1.1 INTERNET
A Internet, no somente, como se pensa, uma rede mundial de
computadores e sim milhares de redes de computadores ligadas entre si. O prprio
nome o diz: redes interconectadas.

Como comeou a Internet
A Internet comeou nos EUA nos anos sessenta. Era o perodo da Guerra
Fria. O governo, na figura dos militares, temiam que na hiptese de guerra,
instalaes com computadores pudessem ser destrudas, derrubando todo o sistema
de informaes e controle militar. O DARPA (Departamento de Defesa de Pesquisas
Avanadas) decidiu desenvolver
uma rede de computadores que
pudesse sobreviver a um ataque
aos 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.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

3
Quem o dono da Internet? Quem paga por ela?
A Internet no possui um dono. Cada uma das redes interligadas tem seu
administrador. Sejam elas com ou sem fins lucrativos. Cada fornecedor de servio
(provedor) paga pelo trfego que flui pela sua conexo com a rede. Cada pas tem
polticas particulares em relao Internet.

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.

Compreendendo os endereos da Internet
Cada site e cada computador possui seu prprio endereo e pode ser exibido
de duas formas:
Grupo de nmeros com diviso de pontos entre eles. Ex.: 199.60.103.11
Grupo de letras ou palavras com diviso de pontos entre eles. Ex.:
ifpiparnaiba.edu.br.
A nica diferena que existe, que, o endereo com nmeros aquele
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.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

4
Os endereos com letras, ou seja, domnios so divididos em partes cada
qual com o seu respectivo significado.
Exemplo: ifpiparnaiba.com.br
[ifpiparnaiba] o nome do site
[edu] o domnio e significa que um site educacional
[br] o cdigo que significa que o site est localizado no Brasil.

O que precisa para se conectar?
O hardware (computador, modem, antena, linha telefnica)
Um fornecedor do servio (um provedor Internet).

Servios bsicos na Internet
Correio eletrnico (E-mail)
Navegador WEB (visualizao de pginas)
FTP

Exemplos de navegadores








PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

5
Viso geral da interface de um navegador


Esse portando o ambiente de atuao do web designer.

1.2 ETIMOLOGIA DA PALAVRA DESIGN
Design [Ingl.]
1. Concepo de um projeto ou
modelo; planejamento.
2. O produto desse planejamento.
3. Restr. Desenho industrial.
4. Restr. Desenho de produto.
5. Restr. Programao visual.

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.


PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

6
Desgnio [Do b.-lat. designiu.]
1. Intento, inteno, plano, projeto, propsito

Designador [Do lat. designatore.]
1. Que ou aquele que designa ou indica;
designante.

Designar [Do lat. designare.]
1. Dar a conhecer; nomear; indicar
2. Ser o sinal, o smbolo de
3. Fixar, determinar; marcar, assinalar
4. Nomear (para cargo ou emprego)
5. Fixar, determinar; marcar, assinalar
6. Qualificar; denominar; classificar

Desenho [Dev. de desenhar.]
1. Representao de formas sobre uma superfcie, por meio de linhas, pontos e
manchas, com objetivo ldico, artstico, cientfico, ou tcnico
2. A arte e a tcnica de representar, com lpis, pincel, pena, etc., um tema real ou
imaginrio, expressando a forma e geralmente abandonando a cor
3. Toda obra de arte executada segundo as condies acima descritas
4. A disciplina relativa arte e tcnica do desenho (1 e 2)
5. Verso preparatria de um desenho artstico ou de um quadro; esboo, estudo
6. Traado, risco, projeto, plano
7. Forma, feitio, configurao
8. Fig. Delineamento, esboo;
elaborao
9. Fig. Intento, propsito, desgnio




PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

7
1.3 CONCEITOS DE DESIGN
Para fazer um bom design necessrio conhecer muito bem o produto que se
est trabalhando, dominar tcnicas e ter bom senso para aplicar o seu conhecimento
na hora de expressar as suas ideias. Um bom designer deve saber escutar, observar
e destacar coisas que pessoas comuns no percebem, deve procurar expressar
suas ideias atravs de formas e cores, a fim de mostrar o bvio sem ser bvio.

Abaixo, selecionamos alguns conceitos de Designers famosos:

Projetar a forma significa coordenar, integrar e articular todos aqueles fatores
que, de uma maneira ou de outra, participam no processo constitutivo da forma do
produto (...) Isto se refere tanto a fatores relativos ao uso, fruio e consumo
individual ou social do produto (fatores funcionais, simblicos ou culturais) quanto
aos que se referem sua produo (fatores tcnico-econmicos, tcnico-
construtivos, tcnico-sistemticos, tcnico-produtivos e tcnico-distributivos)
(ICSID, 1958)

Design uma atividade projetual que consiste em determinar as propriedades
formais dos objetos a serem produzidos industrialmente. Por propriedades formais
entende-se no s as caractersticas exteriores, mas, sobretudo, as relaes
estruturais e funcionais que do coerncia a um objeto tanto do ponto de vista do
produtor quanto do usurio.
(Toms Maldonado, 1961)


PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

8
O que se exige para poder considerar que um objeto pertence ao desenho
industrial : 1) a sua fabricao em srie; 2) a sua produo mecnica, e 3) a
presena nele de um quociente esttico, devido ao fato de ter sido inicialmente
projetado e no a uma sucessiva interveno manual. Eis por que razo no lcito
pensar em desenho industrial em relao aos objetos pertencentes a pocas
anteriores revoluo industrial, (...) em cuja base existe sempre um momento de
projeto, de criao pelo desenho, e um momento repetitivo de produo mecanizada
e em srie.
(Gillo Dorfles, 1963)

Design o processo de adaptao do entorno objetual s necessidades
fsicas e psquicas dos indivduos da sociedade. (...) Design de produto o processo
de adaptao de produtos de uso de fabricao industrial s necessidades fsicas e
psquicas dos usurios e grupos de usurios.
(Bernd Lbach, 1976)

O desenho industrial uma atividade projetual, responsvel pela
determinao das caractersticas funcionais, estruturais e esttico-formais de um
produto, ou sistemas de produtos, para fabricao em srie. parte integrante de
uma atividade mais ampla denominada desenvolvimento de produtos. Sua maior
contribuio est na melhoria da qualidade de uso e da qualidade esttica de um
produto, compatibilizando exigncias tcnico-funcionais com restries de ordem
tcnico-econmicas.
(Gui Bonsiepe, 1982)

Design a tentativa de conjugar a satisfao do cliente com o lucro da
empresa, combinando de maneira inovadora os cinco principais componentes do
design: performance, qualidade, durabilidade, aparncia e custo. O domnio do
design no se limita aos produtos, mas inclui tambm sistemas que determinam a
identidade pblica da empresa (design grfico, embalagens, publicidade, arquitetura,
decorao de interiores das fbricas e dos pontos de vendas).
(Philip Kotler, 1989)

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

9
O design o domnio no qual se estrutura a interao entre usurio e produto,
para facilitar aes efetivas. Design industrial essencialmente design de interfaces.
(Gui Bonsiepe, 1992)

O design uma atividade especializada de carter tcnico-cientfico, criativo e
artstico, com vistas concepo e desenvolvimento de projetos de objetos e
mensagens visuais que equacionem sistematicamente dados ergonmicos,
tecnolgicos, econmicos, sociais, culturais e estticos, que atendam concretamente
s necessidades humanas.
(Projeto de Lei n 1.965, de 1996, que visa regulamentar a profisso no Brasil)

Design uma atividade criativa cujo propsito estabelecer as qualidades
multi-facetadas de objetos, processos, servios e seus sistemas de ciclos de vida.
Assim, design o fator central da humanizao inovadora das tecnologias e o fator
crucial das trocas econmicas e culturais. (...) Design trata de produtos, servios e
sistemas concebidos atravs de ferramentas, organizaes e da lgica introduzidas
pela industrializao no somente quando so produzidos em srie.
(ICSID, 2000)

Design grfico uma atividade intelectual, tcnica e criativa concernente no
somente produo de imagens, mas anlise, organizao e mtodos de
apresentao de solues visuais para problemas de comunicao. Informao e
comunicao so as bases de um modo de vida global interdependente, seja na
esfera dos negcios, cultural ou social. Ao designer grfico cabe a tarefa de fornecer
respostas aos problemas de comunicao de todo tipo em todos os setores da
sociedade.
(Icograda, 2001)





PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

10
1.4 DESIGN ARTE, CINCIA OU TECNOLOGIA?
(Design-Cincia) Design no e nem ser uma cincia. Houve muita insero
de teorias e de um desenvolvimento metodolgico acentuado especialmente durante
a dcada de 60. A tendncia dessas contribuies (Teoria dos conjuntos, Teoria dos
Sistemas, Teoria da Informao, Teoria da Tomada de Decises, mtodos da
ergonomia psicanlise e da psicologia) era a de separar o Design da esfera das
artes de aproxim-lo da cincia, aperfeioar as atividades e de conferir-lhe maior
rigor tcnico e metodolgico.

(Design-Arte) Design no e nem ser arte. No h justificativa para uma
interpretao do design como uma atividade artstica, supostamente intuitiva. A arte,
atravs de seus arqutipos h muito hegemnicos (pintura, escultura, desenho etc.),
no a nica possibilidade da experincia esttica. O mundo do design est ligado
ao da esttica, mas no necessariamente ao da arte.
(Gui Bonsiepe)


Exerccio 1 Unidade I
1 - Formule o seu conceito de Web Design:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

11
1.5 WEB DESIGN E WEB DESIGNER (DESIGN E DESIGNER)
Antes de mais nada, acho importante deixar bem claro que um "Web designer"
nada mais do que um Designer especialista em Internet, o termo web
designer vem sendo muito difundido e repetido exausto nos ltimos anos,
tudo bem, o termo se refere ao profissional de design que trabalha com
Internet, mas nunca devemos esquecer que para isso, o profissional deve ter
muito bem definidos vrios conceitos de cores, formas, usabilidade, e at
marketing, isso desqualifica pelo menos 80% dos web designers de planto,
no basta saber "usar" o Frontpage ou Dreamweaver, saber copiar algumas
imagens de outros sites e roubar alguns cdigos por a, claro que muita gente
vai dizer que nesse mundo nada se cria, tudo se copia, mas essas pessoas
tambm no devem saber a diferena entre plgio e referncia, essa pode ser a
diferena entre contratar o "sobrinho" ou um amigo micreiro e um verdadeiro
profissional de Design.
Andrej Grujic
(Professor de Design da Universidade Anhembi Morumbi)

A Internet tem como principal caracterstica o rpido acesso s informaes, o
web designer ou designer o grande responsvel em aliar um visual bonito, atraente
aos olhos dos visitantes e que seja condizente com a proposta do projeto,
facilidade de navegao do site. Para isso, necessrio alm da criatividade, alguns
conhecimentos bsicos de tcnicas de design e informtica.

Na Internet imagem tudo, ou quase tudo, portanto um web designer tem
que saber exatamente os elementos que deve
ou no utilizar em cada projeto. Beleza e bom
gosto fazem parte do processo, mas so
aspectos subjetivos, afinal qual o conceito de
belo ou feio guardadas as devidas
propores? Uma das principais tarefas do
web designer observar e desenvolver os
aspectos funcionais do site e procurar
simplificar ao mximo a navegao, o visitante deve saber exatamente aonde
encontrar o que deseja, a isso vamos chamar de navegao intuitiva.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

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

Toda forma de mdia tem elementos
visuais prprios e com a Internet no
diferente. Sites que tenham um design bem
definido, objetivo e que estejam de acordo
com a proposta do produto ou do assunto a
que deram origem, com certeza sero mais
eficientes.

Web Design o Design voltado para a Internet, e Web designer o criador do
processo. importante procurar sempre o bom senso e uma certa sobriedade no
estudo e criao de projetos, procurar aplicar os conhecimentos e tcnicas na
esttica sem perder
a ousadia e sem
esquecer de vez a
simplicidade. A tela
do computador o
universo em que o
Web designer deve
trabalhar, e nesse
universo ele que
decide a disposio
de todos os
elementos que vo
compor o projeto.


PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

13
Anotaes:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________


PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

14
Unidade II Estudo das cores
Tempo previsto: 5h/a
Objetivo: Ao completar essa unidade o aluno ir saber os significados das cores
adquirindo assim os subsdios para um uso correto das mesmas em um projeto de
web design.

2.1 INTRODUO AO ESTUDO DAS CORES
A cor evoca um estado de
esprito: ela cria contraste e
destaca a beleza em uma
imagem. Ela pode tornar vibrante
uma cena melanclica e uma
imagem esmaecida pode
imediatamente adquirir vida. As
cores certas podem transformar
um site Web sem brilho em uma
faiscante porta de entrada.

Existem vrios modelos de cores, entre eles os mais usados so: RGB,
CMYK, HSB, Lab.

Os modelos de cores RGB e CMYK
so uma lembrana constante de que as
cores da natureza, as cores no seu monitor e
as cores da pgina impressa so criadas de
maneiras completamente diferentes.

Seu monitor cria cores emitindo feixes
de luz nas cores vermelho, verde e azul; ele
usa o modelo de cores RGB
(vermelho/verde/azul).

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

15
Para reproduzir o efeito de tom contnuo
das fotografias coloridas, a tecnologia de
impresso utiliza uma combinao de tintas
ciano, magenta, amarelo e preto, que reflete e
absorve vrios comprimentos de luz.

As cores criadas pela impresso
composta dessas quatro cores fazem parte do
modelo CMYK (cian/magenta/amarelo/preto).


2.2 O QUE COR?
A cor existe por causa de trs
entidades: a luz, o objeto visualizado e o
observador.

Os fsicos j provaram que a luz
branca composta pelos comprimentos
de onda vermelho, verde e azul.

O olho humano percebe as cores
como sendo vrios comprimentos de
onda do vermelho, do verde e do azul
que so absorvidas ou refletidas pelos
objetos.

Os comprimentos de onda do vermelho, do verde e do azul que lhe permitem
enxergar os objetos so a base para todas as cores da natureza.

por isso que o vermelho, o verde e o azul so frequentemente chamados de
cores primrias.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

16
Todas as cores do espectro so criadas por diferentes intensidades desses
comprimentos de onda da luz.

Quando as trs cores primrias se sobrepe, elas criam as cores
secundrias: ciano, magenta e amarelo.

As 6 primrias e secundrias so complementos umas das outras. As cores
complementares so as cores que mais diferem umas das outras.

Pode-se ver, por exemplo, que o amarelo formado por vermelho e verde.

A figura ao lado tambm mostra que
todas as cores primrias se combinam para
criar o branco.

Quando os comprimentos de onda da
luz so somados, obtemos cores mais claras.
por isso que as cores primrias da luz
frequentemente so chamadas de cores
aditivas.

Juntando todas as cores da luz,
obtemos a luz mais clara: a luz branca.
Assim quando se v um pedao de papel branco, todos os comprimentos de onda
do vermelho, do verde e do azul da luz esto sendo refletidos.

Quando se v preto, todos os comprimentos de onda de vermelho, de verde e
de azul da luz esto sendo completamente absorvidos pelo objeto: dessa forma,
nenhuma luz refletida de volta.



PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

17
2.3 PIXEL E RESOLUES
A palavra pixel oriunda da juno dos termos picture e element, formando,
ao p da letra, a expresso elemento de imagem.

Ao visualizarmos uma imagem
com alto ndice de aproximao,
possvel identificar pequenos quadrados
coloridos nela, que, somados, formam o
desenho completo. Esses pontos, que
so a menor parte de uma imagem,
levam o nome de pixels.

A partir da noo do pixel como
uma medida da qualidade das imagens,
foi propagado o termo resoluo para
atribuir quantos pixels em altura e largura
uma foto tem.

Nas cmeras digitais, por exemplo, comum
vermos a concorrncia gerada pelo fabricante que
desenvolve, com um bom preo, a cmera com a
maior taxa de Megapixels entre a concorrncia.

Um dispositivo com 1 Megapixel de resoluo
capaz de ampliar imagens com cerca de um milho
de pixels em tamanho.

Uma cmera de 1,3 Megapixels, por exemplo,
capaz de gerar 1.300.000 pixels dentro de uma nica imagem, o que, em termos
de resoluo, equivale a uma foto com 1280 pixels de largura por 1024 de altura,
somando um total de 1.310.720 pontos.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

18
O grande desafio dos fabricantes de
monitores atuais permitir ao usurio
aumentar a resoluo dos aparelhos, o que,
na prtica, permitir a insero de mais
pixels na tela, aumentando, desta forma, a
qualidade das imagens.

Em termos prticos, perceptvel
identificar a mudana na qualidade das
texturas ao modificarmos a resoluo do
nosso monitor, em especial no que se refere
a jogos. Quanto maior a deixamos, mais bem delineadas as imagens se tornam.

2.4 TIPOS DE IMAGENS
Existem dois tipos de imagens digitais: as vetoriais e as bitmaps. Uma
imagem vetorial descrita por linhas plotadas num sistema de coordenadas
cartesianas.

Permite redimensionamento em qualquer escala sem perda de qualidade,
pois somente no momento da impresso ela convertida em um bitmap adequado
as caractersticas do equipamento - impressoras jato de tintas, laser e outras
imprimem bitmaps, pois imprimem sequncias de pontos dispostos em linhas e
colunas, cuja frequncia, por sua vez, definem a resoluo da impressora.

A este processo de converso de vetorial para bitmap chamamos de
rasterizao, e executado por um RIP Raster Image Processor.


PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

19
A imagem acima mostra uma ilustrao vetorial, com e sem o preenchimento
de cor. Como as imagens vetoriais so definidas matematicamente, ocupam pouco
espao em disco.

So utilizadas principalmente nas fontes de texto, grficos, ilustraes e
preenchimento em dgrad.

Mas para descrever imagens, como as
obtidas por fotografia digital necessrio
outra tcnica, o bitmap. A imagem obtida por
fotografia digital ou escaneada um bitmap,
ou seja, mapeada por bits.

Quer dizer que a imagem est
organizada em uma srie de linhas e colunas
formadas por pixels.

Cada pixel (picture element) possui
apenas uma cor e no possui uma dimenso
fixa: o tamanho ser atribudo ao pixel no
momento da impresso.

O tamanho de uma imagem digital est definido no
nmero de linhas e colunas que a forma. A imagem ao
lado, por exemplo, tem 116 colunas e 119 linhas de
tamanho, em um total de 13.804 pixels.

Para sabermos o tamanho em bytes que o arquivo
vai ocupar, basta multiplicar o nmero de pixel da imagem
pela quantidade de bytes necessrios para descrever cada pixel. O arquivo da
margarida possui apenas 10 kB devido compresso JPG.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

20
2.5 O MODELO DE CORES RGB
O sistema usado para a criao de cores em seu monitor baseia-se nas
mesmas propriedades fundamentais da luz que ocorrem na natureza: essas cores
podem ser criadas a partir do vermelho, do verde e do azul. Essa a base do
modelo de cores RGB.

Seu monitor colorido cria cores
emitindo trs feixes de luz com
diferentes intensidades, iluminando o
material fosforescente vermelho, verde e
azul que reveste a parte interna da tela
do monitor.

Quando voc v o vermelho, isso
significa que o monitor ativou o feixe
vermelho, que excita os fsforos
vermelhos, acendendo um 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.



PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

21
2.6 RGB EM BITS
Cdigo de cor em Hexadecimal - um cdigo alfanumrico formado por 3
pares de caracteres que representam a intensidade relativa de vermelho (Red),
verde (Green) e azul (Blue) que forma uma determinada cor.

Cada um dos 3 pares do cdigo formado por um valor hexadecimal (base
16) de 00 a FF (Equivalente a um nmero de 0 a 255 na base 10).
Ex: O hexadecimal FF0000 representa a cor vermelha, em decimal ficaria 255,0,0.

Sendo assim, cada um dos 3 pares (R,G,B) variam de:

Tabela de cores


PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

22
Cdigos HTML, definio de cores


2.7 O MODELO DE CORES CMYK
O modelo de cores CMYK baseia-se no na adio de
luz, mas em sua subtrao. No modelo RGB, as cores so
criadas acrescentando-se luz, o monitor (ou a televiso)
uma fonte de luz que pode produzir cores.

Mas uma pgina impressa no emite luz; ela absorve
e reflete luz. Ento, quando voc quiser transportar as cores
do monitor para o papel, ter de usar outro modelo, o CMYK.

O modelo de cores CMYK a base do
processo de impresso em quatro cores
(quadricromia), que usado principalmente para
imprimir imagens de tons contnuos (como as
fotografias digitalizadas) em uma grfica.

Na quadricomia as cores so reproduzidas em
uma impressora usando quatro chapas: C (ciano), M
(magenta), Y (amarelo) e K (preto - que
representado pela letra K porque a nomenclatura baseia-se no ingls, e o B de
black poderia ser confundido com B de blue).

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

23
Como uma pgina impressa no
consegue emitir luz, uma impressora no pode
usar as cores RGB para imprimir; em vez
disso, ela utiliza tintas que podem absorver
comprimentos de onda de luz especficos e
refletir outros comprimentos de onda.

Combinando tintas de cor ciano,
magenta e amarelo, uma impressora
comercial pode reproduzir uma parte
significativa do espectro visvel de cores.

Na teoria, 100% ciano, 100% magenta e 100% amarelo devem ser
combinados para produzir o preto, no entanto devido a impureza das tintas, a
misturas das cores ciano, magenta e amarelo produz um marrom turvo em vez de
preto, portanto as impressoras geralmente adicionam
o preto, s outras trs cores para produzir as partes
mais escuras e cinzas das imagens.

A figura ao lado mostra as cores secundrias
subtrativas sobrepondo-se para criar um marrom
turvo. Observe que cada par de cores subtrativas cria
uma cor primria.

Exerccio 1 Unidade II
1 - Quais os modelos de cores mais utilizados?
_______________________________________________________________
2 - A cor existe por causa de trs entidades, quais so elas?
_______________________________________________________________



PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

24
3 - Quais so as cores primrias, combine-as e diga quais cores secundrias so
formadas a partir delas?
_______________________________________________________________
_______________________________________________________________
4 - O que significa a palavra pixel?
_______________________________________________________________
5 - O que voc entende por resoluo de uma imagem?
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
6 - Quanto maior a resoluo melhor a qualidade da imagem, isso acontece por
qu?
_______________________________________________________________
_______________________________________________________________
7 - Quais os tipos de imagens, diferencie-os?
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
8 - Quais cores formam o modelo RGB e qual a sua utilizao?
_______________________________________________________________
9 - O que so cdigos de cores hexadecimais?
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
10 - Quais cores formam o modelo CMYK e qual a sua utilizao?
_______________________________________________________________
_______________________________________________________________

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

25
2.8 PSICOLOGIA DAS CORES
A escolha das cores fundamental para uma boa harmonia dos elementos de
um site. Ela pode enfatizar textos, imagens e caracterizar especialmente os
elementos da pgina.

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.

A combinao certa pode causar efeitos como de excitao, urgncia,
contentamento, calma, vulgaridade, melancolia, segurana etc., e ainda destacar
algum elemento em relao a outro.

Na Web a seleo de uma cor um pouco complicada, pois impossvel
garantir que uma determinada cor ir se apresentar no monitor do usurio como ela
realmente , ou seja, como a que o designer colocou.

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.

A combinao desses fatores que ir determinar a fidelidade e a reproduo
de cores e a qualidade das imagens.

Abaixo voc poder visualizar algumas sensaes psicolgicas conhecidas:

As cores e os efeitos psicolgicos
Sensaes visuais + significado:
Branco pureza
Preto negativo

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

26
Cinza tristeza
Vermelho calor, dinamismo
Rosa graa, ternura
Azul pureza, f

Sensaes Acromticas
Branco: inocncia, paz, divindade, calma, harmonia, para os orientais
pode significar morte, batismo, casamento, cisne, lrio, neve, ordem,
simplicidade, limpeza, bem, pureza.
Preto: sujeira, sombra, carvo, fumaa, misria, pessimismo, melancolia,
nobreza, seriedade. expressivo e angustiante ao mesmo tempo. Alegre
quando combinado com outras cores.
Cinza: p, chuva, neblina, tdio, tristeza, velhice, passado, seriedade.
Posio intermediria entre luz e sombra.

Sensaes Cromticas
Vermelho: guerra, sol, fogo, ateno, mulher, conquista, coragem, furor,
vigor, glria, ira, emoo, paixo, emoo, ao, agressividade, perigo,
dinamismo, baixeza, energia, revolta, calor, violncia.
Laranja: prazer, xtase, dureza, euforia, outono, aurora, festa,
luminosidade, tentao, senso de humor. Flamejar do fogo.
Amarelo: egosmo, cimes, inveja, prazer, conforto, alerta, esperana,
flores grandes, vero, limo, calor da luz solar, iluminao, alerta, euforia.
Verde: umidade, frescor, bosque, mar, vero, adolescncia, bem-estar,
paz, sade (medicina), esperana, liberdade, paz repousante. Pode
desencadear paixes.
Azul: frio, mar, cu, horizonte, feminilidade, espao, intelectualidade, paz,
serenidade, fidelidade, confiana, harmonia, afeto, amizade, amor, viagem,
verdade, advertncia.
Roxo: fantasia, mistrio, egosmo, espiritualidade, noite, aurora, sonho,
igreja, justia, misticismo, delicadeza, calma.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

27
Marrom: cordialidade, comportamento nobre, pensar, melancolia, terra,
lama, outono, doena, desconforto, pesar, vigor.
Prpura: violncia, furto, misria, engano, calma, dignidade, estima.
Violeta: calma, dignidade, estima, valor, misria, roubo, afetividade,
misria, calma, violncia, agresso, poder sonfero.
Vermelho-alaranjado: sexualidade, agresso, competio,
operacionalidade, desejo, excetabilidade, dominao.

A escolha da cor sofre influncia da moda, das tendncias e da deciso do
designer.

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.

A consequncia da m utilizao desse recurso no ter um bom equilbrio,
assim os olhos ficam confusos, pois no existir uma progresso visual para o
internauta seguir e consequentemente ele perder o interesse pela pgina.

O que pode ser feito para que isto no acontea seguir as recomendaes
de alguns "gurus" em design:

"No coloque o mximo de informaes dentro de uma pgina".

"Os espaos vazios reforam a unidade de grupos, harmonizam as reas,
aumentam o contraste e facilitam a visualizao e leitura".

Em geral as cores claras e quentes elevam e expandem, por isso, no passado
era comum casas com o teto pintado de azul e paredes amarelas, a sensao que

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

28
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
Amarelo e Azul so as cores que melhor se leem a distncia
O contraste preto-amarelo se v desde mais longe
O contraste preto-branco tem um valor neutro
O contraste vermelho-verde o que menos se percebe
Em geral os elementos grficos escuros sobre fundo claro se percebem
melhor que o contrrio.

Anotaes:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________


PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

29
Unidade III - Interface, usabilidade e acessibilidade
Tempo previsto: 5h/a
Objetivo: A partir do estudo dessa unidade o aluno ter o conhecimento sobre a
importncia dos aspectos de interface, usabilidade e acessibilidade no
desenvolvimento de um website.

3.1 CONCEITOS
Interface: relacionado distribuio dos elementos do site na tela, deve
prover um sentido de localizao do usurio e facilitar o seu deslocamento
entre informaes.
Usabilidade: Se refere simplicidade e facilidade com que uma interface, um
programa de computador ou um website pode ser utilizado.
Acessibilidade: Preconiza que os web sites devem ser acessveis para
pessoas portadoras de necessidades especiais.

3.2 UM SITE ACESSVEL
A expresso acessibilidade, presente em diversas reas de atividade, tem
tambm na informtica um importante significado.

Representa para o nosso
usurio no s o direito de acessar a
rede de informaes, mas tambm o
direito de eliminao de barreiras
arquitetnicas, de disponibilidade de
comunicao, de acesso fsico, de
equipamentos e programas
adequados, de contedo e
apresentao da informao em
formatos alternativos.



PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

30
No fcil, a princpio, avaliar a importncia dessa temtica associada
concepo de pginas para a web. Mas os dados W3C (Consrcio para a WEB) e
WAI (Iniciativa para a Acessibilidade na Rede) apontam situaes e caractersticas
diversas que o usurio pode apresentar:
Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade - quando
no a impossibilidade - de interpretar certos tipos de informao.
Dificuldade visual para ler ou compreender textos.
Incapacidade para usar o teclado ou o mouse, ou no dispor deles.
Insuficincia de quadros, apresentando apenas texto ou dimenses
reduzidas, ou uma ligao muito lenta Internet.
Dificuldade para falar ou compreender, fluentemente, a lngua em que o
documento foi escrito.
Ocupao dos olhos, ouvidos ou mos, por exemplo, ao volante a caminho
do emprego, ou no trabalho em ambiente barulhento.
Desatualizao, pelo uso de navegador com verso muito antiga, ou
navegador completamente diferente dos habituais, ou por voz ou sistema
operacional menos difundido.

Essas diferentes situaes e caractersticas precisam ser levadas em conta
pelos criadores de contedo durante a concepo de uma pgina.
Para ser realmente potencializador da acessibilidade, cada projeto de pgina
deve proporcionar respostas simultneas a vrios grupos de incapacidade ou
deficincia e, por extenso, ao universo de usurios da web.

3.3 PADRO TEXTUAL PARA A WEB
O produtor de contedo e o designer deve se preocupar com a padronizao
grfica que adotar, respectivamente, na produo do texto e na soluo grfica da
aplicao web.

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.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

31
Variaes de tipos - Especialistas
sugerem que o nmero de tipos de letras
utilizados fique em torno de trs.

Utilize tipos de letras para
caracterizar diferentemente o ttulo, o
texto e anotaes. Ao adotar, por
exemplo, trs tipos, pode-se fazer uso de
suas variaes como o itlico, o bold e o
condensado que permitem boa margem
de opes, sem, contudo, descaracterizar
o estilo da pgina.

A escolha do tipo de letra - Embora subjetiva, deve considerar legibilidade,
ou seja, a facilidade que leitor deve ter para reconhecer as letras.

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.

Tipos sem serifa (tipo bastonado)
Tipos que no contem traos, so retos,
utilizados em ttulos e legendas com letras no formato bold. Os tipos sem serifa
facilitam a leitura na web.
Ex: Helvtica, Verdana, Arial, Futura, etc.




PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

32
3.4 ORGANIZAO ESPACIAL NA WEB
Composio de Formas
Para se desenvolver uma boa composio visual necessrio saber
direcionar os olhos de quem est vendo para pontos importantes do seu layout, esse
direcionamento deve ser consciente e planejado, saber equilibrar e dar movimento
composio sero os principais objetivos do designer.

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.

Para obter um resultado compositivo satisfatrio preciso conhecer um pouco
sobre como funciona a percepo humana e tambm algumas regras que para
alguns denominada programao visual intuitiva.



PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

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

O equilbrio pode ser: simtrico, simtrico na forma e assimtrico na cor ou
ainda ter uma simetria aproximada.

Equilbrio num projeto grfico significa saber distribuir com uniformidade os
elementos grficos que compem o projeto, e tambm saber distribuir esses
elementos pela sua importncia, ou seja, saber qual destaque cada elemento grfico
merece receber dentro do layout.

Um layout equilibrado aquele sem grandes "buracos" entre os textos,
imagens ou ttulos, importante distribuir os elementos grficos proporcionalmente
pela rea de viso, e tambm buscar um equilbrio das cores para que no ocorram
grandes quebras no visual (a no ser que essa seja a sua inteno e seja muito
bem elaborada para que no parea um erro no final), procure utilizar poucas cores
como base para a construo do layout.

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.






PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

34
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
relacionado com outras formas.

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.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

35
A linha: Quando os pontos esto to prximos entre si que se torna
impossvel identific-los individualmente, aumenta a sensao de direo, e a
cadeia de pontos se transforma em outro elemento visual distintivo: a linha.
A forma: Na linguagem das artes visuais, a linha articula a complexidade da
forma. As 3 formas bsicas so: crculo, tringulo equiltero e quadrado.
Todas as formas so figuras planas e simples, fundamentais, que podem ser
facilmente descritas e construdas, tanto visual quanto verbalmente.

A partir da combinao e variaes infinitas dessas trs formas bsicas,
derivamos todas as formas fsicas da natureza e da imaginao humana.

Direo: As formas bsicas tambm apresentam direes caracterstica a
elas: horizontal e vertical, diagonal e curva.

Tom: As variaes de luz ou de tom so os meios pelos quais distinguimos
oticamente a complexidade da informao visual do ambiente. Vemos o que
escuro porque est prximo ou se superpe ao claro, e vice-versa. As
relaes so sempre por comparao.

Cor: Podem apresentar-se saturadas (cor com tom 100%) ou acromticas
(variao de tom de 99 a 1%).

Textura: A textura o elemento visual que serve de substituto para as
qualidades de outro sentido, o tato.

Escala: Todos os elementos visuais so capazes de se modificar e se definir
uns aos outros. O processo constitui, em si, o elemento daquilo que
chamamos de escala. A escala pode ser estabelecida no s atravs do
tamanho relativo das pistas visuais, mas tambm atravs das relaes com o
campo ou com o ambiente.


PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

36
Dimenso: Nenhuma forma de representao da dimenso possvel sem a
iluso. A dimenso est sempre implcita na forma e depende das relaes
feitas na composio. Ela fica bem evidente nas composies que utilizam a
perspectiva.

Movimento: O elemento visual do movimento se encontra mais
frequentemente implcito do que explcito no modo visual. Porm, o
movimento talvez seja uma das foras visuais mais dominantes da
experincia humana. O movimento da composio acontecesse por causa
dos elementos compositivos que o crebro busca atravs do olho como os
eixos de equilbrio e os sentidos e direes presentes.

3.5 ALGUNS TERMOS UTILIZADOS
O que ALINHAMENTO?
a forma de organizao de colunas de texto, cujas linhas podem ser
alinhadas esquerda, direita, centralizadas ou blocadas.

O que CAIXA-ALTA/caxa-baixa?
a forma de designar a tipologia utilizada em letras minsculas (caixa-baixa)
ou letras maisculas (caixa-alta).

O que CORPO?
Corpo a medida de tamanho das fontes. Quanto maior o corpo, maior o
tamanho da letra.

O que DIAGRAMAR?
Diagramar consiste em determinar a disposio dos elementos em uma
pgina legendas, ilustraes, textos, ttulos etc.

O que ESCANEAMENTO?
Escaneamento a forma "abrasileirada" de designar o processo de
digitalizao da imagem. Vem da palavra inglesa scanner, nome do equipamento em
que se realiza a digitalizao.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

37
O que IMAGEM EM ALTA/BAIXA DEFINIO?
So os termos utilizados para a medida de pontos por polegada de uma
imagem. Quanto maior o nmero de pontos por polegada (dpi), maior a definio da
imagem.

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.

O que TRATAMENTO DE IMAGENS?
O tratamento de imagens um processo realizado por meio de softwares
grficos (como o Photoshop) que visa a melhoria da qualidade da imagem para
impresso ou edio. Nesse processo, podem ser corrigidas imperfeies da
imagem.




PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

38
Exerccio 1 - Unidade III
1 Quais os pontos a serem considerados e aplicados para se atingir uma
programao visual intuitiva em um website:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________

Anotaes:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________


PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

39
Unidade IV - Produo para Web
Tempo previsto: 5h/a
Objetivo: Nessa unidade o aluno ir conhecer o processo de produo de um web
site como tambm algumas das ferramentas que daro suporte para essa atividade.

4.1 PROCESSO DE PRODUO
Aspectos a serem considerados no processo de produo de um website:
Briefing;
Pesquisa;
Escopo;
Sitemap;
Wireframe;
Criao do layout;
Desenvolvimento;
Mtricas.

Brieng: colher o mximo de informaes do cliente a respeito da marca, da
estratgia, da identidade visual, do objetivo do projeto.

Pesquisa: procurar concorrentes ou sites de referncia para servir de
inspirao e desenvolver algo que concorra ou que seja criativo o suciente para ter
destaque.

Escopo: de acordo com o objetivo, escolher as ferramentas, as tecnologias, a
metodologia, os recursos que sero utilizados.

Sitemap: denir a estruturao do site. Como ele ser apresentado ao
visitante pensando em usabilidade e navegabilidade.

Wireframe: esboo do projeto. Fase 1 do layout e Arquitetura de Informao.
desenhado em papel, as pginas do site e disposio dos elementos visuais.

PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

40
Criao do Layout: criao do layout nal, com detalhes, seguindo todas as
etapas anteriores. Cria-se uma imagem esttica do site (JPG).

Desenvolvimento: recorte do layout de maneira estratgica e programao
(HTML, CSS) obedecendo a melhor estrutura esqueleto do site considerando
resoluo de tela, SEO (Search Engine Optimization), verso do navegador, tipo de
navegador.

Mtricas: ps lanamento. Medir os KPIs (Indicadores chave de performance)
denidos na estratgia de marketing digital para entender o comportamento do
usurio, a quantidade de visualizaes, origem de trfego.

4.2 FERRAMENTAS DE PRODUO
Seguem alguns exemplos de ferramentas utilizadas no processo de criao
de um website:
Tratamento de imagens bitmap:
Adobe Photoshop GIMP



Tratamento de imagens vetoriais:
Adobe Fireworks Corel Draw Inkscape




PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

41
Animaes:
Adobe Flash


Ambientes de desenvolvimento WYSIWYG O que voc v o que voc obtm
Adobe Dreamweaver FrontPage



CMS Sistemas Gerenciadores de Contedo
Joomla Drupal Wordpress




muito comum atualmente a utilizao de blogs e fanpages no facebook,
inclusive para empresas, para isso esses ambientes disponibilizam uma srie de
recursos e templates que facilitam o desenvolvimento.





PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

42
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:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________


PRONATEC - Introduo ao Web Design - Professor Francisco Gerson A. de Meneses

43
BIBLIOGRAFIA
o http://www.compuland.com.br/tutoriais/
o http://www.lsc.ufsc.br/~edla/design/web.htm
o http://fabricio.skooterweb.com/trabalhos/cores.pdf
o http://www.baixaki.com.br/tecnologia/203-o-que-e-pixel-.htm
o http://www.photosynt.net/ano2/03pe/questao/12_pixels/index.htm
o http://www.slideshare.net/alexsanches/producao-para-web-7366592

Você também pode gostar