outubro 2004 :: ano1 :: nº10 :: www.arteccom.com.

br/webdesign

outubro 2004 :: ano1 :: nº10 :: www.arteccom.com.br/webdesign by

e d i t o r a R$ 6,90

arteccom

CORES
da teoria à aplicação na web

debate: entrevista: estudo de caso: e-mais:

cor - instinto Bruno Porto Melissa comece a planejar
Webdesign

ou técnica? Dicas para você se aperfeiçoar em a empresa comemora sua campanha

Norton Amato, diretor de
criação da Anydesign,
explica como o bom uso das
cores facilita a usabilidade
e melhora a experiência
de consumo
composições cromáticas: “estude
psicologia, sociologia e ergonomia
e entenda como o Homem se
relaciona com seu meio”
25 anos com muita cor, de Natal!
estilo e mostra como “já foi o tempo em que quantidade
conquistou o público de visitantes era necessariamente
internauta sinônimo de sucesso” Marcelo
Albagi, Canvas

sites eleitorais
a Webdesign
Marcela entrou
Catunda no aclima
ensina lidardas
comeleições
spams e mostra oscom
bastidores dashumor!
muito bom campanhas online
direitos autorais
3
 Equipe

Editorial
quem somos

Direção Geral
Um pinguinho de prosa... Adriana Melo
adriana@arteccom.com.br
Direção de Arte
Lembro quando cursava o terceiro ano da faculdade, minha grande Patrícia Maia
patricia@arteccom.com.br
professora Eliane Jobim pediu para criarmos um cartaz. E não falou mais
Ilustração
nada. Pairava a dúvida no ar: por onde começar??? Acho que ela discuti- Beto Vieira
beto@arteccom.com.br
ria depois nossas “tentativas”. Tudo bem... fiquei lá... na minha solidão...
Diagramação
éramos eu e o papel... o papel e eu... Bruna Werneck
bruna@arteccom.com.br
Hoje recebo alguns emails assim: não sei por onde começar quan-
Direção de Redação
do preciso criar um site... escolher as cores... Bem, graças ao meu Bete Veiga

:: A Arteccom não se responsabiliza por informações e opiniões contidas nos artigos assinados, bem como pelo teor dos anúncios publicitários. :: Não é permitida a reprodução de textos ou imagens sem autorização da editora.
bete@arteccom.com.br
“trauma”, sinto-me solidária no dever de ajudá-los a encontrar uma “luz
Redação
no fim do túnel”. André Philippe Iunes
andre@arteccom.com.br
Eu, particularmente, começo pelo conceito, ou seja, a idéia que preciso
Publicidade
transmitir. Faço um brainstorming para dar asas à imaginação e chegar a uma Daniele Moura
daniele@arteccom.com.br
imagem que transmita a idéia de forma sutil, divertida ou direta, enfim, uma
Assinaturas
imagem com a qual meu público-alvo se identifique. Depois, utilizo outros ele- Jane Costa
jane@arteccom.com.br
mentos gráficos, como a tipografia e as CORES para fortalecerem o concei-
Gerência de Tecnologia
to. As cores transmitem sensações de acordo com experiências passadas Fabio Pinheiro
fabio@arteccom.com.br
que tivemos com elas. Então, basta definir que sensação queremos transmitir
Webdeveloping
com a peça gráfica e utilizar as cores que nos levem a este sentimento... Ou Eric Nascimento
eric@arteccom.com.br
seja, fique atento à sua própria SENSIBILIDADE.
Financeiro
“Se um pinguinho de tinta cai num pedacinho azul de papel... num Luana Rocha
luana@arteccom.com.br
instante imagino uma linda gaivota voar no céu.”

Colaboração: Redação - Vanessa Barbosa

Mas como vocês sempre querem (e devem) saber mais, mais e mais... Criação e edição
www.arteccom.com.br
recolhemos opiniões de vários profissionais e algumas regrinhas para se-
rem seguidas (ou não). Divirtam-se! Patrocínio
www.locaweb.com.br
Um beijo!
Produção gráfica
www.ediouro.com.br/grafica

Adriana Melo. Distribuição

www.chinaglia.com.br

4
 menu
apresentação
pág. 4 quem somos
pág. 5 menu

contato
pág. 6 emails
pág. 6 fale conosco

fique por dentro

pág. 8 direito na web
pág. 9 adote esta página
pág. 10 clipping

portfólio
pág. 13 veterano: Ability
pág. 17 calouro: Sauvage

matéria de capa
pág. 18 entrevista: Bruno Porto
pág. 24 da arte à ciência
pág. 33 debate: instinto ou técnica?

e-mais
pág. 37 estudo de caso: Melissa
pág. 41 prepare-se para o natal
pág. 46 sites eleitorais
pág. 52 tutorial: scripts em várias
linguagens

com a palavra
pág. 56 estratégia online: Marcello Póvoa
pág. 58 webwriting: Marcela Catunda
pág. 60 marketing: René de Paula Jr.
pág. 62 experience design: Claudio Toyama
pág. 64 webdesign: Luli Radfahrer

5
emails
Assunto: Edições passadas
Excelente a funcionalidade do
site da revista, digo isso
especialmente me referindo
à ferramenta que possibilita
a compra de edições
passadas de forma avulsa.
Tenho uma agência de
comunicação em POA-RS, e,
enfim, encontramos uma
revista que abrangesse a
questão do projeto de web
sites dentro de um composto
de comunicação onde se
comportaria como uma
ferramenta própria,
avançada, estudada,
funcional e dirigida, assim
como se encaixam da mesma
forma veículos como tv, rádio
etc. Parabéns.
Diego Nogueira
diegonog@sinos.net
Oi Diego. Pois é... nosso intuito é
que web sites sejam vistos como
bons investimentos e não como custo
para as empresas. Para isso, nós,
profissionais, precisamos cada vez
caprichar mais no desenvolvimento
dos mesmos para provarmos que
realmente dá resultados, se bem
planejado.
Assunto: Edições passadas
Cara, que legal, vocês
respondem um a um os
emails! Adorei a resposta
personalizada! Obrigado pela
:: Os emails são apresentados resumidamente. :: Sugestões dadas através dos emails enviados à revista passam a ser de propriedade da Arteccom.
6
dica... Quando meu portfolio
estiver pronto, mandarei pra
vocês... E novamente
parabéns pelo trabalho!
Como faço pra receber as
duas primeiras edições???
Valeu!!! Até mais.”
José Rezek
jose.designer@ig.com.br
Oi José! Mas é claro que respondemos
um a um... afinal é este o maior
diferencial da internet para outras
mídias: a interatividade! Para
adquirir edições anteriores, acesse:
www.arteccom.com.br/webdesign
Assunto: Link super úteis
Olá! Sinto falta de um tópico
na revista: uma seção com
links de sites com banco de
imagens, sons etc. para
utilizarmos em nossos sites.
Bom, para mim, é a única
coisa que falta para a nossa
revista (posso chamar
assim?!?) ficar completíssima.
Abraços de um leitor fiel.
René Pinheiro
rene@renepinheiro.com
Querido René: visite
www.bananadesign.com.br. Lá você
encontra vários links super úteis com
este conteúdo. E, espero que se torne
um membro de NOSSO site
também ;-)
Assunto: Publicidade
Como leitor, sugiro a
vocês um artigo sobre
publicidade, como fazê-
la, troca de banners etc...
Rudá Gonçalves
ruda_g@hotmail.com
Olá Rudá! Na edição 2 (capa rosa)
“Como atrair clientes para seu site”
falamos sobre este tema, troca de
banners etc. Futuramente podemos
aprofundá-lo, absorvendo sua
sugestão. Obrigada!
Assunto: Webdesign Obrigada pela dica, Nádia. Iremos
contagiosa incluir este tema em nossa próxima
edição, de novembro, que trata de
Webdesign contagiosa!!! Foi
usabilidade, ok? É só aguardar.
isso que eu constatei quando
levei minha Webdesign pra
faculdade. Como faço curso
de Projetos em Web Design,
meu colegas ficam loucos
quando vêem a minha... Tem
plano especial de assinatura
pra minha sala? Todos
querem!
Fernanda Prevedello
fernandawebdesigner@yahoo.com.br
Oi Fernanda! Como fiquei feliz com
seu email. Você não pode imaginar
10
como foi gratificante recebê-lo! A
Jane vai entrar em contato com
você, ok?
Assunto: Arquitetura de
informação
Assunto: Viu, Catunda???
Adquiri meu primeiro Oi Adriana.
exemplar da revista Parabéns por continuarem
Webdesign no mês de agosto melhorando a cada edição.
e faço questão de expressar Na revista número 8 gostei
minha satisfação pelo
muito da matéria sobre como
produto de qualidade por abrir uma agência web e
o site
vocês apresentado. Os como medir o retorno.
profissionais careciam de um Gostaria, se possível, que
referencial para seus vocês colocassem na revista
trabalhos e agora podemos ou num site, um modelo de
encontrar um excelente briefing, isso ajudaria a
embasamento teórico nesta todos nós da área. Ah! E a
revista. Catunda é nota 10. A
Aproveito a oportunidade primeira matéria que leio
para sugerir um tema: quando compro a revista é
‘Arquitetura de Informação’. sempre a dela.
Desejo conhecer a forma Sucesso!
correta de lidar com o Fábio Russo
fabiorusso@8arroba.com.br
conteúdo de um site, critérios
Bem, Fábio, já enviei um modelinho
hierárquicos, dentre outros
de briefing por email para você. Pois
fundamentos para concluir
é, a Catunda está fazendo muito
uma distribuição ordenada do
sucesso... você não imagina o quanto
conteúdo de um projeto web.
foi difícil convencê-la a escrever, ela
Atenciosamente,
é muito humilde, mas uma super
Nádia Devigilli
contato@nadiawebdesigner.com profissional, divertida e inteligente!
fale conosco pelo site www.arteccom.com.br/webdesign
orme publicitário informe publicitário informe publicitário informe publicitário
Atualização de sites e intranets:
o eterno dilema
Trabalho burocrático atola equipes de criação e desenvolvimento; programa
democratiza inserção de conteúdo sem pôr em risco o layout da página
A internet é, hoje, a extensão eletrônica de uma empresa.
É nela que encontramos informações sobre produtos, serviços,
áreas de atuação e de abrangência geográfica e preços. Apesar
da evolução do mundo digital, a grande dificuldade das compa-
nhias na internet ainda é atualizar e gerenciar seu conteúdo com
rapidez e eficiência.
O principal motivo é a sobrecarga de trabalho dos
webmasters. Esses profissionais altamente especializados gastam
cerca de metade de seu tempo com atualizações simples nas páginas
do site ou da intranet. Como o conteúdo informativo é produzido por
profissionais sem conhecimento da linguagem técnica, as equipes de
desenvolvimento e criação ficam atoladas no trabalho mecânico de
atualização e perdem um tempo precioso, que poderia ser utilizado
no que fazem melhor: criar e desenvolver.
Atualizações constantes são extremamente importantes,
mas não agregam valor aos projetos dos webmasters. É muito
mais produtivo para a empresa e para os clientes que a experi-
ência desses profissionais seja inteiramente dedicada à criação
de novas funcionalidades, áreas ou templates do site, em vez de
desperdiçada em desgastantes idas e vindas de arquivos e tabe-
las produzidos por usuários que poderiam ser eles mesmos res-
ponsáveis pela atualização do conteúdo na página.
Faz parte do importante papel dos webmasters zelar pela
integridade do site. Eles só podem delegar as tarefas de atuali-
zação se houver garantia de que layouts e funcionalidades serão
preservados. É para resolver definitivamente esse problema que
a Macromedia lançou a terceira versão do Contribute, software
para atualização de páginas e conteúdo que vem se popularizan-
do por facilitar o árduo trabalho dos webmasters.
Com ele, toda a atualização é feita por usuários não-técnicos
sem que o código ou layout possa ser modificado. Tudo acontece
num ambiente semelhante ao browser, no qual os produtores de
conteúdo inserem as informações e os demais elementos (imagens,
sons, vídeo etc.) sem o risco de danificar o trabalho prévio de desen-
volvimento da página. Com a solução, os webmasters decidem o que
pode ser editado e quem vai publicar, graças a um novo sistema de
aprovação e administração, que permite o gerenciamento de cone-
xões, rastreamento, senhas e privilégios de usuários.
Outro ponto forte da tecnologia é a inclusão do recurso
Flash Paper 2, que permite a conversão, com um só clique, de
qualquer arquivo passível de impressão para o formato Flash.
Sua grande vantagem é que os documentos ficam disponíveis na
própria página, ou seja, é um elemento de design mais leve e fle-
xível que abre em qualquer navegador em menos de um segundo,
além de executar no plug-in do Flash Player.
Sucesso comprovado
A adoção do Contribute pela Universidade do Oeste de
Santa Catarina (Unoesc), por exemplo, foi responsável pela redu-
ção de 20% nos custos de TI relacionados ao desenvolvimento e
de 32% em mão de obra, afirma Lindamir Secchi Gadler, coorde-
nadora de TI da universidade. “A solução agilizou significativa-
mente as atividades de atualização na Internet”, explicou ela.
Outro exemplo bem-sucedido é o portal do Departamento de Ser-
viços à Criança e à Família do município norte-americano de Ala-
meda (www.acgov.org), que usa a ferramenta para manter seu
Guia Prático Online. “Agora usuários não-técnicos passaram a
atualizar sem que o código ou layout seja modificado, o que ge-
rou uma economia de US$ 250 mil dólares só no primeiro ano”,
destacou Jim Damien, diretor de TI do departamento.
Para baixar uma versão de teste gratuita do
Contribute 3 e obter mais informações, acesse:
http://www.macromedia.com/software/contribute.
7
direito na web

Autor-funcionário
Oi! Acabei de comprar a revista e vi a novidade da seção de direito na web. Muito
boa idéia essa! Eu mesmo, há um certo tempo, estou com uma dúvida. Trabalho no
suporte (help desk) de uma empresa de médio porte. O sócio da empresa quando
ficou sabendo que eu desenvolvia sites, me pediu que eu criasse um para a empre-
sa. Outros dois técnicos me ajudaram na criação, mas eu fiz a maior parte do
trabalho. Quem tem o direito autoral sobre o site?
Leandro Albuquerque, leandroalbul@hotmail.com

A pergunta do leitor é relativa à contratual a respeito, pertence ao organizador

Marianna Furtado é advogada
com pós-graduação em Direito
da Propriedade Intelectual
pela PUC-Rio. Atualmente,
pertence à equipe do escritório
Montaury Pimenta, Machado &
Lioce Advogados.
Envie sua dúvida para:
marianna@montaury.com.br
titularidade dos direitos autorais da obra re-
alizada sob encomenda, contrato de trabalho
ou prestação de serviços. Como você não
detalhou as condições estipuladas para a cri-
ação do site, vamos falar sobre as formas
mais comuns de contratação de serviços para
a criação de uma obra.
Se a criação da obra é solicitada a uma
ou mais pessoas físicas, através de contrato
de trabalho ou prestação de serviços, deve
ser respeitada a regra de que os direitos au-
torais morais e patrimoniais pertencem exclu-
sivamente às pessoas físicas criadoras da
obra, salvo se houver estipulação contratual
em contrário (nesse caso, referente apenas
aos direitos patrimoniais, uma vez que os di-
reitos morais sempre ficam com os criadores).
Já quando a pessoa física ou jurídica é
quem toma a iniciativa da organização do
processo criativo do site, contratando como
empregados ou prestadores de serviços,
diversas pessoas físicas para a criação da
obra, a titularidade dos direitos patrimoniais,
ainda que não haja qualquer estipulação
da obra.
Caso a obra seja solicitada, mediante
contrato de prestação de serviços, a uma
pessoa física ou jurídica, que se responsabili-
za pela organização do processo criativo, en-
volvendo a participação de diversos autores
(obra coletiva), a titularidade dos direitos
patrimoniais pertencerá ao organizador da
obra. Somente através de estipulação
contratual o solicitante da obra poderá vir a
deter a titularidade dos direitos patrimoniais
sobre o conjunto da obra.
É importante esclarecer que em todos
esses casos, o direito sob discussão é o
patrimonial, já que o moral permanecerá
sempre com a(s) pessoa(s) física(s) cria-
dora(s) da obra.

8
 adote esta página
adotou esta página

“Que cada indivíduo procure auxiliar os

A Fábrica Digital desenvolveu o
interesses alheios e não somente os software Publique! para que

seus próprios interesses” Filipenses Webdesigners criem sites

dinâmicos, visualmente
arrojados, sem necessidade de
Adotando esta página, a Fábrica Digital contribuiu com R$ 600,00 para a programação. Devido à esta
manutenção do projeto Mage-Malien – Crianças que Brilham, beneficiando facilidade, o Publique! já é o
integralmente crianças e jovens de comunidades menos favorecidas. O projeto possibilita o gerenciador de conteúdo mais
acesso de crianças ao universo da educação, da arte e da cultura através de cursos e oficinas ministrados utilizado no Brasil, em sites e
gratuitamente pela equipe Beriba-Rei Capoeira. Ocupando de maneira sadia suas horas de lazer, os jovens intranets de organizações de
aprendem o exercício pleno da cidadania. todos os portes. Visite nosso site
A Arteccom acredita na construção de um futuro melhor e agradece este gesto de solidariedade! www.fabricadigital.com.br e
torne-se também nosso parceiro.
Você também pode ajudar a manter o brilho dessas crianças: ligue para (21) 2253-0596 ou
Contatos:
envie um email para arteccom@arteccom.com.br e adote esta página! atendimento@fabricadigital.com.br
Para conhecer o projeto Magê-Malien, visite o site www.arteccom.com.br/magemalien. Tel. (21) 2548-7877

9
clipping

Estudantes Cientistas quebram recorde de velocidade com

constroem Internet2
lavadora Cientistas do Caltech (Instituto de Tecnologia da Califórnia) e do
falante Cern (Organização Européia para Pesquisa Nuclear) quebraram um

Estudantes de novo recorde de velocidade com a Internet2, a segunda geração de

engenharia da redes de computadores mundial.

Universidade de Por essa rede, atualmente disponível apenas para universidades e

Michigan, nos Estados institutos de pesquisa, os cientistas conseguiram transmitir 859 GB de

Unidos, construíram dados em menos de 17 minutos, uma velocidade de 6,63 Gbps

uma máquina de (gigabits por segundo). A distância entre as duas instituições é de

lavar que fala. A mais de 17 mil km. Com essa velocidade, é possível transmitir o

