PRINCÍPIOS

BÁSICOS
DE DESIGN
 2003 K S Wildermann

Tradução para o português Claudio Wieser

[Esta versão data de 15 de Abril, 2003 anula as anteriores]

Este documento tem a principal função de fornecer uma informação básica de design, para
direcionar os “iniciantes” no caminho certo. Estudantes de design levariam
aproximadamente um ano inteiro para assimilar as teorias de Design aqui expostas. Então
você pode ter uma idéia de quanto material poderia ser escrito. Este documento é meramente
um esboço e, não o transformará em um designer premiado.

No intuito de manter somente as informações básicas, eu excluí diversas informações

importantes. Entretanto, elas poderão ser encontradas nas minhas edições de dicas no Fórum
Geral de Ajuda. (http://www.swish-
tutorials.com/forum/index.php?act=ST&f=4&t=8030&s=aceefe888a4b3da9733b115ac6bd3a8b).

A principal tendência desse “guia” é direcionada ao “WebDesign”, e confecção de sites em

geral. Antes de abordarmos diretamente esta matéria, existe a necessidade de termos alguns
conhecimentos fundamentais do design; os dois primeiros tópicos irão suprir esta
necessidade.

Minhas considerações para –

Ms Lisa Abke pela provisão dos logotipos de algumas companhias bem conhecidas.
Mr John Clark pelas imagens de grupos de pessoas

email: wildermann@swish-tutorials.com

Este documento foi elaborado especialmente para o seu uso pessoal. Não deverá ser distribuído ou vendido.
Parte I
GERAL
Em tudo que fizermos, escolhamos apenas um mestre, a Natureza.
Leonardo da Vinci (1452-1519)

O Design é um conceito subjetivo

Se o design é bom ou ruim isto depende muito de quem observa. Tanto quanto a música e a
literatura, nosso gosto pessoal pelo design é caracterizado pela nossa cultura, ambiente,
educação, e treinamento. Neste breve tópico nós abordaremos apenas aquilo que é
considerado aceito como um design bem elaborado, pelo ponto de vista ocidental. A razão
por ter optado por esta linha de exposição deve-se ao fato de que a grande maioria, senão
todos, leitores provavelmente são do Ocidente ou estudaram em escolas que ensinam através
do sistema de educação Ocidental, e estiveram expostos à cultura Ocidental.

Cores, formas e texturas

Design envolve três elementos – cores, formas e texturas. Todos os três devem estar presente,
caso contrário não haverá elementos de design a serem abordados. E as “linhas”, você pode
estar se perguntando. “Linhas” estão inclusas em formas, desde que as formas são delineadas
ou compostas por linhas. Visto que esses três elementos são importantes, vamos dar uma
olhada na melhor maneira de trabalharmos com eles no Design.

Cores

O estudo das cores é uma ciência que se encerra em si mesmo. Abordar esse tema em
detalhes encheria volumes de informação e estaria além da extensão desse tópico e dos meus
conhecimentos limitados. Por exemplo, cores podem ser classificadas como puras, frias e
quentes, dependendo da hora do dia e da iluminação incidente do sol. Esta é uma questão
importante para o conhecimento de Designers de interiores.
As cores podem afetar o nosso humor e a nossa psique sutilmente. Vermelho, por exemplo,
parece aguçar o nosso apetite. Por essa razão tradicionalmente as toalhas de mesa nos
restaurantes são vermelhas, ou pelo menos são compostas em sua maior porcentagem pela cor
vermelha. Também simboliza raiva ou perigo. Azul nos ajuda a sentirmos relaxados,
promovendo uma agradável sensação de paz e harmonia. Amarelo é refrescante, simboliza
alegria, promovendo atividades nas quais usamos o nosso poder de persuasão. Certamente o
amarelo também é associado à covardia. Verde é calmante para nossos olhos e psique, por
isso a natureza nos presenteia com bastante dessa cor em suas formas e florestas.
Infelizmente o homem está destruindo as florestas como se não houvesse “amanhã”.

De que forma usamos as cores?

A princípio precisaremos de um disco de cores. Poderá ser obtido em papelarias ou lojas

especializadas em material artístico.
Um disco de cores típico terá a aparência da ilustração acima. Possui 12 cores, as quais
variam continuamente. Cada uma dessas cores pode ter milhões de variantes..

As principais ou cores primárias são indicadas em vermelho. São elas vermelho, amarelo e
azul, embora atualmente sejam aceitas quatro cores, sendo o verde a quarta cor.
Incidentemente, preto e branco também são consideradas cores, embora não sejam
consideradas tais pelos leigos.

Você poderá criar o seu próprio disco com cores adicionais. Por exemplo, você poderá
acrescentar mais quarto entre cada uma delas, amarelo (Y) e amarelo-esverdeado (YG)
obedecendo as seguintes proporções em porcentagem – 80Y20YG, 60Y40YG, 40Y60YG,
20Y80YG.

Quanto mais variantes você possuir, mais fácil será de reconhecer que cor combina ou
contrasta com qual.

Figura A Figura B Figura C

