Ed10

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

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: cor - instinto ou técnica?

Norton Amato, diretor de criação da Anydesign, explica como o bom uso das cores facilita a usabilidade e melhora a experiência

entrevista: Bruno Porto

estudo de caso: Melissa

Dicas para você se aperfeiçoar em composições cromáticas: estude psicologia, sociologia e ergonomia

a empresa comemora 25 anos com muita cor, estilo e mostra como

e entenda como o Homem se relaciona com seu meio

conquistou o público internauta

e-mais: comece a planejar sua campanha de Natal! já foi o tempo em que quantidade de visitantes era necessariamente sinônimo de sucesso Marcelo Albagi, Canvas

de consumo

sites eleitorais

Marcela Catunda ensina lidardas com spams e mostra oscom muito bom a Webdesign entrou no aclima eleições bastidores dashumor! campanhas online

direitos autorais

3

nada. Pairava a dúvida no ar: por onde começar??? Acho que ela discutiria depois nossas tentativas . Tudo bem... fiquei lá... na minha solidão... éramos eu e o papel... o papel e eu...

Hoje recebo alguns emails assim: não sei por onde começar quando preciso criar um site... escolher as cores... Bem, graças ao meu trauma , sinto-me solidária no dever de ajudá-los a encontrar uma luz no fim do túnel .

Eu, particularmente, começo pelo conceito, ou seja, a idéia que preciso transmitir. Faço um brainstorming para dar asas à imaginação e chegar a uma imagem que transmita a idéia de forma sutil, divertida ou direta, enfim, uma imagem com a qual meu público-alvo se identifique. Depois, utilizo outros elementos gráficos, como a tipografia e as CORES para fortalecerem o conceito. As cores transmitem sensações de acordo com experiências passadas que tivemos com elas. Então, basta definir que sensação queremos transmitir com a peça gráfica e utilizar as cores que nos levem a este sentimento... Ou seja, fique atento à sua própria SENSIBILIDADE. Se um pinguinho de tinta cai num pedacinho azul de papel... num instante imagino uma linda gaivota voar no céu.

Mas como vocês sempre querem (e devem) saber mais, mais e mais... recolhemos opiniões de vários profissionais e algumas regrinhas para se-

Direção de Arte Patrícia Maia patricia@arteccom.com.br Ilustração Beto Vieira beto@arteccom.com.br Diagramação Bruna Werneck bruna@arteccom.com.br Direção de Redação Bete Veiga bete@arteccom.com.br Redação André Philippe Iunes andre@arteccom.com.br Publicidade Daniele Moura daniele@arteccom.com.br Assinaturas Jane Costa jane@arteccom.com.br Gerência de Tecnologia Fabio Pinheiro fabio@arteccom.com.br Webdeveloping Eric Nascimento eric@arteccom.com.br Financeiro Luana Rocha luana@arteccom.com.br Criação e edição www.arteccom.com.br

Patrocínio

rem seguidas (ou não). Divirtam-se!

www.locaweb.com.br

Um beijo!

Produção gráfica www.ediouro.com.br/grafica

Adriana Melo.

Distribuição www.chinaglia.com.br

4

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

professora Eliane Jobim pediu para criarmos um cartaz. E não falou mais

Direção Geral Adriana Melo adriana@arteccom.com.br

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

quem somos

Lembro quando cursava o terceiro ano da faculdade, minha grande

Editorial

Um pinguinho de prosa...

Equipe

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

o

Assunto: Edições passadas

dica... Quando meu portfolio estiver pronto, mandarei pra

Assunto: Webdesign contagiosa

Excelente a funcionalidade do

vocês... E novamente

site da revista, digo isso

parabéns pelo trabalho!

Webdesign contagiosa!!! Foi

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 jose.designer@ig.com.br

de Projetos em Web Design,

Tenho uma agência de comunicação em POA-RS, e, enfim, encontramos uma revista que abrangesse a questão do projeto de web sites dentro de um composto de comunicação onde se comportaria como uma ferramenta própria,

Oi José! Mas é claro que respondemos um a um... afinal é este o maior diferencial da internet para outras mídias: a interatividade! Para adquirir edições anteriores, acesse: www.arteccom.com.br/webdesign

Obrigada pela dica, Nádia. Iremos incluir este tema em nossa próxima edição, de novembro, que trata de usabilidade, ok? É só aguardar.

meu colegas ficam loucos quando vêem a minha... Tem plano especial de assinatura pra minha sala? Todos querem!

Fernanda Prevedello fernandawebdesigner@yahoo.com.br

Oi Fernanda! Como fiquei feliz com seu email. Você não pode imaginar

Assunto: Link super úteis

avançada, estudada,

Olá! Sinto falta de um tópico

funcional e dirigida, assim

na revista: uma seção com

como se encaixam da mesma

links de sites com banco de

forma veículos como tv, rádio

imagens, sons etc. para

etc. Parabéns.

utilizarmos em nossos sites.

Diego Nogueira diegonog@sinos.net

Bom, para mim, é a única

10

como foi gratificante recebê-lo! A Jane vai entrar em contato com você, ok?

Assunto: Arquitetura de informação

Assunto: Viu, Catunda???

coisa que falta para a nossa

Adquiri meu primeiro

Oi Adriana.

revista (posso chamar

exemplar da revista

Parabéns por continuarem

assim?!?) ficar completíssima.

Webdesign no mês de agosto

melhorando a cada edição.

Abraços de um leitor fiel.

e faço questão de expressar

Na revista número 8 gostei

profissionais, precisamos cada vez

René Pinheiro rene@renepinheiro.com

minha satisfação pelo

muito da matéria sobre como

caprichar mais no desenvolvimento

Querido

produto de qualidade por

abrir uma agência web e

dos mesmos para provarmos que

www.bananadesign.com.br. Lá você

vocês apresentado. Os

como medir o retorno.

realmente dá resultados, se bem

encontra vários links super úteis com

profissionais careciam de um

Gostaria, se possível, que

planejado.

este conteúdo. E, espero que se torne

referencial para seus

vocês colocassem na revista

trabalhos e agora podemos

ou num site, um modelo de

encontrar um excelente

briefing, isso ajudaria a