invenção foi fruto de um equivalente a um DVD inteiro em quatro segundos.

desafio proposto pelo professor

Erik Goodman a seus alunos, com o objetivo de
beneficiar portadores de deficiência visual.
A lavadora falante está sendo testada pelo casal de cegos Michael
e Carla Hudson. Michael, diretor do centro de recursos para
deficientes físicos da universidade, diz que sua esposa ficou
maravilhada com a invenção.
(01)
(02)
Falha Nossa
Na edição nº 9, na seção Debate, os sites dos participantes Laert
Yamazaki e Adílson Batista sairam errados. Quem quiser conhecer
mais sobre eles, os endereços corretos são, respectivamente,
<www.ideia3.com.br> e <www.tesla.com.br>.

Hotmail e outros nomes da web estão no Guinness Brasil é a “capital dos hackers”
O Hotmail aparece na edição 2005 do Guinness, o Livro dos Recordes, como o maior O Brasil se tornou a capital mundial dos
provedor mundial da rede – em fevereiro, quando o levantamento foi fechado, o hackers e da fraude na internet, segundo
serviço da Microsoft tinha 170 milhões de contas ativas. especialistas reunidos em Brasília para a
A edição 2005 do Guinness, que será lançada no país em novembro, traz várias primeira conferência internacional de
curiosidades do mundo da tecnologia e da internet. Por exemplo: o país com o maior combate ao crime eletrônico.
número de internautas é os Estados Unidos (eram 159 milhões ao final de 2002), De acordo com dados apresentados pela
mas o país com maior penetração de web é a Suécia, com 554,18 internautas para Polícia Federal no evento, o Brasil é a casa
cada mil habitantes. de oito a cada dez hackers no mundo.

(03) (04)

II Semana RIOfazDESIGN
Acontece na Fecomércio/Senac, entre os dias 4 e 12 de novembro, a II Semana
RIOfazDESIGN. O evento premiará, com o Selo RIOfazDESIGN 2004,
empresas e instituições do Estado do Rio de Janeiro que mais vêm investindo
em design. Será realizada também uma exposição com os trabalhos das
entidades ganhadoras do selo, bem como os dos vencedores do concurso
RIOnovosDESIGNERS. A Fecomércio/Senac fica na Rua Marquês de
Abrantes 99, Flamengo, Rio de Janeiro. Mais informações pelo e-mail
riofazdesign@centrodesignrio.com.br ou no site
<www.centrodesignrio.com.br/riofazdesign>.

(04)

10
 clipping
Shakespeare ressurge na Yahoo! compra a Musicmatch por US$ 160 milhões
internet O portal de internet americano Yahoo! anunciou a compra da empresa Musicmatch,

A Biblioteca Britânica está disponibilizando especializada na tecnologia de distribuição digital de música, por US$ 160 milhões. A

online 93 cópias de 21 peças do dramaturgo compra permitirá ao Yahoo! alcançar quase 23 milhões de consumidores, contra 12,9

inglês, que foram impressas ainda durante sua milhões atualmente.

vida. Criada em 1997, a Musicmatch é considerada uma pioneira da tecnologia de

Essas edições individuais mostram como os administração de música digital. Seus ativos incluem a Musicmatch Radio, a

textos de Shakespeare sofreram Musicmatch Music Store, o software Musicmatch Jukebox, que permite aos

alterações piratas e usuários baixar, escutar e gravar música pela internet, e a Musicmatch on

lançam dúvidas sobre a Demand, um serviço de assinatura que permite o download de mais de

idéia de “versões 700 mi l músicas em qualquer computador, assim como o envio dos

definitivas” de sua obra. arquivos para outra pessoa de maneira legal. (07)
No site dedicado às
raridades Banana Design:
shakespearianas, é novas seções, Robô come moscas para
possível comparar
mais conteúdo gerar energia
textos publicados em
O Banana Design, site Cientistas britânicos estão desenvolvendo
diferentes periodos,
de conteúdo um robô que irá comer moscas para gerar
como o Hamlet de 1603
especializado em sua própria energia.
e o de 1611.
design e programação A idéia é que os insetos capturados pelo

(05) para a web, está EcoBot 2 sejam digeridos em um

lançando a seção compartimento especial, que irá quebrar

Homem usa internet Tutorial, com um guia de moléculas de açúcar do exoesqueleto do

e satélite para seguir ex-namorada
Um homem foi preso nos Estados Unidos por usar
um sistema de GPS, de rastreamento por satélite,
para perseguir sua ex-namorada.
Ara Gabrielyan supostamente conectou um celular
e um aparelho GPS ao carro da ex-namorada para
rastrear os movimentos dela. A ex-namorada, que
não foi identificada, começou a suspeitar de
Gabrielyan quando ele começou a aparecer
repentinamente em vários lugares.
As suspeitas foram confirmadas quando ela pegou
Gabrielyan debaixo de seu carro, tentando trocar a
bateria do celular.
referência sobre novos inseto para produzir corrente elétrica.
programas e tecnologias. Na Por enquanto, o robô tem sido alimentado
manualmente, pois o mecanismo para pegar
seção Artigo, que conta com um
os insetos ainda está sendo desenvolvido.
time renomado de colunistas, é
possível conhecer a opinião dos O único lado ruim desse robô autônomo
provavelmente será o seu cheiro já que os
melhores especialistas em
cientistas estudam atrair as
internet. O site possui ainda um
fórum, em que se pode tirar moscas usando excremento
ou água de esgoto.
dúvidas e ampliar a rede de
contato com outros profissionais
da área.
(05)
<www.bananadesign.com.br>
(08)
(06)

(01) http://www.estadao.com.br/tecnologia/informatica/2004/set/13/88.htm
(02) http://www1.folha.uol.com.br/folha/informatica/ult124u16898.shtml
(03) http://info.abril.com.br/aberto/infonews/082004/19082004-7.shl
(04) http://www1.folha.uol.com.br/folha/bbc/ult272u35237.shtml
(05) http://www.estadao.com.br/tecnologia/internet/2004/set/10/47.htm
(06) http://www1.folha.uol.com.br/folha/informatica/ult124u16902.shtml
(07) http://www1.folha.uol.com.br/folha/informatica/ult124u16968.shtml
(08) http://www1.folha.uol.com.br/folha/ciencia/ult306u12387.shtml

11
12
 portfólio veterano :: Ability
Ability:
dos games ao meio online
por André Philippe Iunes

Por mais que muitos pensem que o dom vem de berço, não há talento que se desenvolva sem um mínimo de
dedicação. Perseverança, insistência e determinação talvez sejam as palavras de ordem para quem procura a
tão almejada luz no fim do túnel. Para Rodrigo Tigre, diretor geral da agência Ability, saber extrair das dificul-
dades o aprendizado para a sua vida e das oportunidades a chance de seguir novos rumos foi de vital importân-
cia para trilhar bons caminhos na carreira.

Com 30 anos e formado em Marketing, Rodrigo começou

a trabalhar com internet devido a um fato curioso. Em 1996,
quando ainda era dono de uma editora de jogos e softwares
infantis em CD-ROM, ele teve o seu destino profissional traça-
do em uma feira de Games em Las Vegas. “Ao cruzar por um
dos stands, algo me chamou a atenção. Quase passei direto,
mas resolvi voltar e conheci a Games Mania, que possuía um
portal de informações sobre jogos de computador. Conheci os
donos do site e acabamos ficando amigos. Dois meses depois
www.ability.com.br

13
portfólio veterano :: Ability

“Somos uma empresa focada no cliente, procuramos

sempre ver o que é melhor para ele, mesmo que isso

não seja o melhor para nós no primeiro momento”

estava sendo lançando no Brasil a sua versão em português e foi assim que eu
comecei a me envolver com a web. Alguns anos depois a editora acabou e fi-
quei me dedicando inteiramente à internet, coisa que faço até hoje”.
Fundada em 1997, a Ability atua como uma produtora digital, com traba-
lhos realizados na área de desenvolvimento de sistemas para web, criação de
campanhas online, além da prestação de consultoria. O Shoptime, primeiro
cliente da agência, foi conquistado no mesmo ano e serviu como um desafio
para a agência. “Apesar de inicialmente preferirem algo mais institucional, su-
gerimos fazer um site de e-commerce, o que na época era um passo muito ou-
sado. O negócio deu tão certo que em 2000 o site já respondia por 20% do
faturamento total de vendas. A partir daí, a empresa montou a sua própria
equipe interna de programação e design”, lembra o diretor.
Exemplos de sucesso
Com clientes como a Embratel, Sony Music, Banco Modal, Cultura Ingle-
sa, entre outros, a Ability conta atualmente com uma equipe de 23 profissio-
nais, incluindo gerentes de projetos e desenvolvimento, designers, redatores
e programadores. Dentre seus trabalhos, destacam-se o portal de Serviço de
Informação Médica (SIM online) da GlaxoSmithKline. O site reúne mais de 1GB
em arquivos informativos sobre doenças e aplicações dos medicamentos da
empresa. “O principal objetivo da GlaxoSmithKline é o de informar os médicos
Esboço e telas de exercícios desenvolvidos para o
e seus representantes comerciais sobre os produtos que fabricam. Sendo as-
E-Kids da Cultura Inglesa
sim, todo o conteúdo é incluído de forma dinâmica”, explica Rodrigo.
Outro trabalho interessante feito pela produtora foi o E-Kids, desenvol-
vido para o curso de idiomas Cultura Inglesa. O objetivo foi possibilitar que
alunos estudem em casa, pelo computador pessoal. Este projeto é dividido por
livro, lição e exercício, em que foram produzidos diversos jogos como caça-pa-
lavras, jogo da forca e memória. Segundo Rodrigo, dessa forma as crianças
podem aprimorar e fixar o conteúdo aprendido em sala de aula. “O sistema foi
todo desenvolvido com as tecnologias Flash, Action Script e ASP. Também é uti-
lizado um banco de dados para o armazenamento de imagens e sons e para o
relacionamento dos jogos com suas respectivas lições”, destaca.

14
 portfólio veterano :: Ability
Com o obje-
tivo de reformular
todo o portal de acesso
gratuito da Embratel, o
Click 21, a Ability de-
senvolveu para este
projeto um novo layout e tornou o seu con-
teúdo dinâmico. Neste caso, também foi
implementado um sistema administrativo
para gerenciar e alimentar o site com informa-
ções. O portal conta também com uma ferra-
menta de regionalização, que direciona um www.click21.com.br

dado específico a um determinado usuário con-

forme a sua região. O sistema é todo baseado
em Java (J2EE) com banco de dados SQL
server. Segundo ele, a tecnologia Java permite
a modularização do sistema, assim como a sua
escalabilidade, que possibilita o crescimento do
sistema sem a necessidade de reprogramá-lo.
Qual o segredo?
Ganhadora de diversos prêmios, entre
eles três TOP3 conquistados no IBest entre
1999 e 2003 e de melhor portal nas categori-
as automóvel e serviços online, Rodrigo lem-
bra que o grande diferencial dos produtos da
Ability se deve à forma como a produtora tra-
balha e se dedica a seus projetos. “Somos
uma empresa focada no cliente, procuramos
sempre ver o que é melhor para ele, mesmo
que isso não seja o melhor para nós no primei-
ro momento. Estamos com uma meta agressi-
va para o ano que vem, esperamos aumentar
em 30% o nosso faturamento. O mercado
está mais animado com a internet, principal- www.sim-gsk.com.br

15
15
portfólio veterano :: Ability
mente as grandes empresas, nosso principal
alvo hoje em dia.”
Para ele, um dos principais problemas
que o designer pode enfrentar na profissão
diz respeito ao briefing, que mal feito, in-
completo ou pouco explicado pode arruinar
www.oab-rj.org.br
www.sonymusic.com.br
www.automovel.com.br
16
todo um trabalho. Em sua opinião, descobrir
qual é a real necessidade de um projeto é
sempre um desafio. Ele cita que alguns cli-
entes têm a dificuldade de passar exata-
mente o que eles querem, fazendo mudan-
ças constantes, até mesmo no briefing. A
saída é conversar e especificar ao máximo
para que isso não aconteça.
Rodrigo busca inspiração para seu traba-
lho navegando pela internet, sempre procu-
rando novas referências. Segundo ele, a web é
um meio propício para comparar trabalhos e
obter idéias. “Se uma pessoa souber ana-
lisar bem o que existe no mercado, pode
fazer um apanhado de exemplos e de-
senvolver um site realmente funcional.
É importante estar atento às tendências que
estão surgindo, ler muito e ficar por dentro do
que há de bom na rede”.
Ele lembra também que é fundamental
para o profissional de internet ouvir outras
opiniões, procurando informações que me-
lhorem o seu trabalho. “Ouço as pessoas que
estão ao meu redor, pois sempre têm algo a
acrescentar. Acho que com bom senso e
uma boa conversa, resolvemos meta-
de de qualquer problema. Além disso, é
muito importante você ser persisten-
te. Em nossa vida, sempre enfrenta-
mos dificuldades e é como as encara-
mos que determina o nosso sucesso”,
finaliza.
 portfólio calouro :: Sauvage
O poder da propaganda boca a boca
Foi desta forma que Diogo Catem Adiala, 23 anos, entrou para o mercado e conquista até hoje

os trabalhos que compõem seu portfólio.

Começou sua carreira como freelancer no final de 2002, mas sempre al-
ternou com trabalho fixo em agências. Hoje, dedica-se completamente aos
freelas que consegue com a indicação de amigos e clientes: “é o poder da pro-
paganda boca a boca”, garante. Assim, recebe em média um projeto por mês e
segue ampliando a lista de clientes, que não é pequena: Nalco Brasil,
Duquerne Mudanças, Coppead – UFRJ, Bukan – School of Krav Maga, Isbet –
www.sauvage.com.br
Central de Estágios, Truly Nolen, entre outros.
Formado em webdesign pelo Instituto Infnet no Rio, Diogo cursava
Informática na Universidade Estácio de Sá, quando decidiu há dois anos trancar a
matrícula. “Agora vou começar design gráfico. Tem mais a ver comigo”, afirma.
Como vantagens de trabalhar por conta própria, o webdesigner destaca a
liberdade de escolher seus horários e o contato direto com o cliente, sem interme-
diários. “Os problemas são a instabilidade e a concorrência com os ‘so-
brinhos’, que degradam o valor do trabalho no mercado”.

www.camiladezorzi.com.br
Para Diogo, um bom profissional não precisa necessariamente ser forma-
do e sim ter vocação, disciplina, determinação, gostar do que faz e ficar aten-
to às novidades. Por outro lado, reconhece a importância da formação acadê-
mica. “Na faculdade a pessoa troca experiências com alunos e professores.
Obtém conhecimentos cultural, técnico e profissional. Não basta apenas
saber usar ferramentas, né?”
Daqui a cinco anos, tem esperança de atuar em um mercado onde os clientes
saibam valorizar o webdesign em todos os aspectos, tanto financeiro como profis-
sional. “Espero ter concorrentes realmente profissionais, que não desvalorizem a
profissão, jogando o valor do trabalho lá embaixo. Afinal, sempre terá espaço
www.isbet.org.br
para quem é realmente bom e que busca ficar cada dia melhor.”
Para renovar as energias, Diogo foge para lugares bem tranqüilos e se
inspira na natureza. Eclético, o rapaz também curte animação, ilustração e a
cultura japonesa.
Ele se autodefine como extrovertido e otimista. “Estou sempre rindo e de
bem com a vida. Profissionalmente sou muito perfeccionista, criativo e procuro
estar sempre estudando, trocando idéias e me reciclando.” É isso aí Diogo,
www.conexaoturismo.com manter o alto astral é fundamental!

O site da Sauvage é <www.sauvage.com.br> e o email para contato, <diogoadiala@sauvage.com.br>.

Para participar da seção portfólio, cadastre-se no site www.arteccom.com.br/webdesign. 17
17
entrevista

Nem
Em uma conversa informal e bem-humorada, Bruno

Porto, diretor da Associação dos Designers Gráficos (ADG

Brasil), revela à Webdesign os vários elementos que en-

volvem o estudo de cores. Professor da UniverCidade (RJ)

tudo
e autor do livro “Memórias Tipográficas”, o designer põe

em questão assuntos polêmicos como a psicologia das

cores e a sua aplicação. Como ele mesmo cita: “a cor não

é o único fator visual determinante, muito menos tem

são
poderes mágicos”. De “Monty Phyton e o Cálice Sagrado”

a Saul Bass e Eugênio Hirsch, Bruno também faz um bre-

ve panorama da interação do webdesign com os aspectos

comerciais e sociais da profissão. Caso esteja indeciso por

cores...
alguma composição cromática, confira nesta entrevista

por que é importante conhecer todo o contexto no qual

uma cor pode estar inserida.

por André Philippe Iunes

18
 entrevista
Wd :: Dependendo da natureza de um projeto e do seu público-alvo
há uma estratégia quanto à escolha de determinada gama de cores?
Bruno :: Geralmente, um site comercial não se encontra sozinho no
mundo e está atrelado a outras interfaces gráficas, como uma embala-
gem, um cartão de visitas, um banner, uniformes institucionais e
promocionais ou mesmo uma sede que possui uma sinalização. Um pro-
jeto de comunicação visual, seja corporativo ou de identidade, compreen-
de muitos suportes para informações, e o ideal é projetar este sistema
para que haja pouca variação dos elementos que identificam o negócio
que representa, entre eles as cores. Em outras palavras, um folder, im- Wd :: Pela sua experiência, quais aspec-

presso em CMYK ou serigrafado com cores especiais Pantone, não pode tos relevantes devem ser observados

apresentar um determinado tom de laranja que não tenha a mesma apli- quanto ao estudo de cores na web? O que

cação em uma van promocional, pintada em tinta automotiva ou deve ser levado em conta com relação à

adesivada por meio de plottagem, e também em um site, com cores RGB. sua utilização em sites?

Atualmente, como a web é uma ferramenta essencial na comunicação, um Bruno :: Há quatro elementos visuais que

site não pode ser desenvolvido separadamente, apenas como “suporte agem na nossa percepção: forma, tama-

promocional” ou uma “marketices” dessas, ou mesmo depois dos outros nho, cor e textura. Ou seja, tudo que é vi-

itens, pois cada vez mais o consumidor tem mais contato com a interface sível possui uma forma, uma definição re-

dita virtual do que com a “real”. Como alguns amigos com quem você tro- lativa de proporções e uma superfície ca-

ca mais emails e scraps no Orkut do que bate-papo tomando um chopp ou racterística.