Cores em sentido oposto (Fig A) complementam uma a outra. Não devem ser usadas nas
mesmas quantidades, por exemplo, 50% cada em uma mesma área, é melhor que apenas uma
seja usada na maior parte da área e a outra em menor quantidade.

Quaisquer três ou quatro cores adjacentes (Fig B) possuem harmonia entre si. Poderemos
observar isso na Natureza, por exemplo, as flores amarelas entre folhas verdes. Se não
sabemos como combinar cores, seguindo esta orientação será mais seguro. (Fig C) ilustra
uma seqüência de três cores separadas pela terceira. Qualquer uma das combinações
possíveis cria um design sensato baseado na pureza das cores. Entretanto não há a
necessidade de usarmos as três cores, poderíamos usar apenas duas, mas se usarmos duas ou
três cores, algo deve ficar bem estabelecido que somente uma delas deverá ocupar a maior
parte da área a ser preenchida e as outras duas em proporções menores obedecendo a uma
escala em porcentagem.

Damos uma olhada na Natureza, e podemos observar exemplos excelentes de combinação de

cores. Podemos ver a cor das flores e folhas sustentadas pelo caule que brota da terra, dos
mares, das praias, dos pedregulhos e tantas outras superfícies.

É interessante observar que o gênio da pintura Leonardo daVinci aconselhou para que
escolhêssemos apenas um mestre (referencial) em tudo o que criamos, Natureza.

Formas

O uso de formas de tipos e tamanhos

diferentes poderá nos ajudar a elaborar um
design interessante. Nenhuma característica
deverá ser desconsiderada. Uma página
poderá parecer agradável mesmo que apenas
com dois tipos de formas, por exemplo,
quadrados e retângulos, porém devemos
variar de tamanho e posição.

À direita você poderá observar dois exemplos de

páginas. A página da esquerda é tecnicamente
limpa e precisa, mas entediante, se levarmos em
consideração que os quadrados possuem o
mesmo tamanho e estão dispostos no mesmo
ângulo. Na página da direita, nós temos formas
de tamanhos diferentes e dispostos de maneira
difusa, oferecendo assim um efeito equilibrado.
Observe que interessante, dinâmico, e vivo.
Enquanto a página esquerda parece com um grupo de soldados marchando em fila, a página
da direita parece com uma grande festa em desenvolvimento.
Existem outras maneiras de usarmos formas em nossas páginas conforme ilustrado nas duas
páginas de exemplo à esquerda. A página da esquerda tem seu fundo dividido em duas
formas verticais. No entanto o que vemos são cinco formas. Cinco?? – sim, a própria página,
e a área preenchida pelo texto também devem ser consideradas. Na página à direita o texto
está formatado no sentido de assumir uma determinada forma, um triângulo superior e um
círculo.
Na fotografia e pintura, somos instruídos a deixarmos que o horizonte ocupe pelo menos 2/3
de nossa moldura. Devemos ter isso em mente muito embora esta regra não se aplique a carta
T. Ela se aplica se nós pintamos, ou tiramos uma fotografia de uma cena ao nível do chão.
Experimente tirar uma foto, por exemplo, de Paris do alto da torre Eiffel, por exemplo, e a
regra já não se torna mais aplicável. Esta regra funciona também para nossa página se nós a
dividirmos horizontalmente.
Quer um retângulo perfeito? Sem problema. Mantenha os seus lados no “ângulo dourado”. O
Ângulo Dourado significa 1:phi onde phi é1.618033989∝ (casas decimais infinitas). Para
nossos exemplos, consideraremos phi como 1:1.6. É usado pela Natureza no design de formas
humanas e outras espécies, pelas civilizações antigas ao projetarem pirâmides e construções
que até os dias atuais são consideradas bonitas. Embora não estejam mais intactas como o
Pathernon em Athenas, ressaltando também pinturas de grandes mestres como Da Vinci e
Michelangelo.

Texturas

Texturas contribuem para que o

nosso design se torne mais
interessante. Como estamos
lidando com design 2-D, não
temos outra escolha a não ser
simularmos texturas.
Novamente moderação é a
palavra chave. Não é necessário
trabalharmos com texturas em
todas as páginas. As texturas
não representam
necessariamente um
determinado fim, existem
algumas com as quais estamos
familiarizados, tais como
arenito, areia ou couro. Um
retângulo contendo linhas
verticais ou horizontais também podem servir de textura. Na página da web no exemplo a
direita as barras de menu à esquerda e as linhas à direita servem de textura.
Part II
DESIGN DE LAYOUTS

Uma pesquisa feita a alguns anos atrás revelou que o que visualizamos em primeiro lugar ao
abrirmos uma mídia impressa (livro, revista,
jornal, etc) é a parte do alto a direita da página
direita. Abra o seu jornal agora e você verá que
isso é verdade.

Quando olhamos na página esquerda, nossos

olhos focarão primeiramente na parte do alto à
direita desta página também, a menos que haja
algum outro elemento que se destaque em outro
lugar da página. Por essa causa, a maioria dos
designers profissionais colocam nesta parte da
página, aquilo que eles desejam que as pessoas
visualizem em primeiro lugar.

