Está en la página 1de 68

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

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

dica... Quando meu portfolio


Assunto: Edições passadas Assunto: Webdesign Obrigada pela dica, Nádia. Iremos
estiver pronto, mandarei pra
contagiosa incluir este tema em nossa próxima
Excelente a funcionalidade do vocês... E novamente
edição, de novembro, que trata de
site da revista, digo isso parabéns pelo trabalho! Webdesign contagiosa!!! Foi
usabilidade, ok? É só aguardar.
especialmente me referindo Como faço pra receber as isso que eu constatei quando
à ferramenta que possibilita duas primeiras edições??? levei minha Webdesign pra
a compra de edições Valeu!!! Até mais.” faculdade. Como faço curso
passadas de forma avulsa. José Rezek
de Projetos em Web Design,
jose.designer@ig.com.br
Tenho uma agência de meu colegas ficam loucos
Oi José! Mas é claro que respondemos
comunicação em POA-RS, e, quando vêem a minha... Tem
um a um... afinal é este o maior
enfim, encontramos uma plano especial de assinatura
diferencial da internet para outras
revista que abrangesse a pra minha sala? Todos
mídias: a interatividade! Para
questão do projeto de web querem!
adquirir edições anteriores, acesse:
sites dentro de um composto Fernanda Prevedello
www.arteccom.com.br/webdesign fernandawebdesigner@yahoo.com.br
de comunicação onde se
Oi Fernanda! Como fiquei feliz com
comportaria como uma
Assunto: Link super úteis seu email. Você não pode imaginar
ferramenta própria,

10
como foi gratificante recebê-lo! A
avançada, estudada, Olá! Sinto falta de um tópico
Jane vai entrar em contato com
funcional e dirigida, assim na revista: uma seção com
você, ok?
como se encaixam da mesma links de sites com banco de
forma veículos como tv, rádio imagens, sons etc. para
Assunto: Arquitetura de
etc. Parabéns. utilizarmos em nossos sites. informação
Diego Nogueira Bom, para mim, é a única Assunto: Viu, Catunda???
diegonog@sinos.net
coisa que falta para a nossa Adquiri meu primeiro Oi Adriana.
Oi Diego. Pois é... nosso intuito é
revista (posso chamar exemplar da revista Parabéns por continuarem
que web sites sejam vistos como
assim?!?) ficar completíssima. Webdesign no mês de agosto melhorando a cada edição.
bons investimentos e não como custo
Abraços de um leitor fiel. e faço questão de expressar Na revista número 8 gostei
para as empresas. Para isso, nós,
René Pinheiro minha satisfação pelo
profissionais, precisamos cada vez muito da matéria sobre como
rene@renepinheiro.com
produto de qualidade por abrir uma agência web e
caprichar mais no desenvolvimento Querido René: visite o site
vocês apresentado. Os como medir o retorno.
dos mesmos para provarmos que www.bananadesign.com.br. Lá você
profissionais careciam de um Gostaria, se possível, que
realmente dá resultados, se bem encontra vários links super úteis com
referencial para seus vocês colocassem na revista
planejado. este conteúdo. E, espero que se torne
trabalhos e agora podemos ou num site, um modelo de
um membro de NOSSO site
encontrar um excelente briefing, isso ajudaria a
também ;-)
embasamento teórico nesta todos nós da área. Ah! E a
revista. Catunda é nota 10. A
Assunto: Publicidade
Aproveito a oportunidade primeira matéria que leio
Como leitor, sugiro a para sugerir um tema: quando compro a revista é
vocês um artigo sobre ‘Arquitetura de Informação’. sempre a dela.
publicidade, como fazê- Desejo conhecer a forma Sucesso!
la, troca de banners etc... correta de lidar com o Fábio Russo
Rudá Gonçalves fabiorusso@8arroba.com.br
conteúdo de um site, critérios
ruda_g@hotmail.com Bem, Fábio, já enviei um modelinho
hierárquicos, dentre outros
Olá Rudá! Na edição 2 (capa rosa) de briefing por email para você. Pois
Assunto: Edições passadas fundamentos para concluir
“Como atrair clientes para seu site” é, a Catunda está fazendo muito
uma distribuição ordenada do
Cara, que legal, vocês falamos sobre este tema, troca de sucesso... você não imagina o quanto
conteúdo de um projeto web.
respondem um a um os banners etc. Futuramente podemos foi difícil convencê-la a escrever, ela
Atenciosamente,
emails! Adorei a resposta aprofundá-lo, absorvendo sua é muito humilde, mas uma super
Nádia Devigilli
personalizada! Obrigado pela sugestão. Obrigada! contato@nadiawebdesigner.com profissional, divertida e inteligente!

