Marketing e Comércio

Eletrônico
 Material Teórico
Fundamentos de Web Design

Responsável pelo Conteúdo:

Prof. Ms. Rolfi Cintas Luz Gomes

Revisão Textual:
Prof . Esp. Vera Lidia de Sá Cicaroni
a
 Fundamentos de Web Design

• Fundamentos do Web Design

• Direitos Autorais

• Introdução à Tipografia

• Cor

• Imagens

• Sentido de Leitura do Usuário

·· Nesta Unidade V, iremos nos aprofundar em um tópico muito

importante para esta disciplina: Fundamentos de Web Design.
·· Para o estudo desta unidade, iremos nos aprofundar em conceitos
utilizados tanto dentro quanto fora da Internet, como logomarca,
cores, sentido de leitura e disposição dos layouts. O web designer
tem como preocupação a forma de cativar ou satisfazer o cliente
através de imagens digitais.

A organização deste material está agrupada por diversos recursos que lhe proporcionarão
uma maior compreensão do assunto abordado, tornando, assim, o assunto mais interessante
para você, na medida em que irá ter noções de uma das profissões da atualidade: a de
web designer.
Lembre-se de seguir os prazos do calendário; a modalidade de estudo on-line exige
organização e dedicação. Não se esqueça de participar das Atividades de Aprofundamento.
A interação, nos fóruns, com os colegas e o professor é de grande valia para todos.

5
 Unidade: Fundamentos de Web Design

Contextualização

Para iniciarmos esta unidade, vamos imaginar a seguinte situação:

Você foi incumbido de uma tarefa especial na sua empresa, pois a equipe de marketing
sugeriu vendas on-line e a diretoria aprovou a ideia de montar um E-Commerce (loja virtual)
para aumentar as vendas de produtos. Para isso, já reservou o domínio e a hospedagem e,
assim, resolveu metade do desafio. Você também já aprofundou seu conhecimento sobre as
principais ferramentas para desenvolver um e-commerce e já estudou a estrutura interna e os
processos de uma plataforma de E-commerce livre, no caso, OsCommerce.

Porém, agora, é necessário criar a identidade digital do e-commerce.

E você se pergunta:
(1) Hã?! Como criar uma identidade digital?
PS: Não precisa googlar ainda. Seus problemas serão resolvidos!

A resposta à sua pergunta está no material da Unidade 5, que irá lhe mostrar os principais
fundamentos do web design e, a partir desses fundamentos, você poderá ter noções, como
cores, disposição dos layouts, logomarca, arquivos e direitos autorais e imagens, para
desenvolver a identidade digital do e-commerce. Entraremos no mundo do web designer,
que, por sua vez, é mais ligado à área de marketing do que propriamente à de programação.
Seu papel é fundamental para a venda dos produtos do e-commerce e para a construção da
imagem da empresa para o cliente, pois o cliente visualiza a imagem e não o código-fonte.
Ou seja, o e-commerce deve funcionar sem problemas de funcionalidade, mas a imagem que
esse sistema irá transmitir ao cliente pode influenciar, e muito, a decisão de compra ou não de
algum produto pelo internauta.

6
 Fundamentos do Web Design

Olá, caro(a) aluno(a), nas unidades anteriores, vimos as principais funções do webmaster e do
web developer. Nesta unidade, iremos abordar a função do web design. Inicialmente, a função
web design surgiu da necessidade de organizar as informações computacionais ou da Internet
de forma tão atrativa e funcional quanto às da mídia impressa. Logo muitos profissionais de
Design Gráfico adequaram-se ao computador, levando as principais técnicas de design para as
mídias digitais caracterizadas como websites, e-commerces, portais, e-mail-marketing, softwares
e demais aplicações.

1.1 Profissional Web designer

O profissional web designer, em geral, não

se preocupa muito com códigos, fontes ou
tecnologias para manter um e-commerce no ar,
porém o seu desempenho em um e-commerce
ou um website pode ser a diferença entre o
cliente fechar negócio com a empresa ou
fechar com o concorrente, pois, para o usuário
final, o trabalho do web designer é que
demonstra, através das imagens do sistema, a
sua credibilidade.