Provavelmente existem outras maneiras de se

chamar à atenção do leitor, por exemplo,
colocando um cabeçalho bem destacado e o uso
de palavras que prendam atenção e que
direcione o leitor para algum outro ponto.
Embora a página de um jornal seja grande o
suficiente para conter várias palavras, 244
pontos, uma página de revista ou e na janela de
nosso browser não é tão extensa. Na página de exemplo a esquerda, parece óbvio o que
desejamos que o leitor evidencie em primeiro lugar.

Tendo levado isso em consideração, nossos

olhos, posteriormente são direcionados a
evidenciar qualquer tipo de fotografia ou
imagem especialmente se a página for
colorida. O qual nos trás outro ponto muito
importante. Quando temos foto de pessoas
(individual e/ou em grupos) não devemos
coloca-las tanto do lado esquerdo ou
direito dando sentido de que estejam
olhando para fora da página. Por que não?
Porque dessa forma inconscientemente
interpretamos que deveríamos olhar na mesma direção em que as pessoas da foto. Sendo
assim provavelmente você não desejará que a pessoa que esteja visualizando sua página olhe
para fora dela. A mensagem se tornará conflitante em nosso cérebro, nos trazendo uma
experiência desagradável ainda que súbita. Dê uma
olhada na página de exemplo acima. A foto está
posicionada de uma maneira que nos leva a olhar
para for a dela, para o lado direito, a imagem deveria
ser colocada do lado esquerdo.

A página de exemplo à esquerda nos permite

observar a disposição correta de imagens. Ambas as
mulheres na foto, estão olhando para o interior da página, e, entretanto, nossa atenção é
direcionada para o conteúdo da página.

Outro erro comum cometido por designers iniciantes se dá ao manipularem fotografias de

grupos de pessoas. Eles geralmente reduzem as fotografias excessivamente, tanto que
qualquer observador terá dificuldade em discernir quem é quem na fotografia. Lembrem-se,
as pessoas, pelo menos as consideradas normais, sentem-se orgulhosas de verem a si mesmas
nas imagens. Nesse ponto, nós assumimos que as pessoas foram retratadas num ambiente
bem iluminado, sem estarem adulteradas ou falsificadas. Veja na fotografia na página de
exemplo abaixo. Sim, aquele sou eu, usando um par de óculos de sol bem maneiro. Você não
consegue me ver? Oops! Não se importe, eu vou pedir para que o editor envie uma lupa para
auxiliá-lo ☺.

Distribuindo os elementos

Eu já vi pelo menos uma

página onde os elementos
foram posicionados no
mesmo lugar. Os elementos
devem ser posicionados em
nossas páginas de maneira
razoável perto uns dos
outros no sentido de criar
uma unidade coesa entre si.
Elementos posicionados a esmo não apenas nos dão a sensação de algo criado por um
novato, mas eles também tornam o visual das páginas muito entediantes. A página de
exemplo à esquerda ilustra um péssimo layout, com os elementos distribuídos de maneira
displicente. Os elementos ficariam melhor distribuídos tal qual podemos observar na página
de exemplo à direita. Tenha sempre em mente que nem todo o espaço disponível necessita ser
obrigatoriamente preenchido. Veja como é bem definido o visual da página à direita.
Divagando um pouco sobre o assunto, talvez esse seria um bom argumento para os nossos
clientes, quando surge a tradicional pergunta, por quê eu deveria pagar tanto por todos esses
espaços vazios? O que, no entanto eles não percebem é que os seus anúncios irão competir
com diversos itens interessantes na página, e usar todo o espaço disponível apenas
contribuiria para uma poluição visual.
Trabalhando com cópias

No mundo da propaganda e marketing, qualquer coisa que for escrita para ser publicada ou
gravada é considerada uma cópia. A medida em que estamos publicando nossas páginas na
Internet, devemos usar a palavra “cópia” toda vez que fizermos referência a algum texto.

Geralmente quando indicamos a cópia em uma fonte do tipo serif torna-se mais fácil de se ler
do que, por exemplo, uma fonte do tipo sans serif. Por causa disso é que jornais, por exemplo,
são publicados em uma fonte do tipo serif. Times Roman é um bom exemplo de uma fonte do
tipo serif; Arial do tipo sans serif. Fontes do tipo serif possuem aqueles ornamentos em suas
extremidades, enquanto que as sans serif não. Sans significa “sem”, e serifi é a linha que
cruza a extremidade de uma letra.

As formas têm sempre uma função.

Esta observação retorna novamente
As formas têm sempre uma função
Agora você pode observa-lo bem melhor.

Certamente isso não quer dizer que você deva usar sempre uma fonte do tipo sans serif. Se
você estiver certo de que sua cópia fica mais legível em uma fonte do tipo sans serif, então
use esse tipo de fonte.

O que mais precisamos saber para tornar o conteúdo de nossas páginas mais agradável a
visualização para nossos internautas?