mesmo ao telefone. A cor é um dos fatores mais importantes

No caso de um site atrelado a uma infinidade de aplicações com fornece- nesta história, pois é o que nos permite

dores e suportes diversos, e que certamente será visto por monitores de visualizar a forma, distinguindo-a do seu

calibres diferentes, sugiro que todos, pelo menos por enquanto, corram fundo, daí definindo o tamanho, a textu-

para as 216 cores da paleta websafe. ra etc.

Um exemplo, o dourado em uma superfície
lisa é freqüentemente usado para transmi-
tir sofisticação, elegância e nobreza. Essas
coisas de convites de casamento a relató-
rios anuais. Já em uma superfície com tex-

O bom uso das cores em um tura rugosa, de ferrugem, carcomida,

site deve considerar: como em uma placa velha, já vira decadên-

3% Não sei
cia, velhice. Ou seja, cor isoladamente não
10% Intuição é tudo.
26% Metodologia
Há também o fator cultural, que pode se
61% Ambos
 
manifestar em produtos (site também é
Acesse o site www.arteccom.com.br/webdesign e participe!
um produto) que são consumidos tanto em
países com diferentes referências em rela-

19
entrevista
“Amplie seu vocabulário visual”
ção às cores, como por grupos sociais específicos. Cito
como exemplo um trabalho de logotipo que Marcelo
Martinez e eu fizemos há sete anos para uma empresa liga-
da à indústria da moda. Buscávamos diferenciar a imagem
desta empresa das suas concorrentes no segmento, que
em sua grande maioria usava tons pastéis, independente
dos estilos adotados. Desenvolvemos um logo forte, tanto
nas formas como nas cores, e de fácil aplicação, usando
vermelho e preto. Apresentamos para o cliente, explican-
do os motivos, mostrando os layouts das aplicações e um
ensaio do que seria o manual da marca. O cliente disse que
adorou, mas perguntou se poderíamos trocar o vermelho
por azul. Explicamos que com isso a marca perderia em im-
pacto, pois o vermelho é uma cor que não sofre com mu-
danças de tendências na moda etc. Ele finalmente se jus-
tificou, dizendo ser vascaíno, e declarando que “com essas
cores a logo fica muito próximo ao símbolo do Flamengo,
entendem?”. Esse obviamente é um daqueles clientes, dos
quais ninguém está livre, que pede para levar os layouts
para casa para mostrar para a mulher opinar… Frustrante,
mas nossa satisfação pessoal veio alguns meses depois
20
quando o logo “original” foi selecionado e inclu-
ído em um livro da Supon Design Group chama-
do “Visual Impact”.
Wd :: Com relação à psicologia das cores,
como um webdesigner pode agregar valor a
uma determinada cor utilizada em um
layout?
Bruno :: Assim como o argumento estapafúrdio
do meu cliente, algumas destas listas que
apontam supostas associações entre cores e
significados são de uma patetice ímpar, como a
que confere a países com determinadas cores
nas suas bandeiras “sucesso garantido”. Che-
garia a ser hilário se não fosse perigoso ver
profissionais de diversas áreas do design,
marketing e comunicação repetirem, muitas ve-
zes por escrito, essas bobagens antecedidas de
“Estudos comprovam que…”. A cor não é o úni-
co fator visual determinante, muito menos tem
poderes mágicos. Se pintarem uma foto de
uma tartaruga atropelada na estrada de ver-
melho e laranja não vai te dar fome, e se azul
fosse a única garantia de refrescância a Coca-
Cola estava falida.
Esse empirismo todo me lembra uma cena da co-
média “Monty Phyton e o Cálice Sagrado” em que
 entrevista
o Rei Arthur e seus cavaleiros deveriam res-
ponder corretamente a três perguntas para
atravessarem uma ponte sobre um desfila-
deiro ou serem lançados à morte. O primei-
ro se apresenta e escuta: Qual o seu nome?
“Arthur”, responde. O que procura? “O Cáli-
ce Sagrado”. Qual sua cor favorita? “Azul”.
Ok, pode passar. Quando o segundo cavalei-
ro se apresenta, tendo ouvido as perguntas
e respostas anteriores, diz seu nome, seu
objetivo e na pergunta referente a sua cor
favorita, responde: “Azul… NÃO, Vermelho!”
E é arremessado para a morte.
Não confie em fórmulas. Cada caso é um
caso (como cada cavaleiro é um cavaleiro),
com suas circunstâncias, contextos, obje-
tivos e características.
Wd :: Na hora de elaborar um site, al-
guns profissionais costumam trabalhar
intuitivamente. Até que ponto há uma
fronteira entre o instinto e a técnica
quanto ao estudo de cores?
Bruno :: Bom, depende até que ponto você
está podendo se arriscar, e ao site do clien-
te. Experimenta mandar um sujeito que
“saca um pouco de portunhol” traduzir as “A cor não é o único fator visual determinante,
palestras estrangeiras de um congresso de
muito menos tem poderes mágicos. Se pintarem
medicina. O cara vai “no instinto”, não tem
muita técnica, “mas improvisa bem”. No ano uma foto de uma tartaruga atropelada na estrada
seguinte é até provável que haja um recorde
de vermelho e laranja não vai te dar fome, e se
na quantidade de erros médicos no país, por
extração desnecessária de orgãos ou algo do azul fosse a única garantia de refrescância a
gênero. Você pode mandar o cara que fala
Coca-Cola estava falida”
portunhol apanhar sua amiga mexicana no
aeroporto, mas quanto melhor for o sujeito,
quanto mais ele souber, melhores são suas
chances de sucesso. Ainda mais se você
quer chamar isso que faz de “profissional”.

21
entrevista

Wd :: Além de livros e publicações especializadas, como um designer

pode se aperfeiçoar e obter assim maior sensibilidade para poder cri-
ar uma composição cromática bem equilibrada?
Bruno :: Que tal estudar, e estudar muito, e estudar sempre? Tem funcionado
há séculos! Quando falamos em cursar uma faculdade, estamos dizendo
como nas antigas tribos “vá aprender com os mais velhos, os que sabem
mais”. Podem não saber tudo, mas sabem mistérios que você nem sonha que
existem. Acabou a faculdade, que em princípio é um processo ordenado de
transmissão de conhecimentos, faça cursos, workshops, assista palestras,
participe de seminários e congressos. Amplie seu vocabulário visual. Aque-
le cartaz do Saul Bass e aquela capa do Eugênio Hirsch vão te ajudar a resol-
ver o layout daquele site. Não na base da cópia da estrutura ou adotando
aquelas fontes específicas, mas vão te educando visualmente para poder de-
senvolver a sua própria solução.

O designer – gráfico, de produto, de interface, de jóias, de

“Para se aperfeiçoar em composição
cromática, estude psicologia, sociologia
e ergonomia, e entenda como o Homem
se relaciona consigo mesmo, com os
outros e com seu meio físico”
ambientes – é tão bom quão vasto for seu repertório de so-
luções. Se este é limitado, maiores são as chances de ter-
mos trabalhos medíocres, e é só olhar em volta. Veja o que
já foi experimentado, informe-se sobre o que já foi feito, e
aos poucos – pois uma profissão se aprende aos poucos,
não importa a velocidade do mundo moderno, da sua cone-
xão ou da sua máquina, ou o que dizem os tutoriais e cur-
sos de rápida duração – vá juntando as peças de informa-
ção e montando suas soluções. Sabemos que a história se
repete, o que significa que as pessoas, independente da
quantidade de piercings e tatuagens e hábitos alimentares
esdrúxulos, se comportam de forma semelhante. Para se
aperfeiçoar em composição cromática, estude psicologia,
sociologia e ergonomia, e entenda como o Homem se rela-
ciona consigo mesmo, com os outros e com seu meio físi-
co. Livros e revistas são depositórios do conhecimento hu-
mano, e de maneira geral mais responsável e ampla que a
web. Odeio dizer isto, mas nem tudo se encontra no
Google.

22
23
da arte à ciência
Teoria das cores:
Amarelo :: Estimula a criatividade, é uma cor vibrante e alegre.
Incentiva a conversação. Em excesso é cansativa.
Aloísio Magalhães
Considerado um dos designers mais expressivos
de sua época, Aloísio Magalhães foi pioneiro do
design gráfico no Brasil e sempre defendeu
Os significados das cores espalhados pela matéria foram
conceitos como a “Brasilidade” do design e a
tirados do livro ‘Logos do Brasil’ de Pedro Guitton.
recuperação da memória artística e cultural do
país. Falecido em 13 de junho de 1982, Aloísio
tinha formação em Direito e foi membro do grupo
de vanguarda “O Gráfico Amador” em Recife, na
década de 60. Entre seus trabalhos, destacam-se
o design das notas do cruzeiro novo e a
identidade visual de empresas como Petrobrás,
Light, Souza Cruz, Embratur, Unibanco, Xerox,
entre outras.
24
É inegável dizer que a cor é um
elemento fundamental na
estética de uma página na web.
Por causa de suas qualidades
atrativas, pode-se usar
determinadas cores para
identificar áreas ou um
determinado grupo de
informações. Entretanto, nem
todos as utilizam
coerentemente, praticando
exageros devido a gostos
pessoais duvidosos. Certos
cuidados quanto ao seu uso são
de extrema importância e
conhecer a sua teoria é vital na
hora de saber lidar com a sua
X criatividade.
Segundo Aloísio Magalhães: “Design é a compatibi-
lização entre intuição e metodologia”. Essa frase nos faz
pensar sobre a tênue linha que separa a técnica do ins-
tinto e até onde esses elementos se interagem na hora
da criação. Com relação ao uso das cores, esse divisor
torna-se ainda mais imperceptível, visto que muitos ain-
da desconhecem a total aplicação dos conceitos cromá-
ticos em um layout.
 da arte à ciência
da arte à ciência
Na web, evitar o uso gratuito das cores e dar ênfase ao seu aspecto de código é fun- Código X
damental na hora de desenhar uma interface de grande complexidade organizacional. É pre- O código de uma cor é a maneira

ciso, antes de tudo, lembrar que um site é, em princípio, um projeto de design de infor- de relacioná-la a uma
informação. Uma cor pode
mação. Todos os elementos, inclusive as cores, devem convergir para que a experiência
agrupar elementos que se cor-
do usuário seja a mais eficiente e confortável possível. Neste caso, é necessário ter um relacionam, como também dar

conhecimento teórico sobre o funcionamento das cores como variável informativa, algo destaque a certos itens e indicar
uma seqüência de navegação.
que se estuda na chamada “semiologia gráfica”.
Colorindo a mente do seu usuário
Alguns estudiosos defendem a idéia de que as cores realçam a identidade de uma
marca e provocam associações e sensações em uma determinada pessoa, agindo no ní-
vel do inconsciente. No livro ‘Logos do Brasil’, o autor Pedro Guitton cita que, com o uso
adequado de uma cor, é possível despertar, além de outras
impressões, o apetite, a pressa e a criatividade.
Verde :: É considerada por muitos a cor da
Para Rodolfo Capetto, professor de design da Escola
natureza, logo, equilibra e acalma. Mais
precisamente: o verde claro tranqüiliza e o
Superior de Desenho Industrial da Universidade do Estado
verde escuro transmite eficiência. do Rio de Janeiro (Esdi/Uerj), as teorias que associam as
cores a determinadas emoções são contraditórias. “Esse
pensamento perde força quando se descobre, por exemplo,
que o vermelho, chamada cor quente, é fisicamente uma
cor fria, e o azul, chamada cor fria, é fisicamente uma cor
quente”, explica o professor.

Cores quentes X
Temperatura de cor é um conceito importante em física,
astronomia e fotografia. Medida em graus Kelvin, é a temperatura
na qual se precisa levar um “corpo negro” (objeto hipotético que
absorveria 100% dos comprimentos de onda) para que ele emita
luz numa determinada cor. Na medida em que ele esquenta, passa
a emitir uma luz avermelhada. Aquecendo mais, passa a emitir
uma luz amarelada. Aumentando ainda mais a temperatura, torna-
se azulada. Assim, o azul é uma cor mais ‘quente’, no aspecto
físico, que o vermelho. Uma curiosidade: em astronomia, a cor das
estrelas é usada para medir a sua temperatura. As vermelhas são
mais frias e as azuis mais quentes.

25
da arte à ciência

Segundo ele, o papel do designer é o de questionar

essas teorias, criando um entendimento dos vários
referenciais que o usuário possa ter em mente, devido a
sua herança cultural, e surpreendê-lo com uma solução
nova e personalizada que atenda aos parâmetros e requi-
sitos de cada projeto. “Cada caso é um caso. Ao planejar
um trabalho, é preciso primeiro saber se existe uma cor
institucional que deve ser usada e como integrá-la com as
demais cores do layout. Tem que se trabalhar de forma que Vermelho :: Estimulante, excitante,
direciona e transmite energia. Pode
a cor mantenha as características do negócio do cliente e
deixar as pessoas agitadas e irritadas.
que a interface permaneça perfeitamente funcional. Esses
são problemas que, às vezes, tornam-se difíceis de resol-
ver, e não há fórmulas, cada caso precisa ser estudado in-
dividualmente”, destaca Capetto.
De acordo com Carlos Bahiana, professor de design
da Universidade Unicarioca e especialista em usabilidade,
no que diz respeito à aplicação cromática em uma
interface, existem aspectos fisiológicos, culturais, circuns- contextualização de significado como, por exemplo, as
tanciais e contextuais que afetam significativamente a re- mensagens de erro que podem ocorrer em um sistema.
ação a determinadas cores. Com relação a sites, ele lembra Nesse sentido, é adequado associar as noções dos concei-
que a escolha por um conjunto de cores que traga o me- tos de usabilidade ao emprego correto de cada cor.
lhor resultado deve ser feita levando-se em consideração Estudos ergonômicos permitem também compreender
qual contexto a cor está inserida, o público-alvo e qual es- melhor a adequação das cores quanto ao seu uso e públicos-
tratégia de negócio da empresa. alvos. Para Carlos Bahiana, a usabilidade, implementada a
A importância da cor na web e a sua cultura partir de um estudo ergonômico, permite não só conceber
Do ponto de vista da arquitetura da informação, as uma arquitetura mais adequada, como também, por exemplo,
cores têm sido usadas como auxílio na organização do con- especificar melhor a utilização de uma determinada cor como
teúdo, facilitando a compreensão das informações e na elemento de interação com o usuário.

Cor e Cultura
Albert Badre, professor da Escola de Psicologia da Georgia Institute não atraentes. Também confirmam-se diferenças culturais na
of Technology, realizou pesquisas, do ponto de vista cultural, sobre percepção e uso de cores. Enquanto vermelho significa “perigo” ou
preferências em design de interfaces e as relacionou como “pare” nos EUA, na China denota felicidade. Verde significa fertilidade
“marcadores culturais”. As informações foram coletadas por meio do e força no Egito, enquanto nos EUA significa “seguro” ou “prossiga”
Cultural Issues Questionnaire, aplicado durante a 8ª WWW User e, na França, representa criminalidade. Portanto, o estudo do
Survey do ‘Graphic, Visualization, & Usability Center’ (http:// público-alvo do site deve levar em consideração a percepção do uso
www.gvu.gatech.edu/user_surveys/survey-1997-10/).  de cores, evitando-se assim a ambigüidade.

Em seu estudo, ele percebeu que chineses preferem fortemente Para quem quiser saber mais sobre as aplicações cromáticas, o site
páginas mais coloridas enquanto que os alemães declararam não www.mariaclaudiacortes.com apresenta um interessante e bem-
apreciá-las. Ingleses, franceses e espanhóis indicaram clara humorado estudo sobre a psicologia das cores, incluindo seus
preferência por elementos gráficos, enquanto alemães os acharam diferentes significados em cada cultura. Vale a pena conferir!

26
 “Tem que se trabalhar de

forma que a cor mantenha

as características do

negócio do cliente e que a

interface permaneça

perfeitamente funcional”
Rodolfo Capetto

Com relação à internet, Carlos ressalta que o designer deve

observar três aspectos básicos no uso de uma cor. O primeiro é o
tecnológico, que diz respeito à capacidade que o equipamento do
usuário tem de reproduzir cores. O segundo é cultural, que aten-
de às expectativas e preferências de cada visitante e, por último,
a usabilidade, em que a legibilidade, leitura, contextualização, fun-
cionalidade e visibilidade são levadas em consideração.
Para ele, atualmente, cultura e usabilidade vêm se fundindo
na medida em que os estudos sobre estes assuntos tornam a na-
vegação mais eficaz para determinados públicos. “Hoje esta é uma
das maiores preocupações na produção de sites. Pode-se dizer que
o layout, assim como a seleção de imagens e a própria arquitetu-
ra do site, tem sido considerado como elemento cultural. São bas-
tante conhecidas as diversas listas de ‘significados das cores’,
eventualmente acompanhadas de alguma associação à nacionali-
dade”, afirma Carlos.
O problema é mais complexo, envolvendo correntes culturais
dentro dos países e variações por gênero. Segundo o professor,
projetos voltados ao público mundial têm buscado atingir uma
certa “neutralidade” cultural.  Por outro lado, outros trabalhos,
voltados para grupos específicos e geograficamente localizados,
buscam a especialização cultural, enfatizando traços e preferênci-
as. Em ambos os casos, a cor tem papel importante e conhecer as

27
da arte à ciência

Especialista em design de interfaces, o professor Carlos Branco :: Considerada a melhor cor para demonstrar limpeza,
Bahiana dá algumas dicas importantes sobre o uso de cores é ofuscante, levando a um certo cansaço mental. O ideal é
na web: sempre combiná-la com outra cor.

:: Cuidado com os excessos. A quantidade de cores usadas na web,

ao contrário dos impressos, não representa qualquer aumento de
custo, o que pode levar a um certo abuso;

:: A qualidade e capacidade dos dispositivos pelos quais se verá o

design têm enorme variação, ou seja, significa que dificilmente duas
pessoas verão as mesmas cores em monitores diferentes. Variações
sutis de saturação, tonalidade ou luminância podem não ser
percebidas ou se apresentarem alteradas. Por exemplo, o contraste
entre vermelho e verde (cores complementares, primárias no sistema
RGB) é apenas cromático, desaparecendo quase completamente
quando reduzidos a tons de cinza.

:: Um terceiro aspecto, este psicológico e independente do meio em

que a cor é observada, diz respeito ao grau de complexidade visual
percebida. Duas interfaces com o mesmo número de elementos de
tela e com o mesmo layout podem ser percebidas como entulhadas,
vulgares, confusas ou como limpas, elegantes e funcionais,
dependendo da quantidade e características tonais utilizadas. 