embasamento teórico nesta

todos nós da área. Ah! E a

revista.

Catunda é nota 10. A

Aproveito a oportunidade

primeira matéria que leio

para sugerir um tema:

quando compro a revista é

vocês um artigo sobre

Arquitetura de Informação .

sempre a dela.

publicidade, como fazê-

Desejo conhecer a forma

Sucesso!

correta de lidar com o

Fábio Russo fabiorusso@8arroba.com.br

Oi Diego. Pois é... nosso intuito é que web sites sejam vistos como bons investimentos e não como custo para as empresas. Para isso, nós,

René:

visite

o

site

um membro de NOSSO site também ;-) Assunto: Publicidade Como leitor, sugiro a

la, troca de banners etc...

Rudá Gonçalves ruda_g@hotmail.com

Assunto: Edições passadas

Olá Rudá! Na edição 2 (capa rosa) Como atrair clientes para seu site

Cara, que legal, vocês

falamos sobre este tema, troca de

respondem um a um os

banners etc. Futuramente podemos

emails! Adorei a resposta

aprofundá-lo, absorvendo sua

personalizada! Obrigado pela

sugestão. Obrigada!

conteúdo de um site, critérios hierárquicos, dentre outros fundamentos para concluir uma distribuição ordenada do conteúdo de um projeto web.

Atenciosamente, Nádia Devigilli contato@nadiawebdesigner.com

Bem, Fábio, já enviei um modelinho de briefing por email para você. Pois é, a Catunda está fazendo muito sucesso... você não imagina o quanto foi difícil convencê-la a escrever, ela é muito humilde, mas uma super 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.

Com ele, toda a atualização é feita por usuários não-técnicos sem que o código ou layout possa ser modificado. Tudo acontece

Para baixar uma versão de teste gratuita do Contribute

3

e

obter

mais

informações,

acesse:

http://www.macromedia.com/software/contribute.

7

direito na web

Autor-funcionário Oi! Acabei de comprar a revista e vi a novidade da seção de direito na web. Muito boa idéia essa! Eu mesmo, há um certo tempo, estou com uma dúvida. Trabalho no suporte (help desk) de uma empresa de médio porte. O sócio da empresa quando ficou sabendo que eu desenvolvia sites, me pediu que eu criasse um para a empresa. 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 à Marianna Furtado é advogada com pós-graduação em Direito da Propriedade Intelectual pela PUC-Rio. Atualmente, pertence à equipe do escritório

titularidade dos direitos autorais da obra re-

contratual a respeito, pertence ao organizador da obra.

alizada sob encomenda, contrato de trabalho

Caso a obra seja solicitada, mediante

ou prestação de serviços. Como você não

contrato de prestação de serviços, a uma

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

a criação de uma obra.

(obra coletiva), a titularidade dos direitos

Montaury Pimenta, Machado &

marianna@montaury.com.br

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 interesses alheios e não somente os seus próprios interesses

Filipenses

A Fábrica Digital desenvolveu o software Publique! para que 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

Você também pode ajudar a manter o brilho dessas crianças: ligue para (21) 2253-0596 ou

torne-se também nosso parceiro.

envie um email para arteccom@arteccom.com.br e adote esta página!

Para conhecer o projeto Magê-Malien, visite o site www.arteccom.com.br/magemalien.

Contatos: atendimento@fabricadigital.com.br Tel. (21) 2548-7877

9

clipping

Estudantes constroem

Cientistas quebram recorde de velocidade com Internet2

lavadora falante

Cientistas do Caltech (Instituto de Tecnologia da Califórnia) e do 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 mais sobre eles, os endereços corretos são, respectivamente,

maravilhada com a invenção.