Não deveríamos usar mais de duas fontes diferentes. Ao usarmos muito tipo de fontes
diferentes, seria algo parecido como entrar em um quarto cheio de mulheres atordoantes,
você ficaria sem saber para onde direcionar seu olhar. Além disso, o uso de muitos tipos
diferentes de fontes deixaria bem claro que você ainda é um designer iniciante ou que você
não tem o menor senso de como trabalhar com fontes. Isso não trará uma boa impressão para
seus clientes de maneira alguma.

O mesmo se aplica ao uso de cores. Mantenha os seus textos o mínimo colorido possível, pois
o uso de muitas cores faz com que o visual se torne um parque de diversões – agradável de se
ver por alguns minutos, mas logo cansativo aos olhos. Duas cores diferentes é o suficiente na
maioria dos casos, além do que nós podemos trabalhar com duas cores básicas e várias
nuances das mesmas. Vermelho por exemplo, pode ser aplicado em 100% para nossos títulos
e 50% para sub-títulos e cabeçalhos.

Fontes do tipo cursive parecem agradáveis, mas se você a usa de maneira prolongada a leitura
poderá se tornar cansativa. O mesmo podemos dizer com as fontes em itálico. Esse recurso
deve ser usado apenas para textos curtos e talvez para Capitulares, para indicação de
fotografias e diagramas. Textos muito longos não devem ser formatados todos os parágrafos
com capitulares, porque ao faze-lo tornaria a leitura muito difícil.

Outro ponto muito usado é o texto em sua versão negativa. Muitos profissionais atualmente
usam esse recurso. Muitas vezes esse recurso se torna desconfortável se comparado ao texto
normal. Se desejamos usar esse recurso devemos nos assegurar que:
1] usamos uma fonte do tipo sans serif ( o tipo serif torna-se melhor visualizado se colocado
em um tamanho bem destacado, eu diria, no mínimo 24 pontos para uma página da web)
2] o tamanho da fonte é bem maior do que o corpo de texto normal.
3] nossa cópia não é tão longa
4] o fundo do texto contrasta de maneira suave e harmoniosa com a cor da fonte.

Provavelmente o pior crime cometido por um designer é colocar o texto sobre um fundo
cheio de detalhes que competem com as letras pela nossa atenção.

É uma boa idéia dar uma olhada em publicações já conceituadas tais como National
Geographic, Life, Seleções, Time, etc para que se tenha uma idéia de como dispor o nosso
conteúdo em uma página. Certamente, algumas destas técnicas não serão possíveis de se ter
em uma página da web, mas lhe darão boas idéias de como desenvolver o layout.
Part III
WEB SITE DESIGN

Eu pessoalmente já tive a experiência de navegar por sites pessoais onde eu tive que esperar,
e esperar e esperar para que a página inicial estivesse totalmente carregada. Há sempre
“marquees”, luzes piscando, applets Java mostrando todo o conteúdo imaginável, cupidos
voando e setas sendo atiradas em corações em movimento, fotos do proprietário do site, e até
mesmo de toda sua família e ascendência, desde o Homo erectus ou desde que o Mayflower
baixou âncoras no Cabo Bacalhau, músicas barulhentas, e infinitas. Na realidade, até mesmo
o fundo cheio de imagens repetitivas demorava uma eternidade até ser completamente
carregado.

Eu já estive também em alguns sites comerciais que pareciam carregar um fascículo inteiro
da Enciclopédia Britânica ou quem sabe um manuscrito de “E o vento Levou”, tudo
devidamente disposto na página de entrada. Caso já houvesse ou não carregado todo o
conteúdo do site no meu cache, o sistema de navegação deles me deixava à vontade para
adivinhar ou tentar outra alternativa.

O que eu fazia então? – Eu simplesmente clicava ou no botão de voltar, ou naquele pequeno

X no topo do canto direito do meu browser.

Moral da história: A nossa página inicial pode levantar ou derrubar o nosso site inteiro

Se você pretende que seus visitantes permaneçam no site e continuem navegando, esteja certo
de que sua primeira página prenda a atenção deles e aguce a sua curiosidade. Conforme ao
escrever, a regra KISSS (mantenha-o curto e doce, estúpido) se aplica aqui. Certamente sem
contar que todas as suas outras páginas também devem ser interessantes, ou no mínimo,
conter alguma informação que as pessoas desejem ler.

Lembre, que aquilo que para você pode ser um design espetacular, pode não ser para os
outros. Não porque você seja incapaz, mas porque você está imerso em seu trabalho você
poderá negligenciar certos itens pequenos, mas muito importantes. Ainda que a maioria de
nós costuma ter esse tipo de atitude, não se preocupe, escolha alguns amigos em quem você
confia para que eles dêem sua opinião sincera e honesta e façam uma crítica do seu site. Não
peça isso a sua namorada ou namorado, mãe, pai, irmã, irmão, esposa ou marido. Caso o seu
layout não esteja agradável, eles jamais diriam isso para você.

Você deseja então desenvolver web sites