Para tanto, o web designer tem contato constante com a equipe de marketing e vendas e,
através de estratégias de marketing, trabalha as formas de vendas via Internet pelas imagens,
disposição dos layouts e anúncios. A principal característica do web designer é a criatividade,
ou criador, e, segundo Malzone(2006), ele deve ser observador, atualizado, indagador,
persistente, objetivo, responsável e estrategista. Ser um web designer é criar mídias digitais
para cativar o cliente.

1.2 Fundamentos de Design

Em uma Internet onde quase não se observa padrões de design e milhares de websites
que não são projetados para os usuários e sim por alguma exigência do mercado acaba
tornando por sua vez o website fora do padrão e acaba passando pela sua identidade visual
um aspecto de “desleixado”

Embora a função do web designer seja trabalhar com a criatividade, o profissional deve ter
em mente que existem diversos websites consagrados no ar e que algumas composições de
imagens já são, até certo ponto, “assertivas” e padronizadas para os navegadores da web. Para
esses padrões já estabelecidos na web, existem alguns princípios básicos, segundo Damasceno
(2003, p.10): (a) a harmonia, (b) as formas e suas funções, (c) o equilíbrio entre os elementos,
(d) a atração de elementos e (e) a simplicidade da composição.

7
 Unidade: Fundamentos de Web Design

(a) Harmonia: trata-se da coerência visual, percebida pela visualização total do trabalho.
Através da organização visual dos elementos na tela, pode-se extrair do usuário
uma das respostas: website de “bom gosto” ou website de “mau gosto”. Os elementos
do website são as cores, tamanhos de imagens e posicionamentos e qualquer elemento
na tela.
(b) As Formas e suas funções: a forma é o meio universal de representar a funcionalidade
de um elemento ou componente, como, por exemplo, na figura abaixo, as formas de
setas para direita e para esquerda do menu de navegação tem como objetivo demonstrar
a função de “voltar” para página anterior ou “avançar “ para a próxima página.

Figura: Formas do Navegador Google Chrome.

Na tabela abaixo, o significado visual das principais formas da Internet, segundo Damasceno (2003).
Tabela 1: Significado visual dos elementos, adaptada de Damasceno (2003, p.12-14)

Triângulo Estabilidade, imponência (exemplo, pirâmides egípcias)

e equilíbrio..

Triângulo de “cabeça para baixo” Desequilíbrio iminente, dinâmica e impulsividade.

Retângulo Desequilíbrio iminente, dinâmica e impulsividade.

Quadrado Sugere falta de criatividade, apatia e peso. Mas

simboliza a simetria, a solidez e a igualdade.

Circunferência Possui capacidade de centralizar as atenções

frente a outros elementos à sua volta. Utilizada
para enfatizar elementos de destaque. Simboliza
a eternidade; não possui começo e nem fim;
perfeição, estabilidade e neutralidade.

Elipse Bem aplicada pode conferir muito movimento visual a

diversos elementos de um layout. É sinuosa e feminina
e suas laterais sugerem equilíbrio delicado.

8
 Formas poligonais e sinuosas As demais formas poligonais (estrelas, pentágonos,
hexágonos, losangos) são muito expressivas por si só e
devem ser utilizadas com muita moderação. As formas
sinuosas compreendem as curvas que não definem
nem circunferências nem elipses (curvas arbitrárias).
São elementos muito utilizados na composição de
certos tipos de Websites e, quando bem aplicadas, são
a melhor saída para um design correto, divertido ou até
mesmo elegante.

(c) Equilíbrio entre os elementos: De acordo com Damasceno (2003, p.15), trata-se
da: “proporção ideal entre imagens e textos, hierarquização correta dos elementos e
também quando confere fácil identificação de todos os componentes aos usuários.”
Observe as figuras abaixo que mostram claramente o desequilíbrio e equilíbrio entre
figuras com o mesmo conteúdo.

Figura: Exemplo de desequilíbrio entre elementos

Figura: Exemplo de equilíbrio entre elementos

9
 Unidade: Fundamentos de Web Design

(d) Atração de elementos: As informações, hipertextos, imagens ou produtos devem ser

agrupados de forma hierárquica ou em sequência de modo que os elementos que se
correspondam fiquem próximos.