:: Considerando-se que o contraste, cromático ou luminoso, é o que

nos permite distinguir um objeto de outro ou do fundo em que ele
está inserido, está claro que a utilização de cores contrastantes
ressalta a presença de um determinado elemento no layout.

características de cada público é fundamental.
Cuidados com os excessos
O uso de uma grande variação de cores em uma
interface pode ser prejudicial. Para Carlos Bahiana, na ten-
tativa de fazer o site ficar mais atraente e “enfeitado”, vão-
se aplicando detalhes de cor, preenchendo os vazios de um
layout mal concebido. “Infelizmente não existe uma fórmu-
la mágica ou receita de bolo. Cada cor é uma ‘voz’ e a
interface deve funcionar como um coral. Se você não sabe
o que está fazendo e começa a juntar ‘vozes’ aleatoriamen-
te, ou a partir de critérios pessoais e sem embasamento,
não terá um coral, mas uma balbúrdia”, alerta o professor.
Ele condena o uso de diversas cores fortes em um
layout para dar destaque a uma grande quantidade de ele-
mentos, na tentativa de acomodar pressões de patrocina-
dores, anunciantes ou políticas. “O resultado pode ser
comparado a uma sala sem tratamento acústico, em que
muitas pessoas estão falando alto, todas tentando se fazer
ouvir pelo visitante que acabou de abrir a porta. Ele não vai
entender nada, vai ter dificuldade em dar atenção a cada
solicitação e, a menos que precise muito de alguma infor-
mação ali dentro, irá embora imediatamente”, explica.
Outro problema está relacionado à legibilidade. Exis-
tem algumas regras quanto ao uso das cores que devem
ser obedecidas para que não haja dificuldade de leitura. O
contraste entre a cor de fundo e o texto é requisito básico
para quem não quer perder seu usuário logo de primeira.
No livro ‘A Prática da Simplicidade’, Jakob Nielsen cita que
a ótima legibilidade requer o texto preto em fundo branco,
em que ele denomina como ‘texto positivo’. Já o contrário,
ou seja, texto branco em fundo preto, chamado ‘texto ne-
gativo’, causa quase a mesma eficácia de leitura. Entretan-
to, o autor diz que esta inversão de cores gera no
internauta uma certa desaceleração ao ler.

28

Nielsen recomenda, além do uso de
fontes de tamanho suficiente para que
possam ser lidas sem dificuldade, o uso de
cores de fundo lisas ou padrões de fundos
sutis. Os elementos gráficos de fundo,
principalmente quando muito coloridos,
podem interferir na capacidade de reco-
nhecer as formas das palavras. É impor-
tante lembrar também a importância de
saber trabalhar com as cores nos links. Ge-
ralmente, os links já visitados pelo usuário
são diferenciados dos que ainda não foram
vistos pelo uso de outras cores. Quando
não é respeitada essa regra, o sentido de
estrutura e localização do visitante da pá-
gina fica deficiente e a navegação sofre
uma perda significativa em sua eficácia.
Cores protegidas para navegadores
Na hora de se trabalhar em um
layout, é preciso ter em mente que exis-
tem diversos tipos de monitores de com-
putador, com capacidade e gama de cores
variadas, além de diversas configurações
de profundidade de bits. Embora seja inte-
apenas 256 cores. Quando se produz com
cores diferentes das 216 protegidas, os
navegadores as convertem para uma outra
cor mais próxima, dentro das 40 cores que
variam de uma plataforma para outra, o
que poderá comprometer a qualidade do
seu trabalho.
Carlos Bahiana explica que cada com-
binação de hardware (placa de vídeo e
drives), sistema operacional e navegador
resulta em um determinado conjunto de
cores reprodutíveis em cada computador.
Quando uma cor é especificada no site e
não está presente na paleta do equipamento
do usuário, a cor mais próxima é represen-
tada na tela, eventualmente entremeada
de pontos de outra cor que, combinada à
primeira, tenta reproduzir a cor especificada.
É o chamado dither.
Ele alerta que mesmo a utilização de
cores seguras não garante que o usuário
veja na tela o mesmo que o webdesigner
da arte à ciência
Dither X
Para evitar a ocorrência do
dither, deve-se usar um
conjunto de cores, bastante
limitado, que pode ser
considerado seguro para a
maioria das combinações de
hardware, sistema operacional e
navegador. Este conjunto são as
216 cores protegidas, também
conhecido como “paleta
websafe”.
Quanto mais baixa a resolução
da tela e o número de cores
disponíveis, mais perceptível e
incômodo é o dither. Outro dado
importante é o progressivo
aumento de resolução de tela,
que já está superando os
800x600. Quanto maior a
resolução, mais próximos ficam
os pontos resultantes do dither.
Com a tendência natural do olho
humano de “fundir” pontos
próximos, o efeito eventual do
dither fica reduzido.
Bits X
O termo se refere à quantidade
de cores que existe em uma
imagem. Esta quantidade pode
ter um enorme impacto no

ressante trabalhar usando uma combina- “peso” (tamanho em bytes) do

arquivo.
ção de 16 milhões de cores, grande parte
1 bit :: 2 cores
de seus usuários verão seu site em máqui- 2 bits :: 4 cores

nas capazes de reproduzir imagens com 3 bits :: 8 cores

4 bits :: 16 cores
5 bits :: 32 cores
6 bits :: 64 cores
Azul :: Transmite segurança e 7 bits :: 128 cores
confiança, além de 8 bits :: 256 cores
tranqüilidade. Em exagero pode 15 bits :: 32.768 cores
deprimir as pessoas. 16 bits :: 65.536 cores
24 bits :: 16.777.216 de cores

Turquesa :: Passa a sensação de 32 bits :: 16,7 milhões + escala

frescor, relaxamento, abre a de cinza de 8 bits

mente. Porém transmite uma

certa imaturidade.

29
da arte à ciência
“Cada cor é uma ‘voz’
e a interface deve
funcionar como um
coral. Se você não
sabe o que está
fazendo e começa
a juntar ‘vozes’
aleatoriamente, ou
a partir de critérios
pessoais e sem
embasamento, não
terá um coral, mas
uma balbúrdia”
Carlos Bahiana
Harmonização X
Na hora de escolher as cores em
um projeto, é importante levar
em consideração sua
harmonização, que consiste em
alguns princípios fundamentais
como similaridade,
familiaridade, equilíbrio, ordem
e ambigüidade.
Veja, também, o box “Maneiras
de harmonizar as cores e tornar
seu layout mais equilibrado” na
página ao lado.
30
planejou na hora. A qualidade da placa de Ele destaca que é preciso fazer uma
vídeo e do monitor, além de regulagens de diferenciação entre achar que uma cor é
brilho e contraste, torna a correspondência ou não adequada baseando-se apenas no
de tom e matiz uma incógnita para o gosto pessoal e no instinto e a decisão
designer. “Felizmente, este quadro está mu- embasada no conhecimento e na experi-
dando cada vez mais rápido. Placas de vídeo ência. “Achar, todos podem, não custa
capazes de reproduzir cores em 16 bits (64K nada e tem o valor do palpite. Saber é
cores) ou mais, já se tornaram comuns. para quem estudou a técnica e a aplicou.
Além disso, tanto sistemas operacionais O fato de um profissional, que estudou a
como navegadores têm padronizado a re- técnica e tem experiência na sua aplica-
produção de cores”. ção, parecer trabalhar intuitivamente
Cor, técnica e instinto pode levar à impressão de que o estudo é
O uso adequado das cores é uma etapa dispensável”.
importante da comunicação na web e, para Segundo Rodolfo Capetto, a intuição
o webdesigner ter o domínio dos conceitos é a destilação da experiência. “É quando
cromáticos, além do conhecimento dos prin- você não precisa mais pensar ‘conscien-
cípios ergonômicos, é essencial para o de- temente’ para saber o que deve ser feito,
senvolvimento de um bom layout. Ao esco- pois já pensou muito, em várias situações
lher uma cor em um determinado projeto semelhantes no passado”, ressalta o pro-
online, conhecer as estratégias sobre fessor. Entretanto, ele afirma que apesar
harmonização e os diferentes níveis de de haver um nível de conhecimento que
contraste podem auxiliar a vem da vivência profissio-
Contraste X
legibilidade e a organização nal, o estudo teórico e téc-
O contraste é uma forma de
do conteúdo em seu site. acrescentar um destaque visual nico das propriedades da
Para Carlos Bahiana, a uma página. Com relação às cor, como de outros ele-
cores, pode ser definido como
contar puramente com a in- mentos visuais com que o
uma diferença entre elementos
tuição ou instinto é um risco semelhantes. Em um layout designer trabalha, é es-
que o profissional não deve equilibrado, a visão do usuário sencial para fundamentar
se volta para os contrastes mais
se expor. “Certa vez, discu- o trabalho e garantir que
extremos. Estudos demonstram
tindo a relevância de estudar que um olhar é imediatamente as soluções sejam mais
design, me perguntaram se atraído para as partes de uma sólidas. Sendo assim, aqui
interface que são extremamente
haviam designers com diplo- fica a dica: cor não é só
diferentes do que está a sua
ma melhores do que outros volta. arte, mas também uma ci-
que cursaram uma universi- ência, e o seu uso indis-
dade. Minha resposta continua sendo a mes- criminado poderá fazer do seu site um
ma daquela época: não conheço quem tenha “arco-íris” sem o almejado pote de ouro
piorado estudando”. ao final, que é o seu usuário.
 da arte à ciência
Preto :: Utilizado sozinho é austero e confere
isolamento. Associado ao branco sugere um
ar moderno. As composições do preto com
outras cores podem ser bem alegres e
esportivas.

Círculo cromático X
Desenhado por Johannes Itte,
em 1928.
No centro do círculo estão as
cores primárias, que são
magenta, amarelo e azul cyan.
Essas cores são usadas na
criação de todas as outras.
Combinando as primárias duas a
duas, em proporções similares,
surgem três cores secundárias:
vermelho, verde e violeta. As
Maneiras de harmonizar as cores
seis cores terciárias são
e tornar o seu layout mais equilibrado: formadas misturando uma
:: por monocromia :: quando se usam diferentes valores de luminância de uma mesma cor. primária e uma secundária
adjacente, como por exemplo:
:: por complementaridade simples :: utilização de duas cores opostas no círculo cromático. Este é um
magenta com vermelho,
esquema a ser analisado com cuidado, como no caso do uso de vermelho e verde. Pode-se ter uma área
magenta com violeta, amarelo
maior com uma cor fria, deixando a área menor com sua cor complementar quente.
com verde, amarelo com
:: por complementaridade contígua :: mais agradável, em geral, que a harmonia por complementari- vermelho, azul cyan com verde
dade simples. É feita por duas cores vizinhas e uma terceira oposta a elas no círculo cromático. Neste ou azul cyan com violeta etc.
caso, é importante determinar qual será a cor predominante, aquela que chamará mais atenção na
interface. Evita-se, exceto em casos especiais, que a cor dominante ocupe a maior área da tela.

:: por tríade :: imagine um triângulo eqüilátero sobre o círculo cromático e utilize as cores sob os vértices.

:: por temperatura :: cores de maior (violetas, azuis, verdes) ou menor (vermelho, laranja, amarelo)
freqüência no espectro luminoso. É recomendável o uso de branco como “cor de alívio” no texto, separadores,
áreas de respiração ou elementos acessórios, principalmente se forem utilizadas cores quentes.

:: por analogia :: utilização de cores vizinhas no círculo cromático, como por exemplo, o amarelo,
laranja e vermelho. Outra preocupação é com o equilíbrio visual. Elementos escuros tendem a ser
engolidos visualmente por um fundo claro, o chamado contraste de luminância. Com isso, parecem menores. Se as áreas forem igualmente
distribuídas entre uma cor quente e uma cor fria de igual luminância, a cor quente predominará. Em uma interface em que prevalecem cores
frias, as cores quentes chamam atenção, atraindo o olhar. Em uma interface em que predominam cores escuras, as cores mais claras atrairão o
olhar. Isso provoca um efeito de ordenação na leitura. Usadas incorretamente, estes tipos de contrastes podem provocar dispersão no usuário,
sendo prejudiciais para o layout.

31
32
 debate
Cores: como conciliar
instinto e técnica?
No que diz respeito ao uso das cores na web, saber caminhar pela tênue linha que separa a
intuição da técnica é uma tarefa difícil, nem sempre bem definida entre os profissionais da

área. Até onde o instinto e o conhecimento tácito são importantes na hora de elaborar uma
composição cromática é tema de debate nesta edição. Intuitivo ou teórico, compartilhe da

experiência destes profissionais e tire as suas próprias conclusões.

Conhecimento tácito
Conhecimento adquirido por
longos períodos de experiência e
cumprimento de determinadas
tarefas, durante as quais o
profissional desenvolve um
sentido e uma capacidade de
fazer julgamentos intuitivos
sobre um assunto específico.
:: Arísio Rabin
Professor da ESDI, Escola Superior
de Desenho Industrial
www.esdi.uerj.br
:
Sempre, sob qualquer natureza do ponto de vista do design, cor, tipografia ou outro
elemento visível constituem em informações e devem interagir. A definição desses elementos
é parte do projeto, relaciona-se ao conceito, à estrutura, ao conteúdo e aos parâmetros,
sendo o público-alvo um deles. Em projetos de design, qualquer definição visual é estratégica
e, naturalmente, pretende conquistar o usuário.
Cor envolve não só aspectos psicológicos, mas também culturais e técnicos. O entendi-
mento desses aspectos, por meio da formação e da experiência, é pré-requisito para a boa
qualidade dos resultados. Aqui novamente não se deve dissociar o elemento cor dos outros
elementos visuais. Por mais bem definida que seja, a cor utilizada só obterá valor se todos os
outros elementos também forem bem definidos e articulados. 
A intuição é uma grande aliada na atividade conceitual do designer, do es-
cultor, do arquiteto, do cientista, do artista etc., desde que fundamentada na ra-
zão e no conhecimento. O desenvolvimento da sensibilidade decorre do interes-
se: um “olhar analítico” e crítico sobre o repertório de casos disponíveis na web
é exercício fundamental. Como dica de leitura, cito autores clássicos no panorama do
design: Johannes Itten, Josef Albers, Karl Gerstner, Ostwald e Munsell.
Por fim, não se deve resumir problemas a critérios ou fórmulas pré-concebidas, assim
como um designer não deve se limitar. Não abrir mão de uma determinada gama de cores, por
exemplo, é uma limitação auto-imposta e desnecessária. Aconselho ler “Interaction of Color”,
de Josef Albers, pois auxiliará nessa compreensão.

33
debate
Discorrer sobre cores é sempre garantia
de um debate cheio de controvérsias e muita
discussão. Falar sobre o seu uso na web tor-
na-se ainda mais complexo, devido às ques-
tões técnicas inerentes a essa mídia.
Após ser captada pela visão, a cor é pro-
cessada pelo cérebro, formada, quantificada
e avaliada, tornando-se um elemento de sig-
nificado. Nessa etapa o cérebro identifica
qual cor é vista e a relaciona com experiências
anteriores para lhe atribuir valores. Desse
modo, pode-se considerar que os seres hu-
manos têm uma resposta emocional à cor,
fundamentada no contexto cultural em que
se insere.
Para o designer, é importante estudar e
compreender quais poderão ser esses valo-
res atribuídos, uma vez que são passíveis de
interpretações e, portanto, podem variar de
pessoa para pessoa.
As cores são muito importantes
para o desenvolvimento de uma
interface gráfica, não só pelo seu valor
estético, mas pelo poder em criar códi-
gos estruturais e estratégicos em de-
terminadas situações. Se bem utilizadas,
podem facilitar o processo de comunicação,
direcionando o olhar do leitor a regiões espe-
cíficas da página. Ao contrário, criam um ruí-
do e dificultam a leitura. Um exemplo seria a
diminuição de contraste entre texto e fundo.
Nesse processo de comunicação, e assim
como no desenvolvimento de um site, ques-
tões intuitivas vão defrontar com questões
técnicas. Uma não deve anular a outra, mas
se complementar, de modo a afinar a compo-
:: Eduardo Vieira
sição e a arte final.
Diretor de criação da Tribo 12
www.tribo12.com.br Ao delinear um layout, há diversos fato-
34
res e limitações que devem ser levados em
conta na escolha das cores a serem utiliza-
das. Entre eles, destaco o pleno conhecimen-
to sobre o público-alvo. É primordial que um
site seja produzido, seguindo um visual har-
mônico para quem o acessa. Para que isso
aconteça, o designer deve ficar atento a as-
pectos como a faixa etária, a cultura, a posi-
ção social e geográfica, assim como as parti-
cularidades do segmento para o qual está cri-
ando e até a qualidade do equipamento utili-
zado pela audiência.
Já entre as limitações, destaca-se o uso
mais restrito de cores, ou seja, deve-se
manter um padrão visual compatível em meio
às variações entre as diferentes plataformas
utilizadas pelos usuários. Outro fator, é a ne-
cessidade de adaptação do meio offline para
o meio online. Neste caso, o webdesigner é
forçado a se submeter ao conceito e escolha
de cores já definidas no meio offline. A trans-
posição das cores em CMYK para RGB e, mais
restrito ainda, para as cores consideradas
‘safe for web’ é um desafio pertinente àque-
les que trabalham com web.
A questão técnica e teórica
deve consolidar o funcionamento e
usabilidade do site, expressos em
combinações equilibradas e harmôni-
cas, contrastes e saturação adequados
para leitura e visibilidade dos demais
componentes de um layout, dentro dos
limitadores que a web oferece. O uso de
poucas cores e escolha de paletas seguras,
coerentes ao tema e harmônicas entre si,
certamente evitará surpresas. Nesse caso, é
muito importante o feeling do designer ao
captar essas particularidades em um projeto.
 debate
A única forma de conciliar intuição com téc-
nica é dominar bem o assunto em questão, para
só depois ter conhecimento suficiente para ousar
quebrar algumas regras básicas. Quando estamos
desenvolvendo projetos pessoais, a liberdade de paleta é
grande, pois não existe muita preocupação sobre o públi-
co que vai acessar o seu material. O mais importante nes-
se caso é a experimentação em si.
Em todo caso, quanto mais você experimentar, mais
propriedade terá para decidir que cores usar em projetos
comerciais, pois você sabe quais não funcionam muito
bem, e quais são as combinações mais interessantes.