Na minha opinião, os programadores deveriam ter um conhecimento básico de arte e design a

fim de que estivessem aptos a criar sites com um design mais atrativo, enquanto que
designers também deveriam ter um pouco de conhecimento de linguagem de programação.
Os designers não necessitam de fato terem domínio de linguagem de programação (melhor
que eles tenham). Saber um pouco sobre como funciona as diversas linguagens de
programação já é o suficiente. Suficiente para que eles saibam exatamente qual linguagem
usar, não apenas para que o design se torne mais atraente, mas para que o site sirva com mais
integridade ao objetivo para o qual foi desenvolvido. Ambos, programador e designer devem
conhecer mutuamente o suficiente sobre identidade visual. Novamente o que vem a ser isso?
Ah, uma pergunta interessante e nós a responderemos brevemente.

Web site pessoal

Muitos de nós iniciamos com o nosso web site pessoal ou o que comumente chamamos de
Home Page. (Eu prefiro usar o termo home page porque na realidade trata-se realmente da
primeira página de nosso site). Entretanto não devemos demorar muito na questão do design
de nosso web site pessoal, até mesmo porque a maior parte dos conceitos usados para a
criação de sites comerciais, também são aplicáveis nesse caso.

Obviamente existem dois tipos de web sites pessoais. Um é um veículo para que nós
meramente estejamos divulgando nossas informações pessoais com quem quer que seja que
deseje conhece-las. A outra é para nos promover de uma maneira suficiente que venhamos ter
recursos financeiros suficientes para não terminarmos em uma fila de sopa qualquer.

Trata-se-se meramente de divulgar nossas informações pessoais, e normalmente é, um layout

engraçado e informal é suficiente.

Se for para nos promover, deve ser então formal – porque provavelmente nós não desejamos
que nossos clientes pensem que somos frívolos, ou queremos? – e nesse caso usamos o
máximo da nossa habilidade. Depois de tudo, nossos clientes potenciais irão julgar nossa
habilidade baseado naquilo que eles estão vendo nos sites criados por nós.

Web site comercial

A menos que estejamos desenvolvendo um site para uma indústria de entretenimento, nosso
design deverá refletir seriedade, um tom de oficial de negócios. Entretanto isso não
significará páginas e mais páginas de entendiantes textos e imagens. Com o advento do
HTML, filmes em Flash, usando as cores, as formas e texturas de maneira inteligente, e um
bom design do layout, nós poderemos elaborar páginas bem feitas contendo uma grande
variedade de informações e de fácil visualização e leitura.

De que maneira começar

Elaborar um web site parece um pouco como construir uma casa ou projetar uma máquina.
Precisamos primeiro planejar o seu conteúdo e seu visual. A quantidade e quais textos
usaremos? Que tipo de imagens (diagramas e fotografias) serão usadas e quantas são? Quais
imagens ilustrarão ou acompanharão qual parte de qual texto? Usaremos tabelas, efeitos
sonoros, musicas, animações? Temos que lidar com esses itens de maneira sistemática para
que posteriormente seja mais fácil de distribuirmos o conteúdo do nosso site.

Havendo definido os itens mencionados acima, poderemos então prosseguir fazendo alguns
rascunhos rudimentares das páginas. Um bloco de notas e canetas coloridas serão necessárias.
No universo da propaganda, esses rascunhos são chamados de “scamps” (patifes – numa
tradução literal, correspondendo na linguagem coloquial brasileira aos “bonecos”) e nos
darão uma idéia de como o conteúdo do nosso site ficará.
 Coloque os “bonecos” sobre a mesa,
estude-os cuidadosamente, e faça um
julgamento imparcial do que necessita
ser removido, adicionado,
reposicionado ou substituído.

Quando você estiver satisfeito,

prossiga para o próximo passo. Agora
você deverá selecionar os gráficos que
você irá usar, comprimir e ajustar o
tamanho das fotografias a serem
usadas, escolher e editar os arquivos de
áudio, e produzir seus filmes.

Finalmente, começamos a desenvolver nossas páginas. Você irá perceber que necessita de
algumas alterações, mas provavelmente serão bem menores. O seu trabalho será bem mais
fácil e simples.

A palavra chave é planejar. Se falharmos ao planejar nosso site, necessitaremos a todo

momento reposicionar e refazer o layout. Isso acaba se traduzindo em tempo perdido, e se
nós estamos elaborando sites com objetivos comerciais, perderemos a oportunidade de
ganharmos dinheiro mais do que deveríamos, devido ao tempo gasto de maneira
desnecessária.

A aparência – preservando a identidade

Grandes corporações normalmente prestam muita atenção para a imagem que os sites
apresentam para o público. Elas valorizam a sua identidade visual tanto quanto preservam os
seus patrimônios materiais, e geralmente são muito exigentes em relação ao seu logotipo e
cores corporativas, sendo fiéis a um manual de identidade visual.