No design, por exemplo, o “carrinho de compras” como ícone de um botão ou link demonstra
ao usuário que, ao clicar naquele botão, ele irá visualizar os produtos que adicionou à sua
compra. Outro exemplo seria o uso de links por meio dos quais o usuário cliente entra no setor
de periféricos de computador do e-commerce. Nesse caso podem aparecer, em algum local
do e-commerce, produtos dessa categoria que são visitados, expondo promoções e produtos
mais visualizados.

(e) Simplicidade da composição: com o estilo atual da vida dos usuários de Internet, um
website conciso não somente é padrão dos websites como também é uma forma de
atrair o visitante novamente à página.

Então ter o foco na mensagem a ser passada faz com que o usuário não precise “caçar” o
que ele procura dentro do website. Embora, muitas vezes, as imagens falem mais do que as
palavras, é preciso cuidado com os excessos de imagens, a fim de não desviar o usuário do foco
da mensagem.

1.3 Princípios de Design para Web

Dentro das mídias impressas e digitais, trabalharemos alguns dos principais conceitos envolvidos:
1) Direitos Autorais
2) Introdução à Tipografia
3) Cor
4) Imagens
5) Sentido de Leitura do Usuário

1. Direitos Autorais

No Brasil, os direitos autorais são previstos por lei (Lei 9.610/98 artigo 49) que garante os
direitos do autor sobre o conteúdo desenvolvido e que combate a distribuição não autorizada,
a cópia ou plágio, e o seu infrator vai responder em juízo ou pagar indenização. Essa lei é
válida tanto para Internet como para casos que ocorrem fora dela. Geralmente, a existência
dos seguintes símbolos © , ® , ™,copyright, alguma assinatura ou marca dá agua significa que
existe, de alguma forma, o registro ou a patente do conteúdo, podendo ser ele um nome, uma
logomarca, etc.

10
 Existem websites especializados em disponibilizar conteúdos gratuitos, como imagens,
fotografias, templates de websites, códigos-fontes, etc. Esses websites têm como critério vários
tipos de licenças, como CCL (Creative Commons Licence), “As licenças Creative Commons
são várias licenças de copyright , publicadas primeiramente em 16 de dezembro de 2002 pelo
Creative Commons, uma organização sem fins lucrativos fundada em 2001”. que é uma forma
de utilizar o conteúdo fornecendo os créditos pelo mesmo conteúdo. Existem também conteúdos
que podem ser utilizados revelando sua fonte de acordo com critérios da ABNT ou com qualquer
outro padrão, procedimento muito encontrado em revistas especializadas, periódicos, livros,
monografias, dissertações, teses e trabalhos acadêmicos.

2. Introdução à Tipografia

A tipografia é a apresentação de alguma ideia, expressão ou identificação através de sinais

gráficos. A fonte ou tipo de letra é fundamental na tipografia, pois as características de fonte para
uma frase podem, assim como a cor, transmitir uma sensação ou emoção para o ser humano.
Muitas vezes uma frase com uma fonte adequada também pode transmitir uma mensagem de
impacto ou ser cativante (Damasceno, 2003).
Todos os estilos de fontes podem realçar uma palavra ou expressão. Veja, abaixo, os
estilos de fontes e suas propriedades e peculiaridades:
Negrito: representação de um link;
Itálico: representação de palavras estrangeiras, jargões e expressões, por
exemplo, homosapiens;
Sublinhado: representação de um link ou algo clicável na tela.

A separação entre as letras de uma fonte é chamada de efeito kerning, que é utilizado quando
se quer pausar a leitura do usuário naquela palavra dentro da frase.
Exemplo:
Sem efeito: teste
Com efeito kerning: t e s t e

2.1 Família de Tipos

As fontes, ou tipos (na tipografia, tipo é igual fonte), são divididas por famílias, e cada família
é caracterizada pelo emprego da letra MAIÚSCULA ou da minúscula.
De acordo com Damasceno (2003), temos as seguintes famílias:

11
 Unidade: Fundamentos de Web Design

• Serifada: São fontes que contêm fechamentos nos cantos superiores e inferiores. É
indicada para materiais impressos e não muito utilizada para mídias digitais.
• Sem Serifa: São fontes que não contêm fechamentos nos seus limites. É indicada para
mídias digitais, pois facilita a leitura no visor, enquanto a serifada dificulta essa leitura,
tornando-a mais cansativa. É também usada em monografias ou trabalhos acadêmicos
formatados pelas normas da ABNT.