:: Mark Al
Sócio-fundador da Nitrocorpz
www.nitrocorpz.com.br

35
debate
Como diria Johannes Itten, ilustre professor da escola de
arte alemã Bauhaus: “Cor é vida, um mundo sem cores aparen-
ta estar morto. Assim como a chama produz luz, a luz produz
cor. Assim como a entonação confere ‘cor’ à fala, a cor confere
‘som’ à forma”. A importância do uso criterioso das cores e
seus contrastes ocupam um nobre espaço em qualquer criação.
Seja na pureza abstrata de Mondrian, em um objeto decorati-
vo, na sinalização de trânsito ou em um site na web.
O desenvolvimento da técnica de aplicação e reprodução de
cores evoluiu muito no decorrer dos tempos. Muitas teorias e
modelos matemáticos foram inventados, acompanhados da gran-
de experimentação artística. Atualmente, além do conheci-
mento acumulado, dispomos da facilidade do computa-
dor nesta árdua tarefa de combinação e reprodução
cromática. O caminho das pedras e a garantia de acerto já estão
traçados e documentados, seja por meio da solução matemática
ou pelo fruto da subjetividade do inconsciente humano. Mais uma
vez, parafraseando Itten: “Se você desconhece a técnica e
é capaz de criar obras primas em cores, então este des-
conhecimento é o seu caminho. Mas se você não é ca-
paz de criar obras primas com seu desconhecimento,
você deve procurar a técnica”.
A prática e a experimentação garantem um maior critério
e consciência no uso de cores. Já disseram que um gênio é
99% transpiração e apenas 1% inspiração. Strauss, talentoso
músico do século XIX, confessava que somente quatro ou seis
compassos de suas composições nasciam da inspiração, os de-
mais compassos eram apenas um trabalho de elaboração. O
repertório absorvido por cada indivíduo durante sua vida ga-
rante um vasto acervo de combinações e associações cromáti-
cas, perpetuando o sentido iconográfico da cor. Este conjunto
de experiências exerce uma grande influência, agradável ou
não, consciente ou inconsciente no cérebro humano. Esses es-
36
tímulos ficam armazenados na memória e são usados como
“atalhos mentais”. Como diria Leslie Cabarga, autor de livros
best sellers sobre cores: “Nosso processo mental de seleção
envolve milhões de Gigabytes, oriundo de sonhos conscientes
ou inconscientes, memórias emocionais ou qualquer outra as-
sociação de cor.”
A bagagem cultural no uso das cores não pode ser igno-
rada, ainda mais se considerarmos os últimos dois mil anos de
evolução e experimentação. Atualmente, o uso da cor
está muito mais ligado a conceitos do que a teorias. As
regras artísticas de hoje prezam a liberdade, desde que coe-
rentes e relevantes ao conceito proposto. O uso da cor é cada
vez mais emblemático, com inúmeras referências a estilos e
ícones presentes no inconsciente coletivo.
A aplicação e combinação de cores no design de websites
não fogem à regra. Tudo deve ser pensado e calculado, pois o
uso eficiente da cor pressupõe o aproveitamento desses ata-
lhos mentais. A utilização criteriosa da cor auxilia na compreen-
são de um layout ou navegação. Usar cores para determi-
nar qual o caminho os olhos do seu internauta deve-
rão seguir, atribuindo uma hierarquia ao seu conteú-
do, é um artifício que facilita a usabilidade e uma me-
lhor experiência de consumo.
O uso comedido e consistente das cores transparece uma
maior segurança ao usuário. Assim ele, inconscientemente,
terá seus “atalhos mentais” e saberá identificar rapidamente
onde deseja clicar e que conteúdo quer acessar, garantindo
maior conforto na utilização do seu site ou sistema. O mesmo
processo mental ocorre em crianças pequenas, que se sentem
mais seguras em assistir a um determinado filme diversas ve-
zes, por terem certeza de como será a sua história e seu final.
Exatamente o recurso usado na série Teletubbies. Então, viva
os Teletubbies!
:: Norton Amato
Diretor de criação da Anydesign.net
www.anydesign.net
 estudo de caso :: melissa
Melissa:
explosão de cores na web
Inovação, tecnologia e muito, muito charme.
Estas são as características da Melissa, que,

desde 1979, vem conquistando as mentes,

quer dizer, os pés das brasileiras. E para

comemorar 25 anos de sucesso, a agência

Grafia, que desenvolve os sites e cuida da

gestão de e-commerce da marca há quatro

anos, produziu o “Melissa Celebration”. Em

entrevista à Webdesign, o sócio-proprietário

da empresa, Luciano Burgel, conta como foi

desenvolver esse projeto.

37
estudo de caso :: melissa
Wd: Como foi o de-
senvolvimen-
to do site
Melissa
Celebration?
Quanto tempo
durou todo o
processo, desde
o planejamento
até a implementação?
O site celebra os 25 anos da marca e traz a nova coleção
“Celebration” com os modelos para o verão 2005. Além do novo
layout, há muitas novidades no conteúdo. O projeto foi desen-
volvido em 35 dias, todo em Flash dinâmico, interligado a banco
de dados. Ao todo, envolveu oito profissionais, dentre eles,
de criação, programação e planejamento.
Wd: Na nova coleção, há um resgate do primeiro dese-
nho da sandália aranha, a mais famosa da marca, e no
site é utilizado o logo original da Melissa. Outros elemen-
tos de nostalgia foram utilizados?
O site da Melissa é remodelado duas vezes ao ano, sempre
seguindo o tema da coleção que está sendo lançada. Para cada
uma é produzida uma identidade visual diferente, com elemen-
tos e cores que predominam nos lançamentos. Todo o material
é enviado pelo cliente, como as fotos, por exemplo. No caso
do “Celebration”, todo o layout foi produzido para comemorar
os 25 anos da marca, por isso traz elementos que contam a his-
tória da Melissa. O site temático de cada coleção recebe, em
média, 160 mil visitantes por mês.
Wd: Uma questão que sempre aparece em qualquer pro-
jeto de design é o limite entre a intuição e a técnica no
uso das cores. Como vocês lidam com esta questão? São
feitos testes de usabilidade ou de aceitação do público?
Procuramos usar o padrão de cores usado na coleção atual.
Quanto à usabilidade, definimos o site em canais: “Coleção
2005” – “Closet” – “Zona Fun” – “Mondo Melissa”. Estes canais
foram criados de acordo com pesquisas feitas nos sites de co-
38
38
leções anteriores. Os assuntos mais solicitados foram: moda
com Melissa e games.
Wd: No site antigo, o usuário escolhia a cor de fundo da
página e isso não foi mantido no atual. Como era a res-
posta dos usuários a essa opção de personalização?
A opção de escolher a cor do fundo foi uma experiência bem
interessante. Recebemos muitos emails elogiando a possibili-
dade, com declarações sobre o fundo que mais gostavam. A
intenção da troca da cor foi criar mais interatividade entre o
site e o usuário e dar a sensação de movimento e atualização.
Ou seja, sempre que o usuário entrasse no site encontraria
novas cores e matérias. No projeto atual, optamos por criar
fundos diferentes para cada canal. Porém, ao longo da nova
coleção, vamos disponibilizar novas opções de fundos.
Wd: Vocês acompanhavam quantos usuários mudavam
a cor de fundo? Existia uma cor preferida?
Sim. Todas as ações no site são monitoradas. Cerca de 70%
dos usuários trocavam a cor e a rosa era preferida das
internautas.
Wd: A Melissa é um produto que tem como público-alvo
desde crianças até mulheres de 30 anos. Houve a prefe-
rência por algum desses públicos no novo projeto?
Os novos canais criados no “Melissa Celebration” foram justa-
mente planejados para atingir estes públicos. O “Zona Fun” é
para a garotada de 7 a 13 anos. Já o canal “Closet Melissa”,
voltada para as adolescentes de 13 a 24 anos, dá dicas de
combinações de roupas com as sandálias da nova coleção em
um editorial de moda exclusivo produzido pela Grafia. Outra
novidade é o Game Melissa chamado “A Fábrica Maluca”. Os
links, que fazem su-
cesso entre as me-
ninas de todo o
Brasil, como o
“Mel Responde”,
“Galera Melissa” e
“Fala Sério”, tam-
bém fazem parte do canal.
A outra seção é a “Mondo
 Melissa”, dedicada às mulheres de 20 a 30
anos. Este canal traz informações sobre as
ações de marketing da Melissa, como festas,
agitos e bastidores. Apresenta também notí-
cias sobre a marca no Brasil e no mundo.
Wd: O “Zona Fun” possui muitas atrações
que promovem a interatividade com o
público. De que forma o usuário é esti-
mulado? Como é feita a atualização des-
ta área e qual o software utilizado?
Recebemos cerca de dois mil emails por mês de
meninas que querem participar da “Galera Melissa”, onde elas podem conhecer
outras internautas apaixonadas pela Melissa e formar uma comunidade, e da
seção “Ninguém merece”, contando os micos que pagam em festas e comemora-
ções. Este é um espaço muito divertido e totalmente voltado para esta faixa
etária.
As usuárias são incentivadas, pois respondemos todas as mensagens e envia-
mos ações de email marketing semanais, divulgando quem está na galera
Melissa e novidades do site.
A atualização é realizada semanalmente por um sistema criado pela Grafia, no
qual o Flash está interligado em banco de dados. Uma vez atualizado no banco,
automaticamente está disponível no site.
Wd: De que forma essas áreas de informação
(como “Mondo Melissa” e “Closet”) e
interatividade (como a “Fun”) geram
retorno para a empresa?
A principal função do site é ofere-
cer um canal direto entre a marca
e o público. A intenção é que os
usuários sintam-se no mundo da
Melissa quando acessam o site. É um canal
aberto, onde o usuário pode falar com a
Melissa sobre qualquer coisa, fazer um
elogio, contar seu mico, enviar sua
foto, procurar uma loja, fazer com-

39
 pras online, saber como usar
a sua Melissa etc.
No caso do “Mondo Melissa”,
a intenção é oferecer infor-
mações sobre a marca no
mundo para um público mais
maduro, inclusive imprensa e mer-
cado externo, pois a Melissa está em
um processo de internacionalização
da Marca, chegando aos Estados Uni-
dos, México e Europa.
O “Closet” foi criado em função da última
pesquisa, onde constatou-se uma neces-
sidade das consumidoras de saber como
usar a sua sandália, com que combinar etc.
E conseguimos mensurar o retorno para a empresa através do aumento de vi-
sitas ao site, do número de pessoas no mailing, das compras na loja virtual,
do número de emails recebidos, das respostas às pesquisas e enquetes. Todos
esses índices têm mostrado números muito
satisfatórios, que crescem a cada mês. ICC Profile :
Existem diversas traduções
Wd: Uma característica marcante dos pro-
possíveis para o nome Profile,
dutos Melissa é a cor e este é um dos mai- como: perfil, curva, correlação,
ores desafios num projeto para web. Vocês descrição, tabela, característica,
mapa e dados. O Profile
adotaram alguma medida de precaução
definido pelo ICC (International
para que as cores dos produtos não sejam Color Consortium) é um arquivo
muito distorcidas a cada pc? digital de dados para a descrição
das características de cor de um
As fotos dos produtos são enviadas pelo cliente
dispositivo, tal como um
em CMYK com o ICC profile já setado. A única scanner, impressora ou monitor
precaução que tomamos é salvar estas imagens de vídeo. O objetivo deste
arquivo é ser empregado pelo
em JPG, preservando assim a configuração do
software de gerenciamento de
ICC profile. cor para manter a consistência
de imagens quando lidas,
visualizadas, ou impressas em
diversos equipamentos.

Fonte: http://www.itgcom.com

40
 prepare-se para o natal
Prepare-se para o Natal!
Se você acha que é muito cedo para pensar

em Natal, talvez ainda não tenha se dado

conta de que pouco mais de dois meses nos

separam das festas de fim de ano. Embora não

seja nossa intenção, quase sempre acabamos

deixando tudo para a última hora e repetimos

cheios de culpa: ‘Ano que vem vai ser

diferente!’. Por essas e outras, trouxemos

este assunto para a pauta desta edição, pois

concorrência acirrada não é mais privilégio do

comércio tradicional, mas também do comércio

online. Então, nada melhor do que

antecipar-se no planejamento e na

organização da sua campanha

natalina, o que só vai aumentar

suas chances de êxito. A

seguir, Marcelo Albagli,

diretor de criação da
agência Canvas, nos conta um pouco de

sua experiência nesse tipo de campanha.

41
prepare-se para o natal
“Tempo é dinheiro”
Sábio ditado... Quanto maior o tempo
disponível para a elaboração de uma campa-
nha, maior a possibilidade de alcançar as
metas visadas. Isso porque a estratégia uti-
“Um dos resultados lizada deve basear-se em um complexo
somatório de fatores envolvendo público-
do amadurecimento
alvo, instrumento de abordagem, tecnologia
das empresas é a ser aplicada etc.. “Normalmente temos tra-
balhado com prazos que variam de um a um
uma maior
mês e meio, mas nesse ano mesmo já lança-
receptividade a mos um hotsite que ficou três meses em pro-
dução (da concepção à finalização), e em
formatos mais
dezembro vamos lançar um projeto de email
ricos e inovadores” marketing com o qual estamos trabalhando
desde junho”, revela Marcelo.
Acertando em cheio no público-alvo
Se a internet se popularizou, o universo
de usuários não apenas sofreu um aumento
significativo, mas sobretudo se diversificou.
Dentro desse contexto, definir e traçar um
perfil do público que se deseja atingir tornou-
se uma tarefa nada simples. A rapidez das
42
transformações da sociedade contemporâ-
nea descarta quase que instantaneamente
modismos ou tendências, ou seja, o atual
hoje pode ser obsoleto amanhã, literalmente.
Foi-se o tempo em que se classificava um pú-
blico-alvo por sexo, faixa etária e classe soci-
al. Conforme atesta Albagli, esboçar um per-
fil psicológico desse público já não é suficien-
te: “Tentamos sempre traçar também uma
espécie de ‘perfil tecnológico’ do nosso públi-
co-alvo – se ele acessa a internet de casa ou
do trabalho, qual a velocidade da conexão,
que plugins usa, qual a sua resolução de
tela, sistema operacional... Isso é importan-
te para definirmos como serão nossas peças,
ou seja, se o que pretendemos criar poderá
de fato ser visto pelo público ou não. Por mais
que os microcomputadores estejam cada vez
mais potentes, e o acesso cada vez mais rápi-
do, isso ainda é relevante na concepção de
uma campanha online”.
Paralelamente às mudanças nos públi-
cos-alvos, tem-se a alteração de comporta-
mento de anunciantes. Para Marcelo, “as
empresas estão cada vez mais maduras e
exigentes na concepção de suas campanhas
online. Antes, para se vender uma idéia, era
necessário falar sobre uma série de conceitos
(como interatividade, usabilidade etc.), que
hoje em dia já são mais ou menos dominados
pelo público em geral. Um dos resultados dire-
to disso é uma maior receptividade a forma-
tos mais ricos e inovadores, por exemplo”.
Usando a isca certa
A escolha do instrumento de abordagem
está estreitamente ligada à definição do perfil
do público-alvo. Quanto mais precisa e cor-
reta tal definição, maior a possibilidade de

adequação do meio à mensagem. Fora isso, é
fundamental levar-se em conta o objetivo e a
verba do cliente. “Se já temos uma base de
usuários definida no início de uma campanha,
formada por pessoas que já conheçam a mar-
ca ou os produtos do anunciante, então é
muito provável que o disparo de uma
newsletter faça parte da ação, já que a
receptividade à mensagem será muito mais
provável. Do contrário, outra possiblidade
seria tentar criar o estímulo necessário para
que as pessoas se cadastrassem espontane-
amente no site do anunciante”, explica Mar-
celo. E complementa: “Sobre eficiência da
comunicação, sempre temos como meta, aqui
na Canvas, o equilíbrio entre dois elementos
que consideramos primordiais: o fator sur-
presa da criação e a facilidade de acesso. Em
qualquer meio, o tempo que se tem para cap-
turar a atenção do espectador é muito pe-
queno, e isso na internet é mais delicado ain-
prepare-se para o natal
da. Além disso, sabemos que o fator privaci-
dade na web assume um caráter todo especi-
al; a reação negativa do usuário a pop-ups
‘intrusos’ ou a mensagens indesejadas são
exemplos típicos disso. Portanto, para esti-
mular o visitante a interagir com a peça,
criatividade é fundamental”.
Destacando-se na multidão
Na época de Natal a concorrência pare-
ce tomar proporções ainda maiores do que
nos demais meses do ano, o que faz da arte
de vender uma atividade mais difícil do que
de costume. Achar um diferencial capaz de
tirar o cliente do anonimato torna-se mais
desafiador do que nunca, já que o bombar-
deio de informações comerciais multiplica-se.
Haja análise de mercado e estratégia de ven-
das! “Essa disputa pela nossa atenção é jus-
tamente o que dificulta, cada vez mais, a as-
similação de uma campanha. Nosso inimigo,
portanto, não é só a marca ou o produto
43
prepare-se para o natal
“Para definir o concorrente. Se no Natal o comércio percebe
um aumento de vendas, pense no aumento de
sucesso de uma
mensagens às quais somos expostos nesta
campanha é época”, confirma Albagli.
A estratégia começa lá atrás
preciso saber o que
Uma boa estratégia não dispensa o pas-
se está buscando. sado. Campanhas anteriores podem trazer
dados preciosos, mesmo que implícitos, para
Já foi o tempo em
uma elaboração bem feita. Um estudo minuci-
que quantidade de oso de tais informações aponta acertos, fa-
lhas, resultados e peculiaridades essenciais
visitantes era
para projetar a nova campanha. Segundo
necessariamente Marcelo Albagli, o planejamento baseia-se
“principalmente na experiência acumulada de
sinônimo de
anos anteriores. O nível de detalhe nas res-
sucesso” postas que conseguimos obter por pesquisas
online, acompanhamento dos logs de acesso,
e até mesmo através dos emails enviados pe-
los usuários, nos garante uma precisão muito
44
grande nas informações que precisamos para
aumentar a eficácia da nossa comunicação.
Esse acompanhamento estratégico é um tra-
balho contínuo, que deve ser feito de maneira
séria e consciente, e que certamente aumen-
ta as chances de sucesso de qualquer campa-
nha online”.
Nem só de cifrões é feito o retorno
Mensurar o retorno de qualquer cam-
panha é algo muito relativo. Avaliar o de-
sempenho considerando o retorno financei-
ro isoladamente mascara resultados e influ-
encia estratégias posteriores. Nem sempre
a venda efetiva do produto ou serviço é o
único objetivo do cliente. “Existem diversos
fatores que podem ser avaliados para cal-
cular o retorno de uma campanha, ou de
uma peça, como, por exemplo, o tempo de
permanência do visitante no site, as taxas
de click-through de um banner, o índice de
retorno de usuários, entre várias outros,
mais ou menos específicos. Campanhas nem
sempre são concebidas com o intuito de
transformar cada clique do usuário em uma
venda online, embora obviamente o retor-
no financeiro seja o objetivo em médio e
longo prazo. Exemplos típicos são campa-
nhas de branding ou para qualificação da
base. Para definir o sucesso de uma campa-
nha, é preciso saber o que se está buscan-
do. Já foi o tempo em que quantidade de
visitantes era necessariamente sinônimo de
sucesso. Muitas vezes estamos procurando
por um público bastante específico, ou por
uma ação específica, e nesse caso quanti-
dade não é sinônimo de qualidade”, analisa
Marcelo.
A diferença entre sucesso e fracasso pode
estar na antecedência
Uma campanha de Natal bem sucedida
pressupõe um planejamento que englobe
uma série de passos antecedentes a ela. Se a data mais comercial do ano
por si só já induz ao consumo e favorece as vendas, sejam tradicionais ou
online, nem por isso a estratégia a ser utilizada merece um tratamento
menos exigente. Ao contrário, deve-se extrair o máximo de idéias que o
evento proporciona para potencializar os recursos disponíveis. “Talvez o
maior pecado que se pode cometer nesse tipo de campanha é querer que
ela funcione independente de outras ações anteriores, pois o fato de ser
Natal não é garantia de sucesso. A oportunidade do Natal deve ser apro-
veitada em conjunto com outras ações, que irão garantir que a marca es-
teja presente na memória das pessoas – e isso é decisivo na hora de con-
verter o público em consumidores. Conhecemos bem as características do
Natal: a cor da época é o vermelho e a personagem principal, o Papai
Noel. O maior acerto talvez seja saber aproveitar esse fato para decidir
como se posicionar nesse momento. É
Branding : possível alcançar o destaque que a nossa
Branding é o conjunto de ações
marca precisa criando uma concepção
ligadas à administração das
marcas. São ações que, tomadas completamente diferente, ou completa-
com conhecimento e
mente em sintonia com essas característi-
competência, levam as marcas
cas. Tudo vai depender do produto, do
além da sua natureza
econômica, passando a fazer público-alvo e, claro, das pessoas por
parte da cultura, e influenciar a
trás da concepção e desenvolvimento da
vida das pessoas. Ações com
capacidade de simplificar e
campanha”, conclui Marcelo.
enriquecer nossas vidas num
mundo cada vez mais confuso e
complexo.