fale conosco pelo site www.arteccom.com.br/webdesign


:: Os emails são apresentados resumidamente. :: Sugestões dadas através dos emails enviados à revista passam a ser de propriedade da Arteccom.

6
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. num ambiente semelhante ao browser, no qual os produtores de
É nela que encontramos informações sobre produtos, serviços, conteúdo inserem as informações e os demais elementos (imagens,
áreas de atuação e de abrangência geográfica e preços. Apesar sons, vídeo etc.) sem o risco de danificar o trabalho prévio de desen-
da evolução do mundo digital, a grande dificuldade das compa- volvimento da página. Com a solução, os webmasters decidem o que
nhias na internet ainda é atualizar e gerenciar seu conteúdo com pode ser editado e quem vai publicar, graças a um novo sistema de
rapidez e eficiência. aprovação e administração, que permite o gerenciamento de cone-
O principal motivo é a sobrecarga de trabalho dos xões, rastreamento, senhas e privilégios de usuários.
webmasters. Esses profissionais altamente especializados gastam Outro ponto forte da tecnologia é a inclusão do recurso
cerca de metade de seu tempo com atualizações simples nas páginas Flash Paper 2, que permite a conversão, com um só clique, de
do site ou da intranet. Como o conteúdo informativo é produzido por qualquer arquivo passível de impressão para o formato Flash.
profissionais sem conhecimento da linguagem técnica, as equipes de Sua grande vantagem é que os documentos ficam disponíveis na
desenvolvimento e criação ficam atoladas no trabalho mecânico de própria página, ou seja, é um elemento de design mais leve e fle-
atualização e perdem um tempo precioso, que poderia ser utilizado xível que abre em qualquer navegador em menos de um segundo,
no que fazem melhor: criar e desenvolver. além de executar no plug-in do Flash Player.
Atualizações constantes são extremamente importantes, Sucesso comprovado
mas não agregam valor aos projetos dos webmasters. É muito A adoção do Contribute pela Universidade do Oeste de
mais produtivo para a empresa e para os clientes que a experi- Santa Catarina (Unoesc), por exemplo, foi responsável pela redu-
ência desses profissionais seja inteiramente dedicada à criação ção de 20% nos custos de TI relacionados ao desenvolvimento e
de novas funcionalidades, áreas ou templates do site, em vez de de 32% em mão de obra, afirma Lindamir Secchi Gadler, coorde-
desperdiçada em desgastantes idas e vindas de arquivos e tabe- nadora de TI da universidade. “A solução agilizou significativa-
las produzidos por usuários que poderiam ser eles mesmos res- mente as atividades de atualização na Internet”, explicou ela.
ponsáveis pela atualização do conteúdo na página. Outro exemplo bem-sucedido é o portal do Departamento de Ser-
Faz parte do importante papel dos webmasters zelar pela viços à Criança e à Família do município norte-americano de Ala-
integridade do site. Eles só podem delegar as tarefas de atuali- meda (www.acgov.org), que usa a ferramenta para manter seu
zação se houver garantia de que layouts e funcionalidades serão Guia Prático Online. “Agora usuários não-técnicos passaram a
preservados. É para resolver definitivamente esse problema que atualizar sem que o código ou layout seja modificado, o que ge-
a Macromedia lançou a terceira versão do Contribute, software rou uma economia de US$ 250 mil dólares só no primeiro ano”,
para atualização de páginas e conteúdo que vem se popularizan- destacou Jim Damien, diretor de TI do departamento.
do por facilitar o árduo trabalho dos webmasters. Para baixar uma versão de teste gratuita do
Com ele, toda a atualização é feita por usuários não-técnicos Contribute 3 e obter mais informações, acesse:
sem que o código ou layout possa ser modificado. Tudo acontece 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 titularidade dos direitos autorais da obra re- da obra.
com pós-graduação em Direito
da Propriedade Intelectual
alizada sob encomenda, contrato de trabalho Caso a obra seja solicitada, mediante
pela PUC-Rio. Atualmente, ou prestação de serviços. Como você não contrato de prestação de serviços, a uma
pertence à equipe do escritório
Montaury Pimenta, Machado & detalhou as condições estipuladas para a cri- pessoa física ou jurídica, que se responsabili-
Lioce Advogados.
ação do site, vamos falar sobre as formas za pela organização do processo criativo, en-
Envie sua dúvida para: mais comuns de contratação de serviços para volvendo a participação de diversos autores
marianna@montaury.com.br
a criação de uma obra. (obra coletiva), a titularidade dos direitos
Se a criação da obra é solicitada a uma patrimoniais pertencerá ao organizador da
ou mais pessoas físicas, através de contrato obra. Somente através de estipulação
de trabalho ou prestação de serviços, deve contratual o solicitante da obra poderá vir a
ser respeitada a regra de que os direitos au- deter a titularidade dos direitos patrimoniais
torais morais e patrimoniais pertencem exclu- sobre o conjunto da obra.
sivamente às pessoas físicas criadoras da É importante esclarecer que em todos
obra, salvo se houver estipulação contratual esses casos, o direito sob discussão é o
em contrário (nesse caso, referente apenas patrimonial, já que o moral permanecerá
aos direitos patrimoniais, uma vez que os di- sempre com a(s) pessoa(s) física(s) cria-
reitos morais sempre ficam com os criadores). dora(s) da obra.
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

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