Devido à leitura da fonte Sem Serifa ser menos “cansativa” no papel, em bancas de trabalhos
acadêmicos, seu emprego permite que os leitores encontrem facilmente erros de escrita, de
coerência e de ideias nos trabalhos.
• Monoespaçadas: São fontes que contêm a mesma largura independente do carácter.
Indicada na prática da edentação na programação quando se desenvolve o código-fonte,
pois permite ao desenvolvedor a real percepção de espaçamento dentro do código-fonte,
facilitando a interpretação do mesmo.
• Bitmap: São fontes formadas por junções de pixels e possuem formas mais quadriculadas.
Observadas em editores de imagens bitmaps, como Microsoft Paint, por exemplo.
• Caligráficas: São as fontes que se assemelham à “letra de manuscrita”.

Tabela 2: Adaptado de Damasceno (2003, p.471-p.473)

12
 No Sistema Operacional Microsoft Windows, o mesmo é
encontrado no Painel de Controle dentro da pasta fontes. Estão
organizadas nessa pasta todas as fontes que poderão ser vistas se
chamadas pelo Browser ou pelos editores de texto ou pelo próprio
Sistema Operacional, ou seja, não se pode utilizar, dentro de um
website ou e-commerce, qualquer fonte.

Exemplo:
O iniciante de web designer “acredita” que, utilizando a fonte do logotipo da Coca-Cola
em um anúncio de mouse pad, poderá influenciar a venda dos mouses pads do e-commerce.
Embora, no computador dele, apareça o website com a fonte do logotipo da Coca-Cola, no do
internauta, o e-commerce aparece uma fonte helvética, verdana ou arial, ou seja, é o browser
que define e “mata” toda a estética do anúncio com a fonte da Coca-Cola.
E, nesse caso, o que aconteceu com a fonte? Simples, no Sistema Operacional do Cliente não
existe instalada a fonte do logotipo da Coca-Cola.
A solução para este caso seria gerar uma figura do anúncio com a fonte desejada, pois, sendo
figura, pode aparecer no computador do cliente sem problemas (porém poderá ficar mais lento
no e-commerce). Outra solução poderia ser trabalhar um anúncio com fontes padrões que os
usuários já tenham em seu computador.

3. Cor

A Cor é um fenômeno óptico de reflexão de luz solar sobre um objeto percebido pelo ser
humano.
Exemplo:
1. Grosso modo, um raio da luz solar que contém em si uma série de cores “embutidas”,
como as cores do arco-íris, por exemplo, colide com um objeto da cor azul.
2. Como esse raio contém várias cores do arco-íris, esse objeto “absorve” todas as cores e
reflete a cor azul.
3. Esse é um dos motivos de a cor preta esquentar com mais facilidade que as outras cores,
pois, no raio da luz, cada cor possui sua frequência, variando entre menor frequência, nas
cores mais claras, e a maior frequência, nas cores mais escuras.

A cor em si tem vários significados para os humanos. Desde a Antiguidade até os dias de
hoje, temos diversos usos e padrões para cores no mundo, como, por exemplo, o uso das cores
no semáforo de trânsito e as convenções em relação às cores do céu, do mar, do sol, da árvore,
da terra, etc. Existem, também, pesquisas que concluem que a cor gera, no ser humano, uma
sensação ou sentimento.

13
 Unidade: Fundamentos de Web Design

Por isso é estritamente necessário pesquisar as características do cliente e de seu público-alvo,

pois, através dos requisitos do cliente o site poderá representar a identidade visual, observando
que a identidade visual na rede deve ser a mesma identidade visual da empresa física, tornando
a rede uma imagem virtual da instituição do cliente. No entanto é trabalho do web designer
apontar as incoerências entre uma e outra sendo sensível ao padrão do mercado.

Exemplo: Um website para público feminino com cores e padrões de um website voltado ao
público jovem que pratica surf.

Explore