Fonte: www.campus.com.br

45
sites eleitorais

Do palanque virtual
É época de eleições, de exercer a cidadania e decidir em
quem depositar o “voto” de confiança. O ano é de 2004 e,
além das campanhas feitas em jornais, rádios, televisão, e
das fortunas gastas com material gráfico, nota-se que a
internet tem se mostrado como uma ferramenta estratégica e
de fundamental importância nesta corrida às urnas. É perce-
bido que a campanha digital proporciona, talvez, uma vanta-
gem que as outras mídias não podem oferecer em tempo real:
a interação direta com o eleitor. A possibilidade de criar no
site chats, enquetes e fóruns de discussão gera uma valiosa
relação entre o candidato e seu eleitor, beneficiando assim a
troca de idéias e informações sobre os temas que envolvem a Candidato Cesar Maia :: Rio de Janeiro
sua candidatura. O desenvolvimento do site do candidato Cesar Maia começou há

Levando em consideração os números atuais da internet
no Brasil, pode-se dizer que a campanha política que não valo-
riza a web parte para a disputa eleitoral em grande desvanta-
dois anos, quando os primeiros esboços ainda estavam sendo
planejados com base na antiga página do prefeito em exercício.
Para Luís Mendes, gerente de internet da equipe de Cesar Maia, o
trabalho foi transformar o site pessoal do candidato em um veículo

gem. Foi-se o tempo em que o marketing político tratava o
candidato como um simples produto a ser vendido em uma em-
balagem bonitinha e cheia de firulas. As últimas eleições têm
de campanha, que exigiria uma outra dinâmica. “Já vínhamos
traçando a linha de comunicação do candidato, revelando,
principalmente, o pensamento de suas ações para a educação,
esportes, comunidades carentes etc.”

mostrado que um jingle bem feito e programas eleitorais de
boa qualidade não sustentam por si só uma boa imagem políti-
ca. É preciso que ela se faça espontaneamente, pela divulga-
ção de idéias e ideais.
Para estudar o assunto, a Webdesign analisou alguns sites
de candidatos à prefeitura das cidades do Rio de Janeiro e São
Paulo e entrevistou as suas respectivas equipes. Essa análise
rendeu dicas interessantes de como conciliar as técnicas do
marketing político aos preceitos da comunicação online e seus
Segundo Luís, o site tem uma estrutura de navegação orgânica, que
se caracteriza pela capacidade de dar múltiplas visibilidades ao
mesmo conteúdo. Segundo o gerente, como a candidatura de Cesar
busca a reeleição, deve-se destacar na arquitetura da informação o
que foi e o que está sendo realizado e os avanços programados para o
futuro. “Existem projetos sociais importantes desconhecidos pelo
público que mais acessa a internet, até porque não convive
diretamente com eles”, destaca.
Luís explica que, em uma visão macro de atuação, uma eleição não é
tão diferente de uma grande campanha de varejo. Existem ações em
que se destacam os programas de TV e comerciais do horário gratuito

paradigmas. A intenção não é a de identificar qual site ou propos-
ta de campanha é a melhor, mas sim a de fazer um “raio X”, sem
nenhum tipo de partidarismo ou identificação de idéias, das es-
eleitoral e, em uma linha mais corpo-a-corpo, que são as ações de rua,
existem as panfletagens e a militância. Ele lembra que em alguns
casos existem eventos, como showmícios e ações complementares,
que têm suas ferramentas específicas: “A internet entra nesse caso.

tratégias adotadas pelos candidatos no meio online. Sua atuação é complementar e não tem a pretensão de atingir toda a
população”, ressalta.

46

à urna eletrônica
André Philippe Iunes
O gerente de internet destaca que o site
desenvolvido para o candidato é fácil, intuitivo e
claro para ser compreendido por qualquer
segmento. “Isso significa que o jovem de 11 anos
de uma comunidade carente que entrar em um
laboratório de informática de uma escola municipal
e acessar o site terá um conteúdo tão consistente
quanto um investidor de 30 anos que se preocupa
com o futuro da cidade. O importante é que o
conteúdo seja interessante para todos.
Apresentado com consistência e responsabilidade.
Sem promessas vazias”, enfatiza Luiz.
www.cesarmaia25.com.br
sites eleitorais
Candidato Jorge Bittar :: Rio de Janeiro
Com o objetivo de alcançar três tipos específicos de público: o eleitor, a imprensa e a
militância de uma forma geral, o site do candidato Jorge Bittar é o que possui a
interface mais diferenciada. Para Gerson Penha, responsável pelo planejamento
editorial, estrutura de navegação e layout, as informações contidas no site são fáceis
de serem encontradas pelo usuário. Ele explica que a diferença entre a campanha feita
para a TV para a do meio online, é que na primeira, o compromisso com o emocional se
dá de maneira mais enfática, na intenção de persuadir o eleitor. Já na internet, além
das técnicas de sedução do visitante, o papel do site político é o de detalhar e tornar
disponíveis informações que nem sempre se encaixam no horário eleitoral gratuito, seja
pelo formato ou por sua relevância.
Todas as informações contidas no site são atualizadas por meio de uma ferramenta de
gerenciamento de conteúdo. O aplicativo permite que um editor conectado à internet
possa alimentar o site sem conhecimentos técnicos. Quando uma foto é atualizada, por
exemplo, o sistema gera automaticamente outros formatos: o original em alta
resolução, para jornalistas, uma pequena para a página inicial, uma para a própria
matéria e, por último, uma foto ampliada, porém em baixa resolução. Segundo Marco
Aurélio, responsável pela área tecnológica, o grande diferencial do site do Bittar está
na interatividade e dinamicidade das informações, tanto na home quanto nas demais
páginas, garantidas pela facilidade de publicação
da ferramenta de gestão de conteúdo. wysiwyg :
Com a intenção de oferecer o maior número de Significa “what you see is what
informações sobre o candidato, Marco explica que you get” (o que você vê é o que
a interatividade com o usuário está garantida você obtém). Nomenclatura
desde a possibilidade do internauta perguntar e referente aos famosos editores
obter respostas, a downloads de material de de html, como o Dreamweaver,
campanha, fotos para jornalistas e solicitação de Frontpage etc, em que o usuário
newsletter, gerada e enviada pelo Editor do site. tem a possibilidade de editar
No módulo wysiwyg, o autor ou editor identifica, uma página diretamente pelo
seu layout.
47
sites eleitorais

antes mesmo da publicação da matéria, alguns detalhes de formatação, como as

quebras de linha, altura e tipologia das fontes.

Em relação à disposição das informações em sua interface, existe um espaço para uma
manchete giratória que, segundo Marco, chama mais a atenção do que as demais por
estar em movimento. Há também a seção de apoios, que a cada acesso muda
aleatoriamente o nome de quem está apoiando o candidato. O site conta também com
uma ferramenta de busca que retorna a pesquisa do usuário em todas as seções.

Candidato Luís Paulo Conde :: Rio de Janeiro

O site do ex-prefeito Luis Paulo Conde teve todo o seu planejamento voltado para
alimentar a mídia com informações sobre sua candidatura. Com uma ferramenta de
gestão do conteúdo, a equipe de jornalistas tem acesso a todas as seções, podendo www.bittar13.com.br
inclusive otimizar a navegação principal, conforme as possíveis estratégias adotadas.
Segundo Luciana Nery, gerente de internet da campanha, o site do Conde oferece ao
candidato a oportunidade de aprofundar determinadas questões. “É possível detalhar
propostas e esclarecer dúvidas a respeito de situações que surgem no decorrer das
eleições. Muitas vezes, esse tipo de esclarecimento não pode ser feito em aparições
de TV ou matérias de jornal, por limitações de espaço e tempo.”

Luciana explica que a internet, além do aprofundamento das propostas do candidato,

permite que os usuários conheçam mais sobre as suas realizações. “É possível
‘refrescar’ a memória do eleitor, destacando os projetos de Conde. Também temos por
hábito responder a todos os emails, o que oferece ainda mais um canal de
comunicação”. Ela lembra que o site é como se fosse um “espelho” da campanha.
“Acompanhamos toda a agenda do candidato e reagimos a todos os temas que estão
em voga na mídia, questões que surgiram em debates e declarações de Conde sobre os
fatos atuais”.

A gerente explica que todo o site foi planejado visando buscar o maior número possível
de usuários. O layout obedeceu a um projeto no qual as informações pudessem ser
encontradas com muita facilidade, evitando assim problemas como o click duplo e
outros decorrentes da falta de um estudo de usabilidade. “Esforçamo-nos para
democratizar o uso do site, para que fosse acessado por pessoas que se conectam via
banda estreita. Por isso o fizemos leve, com poucas imagens, rápido de carregar. Como
pretendemos nos comunicar com cariocas de todos os bairros, estamos dedicando
espaço a todos eles. Se um bairro é citado, a matéria relacionará as principais
conquistas de Conde na região e suas propostas para lá. Dessa forma, atingimos a
todos de uma forma mais concreta”, destaca.

Com respeito à divulgação do site, Luciana explica que o horário eleitoral gratuito fez
com que as visitas diárias crescessem muito e se tornassem relevantes na estratégia de
campanha. “Acompanhamos quais assuntos despertam mais interesse nos eleitores,
para então podermos expandir o assunto”. Apesar de não haver ações específicas de
divulgação, o endereço da página é citado em todo o material de campanha. Além
disso, ela lembra que o site conta com a colaboração espontânea de seus visitantes,
que adicionam a URL em seus websites, e com isso geram tráfego.

Candidata Jandira Feghali :: Rio de Janeiro

Com uma navegação dividida em três colunas principais, característica também

observada entre quase todos os sites analisados, o site da candidata Jandira Feghali www.conde15.com.br

48
 sites eleitorais
possui uma navegação simples e intuitiva. Segundo Gustavo Alves, editor da página, a
preocupação em torná-la mais acessível foi uma constante no seu planejamento.
“Tivemos o cuidado de usar a linguagem mais acessível possível, sem perder em
qualidade de conteúdo. Utilizamos aplicativos mais leves, funcionais com acessos
discados e banda larga”, explica.

Para o editor, a internet é um veículo único, pois permite unir sons, imagens e texto: “ela é
hoje a terceira mídia mais importante de uma grande campanha, atrás somente do rádio e
da TV”. Entretanto, ele alerta para o problema da exclusão digital, que vai contra os
objetivos principais de uma campanha eleitoral, que é atingir o maior número possível de
pessoas. “Temos um exército de ‘excluídos digitais’ no país, e isto é um problema com
relação ao alcance desta mídia”, ressalta Gustavo.

Com uma equipe formada por um editor de conteúdo, uma repórter, um webdesigner e
um fotógrafo, o site é atualizado de três a quatro vezes ao dia. Na opinião de Gustavo,
os eleitores querem conhecer o máximo possível dos candidatos, sua história, sua
família e propostas. “Há dez anos, as únicas fontes de informação sobre os candidatos
www.jandira65.com.br eram eles mesmos ou as críticas de seus adversários. Hoje, possuímos uma série
infindável de recursos para formar nossa opinião. Se o candidato oferece a maior parte
desses dados em um único lugar, ele poupa tempo de pesquisa do usuário e se torna
mais acessível.”

Com relação à divulgação da página, Gustavo explica que todos os materiais de

campanha remetem ao site e trazem o seu endereço: “Até mesmo os adesivos têm a
URL estampada, desta forma alavancamos os page views, que hoje chegam a um novo
visitante por minuto”. Como em praticamente todos os sites analisados, o da candidata
Jandira Feghali também possui uma ferramenta de aferição de acessos. Com ela é
possível a equipe traçar um direcionamento melhor para as estratégias que serão
adotadas. “Tabulamos estes dados coletados diariamente como controle de audiência,
mensurando os assuntos de maior interesse pelos internautas e pelos concorrentes que
visitam nosso site”, conclui Gustavo.

Candidato José Serra :: São Paulo

Quanto mais completo, variado e ágil for o serviço, mais pessoas, com certeza, vai
atrair e cativar. É a partir desta premissa que Mary Zaidan, chefe de redação da
campanha de José Serra à prefeitura de São Paulo, define como deve ser um site
político. Semelhante aos outros projetos analisados, ela explica que existiu uma
preocupação em elaborar um site amigável, de fácil navegação, capaz de atender
aqueles que têm tecnologias simples, como linhas discadas e equipamentos de menor
porte. “A equipe de concepção e criação chegou a um formato que considera ideal para
que todos os eleitores e cidadãos possam receber informações e interagir com a
campanha de José Serra”, destaca Mary.

Com experiência de mais de 10 anos na área política, a jornalista destaca que todas as
formas de mídia contribuem para a divulgação da imagem do candidato. Para ela, a
www.serra45.org.br rapidez e a interatividade próprias do meio online possibilitam um contato ainda maior
com o eleitor, que recebe todas as informações e pode, se quiser, participar das
atividades da campanha. “Ao acessar o site de José Serra é possível acompanhar a
evolução de sua campanha, a definição de todos os itens do Programa Serra Prefeito, a
agenda do dia, tanto do candidato quanto dos grupos que elaboram o programa de
governo e da mobilização”. Mary lembra ainda que o usuário pode imprimir qualquer
material de campanha, gravar o jingle e ver as inserções de TV no Comitê Virtual,

49
sites eleitorais

além de espaços específicos para enviar sugestões e comunicar-se com a campanha.

Mary ressalta que a proposta que deu formato ao site foi, evidentemente, a de reunir o
maior volume de informações de interesse do eleitor e de todos que quiserem
acompanhar a campanha e divulgar a imagem do candidato. Mas, explica que até
pelas características de dinamismo da linguagem da internet, o site pode receber
alterações, incluindo novos itens. “Na noite de segunda-feira, dia 30 de julho, data
do debate realizado pela Rede Record, as equipes de tecnologia e imprensa da
campanha puderam, juntas, atualizar as notícias de forma ininterrupta, até o final
do evento, com textos e imagens ’up to date’. É a rede cumprindo o seu papel de
fornecer informações em tempo real”, destaca.

Como nos outros sites analisados, a linguagem escolhida é majoritariamente

jornalística, com prioridade para o noticiário distribuído nos vários itens da página. Em

alguns ícones, há espaço para uma ação mais publicitária, em

especial no Comitê Virtual e no material de apresentação do
candidato. No que diz respeito à missão do site, Mary diz que a
página está dando o retorno esperado à campanha. “O site tem cumprido o nosso
objetivo de manter um relacionamento estreito de duas vias com o eleitor interessado
em informar-se ou participar de alguma forma, além de democratizar todas as
informações”, conclui a jornalista.

Candidata Marta Suplicy :: São Paulo

Com um layout que comporta uma grande quantidade de informações, o site da

candidata Marta Suplicy foi concebido com o objetivo de alimentar a militância com
dados sobre a campanha e as realizações do seu atual governo. Para Flávio Paes,
coordenador do site da atual prefeita, mais do que divulgar a imagem política da
candidata, o site divulga o seu trabalho e ainda esclarece questionamentos levantados
por seus adversários. “Desde o início, procuramos nos comunicar com os paulistanos de
uma maneira mais geral, explicando tudo de forma simples e objetiva. Levamos em
consideração também o fato de que o eleitor nem sempre conhece em profundidade as www.martaprefeita.com.br

questões relativas à cidade”, destaca.

Na opinião do coordenador, em uma campanha política, a boa presença online torna-

