Vous êtes sur la page 1sur 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

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

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

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

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

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

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

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, tcnicoconstrutivos, 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

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

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

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

10

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

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

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.

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

sem

esquecer de vez a
simplicidade. A tela
do computador o
universo em que o
Web designer deve
trabalhar,

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

12

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

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

13

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

destaca

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

modelo

de

cores

RGB

(vermelho/verde/azul).

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

14

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

15

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

16

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

17

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

18

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

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

19

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,
vermelhos,

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.

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

20

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

21

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

22

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
magenta
comercial

tintas

amarelo,

pode

de
uma

reproduzir

cor

ciano,

impressora
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

23

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

24

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

25

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

26

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

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

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

28

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

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

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

programas

adequados,

de

contedo

apresentao

da

informao

em

formatos alternativos.

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

29

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

30

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

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

31

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

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.

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

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

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

34

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

35

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:

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

36

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

37

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

38

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.

Briefing: 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 suficiente para ter
destaque.

Escopo: de acordo com o objetivo, escolher as ferramentas, as tecnologias, a


metodologia, os recursos que sero utilizados.

Sitemap: definir 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

39

Criao do Layout: criao do layout final, 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)


definidos 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

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

Inkscape

40

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

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

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

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

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

43

Vous aimerez peut-être aussi