As pesquisas do Prof. Modesto Farina, da USP, deram origem a diversos trabalhos sobre as
percepções das cores pelos humanos. Também no livro Webdesign: Teoria e Prática, da
autora Anielle Damasceno, publicado pela Visual Book, 2003, podem ser encontradas infor-
mações sobre percepções das cores.

As Cores digitais, geralmente representadas nos bits, apresentam as seguintes estruturas:

• CMYK (Cyan, Magenta,Yellow e blacK) - caracterizada pela absorção de luz pelas cores,
comumente utilizada para impressão. Alguns softwares vêm com as tonalidades mais
próximas da versão impressa.

• RGB (Red, Green e Blue) - composta pela variação das três cores em um ponto específico
ou pixel. Possui mais de 16 milhões de cores e é muito utilizada no computador. Na
Internet, na linguagem HTML, é representada pela variação de 0 à 255 em três blocos.

Por exemplo:

#255255255 - este código sinaliza a cor branca ou, em inglês, white, como se viu na
Unidade 3, na qual estudamos HTML.

4. Imagens

Para a Web, as principais extensões são os arquivos de compressão PNG, JPG e GIF, tendo
o browser como principal visualizador de imagens, porém cada arquivo corresponde a uma
característica de uso. A seguir, a tabela abaixo apresenta suas características.

14
Tabela 3: Extensões mais utilizadas para imagens na Web

PNG - Portable Network Suporte 256 ou 16 Milhões de cores. Embora represente desvantagem em
Graphics relação ao JPEG com essa escala de cores, representa maior qualidade em
relação aos detalhes do arquivo original.

Ideal para figuras que precisam ter precisão de contornos e áreas chapadas.

Permite Imagens: Transparência em canal Alfa (R,G,B), Entrelaçado (mostra

conforme carrega no browser)
JPG - Joint Photographic Os arquivos JPEG usam o algoritmo que permite uma maior compressão dos
Experts Group bytes, porém quanto maior a compressão menor a qualidade da imagem.

Tem suporte a 16 Milhões de Cores.

Ideal para imagens, fotos, efeitos de luz e sombra, gradiente e degradê.

Não é indicada para textos e figuras muito detalhadas.

GIF- Graphic Interchange Possui, em sua paleta, 256 cores.
Format
Ideal para figuras que precisam ter precisão de contornos e áreas chapadas; não
é muito indicada para fotografias ricas em cores.

Permite Imagens: Transparência , Entrelaçado (mostra conforme carrega no

browser) e Animações.

Glossário
Pixel: É uma cadeia binária que caracteriza
a menor parte da imagem, observando que
essa cadeia binária pode variar de 1,8 até
24 bits. Contém, como principal informação
para o computador, a cor do elemento. Uma
imagem é um conjunto de cores, e cada cor é
representada por 1 pixel.

5. Sentido de Leitura do Usuário

A leitura do ser humano é considerada quando existe esforço para interpretação dos símbolos
quando mostrado a ele. Quando crianças aprendem o alfabeto e tentam interpretar os desenhos
considerando os sons que eles representam.

Porém outra forma de leitura é o reconhecimento de símbolos ou conjunto de

símbolos de maneira ágil. Um exemplo seria a pessoa que, lendo um jornal no seu
idioma natural, com apenas “uma passada de olho”, reconhece a palavra escrita,
mesmo que escrita de forma incorreta.

15
 Unidade: Fundamentos de Web Design

Além de envolver reconhecimento e interpretação, a leitura do usuário ocidental é caracterizada

também por sua direção, ou seja, uma vez iniciada a leitura, ela segue o sentido da esquerda
para direita e de cima para baixo. Mas quando falamos de imagens, figuras e Internet, o sentido
muda; primeiro se observa o que chama a atenção. Na figura abaixo, podemos observar o
sentido de leitura do usuário ocidental, de acordo com Malzone (2006).

Figura: Sentido de Leitura Adaptado de Malzone (2006, p.6-b)

Observando a figura acima, percebe-se que as áreas de maior interesse visual do usuário
estão representadas na 1º e 2º zonas. Podemos observar publicidades e links patrocinados
geralmente nestes setores. As zonas 6º e 5º são zonas de conteúdo, e as 4º e 3º zonas são as
zonas chamadas Zonas Mortas, que possuem o menor número de publicidade quando ela
existe, ou links direcionados ao próprio site.