De que forma esses itens devem ser usados, geralmente vem especificado cada detalhe em
um documento chamado manual de identidade visual. (Incidentemente, em uma companhia
onde eu passei a maior parte da minha vida profissional e a qual estava entre as 10 mais
eleitas da revista Fortune 500, tão certo quanto eu possa me lembrar, o manual possuía 1½” /
4cm de espessura.) Como todo bom manual, geralmente traz um detalhe minucioso de
quantos milímetros a “logo” deve ficar posicionada no topo do canto esquerdo dos cartões de
visita (ou no canto direito) da companhia em questão, que tipo de fonte e tamanho deverão
ser usados na confecção de material impresso tais como papel timbrado, folders, catálogos e
etc, bem como a profundidade largura, cores corporativas a serem usados na sinalização
interna ou em seus veículos.

Geralmente estas entidades comerciais possuem um Departamento de Relações Públicas para

tratar questões concernentes ao aspecto não visual em questões publicitárias, e talvez um
departamento menor ou mesmo um funcionário que seja responsável pela imagem que se
deseja projetar ao público em geral. Regra número um, então, ao projetar um web site
comercial, devemos nos assegurar de que estamos usando o logo (ou logotipo) da maneira
apropriada especificada nos manuais de identidade visual.
Regra número dois: usar definitivamente o logo e as cores corporativas dos nossos clientes,
ou criar um dispositivo similar, para criar um design unificado e de fácil identificação em
cada página. Esse recurso permitirá criar um ambiente agradável proporcionando assim uma
experiência de navegação agradável para os nossos visitantes. Naturalmente, nenhum destes
itens deverá dominar todo o layout. Por exemplo, em um projeto com resolução de 1024x768,
o tamanho do logo, caso apareça mais de uma vez deveria ser de no máximo 4.000 pontos de
pixels. Neste ponto, devemos tomar cuidado com uma imagem que meça, por exemplo,
60x60px, porque a mesma aparecerá muito maior em uma resolução de 800x600 do que em
uma resolução de 1024x768.

O que é um dispositivo mnemônico? Trata-se de um determinado

gráfico que é representativo ou estilizado e serve para nos lembrar
que estamos olhando para um material resumido que pertence a uma
unidade corporativa. No caso de não ter noção do que significa
imagens representativas e estilizadas, deixe-me explicar que a
imagem original é realística enquanto que a representativa é apenas
um mero esboço ou rascunho do que se deseja simbolizar. A imagem
a esquerda é um desenho estilizado.

Escolha do tipo de site

O que de fato pretendemos, um site completo desenvolvido em Flash ou usando a linguagem

html? Se formos ainda iniciantes, provavelmente seria mais indicado desenvolvermos um site
baseado na linguagem html. Além disso, fazer com que se torne fácil para que os
instrumentos de buscas (sites de busca), encontrar nossas páginas (desde que coloquemos as
palavras chaves corretas) esse tipo de site também representa menos tempo gasto quando se
tratar de efetuarmos revisões. Um site em html que contém filmes em Flash pode ser muito
mais atrativo, dependerá apenas do design e desenvolvimento do mesmo.

*Palavras chave são colocadas no cabeçalho do nosso script em html. As palavras deverão ser aquelas as quais
os internautas provavelmente digitariam em um campo de busca quando estivessem procurando por um site com
a mesma classificação que o nosso. São colocadas entre símbolos. Abaixo você poderá ver um exemplo típico.
<meta name="PALAVRACHAVE" content="animações em flash turoriais de swish sons edição de imagens
rasterizadas e vetorizadas">

O que precisamos

Se o nosso desejo é desenvolver um layout profissional, teremos que ter vários tipos de
programas além do Swish. Por exemplo, é recomendável que se tenha mais do que o
Photoshop como editor de imagens. Ainda em tempo, Photoshop edita imagens rasterizadas,
e precisamos de algum outro programa que edite imagens vetoriais. Pessoalmente eu prefiro o
Adobe Illustrator, o qual uso para criar a maioria dos meus gráficos ou modificar letras e
exporta-las no formato “swf” para que sejam inseridas no meu arquivo “swi”. Essas imagens
se tornam editáveis dentro dos filmes que criamos também.

Além de editores de imagem, será necessário que tenhamos um editor de sons. Como todo
tipo de programa existe uma gama infinita deles no mercado. Escolha algum que esteja
dentro de suas condições financeira e que seja também popular. Lembre-se, embora, esses
programas não sejam baratos, nada que é barato é bom.
Estas são as ferramentas básicas. Conforme prosseguimos e ganhamos experiência,
poderemos optar por outros programas como aqueles usados para animações em 3D, sons, e
para a conversão de diferentes tipos de formatos.

Enquanto estamos ainda tratando deste assunto, por favor, tenha cuidado em relação alguns
editores de html, porque os mesmos têm o péssimo hábito de removerem códigos que não são
reconhecidos pelos mesmos, mesmo que os códigos estejam corretos. Seria talvez uma boa
idéia se pudesse aprender a lidar com os códigos da sua página para edita-los caso
eventualmente seja necessário. Para informação geral, dê uma busca sobre XML e SGML na
internet. Trata-se de extensões para o html.

Navegação