(02)
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 Falha Nossa
e Carla Hudson. Michael, diretor do centro de recursos para Na edição nº 9, na seção Debate, os sites dos participantes Laert
deficientes físicos da universidade, diz que sua esposa ficou Yamazaki e Adílson Batista sairam errados. Quem quiser conhecer
maravilhada com a invenção. mais sobre eles, os endereços corretos são, respectivamente,
(01) <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


referência sobre novos inseto para produzir corrente elétrica.
e satélite para seguir ex-namorada
programas e tecnologias. Na Por enquanto, o robô tem sido alimentado
Um homem foi preso nos Estados Unidos por usar manualmente, pois o mecanismo para pegar
seção Artigo, que conta com um
um sistema de GPS, de rastreamento por satélite, os insetos ainda está sendo desenvolvido.
time renomado de colunistas, é
para perseguir sua ex-namorada.
possível conhecer a opinião dos O único lado ruim desse robô autônomo
Ara Gabrielyan supostamente conectou um celular provavelmente será o seu cheiro já que os
melhores especialistas em
e um aparelho GPS ao carro da ex-namorada para cientistas estudam atrair as
internet. O site possui ainda um
rastrear os movimentos dela. A ex-namorada, que
fórum, em que se pode tirar moscas usando excremento
não foi identificada, começou a suspeitar de ou água de esgoto.
dúvidas e ampliar a rede de
Gabrielyan quando ele começou a aparecer
contato com outros profissionais
repentinamente em vários lugares.
da área.
(05)
As suspeitas foram confirmadas quando ela pegou
<www.bananadesign.com.br>
Gabrielyan debaixo de seu carro, tentando trocar a (08)
bateria do celular. (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 todo um trabalho. Em sua opinião, descobrir
alvo hoje em dia.” qual é a real necessidade de um projeto é
Para ele, um dos principais problemas sempre um desafio. Ele cita que alguns cli-
que o designer pode enfrentar na profissão entes têm a dificuldade de passar exata-
diz respeito ao briefing, que mal feito, in- mente o que eles querem, fazendo mudan-
completo ou pouco explicado pode arruinar ç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
www.oab-rj.org.br
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
www.sonymusic.com.br
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”,
www.automovel.com.br finaliza.

16
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- quando o logo “original” foi selecionado e inclu-
do os motivos, mostrando os layouts das aplicações e um ído em um livro da Supon Design Group chama-
ensaio do que seria o manual da marca. O cliente disse que do “Visual Impact”.
adorou, mas perguntou se poderíamos trocar o vermelho Wd :: Com relação à psicologia das cores,
por azul. Explicamos que com isso a marca perderia em im- como um webdesigner pode agregar valor a
pacto, pois o vermelho é uma cor que não sofre com mu- uma determinada cor utilizada em um
danças de tendências na moda etc. Ele finalmente se jus- layout?
tificou, dizendo ser vascaíno, e declarando que “com essas Bruno :: Assim como o argumento estapafúrdio
cores a logo fica muito próximo ao símbolo do Flamengo, do meu cliente, algumas destas listas que
entendem?”. Esse obviamente é um daqueles clientes, dos apontam supostas associações entre cores e
quais ninguém está livre, que pede para levar os layouts significados são de uma patetice ímpar, como a
para casa para mostrar para a mulher opinar… Frustrante, que confere a países com determinadas cores
mas nossa satisfação pessoal veio alguns meses depois 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

20
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


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
“Para se aperfeiçoar em composição aperfeiçoar em composição cromática, estude psicologia,
sociologia e ergonomia, e entenda como o Homem se rela-
cromática, estude psicologia, sociologia
ciona consigo mesmo, com os outros e com seu meio físi-
e ergonomia, e entenda como o Homem co. Livros e revistas são depositórios do conhecimento hu-
mano, e de maneira geral mais responsável e ampla que a
se relaciona consigo mesmo, com os
web. Odeio dizer isto, mas nem tudo se encontra no
outros e com seu meio físico” Google.

22
23
da arte à ciência

Teoria das cores:


É 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

Amarelo :: Estimula a criatividade, é uma cor vibrante e alegre.


de extrema importância e
Incentiva a conversação. Em excesso é cansativa.
conhecer a sua teoria é vital na
hora de saber lidar com a sua
Aloísio Magalhães X criatividade.
Considerado um dos designers mais expressivos
de sua época, Aloísio Magalhães foi pioneiro do
design gráfico no Brasil e sempre defendeu
Segundo Aloísio Magalhães: “Design é a compatibi-
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 lização entre intuição e metodologia”. Essa frase nos faz
país. Falecido em 13 de junho de 1982, Aloísio
pensar sobre a tênue linha que separa a técnica do ins-
tinha formação em Direito e foi membro do grupo
de vanguarda “O Gráfico Amador” em Recife, na tinto e até onde esses elementos se interagem na hora
década de 60. Entre seus trabalhos, destacam-se da criação. Com relação ao uso das cores, esse divisor
o design das notas do cruzeiro novo e a
torna-se ainda mais imperceptível, visto que muitos ain-
identidade visual de empresas como Petrobrás,
Light, Souza Cruz, Embratur, Unibanco, Xerox, da desconhecem a total aplicação dos conceitos cromá-
entre outras. ticos em um layout.

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

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

coral. Se você nã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
sabe o que está
capazes de reproduzir cores em 16 bits (64K nada e tem o valor do palpite. Saber é
fazendo e começa 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
a juntar ‘vozes’
como navegadores têm padronizado a re- técnica e tem experiência na sua aplica-
aleatoriamente, ou produção de cores”. ção, parecer trabalhar intuitivamente
a partir de critérios Cor, técnica e instinto pode levar à impressão de que o estudo é
O uso adequado das cores é uma etapa dispensável”.
pessoais e sem
importante da comunicação na web e, para Segundo Rodolfo Capetto, a intuição
embasamento, não o webdesigner ter o domínio dos conceitos é a destilação da experiência. “É quando

terá um coral, mas 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,
uma balbúrdia” senvolvimento de um bom layout. Ao esco- pois já pensou muito, em várias situações
Carlos Bahiana 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
Harmonização X
Na hora de escolher as cores em contraste podem auxiliar a vem da vivência profissio-
Contraste X
um projeto, é importante levar legibilidade e a organização nal, o estudo teórico e téc-
O contraste é uma forma de
em consideração sua
do conteúdo em seu site. acrescentar um destaque visual nico das propriedades da
harmonização, que consiste em
alguns princípios fundamentais Para Carlos Bahiana, a uma página. Com relação às cor, como de outros ele-
cores, pode ser definido como
como similaridade, contar puramente com a in- mentos visuais com que o
uma diferença entre elementos
familiaridade, equilíbrio, ordem
tuição ou instinto é um risco semelhantes. Em um layout designer trabalha, é es-
e ambigüidade.
Veja, também, o box “Maneiras que o profissional não deve equilibrado, a visão do usuário sencial para fundamentar
se volta para os contrastes mais
de harmonizar as cores e tornar se expor. “Certa vez, discu- o trabalho e garantir que
extremos. Estudos demonstram
seu layout mais equilibrado” na
tindo a relevância de estudar que um olhar é imediatamente as soluções sejam mais
página ao lado.
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.

30
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
Sempre, sob qualquer natureza do ponto de vista do design, cor, tipografia ou outro
profissional desenvolve um
sentido e uma capacidade de elemento visível constituem em informações e devem interagir. A definição desses elementos
fazer julgamentos intuitivos é parte do projeto, relaciona-se ao conceito, à estrutura, ao conteúdo e aos parâmetros,
sobre um assunto específico.
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.
:: Arísio Rabin
Professor da ESDI, Escola Superior
Por fim, não se deve resumir problemas a critérios ou fórmulas pré-concebidas, assim
de Desenho Industrial como um designer não deve se limitar. Não abrir mão de uma determinada gama de cores, por
www.esdi.uerj.br
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 res e limitações que devem ser levados em
de um debate cheio de controvérsias e muita conta na escolha das cores a serem utiliza-
discussão. Falar sobre o seu uso na web tor- das. Entre eles, destaco o pleno conhecimen-
na-se ainda mais complexo, devido às ques- to sobre o público-alvo. É primordial que um
tões técnicas inerentes a essa mídia. site seja produzido, seguindo um visual har-
Após ser captada pela visão, a cor é pro- mônico para quem o acessa. Para que isso
cessada pelo cérebro, formada, quantificada aconteça, o designer deve ficar atento a as-
e avaliada, tornando-se um elemento de sig- pectos como a faixa etária, a cultura, a posi-
nificado. Nessa etapa o cérebro identifica ção social e geográfica, assim como as parti-
qual cor é vista e a relaciona com experiências cularidades do segmento para o qual está cri-
anteriores para lhe atribuir valores. Desse ando e até a qualidade do equipamento utili-
modo, pode-se considerar que os seres hu- zado pela audiência.
manos têm uma resposta emocional à cor, Já entre as limitações, destaca-se o uso
fundamentada no contexto cultural em que mais restrito de cores, ou seja, deve-se
se insere. manter um padrão visual compatível em meio
Para o designer, é importante estudar e às variações entre as diferentes plataformas
compreender quais poderão ser esses valo- utilizadas pelos usuários. Outro fator, é a ne-
res atribuídos, uma vez que são passíveis de cessidade de adaptação do meio offline para
interpretações e, portanto, podem variar de o meio online. Neste caso, o webdesigner é
pessoa para pessoa. forçado a se submeter ao conceito e escolha
As cores são muito importantes de cores já definidas no meio offline. A trans-
para o desenvolvimento de uma posição das cores em CMYK para RGB e, mais
interface gráfica, não só pelo seu valor restrito ainda, para as cores consideradas
estético, mas pelo poder em criar códi- ‘safe for web’ é um desafio pertinente àque-
gos estruturais e estratégicos em de- les que trabalham com web.
terminadas situações. Se bem utilizadas, A questão técnica e teórica
podem facilitar o processo de comunicação, deve consolidar o funcionamento e
direcionando o olhar do leitor a regiões espe- usabilidade do site, expressos em
cíficas da página. Ao contrário, criam um ruí- combinações equilibradas e harmôni-
do e dificultam a leitura. Um exemplo seria a cas, contrastes e saturação adequados
diminuição de contraste entre texto e fundo. para leitura e visibilidade dos demais
Nesse processo de comunicação, e assim componentes de um layout, dentro dos
como no desenvolvimento de um site, ques- limitadores que a web oferece. O uso de
tões intuitivas vão defrontar com questões poucas cores e escolha de paletas seguras,
técnicas. Uma não deve anular a outra, mas coerentes ao tema e harmônicas entre si,
se complementar, de modo a afinar a compo- certamente evitará surpresas. Nesse caso, é
:: Eduardo Vieira
sição e a arte final. muito importante o feeling do designer ao
Diretor de criação da Tribo 12
www.tribo12.com.br Ao delinear um layout, há diversos fato- captar essas particularidades em um projeto.

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

:: Norton Amato
Diretor de criação da Anydesign.net
www.anydesign.net

36
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- leções anteriores. Os assuntos mais solicitados foram: moda
senvolvimen- com Melissa e games.
to do site Wd: No site antigo, o usuário escolhia a cor de fundo da
Melissa página e isso não foi mantido no atual. Como era a res-
Celebration? posta dos usuários a essa opção de personalização?
Quanto tempo A opção de escolher a cor do fundo foi uma experiência bem
durou todo o interessante. Recebemos muitos emails elogiando a possibili-
processo, desde dade, com declarações sobre o fundo que mais gostavam. A
o planejamento intenção da troca da cor foi criar mais interatividade entre o
até a implementação? site e o usuário e dar a sensação de movimento e atualização.
O site celebra os 25 anos da marca e traz a nova coleção Ou seja, sempre que o usuário entrasse no site encontraria
“Celebration” com os modelos para o verão 2005. Além do novo novas cores e matérias. No projeto atual, optamos por criar
layout, há muitas novidades no conteúdo. O projeto foi desen- fundos diferentes para cada canal. Porém, ao longo da nova
volvido em 35 dias, todo em Flash dinâmico, interligado a banco coleção, vamos disponibilizar novas opções de fundos.
de dados. Ao todo, envolveu oito profissionais, dentre eles, Wd: Vocês acompanhavam quantos usuários mudavam
de criação, programação e planejamento. a cor de fundo? Existia uma cor preferida?
Wd: Na nova coleção, há um resgate do primeiro dese- Sim. Todas as ações no site são monitoradas. Cerca de 70%
nho da sandália aranha, a mais famosa da marca, e no dos usuários trocavam a cor e a rosa era preferida das
site é utilizado o logo original da Melissa. Outros elemen- internautas.
tos de nostalgia foram utilizados? Wd: A Melissa é um produto que tem como público-alvo
O site da Melissa é remodelado duas vezes ao ano, sempre desde crianças até mulheres de 30 anos. Houve a prefe-
seguindo o tema da coleção que está sendo lançada. Para cada rência por algum desses públicos no novo projeto?
uma é produzida uma identidade visual diferente, com elemen- Os novos canais criados no “Melissa Celebration” foram justa-
tos e cores que predominam nos lançamentos. Todo o material mente planejados para atingir estes públicos. O “Zona Fun” é
é enviado pelo cliente, como as fotos, por exemplo. No caso para a garotada de 7 a 13 anos. Já o canal “Closet Melissa”,
do “Celebration”, todo o layout foi produzido para comemorar voltada para as adolescentes de 13 a 24 anos, dá dicas de
os 25 anos da marca, por isso traz elementos que contam a his- combinações de roupas com as sandálias da nova coleção em
tória da Melissa. O site temático de cada coleção recebe, em um editorial de moda exclusivo produzido pela Grafia. Outra
média, 160 mil visitantes por mês. novidade é o Game Melissa chamado “A Fábrica Maluca”. Os
Wd: Uma questão que sempre aparece em qualquer pro- links, que fazem su-
jeto de design é o limite entre a intuição e a técnica no cesso entre as me-
uso das cores. Como vocês lidam com esta questão? São ninas de todo o
feitos testes de usabilidade ou de aceitação do público? Brasil, como o
Procuramos usar o padrão de cores usado na coleção atual. “Mel Responde”,
Quanto à usabilidade, definimos o site em canais: “Coleção “Galera Melissa” e
2005” – “Closet” – “Zona Fun” – “Mondo Melissa”. Estes canais “Fala Sério”, tam-
foram criados de acordo com pesquisas feitas nos sites de co- bém fazem parte do canal.
A outra seção é a “Mondo

38
38
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

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,
“Tempo é dinheiro” ou seja, se o que pretendemos criar poderá
Sábio ditado... Quanto maior o tempo de fato ser visto pelo público ou não. Por mais
disponível para a elaboração de uma campa- que os microcomputadores estejam cada vez
nha, maior a possibilidade de alcançar as mais potentes, e o acesso cada vez mais rápi-
metas visadas. Isso porque a estratégia uti- do, isso ainda é relevante na concepção de
“Um dos resultados lizada deve basear-se em um complexo uma campanha online”.
somatório de fatores envolvendo público- Paralelamente às mudanças nos públi-
do amadurecimento
alvo, instrumento de abordagem, tecnologia cos-alvos, tem-se a alteração de comporta-
das empresas é a ser aplicada etc.. “Normalmente temos tra- mento de anunciantes. Para Marcelo, “as
balhado com prazos que variam de um a um empresas estão cada vez mais maduras e
uma maior
mês e meio, mas nesse ano mesmo já lança- exigentes na concepção de suas campanhas
receptividade a mos um hotsite que ficou três meses em pro- online. Antes, para se vender uma idéia, era
dução (da concepção à finalização), e em necessário falar sobre uma série de conceitos
formatos mais
dezembro vamos lançar um projeto de email (como interatividade, usabilidade etc.), que
ricos e inovadores” marketing com o qual estamos trabalhando hoje em dia já são mais ou menos dominados
desde junho”, revela Marcelo. pelo público em geral. Um dos resultados dire-
Acertando em cheio no público-alvo to disso é uma maior receptividade a forma-
Se a internet se popularizou, o universo tos mais ricos e inovadores, por exemplo”.
de usuários não apenas sofreu um aumento Usando a isca certa
significativo, mas sobretudo se diversificou. A escolha do instrumento de abordagem
Dentro desse contexto, definir e traçar um está estreitamente ligada à definição do perfil
perfil do público que se deseja atingir tornou- do público-alvo. Quanto mais precisa e cor-
se uma tarefa nada simples. A rapidez das reta tal definição, maior a possibilidade de

42
prepare-se para o natal
adequação do meio à mensagem. Fora isso, é da. Além disso, sabemos que o fator privaci-
fundamental levar-se em conta o objetivo e a dade na web assume um caráter todo especi-
verba do cliente. “Se já temos uma base de al; a reação negativa do usuário a pop-ups
usuários definida no início de uma campanha, ‘intrusos’ ou a mensagens indesejadas são
formada por pessoas que já conheçam a mar- exemplos típicos disso. Portanto, para esti-
ca ou os produtos do anunciante, então é mular o visitante a interagir com a peça,
muito provável que o disparo de uma criatividade é fundamental”.
newsletter faça parte da ação, já que a Destacando-se na multidão
receptividade à mensagem será muito mais Na época de Natal a concorrência pare-
provável. Do contrário, outra possiblidade ce tomar proporções ainda maiores do que
seria tentar criar o estímulo necessário para nos demais meses do ano, o que faz da arte
que as pessoas se cadastrassem espontane- de vender uma atividade mais difícil do que
amente no site do anunciante”, explica Mar- de costume. Achar um diferencial capaz de
celo. E complementa: “Sobre eficiência da tirar o cliente do anonimato torna-se mais
comunicação, sempre temos como meta, aqui desafiador do que nunca, já que o bombar-
na Canvas, o equilíbrio entre dois elementos deio de informações comerciais multiplica-se.
que consideramos primordiais: o fator sur- Haja análise de mercado e estratégia de ven-
presa da criação e a facilidade de acesso. Em das! “Essa disputa pela nossa atenção é jus-
qualquer meio, o tempo que se tem para cap- tamente o que dificulta, cada vez mais, a as-
turar a atenção do espectador é muito pe- similação de uma campanha. Nosso inimigo,
queno, e isso na internet é mais delicado ain- 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 grande nas informações que precisamos para
um aumento de vendas, pense no aumento de aumentar a eficácia da nossa comunicação.
sucesso de uma
mensagens às quais somos expostos nesta Esse acompanhamento estratégico é um tra-
campanha é época”, confirma Albagli. balho contínuo, que deve ser feito de maneira
A estratégia começa lá atrás séria e consciente, e que certamente aumen-
preciso saber o que
Uma boa estratégia não dispensa o pas- ta as chances de sucesso de qualquer campa-
se está buscando. sado. Campanhas anteriores podem trazer nha online”.
dados preciosos, mesmo que implícitos, para Nem só de cifrões é feito o retorno
Já foi o tempo em
uma elaboração bem feita. Um estudo minuci- Mensurar o retorno de qualquer cam-
que quantidade de oso de tais informações aponta acertos, fa- panha é algo muito relativo. Avaliar o de-
lhas, resultados e peculiaridades essenciais sempenho considerando o retorno financei-
visitantes era
para projetar a nova campanha. Segundo ro isoladamente mascara resultados e influ-
necessariamente Marcelo Albagli, o planejamento baseia-se encia estratégias posteriores. Nem sempre
“principalmente na experiência acumulada de a venda efetiva do produto ou serviço é o
sinônimo de
anos anteriores. O nível de detalhe nas res- único objetivo do cliente. “Existem diversos
sucesso” postas que conseguimos obter por pesquisas fatores que podem ser avaliados para cal-
online, acompanhamento dos logs de acesso, cular o retorno de uma campanha, ou de
e até mesmo através dos emails enviados pe- uma peça, como, por exemplo, o tempo de
los usuários, nos garante uma precisão muito 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

44
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 dois anos, quando os primeiros esboços ainda estavam sendo
planejados com base na antiga página do prefeito em exercício.
no Brasil, pode-se dizer que a campanha política que não valo-
Para Luís Mendes, gerente de internet da equipe de Cesar Maia, o
riza a web parte para a disputa eleitoral em grande desvanta- 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 de campanha, que exigiria uma outra dinâmica. “Já vínhamos
traçando a linha de comunicação do candidato, revelando,
candidato como um simples produto a ser vendido em uma em-
principalmente, o pensamento de suas ações para a educação,
balagem bonitinha e cheia de firulas. As últimas eleições têm esportes, comunidades carentes etc.”

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

O gerente de internet destaca que o site Candidato Jorge Bittar :: Rio de Janeiro
desenvolvido para o candidato é fácil, intuitivo e
Com o objetivo de alcançar três tipos específicos de público: o eleitor, a imprensa e a
claro para ser compreendido por qualquer
militância de uma forma geral, o site do candidato Jorge Bittar é o que possui a
segmento. “Isso significa que o jovem de 11 anos
interface mais diferenciada. Para Gerson Penha, responsável pelo planejamento
de uma comunidade carente que entrar em um
editorial, estrutura de navegação e layout, as informações contidas no site são fáceis
laboratório de informática de uma escola municipal
de serem encontradas pelo usuário. Ele explica que a diferença entre a campanha feita
e acessar o site terá um conteúdo tão consistente
para a TV para a do meio online, é que na primeira, o compromisso com o emocional se
quanto um investidor de 30 anos que se preocupa
dá de maneira mais enfática, na intenção de persuadir o eleitor. Já na internet, além
com o futuro da cidade. O importante é que o
das técnicas de sedução do visitante, o papel do site político é o de detalhar e tornar
conteúdo seja interessante para todos.
disponíveis informações que nem sempre se encaixam no horário eleitoral gratuito, seja
Apresentado com consistência e responsabilidade.
pelo formato ou por sua relevância.
Sem promessas vazias”, enfatiza Luiz.
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


www.cesarmaia25.com.br 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
por Natelson Nascimento

Às vezes temos que desenvolver sites complexos onde o */


) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
uso de uma só linguagem não resolve todos os problemas, ou
GO
temos que acrescentar um item a um site já existente, que se-
O segundo passo é criar funções ASP que criem a chave
ria muito mais simples e rápido se desenvolvido em uma lingua-
da Sessão e que insiram os dados no banco de dados.
gem diferente da atual. Isso seria muito simples, se as infor-
mações de sessões do site não tivessem que ser compartilha- sessao_site.asp

das, já que em linguagem diferentes isto não é possível, e se


<%
nenhuma das informações fosse sensível como senhas, que
‘Funcao que gera a chave usando um function do proprio Sql Server
não podem ser enviadas diretamente de um formulário, por para

exemplo. O que fazer nestes casos? ‘gerar chaves randomicas. Se voce for usar outro banco de dados,
‘voce pode escrever o seu proprio codigo para geracao de chaves
Há uma técnica simples para resolver este problema
randomicas.
que é o uso de banco de dados, no qual se pode gravar um có- ‘ Ha varios exemplos disso na internet em diversas linguagens.

digo de sessão e um usuário como chave, e as informações ne-


Function GeraRandomicoSql(objConexaoSql)
cessárias para o compartilhamento das páginas escritas em lin-
Set objChave = Server.CreateObject(“ADODB.RecordSet”)
guagens diferentes. Vamos usar aqui como exemplo as lingua- sQueryChave = “SELECT NewId() as Chave”

gens ASP e ASP.Net e o banco de dados Sql Server, mas pode objChave.Open sQueryChave, objConexaoSql
sChaveRandomica = objChave(“Chave”)
ser usada qualquer combinação de linguagem e banco de da-
objChave.Close
dos para esta tarefa. O exemplo aqui trata de um site ASP que Set objChave = Nothing

precisa passar informações para páginas ASP.Net GeraRandomicoSql = sChaveRandomica


End Function
O primeiro passo é criar a tabela que guardará as informa-
‘FUNCAO QUE GRAVA NA TABELA SESSAO_SITE TODAS AS
ções que serão compartilhadas entre as linguagens. A tabela SESSIONS UTILIZADAS NO MOMENTO, SEPARAS POR “|”

tem que ter como chave o código da sessão, o usuário que ge- ‘RECEBE COMO PARAMETRO UM OBJETO DE CONEXAO JA
CRIADO E O USUÁRIO QUE GEROU A SESSAO
rou a sessão, e a data e hora em que esta foi criada, para faci-
Function Gera_SessaoSite(objConexaoSql, sUsuario)
litar consultas e validações futuras, e um campo do tipo ntext boolInicial = True

(string com comprimento variável) que guardará as informa- sParametro = “”


‘Loop que percorre cada Session do Asp e monsta em
ções que serão compartilhadas entre as linguagens.
uma string no formato:
CREATE TABLE [SESSAO_SITE]
(
‘nome_session=valor_session|nome_session2=valor_session2....
[cod_sessao] [nvarchar] (100) NULL , /* codigo da sessao */
For Each item in Session.Contents
[data] [datetime] NULL , /* data que foi criada a sessão */
If not IsObject(Session.Contents(item))
[parametro] [ntext] , /* parâmetros da sessão */
Then
[usuario] [nvarchar] (100) NULL /*usuario que criou a sessao
If not boolInicial Then

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

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

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
marketing
“‘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 Há perguntas mais dramáticas: e se o fornecedor falir? E
não, por que a gente não relaxa de uma vez? Sim, você pode se tivermos problemas depois do projeto estar entregue? E se
relaxar e gozar, mas de preferência bem longe de mim. o fornecedor não cumprir o prometido? E se forem necessárias
Problemas “conhecidos” a gente previne de saída. Expe- alterações? E se for preciso migrar de hospedagem?
riências anteriores (e cicatrizes e calos) ajudam muito, mas um Antes de se encantar com discursos “legais”, “cool” e “cri-
bom exercício de “e se...” pode prevenir muita coisa. ativos”, veja se o airbag funciona. Ou então torça para criarem
Por exemplo: você recebe um layout todo diagramadinho, recall de profissionais com defeito de fábrica.
alinhadinho e tal. Com um pouco de imaginação, você se per- Paranóia? Não. Ter algo online é ter uma vitrine perma-
gunta: e se esse texto for muito maior? E se a foto vier num nente, mas vitrines são de vidro. E atire a primeira pedra quem
tamanho maior? E se eu precisar tirar esse conteúdo do ar ra- nunca capotou.
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.

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