5.1 Marcas e Logomarcas

Não existe uma definição propriamente dita de logotipo, marca e logomarca. Existem diversas
convenções e debates, porém vamos considerar, nesta unidade, as seguintes definições:
• Marca: representação gráfica de identificação de uma ideia ou serviço ou símbolo.
• Logotipo: é a pesquisa ou estudo do símbolo como um todo e seu significado.
• Logomarca: É a junção do logotipo com a marca.

5.1.1 Construindo um Logotipo

Em primeiro lugar é necessário um responder a várias perguntas:

1º Quem é o cliente?
2º Quais são as suas cores?
3º Como o cliente é conhecido?
4º Qual seu foco de negócio?
5º Para quem é destinado o serviço ou produto do cliente? Preferências?
6º Quem são os concorrentes?

16
 A partir dessas respostas, pode se construir um logotipo, pensando nos seguintes aspectos,
segundo Damasceno (2003, p.434):
a) Um logotipo deve representar a empresa como um todo: seus valores, qualidades e ideias
explícitas ou implícitas sobre a marca ou empresa.
b) Deve ser facilmente adaptável tanto para mídias digitais como para não digitais.
c) Deve conseguir “ser, ao mesmo tempo, simples (utilização de cores, estilos de fontes) e
complexo (ideia original e impacto positivo junto ao público)” (Damasceno, 2003, p.434).

5.2 Ferramentas para Design

Existe uma infinidade de ferramentas para Design Gráfico, que, por sua vez, também são
ferramentas do web designer. Dentre essas ferramentas, podemos destacar o (1) Corel Draw
, (2) Adobe Photoshop e (3) Adobe Fireworks, como editores de imagens, e o (4) Adobe
Dreamweaver, como ferramenta para desenvolvimento do website em DHTML, XML e
CSS. Além dessas, há a ferramenta da categoria (5) Wyswyg Web Builder (WYSWYG, que
significa: “o que você vê é o que aparece na tela”), E, para animações para websites ou
microfilmes, destaca-se o (6) Adobe Flash, que, por sua vez, precisa do plug-in instalado no
Browser do internauta.
Embora essas ferramentas sejam proprietárias, existem, no mercado, diversas opções gratuitas
para todas essas funções.

17
 Unidade: Fundamentos de Web Design

Material Complementar
Vários artigos relacionados a web design e Marketing na Web podem ser lidos em no Blog do
profissional : web designer Bruno Avilla. No website : www.brunoavila.com.br

Livro excelente sobre Web Design.

DAMASCENO,A. Webdesign: Teoria e Prática. 2ª imp. Florianópolis:
Visual Book,2003.

Visite o website Templates Monster, é um website especializado em websites com as melhores

produções de webdesigners, ou seja, é uma empresa que constrói templates para venda, lógico
que aquele que compra não necessariamente pode ser o único a ter a aparência,mas para
captar idéias para desenvolvimento de websites é muito bom.
• http://www.templatemonster.com/

Um dos maiores desafios do web designer, é estimular a criatividade para desenvolver

imagens, layouts e menus para impressionar seus clientes, segue abaixo as dicas para estimular
a Criatividade.
• http://www.bonstutoriais.com.br/5-dicas-para-ter-mais-criatividade-e-inspiracao/

Baixe as principais ferramentas de DESIGN:

Download Trial do Photoshop:

• http://www.baixaki.com.br/download/adobe-photoshop.htm
Download Trial do Corel Draw:
• http://goo.gl/M7x4c

Tutorial dos recursos do Photoshop

• http://www.photopro.com.br/

18
 Referências
DAMASCENO, A. Webdesign: Teoria e Prática. 2ª imp. Florianópolis: Visual Book, 2003.

MALZONE, H.V. Conceitos Essenciais de Design em apoio aos Aplicativos Gráficos.

Centro de Pesquisas e Desenvolvimento Impacta Tecnologia: São Paulo, 2006.

19
 Unidade: Fundamentos de Web Design

Anotações

20
www.cruzeirodosulvirtual.com.br
Campus Liberdade
Rua Galvão Bueno, 868
CEP 01506-000
São Paulo SP Brasil
Tel: (55 11) 3385-3000