se vital para cativar os indecisos, pois o site pode oferecer informações de qualidade
que permitam ao eleitor analisar as realizações e as propostas de cada candidato.
“Ficamos muito felizes quando recebemos mensagens de internautas que decidiram
votar na Marta depois que entenderam, por exemplo, uma idéia exposta no site.
Isso faz parte do trabalho da equipe de comunicação que atualiza a página. Em dia
de debate, por exemplo, publicamos cerca de 30 notícias no período
de aproximadamente três horas, esclarecendo os ataques dos adversários e
fornecendo subsídios para o trabalho da imprensa.”
Você visita ou já visitou sites
Entre os dias 2 de julho, quando o site foi lançado, até o dia 30 do mesmo mês, Flávio
de candidatos às eleições?
lembra que foram publicadas cerca de 500 notícias e quase 200 imagens, que podem
27% Sim
ser utilizadas, em alta resolução, pelos jornalistas. Ele explica que o ponto de partida
73% Não
para divulgar o endereço da página da candidata foi feito pelo mailing do Partido dos
Participe das enquetes acessando o site
Trabalhadores (PT). E quando o objetivo é conciliar as técnicas do marketing político às www.arteccom.com.br/webdesign
estratégias do marketing online, o coordenador explica que ao tratar o visitante com
respeito e ética, falando sempre a verdade, conquista-se credibilidade, o que por sua
vez ajuda a conquistar eleitores.

50
Flávio lembra que, além da grande quantidade informações contidas no site, ele é
atualizado de forma a auxiliar as demais ações da campanha, como os programas
de rádio e TV, por exemplo. Por meio de ferramentas de medição dos acessos ao
site, é possível aperfeiçoar o projeto editorial.  ”Além disso, é fundamental
também a análise das mensagens enviadas pelo canal ‘Fale Conosco’, que permite
ao internauta fazer comentários, apresentar sugestões à equipe de programa de
governo ou simplesmente mandar o seu recado à candidata”, conclui.

Troca de farpas digitais

A internet é fantástica para todos os tipos de eleitores. Os que já de-
cidiram o voto pelo candidato encontram referências importantes que
consolidam a sua escolha. Para os indecisos, é uma ferramenta incrível
para a comparação de propostas, de perfil dos candidatos, das preocupa-
ções de cada um e para a tomada de decisão. Para os desmobilizados é uma
forma de deixar uma pulga atrás da orelha. E, para quem vota em um outro
candidato, sempre há a chance do efeito comparativo, de encontrar uma
informação que tenha mais a ver com ele.
Na opinião de Luís Mendes, gerente de internet da campanha de
Cesar Maia, as estratégias são montadas neste sentido. “Vale recordar o
site de José Serra em 2002, como ele atuou no sentido de atacar o Ciro
Gomes, com humor, mas contundente. Ou o de Bush e Cheney entrando de
sola em Kerry e Edwards. Muitos dos ataques são pesados e geram des-
gastes. Outros são bem fundamentados e chacoalham certezas do eleitor.
Muitos eleitores do Ciro abandonaram o barco naquele momento”, lembra.
Entretanto, deve-se pensar bem antes de fazer ataques. Segundo
Luís, no caso da polarizada eleição nos EUA, isso é mais fácil de acontecer
pelo próprio maniqueísmo natural da sociedade americana. Ele alerta que
quem gasta mais espaço citando o nome do candidato adversário no site do
que o do próprio está seguindo o caminho errado. “É o que acontece lá
fora. Faça uma busca cruzando os nomes Kerry e Bush. Há dias em que o
número de citações a Kerry no site de Bush chega a ser constrangedor. En-
quanto isso, o site do Kerry é focado no propositivo. Mas isso faz parte do
jogo político”, explica.
Com relação ao marketing político, Luís destaca que nada substitui
em eficácia a comunicação um a um, o contato direto com eleitor, seja na
rua ou na web. Ele enfatiza que um bom email personalizado tem muito
mais chances de converter um eleitor. “Parece uma ação individual,
mas um eleitor convencido pode propagar sua mensagem para
outros. E isso é muito mais importante do que mandar uma
mensagem em massa. Ainda estamos no meio do caminho e muitas coi-
sas ainda surgirão nesse terreno da campanha política online”, conclui.