Obviamente, o propósito de inserir um menu na página é de dispor ao visitante o conteúdo do

nosso site. Ao clicarem em qualquer dos itens do menu, serão direcionados a uma nova
página que contém mais informações sobre aquele determinado assunto, podendo também ao
ser clicado, abrir um novo sub-menu contendo novos itens concernentes àquele.
Naturalmente, então, nossos links devem estar absolutamente corretos (ou nossos visitantes
serão direcionados para páginas erradas), e os itens dos sub-menus devem estar dispostos em
seus grupos exatos.

Então antes de anunciarmos publicamente a existência do nosso site, é melhor testarmos

primeiro. Depois que estivermos satisfeitos de que tudo está funcionando bem, é
recomendável que uma ou duas pessoas também dêem suas opiniões.

Incidentemente, existe um site especializado em testar os links de nossos sites. É uma boa
idéia fazer uma consulta neste momento e depois. Faça uma busca em sites populares tais
como o Google, por tal site.

Animação

Animações ajudam a dar um visual mais interessante nas páginas, mas nunca exagere, pois os
visitantes podem ficar exaustos. Devemos limitar as animações para não distrair nossos
visitantes do conteúdo que é o mais importante, e também para não irritá-los. É óbvio que no
caso da animação ser o único conteúdo então esta parte é irrelevante.

Medida em bytes

Aparentemente, algumas pessoas ainda insistem que as páginas não devem ultrapassar o
tamanho de 45Kb. Eu tenho quase certeza que essa regra foi introduzida quando a maioria
dispunha de conexão dial up em um modem de 14.4K. Atualmente com conexões bem mais
velozes e banda larga com acesso mais facilitado, talvez fosse melhor incrementar esse
tamanho para no mínimo 100Kb. Tenha em mente, que a página inicial deverá ser o menor
(sabedoria em bytes) possível sem comprometer todo o esquema.

Caso tenhamos uma página inicial relativamente grande (em bytes), por exemplo, devido à
música que usamos em um determinado filme, talvez devêssemos acrescentar um carregador
(recurso visual que retém a atenção do visitante durante o tempo em que o filme é carregado
no cache). Por falar nisso é uma atitude delicada e educada se colocarmos no carregador o
tamanho do filme que está para ser visualizado. Não queremos frustrar o visitante sem deixar
que ele tenha o conhecimento exato de quanto tempo ele ainda deverá aguardar, pois do
contrário após alguns minutos o mesmo provavelmente irá clicar no botão de voltar, enquanto
que as vezes restava apenas 1 ou 2 segundos para serem carregados.

Você deseja agradar a todos

Agradar a todos – este é o principal alvo do designer ao desenvolver web sites – é uma idéia
muito agradável se você puder segui-la. Se você realmente deseja faze-lo, deverá
primeiramente descobrir as limitações e idiossincrasias dos diversos tipos de browsers que
podemos encontrar hoje na Internet, então fazermos layouts com linguagens diferentes para
cada página. Ou faça apenas um layout que se encaixe nas especificações de todos os tipos de
browsers. Se você optar pela primeira opção, eu desejo boa sorte – porque, na minha opinião,
você acabará desenvolvendo um site enfadonho. Entretanto parece que mais de 95% dos
usuários de computadores preferem o Internet Explorer.

Design de logos e algumas considerações

Em algum ponto da sua carreira, os clientes lhe pedirão que desenvolva uma logo ou que
desenvolva algum tipo de slogan. Eu estou incluindo estes itens neste “guia” porque já
observei diversos logos mal confeccionados e fáceis de serem esquecidas e também muitas
frases ineficiente e infantis associadas à imagem corporativa.

Logo

De que maneira confeccionamos uma logo?

Devemos nos lembrar que uma logo é o alter-ego de uma entidade. Geralmente vemos uma
empresa associada à imagem de seu logo. Vamos mencionar, por exemplo, IBM, e
automaticamente já visualizamos aquele acrônimo renderizado em azul com hélices brancas a
correr horizontalmente através dele. Mencionamos Ferrari, e visualizamos um cavalo
empinado. A lista continua...

Se escolhermos criar um gráfico para o logo que estamos elaborando, então a imagem deverá
ter relação com o logo, ainda que de uma maneira simples e abstrata, para aquilo que a
companhia desenvolve, sua estrutura, ou seu fundador. Por exemplo, Ford no logotipo da
Ford. A maioria, senão todos, sabemos exatamente quem foi o sr.
Henry Ford. Outro exemplo é o gigante conglomerado britânico-
holandês Royal Dutch-Shell Group, o qual tem uma concha em
seu logo. Isso se dá porque o seu fundador, sr. Marcus Samuel,
iniciou o seu negócio importando e comercializando conchas do mar. Ele resolveu
casualmente investir em óleo e o resto todos nós já sabemos. Durante a era Vitoriana, as
conchas eram muito caras na Inglaterra e em algumas partes da Europa, por se tornarem
ornamentos, caixas de jóia, botões e escovas de cabelo. Hoje em dia aquele pictograma é
reconhecido em pelo menos uns 200 países ao redor do mundo. A Logo da Volkswagen é tão
simples quanto o carro era originariamente por ser o carro popular (Volkswagen), um veículo
utilitário das massas. Tudo o que temos aqui é uma letra “V” apoiada sobre uma letra “W”
ambas dentro de um círculo. É muito fácil de se lembrar. Uma maçã comida em parte é o
sinônimo do Macintosh do Steve Job’s.
 Um logo deve ser simples e única de maneira