(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 internet

Yahoo! compra a Musicmatch por US$ 160 milhões

A Biblioteca Britânica está disponibilizando

especializada na tecnologia de distribuição digital de música, por US$ 160 milhões. A

O portal de internet americano Yahoo! anunciou a compra da empresa Musicmatch,

online 93 cópias de 21 peças do dramaturgo inglês, que foram impressas ainda durante sua vida.

Essas edições individuais mostram como os textos de Shakespeare sofreram

compra permitirá ao Yahoo! alcançar quase 23 milhões de consumidores, contra 12,9 milhões atualmente.

Criada em 1997, a Musicmatch é considerada uma pioneira da tecnologia de administração de música digital. Seus ativos incluem a Musicmatch Radio, a Musicmatch Music Store, o software Musicmatch Jukebox, que permite aos usuários baixar, escutar e gravar música pela internet, e a Musicmatch on

alterações piratas e

Demand, um serviço de assinatura que permite o download de mais de

lançam dúvidas sobre a

700 mi l músicas em qualquer computador, assim como o envio dos

idéia de versões

arquivos para outra pessoa de maneira legal.

definitivas de sua obra.

(07)

No site dedicado às

Banana Design: novas seções,

raridades shakespearianas, é possível comparar

mais conteúdo

textos publicados em

O Banana Design, site

diferentes periodos,

de conteúdo

como o Hamlet de 1603 e o de 1611.

design e programação

A idéia é que os insetos capturados pelo

Tutorial, com um guia de

e satélite para seguir ex-namorada Um homem foi preso nos Estados Unidos por usar um sistema de GPS, de rastreamento por satélite, para perseguir sua ex-namorada.

Ara Gabrielyan supostamente conectou um celular e um aparelho GPS ao carro da ex-namorada para rastrear os movimentos dela. A ex-namorada, que não foi identificada, começou a suspeitar de Gabrielyan quando ele começou a aparecer

EcoBot 2 sejam digeridos em um compartimento especial, que irá quebrar moléculas de açúcar do exoesqueleto do

referência sobre novos

inseto para produzir corrente elétrica.

programas e tecnologias. Na

Por enquanto, o robô tem sido alimentado

seção Artigo, que conta com um

manualmente, pois o mecanismo para pegar

time renomado de colunistas, é

os insetos ainda está sendo desenvolvido.

possível conhecer a opinião dos

O único lado ruim desse robô autônomo

melhores especialistas em

provavelmente será o seu cheiro já que os

internet. O site possui ainda um

cientistas estudam atrair as

fórum, em que se pode tirar

moscas usando excremento

dúvidas e ampliar a rede de

ou água de esgoto.

contato com outros profissionais

(05)

repentinamente em vários lugares.

As suspeitas foram confirmadas quando ela pegou Gabrielyan debaixo de seu carro, tentando trocar a bateria do celular.

um robô que irá comer moscas para gerar sua própria energia.

lançando a seção

Homem usa internet

Cientistas britânicos estão desenvolvendo

especializado em para a web, está

(05)

Robô come moscas para gerar energia

da área.

<www.bananadesign.com.br>

(06)

(08)

(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 dificuldades o aprendizado para a sua vida e das oportunidades a chance de seguir novos rumos foi de vital importância 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çado 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 fiquei me dedicando inteiramente à internet, coisa que faço até hoje .

Fundada em 1997, a Ability atua como uma produtora digital, com trabalhos 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, sugerimos fazer um site de e-commerce, o que na época era um passo muito ousado. 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 Inglesa, entre outros, a Ability conta atualmente com uma equipe de 23 profissionais, 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 e seus representantes comerciais sobre os produtos que fabricam. Sendo assim, todo o conteúdo é incluído de forma dinâmica , explica Rodrigo.

Outro trabalho interessante feito pela produtora foi o E-Kids, desenvolvido 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-palavras, 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 é utilizado um banco de dados para o armazenamento de imagens e sons e para o relacionamento dos jogos com suas respectivas lições , destaca.

14

Esboço e telas de exercícios desenvolvidos para o E-Kids da Cultura Inglesa

portfólio veterano :: Ability

Com o objetivo de reformular todo o portal de acesso gratuito da Embratel, o Click 21, a Ability desenvolveu para este projeto um novo layout e tornou o seu conteú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 ferramenta de regionalização, que direciona um

www.click21.com.br

dado específico a um determinado usuário conforme 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 categorias automóvel e serviços online, Rodrigo lembra que o grande diferencial dos produtos da Ability se deve à forma como a produtora trabalha 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 primeiro momento. Estamos com uma meta agressiva 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 trabalho navegando pela internet, sempre procurando novas referências. Segundo ele, a web é um meio propício para comparar trabalhos e obter idéias. Se uma pessoa souber analisar bem o que existe no mercado, pode

www.oab-rj.org.br

fazer um apanhado de exemplos e desenvolver 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-

www.sonymusic.com.br

lhorem o seu trabalho. Ouço as pessoas que estão ao meu redor, pois sempre têm algo a acrescentar. Acho que com bom senso e uma boa conversa, resolvemos metade de qualquer problema. Além disso, é muito importante você ser persistente. Em nossa vida, sempre enfrentamos dificuldades e é como as encaramos que determina o nosso sucesso ,

www.automovel.com.br

16

finaliza.

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 alternou 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 propaganda 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, www.sauvage.com.br

Duquerne Mudanças, Coppead UFRJ, Bukan School of Krav Maga, Isbet 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 intermediários. Os problemas são a instabilidade e a concorrência com os sobrinhos , que degradam o valor do trabalho no mercado .

www.camiladezorzi.com.br

Para Diogo, um bom profissional não precisa necessariamente ser formado e sim ter vocação, disciplina, determinação, gostar do que faz e ficar atento à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 profissional. Espero ter concorrentes realmente profissionais, que não desvalorizem a

www.isbet.org.br

profissão, jogando o valor do trabalho lá embaixo. Afinal, sempre terá espaço 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

portfólio calouro :: Sauvage

O poder da propaganda boca a boca

entrevista 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 envolvem o estudo de cores. Professor da UniverCidade (RJ) 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 poderes mágicos . De Monty Phyton e o Cálice Sagrado a Saul Bass e Eugênio Hirsch, Bruno também faz um breve panorama da interação do webdesign com os aspectos comerciais e sociais da profissão. Caso esteja indeciso por alguma composição cromática, confira nesta entrevista por que é importante conhecer todo o contexto no qual uma cor pode estar inserida.

Nem tudo são cores... 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 embalagem, um cartão de visitas, um banner, uniformes institucionais e promocionais ou mesmo uma sede que possui uma sinalização. Um projeto de comunicação visual, seja corporativo ou de identidade, compreende 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 transmitir 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

Acesse o site www.arteccom.com.br/webdesign e participe!

manifestar em produtos (site também é 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 ligada à 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 . Chegaria a ser hilário se não fosse perigoso ver profissionais de diversas áreas do design, marketing e comunicação repetirem, muitas vezes por escrito, essas bobagens antecedidas de Estudos comprovam que . A cor não é o único fator visual determinante, muito menos tem poderes mágicos. Se pintarem uma foto de uma tartaruga atropelada na estrada de vermelho e laranja não vai te dar fome, e se azul fosse a única garantia de refrescância a CocaCola estava falida.

Esse empirismo todo me lembra uma cena da comédia Monty Phyton e o Cálice Sagrado em que

20

entrevista

o Rei Arthur e seus cavaleiros deveriam responder corretamente a três perguntas para atravessarem uma ponte sobre um desfiladeiro ou serem lançados à morte. O primeiro se apresenta e escuta: Qual o seu nome?

Arthur , responde. O que procura? O Cálice Sagrado . Qual sua cor favorita? Azul .

Ok, pode passar. Quando o segundo cavaleiro 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, objetivos e características.

Wd :: Na hora de elaborar um site, alguns 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 cliente. Experimenta mandar um sujeito que saca um pouco de portunhol traduzir as palestras estrangeiras de um congresso de medicina. O cara vai no instinto , não tem muita técnica, mas improvisa bem . No ano seguinte é até provável que haja um recorde na quantidade de erros médicos no país, por extração desnecessária de orgãos ou algo do gênero. Você pode mandar o cara que fala portunhol apanhar sua amiga mexicana no

A cor não é o único fator visual determinante, muito menos tem poderes mágicos. Se pintarem uma foto de uma tartaruga atropelada na estrada de vermelho e laranja não vai te dar fome, e se azul fosse a única garantia de refrescância a Coca-Cola estava falida

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 criar 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. Aquele cartaz do Saul Bass e aquela capa do Eugênio Hirsch vão te ajudar a resolver 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 desenvolver 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 soluções. Se este é limitado, maiores são as chances de termos 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 conexão ou da sua máquina, ou o que dizem os tutoriais e cursos 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 cromática, estude psicologia, sociologia e ergonomia, e entenda como o Homem se relaciona consigo mesmo, com os outros e com seu meio físico

22

aperfeiçoar em composição cromática, estude psicologia, sociologia e ergonomia, e entenda como o Homem se relaciona consigo mesmo, com os outros e com seu meio físico. Livros e revistas são depositórios do conhecimento humano, e de maneira geral mais responsável e ampla que a web. Odeio dizer isto, mas nem tudo se encontra no Google.

23

É inegável dizer que a cor é um elemento fundamental na estética de uma página na web.

Por causa de suas qualidades atrativas, pode-se usar determinadas cores para identificar áreas ou um determinado grupo de informações. Entretanto, nem todos as utilizam coerentemente, praticando exageros devido a gostos pessoais duvidosos. Certos cuidados quanto ao seu uso são de extrema importância e

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

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

24

conceitos como a Brasilidade do design e a tirados do livro Logos do Brasil de Pedro Guitton.

Os significados das cores espalhados pela matéria foram

da arte à ciência

Teoria das cores:

recuperação da memória artística e cultural do país. Falecido em 13 de junho de 1982, Aloísio tinha formação em Direito e foi membro do grupo

Segundo Aloísio Magalhães: Design é a compatibilização entre intuição e metodologia . Essa frase nos faz pensar sobre a tênue linha que separa a técnica do ins-

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 identidade visual de empresas como Petrobrás,

torna-se ainda mais imperceptível, visto que muitos ain-

Light, Souza Cruz, Embratur, Unibanco, Xerox,

da desconhecem a total aplicação dos conceitos cromá-

entre outras.

ticos em um layout.

da arte à ciência

da arte à ciência Na web, evitar o uso gratuito das cores e dar ênfase ao seu aspecto de código é fun-

X

Código

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

mação. Todos os elementos, inclusive as cores, devem convergir para que a experiência

informação. Uma cor pode 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

que se estuda na chamada semiologia gráfica .

uma seqüência de navegação.

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 natureza, logo, equilibra e acalma. Mais

Para Rodolfo Capetto, professor de design da Escola

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, tornase 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 requisitos 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 a cor mantenha as características do negócio do cliente e

Vermelho :: Estimulante, excitante, direciona e transmite energia. Pode 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 resolver, e não há fórmulas, cada caso precisa ser estudado individualmente , 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 atende às expectativas e preferências de cada visitante e, por último, a usabilidade, em que a legibilidade, leitura, contextualização, funcionalidade 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 navegaçã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 arquitetura do site, tem sido considerado como elemento cultural. São bastante conhecidas as diversas listas de significados das cores , eventualmente acompanhadas de alguma associação à nacionalidade , 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ências. 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

apenas 256 cores. Quando se produz com

fontes de tamanho suficiente para que

cores diferentes das 216 protegidas, os

possam ser lidas sem dificuldade, o uso de

navegadores as convertem para uma outra

cores de fundo lisas ou padrões de fundos

cor mais próxima, dentro das 40 cores que

sutis. Os elementos gráficos de fundo,

variam de uma plataforma para outra, o

principalmente quando muito coloridos,

que poderá comprometer a qualidade do

podem interferir na capacidade de reco-

seu trabalho.

nhecer as formas das palavras. É impor-

Carlos Bahiana explica que cada com-

tante lembrar também a importância de

binação de hardware (placa de vídeo e

saber trabalhar com as cores nos links. Ge-

drives), sistema operacional e navegador

ralmente, os links já visitados pelo usuário

resulta em um determinado conjunto de

são diferenciados dos que ainda não foram

cores reprodutíveis em cada computador.

vistos pelo uso de outras cores. Quando

Quando uma cor é especificada no site e

não é respeitada essa regra, o sentido de

não está presente na paleta do equipamento

estrutura e localização do visitante da pá-

do usuário, a cor mais próxima é represen-

gina fica deficiente e a navegação sofre

tada na tela, eventualmente entremeada

uma perda significativa em sua eficácia.

de pontos de outra cor que, combinada à

Cores protegidas para navegadores

primeira, tenta reproduzir a cor especificada.

Na hora de se trabalhar em um

É o chamado dither.

Dither

X

Para evitar a ocorrência do dither, deve-se usar um conjunto de cores, bastante limitado, que pode ser considerado seguro para a maioria das combinações de hardware, sistema operacional e navegador. Este conjunto são as 216 cores protegidas, também conhecido como paleta websafe .

Quanto mais baixa a resolução da tela e o número de cores disponíveis, mais perceptível e incômodo é o dither. Outro dado importante é o progressivo aumento de resolução de tela, que já está superando os 800x600. Quanto maior a resolução, mais próximos ficam os pontos resultantes do dither.

Com a tendência natural do olho humano de fundir pontos próximos, o efeito eventual do dither fica reduzido.

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

veja na tela o mesmo que o webdesigner

O termo se refere à quantidade

putador, com capacidade e gama de cores variadas, além de diversas configurações

X

de cores que existe em uma 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

ção de 16 milhões de cores, grande parte

arquivo.

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

Nielsen recomenda, além do uso de

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 é

brilho e contraste, torna a correspondência

ou não adequada baseando-se apenas no

de tom e matiz uma incógnita para o

gosto pessoal e no instinto e a decisão

designer. Felizmente, este quadro está mu-

embasada no conhecimento e na experi-

dando cada vez mais rápido. Placas de vídeo

ência. Achar, todos podem, não custa

capazes de reproduzir cores em 16 bits (64K

nada e tem o valor do palpite. Saber é

fazendo e começa

cores) ou mais, já se tornaram comuns.

para quem estudou a técnica e a aplicou.

a juntar vozes

Além disso, tanto sistemas operacionais

O fato de um profissional, que estudou a

como navegadores têm padronizado a re-

técnica e tem experiência na sua aplica-

produção de cores .

ção, parecer trabalhar intuitivamente

Cor, técnica e instinto

pode levar à impressão de que o estudo é

e a interface deve funcionar como um coral. Se você não sabe o que está

aleatoriamente, ou a partir de critérios

O uso adequado das cores é uma etapa

pessoais e sem embasamento, não terá um coral, mas uma balbúrdia Carlos Bahiana

Harmonização

X

importante da comunicação na web e, para

Segundo Rodolfo Capetto, a intuição

o webdesigner ter o domínio dos conceitos

é a destilação da experiência. É quando

cromáticos, além do conhecimento dos prin-

você não precisa mais pensar conscien-

cípios ergonômicos, é essencial para o de-

temente para saber o que deve ser feito,

senvolvimento de um bom layout. Ao esco-

pois já pensou muito, em várias situações

lher uma cor em um determinado projeto

semelhantes no passado , ressalta o pro-

online, conhecer as estratégias sobre

fessor. Entretanto, ele afirma que apesar

harmonização e os diferentes níveis de

de haver um nível de conhecimento que

Na hora de escolher as cores em

contraste podem auxiliar a

um projeto, é importante levar

legibilidade e a organização

em consideração sua harmonização, que consiste em alguns princípios fundamentais como similaridade, familiaridade, equilíbrio, ordem e ambigüidade.

do conteúdo em seu site.

Para Carlos Bahiana, contar puramente com a intuição ou instinto é um risco

Veja, também, o box Maneiras

que o profissional não deve

de harmonizar as cores e tornar

se expor. Certa vez, discu-

seu layout mais equilibrado na página ao lado.

tindo a relevância de estudar design, me perguntaram se haviam designers com diploma melhores do que outros

X

Contraste O contraste é uma forma de

vem da vivência profissional, o estudo teórico e téc-

acrescentar um destaque visual

nico das propriedades da

a uma página. Com relação às

cor, como de outros ele-

cores, pode ser definido como uma diferença entre elementos

mentos visuais com que o

semelhantes. Em um layout

designer trabalha, é es-

equilibrado, a visão do usuário

sencial para fundamentar

se volta para os contrastes mais extremos. Estudos demonstram

o trabalho e garantir que

que um olhar é imediatamente

as soluções sejam mais

atraído para as partes de uma

sólidas. Sendo assim, aqui

interface que são extremamente diferentes do que está a sua volta.

que cursaram uma universi-

30

dispensável .

fica a dica: cor não é só arte, mas também uma ciê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.

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:

Maneiras de harmonizar as cores e tornar o seu layout mais equilibrado:

vermelho, verde e violeta. As

:: por monocromia :: quando se usam diferentes valores de luminância de uma mesma cor.

primária e uma secundária

:: por complementaridade simples :: utilização de duas cores opostas no círculo cromático. Este é um esquema a ser analisado com cuidado, como no caso do uso de vermelho e verde. Pode-se ter uma área maior com uma cor fria, deixando a área menor com sua cor complementar quente.

seis cores terciárias são formadas misturando uma adjacente, como por exemplo: magenta com vermelho, magenta com violeta, amarelo 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

da arte à ciência

Preto :: Utilizado sozinho é austero e confere

32

debate

Cores: como conciliar instinto e técnica?

No que diz respeito ao uso das cores na web, saber caminhar pela tênue linha que separa a intuição da técnica é uma tarefa difícil, nem sempre bem definida entre os profissionais da área. Até onde o instinto e o conhecimento tácito são importantes na hora de elaborar uma composição cromática é tema de debate nesta edição. Intuitivo ou teórico, compartilhe da experiência destes profissionais e tire as suas próprias conclusões.

Conhecimento tácito

:

Conhecimento adquirido por longos períodos de experiência e cumprimento de determinadas tarefas, durante as quais o profissional desenvolve um

Sempre, sob qualquer natureza do ponto de vista do design, cor, tipografia ou outro

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 entendimento 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 escultor, do arquiteto, do cientista, do artista etc., desde que fundamentada na razão e no conhecimento. O desenvolvimento da sensibilidade decorre do interesse: 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 de Desenho Industrial www.esdi.uerj.br

Por fim, não se deve resumir problemas a critérios ou fórmulas pré-concebidas, assim como um designer não deve se limitar. Não abrir mão de uma determinada gama de cores, por exemplo, é uma limitação auto-imposta e desnecessária. Aconselho ler Interaction of Color , de Josef Albers, pois auxiliará nessa compreensão.

33

debate

Discorrer sobre cores é sempre garantia

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 para

:: Eduardo Vieira Diretor de criação da Tribo 12 www.tribo12.com.br

34

o

desenvolvimento

de

de cores já definidas no meio offline. A trans-

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

sição e a arte final.

muito importante o feeling do designer ao

Ao delinear um layout, há diversos fato-

captar essas particularidades em um projeto.

debate A única forma de conciliar intuição com técnica é 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úblico que vai acessar o seu material. O mais importante nesse 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 decorativo, na sinalização de trânsito ou em um site na web.

A bagagem cultural no uso das cores não pode ser ignorada, 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 desenvolvimen-

leções anteriores. Os assuntos mais solicitados foram: moda 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 é estimulado? Como é feita a atualização desta á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 enviamos 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 é oferecer 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 informações sobre a marca no mundo para um público mais maduro, inclusive imprensa e mercado externo, pois a Melissa está em um processo de internacionalização da Marca, chegando aos Estados Unidos, México e Europa.

O Closet foi criado em função da última pesquisa, onde constatou-se uma necessidade 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 visitas 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

Wd: Uma característica marcante dos pro-

Existem diversas traduções

dutos Melissa é a cor e este é um dos mai-

:

possíveis para o nome Profile, como: perfil, curva, correlação,

ores desafios num projeto para web. Vocês

descrição, tabela, característica,

adotaram alguma medida de precaução

mapa e dados. O Profile

para que as cores dos produtos não sejam

definido pelo ICC (International Color Consortium) é um arquivo

muito distorcidas a cada pc?

digital de dados para a descrição

As fotos dos produtos são enviadas pelo cliente

das características de cor de um

em CMYK com o ICC profile já setado. A única

dispositivo, tal como um scanner, impressora ou monitor

precaução que tomamos é salvar estas imagens

de vídeo. O objetivo deste

em JPG, preservando assim a configuração do

arquivo é ser empregado pelo

ICC profile.

software de gerenciamento de cor para manter a consistência de imagens quando lidas, visualizadas, ou impressas em diversos equipamentos.

Fonte: http://www.itgcom.com

40

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

Prepare-se para o Natal!

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 social. Conforme atesta Albagli, esboçar um perfil psicológico desse público já não é suficiente: Tentamos sempre traçar também uma espécie de perfil tecnológico do nosso público-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 é importante para definirmos como serão nossas peças, Tempo é dinheiro

Um dos resultados do amadurecimento das empresas é uma maior receptividade a formatos mais ricos e inovadores

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

lizada deve basear-se em um complexo

uma campanha online .

somatório de fatores envolvendo público-

Paralelamente às mudanças nos públi-

alvo, instrumento de abordagem, tecnologia

cos-alvos, tem-se a alteração de comporta-

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

mês e meio, mas nesse ano mesmo já lança-

exigentes na concepção de suas campanhas

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

dezembro vamos lançar um projeto de email

(como interatividade, usabilidade etc.), que

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 de usuários não apenas sofreu um aumento

42

ou seja, se o que pretendemos criar poderá

tos mais ricos e inovadores, por exemplo .

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

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

prepare-se para o natal

adequação do meio à mensagem. Fora isso, é

43

prepare-se para o natal

Para definir o sucesso de uma campanha é preciso saber o que se está buscando.

Já foi o tempo em que quantidade de visitantes era necessariamente sinônimo de sucesso

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.

mensagens às quais somos expostos nesta

Esse acompanhamento estratégico é um tra-

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

Uma boa estratégia não dispensa o pas-

ta as chances de sucesso de qualquer campa-

sado. Campanhas anteriores podem trazer

nha online .

dados preciosos, mesmo que implícitos, para

Nem só de cifrões é feito o retorno

uma elaboração bem feita. Um estudo minuci-

Mensurar o retorno de qualquer cam-

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-

para projetar a nova campanha. Segundo

ro isoladamente mascara resultados e influ-

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

anos anteriores. O nível de detalhe nas res-

único objetivo do cliente. Existem diversos

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 retorno financeiro seja o objetivo em médio e longo prazo. Exemplos típicos são campanhas de branding ou para qualificação da base. Para definir o sucesso de uma campanha, é preciso saber o que se está buscando. 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 quantidade 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 aproveitada em conjunto com outras ações, que irão garantir que a marca esteja presente na memória das pessoas e isso é decisivo na hora de converter 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

:

Branding é o conjunto de ações ligadas à administração das

possível alcançar o destaque que a nossa marca precisa criando uma concepção

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 além da sua natureza

cas. Tudo vai depender do produto, do

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. É percebido que a campanha digital proporciona, talvez, uma vantagem que as outras mídias não podem oferecer em tempo real: a interação direta com o eleitor. A possibilidade de criar no site chats, enquetes e fóruns de discussão gera uma valiosa relação entre o candidato e seu eleitor, beneficiando assim a troca de idéias e informações sobre os temas que envolvem a

Candidato Cesar Maia :: Rio de Janeiro

sua candidatura.

O desenvolvimento do site do candidato Cesar Maia começou há

Levando em consideração os números atuais da internet no Brasil, pode-se dizer que a campanha política que não valo-

dois anos, quando os primeiros esboços ainda estavam sendo planejados com base na antiga página do prefeito em exercício.

Para Luís Mendes, gerente de internet da equipe de Cesar Maia, o

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

candidato como um simples produto a ser vendido em uma em-

traçando a linha de comunicação do candidato, revelando, 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

ca. É preciso que ela se faça espontaneamente, pela divulgação de idéias e ideais.

Para estudar o assunto, a Webdesign analisou alguns sites de candidatos à prefeitura das cidades do Rio de Janeiro e São Paulo e entrevistou as suas respectivas equipes. Essa análise rendeu dicas interessantes de como conciliar as técnicas do

mesmo conteúdo. Segundo o gerente, como a candidatura de Cesar busca a reeleição, deve-se destacar na arquitetura da informação o que foi e o que está sendo realizado e os avanços programados para o futuro. Existem projetos sociais importantes desconhecidos pelo público que mais acessa a internet, até porque não convive diretamente com eles , destaca.

Luís explica que, em uma visão macro de atuação, uma eleição não é tão diferente de uma grande campanha de varejo. Existem ações em

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,

ta de campanha é a melhor, mas sim a de fazer um raio X , sem

existem as panfletagens e a militância. Ele lembra que em alguns 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

46

população , ressalta.

sites eleitorais

à urna eletrônica André Philippe Iunes

O gerente de internet destaca que o site desenvolvido para o candidato é fácil, intuitivo e claro para ser compreendido por qualquer segmento. Isso significa que o jovem de 11 anos de uma comunidade carente que entrar em um laboratório de informática de uma escola municipal e acessar o site terá um conteúdo tão consistente quanto um investidor de 30 anos que se preocupa com o futuro da cidade. O importante é que o conteúdo seja interessante para todos.

Apresentado com consistência e responsabilidade.

Sem promessas vazias , enfatiza Luiz.

Candidato Jorge Bittar :: Rio de Janeiro Com o objetivo de alcançar três tipos específicos de público: o eleitor, a imprensa e a militância de uma forma geral, o site do candidato Jorge Bittar é o que possui a interface mais diferenciada. Para Gerson Penha, responsável pelo planejamento editorial, estrutura de navegação e layout, as informações contidas no site são fáceis de serem encontradas pelo usuário. Ele explica que a diferença entre a campanha feita para a TV para a do meio online, é que na primeira, o compromisso com o emocional se dá de maneira mais enfática, na intenção de persuadir o eleitor. Já na internet, além das técnicas de sedução do visitante, o papel do site político é o de detalhar e tornar disponíveis informações que nem sempre se encaixam no horário eleitoral gratuito, seja pelo formato ou por sua relevância.

Todas as informações contidas no site são atualizadas por meio de uma ferramenta de gerenciamento de conteúdo. O aplicativo permite que um editor conectado à internet possa alimentar o site sem conhecimentos técnicos. Quando uma foto é atualizada, por exemplo, o sistema gera automaticamente outros formatos: o original em alta resolução, para jornalistas, uma pequena para a página inicial, uma para a própria matéria e, por último, uma foto ampliada, porém em baixa resolução. Segundo Marco Aurélio, responsável pela área tecnológica, o grande diferencial do site do Bittar está na interatividade e dinamicidade das informações, tanto na home quanto nas demais páginas, garantidas pela facilidade de publicação

www.cesarmaia25.com.br

:

da ferramenta de gestão de conteúdo.

wysiwyg

Com a intenção de oferecer o maior número de

Significa what you see is what

informações sobre o candidato, Marco explica que

you get (o que você vê é o que

a interatividade com o usuário está garantida

você obtém). Nomenclatura

desde a possibilidade do internauta perguntar e

referente aos famosos editores

obter respostas, a downloads de material de

de html, como o Dreamweaver,

campanha, fotos para jornalistas e solicitação de

Frontpage etc, em que o usuário

newsletter, gerada e enviada pelo Editor do site.

tem a possibilidade de editar

No módulo wysiwyg, o autor ou editor identifica,

uma página diretamente pelo seu layout.

47

sites eleitorais

antes mesmo da publicação da matéria, alguns detalhes de formatação, como as quebras de linha, altura e tipologia das fontes.

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

Candidato Luís Paulo Conde :: Rio de Janeiro O site do ex-prefeito Luis Paulo Conde teve todo o seu planejamento voltado para alimentar a mídia com informações sobre sua candidatura. Com uma ferramenta de gestão do conteúdo, a equipe de jornalistas tem acesso a todas as seções, podendo

www.bittar13.com.br

inclusive otimizar a navegação principal, conforme as possíveis estratégias adotadas.

Segundo Luciana Nery, gerente de internet da campanha, o site do Conde oferece ao candidato a oportunidade de aprofundar determinadas questões. É possível detalhar propostas e esclarecer dúvidas a respeito de situações que surgem no decorrer das eleições. Muitas vezes, esse tipo de esclarecimento não pode ser feito em aparições de TV ou matérias de jornal, por limitações de espaço e tempo.

Luciana explica que a internet, além do aprofundamento das propostas do candidato, permite que os usuários conheçam mais sobre as suas realizações. É possível refrescar a memória do eleitor, destacando os projetos de Conde. Também temos por hábito responder a todos os emails, o que oferece ainda mais um canal de comunicação . Ela lembra que o site é como se fosse um espelho da campanha.

Acompanhamos toda a agenda do candidato e reagimos a todos os temas que estão em voga na mídia, questões que surgiram em debates e declarações de Conde sobre os fatos atuais .

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

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

Candidata Jandira Feghali :: Rio de Janeiro Com uma navegação dividida em três colunas principais, característica também observada entre quase todos os sites analisados, o site da candidata Jandira Feghali

48

www.conde15.com.br

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

possui uma navegação simples e intuitiva. Segundo Gustavo Alves, editor da página, a

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 tornase 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.

Entre os dias 2 de julho, quando o site foi lançado, até o dia 30 do mesmo mês, Flávio lembra que foram publicadas cerca de 500 notícias e quase 200 imagens, que podem ser utilizadas, em alta resolução, pelos jornalistas. Ele explica que o ponto de partida para divulgar o endereço da página da candidata foi feito pelo mailing do Partido dos Trabalhadores (PT). E quando o objetivo é conciliar as técnicas do marketing político às 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

Você visita ou já visitou sites de candidatos às eleições?

27% Sim 73% Não Participe das enquetes acessando o site www.arteccom.com.br/webdesign

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á decidiram 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 desgastes. 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. Enquanto 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 coisas ainda surgirão nesse terreno da campanha política online , conclui.

51

tutorial

scripts em várias linguagens Construindo sites com

por Natelson Nascimento

Às vezes temos que desenvolver sites complexos onde o uso de uma só linguagem não resolve todos os problemas, ou temos que acrescentar um item a um site já existente, que seria muito mais simples e rápido se desenvolvido em uma linguagem diferente da atual. Isso seria muito simples, se as informações de sessões do site não tivessem que ser compartilhadas, já que em linguagem diferentes isto não é possível, e se nenhuma das informações fosse sensível como senhas, que

*/ ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY] GO

O segundo passo é criar funções ASP que criem a chave da Sessão e que insiram os dados no banco de dados. sessao_site.asp <% Funcao que gera a chave usando um function do proprio Sql Server

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,

Há uma técnica simples para resolver este problema que é o uso de banco de dados, no qual se pode gravar um código de sessão e um usuário como chave, e as informações necessárias para o compartilhamento das páginas escritas em linguagens diferentes. Vamos usar aqui como exemplo as lingua-

voce pode escrever o seu proprio codigo para geracao de chaves randomicas.

Ha varios exemplos disso na internet em diversas linguagens.

Function GeraRandomicoSql(objConexaoSql) Set objChave = Server.CreateObject( ADODB.RecordSet ) sQueryChave = SELECT NewId() as Chave objChave.Open sQueryChave, objConexaoSql

gens ASP e ASP.Net e o banco de dados Sql Server, mas pode

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 precisa passar informações para páginas ASP.Net O primeiro passo é criar a tabela que guardará as informa-

Set objChave = Nothing GeraRandomicoSql = sChaveRandomica End Function 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

rou a sessão, e a data e hora em que esta foi criada, para faci-

CRIADO E O USUÁRIO QUE GEROU A SESSAO 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 =

ções que serão compartilhadas entre as linguagens.

CREATE

TABLE

[SESSAO_SITE]

( [cod_sessao] [nvarchar] (100) NULL , /* codigo da sessao */ [data] [datetime] NULL , [parametro] [ntext] ,

nome_session=valor_session|nome_session2=valor_session2....

For Each item in Session.Contents

/* data que foi criada a sessão */

/* parâmetros da sessão */

[usuario] [nvarchar] (100) NULL /*usuario que criou a sessao

52

Loop que percorre cada Session do Asp e monsta em uma string no formato:

If not IsObject(Session.Contents(item)) Then If not boolInicial Then

sParametro = sParametro & | Else boolInicial = False End If sParametro = sParametro & item & = & Session.Contents(item) End If Next sCod_sessao = GeraRandomicoSql(objConexaoSql) sUsuario = Trim(sUsuario) SParametro = Replace(SParametro, , ) como se trata de uma query, tira os apostrofos e aspas caso hajam para evitar erros na execução da query sQuerySessao = INSERT INTO SESSAO_SITE(cod_sessao, data, parametro, usuario) VALUES ( & sCod_sessao & ,GETDATE(), & SParametro & , & sUsuario & ) Executa a query objConexaoSql.Execute sQuerySessao seta o retorno da funcao com o valor da chave criada Gera_SessaoSite = sCod_sessao End Function %>

O terceiro passo é montar este quebra-cabeça dentro da sua aplicação. Para demonstrar isso vamos imaginar que temos uma página ASP de um site de consultoria. Um usuário x teve que efetuar um login para utilizar o site, e tem diversas 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

VEIO NA URL E O USUARIO */

/* USA NOVAMENTE O SPLIT PARA SEPARAR O 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(); /* PEGA DO BANCO OS PARAMETROS COM BASE NO

string[] obj2=sValorParametro.Split( = .ToCharArray());

COD_SESSAO E USUARIO */ /* CRIA A CONEXAO COM O SQL, USO AQUI UM DRIVER PRÓPRIO PARA O SQL SERVER, PARA SIMPLIFICAR O

/*CRIA UMA SESSION COM O NOME DO PRIMEIRO ITEM DO ARRAY, E COM O VALOR COM O SEGUNDO 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 SESSAO_SITE

s.Close();

*/

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 INSTRUCAO SQL */ SqlCommand comando = new SqlCommand(sQuery, conexao);

chave única que foi passada na URL e o usuário, fica fácil compartilhar as sessões entre sites e fazer as devidas validações

/* ABRE A CONEXAO */ conexao.Open(); /* CRIA-SE UM OBJETO DATAREADER COM O RESULTADO */

de segurança que se queira, para garantir que um usuário que não tenha a devida permissão não acesse aquele item do site.

Se o método de passar todas as informações fosse via formu-

SqlDataReader s = comando.ExecuteReader(); try

lário, por exemplo, seria muito simples um usuário mal- intencionado criar um site qualquer que enviasse estas informações e

{ string sParametros= ; /* SE RETORNOU ALGO SETA UMA STRING COM O VALOR DO CAMPO PARAMETRO */ while(s.Read()) {

hackear a página .aspx, colhendo as informações que quisesse do cliente do site de consultoria.

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 manter a sessão do usuário criada nos casos de conexão perdida

/* USA O METODO SPLIT PARA SEPARAR EM UM ARRAY A STRING USANDO COMO */ /* DELIMITADOR O CARACETER | */ string[] obj=sParametros.Split( | .ToCharArray()); /* FAZ UM LOOP PARA PERCORRER CADA ITEM

54

Com os dados conseguidos no banco de dados a partir da

ou de sessão expirada, mas isto já é um assunto para discutirmos em outra ocasião.

Agora é só usar a imaginação e ficar livre para usar as linguagens que melhor se adequarem a sua necessidade.

55

estratégia online

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

Uma nova forma de escutar (e consumir) música Saiu em agosto, no Brasil, o iPod Mini da Apple, um show de marketing, design e tecnologia.

A experiência do usuário Um player MP3 não é nenhuma novidade. No entanto, um player do tamanho de um cartão de visitas, com 4GB (cerca de 1000 músicas) e um desenho industrial estupendamente bem resolvido 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, manufaturado 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 escutamos 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 acessória ( também com a assinatura do departamento de desenho industrial da Apple ), e sair andando 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 individualmente 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 digitalmente e legalmente. Assumindo que o preço é correto ao mercado, é uma experiência de consumo 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ústria 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.

Boas conseqüências Quando o produto é bom, seu posicionamento de

Ao que parece, a Apple aprendeu a dura lição do passado de que o quesito qualidade não é a única métrica de sucesso. O 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 enquanto), os resultados inevitavelmente aparecem. A Apple fechou o último trimestre com o maior faturamento 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.

Entra então em cena o número dois.

Oi Marcela, esse é o Beltrano meu sócio aqui na Produtora. diz Fulano.

Depois das apresentações retomamos nosso papo, quer dizer, era o que eu pensava, mas não foi o que aconteceu.

Não é bem assim viu Fulano, eu tava agorinha falando

ção? que pergunta idiota. É, mas o trabalho engloba também o evento receptivo.

Você podia dar uma mão na produção. Isso aqui tá a maior zona. confessa o Fulano.

Pô! Esses caras querem uma roteirista ou uma diarista?

Sexta-feira o mundo cai lá fora 16:02 minutos Sala da minha casa.

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

E começou a falar e falou, falou, falou e não parou mais.

Sexta-feira ainda chuvosa 13:10 minutos Sala de Reunião.

Legal. Eu acho que vai ser importante acompanhar a edição e fazer o roteiro. Mesmo porque eu adoro editar. e fui sincera.

Tô fora! Quem sabe em uma próxima oportunidade. adoro essa frase. É! Vida de freela é assim mesmo. A gente tem essa vantagem.

E então abri meu Ítalo Calvino e 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 pedra 13:55 minutos Sala de Reunião.

Não. A gente não precisa de roteirista. Vocês tão malucos? 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 profissional 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 fornecedores 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. Experiências anteriores (e cicatrizes e calos) ajudam muito, mas um bom exercício de e se... pode prevenir muita coisa.

Por exemplo: você recebe um layout todo diagramadinho,

alterações? E se for preciso migrar de hospedagem?

Antes de se encantar com discursos legais , cool e criativos , veja se o airbag funciona. Ou então torça para criarem 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), formouse 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 armazenagem é 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 deixasse 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 polegadas 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 co62

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 comece novamente a funcionar.

Neste artigo mencionei somente duas das inúmeras 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 forma 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 bordo 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 realidade 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

experience design

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

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, odeiam 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 defensores 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, quarentões sem experiência digital, crianças, todos têm que ter acesso fácil e rápido. Já dá pra imaginar 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 inventassem 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 complexas 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 poderoso, 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 atendimentos 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 produto 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