51
tutorial
scripts
Construindo sites com
em várias linguagens
Às vezes temos que desenvolver sites complexos onde o
uso de uma só linguagem não resolve todos os problemas, ou
temos que acrescentar um item a um site já existente, que se-
ria muito mais simples e rápido se desenvolvido em uma lingua-
gem diferente da atual. Isso seria muito simples, se as infor-
mações de sessões do site não tivessem que ser compartilha-
das, já que em linguagem diferentes isto não é possível, e se
nenhuma das informações fosse sensível como senhas, que
não podem ser enviadas diretamente de um formulário, por
exemplo. O que fazer nestes casos?
Há uma técnica simples para resolver este problema
que é o uso de banco de dados, no qual se pode gravar um có-
digo de sessão e um usuário como chave, e as informações ne-
cessárias para o compartilhamento das páginas escritas em lin-
guagens diferentes. Vamos usar aqui como exemplo as lingua-
gens ASP e ASP.Net e o banco de dados Sql Server, mas pode
ser usada qualquer combinação de linguagem e banco de da-
dos para esta tarefa. O exemplo aqui trata de um site ASP que
precisa passar informações para páginas ASP.Net
O primeiro passo é criar a tabela que guardará as informa-
ções que serão compartilhadas entre as linguagens. A tabela
tem que ter como chave o código da sessão, o usuário que ge-
rou a sessão, e a data e hora em que esta foi criada, para faci-
litar consultas e validações futuras, e um campo do tipo ntext
(string com comprimento variável) que guardará as informa-
ções que serão compartilhadas entre as linguagens.
CREATE TABLE [SESSAO_SITE]
(
[cod_sessao] [nvarchar] (100) NULL , /* codigo da sessao */
[data] [datetime] NULL , /* data que foi criada a sessão */
[parametro] [ntext] , /* parâmetros da sessão */
[usuario] [nvarchar] (100) NULL /*usuario que criou a sessao
52
por Natelson Nascimento
*/
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
O segundo passo é criar funções ASP que criem a chave
da Sessão e que insiram os dados no banco de dados.
sessao_site.asp
<%
‘Funcao que gera a chave usando um function do proprio Sql Server
para
‘gerar chaves randomicas. Se voce for usar outro banco de dados,
‘voce pode escrever o seu proprio codigo para geracao de chaves
randomicas.
‘ Ha varios exemplos disso na internet em diversas linguagens.
Function GeraRandomicoSql(objConexaoSql)
Set objChave = Server.CreateObject(“ADODB.RecordSet”)
sQueryChave = “SELECT NewId() as Chave”
objChave.Open sQueryChave, objConexaoSql
sChaveRandomica = objChave(“Chave”)
objChave.Close
Set objChave = Nothing
GeraRandomicoSql = sChaveRandomica
End Function
‘FUNCAO QUE GRAVA NA TABELA SESSAO_SITE TODAS AS
SESSIONS UTILIZADAS NO MOMENTO, SEPARAS POR “|”
‘RECEBE COMO PARAMETRO UM OBJETO DE CONEXAO JA
CRIADO E O USUÁRIO QUE GEROU A SESSAO
Function Gera_SessaoSite(objConexaoSql, sUsuario)
boolInicial = True
sParametro = “”
‘Loop que percorre cada Session do Asp e monsta em
uma string no formato:
‘nome_session=valor_session|nome_session2=valor_session2....
For Each item in Session.Contents
If not IsObject(Session.Contents(item))
Then
If not boolInicial Then
 sParametro = sParametro & “|”
Else
boolInicial = False
End If
sParametro = sParametro & item & “=” &
Session.Contents(item)
End If
Next
sCod_sessao = GeraRandomicoSql(objConexaoSql)
sUsuario = Trim(sUsuario)
SParametro = Replace(SParametro,”’”,”’’”) ‘como se trata de uma query,
tira os apostrofos e aspas caso hajam para evitar erros na execução da query
sQuerySessao = “INSERT INTO SESSAO_SITE(cod_sessao, data,
parametro, usuario) VALUES (‘“ & sCod_sessao & “‘,GETDATE(),’” & SParametro & “‘,’” &
sUsuario & “‘)”
‘Executa a query
objConexaoSql.Execute sQuerySessao
‘seta o retorno da funcao com o valor da chave criada
Gera_SessaoSite = sCod_sessao
End Function
%>

O terceiro passo é montar este quebra-cabeça dentro da sua aplicação. Para

demonstrar isso vamos imaginar que temos uma página ASP de um site de
consultoria. Um usuário x teve que efetuar um login para utilizar o site, e tem di-
versas Sessions criadas com informações sobre seu perfil de usuário e status, e
Sessions que estejam ligadas ao cadastro do cliente que ele está consultando. O
usuário está dentro de uma página de cadastro de um cliente, e nela há um link
que leva a uma página .aspx (ASP.Net) que mostra um gráfico sobre o
faturamento mensal daquele cliente.
Segue abaixo o código do link da página ASP:
<!—#include file=”funcoes.asp” —>
<%
Set objConexaoSql = Server.CreateObject(“ADODB.Connection”)
objConexaoSql.Open “”DATA SOURCE=IP da
base;DATABASE=nome_base;UID=usuario_base;PWD=senha_base;”

%>
<a href=”cria_sessions.aspx?cod_sessao=<%=Gera_SessaoSite(objConexaoSql,
“webdesign”)%>&usuario=webdesign”>teste</a>
<%
objConexaoSql.Close
Set objConexaoSql = Nothing
%>

Ao clicar no link, o usuário chamará a página .aspx com o código abaixo com
o código abaixo:
<%@ Page Language=”C#” %>

53
tutorial
<%@ import Namespace=”System.IO” %>
<%@ import Namespace=”System.Web” %>
<%@ import Namespace=”System.Data.SqlClient” %>
<script runat=”server”>
void Page_Load(Object sender, EventArgs e)
{ string sValorParametro=obj[i];
/* GUARDA EM SESSIONS O VALOR DA COD_SESSAO QUE
VEIO NA URL E O USUARIO */
Session[“cod_sessao”] =
Request.QueryString[“cod_sessao”].ToString();
Session[“usuario”] = Request.QueryString[“usuario”].ToString();
/* PEGA DO BANCO OS PARAMETROS COM BASE NO
COD_SESSAO E USUARIO */
/* CRIA A CONEXAO COM O SQL, USO AQUI UM
DRIVER PRÓPRIO PARA O SQL SERVER, PARA SIMPLIFICAR O
EXEMPLO, MAS O .NET TEM OUTROS DRIVERS PARA OUTRAS
BASES DE DADOS */
SqlConnection conexao = new SqlConnection(“DATA SOURCE=IP
da
base;DATABASE=nome_base;UID=usuario_base;PWD=senha_base;”);
/* MONTA A STRING QUE FARA A BUSCA NA TABELA
SESSAO_SITE */
string sQuery=”SELECT parametro FROM SESSAO_SITE WHERE
cod_sessao=’” + Session[“cod_sessao”] + “‘ AND usuario=’” +
Session[“usuario”] + “‘“;
/* CRIA UM OBJETO COMMAND PARA DEFINIR A
INSTRUCAO SQL */
SqlCommand comando = new SqlCommand(sQuery,
conexao);
/* ABRE A CONEXAO */
conexao.Open();
/* CRIA-SE UM OBJETO DATAREADER COM O
RESULTADO */
SqlDataReader s = comando.ExecuteReader();
try
{ onado criar um site qualquer que enviasse estas informações e
string sParametros=””;
/* SE RETORNOU ALGO SETA UMA STRING COM O VALOR
DO CAMPO PARAMETRO */
while(s.Read())
{ de dados para serem compartilhados entre páginas de diferen-
sParametros=s[“parametro”].ToString();
}
/* USA O METODO SPLIT PARA SEPARAR EM
UM ARRAY A STRING USANDO COMO */
/* DELIMITADOR O CARACETER “|” */
string[] obj=sParametros.Split(“|”.ToCharArray());
/* FAZ UM LOOP PARA PERCORRER CADA ITEM
54
DO ARRAY CRIADO E SETAR CADA UMA DAS SESSIONS
NECESSARIAS */
for(int i=0;i<obj.Length;i++)
{
/* CRIA UMA NOVA STRING COM O VALOR
ATUAL DO INDICE DO ARRAY */
/* USA NOVAMENTE O SPLIT PARA SEPARAR O
NOME DA SESSION DO SEU VALOR
USANDO COMO DELIMITADOR O CARACTER “=”
*/
string[]
obj2=sValorParametro.Split(“=”.ToCharArray());
/*CRIA UMA SESSION COM O NOME DO
PRIMEIRO ITEM DO ARRAY, E COM O VALOR COM O SEGUNDO
ITEM DO ARRAY */
Session[obj2[0]] = obj2[1];
}
}
finally
{
/* encerra a conexao com o banco de dados */
s.Close();
conexao.Close();
}
}
</script>
Com os dados conseguidos no banco de dados a partir da
chave única que foi passada na URL e o usuário, fica fácil com-
partilhar as sessões entre sites e fazer as devidas validações
de segurança que se queira, para garantir que um usuário que
não tenha a devida permissão não acesse aquele item do site.
Se o método de passar todas as informações fosse via formu-
lário, por exemplo, seria muito simples um usuário mal- intenci-
“hackear” a página .aspx, colhendo as informações que qui-
sesse do cliente do site de consultoria.
Este método de gravar os valores de sessões no banco
tes linguagens também é utilizado em sites que queiram man-
ter a sessão do usuário criada nos casos de conexão perdida
ou de sessão expirada, mas isto já é um assunto para discutir-
mos em outra ocasião.
Agora é só usar a imaginação e ficar livre para usar as lin-
guagens que melhor se adequarem a sua necessidade.
55
estratégia online

Marcello Póvoa
Criou a MPP Solutions, empresa de consultoria estratégica, criação e desenvolvimento em
mídia interativa. Foi Diretor da Globo.com e da IconMediaLab (Nova Iorque) com inúmeros
projetos premiados internacionalmente. Possui Masters of Science in Communications
Design pelo Pratt Institute (NY) e MBA em Administração pela Coppead, UFRJ. É autor do
livro “Anatomia da Internet” (Casa da Palavra).
mpovoa@mppsolutions.com

Uma nova forma de escutar

(e consumir) música
Saiu em agosto, no Brasil, o iPod Mini da Apple, um show de marketing, design e tecnologia.
A experiência do usuário
Um player MP3 não é nenhuma novidade. No entanto, um player do tamanho de um cartão
de visitas, com 4GB (cerca de 1000 músicas) e um desenho industrial estupendamente bem re-
solvido em forma e função já seria o suficiente para chamar atenção. Some ao hardware do
iPod Mini, o software iTunes rodando no PC. O iTunes é uma ferramenta de administração de
MP3 e loja de comércio eletrônico ao mesmo tempo. Tudo trabalhando em perfeita sincronia sob
uma usabilidade intuitiva e poderosa. O resultado é um produto criativo conceitualmente, ma-
nufaturado com qualidade de produção industrial e software – e com uma característica muito
importante: realmente funciona.
O resultado é uma experiência impactante, o suficiente para mudar a forma como escuta-
mos e consumimos música – o colunista que vos escreve testou o produto pessoalmente. Após
começar a converter alguns CDs para MP3, chega-se a uma conclusão mórbida: CDs têm seu
atestado de óbito assinado como forma de distribuição de música. É muito mais prático, agradá-
vel e poderoso poder buscar músicas em um HD por parâmetros como artista, estilo musical ou
álbum. Ao mesmo tempo, a capacidade de personalização, criando seus “playlists” gera uma
experiência musical muito mais agradável – já que está exatamente a seu gosto.
O player MP3 é no final das contas um servidor de música, que o usuário pode ligar ao
aparelho de som da sala e servir músicas literalmente por dias seguidos se quiser. O “servidor”
é, no entanto, pequeno o suficiente para acoplar a seu braço com uma ergonômica banda aces-
sória ( também com a assinatura do departamento de desenho industrial da Apple ), e sair an-
dando ou mesmo correndo com o equivalente 60 CDs acoplados a seu corpo.
O software iTunes
O iTunes roda no PC (Windows ou Mac) e é uma super ferramenta para converter e gerenciar
suas músicas em formato digital. Ao mesmo tempo é uma loja, onde pode-se comprar músicas indi-
vidualmente ou álbuns inteiros. No Brasil, a loja pode ser vista, mas infelizmente a conclusão da
compra ainda não funciona. A loja é um acordo da Apple com gravadoras para distribuir música di-
gitalmente e legalmente. Assumindo que o preço é correto ao mercado, é uma experiência de con-
sumo muito mais prática: direto do PC para o iPod – e para o aparelho de som da sua casa. Steve Jobs
foi um interlocutor com a indústria fonográfica durante a crise Napster. A primeira reação da indús-
tria foi eliminar através de ações legais o novo canal de distribuição digital que surgia com o Napster

56
 estratégia online
“Quando o produto é bom, seu
posicionamento de marketing correto e o
preço certo ao mercado, os resultados
inevitavelmente aparecem”

e a internet. Jobs convenceu os executivos da música que a ten- últimos oito anos, impulsionada pela venda de iPods. De
tativa de eliminar o canal digital era infrutífera. O caminho seria acordo com o relatório, foram 860 mil unidades vendidas no
aprender como capitalizar neste canal, criando uma nova forma trimeste, contribuindo para um lucro líquido de US$ 61 mi-
de geração de receita. Destas conversas surgiu a loja do iTunes, lhões. O sucesso, no entanto, está gerando problemas na
que continua a gerar faturamento mesmo depois da compra do cadeia de manufatura e distribuição – o que pode atrapa-
player iPod. Ou seja, é um sistema que se retroalimenta do ponto lhar vendas futuras.
de vista econômico. Ao que parece, a Apple aprendeu a dura lição do passado
Boas conseqüências de que o quesito qualidade não é a única métrica de sucesso. O
Quando o produto é bom, seu posicionamento de sistema iPod e iTunes é brilhantemente bem resolvido por to-
marketing correto e dos os ângulos: do marketing, ao design, à tecnologia. O su-
o preço certo ao cesso não é, definitivamente, uma coincidência do destino.
mercado (ao menos
no americano, por en-
quanto), os resultados
inevitavelmente apa-
recem. A Apple fe-
chou o último trimes-
tre com o maior fatu-
ramento líquido dos

57
webwriting

Marcela Catunda
Trabalhou nas redes Bandeirantes, TV Gazeta, Manchete e Globo.
Foi redatora da DM9DDB e supervisora de criação de mídia interativa
da Publicis Salles Norton. Atualmente é autônoma.
marcelacatunda@terra.com.br

Um é pouco, dois é
bom, três é demais!!
Sexta-feira chuvosa 10:45 minutos
Sala de Espera.
Leio uma Caras em que a Xuxa ainda flertava Luciano Safir enquanto penso:
– Por que diabos marcaram essa maldita reunião para as dez da manhã?
– Quer um café Marcela? – oferece a simpática recepcionista.
– Mais um? Já tomei uns cinco litros. – respondo achando a recepcionista não mais tão simpática.
– Não quer um agora com leite? – ai meu Deus ela insistiu. Nem respondi.
Graças a minha Santa Clara fomos interrompidas.
– Pode entrar Marcela, o senhor Fulano de Tal vai atender você.
Chega então uma outra pessoa que me acompanha até a sala de reuniões.
Sexta-feira chuvosa 10:55 minutos
Sala de Reunião.
– Olá Marcela. Eu sou a assistente do Fulano. Ele está acabando uma reuniãozinha com a
equipe e já vem atender você. – e parte.
Me deixou sozinha, eu penso. O que eu vou fazer se tenho cabeça pra pensar? Então fiquei
pensando nas coisas boas que podiam estar por vir. Era uma grande produtora e pela primeira vez
eu era chamada para um trabalho com eles. Eu seria a roteirista de um mega projeto. Legal!
Sexta-feira chovendo pacas 11:25 minutos
Sala de Reunião.
Meu Deus, alguém arranca aquele relógio da parede.
Sexta-feira trovejando 11:35 minutos
Sala de Reunião.
Vou embora. Eu não sou palhaça.
Sexta-feira relampejando 11:45 minutos
Sala de Reunião.
Não fui embora. Sou palhaça?
– Oi Marcela, desculpe o atraso.- entra o Fulano estendendo a mão.
Não respondo nada e também estendo a minha mão. Fazer o quê?
– Fiz você esperar muito? – por que ele puxou esse assunto?
– Tudo bem. – falsa.
– Mas vai valer a pena ter esperado. É um grande projeto.

58

“Não aceitei porque não consegui
entender nem quem mandava ali.
Seria o elefante o dono do circo?”
Conheço o Vale a Pena Ver De Novo, mas o vale a pena
ter esperado... (tudo bem era apenas uma licença poética).
Ouvi atenta e concluí: era mesmo um super projeto.
Sexta-feira ainda chuvosa 12:45 minutos
Sala de Reunião.
Entra então em cena o número dois.
– Oi Marcela, esse é o Beltrano meu sócio aqui na Produ-
tora. – diz Fulano.
Depois das apresentações retomamos nosso papo, quer
dizer, era o que eu pensava, mas não foi o que aconteceu.
– Não é bem assim viu Fulano, eu tava agorinha falando
com o Cicrano e a gente mudou umas coisas. A Marcela não
devia só escrever esse roteiro, ela devia acompanhar a edi-
ção. Fica com mais molho.
Mais molho? E então imagino um prato de spaguetti. Pô!
São quase uma da tarde e eu não almocei ainda. Será que nin-
guém vai pedir nem um Mac Donald’s?
– Eu pensei numas coisas. Vejam o que vocês acham... –
E começou a falar e falou, falou, falou e não parou mais.
Sexta-feira ainda chuvosa 13:10 minutos
Sala de Reunião.
– Legal. Eu acho que vai ser importante acompanhar a edição e
fazer o roteiro. Mesmo porque eu adoro editar. – e fui sincera.
– Cadê o Cicrano? Pede pra ele dar um pulinho aqui pra
conhecer a Marcela. – diz Fulano para Beltrano.
E o Cicrano chegou, mas vamos pular as apresentações.
Sexta-feira relampejando, trovejando e chovendo pe-
dra 13:55 minutos
Sala de Reunião.
– Não. A gente não precisa de roteirista. Vocês tão malu-
cos? Eu já tô com tudo na cabeça. A Marcela podia é dar uma
força para a Matilde. – diz o Cicrano.
– Boa. – diz Fulano.
webwriting
– Grande! – concorda Beltrano.
– E o que faz a Matilde? – pergunto.
– A Matilde é diretora do Projeto. – responde Cicrano.
– Vocês estão me chamando para ser assistente de dire-
ção? – que pergunta idiota.
– É, mas o trabalho engloba também o evento receptivo.
Você podia dar uma mão na produção. Isso aqui tá a maior
zona. – confessa o Fulano.
Pô! Esses caras querem uma roteirista ou uma diarista?
Sexta-feira o mundo cai lá fora 16:02 minutos
Sala da minha casa.
Chego em casa, tiro os sapatos, me jogo no sofá, meus
gatos pulam no meu colo e fico ali pensando naquela manhã
maluca. Não aceitei o trabalho. Não por não precisar dele, ou
por não ser uma boa proposta. Não aceitei porque não conse-
gui entender nem quem mandava ali. Seria o elefante o dono
do circo?
Tô fora! Quem sabe em uma próxima oportunidade. –
adoro essa frase.
É! Vida de freela é assim mes-
mo. A gente tem essa vantagem.
E então abri meu Ítalo Calvino e
tive um final de tarde ensolarado...
59
marketing

René de Paula Jr.

Especialista em e-business, profissional de internet desde 1996, passou pelas maiores
agências e empresas do país: Wunderman, AlmapBBDO, Agência Click, Banco Real ABN AMRO.
É criador da “usina.com”, portal focado no mundo online, e do “radinho de pilha”
(www.radinhodepilha.com), comunidade de profissionais da área.
rene@usina.com

Teste da anta
O site era bárbaro, ficamos todos boquiabertos. Nos idos de 98 não havia muitos sites
como aquele. Hoje hotsites de produto em Flash e tal são carne de vaca, mas, na época, nem se
falava em hotsite e as coisas eram feitas em Shockwave mesmo.
Bacana mesmo é que o site era a cara do produto, um carro originalíssimo, bem-humorado,
cool. Site legal, carro legal, tudo super promissor não fosse por um... alce.
Alce é um bicho descomunal, enorme, que faz vaca parecer pônei. Parece que tem muito nos
países nórdicos, têm tantos que um dos testes de segurança para um carro é o “teste do alce”.
O teste é mais ou menos assim: você está numa estrada dirigindo feliz e contente em alta
velocidade. E se um alce surge do nada?
Well, frente a essa pergunta o carrinho deu a resposta errada: capotou feio. Nem sei se o
motorista se machucou, mas o acidente foi fatal para carreira do modelo. Acho que agora
relançaram e tal, vi um outro dia. Mas o alce deixou sua pegada na história automobilística.
“E se...?” não é uma pergunta que brasileiros gostam de fazer. Deus é brasileiro, não é?
Por que se preocupar?
Os crentes que me perdoem, mas internet é diabólica. Devia se chamar inFernet. Não há
anjos da guarda, não adianta rezar, e nenhuma vela de sete dias espanta hacker.
Em suma: algo vai dar errado. Sempre. E é nessas horas que você distingue o bom profis-
sional da anta: diante de um desastre, ele capota ou reage a tempo?
Por que erros acontecem tanto? Por conta da inelutável Lei de Murphy, “se algo pode dar
errado, dará”? Sim, mas por outra razão mais positiva: a cada dia que passa, projetos
interativos envolvem mais e mais “frentes”: email, call center, negócios, conteúdo, CRM...
Cada frente dessas tem mil “alces” na tocaia.
Quer um exemplo? Você tem dois fornecedores “de internet” para escolher. Cada um traz
um projeto mais bacaninha que o outro. Como escolher? Joga um alce na pista:
- e se o projeto der super certo e tivermos milhares de usuários entrando ao mesmo tempo? ou
- e se todos os visitantes ficarem tão impressionados que vão mandar zilhões de emails? ou
- e se não dermos conta dos pedidos? ou
- e se o seu designer ganhar um prêmio e mudar pra Londres? ou
- e se eu quiser atualizar o site de meia em meia hora?
Como você pode ver, sucesso em excesso também dá encrenca. E por mais que os for-
necedores prometam maravilhas, nem todos estão preparados para o tranco do “dar certo
demais”.

60

“‘E se...?’ não é uma pergunta que brasileiros
gostam de fazer. Deus é brasileiro, não é?
Por que se preocupar?”
Se problemas vão acontecer quer a gente se previna ou
não, por que a gente não relaxa de uma vez? Sim, você pode
relaxar e gozar, mas de preferência bem longe de mim.
Problemas “conhecidos” a gente previne de saída. Expe-
riências anteriores (e cicatrizes e calos) ajudam muito, mas um
bom exercício de “e se...” pode prevenir muita coisa.
Por exemplo: você recebe um layout todo diagramadinho,
alinhadinho e tal. Com um pouco de imaginação, você se per-
gunta: e se esse texto for muito maior? E se a foto vier num
tamanho maior? E se eu precisar tirar esse conteúdo do ar ra-
pidamente? E se eu tiver que alterar alguma coisa no meio da
madrugada? E se o usuário digitar errado o endereço? E se o
usuário apertar o BACK? E se o usuário adicionar essa página
ao bookmark? E se o usuário preferir telefonar?
Alces não faltam.
marketing
Há perguntas mais dramáticas: e se o fornecedor falir? E
se tivermos problemas depois do projeto estar entregue? E se
o fornecedor não cumprir o prometido? E se forem necessárias
alterações? E se for preciso migrar de hospedagem?
Antes de se encantar com discursos “legais”, “cool” e “cri-
ativos”, veja se o airbag funciona. Ou então torça para criarem
recall de profissionais com defeito de fábrica.
Paranóia? Não. Ter algo online é ter uma vitrine perma-
nente, mas vitrines são de vidro. E atire a primeira pedra quem
nunca capotou.
61
experience design

Claudio Toyama
Sócio-fundador da Brand Experience|Studio – consultoria em experiência do cliente e
marcas, em Londres. Mestre em interatividade e multimídia (London Institute), formou-
se em Administração pela FGV, fez pós-graduações em Marketing (CEAG) e Comunicação
e Artes (Mackenzie), e especializou-se em Design Gráfico (Istituto Europeo di Design –
Comunicazione em Milão, Itália).
webdesign@claudiotoyama.com

Visão: o sentido mais ‘paparicado’ na internet

No artigo anterior mencionei o que está sendo desenvolvido para a internet no que diz respeito
a interfaces olfativas (impressoras de cheiro). Hoje estarei abordando a visão, que, no meu parecer
é o sentido mais paparicado dentre todos os sentidos neste meio... A audição é o primo pobre, mas
pelo menos faz parte da família... Os outros sentidos, como mencionado em artigos anteriores, têm
sido abordados ainda com muita timidez dados os altos custos de produção e distribuição e, por isto
mesmo, encontram-se em um estágio primário de desenvolvimento.
Há muitas plataformas sendo desenvolvidas com ênfase na visão... Algumas delas, aliás,
estão emergindo da pobreza de interação (vide telefones celulares) para ambientes portáteis,
cujo conteúdo é altamente sofisticado (telefones celulares com conexão 3G os quais são usados
para transmissão de fotos e vídeo).
Dentre as inúmeras interfaces que estão na porta de saída dos laboratórios e centros de
pesquisa, escolhi duas que causarão um grande impacto quando forem finalmente viabilizadas
para as massas. Estas são:
1 .Óculos Sony Glasstron
2 .Realidade aumentada
Vamos falar a respeito de cada uma delas:
1. Óculos Sony Glasstron
O iPod, cuja capacidade de armazenamento chega a 10 mil músicas, tornou-se uma febre
mundial (abrindo parênteses – mais uma vez o som sai na dianteira na história das tecnologias
que mexem com nossos sentidos).
Mas qual o próximo passo? Dentre os aparelhos já disponíveis no mercado, temos os DVD
players portáteis e os vídeo players com o Creative Zen Portable Media Centre, capaz de armazenar
até 80 horas de vídeo, 5 mil músicas ou 50 mil fotos. Mas, se por um lado capacidade de armazena-
gem é o que não falta, por outro, as telas deixam a desejar, não por sua resolução, mas pelo seu
tamanho. Não seria ótimo se tivéssemos conosco uma tela de 52 polegadas “portátil” que nos dei-
xasse assistir ao filme de nosso interesse em qualquer lugar que desejássemos?
Os óculos Glasstron da Sony possibilitam exatamente isto. Estes são compostos por duas
mini telas LCD que quando usados dão a impressão de estarmos diante de um telão de 52 pole-
gadas a dois metros de distância.
Mas esta tecnologia, por ser muito nova no mercado, ainda está restrita à camada mais
abastada que pode dispor de US$ 2.000, em média, por um par de óculos deste gênero.
2. Realidade aumentada
Quando uma pessoa é instruída em um determinado assunto, ela percebe a realidade de
uma forma diferente daquela que ainda não foi iniciada neste mesmo assunto. Um exemplo co-

62
 experience design
“A realidade aumentada está sendo disponibilizada na
forma de óculos semitransparentes que adicionam
uma camada de realidade virtual às imagens reais”

tidiano seria um leigo abrindo o capô de um carro e vendo ca- Para aquelas pessoas que querem sempre saber mais so-
bos, fios, peças metálicas, circuitos eletrônicos. Pode até fazer bre o mundo a sua volta, este seria o tão almejado “upgrade”
uma vaga idéia do nome e qual a utilidade de algumas destas de seus cérebros, podendo virar experts instantâneos em
peças, mas não terá a compreensão do todo e quase com cer- qualquer assunto que desejassem.
teza não saberá que “parafuso” apertar para que o motor co- Neste artigo mencionei somente duas das inúmeras
mece novamente a funcionar. tecnologias que vêm sendo desenvolvidas para a visão. Todas
Neste mesmo cenário, o mecânico de automóveis enxer- elas necessitarão de profissionais altamente capacitados nas
ga uma realidade “filtrada” ou, neste caso “aumentada”, por áreas de design gráfico, information design, arquitetura da
sua capacitação técnica. Para este indivíduo, o que ele tem a informação e usabilidade, entre outras áreas. Você acha que
sua frente são: carburador, filtro, distribuidor, bateria etc. e está preparado? ;-)
sabe como o conjunto destas peças faz com que o carro ande. Até nosso próximo encontro!
A realidade aumentada está sendo disponibilizada na for-
ma de óculos semitransparentes que adicionam uma camada de
realidade virtual às imagens reais.
No exemplo citado acima, quando o leigo abrisse o capô
do carro, ele veria uma camada (layer) projetada em cima das
peças reais, que explicaria o nome e
função de cada uma delas e, se
conectado ao computador de bor-
do e à internet, apontaria para a
peça com defeito, bem como qual a
oficina mais próxima onde poderia
ser trocada.
Mas este é somente um dos inú-
meros exemplos de aplicação da realida-
de aumentada. Imaginem ir a um museu e
ter à sua disposição um expert demonstrando e
ensinando “in-loco” o porquê daquela escultura
ser importante para a humanidade, por
quem foi esculpida, em período etc.

63
webdesign

Luli Radfahrer
PhD em Comunicação Digital, já dirigiu a divisão de internet de algumas das
maiores agências de propaganda e de alguns dos maiores portais do Brasil. Hoje, é
Professor-Doutor da ECA-USP, Diretor Associado do Museu de Arte Contemporânea
e consultor independente. Autor do livro ‘design/web/design:2’, administra uma
comunidade de difusão do conhecimento digital pelo país.
webdesign@luli.com.br

Usabilidade: ame-a e odeie-a

Em um cibermundo frio e digital, eis um assunto que provoca emoções, às vezes quase
tão exaltadas como as provocadas por jogos de futebol. Em todos os lugares, designers de
web, planejadores, arquitetos de informação e publicitários online são apaixonados, odei-
am ou se incomodam com o tema e às vezes discutem animadamente, a ponto de ninguém
ser indiferente a ele. Ainda bem.
Usabilidade é um fator polêmico, controverso, mas muito importante na definição e
estruturação de websites. Em um equivalente do design de objetos, ela é como a
ergonomia: irritante, porém necessária; fundamental, entretanto monótona. Seus defen-
sores argumentam que de nada adianta uma bela cadeira que seja desconfortável, seus
opositores afirmam que o leve desconforto é o motor da inovação. E ambos estão certos.
Os argumentos pró-usabilidade são tão conhecidos quanto chatos. Seu principal é que um
site é tanto melhor quanto maior for o número de usuários que tem acesso a ele. Para isso,
quanto mais conhecida e fácil for a interface, melhor. Deficientes visuais, velhinhas, quaren-
tões sem experiência digital, crianças, todos têm que ter acesso fácil e rápido. Já dá pra imagi-
nar como deve ser emocionante uma interface dessas, em que “não pode” é a regra.
Por outro lado, os argumentos contra a usabilidade são emocionantes e se apóiam nos
videogames, mostrando que continuaríamos a usar DOS e a jogar telejogos se não se inven-
tassem coisas esquisitas, novas, difíceis, que obriguem o usuário a deixar de ser preguiçoso
e se dedicar a aprender a operar o novo sistema. O mesmo se dá com operações mais com-
plexas com eletrônicos, computadores etc.
Desse jeito parece até que a usabilidade deixa os sites como corredores de Fórmula 1 em
dia de chuva, nivelando-os por baixo, o que não é verdade. Os dois lados representados aqui
são exagerados: inovação e usabilidade, usadas com parcimônia, combinam muito bem. Quem
já trocou de marca de telefone celular sabe que, por mais que o aparelho seja belo e pode-
roso, a facilidade de uso é muitas vezes fundamental. Como não há regras para o conjunto
de botões que deve ser apertado, pouco importam as novidades do telefone se você tem
que apertar sete vezes um botão para acessar sua agenda de telefones.
Como sempre, o que vale é o bom senso e cabe à equipe de planejamento e
implementação (designer incluído) definir o que é mais importante: acesso ou inovação. Se
o website é de um serviço, entende-se que sua eficácia seja medida pelo número de atendi-
mentos e, portanto, ele deve ser o mais aberto possível.
Entretanto, se o objetivo de um website for seu conceito, se o produto representado
tiver que ter personalidade e se impor perante seu público, então o importante é atitude.

64
 webdesign
“Cabe à equipe de planejamento e
implementação definir o que é mais
importante: acesso ou inovação”

Nesse caso é muito mais importante a atitude que o acesso e

alguma dificuldade é até bem-vinda, pois mostra que o pro-
duto “não é para qualquer um”.
Falem bem ou falem mal, o importante é que o designer
nunca deixe de considerar a usabilidade em seus projetos.
Mas, sempre que possível, ele deve evitar se pautar por ela.
Em outras palavras, é como um poste de rua. Se você está só-
brio, serve como iluminação. Se está bêbado, como apoio.

65
66