que permaneça fixa em nossa memória após
uma ou duas visualizações.

Um logo deverá ser agradável de se

visualizar tanto em um tamanho reduzido
como em um cartão de visitas como em
enormes proporções no alto de um prédio ou
em sua fachada.
.
Para auxiliar na redução dos custos com
impressões, o logo não deverá possuir muitas
cores. Uma cor é o ideal; duas cores é o mais comum; três cores não é recomendável; quatro
é, bem se o cliente não estiver preocupado com os custos, então que seja.

Note como estas bem conhecidas corporações tendem a ter um logo simples de fácil
memorização, enquanto que obscuras, dez entre doze companhias possuem logos complexas
e de difícil assimilação. Isso nos ensina muito.

Frases de efeito

Você provavelmente não será requisitado a criar algum slogan ou frase de efeito, caso o seu
cliente seja uma grande corporação, porque essas empresas geralmente possuem um contrato
com agências de publicidade. Você só será requisitado a faze-lo caso o seu cliente seja de
pequeno ou médio porte. O que é uma frase de efeito?

Uma frase de efeito é uma breve frase colocada abaixo do logo da empresa ou do logotipo.
Ou em alguns casos diretamente ligada ao nome da empresa. Nike’s Just Do It é um exemplo.
Uma frase simples, certo? Você também poderá criar alguma frase bem poderosa para o seu
cliente certo? Hmmmm... Se eu fosse você, pensaria muito cautelosamente a respeito disso.

Ao mesmo tempo em que não devemos subestimar nossa capacidade, também não devemos
nos supervalorizarmos. Muito embora haja alguns poucos de nós que conseguem escrever tão
bem quanto são designers, não se trata da maioria. Estaremos prontos para criar designs
premiados, mas isso não significa necessariamente que estamos aptos para a mídia escrita.
Ainda que possa lhe parecer estranho, até mesmo pessoas cuja língua de origem é inglesa e
possui mestrado no idioma por algum motivo pode não estar apta a escrever textos em sua
própria língua. Provavelmente a maioria possa escrever um pouco sem que sejam feitas
grandes exigências gramaticais e idiomáticas. Entretanto muitos se perdem quando se trata de
textos especializados e técnicos. Mesmo Bacharéis ou formandos de Universidades podem
tranformar em cópias que deixaria qualquer um apreensivo, textos de rádio, filmes ou até
mesmo bestsellers!

Escrever frases de efeito e slogans exige que se tenha muita experiência em escrever.
Redatores em agências respeitáveis são as pessoas mais qualificadas para desenvolverem esse
tipo de trabalho. Eles são treinados a usar as palavras certas para indicar determinadas coisas,
de maneira precisa e mais curta possível. Eles podem pintar milhares de imagens com uma
única palavra. Então, diga a um redator o que você realmente deseja, faça-o sorrir com
alguma boa proposta. Valerá mais a pena, eu posso lhe assegurar.
Conclusão – Aumentando o seu valor

Saber muito sobre algo e algo sobre muito também é um dos segredos do sucesso.

Como um aspirante a designer ou desenvolvedor profissional de web sites, você deverá

aumentar seu valor. É bom que leia bastantes publicações (pelo menos as relacionadas a
Tecnologia da Informação), tanto quanto seja possível, e aprenda um pouco sobre cada coisa.
Faça isso e você estará apto para valorizar mais seu trabalho – porque poderá oferecer mais a
seus clientes. Lembre-se, isto não significa necessariamente que você terá que executar algum
trabalho físico por si só. Vamos observar um exemplo do que eu quero dizer. Um cliente tem
algo a ser publicado e impresso, mas nunca ouviu falar sobre separação de cores e não está
nem aí para o que significa litografia. Você sim. Ele ficará impressionado, e pedirá que você
desenvolva este trabalho pra ele. Tudo o que você terá que fazer é orientar a impressão,
definir as separações de cores. Quando o trabalho estiver faturado, empacotado e entregue,
você o presenteia com uma encadernação. Algumas semanas mais tarde, o caixa do seu banco
te sorri novamente.

Outra coisa a ser fixada é que os nossos clientes geralmente preferem lidar com o menor
número de pessoas que for possível, por isso a grana, o larjã, o dinheiro que iria geralmente
para a Mary, Jane, Sally, Tom, Dick e Harry irá para você ao invés disso.

Boa Sorte! Que trabalho em cima de trabalho possa vir para você, que o farão rir de alegria, e
também ao seu gerente. Quando, - não se, mas quando, ok? – se isso acontecer, me paga uma
xícara de café, pode ser? ☺