Ed39 by Emanuel Limeira

março 2007 :: ano 4 :: nº 39 :: www.revistawebdesign.com.br

SINFONIA DAS

CORES Entrevista: o valor do design no comércio eletrônico E-mais: dicas para elaboração de um briefing Tecnologia: como tornar seu site acessível?

E D I T O R A

R$ 9,90 I SSN 1806 - 0099

9 771806 009009

00039

4 :: quem somos

Editorial

Equipe

Designer seria o “mestre” das cores?

Direção Geral Adriana Melo

Se você me perguntar qual foi a imagem carnavalesca que ficou em

Direção Executiva Sergio Melo

marcante de 2007. Certamente, a minha escolha envolve a experiência vivida nos diversos blocos de rua, que voltaram a movimentar o tradicional carnaval carioca. Domínio harmônico, cadência na evolução dos ritmos e equilíbrio no uso do “arsenal” de instrumentos à sua disposição. Mas o que isso teria ligação com o mundo do design, pergunta, você, nosso curioso leitor movido pela sede do conhecimento! Na minha opinião, essas qualidades inerentes à

Direção de Redação Luis Rocha Criação, Diagramação e Ilustração Camila Oliveira Leandro Camacho Beto Vieira Publicidade Débora Carvalho Felipe Back Gerência de Tecnologia Fabio Pinheiro

profissão de fé de um mestre de bateria estão metaforicamente conectadas

Desenvolvimento Web Cadu Sant'Anna

ao processo de produção de um designer, principalmente quando falamos

Financeiro Cristiane Dalmati

da composição cromática de um projeto. Como pontua, de forma definitiva, a professora Márcia Okida, na reportagem de capa, “uma cor no local errado pode desafinar toda a orquestra da usabilidade e da arquitetura da informação”, o assunto merece um

Atendimento Luanna Chacon Atendimento aos assinantes atendimento@arteccom.com.br

estudo aprofundado, para que as cores não se tornem um obstáculo ao

Redação redacao@arteccom.com.br

período de experiência do usuário dentro de um site. Falando em obstá-

Anuncie publicidade@arteccom.com.br

culos, é oportuno dizer que a edição de março apresenta ainda, na seção Tecnologia na Web, as etapas necessárias para tornar o seu site acessível para as pessoas com deficiência. Para finalizar, anunciamos que novas cores surgem para alegrar a vida de nossa editora, Adriana Melo. Em fevereiro, sua vida se tornou mais completa com o nascimento de Ana. Assim, dedicamos essa edição à Adriana e família, desejando mais saúde e muito amor nesta nova etapa de suas vidas!

A Arteccom é uma agência especializada na criação de sites e responsável pelos seguintes projetos: Revista Webdesign :: www.revistawebdesign.com.br Concurso Peixe Grande :: www.arteccom.com.br/ webdesign/peixegrande Encontro de Web Design :: www.arteccom.com.br/encontro Fórum Internacional de Design e Tecnologia Digital :: www. arteccom.com.br/ﬁnd Projeto Social Magê-Malien :: www.arteccom.com.br/ong

Criação e edição www.arteccom.com.br

Produção gráfica

Abraços,

Luis Rocha.

www.prolgraﬁca.com.br

Distribuição www.chinaglia.com.br

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

minha cabeça, posso dizer que a figura do mestre de bateria foi a mais

menu :: 5

apresentação

e-mais

pág. 4 quem somos

pág. 38 debate: Briefing

pág. 5 menu

pág. 46 e-mais: Briefing pág. 51 estudo de caso: Fellini pág. 56 tecnologia na web: Acessibilidade pág. 60 tutorial: Produtividade 2.0 - Parte 5

contato pág. 6 emails

com a palavra

pág. 6 fale conosco

pág. 64 internacional: Julius Wiedemann pág. 66 usabilidade: Robson Santos pág. 68 marketing: René de Paula Jr.

fique por den tro pág. 8 métricas e mercado pág. 10 direito na web pág. 11 post-it

portfólio pág. 12 agência: Hiato pág. 18 freelancer: Rafael Garcia pág. 20 ilustração: Will Murai

matéria de capa pág. 22 entrevista: E-commerce pág. 30 reportagem: Sinfonia das cores

pág. 70 webwriting: Bruno Rodrigues pág. 72 webdesign: Luli Radfahrer

6 :: emails

Assunto: Direito Utilidade uma nade web revista

Assunto: Criando uma agência

Parabenizo a revista pelo ótimo Havia mandado um e-mail para

conteúdo e pelas excepcionais

vocês logo que me apaixonei pela

matérias sobre design na

revista. Descobri que não tenho Já existe uma data de inscrição

edição 35 (sites móveis). Leitura

tanta aptidão para programação

extremamente agradável tanto

Preciso de ajuda. Trabalho

para a edição 2007 do concurso

quanto tenho para criação. Resolvi

numa empresa de venda de

Peixe Grande?

para sofá macio quanto em ônibus

investir no que eu faço de melhor.

software, ainda nova, e que

Bruno Oliveira bbruoliveira@hotmail.com

lotado, agarrado em seus ferros

Estou criando um site com minhas

enferrujados!

começou a oferecer serviço

ilustrações e dicas sobre arte,

Gostaria de sugerir uma matéria:

de web recentemente. Sou

cultura e design. E uma das coisas

como iniciar uma agência? Eu e

a única responsável por esse

mais interessantes nessa história é

cinco amigos estamos trabalhando

setor. Além de toda a criação

que a revista não ﬁcou inútil para

há um ano e meio em dois

e a programação, também

mim. Pelo contrário, parece que

dos maiores provedores de

preciso vender o serviço. Esse

virou uma peça mais importante,

hospedagens do Brasil e estamos

é o problema. Como vender um

até ﬁz a assinatura. Fiquei mais

querendo montar uma agência.

site? Convencer o cliente sobre a

feliz ainda quando vi na revista

Já criamos até o logotipo e

importância e o valor cobrado. Já

o Portfólio Ilustração. Aproveito

deﬁnimos as cores. No entanto,

saiu em alguma edição?

para parabenizá-los pelo conteúdo

temos muitas dúvidas de como

Juliana ju1984@gmail.com

na web2007 Assunto: Direito Peixe Grande

Bruno, a previsão da comissão organizadora do Selo é que as inscrições sejam abertas no mês de agosto. Para quem quiser conferir os vencedores de 2006, é só acessar o site www.arteccom.com. br/webdesign/peixegrande. na web Assunto: Direito Mais design! Parabéns pela escolha da matéria principal do mês de janeiro (gestalt). Trago uma sugestão para as próximas edições. Gostaria de ler os seguintes

da edição 34 (Design e Arte), principalmente a reportagem da capa. Quero, também, pedir autorização para colocar um link da revista no meu site. Carolina carolla_ps@yahoo.ca

assuntos que envolvem o design:

iniciar as atividades. Abraços,

na webum site? Assunto: Direito Como vender

Cicero Monthiel falecom@monthiel.locaweb.com.br

Oi, Juliana. Claro que podemos

Olá, Cicero. Ficamos lisonjeados

2005, “Quanto cobrar?”, você pode

com os elogios! Sua sugestão

conferir dicas sobre orçamento,

é ótima, principalmente neste

cálculo de horas, concorrência,

mercado, que oferece uma grande

contrato e negociação. Boa sorte em seus novos desaﬁos!

ajudá-la! Na edição de fevereiro de

clean, arte de rua, colagem e,

Carolina, ﬁcamos muito felizes que

oportunidade para os novos

por último, gostaria de saber um

a revista venha ajudando em seu

empreendedores. Vou levá-la para

pouco mais sobre a escola alemã

crescimento proﬁssional! Certamente,

a nossa reunião de pauta, ok? Ah,

essa é uma das maiores recompensas

Desculpe a nossa falha!

de design. Um abraço,

continue participando!

Na edição de fevereiro, entre as

Roberto Magalhães. robertto.magalhaes@gmail.com

Roberto, estamos programando, para o segundo semestre de 2007, uma nova coleção, que vai reunir diferentes segmentos do mercado (agências, freelancers e meio acadêmico), para falar sobre os conceitos fundamentais e os novos

de nosso trabalho. É bom saber também que a seção Portfólio Ilustração vem agradando. O objetivo é mostrar um campo de trabalho que pode ser explorado pelos novos proﬁssionais. Pode colocar o link em seu site, é uma ótima forma de divulgar o nosso trabalho. Obrigado e muito sucesso em sua carreira!

páginas 53 e 54, uma parte da entrevista da seção “Estudo de Caso” saiu truncada. Segue o trecho que faltava no texto: “...que um grande erro em sua utilização era a falta de aplicação dos conceitos de usabilidade. De que forma vocês procuraram aplicar a usabilidade dentro do novo site?

rumos do design para web. Aguarde

Gianfranco :: A usabilidade foi um dos

as novidades que vem por aí!

principais pilares...”.

fale conosco pelo site www.revistawebdesign.com.br :: Os emails são apresentados resumidamente. :: Sugestões dadas através dos emails enviados à revista passam a ser de propriedade da Arteccom.

8 :: métricas e mercado

Navegação residencial por internauta Dezembro/2006 País

795 milhões Essa é a estimativa dos downloads de faixas musicais em

Tempo médio por pessoa

2006, ou seja, um crescimento de 89% sobre o montante apurado em 2005. Os downloads de singles e de master-

Brasil

21h39min

França

18h41min

EUA

18h05min

Austrália

17h41min

tones experimentaram um crescimento expressivo.

Japão

17h40min

Fonte: IFPI (Federação Internacional da Indústria Fonográﬁca)

tones continuam sendo os formatos musicais digitais mais importantes, mas outros formatos, tais como os downloads para celular, os álbuns digitais e os vídeos musicais e ringback

José Calazans, analista de internet do IBOPE Inteligência, aponta que esse foi o oitavo mês seguido em que o tempo por usuário residencial no Brasil ficou acima das 20 horas mensais e a primeira vez que passou das 21 horas.

Ou seja, o comércio eletrônico

Fonte: Ibope//NetRatings (www.ibope.com.br)

brasileiro reúne 8,2 milhões de usuários

56,7%

únicos residenciais, índice inédito atingido no mês de dezembro de 2006. A evolução no segmento: aumento

13 milhões de usuários únicos

de 3% sobre novembro, 14% sobre outubro e 23% sobre dezembro de

Com estes números mensais, buscadores, portais e

2005. Lembrando ainda que o total de

comunidades continuam sendo os principais interesses

usuários ativos, em dezembro, foi de

dos brasileiros na internet. Segundo o Ibope, outro

14,4 milhões de pessoas.

destaque são os comunicadores de mensagens ins-

Fonte: Ibope//NetRatings (www.ibope.com.br)

tantâneas, com tempo de uso acima das cinco horas mensais por pessoa. Fonte: Ibope//NetRatings (www.ibope.com.br)

Você utiliza os conceitos da psicologia das cores na criação de um site? Total de votos: 297

96%

... dos SMS (mensagens curtas no celular)

Sim - 69%

são lidos instantaneamente. Essa é uma

Não - 31%

das principais vantagens da tecnologia, de acordo com a 2ª edição da pesquisa “O uso do SMS Marketing nas empresas”. Fonte: WBI Brasil (www.wbibrasil.com.br)

Envie sugestões e críticas para redacao@arteccom.com.br

acesse e participe! www.arteccom.com.br/webdesign

métricas e mercado :: 9

ViuIsso?

Por Michel Lent Schwartzman - michel@viuisso.com.br Site: www.viuisso.com.br

Notícias e comentários sobre comunicação digital, internet e publicidade Orkut, agora com vídeos

no mercado, mas pode sim jogar mais alguns pontos de share para a Apple. É um bom argumento, ainda mais considerando que, nos EUA, não há diferença significativa de preços entre os dois tipos de máquina.

É a novidade na rede social mais popular do Brasil.

Salve o país feio com o IED

Fazendo integração com outros produtos da família G o o g l e , o O r k u t a g o r a a c e i t a v í d e o s d o Yo u Tu b e e do Google Video, de forma super simplificada, bastando apenas inserir o link na página de vídeos q u e , a o c o n t r á r i o d a s f o t o s , n ã o p a re c e t e r l i m i t e . O que faz bastante sentido já que neste caso não há a r m a z e n a m e n t o d e a rq u i v o s n o j á s o b re c a r re g a d o servidor do Orkut. Um fato interessante de se notar é que o percentual de brasileiros acessando o site diminuiu. Em abril do ano passado, os brasileiros representavam 71% do total de usuários e agora este número caiu para 57%. A rede social parece estar fazendo mais sucesso com os americanos (18%) e os indianos (12%). (Via TNow)

Chegou, por e-mail, o “Manifesto Shantsu” (http://

Outro computador para rodar Vista? Compre um Mac

tinyurl.com/2hchae), um pedido de ajuda de Marcus San-

É o q u e d i z a n o v a c a m p a n h a d a A p p l e ( w w w.

tini Junior, para salvar o país mais feio do mundo: o seu.

apple.com/getamac/ads), pegando no ponto fraco

Na realidade, é uma bem-humorada e muito bem

da concorrente e líder de mercado Microsoft, com o

executada campanha interativa para divulgar o Instituto

lançamento do novo sistema operacional Vista.

E u ro p e o d i D e s i g n ( I E D ) , d e S ã o P a u l o . C r i a d a p e l a

Segundo recomendação da própria Microsoft, para rodar adequadamente o Vista com toda a sua superioridade

Lodduca e divulgada pela e-Pidemic Agency, tem bom casting, roteiro, direção de ator e de arte.

de interface gráfica, é necessário se fazer um upgrade no

O que não dá para não deixar de notar é a forte

hardware ou mesmo comprar um novo computador. A Apple

semelhança do personagem Marcus Santini Junior e seu país,

aproveita e rebate: se você vai comprar outro computador

com Borat Sagdiyev, personagem do humorista inglês Sacha

de todo jeito, por que não comprar logo um Mac e ter o

Cohen, cujo longa-metragem agitou os Estados Unidos

original daquilo que o Vista parece estar copiando?

(estréia no Brasil, no final de fevereiro).

Certamente, a campanha não vai ter grande impacto

(Via Thiago Bersou, por e-mail)

10 :: direito na web

Relações entre sites e portais “Sou sócia de um site de médio porte, que é patrocinado por um grande portal. Nosso contrato é de parceria, por dois anos, onde ﬁcaram estabelecidos direitos e deveres de cada parte. Como dever de cada um, no que tange a publicidade, ﬁcou estipulado que as campanhas devem ser autorizadas por ambas as partes e a divisão de comissionamento é de 50% para cada, sendo pago dez dias após o recebimento do anunciante. No entanto, eles estão nos devendo meses de campanhas. Como tudo é tratado via e-mail, não sei o que fazer para pressioná-los a cumprir e nos dar satisfações.” Juliana Ponsinet (juhbr@hotmail.com)

Os tribunais têm se ocupado crescentemente do tema da hospedagem de sites pelos portais.

zações e registrar as situações excludentes de multas e de outras penalidades.

Inicialmente, as demandas se concentravam qua-

A lista pode e deve continuar, pois a hospe-

se totalmente na responsabilidade solidária pe-

dagem estruturada sobre a plataforma da inter-

rante consumidores. Hoje, surgem mais casos de

net é bem mais soﬁsticada, por exemplo, do que

interpretação dos contratos da hospedagem.

hospedagem em hotéis (cujas ﬁchas de check-in

Tais contratos foram desenvolvidos, no

se resumem a formulários) e com interesses mais

Advogado formado na PUC/RJ,

mais das vezes, em cima de padrões (de pres-

complexos que os da convivência em condomí-

com Mestrado na USP e cursos

tação de serviços em geral, de locação de es-

nio de edifício (cuja convenção e regimento são

em Harvard e no M.I.T. Ex-

paço de disco em servidor, ou outros) inespe-

bastante longos e detalhistas, como se sabe).

cíficos em relação à hospedagem na internet.

Porém, mais importante do que a quantidade de

e nos EUA. Sócio de Martins de

Resultado: os contratos pouco ajudam (e mui-

pontos a serem tratados, é a customização que

Almeida - Advogados, escritório

to atrapalham) e os juízes ficam em dificuldade

deve ser feita. Não há como, em sã consciência,

Gilberto Martins de Almeida

Gerente Jurídico da IBM, onde trabalhou por 11 anos, no Brasil

especializado.

para aplicar a lei (particularmente o Código

recomendar modelos “de papelaria”. Cada caso

Envie sua dúvida para:

Civil, que pode enquadrar a maior parte das

é um caso (a hospedagem paga tem implicações

redacao@arteccom.com.br

situações). Talvez o caminho mais natural para

diferentes daquelas da hospedagem gratuita, a

prevenir tais problemas seja caprichar no con-

hospedagem com marketing cooperado ou de si-

teúdo desses contratos. Exemplos:

tes comerciais é distinta da hospedagem de sites

i) prever o tipo de informações (receitas

institucionais etc.).

auferidas, divulgação realizada, mídias utiliza-

E quando as precauções acima não tenham

das, parceiros beneficiados, custos comparti-

sido tomadas? A negociação costuma (também

lhados) que uma parte deve assegurar à outra

aqui) ser a alternativa com melhor custo/bene-

e em qual periodicidade;

fício. Quando ela não for viável, medidas caute-

ii) especificar como a fiscalização do cum-

lares requerendo liminar para exibição de docu-

primento de obrigações poderá ser realizada

mentos, prestação de contas ou produção ante-

(quais métricas, quais sistemas, quais acessos,

cipada de provas podem ser meios hábeis para

quem audita);

judicialmente compelir quem não queira cooperar

iii) garantir que todos reconheçam a “validade” de comunicações via e-mail; iv) deﬁnir quem será responsável por atender certas espécies de reclamações de consumidores;

como deve. E as notiﬁcações e interpelações (via cartórios, ou via Justiça) podem chamar atenção para a importância das discussões destinadas a resolver o passado ou pavimentar o futuro.

v) pactuar sobre a quem caberá a proprie-

Quanto a possível desigualdade de con-

dade intelectual de interfaces, domínios, layout,

dições técnicas e econômicas entre sites e

frames etc., e regras de sua utilização;

portais, vale o que disse Rui Barbosa sobre o

vi) estipular a adesão a Termos de Serviços e a políticas de privacidade; vii) identificar responsabilidades por segurança, contingência, seguros e outras; viii) prefixar limites máximos de indeni-

re-equilíbrio a ser buscado no Judiciário com fundamento no chamado princípio da igualdade material (também chamado de princípio da proporcionalidade): tratar a todos desigualmente, na medida de suas desigualdades.

post-it :: 11

entro , d r o p Fique cas, eventos ias das di e referênc undo livros vimentam o m que mo ign na web do des

Animação interativa sobre as cores A partir da página 30, você vai conferir alguns dos principais

Blog do mês: “O designer inquieto”

conceitos envolvidos na composição cromática de projetos digitais. Antes de você chegar até lá, trazemos um pequeno aperitivo sobre o assunto: “Color in Motion” (www. mariaclaudiacortes.com), de Claudia Cortés. “Quando vi pela primeira vez, chorei de emoção pela simplicidade e clareza de conceitos psicodinâmicos”, revela Helena Sordili, professora da Universidade Anhembi Morumbi.

De olho nas ilustrações Para quem procura referências na área, a dica é ficar ligado nos trabalhos publicados em três sites: Illustration Friday (www.illustrationfriday.com), Illustrationmundo.com (www. illustrationmundo.com) e 21 Illustrators.com (www.21portfolios. com/illustrators).

Usabilidade = retorno financeiro Recentemente, a Folha Online publicou uma entrevista com Jakob Nielsen (www.useit.com), considerado um dos “papas” da usabilidade na web. No bate-papo, o especialista afirma que as

Mais uma novidade dentro da seção Post-it! Mensalmente, vamos

“...empresas descobriram que obtêm mais lucro de seus websites

indicar um blog que apresente assuntos relacionados ao design

quando seguem diretrizes de usabilidade e administram testes

para web. Em março, o destaque vai para “O designer inquieto”

de usabilidade e é por isso que eles a utilizam mais”. A íntegra da

(http://dicasdesign.blogspot.com/), de Thorii Pablo.

entrevista está disponível em: http://tinyurl.com/27f75c.

Conhece algum blog interessante? Então, mande sua dica para

Produção acadêmica no design para web

redacao@arteccom.com.br.

A dica deste mês pode ser útil para quem procura material sobre o tema “metodologia de trabalho”. Estamos falando do projeto “Processo de desenvolvimento de projetos web” (http://tinyurl. com/2fbebj), apresentado por Jean Cambruzzi, no curso de

Agenda de eventos

Comunicação Digital da Unisinos. Se você possui ou conhece

19/05 - 12º EWD - RJ (www.arteccom.com.br/encontro)

algum trabalho acadêmico interessante, envie sua sugestão para

16/06 - 12º EWD - Recife (www.arteccom.com.br/encontro)

redacao@arteccom.com.br.

Pop Art no Photoshop Na edição de outubro de 2006, abordamos a importância da história da arte como base para o trabalho de um designer. No tutorial “Pop Art Inspired by Lichtenstein” (http://tinyurl. com/r9nbp), você vai aprender como trabalhar efeitos visuais no

14/07 - 12º EWD - Belo Horizonte (www.arteccom.com.br/encontro) 15/07 - NDesign Floripa 2007 (www.ndesign.org.br/2007) 18/08 - 12º EWD - Brasília (www.arteccom.com.br/encontro) 23/08 - FIND - Rio de Janeiro (www.arteccom.com.br/find) 15/09 - 12º EWD - Curitiba (www.arteccom.com.br/encontro)

Photoshop, inspirados na Pop Art, considerado um dos últimos

20/10 - 12º EWD - Salvador (www.arteccom.com.br/encontro)

grandes movimentos da arte contemporânea.

10/11 - 12º EWD - Porto Alegre (www.arteccom.com.br/encontro) 08/12 - 12º EWD - São Paulo (www.arteccom.com.br/encontro)

Participe do Post-it! Envie sugestões para redacao@arteccom.com.br.

12 :: portfólio agência - Hiato

os operários da comunicação digital Design gráﬁco, design para web, motion, multimídia, produção e promoção. Essas são as principais ferramentas que a Hiato (www.hiatofc.com.br) apresenta na busca por um espaço no disputado mercado brasileiro de comunicação. A história da agência se inicia em julho de 2004, através da reunião de alguns amigos com interesses em comum. “Juntamos proﬁ ssionais de algumas áreas e começamos a trabalhar. A idéia inicial continua em forma: usar diferentes ferramentas para assessorar os clientes na comunicação de suas marcas e serviços, fazendo o que as agências tradicionais não fazem”, aponta Luciano Cian, sócio-diretor de criação web multimídia. Situada na cidade do Rio de Janeiro, a agência busca referências no cenário urbano para construir uma identidade, tendo a inovação como diferencial produtivo. “O Rio de Janeiro é uma antítese ambulante. Vivemos entre coisas belas e horrendas. Essa veia de cidade grande com espírito provinciano nos possibilita transitar em vários estilos. Nossos projetos são caracterizados pela busca da novidade, sempre. Muitas vezes esbarramos nos prazos e na falta de verba, mas a idéia é realizar o máximo dentro de um escopo real. Nossos sites são ‘leves’. Ou seja, procuramos disseminar as informações de forma clara e criativa, utilizando ferramentas como vídeo e áudio para tangibilizar o contato virtual”. E para que a plenitude no processo de criação seja alcançada, Luciano cita a liberdade como principal fonte de estímulo. “Buscamos fazer do ambiente de trabalho algo totalmente informal. Incentivamos a convivência entre as pessoas. Isso não gera oba-oba, muito pelo contrário, cada um assume sua responsabilidade porque sente que a liberdade é fundamental para o ambiente de trabalho”. A seguir, vamos abrir a caixa de ferramentas da Hiato e descobrir como elas funcionam na criação e no desenvolvimento de sites.

portfólio agência - Hiato :: 13

Cemusa Verão

Jornal O Globo

www.cemusa.com

www.infoglobo.com.br/orioecomagente/index.htm

Tecnologias utilizadas: After Effects e Flash

Tecnologia utilizada: Flash

A prospecção de novos clientes é tarefa que exiLembre-se disso: um bom trabalho realizado para um

ge paciência e muita determinação para que futuras

cliente, certamente vai lhe garantir um outro em breve.

oportunidades apareçam. A apresentação de um bom

Este case da Hiato é um bom exemplo deste cenário. “Con-

portfólio foi a senha para que a Hiato iniciasse seu

quistamos esse job através de uma indicação. Um cliente

relacionamento com o jornal O Globo. “Trabalhamos

gerou outro”, aponta Luciano. Assim, quem se tornaria o novo cliente da agência seria a Cemusa, uma multinacional de mobiliários urbanos. “Eles vieram com a proposta de vender um pacote de verão, disponibilizando circuitos de mobiliários nas praças mais importantes. Para isso, utilizamos ilustrações

com eles no formato job. Ou seja, não existe contrato de agência, somos chamados para pequenas concorrências dentro do departamento comercial”. Um dos projetos já realizados pela agência foi o desenvolvimento do hotsite da campanha “O Rio é

dos locais (todas desenvolvidas pelo departamento de

com a gente”, cujo objetivo era apresentar a força dos

design gráfico da Hiato). As informações foram dispostas

jornais do grupo (O Globo, Extra e Expresso) para as

por praças, para facilitar o entendimento. Para reforçar o

agências de publicidade.

caráter comercial do projeto, inserimos mapas ilustrativos dos circuitos”.

“A função desse hotsite foi mostrar a campanha c o m ê n f a s e n o s d a d o s d e p e s q u i s a . P a r a a p re s e n t a r

Na internet, o verão seria o principal mote na hora de

esses números de forma dinâmica, sem cair na chatice

compor o visual do hotsite. “Buscamos referências de um

dos gráficos tradicionais, buscamos animações simples

verão bem brasileiro. Ou seja, cores quentes. Trabalhamos

e informativas. Como se trata de um hotsite sobre uma

com o espaço aberto, ou seja, não existe moldura. Aliás,

campanha, buscamos fidelidade total com as peças que

estamos usando esse recurso cada vez mais, porque não delimita o espaço do layout”. Um desafio no processo de criação envolvia a modelagem dos pássaros que voam pelo hotsite. “Eles foram feitos no After Effects, onde controlamos settings como gravidade, quantidade, velocidade etc.”.

estão na mídia”.

14 :: portfólio agência - Hiato

Mix Rio

Ipanema Stereo Beach 2007

www.mixriofm.com.br

www.ipanemastereobeach.com

Tecnologia utilizada: Flash

Tecnologias utilizadas: After Effects e Flash

O segundo semestre de 2006 reservou um grande desafio para a Hiato: desenvolver toda a comunicação do Ipanema Stereo Beach 2007, evento produzido Considerada sua maior parceria, o Grupo Dial Brasil tem municiado a agência com bons projetos. O último deles envolveu a criação do hotsite da rádio Mix Rio FM. "O briefing foi bem específico: um hotsite de l a n ç a m e n t o . C o m o s e t r a t a d e u m p ro d u t o n o v o n o mercado carioca, o conceito da rádio é percebido muito

pela SR Produções, antiga parceira da agência. “Conquistamos a conta porque investimos na idéia, na sua criação. Formatamos um projeto multimídia para vender a idéia do réveillon de Ipanema. Entramos no risco e ficamos com a conta”, diz Luciano.

mais pela composição do que por textos explicativos.

Vencido o primeiro desafio, o próximo passo seria

Nosso trabalho foi de adaptação. A campanha, criada

c r i a r u m a m b i e n t e i n f o r m a t i v o q u e re p re s e n t a s s e o

pela agência de publicidade F3, tem vários elementos que

espírito jovem e moderno que envolvia o evento.

remetem à cultura pop. Utilizamos as cores e a tipografia

“ E s c o l h e m o s f o n t e s q u e re p re s e n t a s s e m a i d é i a d e

da campanha de lançamento da rádio no Rio. Exploramos

modernidade, sem exageros. As cores, desde o início,

esses elementos no layout, dando movimento”.

foram escolhidas para traduzir o espírito psicodélico

Apesar de o projeto partir da adaptação da campanha

do psy trance. Fugimos do tradicional preto. Pensamos

off-line na internet, a Hiato procurou colocar sua

em dar ‘vida’ através de cores mais cítricas. O visual foi

personalidade dentro deste projeto. “Adaptamos o visual da campanha pensando sempre no público-alvo da rádio. Como ela é uma rádio jovem, usamos uma linguagem leve, corriqueira. Nossa personalidade está representada nos vídeos, nos jogos e na leveza das informações”.

baseado no clima do Guaraná Antarctica (patrocinador do evento), mas com muita liberdade”. Os elementos audiovisuais são um dos destaques deste hotsite. “A mulher que dança dentro do player foi captada exclusivamente para esse fim. Ou seja, colocamos uma menina em chroma key e recortamos o fundo no After Effects”, revela.

portfólio agência - Hiato :: 15

Bloco do Caveira www.blocodocaveira.com.br Tecnologia utilizada: Flash

Uma brincadeira para “desestressar”. Assim nasceu o Bloco do Caveira, um projeto interno da agência. “Contrariando a máxima ‘casa de ferreiro, espeto de pau’, criamos um site divertido, com interações, explorando o personagem que dá título ao bloco. O layout é solto, sem regras. Utilizamos tipografia e cores variadas”. Para se ter uma idéia de como a criatividade foi explorada ao máximo neste projeto, durante o carregamento do site, foi disponibilizado um jogo, cujo objetivo é tentar acertar as caveiras que ﬁcam passando na tela. “O site é relativamente pesado, por isso a idéia de criar alguma interação que entretenha quem está navegando. E, como se trata de um site descontraído, optamos por um ‘jogo’ que tivesse senso de humor”. Outro detalhe interessante está presente nas ilustrações que compõem a interface do site. “Fizemos tudo no papel. Depois passamos para um software vetorial, compondo as partes dos personagens. Só depois colocamos no Flash para animar”.

Assine a revista e ganhe a coleção completa! Assinando a Revista Webdesign você ganha três cds com a coleção completa! Assine já e receba: 12 edições impressas + 3 cds com as edições de 2004, 2005 e 2006 Esta promoção também é válida para renovação de assinatura! Renove agora por apenas 3x33,00 no cartão ou 2x49,50 através de boleto bancário!

w w w. re v i s t a w e b d e s i g n . c o m . b r

18 :: portfólio freelancer - Rafael Garcia

Rafael Garcia Contato: rafaelgarcia@globo.com Site: www.rafaelgarcia.com.br

Uma infinidade de pequenas colagens Para quem acha que as premiações na área de criação servem apenas para inflar o ego de profissionais excêntricos, a trajetória de Rafael Garcia nos ajuda a revelar outro lado desta história. “O reconhecimento em forma de prêmios é essencial para sinalizar que estamos no caminho certo. A inclusão do meu portfólio na compilação da editora Taschen, ‘Web Design: Portfolios’, foi essencial para seguir acredi-

“As cores e a tipograﬁa empregadas vêm da minha ligação com o expressionismo gráﬁco da escola de Robert Rauschenberg e David Carson”

tando em uma nova forma de comunicação coorporativa e independente, mais qualiﬁcada e segmentada”, aﬁrma.

caminhar, você se exercita e também pode refletir muito

Isso porque sua profissão de fé caminha ao lado de

sobre a vida e as idéias, isso sem aquela ansiedade de

diversas influências, que ajudam na construção de uma

estar sentado de frente para o computador. O cérebro

identidade profissional. “Tento não ter um estilo definido,

funciona muito melhor oxigenado”.

mas somos únicos, temos uma impressão digital e uma íris

O resultado de todas essas influências se materializa

únicas. Transito pelo expressionismo, o barroco e o con-

no site portfólio de Rafael. “Ele foi uma conseqüência de

cretismo. Amo gestalt também. Sou uma infinidade de pe-

12 anos de trabalho, uma extensão dos meus cadernos,

quenas colagens. Minha principal influência, sem dúvida,

storyboards e campanhas que participei. Tem muito de ci-

vem da escola expressionista e seus principais expoentes

nema também, filmado e animado. Concluí que o formato

nacionais e internacionais. Atualmente, desde um quadro

de rolagem de imagem tinha tudo a ver com a minha pes-

renascentista a um desenho de trilhas de formigas no solo

quisa. As imagens das tiras de rolagem, principalmente nos

me interessam e me influenciam com o mesmo peso”.

fotodiários, são planos em seqüência, estudos de edição

Além disso, ele procura aguçar cada vez mais o seu instinto de observação. “Trabalho meu processo de criação

para montagem de filmes futuros. Resumindo, o site é um grande caderno de anotações”.

vendo e vivendo intensamente tudo que passa por mim:

Então, podemos dizer que a experimentação pode ser

pensamentos, sensações, pessoas queridas ou estranhos,

uma boa alternativa para quem procura oportunidades no

e objetos, muitos objetos; principalmente meu violão, mi-

segmento? “Ela pode não, ela deve ser o caminho para os

nha prancha, livros, revistas e discos. Presto muita atenção

novos profissionais. O mercado não tem condições de ab-

naquilo que cada signo significa para mim e também no

sorver muitos profissionais na mídia convencional. Estamos

que eles podem significar para as outras pessoas, de acor-

vivendo uma gigantesca fase de transição na mídia, portanto

do com a formação cultural de cada uma delas”.

a experimentação é muito necessária, temos que reconstruir,

Outra boa fonte de inspiração está presente na prá-

reinventar nossa mídia, revendo o passado também. Não

tica de esportes. “Surfo há vinte e um anos. Ele me ensi-

passo um dia sequer sem experimentos midiáticos, sejam

na muita coisa. Gosto de caminhar também, hábito que

eles brincando com areia, com uma câmera fotográfica, com

adquiri no Rio de Janeiro, observando os mais velhos. Ao

objetos, com áudio, vídeo, lápis, tintas etc.”.

Para participar desta seção, cadastre seu portfólio no site da revista: www.revistawebdesign.com.br.

20 :: portfólio ilustração - Will Murai

Cyberfeeling (2006) Cliente: Portfólio Material utilizado: “Lápis 6b para

www.willmurai.com

o s k e t c h e C o re l Painter IX para a

Wd :: Como define seu estilo e onde você busca as

pintura digital”

referências para o seu trabalho? Murai :: Creio que meu estilo vem da busca em fazer personagens fi ctícios parecerem vivos. Ao mesmo tempo em que me preocupo com a iluminação e a ambientação, procuro deixá-los com um visual característico: algumas vezes realistas, outras mais deformados. Difícil é definir uma única fonte de onde busco minhas referências. Pode vir de um insight, ou de uma busca por inspiração em livros de artes, um fi lme, uma música, a volta para casa de metrô, um show de rock, a forma como a luz transpassa pela cortina da sala, enfi m. Creio que o que realmente me inspira é a sensação causada pelos momentos que vivemos, não importando se são fantasticamente ordinários, ou ordinariamente fantásticos. Rock Show (2006) C l i e n t e : I d e a F i x a ( w w w. i d e a f i x a . c o m ) - E d i ç ã o R o c k n ’ R o l l M a t e r i a l u t i l i z a d o : “ L á p i s 6 b p a r a o s k e t c h e o s e s t u d o s , C o re l P a i n t e r I X p a r a a p i n t u r a d i g i t a l e A d o b e P h o t o s h o p C S para acabamento e efeitos”

22 :: entrevista - e-commerce

COMPRA MOVIDA A CLIQUES: o d e s i g n a s e r v i ç o d o c o m é rc i o e l e t r ô n i c o Sete milhões de usuários, gastando uma

na criação e no desenvolvimento de sites, além de

média mensal de R$ 300,00, garantiram um cres-

representar novos desaﬁos diante das expectativas

cimento de 76% (de 2,5 para 4,4 bilhões de reais),

de crescimento para o ano de 2007.

em 2006, no volume transacionado no mercado

Nesta entrevista, Norton Amato Jr., diretor

de comércio eletrônico no Brasil. Os dados são do

de criação da Anydesign.net (www.anydesign.

grupo de pesquisas e-bit.

net), analisa o valor do design dentro de sites de

A consolidação do segmento no país é sinal do bom trabalho realizado pelos proﬁssionais envolvidos

comércio eletrônico e as inovações para o futuro deste mercado.

entrevista - e-commerce :: 23

“A popularização da banda larga e dos plugins de Flash embutidos nos navegadores alavancaram a experiência de consumo” Wd :: Nos últimos cinco anos, quais foram as

experiência de consumo e abriram um grande leque de pos-

principais transformações ocorridas na criação e no de-

sibilidades de interface para a comunicação promocional.

senvolvimento de sites de comércio eletrônico?

Wd :: Quando falamos de sites neste segmento, a

Norton :: Esse período foi essencial para o amadure-

Amazon.com ainda é considerada a principal referência

cimento da prática do comércio eletrônico, a começar pela

no meio. Quais características específicas, em termos

prova da viabilidade do modelo de negócios e afirmação do

de design e desenvolvimento tecnológico, fizeram a

seu potencial “infinito” de crescimento. A consolidação do

Amazon se tornar líder neste mercado?

mercado, o hábito dos clientes e o dia-a-dia das atividades

Norton :: A Amazon está anos-luz à frente dos de-

tecnológicas e promocionais trouxeram a maturidade a

mais competidores. Informalmente, sempre nos referimos

este novo canal de vendas e inseriu novos players no mer-

a ela como “Mother Amazon”. Tal vantagem competitiva

cado varejista tradicional. No Brasil, a consolidação das

é fruto de anos e anos de tentativas e erros, experimenta-

operações do Submarino e da Americanas.com, e sua tão

ções que desbravaram os melhores caminhos para a venda

comentada fusão, transparecem apenas a ponta do iceberg

on-line. Sua estrutura interna incentiva à inovação e ba-

deste fenômeno ainda sem proporções definidas.

seia-se em processos eficazes de planejamento, criação,

Não foi só o mercado do comércio eletrônico que evoluiu. Inevitavelmente este desenvolvimento foi apenas um

desenvolvimento e homologação para garantir um sistema bem construído, estável e extremamente inteligente.

desdobramento da evolução da internet como um todo,

Seu sucesso hoje é fruto de um excelente trabalho de

da sua infra-estrutura de Telecomunicações, da cultura dos

visão e planejamento. A começar pelo seu exímio banco de

seus usuários e principalmente das novas ferramentas de

cadastros de produto - desde sempre referência para toda

interação (Google, blogs, comparadores de preço etc.).

e qualquer consulta ou dúvida sobre livros, CDs, DVDs etc.

Do lado prático da criação e do desenvolvimento dos

- que estabeleceu os alicerces para o aperfeiçoamento con-

sites de comércio eletrônico, conceitos foram racionali-

tínuo através de novas ferramentas e serviços oferecidos.

zados e finalmente documentados. Grandes cases e boas

Com o passar dos anos, a Amazon focou seus esforços

práticas surgiram, adaptadas ou não da realidade do varejo

na inteligência de sistema, uma complexa e robusta tecno-

do mundo físico, mostrando novos caminhos a seguir.

logia de análise de dados e cruzamentos de informações.

A crescente importância do Google como ferramenta essencial na organização de informações e suas imposições

Sua interface, sempre simples e direta, é apenas o suporte de acesso a uma gama inﬁnita de informações.

na organização/otimização do código-fonte obrigaram as

Wd :: Levando em consideração alguns aspectos, como

lojas sérias a repensar seus sistemas e interfaces desde o

design, tecnologia e segurança, quais seriam as principais

início. O que eram apenas recomendações bem intencio-

diferenças no modelo adotado pelos principais varejistas

nadas dos movimentos de web standards (webstandards.org)

on-line no Brasil em relação ao mercado internacional?

se tornaram grandes ferramentas de negócio. Um site bem

Norton :: O mercado internacional, por referência da

indexado pelo Google é garantia certeira de vendas com um

própria Amazon, enfatiza o desenvolvimento tecnológico

baixo investimento em publicidade e comunicação.

constante em detrimento do intensivo uso promocional

Além do fator Google, outra grande contribuição da

dos recursos de design. Se compararmos as práticas inter-

evolução da internet ao setor de comércio eletrônico foi a

nacionais às nacionais, notaremos uma grande diferença

popularização do acesso banda larga e dos plugins de Flash

na função das peças de design. Aqui, a grande maioria

embutidos nos navegadores. Estes aspectos alavancaram a

das vendas provém de grandes esforços promocionais,

24 :: entrevista - e-commerce

“Atualmente, a questão da segurança em transações on-line é muito mais cultural do que técnica” campanhas de massa em grandes portais, e-mails temáticos, banners, tablóides/listas de produtos etc. Esta lógica segue a linha tradicional de comunicação do varejo off-line. Mas, no caso específico da Amazon, a situação é exatamente oposta. Seu complexo sistema de inteligência e a simplicidade da sua interface privilegiam a informação, tornando-a um dos maiores ativos da companhia, dispensando assim freqüentes investimentos em mídia e produção de campanhas para concretizar as vendas. Pessoalmente, acredito na existência de um meio termo nesta disputa. Apesar de o design ser um fator essencial para a interface, não podemos restringir sua atuação apenas às questões de navegação e usabilidade, dado o grande apelo que imagens e anúncios exercem sobre impulsos consumistas. Devemos sim dosá-lo criteriosamente para aproveitar seus benefícios, sem prejudicar ou poluir o fluxo de navegação. Wd :: No livro “Web Design: E-commerce”, da Taschen, Julius Wiedemann ressalta que não importa se você é de grande ou pequeno porte, se vende camisetas ou se tem um portal de astrologia: em ambos os casos, você pode iniciar um negócio somente de forma on-line ou adaptar seu negócio ao modelo de distribuição on-line. Pensando nisso, quais são as vantagens em criar um site nesta área? Norton :: O meio on-line é um ótimo espaço para novos empreendimentos. Inúmeros casos de lojas on-line bem sucedidas acabaram por expandir seus negócios no mundo real e competem em pé de igualdade com os demais players do mercado. O caminho inverso também é bastante comum. Lojas e serviços tradicionais tendem a também entrar no mercado on-line, seja para expandir um novo canal de vendas ou para defender sua posição no mercado. Se comparado com uma estrutura física tradicional, a grande vantagem de se iniciar uma operação on-line é o baixo investimento inicial requerido - baixa barreira de entrada e saída. Existem várias opções para começar a operar on-line: desde soluções “enlatadas” com lojas pré-formatadas, passando por sistemas simples feitos por encomenda, até grandes projetos customizados feito sob medida para grandes operações. Wd :: Outra questão interessante envolve o planejamento para construção do ambiente. Assim, quais seriam as etapas envolvidas na criação e

entrevista - e-commerce :: 25

“A arquitetura de informação em sites de comércio eletrônico é o fator determinante para o sucesso da interface” no desenvolvimento de um site de comércio eletrônico? Norton :: O desenvolvimento de qualquer sistema

vezes, torna a contratação de serviços de webdesign e desenvolvimento uma verdadeira roleta-russa.

requer muito cuidado e planejamento, especialmente no

O design, além de seu caráter artístico, deve prezar

caso de operações de comércio eletrônico. Afinal, toda e

pela consistência na sua aplicação. Um projeto bem pla-

qualquer funcionalidade do site se desdobrará em alguma

nejado fará o mapeamento prévio de todos os recursos do

ação de operações internas no lado do lojista.

design e padronizará a sua aplicação para garantir uma sen-

Na Anydesign.net, estabelecemos e seguimos um

sação de maior segurança ao usuário final. A consistência na

roteiro básico, que consiste em: briefing dos serviços, docu-

utilização de cores, ícones e layouts fará com que o usuário

mento de pré-projeto, aprovação de condições de escopo e

reconheça esses critérios inconscientemente e navegue no

prazo, especificações técnicas de arquitetura de informação,

seu site ou loja de uma maneira mais intuitiva.

navegação e programação, documentação técnica para de-

Um bom exemplo é o Submarino que, apesar de seu

senvolvimento, design de interface e, por fim, a junção de

enorme conteúdo, consegue manter uma grande con-

todo o material produzido em uma versão Beta para testes

sistência no uso dos elementos de design nos fluxos de

internos e externos. Neste momento, envolvemos o cliente

fechamento de pedido e nas demais interfaces de inte-

para que juntos possamos ajustar e finalizar o projeto e en-

ração de serviços agregados. É essencial que o design seja

tregar a versão final conforme as expectativas.

funcional, não necessariamente artístico.

Após a versão 1.0 publicada, utilizamos os recursos de

Wd :: Nesta edição, analisamos como as cores

comunicação e promoção para colher dados e acompanhar

exercem influência na criação de um projeto digital.

a evolução do sistema. Com essas informações em mãos,

Usando como exemplo a interface do Submarino, no qual

iniciamos uma série de estudos e testes para manter o site

você foi um dos responsáveis pela criação, é possível per-

sempre atualizado e funcional.

ceber que as diversas seções do site foram divididas por

Wd :: Na edição de dezembro de 2006, apontamos

cores específicas. Podemos dizer que já existe uma padro-

os elementos que definiriam a qualidade de um site. Se-

nização no uso de cores em sites de comércio eletrônico?

gundo Robson Santos, professor de pós-graduação na

Norton :: No Submarino, a utilização de cores dis-

PUC-Rio, o uso de elementos gráficos reforça a noção de

tintas para cada categoria procura orientar os usuários na

unidade para quem navega por qualquer seção de um we-

identificação de cada seção do site, além de conferir um

bsite. De que forma os princípios fundamentais do design

aspecto mais divertido e lúdico à navegação. A decisão do

devem ser aplicados em um site de comércio eletrônico?

Submarino implica necessariamente em uma quantidade

Norton :: Em um mundo de bits e bites, o design

muito maior de trabalho na produção de peças para as di-

tem o papel fundamental em tangibilizar a qualidade dos

versas combinações de cores.

projetos. Partindo do pressuposto do rigor técnico no de-

Talvez por este motivo, apesar da não formalização

senvolvimento do back office, é natural assumir que o front

de um padrão específico no uso de cores em sites comércio

office reflita este mesmo nível de qualidade.

eletrônico, muitos deles apelam para o lado prático e mantém

Principalmente na internet brasileira, um mercado

uma combinação de cores única em toda a interface. Man-

ainda em formação, o conhecimento e nível de exigência

tendo assim a sinalização de cores distintas apenas em abas

do empresariado ainda está muito aquém do necessário.

de navegação, ícones de categoria ou material promocional.

Na maioria dos casos, eles são obrigados a confiar nos pa-

Wd :: Os varejistas on-line podem ser conside-

drões de qualidade do fornecedor escolhido. O que, muitas

rados como um bom exemplo no uso de ícones como

26 :: entrevista - e-commerce

ferramentas de apoio à navegação. Quais

para os usuários. No livro “Homepage:

aspectos devem ser considerados na hora

50 websites desconstruídos”, os autores

inserir este elemento dentro da criação da

Jakob Nielsen e Marie Thair ressaltam que

interface de um site neste segmento?

“as homepages são o patrimônio mais va-

Norton :: Geralmente, os grandes va-

lioso do mundo. São investidos milhões de

rejistas virtuais contam com uma equipe

dólares em um espaço com menos de um

própria de criação para manutenção e desen-

metro quadrado”. Diante disso, quais são

volvimento do seu site, o que garante uma

os principais desafios na hora de planejar

correta aplicação de ícones e o uso planejado

a arquitetura da informação de um site de

e consistente do design em todo o projeto.

comércio eletrônico?

Infelizmente, apesar de mais de uma

Norton :: A arquitetura de informação

década de existência, a grande maioria dos

em sites de comércio eletrônico é o fator de-

varejistas virtuais ainda não tem condições ou

terminante para o sucesso da interface. Uma

consciência do retorno do investimento em

boa aplicação dos conceitos de hierarquia e

design. Muito encaram esses investimentos

uma boa divisão dos espaços da página conse-

como itens supérfluos em sua operação, pois

qüentemente se desdobrarão em resultados

ainda não analisaram o verdadeiro impacto

palpáveis em vendas.

destas ações em suas vendas.

Isso torna o design de sites de comércio

Wd :: A segurança na realização de

eletrônico um dos raros nichos de mercado,

transações on-line ainda é considerada

onde qualquer esforço de melhoria de design

um dos principais obstáculos para o cres-

pode ser facilmente justificado e analisado

cimento do mercado virtual. Como esta

em tempo real, pelo seu impacto nas vendas.

questão deve ser trabalhada na criação

Portanto, a prioridade da arquitetura da in-

e no desenvolvimento de um site de co-

formação deve ser sempre a de orientar e

mércio eletrônico?

direcionar os usuários em seu processo de

Norton :: Atualmente, a questão da se-

decisão, de busca e compra de produtos.

gurança em transações on-line é muito mais

É importante lembrar que a arquitetura

cultural do que técnica. Do lado técnico, a

da informação e o design são tão essenciais

segurança será sempre um item de investi-

no layout de “vitrines” de produto quanto no

mentos e atualizações. A tecnologia, apesar

uso de serviços agregados à venda (exemplos:

de nunca infalível, chegou a um patamar de

atendimento ao consumidor, consulta de status

evolução onde o maior risco está na inte-

de pedido, páginas de cadastro etc.). No caso

ração humana com dados sigilosos.

dos serviços agregados, a função do design é

Do lado cultural, a questão é muito mais de tempo e hábito dos usuários. Por conta

passar despercebido, apenas auxiliando o usuário na interação e consulta de informações.

disso, se faz necessário o investimento em

Wd :: Falando sobre usabilidade, em en-

comunicação e orientação no qual o design

trevista publicada na edição de janeiro de

exerce um papel fundamental.

2006, Felipe Memória, designer da Globo.

Wd :: Uma das características ine-

com, ressaltava que “...o aprendizado tem

rentes nas lojas virtuais é a quantidade

que ser fácil e a simplicidade tem que reinar,

de informações a serem disponibilizadas

caso contrário, o concorrente está ali ao lado,

entrevista - e-commerce :: 27

“No Brasil, o design sempre teve uma atenção especial e até hoje é o grande driver de vendas nos principais sites” realmente a um clique de distância”. Como você analisaria a usabilidade dos principais sites de comércio eletrônico do país? Norton :: Entre 1999 e 2000, tive o prazer de vivenciar a euforia da bolha da internet e da expansão internacional do Submarino. Nesta época, me surpreendi pela qualidade dos serviços de criação e desenvolvimento prestados pelos brasileiros e do contraste com os outros países europeus e até com os norte-americanos. O Submarino Brasil foi referência para as filiais pelo mundo e nosso trabalho sempre muito respeitado. Por conta disso, vejo que os profissionais brasileiros não devem nada aos melhores profissionais pelo mundo. Pela precocidade do comércio eletrônico brasileiro, nota-se um desenvolvimento paralelo à corrente mundial. No Brasil, o design sempre teve uma atenção especial e até hoje é o grande driver de vendas nos principais sites (Americanas, Submarino e Magazine Luiza). Enquanto no exterior, após a falência do Boo.com (primeiro grande comércio eletrônico com interface em Flash), todos seguiram o caminho de desenvolvimento tecnológico da Amazon, no Brasil a grande referência foi o varejo tradicional e seus métodos promocionais. Apesar desses recursos funcionarem muito bem até hoje, ao longo prazo apresenta-se uma grande ameaça. A venda através de promoções agressivas e de mídia de massa não constroem necessariamente uma vantagem competitiva significativa e não suportam a escala exigida em uma grande operação de comércio eletrônico. A vantagem ideal, baseada no conhecimento do comportamento do consumidor e principalmente nas possibilidades que um sistema de Business Intelligence oferece no cruzamento de dados, ainda não foi totalmente implantada e aproveitada no mercado brasileiro. O modelo baseado apenas em promoções, hoje em dia, já se encontra em decadência. Nota-se uma extrema poluição visual nas páginas iniciais das lojas e uma briga interna das próprias categorias de produto pela atenção do consumidor. Fatores que prejudicam diretamente a facilidade de uso dos seus sistemas e conseqüentemente a usabilidade e a efetividade do comércio eletrônico como um todo. Wd :: O movimento Web 2.0 trouxe uma série de questionamentos na forma como criamos e desenvolvemos projetos de internet. Dentre seus principais ideais, o usuário aparece como principal agente transformador do meio. De que forma os sites de comércio eletrônico devem trabalhar estes conceitos para garantir uma melhor adequação aos novos paradigmas de mercado? Norton :: A interação do usuário é primordial para a manutenção

28 :: entrevista - e-commerce

e evolução de comércio eletrônico de grande escala. Imagine uma estrutura tradicional de gestão comercial, na qual existe uma gerência de categoria para administrar e manter as vendas de determinados produtos. Agora, multiplique esta estrutura por 24 categorias (caso do Submarino) e uma soma de mais de 700 mil produtos. Seria humanamente capaz, ou economicamente viável, manter funcionários dedicados a cuidar de cada um dos produtos em estoque? Não! Por este motivo, a Amazon, desde sua concepção, concentrou esforços em automatizar processos e em construir um sistema inteligente para mapeamento de comportamentos de usuários e seleção automática de ofertas do site. Mas, ciente das limitações deste modelo, também ofereceu serviços para interação de usuários. Tais como: listmania, “quem comprou, comprou também”, plogs (blog para autores e fabricantes de produto), wishlists, lojas personalizadas, comentários de cliente, tags em produtos (como no del.icio.us) etc. Todos esses agregados buscam apenas uma coisa: partilhar a responsabilidade de alimentação do banco de dados e cruzar novos dados de comportamento. Assim, a Amazon se aproveita da admiração ou da frustração dos seus clientes para apurar o seu conhecimento sobre uma base imensa de produtos e usa esta informação em benefício próprio para alavancar vendas. Wd :: O avanço nas tecnologias de conexão à internet tem permitido o uso de recursos de áudio e vídeo em sites. Diante de sua experiência, é possível apontar quais seriam as possibilidades para o futuro do segmento de comércio eletrônico? Norton :: A grande dificuldade das lojas virtuais de todo mundo ainda está na demonstração do produto. Apesar de uma grande quantidade de informações, fotos, modelos 3D e diagramas, o tato e a experiência de testar/sentir um produto pessoalmente ainda não foram substituídos. A revolução do YouTube e a evolução do Flash como suporte para vídeos abrem uma nova possibilidade para a demonstração e promoção de produtos. Este modelo não é novidade para o varejo brasileiro. O Magazine Luiza, por exemplo, desde o início dos anos 90 começou a desenvolver lojas remotas baseadas em demonstrações em VHS de seus produtos. Tais lojas eram instaladas em localidades de pequeno porte, onde o investimento em estrutura de atendimento e estoques não compensaria. Assim, conseguiram estabelecer, com sucesso, um novo canal de vendas, quase virtual, para todo o seu catálogo de produtos. O próprio Submarino, durante alguns meses em 2002, lançou e manteve a TV Submarino. A sua programação, similar ao modelo do ShopTour e do Shoptime, oferecia apenas uma nova possibilidade na demonstração de produtos. Talvez pela infra-estrutura da época, ou pela precocidade da iniciativa, a TV Submarino não vingou e acabou sendo abandonada. A utilização destas novas tecnologias é apenas uma questão de tempo e de iniciativa. A popularização do YouTube e dos plugins de Flash já estabeleceram as bases para a utilização desta nova mídia.

entrevista - e-commerce :: 29

Referências em comércio eletrônico Norton Amato Jr. selecionou quatro bons exemplos no segmento, baseado nos seguintes critérios: contribuição dos usuários e excelência no desenvolvimento e na gestão.

- IKEA www.ikea.com “Líder mundial na venda de móveis e acessórios para casa. Excelente combinação entre design e tecnologia.” - iStockphoto www.istockphoto.com “Banco de imagens aberto a contribuições do público. Além de um sistema bem desenhado, traz funcionalidades que dão inveja aos grandes players do mercado. Totalmente baseado em contribuições de seus usuários e pautado no modelo de compartilhamento de receitas.”

- Firebox www.ﬁrebox.com “Apesar do design antiquado e do sistema limitado, é uma ótima referência de atuação de nicho. Larga seleção de produtos inusitados e excelente apresentação de produtos, sempre com um toque inteligente e bem humorado.”

- Threadless T-Shirts www.threadless.com “Grife de camisetas, precursor em basear seu negócio na contribuição espontânea de seus usuários. Aqui, os designers e admiradores podem enviar suas criações e determinar quais camisetas se materializarão e serão vendidas.”

30 :: sinfonia das cores

SINFONIA DAS

CORES Basicamente, uma orquestra é composta por quatro famílias de

instrumentos: cordas, madeiras, metais e percussão. A responsabilidade de criar uma harmonia e uma unidade na formação da sinfonia de sons emitidos por esses diferentes naipes está presente na figura do maestro.

sinfonia das cores :: 31

TRABALHANDO

O EQUILÍBRIO E A HARMONIA CROMÁTICA NA WEB

Para se ter uma idéia de sua importância dentro de uma orquestra, o site da “Petrobras Sinfônica” assim deﬁne sua função:

de cores em projetos digitais. COMO FUNCIONAM

AS CORES NA WEB

“Com o tempo e a evolução da escrita musical, que foi ﬁcando

No livro “Ergonomia do objeto”, o professor João Gomes

mais complicada e pedindo por orquestras maiores, surgiu a

Filho ressalta que “qualquer trabalho ou leitura realizado no

ﬁgura do maestro, a garantia de que todos tocariam ao mesmo

monitor (logicamente dependendo do menor ou maior tempo

tempo, no mesmo ritmo e, ainda por cima, com equilíbrio... É

gasto visualizando a tela) representa esforço e cansaço físico e,

o maestro que, após um estudo cuidadoso da partitura, decide

fundamentalmente, cansaço visual para o usuário-leitor”. Assim,

como determinada música deve ser tocada”.

este será um dos principais desaﬁos quando falamos de compo-

Trazendo esta realidade para o mundo do design, podemos

sição cromática de um site, pois o objetivo é evitar que o usuário

dizer que, em determinado momento do processo de produção,

considere as cores como um obstáculo para o seu período de

o designer se torna uma espécie de maestro, ou seja, é ele quem

experiência. “Existe um ponto fundamental na aﬁrmação do João

vai determinar o equilíbrio e a harmonia na hora de criar uma

Gomes Filho, que é relacionado à tecnologia. Ler na tela ainda não

combinação cromática de um layout.

é tão confortável para os usuários como ler em material impresso.

“Quando se desenvolve um layout deve-se levar em consi-

Isso acontece por diferenças como luminosidade e resolução

deração conceitos concretos e abstratos de uma paleta de cores.

e provavelmente será resolvido com o avanço da tecnologia”,

Cores são resultados de uma sintaxe inerente à visão. Saturação,

explica Felipe Memória, designer da Globo.com.

contrastes, luminosidade e gama são resultados concretos da

Segundo o especialista, outra questão fundamental é o

nossa percepção, são valores matemáticos e, portanto, univer-

cuidado com determinadas combinações, que podem prejudicar

sais. Conceitos abstratos se referem aos signiﬁcados da cor

ainda mais o desconforto de leitura na tela. “Designers adoram

(isolada ou associada a outras). Uma cor pode ser interpretada

usar fundo e texto com uma pequena variação de contraste.

de maneiras diferentes e sua semântica sempre dependerá dos

Quem já não teve que selecionar um texto no browser para

valores culturais, políticos e religiosos do observador”, diz Lucas

conseguir lê-lo? Combinações especíﬁcas também podem

Hirata, designer da Globo.com.

causar a sensação de que o texto está ‘vibrando’, o que causa

“Esse é um aprendizado resultante da observação contí-

um grande desconforto ao olhar. Um contraste alto demais, em

nua e cuidadosa da natureza, da cultura material de diferentes

geral, é pouco agradável. O contraste muito baixo pode até

povos em momentos distintos de suas existências, dos movi-

ﬁcar bonito, mas potencializa as rugas nas testas dos usuários.

mentos artísticos e seus expoentes em culturas diferenciadas,

Importante é saber combinar as cores de forma a fazer com

dos livros, dos impressos efêmeros. Eu insistiria em observar

que isso não seja um obstáculo para o consumo do conteúdo

que a cor não é plana, que ela se constitui em matéria sensível,

e para a experiência como um todo. Os problemas de contras-

palpável através do olhar e que tudo isto reunido, estrutura

te podem fazer com que o usuário deixe de se preocupar com

um corpo de informação que pode ser associado a um conhe-

o que realmente interessa para se preocupar com pequenos

cimento técnico sobre a constituição física material e/ou virtual

problemas que não deveriam ser um empecilho. O desleixo no

da cor. Seria apropriado dizer, como Merleau Ponty, que ‘o

projeto pode gerar, no ﬁnal do processo, uma lembrança para o

mundo é o que vemos e que, contudo, precisamos aprender

usuário de que aquele site lhe deu muito trabalho. E as pessoas

a vê-lo”, completa Silvia Steinberg, professora da Escola Su-

não gostam de ter trabalho”.

perior de Desenho Industrial (ESDI), vinculada à Universidade do Estado do Rio de Janeiro (UERJ).

Ainda sobre o cansaço visual, Luciano Guimarães, professor do programa de pós-graduação em comunicação da Universida-

Nesta reportagem, você poderá conferir quais são os

de Estadual Paulista (Unesp), ressalta que essa é uma questão de

aspectos que determinam o andamento e o ritmo da sinfonia

óptica. “Na arquitetura de um projeto digital, devemos projetar

32 :: sinfonia das cores

impressos. A escolha das cores que participam de uma interface relaciona-se principalmente à sensação que você quer provocar no usuário: impacto, energia, tranqüilidade, profissionalismo, tecnologia, suavidade, dinamismo, limpeza visual etc. A partir do briefing do projeto e também do perfil do público-alvo, o designer poderá experimentar composições de cores que não fujam à mensagem primordial do site”, argumenta Lilian Ried, qual o tempo mínimo e máximo de retenção do olhar em cada

diretora do estúdio Lix Design (www.lixdesign.com) e fundadora

página e até mesmo em cada elemento visual da página. É

do Universo da Cor (www.universodacor.com.br).

possível até mesmo trabalhar com combinações mais agressivas

NO DIVÃ: A

PSICOLOGIA DAS CORES

para o olhar, ou com um excesso de matizes semelhantes, desde

A psicologia das cores aborda as possíveis sensações e rea-

que a aplicação se dê em uma tela de passagem, ou que tenha

ções provocadas pelas combinações cromáticas utilizadas dentro

a intenção de provocar um determinado efeito (informacional).

de um projeto. Pensando nisso, como esta teoria deve ser aplicada

Deveríamos ainda considerar qual é a tolerância do usuário

em um site? Para Helena Sordili, sócia da Carranca Design (www.

para aquela informação, segundo seu próprio repertório, en-

carranca.com.br) e professora do curso de Design Digital da Univer-

volvimento com o tema, preferências estéticas etc. O rosa para

sidade Anhembi Morumbi, a resposta é que precisamos ter muita

uma garotinha de oito anos de idade é muito mais tolerado,

cautela para evitar que o processo criativo ﬁque engessado.

mesmo em excesso, porque está dentro da sua expectativa e de

“A psicologia das cores existe para tudo: moda, embala-

seu repertório de preferência. O vermelho para o apaixonado

gens, ambientes, internet etc. Mas devemos ter cuidado para

torcedor gremista, por outro lado, é cor muito pouco tolerada,

isso não virar uma camisa de força para o projeto. Essas regras

se estiver em excesso, e assim por diante. Escolher cores para

valem ouro, mas cabe ao designer utilizar isso de forma criativa.

um projeto de comunicação é, portanto, entrar no universo do

Por exemplo: em um site de alimentos, teoricamente deveríamos

repertório do outro, e não de si mesmo”.

utilizar amarelo, laranja e vermelho. Porém, nem sempre essas

Um ponto que pode facilitar o trabalho do designer está

cores formam uma paleta harmônica com as cores institucionais

presente nas técnicas utilizadas dentro da edição jornalística.

da marca. Além disso, o amarelo ‘grita’ na tela do computador. Há

“Qual o ponto de atração principal para aquela página? Um link?

um tempo, o site do McDonald’s, por exemplo, usava o amarelo

Uma imagem? Um título? Deve-se usar um critério de edição bem

da marca (do M, em especial) em toda a área do menu. Hoje, eles

apurado para não se errar no uso das cores. Os critérios usados

usam um amarelo mais ‘calmo’ no fundo da área de conteúdo e

em edição no jornalismo deveriam ser estudados por qualquer

o menu é vermelho. Ou seja, usam as cores institucionais, mas

designer. Eles só acrescentam e ajudam na maneira de fazer o

não sempre com a máxima saturação: trabalham a escolha sem

internauta andar e olhar sites, mesmo sem nenhum texto”, diz

deixar de lado a paleta principal da marca. Inclusive, o site antigo

Márcia Okida, professora e coordenadora do curso de design de

usava uma composição basicamente com cores primárias que são,

multimeios da Universidade Santa Cecília (UNISANTA).

classicamente, associadas às crianças”, aﬁrma.

Além disso, os especialistas indicam um profundo conhe-

A professora Silvia Steinberg lembra ainda que, quando

cimento sobre a teoria dos contrastes. “Ou seja, como as cores

a teoria foi elaborada, o mundo não estava na era digital e

se comportam lado-a-lado. Isso está relacionado à forma como

não existia a “imagem virtual” tal como hoje a concebemos.

nossos olhos captam os sinais luminosos, ou seja, à nossa percep-

“As novas gerações estão familiarizadas com cores, efeitos

ção visual. No caso das imagens vistas na tela do computador,

e sensações que não foram contempladas por esses estudos.

isso se torna ainda mais importante, pois nossos olhos estão

Isto não signiﬁca que valores e signiﬁcados tradicionalmente

recebendo luz direta, e não luz reﬂetida, como nos trabalhos

atribuídos a determinados códigos cromáticos devam ser

sinfonia das cores :: 33

desprezados. É preciso entender que, se por um lado há uma certa resistência das pessoas em se aproximar de algo que poderia interessá-las se houver determinadas ‘relações cromáticas’ com as quais estejam pouquíssimo familiarizadas, por outro o desconhecimento de propriedades específicas relativas à cor no meio digital introduz ruídos na comunicação incompatíveis com a assimilação de qualquer tipo de informação. Um site tem um determinado público e conteúdo. Da relação entre ambos, surgem as possibilidades de uso de determinadas gamas de cor. Cada opção não está necessariamente associada a uma teoria, mas provavelmente decorre de uma vivência. A teoria chega para acrescentar um ajuste fino, determinar precisamente um resultado sem testes aleatórios, oferece rigor em escalas e precisão em leituras e associações. Ela não é o começo de um processo, mas a etapa final para se atingir o apuro numa escolha que se estabelece no repertório visual de cada um”, explica. NA PRÁTICA: DEFININDO

UMA PALETA DE CORES

Entendidos os argumentos teóricos que fundamentam as bases para se garantir uma boa combinação cromática de um projeto, agora é a hora de conhecermos quais são as principais etapas envolvidas na criação de uma paleta de cores de um site e as ferramentas que podem ser utilizadas. “A primeira etapa é conﬁrmar se a paleta de cor deve obedecer aos códigos de cor do produto: se é possível transgredir as cores estabelecidas ou se as cores institucionais básicas devem ser mantidas. Obedecendo a essa premissa, normalmente começo sempre partindo de uma cor principal e crio variações da mesma em outros níveis de brilho. Estabeleço variações em outras gamas, mantendo a saturação da cor matricial. Faço essas experimentações com simples quadrados e vejo como funcionam as relações entre as cores. É bom lembrar que até mesmo as dimensões dos quadrados afetam a percepção ﬁnal. Feito isso, documento os hexas e crio uma família de swatches no Photoshop. Assim, posso compartilhá-la quando desenvolvo trabalho em grupo e evito problemas de inconsistência entre os arquivos. Alguns sites podem ser ferramentas on-line bem práticas. Vale o clique: www.colorblender.com e www.degraeve. com/color-palette”, revela Lucas Hirata.

USABILIDADE DA COR Na edição de outubro de 2004, o professor Carlos Bahiana apontava que “cada cor é uma voz e a interface deve funcionar como um coral”. Assim, a composição cromática se torna parte fundamental nos processos para a definição de uma boa arquitetura da informação e para garantirmos a usabilidade de um projeto digital. “Usando essa mesma figura de linguagem que ele usou, uma cor no local errado pode desafinar toda a orquestra da usabilidade e da arquitetura da informação. Isso já acontece se não prestamos atenção na ‘edição’ em um cartaz ou revista. Na web, então, é mais complicado! Uma cor errada pode levar a pessoa a entrar em um link que não seria o principal, o desejado por quem construiu o site. Devemos ter um critério de edição de prioridades de navegação e atribuir valores, escala cromáticas de acordo com essas prioridades. Caso contrário, quem estiver navegando no site, vai acabar em locais que não queria”, alerta Márcia Okida.

34 :: sinfonia das cores

Dessa forma, a função de uma composição cromática é atuar como um facilitador para que as diferentes áreas da tela sejam percebidas da forma como foram projetadas. “As cores exercem papel fundamental na organização da interface. Por mais que um wireframe seja bem projetado, se as cores não seguirem a lógica de hierarquização e separação dos elementos projetada na arquitetura, o trabalho ﬁca comprometido. Além disso, deve-se tomar cuidado para que as cores façam sentido para o usuário. O uso de verde e vermelho é um bom exemplo disso. O verde é, dentre outras características, associado a conceitos como ‘prosseguir’ e ‘permitido’, enquanto que o vermelho é, muitas vezes, associado a idéias como ‘proibido’, ‘pare’, ‘erro’ etc. A escolha de cores para determinados elementos não deve ir de encontro ao modelo mental dos usuários. Portanto, o uso de, por exemplo, verde para mensagens de erro e vermelho para mensagens de sucesso pode, num primeiro momento, atrapalhar o entendimento da mensagem por parte do usuário”, argumenta Felipe Memória.

SETE DIRETRIZES PARA UTILIZAÇÃO DE CORES 1) Estética (harmonia, equilíbrio, contraste, intensidade, variabilidade) 2) Visibilidade, legibilidade e saturação de leitura (conforto visual) 3) Organização e usabilidade (como ajudar o usuário a navegar no site, direcionar a sua leitura, identificar unidades, partes, seções etc.) 4) Identidade (como se diferenciar e ser reconhecido por meio das cores) 5) Repertório simbólico (a carga simbólica que pode ser incorporada às cores, naquele determinado contexto de uso e do repertório do usuário que se pretende atingir) 6) Informação (como a cor pode contribuir para conduzir a informação) 7) Limitações e recursos técnicos (aspectos materiais do suporte e dos processos) Fonte: Luciano Guimarães

sinfonia das cores :: 35

BIBLIOTECA DAS CORES - “A cor como informação”

- “Elementos de semiótica aplicados

- “O olho interminável: cinema e

Autor: Luciano Guimarães

ao design”

pintura”

Editora: Anna Blume

Autora: Lucy Niemeyer

Autor: Jacques Aumont

- “A cor no processo criativo”

Editora: 2AB

Editora: Cosac Naify

Autora: Lilian Ried Miller Barros

- “Gestalt do objeto”

- “O verbal e o não-verbal”

Editora: Senac

Autor: João Gomes Filho

Autor: Vera Teixeira Aguiar

- “As cores na mídia”

Editora: Escrituras

Editora: Unesp

Autor: Luciano Guimarães

- “Homem, comunicação e cor”

- “Psicodinâmica das cores em comu-

Editora: Anna Blume

Autora: Irene T. Tisky-Franckowiak

nicação”

- “Como combinar e escolher cores

Editora: Ícone

Autor: Modesto Farina

para o design gráfico”

- “Introdução à análise da imagem”

Editora: Edgard Blucher

Autor: Nick Clark

Autor: Martine Joly

- “Sintaxe da linguagem visual”

Editora: Gustavo Gili

Editora: Papirus

Autor: Donis Dondis

- “Da cor à cor inexistente”

- “Las armonías del color”

Editora: Martins Fontes

Autor: Israel Pedrosa

Autor: Augusto Garau

Editora: Léo Christiano Editorial

Editora: Paidós

- “Design e comunicação visual”

- “La interacción del color”

Autor: Bruno Munari

Autor: Joseph Albers

Editora: Martins Fontes

Editora: Alianza

Fontes: Felipe Memória, Helena Sordili, Lucas Hirata, Luciano Guimarães e Márcia Okida

36 :: sinfonia das cores

SITES COM CORES BEM APLICADAS Como exemplo prático dos assuntos abordados nesta reportagem, apresentamos alguns exemplos de sites com uma boa combinação cromática. - BAUHAUS www.bauhaus.de “Embora com uma solução bastante óbvia, o resultado P&B combinado com indicações de seções por meio de cores está bem equilibrada na proporção. Por isso meu voto, não tanto pela variação das cores (que realmente é óbvia), mas pelas proporções adequadas.” (Luciano Guimarães)

- DREAMLINE www.dreamline.nu “Equilibra maravilhosamente cores quentes e frias. É fácil de ver, sem brancos na sua galeria e com uma combinação que fortalece bem as imagens. Nos textos, usa branco, mas a fonte é leve e não cansa tanto. Como a cor da fonte não é preta, fica mais suave.” (Márcia Okida)

GLOBOESPORTE.COM www.globoesporte.com “Lançou uma família de sites que possui uma combinação de cor dedicada ao perfil do time ou esporte que o internauta procura.” (Lucas Hirata)

- HAVAIANAS www.havaianas.com “Faz um uso ‘despudorado da cor’. Considero muito bom o resultado porque o site se destina a um público jovem e vende um produto único na sua forma, variável na sua aparência. O desdobramento das cores associadas a modelos específicos flui como um caleidoscópio que gera infinitas possibilidades.” (Silvia Steinberg)

- PHOTOSYNTHESIS www.photosynt.net “O que se espera normalmente de um site de fotografia é uma explosão de cores e imagens, o que nem sempre é o desejado. Gosto desse site porque não usa nada (ou quase nada) de branco: quando vamos ver as fotos, nossa retina não está muito saturada, permitindo uma melhor leitura visual. É simples, leve e funciona.” (Márcia Okida)

sinfonia das cores :: 37

- VEJA SÃO PAULO www.vejinha.com.br “Trabalha com hierarquia visual a partir das cores. Cuida bastante da qualidade das fotos que mostram, pois são os únicos elementos coloridos da composição. Toda a navegação do site é em tons de cinza e isso neutraliza essa área de interação do site.” (Helena Sordili)

- WIM WENDERS www.wim-wenders.com “Exibe sofisticados recursos cromáticos no tratamento da imagem, usando preto em fundo preto, tons extensivos de cinzas amarronzados e azulados que geram o que considero ‘um preto e branco muito colorido’ em gráficos que poderiam ser banais. Um filme ou uma foto é exibido numa janela em fundo preto. A cor é pontual sobre um fundo preto, conduz a observação de um objeto fotográfico ou de uma informação específicos.” (Silvia Steinberg)

- ZDF www.zdf.de “Explora bem a identidade das seções, com boa intensidade de cores e sem exagerar nas áreas das cores que fazem a variação. As cores escolhidas têm saturação descendente, são intensas sem serem agressivas. O cinza dá dois níveis de destaque para os textos, ao utilizar ora branco, ora preto, e ainda valoriza as imagens fotográficas e as cenas que são reproduzidas.” (Luciano Guimarães)

38 :: debate - briefing

Briefing:

limites à criação ou um desafio a ser vencido? Em entrevista para o site da Zupi (http://tinyurl.com/yttgy4), no qual falava sobre as diferenças dos processos envolvendo trabalhos pessoais e profissionais, o designer Rubens LP confidenciou que, em muitos de seus trabalhos pessoais, prefere não seguir um briefing, por achar que ele pode engessar sua criatividade. Por outro lado, Suzana Apelbaum, diretora de criação da Africa Publicidade, diz que procura encarar os limites sempre como desafios. Diante destas questões, até onde o briefing deve ser considerado como um limitador da criatividade do designer e quais são as maneiras de torná-lo um desafio a ser vencido?

debate - briefing ::39

“Um briefing bem feito não é um limitador da criatividade. Ele aponta uma direção estratégica e metas alinhadas aos interesses e objetivos da empresa. O designer deve buscar uma solução adequada, que entregue os resultados esperados. Como ferramentas temos todos os conhecimentos acumulados dos estudos de gestalt, André Braz Gerente de Design da Globo.com www.globo.com

ilustração, ergonomia, publicidade, marketing, psicologia, entre outros. Quanto mais estiverem no sangue, não serão limitadores, mas potencializadores da criatividade. O briefing define o tabuleiro e as regras do jogo. O desafio é conquistar um grupo de pessoas e conseguir que elas se sintam tão bem com seu produto que o incluam em sua rotina. Para cada produto, um jogo diferente, novos concorrentes, um novo desafio. Como você joga, dobra as regras, traça sua estratégia e age a cada round, é resultado de conhecimento e habilidade somados à criatividade. Não é sempre um jogo fácil, mas é muito divertido. A cada dia você descobre ou inventa um novo truque. Trabalhos experimentais sem briefing são excelentes, mas têm outro papel: abrem a cabeça e exercitam a pensar fora da caixa. O profissional que tem este hábito, tempo e recursos para fazê-lo sempre cresce, como ao ler um novo livro. Deve-se apenas tomar cuidado para que isto não vire uma fuga do compromisso com resultados.”

“Trabalhos experimentais sem briefing são excelentes, mas têm outro papel: abrem a cabeça e exercitam a pensar fora da caixa”

40 :: debate - briefing

“Não acho que o briefing deva ser encarado como uma gaiola, prefiro acreditar na habilidade do designer em saber traduzir e transformar as coisas” Junior Simões Diretor de mídia interativa e eventos da Tangerina.Ag www.tangerina.com.br

“O dilema do briefing: será que ele realmente existe? Aqui na Tangerina.Ag, nós já o vimos de várias formas, mas confesso que foram raras às vezes em que ele se mostrou por inteiro. Na maioria delas, estava sempre ali no canto, meio escondido e só era descoberto depois de, pelo menos, duas reuniões com o cliente. Isso ocorre porque quase sempre o cliente não sabe o que realmente quer, o que realmente está procurando ou, em muitos casos, tem uma visão distorcida de como potencializar realmente o seu negócio. A partir da nossa visão de design, marketing e web que as coisas vão, aos poucos, ficando mais claras. Claro que esta é justamente a nossa habilitação, mostrar para o cliente aquilo que ele não consegue ver. Particularmente, independente de termos ou não um briefing, nosso objetivo deve ser sempre surpreendê-lo, fazer diferente e superar a sua expectativa. Não acho que o briefing deva ser encarado como uma gaiola, prefiro acreditar na habilidade do designer em saber traduzir e transformar as coisas. É muito bom pegar um trabalho onde você pode ‘brincar’ mais porque o cliente deixou, o mercado dele permite e não temos um briefing definido. Se você me perguntar o que prefiro, eu diria que prefiro este onde você pode experimentar mais. No entanto, você também pode entrar numa armadilha, por ficar sem parâmetros, sem referências, afinal liberdade demais pode te levar a dúvida ou a achar que a primeira opção já lhe é satisfatória. Trabalhar com briefing já lhe abre uma estrada de terra no pensamento: você vai ter que pensar agora em como colocar o asfalto e pintar as faixas, mas como nem tudo são flores, você pode cair em soluções óbvias ou comuns.”

debate - briefing :: 41

Fabio Couto Sócio do Estúdio Colletivo de Design www.colletivo.com.br

“O briefing é sempre um assunto que extrapola o ambiente profissional por ser tão mal discutido com os profissionais envolvidos no projeto, até mesmo em trabalhos pessoais. Como a estrutura do nosso estúdio é totalmente focada em criação, geralmente o briefing é fundamental para qualquer tipo de trabalho. Sendo assim, tratamos essa apresentação de conceitos e necessidades como uma grande área de referências, onde podemos experimentar e cruzar informações. Deve haver espaço num briefing para pesquisa, seja ela de mercado, tendência e público-alvo. Quando se sabe para quem se cria, novas idéias surgem e complementam o brieﬁng. É claro que muitos clientes ‘brifam’ exatamente o que querem, mas geralmente isso acontece quando algo novo não está sendo criado. Por isso, discutimos tudo e tentamos sempre recriar as referências que são apresentadas nas reuniões de briefing, justamente porque o trabalho tem que ter a nossa expressão. Além disso, quando há falta de liberdade na discussão do briefing, buscamos apresentar duas versões da arte, defendendo e conceituando nossa versão. Dessa forma, ainda mostramos ao cliente que queremos discutir o briefing e justificamos porque ele é apenas o começo do nosso trabalho.”

“Quando se sabe para quem se cria, novas idéias surgem e complementam o briefing”

OTIMIZE SUAS AÇÕES DE ENVIO DE E-MAIL. Monitore seus resultados: saiba quem leu, que horas leu e onde clicou.

GRUPO DB4 “Assim que começamos a usar o Easy Mailing conseguimos despertar nos clientes do grupo DB4 a importância do e-mail marketing e o resultado que ele pode gerar se feito de maneira profissional, com documentação, relatórios e ética. Encontramos nos softwares da Dinamize ferramentas de e-mail marketing robustas, profissionais e com ótimo custo benefício.” Diogo Boni.

www.easymailing.com.br

tel. 55 51 3061.0636

42 :: debate - briefing

“Aqui na mooz, a necessidade do brieﬁng está diretamente relacionada com o projeto e com o cliente. Há projetos e clientes que gritam por ele, já outros o fazem desnecessário. Temos que considerar o grau de intimidade do designer com o cliente e vice-versa, assim como o grau de detalhamento do brieﬁng. A mesma coisa pode-se dizer da limitação da criatividade. Quanto maior a ligação entre o cliente e o Gustavo Gusmão Sócio do estúdio mooz www.mooz.com.br

profissional, mais “confiança” ele tem no nosso trabalho, portanto, mais livre fica a criação. Pode até ser que para alguns designers o briefing cerque o campo criativo, mas acredito que nenhum briefing é feito para isso. Só se no questionário for perguntado que cor o cliente quer a marca. É um exemplo esdrúxulo, mas que entra na questão do detalhamento, que é intrinsecamente relacionado à confiança do cliente no designer. Não encaramos o briefing como um bicho de sete-cabeças e acho que esse já é o primeiro passo. Em seguida, a sacada é sempre tentar surpreender o cliente. Nem sempre seguir o briefing ao pé da letra é o caminho. Muitas vezes, um site ‘ágil, simples e moderno’ para o cliente não o é para o criador. Longe de eu querer dar receitas, mas acho que o segredo está na confiança que o designer tem na sua capacidade de criação associada ao relacionamento com o cliente. Um não pode andar sem o outro.”

“O segredo está na confiança que o designer tem na sua capacidade de criação associada ao relacionamento com o cliente”

debate - briefing:: 43

gan

par he

Participação dos assinantes

tici pe prê e mio s!

Até onde o brieﬁng deve ser considerado como um limitador da criatividade do designer? Caio Vinícius caio.audax@gmail.com

Um briefing só deve ser considerado como limitador quando é mal realizado. Bem realizado, fornece as informações necessárias para o designer utilizar toda sua criatividade, de modo que atenda às necessidades do cliente.

VENCEDOR! vencedor!

Marcello Pepe pepe@pepecorp.com

O briefing junto ao cliente deve ser utilizado como uma diretriz para o desenvolvimento do trabalho. Nele, o designer ou publicitário poderá saber os objetivos do cliente. A forma como o trabalho será desenvolvido não está no briefing, mas sim na criatividade do profissional.

Renata Barbieri renata@unigran.br

O briefing não limita a criatividade, mas sim a direciona. É a criatividade aplicada, satisfazendo tanto o caráter informativo, navegável e funcional de um site, como a forma artística e estética, agregando valores ao projeto.

Leandro Guedes chborb@hotmail.com

Um briefing claro e objetivo passa segurança aos designers, não o limitando na suas criações e sim esclarecendo a viabilidade da sua criação com as necessidades do projeto. O que acontece é que, na maioria das vezes, o briefing é mal elaborado e por conseqüência pouco aproveitado, gerando dúvidas para toda a equipe de criação e desenvolvimento.

Rafael Burity rafaelburity@gmail.com

Na verdade, vejo o briefing mais como um guia, do que limitador de criatividade, visto que de nada adianta criatividade sem objetivos. É verdade que nem tudo que o designer sonha pode ser utilizado, mas o bom designer se expressa com criatividade até nos momentos em que parece estar sendo limitado. Nesse momento, o profissional mostra seu diferencial.

Se você é assinante, participe desta seção pelo site www.arteccom.com.br/webdesign/clube.

O autor da melhor resposta ganha prêmios.

44 :: e-mais - Briefing

BRIEFING: não deixe nenhuma dúvida de pé No boliche, o jogador atinge o ápice ao fazer um

Ou seja, esse é o documento que vai orientar o pro-

strike, momento no qual ele derruba todos os pinos de

cesso de produção de um projeto. “O briefing deve trazer

sua pista. O sucesso da jogada envolve a combinação

as informações que as equipes da agência, que não têm

de técnica e o uso dos equipamentos ideais, além - é

contato direto com o cliente, precisam para desenvolver

claro - de um pouco de sorte.

qualquer trabalho. Ele é um documento que mostra o que

Comparando um pouco desta realidade com os pro-

o cliente espera receber a partir das informações e objeti-

cessos de criação e desenvolvimento de um projeto di-

vos fornecidos”, diz Cezar Calligaris, gerente de projetos

gital, podemos dizer que os profissionais também preci-

da Dentsu Latin America (www.dentsu-lat.com.br).

sam combinar alguns fatores para alcançarem o sucesso na realização de seu trabalho.

Além de dar as diretrizes ao trabalho, o briefing exerce outras importantes funções. “Um bom briefing é

Então, como garantir um “strike” na hora de criar um

capaz de levantar uma equipe, deixá-la motivada e ge-

site? O caminho para encontrarmos esta resposta certa-

rar trabalhos brilhantes. Um briefing ruim e incompleto

mente vai passar pela elaboração de um briefing. “Ele é

certamente vai resultar em um trabalho com problemas”,

a bússola do projeto. É ele que nos dá o norte, auxiliando

aponta Cezar. “A capacidade de interpretação e elabora-

em todas as etapas de desenvolvimento e em cada toma-

ção de um briefing bem feito é o primeiro grande diferen-

da de decisão. Desde como será a arquitetura de informa-

cial de uma agência ou produtora. É a partir dele que a

ção, o cronograma, a escolha pela tecnologia adequada,

agência pode entender o que está sendo pedido e o que

a linguagem visual, tudo, praticamente, é levantado no

deve entregar”, completa Marcelo.

briefing (inclusive, os custos reais do projeto)”, explica

Traduzindo as expectativas do cliente

Marcelo Albagli, diretor de criação da Canvas Webhouse

À primeira vista, o briefing é o documento que mate-

(www.canvas.com.br).

rializa o desejo dos clientes em relação a um projeto. No entanto, a prática de mercado traduz este pensamento? “Acredito que sim e não vejo razão para ser o contrário. É de fundamental importância, tanto para o cliente quanto para a agência, que o briefing esteja bem fundamentado. O Brasil é cheio de bons profissionais e essa coisa de desenvolvimento web já não é mais um grande mistério faz tempo. Então, não tem razão para que o papel do briefing no mercado digital brasileiro tenha menor importância ou seja mais complexo do que em qualquer outro tipo de produto ou área de atuação”, afirma Marcelo. Para Cezar, a questão passa mais pelos cuidados a serem tomados pela pessoa responsável por sua elaboração. “Em muitos casos, o briefing é validado com o

e-mais - Briefing :: 45

“É ele que nos dá o norte, auxiliando em todas as etapas de desenvolvimento e em cada tomada de decisão” (Marcelo Albagli)

cliente, tornando-se documento oficial em relação ao pe-

e desenvolvimento”, diz Marcelo.

dido que foi feito. Apesar disso, briefing não é tudo: em

Lembre-se que tal tarefa vai exigir envolvimento

uma conversa, a pessoa que o elaborou é capaz de revelar

tanto dos profissionais, quanto da parte do cliente.

detalhes que nem sempre são possíveis de colocar nesse

“Fazer um bom briefing dá trabalho. Primeiro para o

documento. O histórico de trabalhos para determinado

cliente, que tem que saber exatamente o problema que

cliente é um exemplo”.

a agência precisa resolver e fornecer as informações

O que é um bom briefing?

que ela vai necessitar para isso. Depois para a equipe

A primeira premissa na elaboração de um bom brie-

de atendimento, que precisa reunir o máximo de infor-

fing é considerá-lo como a estrutura de seu projeto. “Des-

mações e passá-las corretamente para as outras equi-

de a confecção de um parafuso até a construção de um

pes. Na área on-line, elaborar um briefing é ainda mais

avião, o briefing é sempre a base do projeto. Obviamente

difícil, pois existem, além das informações estratégicas,

que, para se chegar a um briefing bem feito, pode ser ne-

informações técnicas importantes”, revela Cezar.

cessário prover o cliente com ferramentas que nos ajudem

O especialista ressalta ainda que nem sempre

a ter certeza de que trilhamos o caminho correto, além da

os clientes respondem, de forma mastigada, as in-

primeira entrevista. Por exemplo, em relação à linguagem

formações solicitadas pelo briefing. “Muitas vezes, é

visual: podemos apresentar layouts ou exemplos de layout

tarefa de quem o escreve ajudar o cliente a expressar

em outros sites, para nos certificar que as demandas e as

o que ele precisa. No caso de um job grande, o passo

expectativas estão corretamente abordadas. Naturalmen-

seguinte é enviar o briefing ao cliente para que ele

te, o cliente pode não ter certeza do que está pedindo,

o valide. Feito isso, é entregar na criação e outras

isso acontece. Nesses casos, o briefing pode - e deve - ser

áreas da agência, sempre como se fosse o trabalho

bastante testado antes das etapas posteriores de criação

mais importante do mundo. Existem duas grandes

46 :: e-mais - Briefing

“A capacidade de interpretação e elaboração de um briefing bem feito é o primeiro grande diferencial de uma agência ou produtora” (Marcelo Albagli)

visão da área de atuação e do cenário competitivo do nosso cliente. É importante levantar quais são os principais sites e empresas que ele considere interessantes, sejam parceiros ou concorrentes, estejam eles sediados no Brasil ou no exterior”. Aprendendo com os erros Tome consciência! Em um briefing, a margem de erros deve ser mínima. “Afinal, um erro na origem de um

dicas para quem está começando na área. A primeira é

trabalho vai gerar erros cada vez maiores em seu desen-

anotar tudo o que se fala na reunião ou telefonema em

volvimento. Os mais comuns são a falta de informações

que se recebe o pedido do cliente. A segunda é prepa-

ou as tentativas de adivinhar o que o cliente quer. Outro

rar o briefing assim que se chega da reunião, para não

erro é não se colocar no lugar de quem vai receber o

esquecer de nenhum detalhe”.

briefing para desenvolver um trabalho. Ao terminar de

O que não pode faltar

escrever o briefing, leia e veja se você o entenderia se

Já sabemos como definir um bom briefing, mas a

não tivesse nenhuma informação anterior. Existem ainda

pergunta que fica é: na hora de colocar tudo no papel,

dois erros que não podem ser cometidos: de gramática e

quais são os itens imprescindíveis de serem abordados

técnicos que geram pedidos absurdos. Com esses erros,

dentro do briefing? “Histórico do cliente, fato que deu

o briefing perde respeito. O último é achar que basta

origem ao pedido, objetivos, verba, prazo, duração da

entregar o briefing e o trabalho está resolvido: é preciso

ação, peças a serem criadas, mídia prevista, questões

explicá-lo e conferir se os resultados estão de acordo

técnicas, métricas que serão usadas para avaliar os re-

com ele”, orienta Cezar.

sultados e responsáveis pela elaboração do briefing e

Outra questão importante envolve os ruídos na co-

andamento dos trabalhos. E, se houver algum pedido

municação. “Por isso, é muito importante que o atendi-

especial, como o caso de um prazo apertado, explicar o

mento saiba interpretar o que o cliente diz para poder

motivo para que as outras áreas não pensem que o erro

transmitir com clareza para o pessoal da criação ou da

é seu”, descreve Cezar.

tecnologia aquilo que a agência precisa entregar. Se for

Já Marcelo define esse processo como a junção de três conceitos: imersão, análise e conceituação. “Quando

possível aprovar um conceito com o cliente antes do desenvolvimento, melhor ainda”, diz Marcelo.

realizamos um briefing, esperamos que o resultado dele

Como exemplo deste cenário, ele cita um caso

esteja concretizado em todo o projeto. Em um primeiro

ocorrido em sua agência. “Usamos uma linguagem bas-

momento, o briefing nos deve dar a base para gerar um

tante específica, e por vezes excessivamente técnica,

cronograma de desenvolvimento e a arquitetura de infor-

e isso pode gerar confusão. Para citar um caso engra-

mação, além de incentivar, possivelmente, outras ações

çado, uma vez nos deparamos com uma situação, onde

que originalmente não tenham sido previstas no escopo

um cliente havia solicitado um banner randômico e, na

inicial, mas que ajudem o projeto a ser bem sucedido.

verdade, o que ele estava querendo dizer era um ban-

Não devemos pensar somente naquele produto que está

ner animado”.

sendo cotado, pois a nossa função não é simplesmente

Sintonia com o trabalho de criação

executar um job, mas alocar nossa experiência para que

Talvez um dos principais desafios para se garantir a

o cliente atinja os resultados esperados, e, preferencial-

utilidade de um briefing seja criar uma sintonia para que

mente, ultrapasse suas metas iniciais. Fundamental em

o trabalho de criação realmente reflita o que está descrito

um briefing é a criação do benchmark, que nos dê uma

no documento. “Não existe uma fórmula mágica. Isso de-

e-mais - Briefing :: 47

“Na área on-line, elaborar um briefing é ainda mais difícil, pois existem, além das informações estratégicas, informações técnicas importantes” (Cezar Calligaris) manda experiência, com certeza, e o expertise da equipe

b r i e f i n g d e v e t e n t a r s e r m o t i v a d o r, m e s m o q u e o

de criação trabalhando em sintonia com o atendimento.

trabalho não seja dos mais empolgantes. O respeito

Os dois precisam se comunicar, muito e bem. No entanto,

ao briefing varia muito de acordo com a cultura da

devemos elaborar documentos que formalizem as conver-

agência. Em agências com perfil criativo, muitas ve-

sas, entrevistas, pesquisas etc.”, explica Marcelo (veja, na

zes existe a liberdade de fugir de algumas sugestões

página 48, dicas para elaborar um briefing).

estabelecidas no briefing. Em agências focadas em

Segundo Cezar, a grande vantagem na formaliza-

atendimento, os profissionais se tornam verdadeiros

ção é que ela acaba gerando respeito dentro do pro-

guardiões dos briefings, chegando a fazer check-lists

cesso. “Um briefing respeitado é aquele bem escrito,

para verificar se tudo foi cumprido. Vale o bom sen-

fundamentado, sem erros e com informações suficien-

so: se o cliente pediu laranjas, você não pode entre-

tes para desenvolver o trabalho. E, principalmente, o

gar abacaxi”, aconselha.

48 :: e-mais - Briefing

Dicas para elaboração de um briefing Segundo Marcelo Albagli, da Canvas, um briefing bem feito sempre é bem documentado. Abaixo, ele descreve quais são as informações que devem ser respondidas quando elaboramos este documento.

- Dados do cliente “Nome, telefone, e-mail, fax etc. Considere como cliente não somente aquele que paga pelo projeto, mas quem faz a aprovação, seja um indivíduo ou um grupo de pessoas. Identifique uma única pessoa no cliente e outra na agência que estarão responsáveis pela aprovação do briefing e apresentação do projeto. Essas pessoas serão os responsáveis pelo projeto e devem estar capacitadas a responder quaisquer questões que surgirem. Por isso, seus papéis devem estar formalizados aqui” - Nome do projeto “Por exemplo: campanha de lançamento para o novo site da empresa XYZ” - Aprovação Cliente:

Data:

Agência:

Data:

1) Cenário “Apresentação do cliente / projeto para sua equipe de criação, em linhas gerais. Tente responder perguntas do tipo: qual o cenário? Quem são os concorrentes e como anda o mercado? Existe alguma outra ação (off-line) sendo preparada pelo cliente que a equipe de criação deva saber? Para um bom resultado, seja o mais conciso em responder: para quem estamos falando e qual a mensagem principal que você deseja comunicar? Existem pesquisas realizadas, ou em andamento, que possam ser adicionadas aqui?” 2) Público-alvo “Procure ser o mais preciso possível, evitando segmentações genéricas como ‘público em geral’ ou ‘sociedade civil’. Além de sexo e idade, tente localizar seu público demograficamente e, se possível, tente traçar um perfil tecnológico do mesmo (de onde ele acessa a web, que tipo de máquina usa etc.). É possível obter informações desse tipo - inclusive o próprio cliente pode ajudar a prover essas informações (por exemplo, através de uma base de usuários já consolidada ou de relatórios de visitação do seu site). Identifique mais de um público-alvo. Por exemplo, cite o público formador de opinião para o seu público primário” 3) Objetivos e propósitos “Que tipo de impressão você deseja causar? O que você deseja que o seu público pense, sinta ou faça?”

e-mais - Briefing :: 49

4) Qual a coisa mais importante que deve ser comunicada? “Para atingir o resultado esperado, procure determinar qual o argumento mais persuasivo, ou o mais importante, a ser dito em toda a campanha. Seja o mais específico possível, para evitar ambigüidades na comunicação, mas tente também ser o mais sucinto” 5) Como a sua mensagem deve ser transmitida? “ I d e n t i f i q u e o t o m d a m e n s a g e m . E l a d e v e s e r c a s u a l , i n f o r m a t i v a , a g re s s i v a , b e m - h u m o r a d a o u conservadora? Explique o porquê” 6) Quais as motivações racionais e emotivas para que sua comunicação tenha credibilidade? “Faça uma lista de tudo aquilo que dê apoio para que o seu público-alvo reaja da maneira que você quer que ele reaja. Por ordem de importância, liste as motivações racionais e emotivas de tudo aquilo que pode te ajudar a atingir o seu objetivo. Exemplos de motivações são coisas do tipo: racional - ‘clinicamente comprovada como o melhor do mercado’; emocional - ‘essa marca você conhece desde pequeno” - Elementos obrigatórios e informações adicionais “Liste tudo aquilo que é obrigatório na sua comunicação, como o logotipo do cliente ou produto, por exemplo. Existem outros materiais, como anúncios (em vídeo ou impressos), ou qualquer outra(s) re f e r ê n c i a ( s ) , c o m o m a n u a i s d e m a rc a e t c . ? E s s a a ç ã o é ú n i c a o u é a c o n t i n u a ç ã o d e o u t r a c a m p a n h a anterior? O que é obrigatório e o que é considerado pelo cliente como uma preferência?” - O que e quando você precisa da sua equipe de criação “ D e s c re v a o p l a n o d e m í d i a e a s p e ç a s d a c a m p a n h a ( b a n n e r s , j o g o s , w e b s i t e e t c . ) , a n e x a n d o o cronograma de quando cada produto deve estar pronto, cumprindo as seguintes fases: 1) Proposta criativa inicial (‘rafe’); 2) Proposta criativa revista pelo cliente, se possível; 3) Apresentação interna, para aprovação do atendimento; 4) Apresentação para o cliente; 5) Publicação”

50 :: estudo de caso - Fellini

Você já navegou por um site, sendo ciceroneado por uma pequena panelinha animada? Pois bem, a sensação faz parte do processo de experiência vivida pelos usuários do site do Restaurante Fellini (www.fellini.com.br). A criação deste inusitado ambiente gastronômico ficou a cargo da agência carioca eSpiral Design Studio (www.espiral.biz). A seguir, Ivan Salles, diretor comercial, e Rodrigo Costa, sócio e diretor de criação, vão revelar quais foram os desafios envolvidos na reformulação do site do restaurante.

estudo de caso - Fellini :: 51

“Foi um trabalho duro e cansativo. Ralamos, erramos e aprendemos muito também. Foi uma grande escola para nós”

Wd :: Ao digitar www.fellini.com.br, o usuário entra

ao entrar no site é compensadora no final das contas e

em uma página de aviso sobre as especificações do site:

essa recompensa foi condição “sine qua non” para que

conteúdo disponível em português e inglês, interface

adotássemos um escopo com tais características. É isso:

projetada para resolução de tela de 800x600 pixels e o

“experiência inovadora” foi a tônica desta proposta.

uso recomendável de banda larga e placa de som. Qual

Wd :: Um ponto interessante neste projeto é que o

é o perfil do usuário que acessa o site do restaurante e

dono do restaurante, Nelson Laskowsky, conhece as no-

de que forma ele influenciou no processo de criação?

vas tecnologias e procura se informar sobre as principais

Ivan e Rodrigo :: Sem dúvida, isso foi um ponto de grande discussão. Era claro que um site cheio de anima-

novidades que envolvem a internet. Como esta característica ajudou no desenvolvimento do projeto?

ções e sons não seria exatamente leve e que alguns usu-

Ivan e Rodrigo :: Hoje em dia, é raro encontrar um

ários de internet discada poderiam ficar frustrados com

cliente que tenha uma visão de internet e webdesign des-

as recomendações mínimas e outros impacientes com a

ligada dos paradigmas dominantes do mercado. Em se

demora em carregar as áreas.

falando de restaurante então, acreditamos que isso seja

No entanto, os clientes do restaurante são basica-

ainda mais evidente.

mente pessoas de classes sociais financeiramente privile-

Durante as nossas pesquisas, não fomos capazes de

giadas, moradores do Leblon (bairro carioca, localizado na

encontrar muito material nacional com qualidade. Nos ra-

Zona Sul da cidade) e adjacências e muitos estrangeiros

ros casos em que não tomávamos um susto com o aspecto

em visita à cidade. Pessoas, com um perfil de usuário, que

do site, era sempre algo bem convencional no que diz res-

efetivamente têm acesso à banda larga e que poderiam

peito ao conceito e à linguagem adotada.

navegar em um site com as características do site do Fellini, sem maiores contratempos. Acreditamos que a experiência do usuário obtida

O Nelson é um grande empresário e podemos ver isso traduzido no sucesso que o seu único estabelecimento possui: fidelidade da clientela, alto grau de satisfação

52 :: estudo de caso - Fellini

“Quem vê o site hoje tende a julgar que a panela foi feita em 3D, mas toda a animação foi feita no braço”

dos funcionários, comida de alta qualidade e casa sempre cheia, apesar dos preços não tão baixos. Ele viu no site uma oportunidade de colocar a sua imagem na internet de um modo mais conceitual e menos corporativa. Ter divulgados os pratos do dia e as iguarias exclusivas da casa era secundário diante do seu desejo de ver um design com a cara e o clima do restaurante. Nós mesmos tivemos um primeiro layout reprovado por ser muito “normal” e não corresponder às expectativas dele. Juntos, acabamos encontrando o caminho das pedras com a idéia do mascote, a panelinha azul. Uma vez encontrada a sintonia, fazer o resto foi uma questão de tempo. Wd :: Falando sobre a panela animada, sua função principal é orientar a navegação do usuário. Como surgiu a idéia de colocá-la como elemento central do site? Ivan e Rodrigo :: A pesquisa foi exaustiva e nos inspiramos em alguns sites internacionais. Até certo ponto ainda não sabíamos o que seria melhor para usar como mascote e muitas opções surgiram, mas sem agradarem muito. Até que, em uma sessão de fotos no restaurante, recebidos pela atenciosa e sempre sorridente Ana Maria, esposa do Nelson, nos deparamos com a simpática panelinha de barro azul, guardada no fundo de um armário da casa. Ali terminaram as nossas dúvidas. Wd :: Ainda sobre a panela, quais foram os recursos utilizados para a sua modelagem e animação? Quantas horas do projeto foram consumidas para o seu desenvolvimento? Rodrigo :: Quem vê o site hoje tende a julgar que a panela foi feita em 3D, mas toda a animação foi feita no braço, com cada frame de animação fotografado um a um, à mão livre. Posteriormente, o “f” (de Fellini) foi acrescentado em Photoshop.

estudo de caso - Fellini :: 53

A parte mais complicada foi na abertura, no momento

informações, como se o visitante estivesse dando aquela

em que ela “cospe” para cima os dizeres de boas-vindas e

volta na bancada do buffet antes de fazer a escolha do que

depois “sai correndo”, bem no estilo cartoon em direção a

colocar no prato. Wd :: A tipografia utilizada para indicar os títulos

um suposto horizonte na tela. Todos os frames foram feitos um a um a partir de uma

das seções está baseada em fontes fantasia, com serifa.

única imagem, pacientemente destorcidos com a ferramen-

Por que vocês decidiram utilizar este tipo de família tipo-

ta Liquify e animados no Flash. Estimamos que o processo

gráfica e como ela se insere dentro do conceito do site? Ivan e Rodrigo :: Quem vai almoçar ou jantar no Felli-

todo tenha durado algo em torno de 15 horas. Ivan :: O som da tampa arrastando na panela ao abrir

ni, sente no ar um clima de uma contagiante paz, trans-

foi gravado dentro do escritório, a partir de uma outra

mitida pela evidente satisfação com que os funcionários

panela de barro cedida pela mãe do Rodrigo, que hoje se

parecem trabalhar ali e pelas pessoas que freqüentam o

enche de orgulho de ter feito o providencial empréstimo.

lugar. Utilizamos a fonte Fontdinerdotcom nos títulos, por

Wd :: Em termos de arquitetura da informação, o

julgar que ela transmite esse clima de simpatia e harmonia,

site foi dividido em cinco seções (Veja+, Sinta+, Coma+, Fale+ e Saiba+). Quais aspectos determinaram os nomes das seções e a maneira como o conteúdo foi disponibilizado?

sem perder a legibilidade. Wd :: Uma das dúvidas mais comuns de quem inicia nesta área envolve a forma de se cobrar a produção de

Ivan e Rodrigo :: Essa solução foi uma forma lúdica

fotos. Dando uma navegada pelo site, é possível perce-

de relacionar o menu à gastronomia e às sensações que

ber que vocês realizaram algumas sessões de fotos nas de-

podem ser experimentadas em um restaurante.

pendências do restaurante. De que forma vocês incluíram

Utilizamos então imagens de bocas, mãos, olhos e ali-

esta etapa dentro da proposta comercial do projeto?

mentos organizados em forma de uma flor de seis pétalas e buscando relacioná-los com o conteúdo do briefing de uma forma mais intuitiva e menos explícita, incitando a curiosidade do visitante. A navegação sugere uma progressão linear passando por todas as áreas. Praticamente um “passeio” pelas Liquify “Um plugin que já vem com o Photoshop 7, não necessitando qualquer tipo de instalação ou configuração prévia. Serve para aplicarmos efeitos em fotos, textos e imagens em geral.” Fonte: Baboo (http://tinyurl.com/2bo5hl)

“Ele (dono do restaurante) viu no site uma oportunidade de colocar a sua imagem na internet de um modo mais conceitual e menos corporativa”

54 :: estudo de caso - Fellini

Ivan e Rodrigo :: Como se tratava de transmitir uma sensação (paladar) através da visão (fotos), conseguimos demonstrar de maneira rápida o retorno do investimento ao Nelson. A solução que encontramos para este caso foi contra-

“A navegação sugere uma progressão linear, como se o visitante estivesse dando aquela volta na bancada do buffet antes de fazer a escolha do que colocar no prato”

tar um fotógrafo e incluir a direção de arte das sessões em nossa proposta, dando a ela a mesma atenção dispensada

servado em outros trabalhos nossos que utilizam também

ao processo de criação como um todo.

este recurso.

Wd :: Na seção Coma+, o usuário pode conferir

Wd :: Dando uma analisada na programação do site,

qual será o cardápio do dia. Como vocês planejaram a

percebemos o uso de scripts de duas ferramentas de

atualização do site, que foi desenvolvido com base na

análise de tráfego: SuperStats e Google Analytics. Por

tecnologia Flash?

que vocês decidiram usar estas ferramentas e como vo-

Ivan e Rodrigo :: Não é grande o número de áreas que

cês trabalham as métricas geradas por elas?

precisam de atualização. Para isso, existe um módulo ad-

Ivan e Rodrigo :: As ferramentas foram propostas por

ministrativo bastante simplificado para que o cliente possa

nosso parceiro de hospedagem. As métricas são utilizadas

fazer a atualização das fotos, menu do Coma+ e das fotos

para mensurar os resultados das campanhas lançadas no

da galeria do Veja+.

site e ajustar conteúdos e seções que estejam com pouco

Wd :: Além da panela animada, o usuário pode na-

acesso ou identificar pontos de atenção, como um interes-

vegar pelo site escutando uma seqüência de músicas.

se diferenciado dos visitantes em alguma página específica.

Quais recursos foram utilizados para que o fundo musical

É um poderoso link com o negócio do cliente.

ficasse disponível no site? E como a música se relaciona com o conceito proposto?

Wd :: Que tipo de retorno a remodelação do site trouxe para o restaurante e para a agência?

Rodrigo :: A seleção musical segue a mesma linha

Ivan e Rodrigo :: O retorno que temos da equipe do

de pensamento da escolha da fonte. Precisávamos de um

Fellini é muito positivo. O site conseguiu traduzir o espí-

som que transmitisse o clima de se estar sentado à mesa

rito do negócio deles e isso pode ser comprovado pela

do Fellini, absorvendo toda aquela energia positiva. Acre-

quantidade de acessos e pelos vários elogios que os donos

ditamos que a música tema (a primeira) tem o alto astral

recebem de seus clientes.

que procurávamos.

Do lado da agência, podemos dizer que esse trabalho

Tecnicamente falando, a trilha disponível é um arquivo

é o nosso xodó. Na época em que começamos a trabalhar

pequeno que é carregado separadamente e que toca em

nele, a nossa equipe se limitava aos dois sócios (Rodrigo e

loop. Quando uma das outras quatro opções é selecionada,

Tatiane Forli). Foi um trabalho duro e cansativo. Ralamos,

um novo arquivo de som em loop é carregado.

erramos e aprendemos muito também. Foi uma grande

Ivan :: Claro, o Rodrigo é o nosso DJ mágico de plantão e sempre sai com um som da cartola. Isso pode ser ob-

escola para nós. Muito nos satisfaz também perceber que ele começa,

estudo de caso - Fellini :: 55

aos poucos, nos trazer os frutos desse esforço, principalmente depois de termos nos classificado entre os dez primeiros colocados no Peixe Grande 2006. O grande trunfo de cases como esse é a visibilidade que ele pode trazer para uma empresa do nosso porte, que não dispõe de recursos para publicidade tradicional e precisa lançar mão do boca-a-boca para ter seu trabalho divulgado. Wd :: Na criação da interface, vocês colocaram uma pequena assinatura da agência, contendo o link do site de vocês. A prática é comum em todos os projetos desenvolvidos pela eSpiral? Ivan e Rodrigo :: Entendemos que o resultado de um belo trabalho merece uma assinatura. Temos como padrão assinar o que fazemos, isso aumenta nossa responsabilidade de sempre entregar um trabalho de qualidade ao nosso cliente. Para a assinatura, procuramos manter algo muito simples e que não destoe da proposta central do projeto. Se o resultado agradar, um futuro cliente pode nos acessar. É a nossa forma de fazer os negócios girarem como uma espiral.

www.fellini.com.br

56 :: tecnologia na web

Tecnologia na web Como tornar seu site acessível? Você já parou para pensar como o avanço tecnológico trouxe uma série de facilidades para o seu cotidiano?

deficiência acessam à internet vai garantir uma boa experiência de navegação para essas pessoas.

Então, agora imagine o poder que essas transformações

“Há muitas particularidades, dependendo da deficiên-

representam na vida das pessoas com deficiência. “Muitos

cia do usuário e os recursos (tecnologia assistiva) que ele

dos meus colegas de trabalho, amigos e familiares já não

dispõe para navegar o conteúdo de uma página. Mas, de

precisam sair de casa para pagar uma conta em um banco,

um modo geral, muitas pessoas cegas utilizam um programa

por exemplo. Para uma pessoa com deficiência, ao realizar

conhecido como ‘leitor de tela’ e recebem a informação da

essa mesma tarefa, a tecnologia traz independência, digni-

página via sintetizador de voz ou display braille (esta não

dade e ubiqüidade, ou seja, ela pode estar em muitos luga-

muito utilizada no Brasil, devido ao alto custo) e interagem

res ao mesmo tempo ou quase ao mesmo tempo. Para uma

por meio do teclado e não pelo mouse. As pessoas com bai-

pessoa cega é mais prático e confortável acessar o banco

xa visão podem utilizar um programa conhecido como ‘am-

de casa ao invés de ir até o banco para falar com o gerente

pliador de tela’ para ampliar o conteúdo que se apresenta

ou com um atendente atarefado. Pensar acessibilidade é

na tela do micro. Para os usuários com deficiência auditiva,

pensar em inclusão digital e design responsável - design

o acesso ao conteúdo sonoro se dá por meio de legendas ou

universal e, no caso da inclusão, algo muito importante tanto

transcrição de um áudio. Já aqueles que possuem deficiência

para empresas públicas, mas também hoje para empresas

física, dependendo do tipo de deficiência, podem navegar

de mercado”, afirma Aracy Bernardes, designer e analista

somente via teclado, com um mouse ou teclado alternativo,

de sistemas da PRODAM/SP.

dispositivo tipo ponteiro fixado na cabeça ou na boca, pro-

Assim, os profissionais responsáveis pela criação e

grama de reconhecimento de voz, navegação por meio do

pelo desenvolvimento de ambientes digitais devem tomar

movimento dos olhos ou outras tecnologias assistivas para

consciência sobre a importância do assunto. “Construir sites

acesso e interação”, explica Miriam.

acessíveis é fundamental para que mais usuários possam

“O grupo com quem mais trabalho são as pessoas ce-

acessar e interagir com o conteúdo das páginas. Temos que

gas, com baixa visão e, eventualmente, as que têm dificulda-

ter em mente que há uma diversidade de tipos de usuários

de em distinguir cores. Para elas, o maior impacto é devido à

e também nas ferramentas que eles utilizam para acessar

natureza gráfica das páginas da web. Assim, elas apresentam

um site e este tem que estar pronto para ser navegável e

dificuldades ao captar informações, quando interagem com

interagido por qualquer pessoa, seja com ou sem deficiên-

os seguintes elementos: imagens, mapas, links, animações

cia, jovem ou idoso, usuário de tecnologias mais comuns

gif e Flash (e/ou interfaces inteiras em Flash); uso de cores,

ou não”, completa Miriam Simofusa, gerente da divisão de

tamanho de fontes e janelas que não rolam (scroll); navega-

design e acessibilidade web do SERPRO e facilitadora do

ção (frames, links, javascripts, applets); tabelas de dados; e

grupo “Acessibilidade ao Conteúdo da Web” do Comitê

preenchimento de formulários”, relata Aracy.

Brasileiro de Acessibilidade da ABNT. Perfil do usuário com deficiência

Custos versus acessibilidade Na última promoção envolvendo a bala Halls, a Cadbury

Uma das principais etapas no desenvolvimento de um

Adams Brasil provou que é possível criar campanhas publi-

site envolve o prévio conhecimento sobre o perfil do usuário

citárias na internet seguindo os preceitos para a criação de

que vai acessar aquele ambiente. Dessa forma, conhecer

sites acessíveis: a promoção “É coisa da sua cabeça” pode

algumas características na maneira como os usuários com

ser acessada também via texto (http://tinyurl.com/vn4e8).

tecnologia na web :: 57

“Se a acessibilidade for vista como necessidade no início do projeto, o custo cai” (Aracy Bernardes)

Aracy lembra de outro caso interessante, envolvendo o site

tabela para tableless ou o mínimo de tabela para layout).

da autora do livro Harry Potter, J.K. Rowling (www.jkrowling.

Também, é recomendável questionar qual o nível de aces-

com), que tem uma opção de caminho de navegação voltado

sibilidade que poderá ser implementado. E não esquecer

para as pessoas que utilizam tecnologias assistivas (leitores

que testar e avaliar as páginas no início, durante e no final

de tela, por exemplo), além da versão em Flash contar com

do desenvolvimento do site é fundamental para alcançar os

ferramentas de acessibilidade.

resultados esperados”.

Através destes exemplos, podemos afirmar que a acessibilidade não aumenta os custos no desenvolvimento de um

Testando a acessibilidade de um site!

projeto digital? “O que o acréscimo de mais sete ou oito páginas somente texto vai onerar para um anunciante tão im-

Na página ao lado, Miriam Simofusa, do SERPRO,

portante quanto o fabricante destes ou daqueles produtos

selecionou alguns dos principais documentos e fer-

tão conhecidos? Se a acessibilidade for vista como neces-

ramentas utilizadas para testar o nível de acessibi-

sidade no início do projeto, o custo cai. Essa característica

lidade de um site. Porém, ela faz algumas recomen-

tem que ser vendida como item importante e que agrega

dações. “Não basta zerar erros em uma ferramenta

valor. Se o cliente perceber por si próprio que seu projeto

automática de acessibilidade, isso não garante que

não contemplará um determinado público, por qualquer mo-

sua página esteja acessível. Combine sempre testes

tivo que seja, veja você em que situação difícil às equipes do

automáticos e humanos. Além disso, se tiver opor-

projeto e a da comercialização serão afrontadas. E aí, para

tunidade de testar sua página com pessoas com

quem o stress e o custo vão sobrar?”, argumenta Aracy.

deficiência, melhor ainda. Outro recado importante

Na verdade, os gastos surgem quando um projeto já

é não esquecer da acessibilidade ao atualizar o con-

publicado tiver que sofrer uma completa adaptação. Isso

teúdo de uma página, pois não adianta construir um

porque, ressalta Miriam, implementar requisitos de acessibi-

site acessível se não se mantém acessível”.

lidade em um site que foi projetado sem pensar em padrões web e acessibilidade pode ser muito custoso devido ao tempo que se gastará identificando erros e corrigindo-os, além

Links úteis

do desgaste gerado para a realização do trabalho. “Deve-se

- Acessibilidade Brasil (www.acessobrasil.org.br)

avaliar cuidadosamente antes de decidir em adaptar o site.

- Acessibilidade na web - SERPRO (www.serpro.

E, dependendo do site, é muito melhor optar por um rede-

gov.br/acessibilidade)

sign. Mas, se a opção for para adaptar, recomenda-se não

- Acessibilidade - PRODAM/SP (www.prodam.

implementar os padrões web e acessibilidade tudo de uma

sp.gov.br/acess)

vez. A adaptação deve ser gradual. Por isso, é fundamental

- Adactio (http://adactio.com/journal)

organizar e priorizar os objetivos, dividindo-os por etapas.

- Alertbox (www.useit.com/alertbox)

Por exemplo, adequações básicas (DOCTYPE correto em

- A List Apart (www.alistapart.com)

todas as páginas, ALT para todas as imagens, TITLE de pági-

- Meyerweb.com (www.meyerweb.com)

nas significativas, requisitos de acessibilidade para menus),

- W3C Web Accessibility Initiative (www.w3.org/WAI)

adequações intermediárias (código válido e semanticamente

- 456 Berea Street (www.456bereastreet.com)

correto, requisitos de acessibilidade para formulários, ta-

Fontes: Aracy Bernardes e Miriam Simofusa

belas) e adequações avançadas (passar layout que está em

58 :: tecnologia 58:: tecnologia na na web web

“Construir sites acessíveis é fundamental para que mais usuários possam acessar e interagir com o conteúdo das páginas” (Miriam Simofusa)

nível médio

- Avaliação de acessibilidade

- Lista de verificação do WCAG

A-Prompt - http://tinyurl.com/26sgj9

http://tinyurl.com/dbfx5

Da Silva - www.dasilva.org.br

- Teste de contraste de cores

Taw - www.tawdis.net

Juicy Studio - http://tinyurl.com/5834a

Webxact - http://webxact.watchfire.com

Vischeck - www.vischeck.com

Wave - http://wave.webaim.org

Visual Impairment Simulator - http://tinyurl.com/

Outros validadores - http://tinyurl.com/211i

238vt7

- Extensões de navegadores para efetuar testes

- Validadores de sintaxe (padrões web)

Firefox - http://tinyurl.com/246vv6

w3.org

Internet Explorer - http://tinyurl.com/mhus7

W 3 C C S S Va l i d a t i o n S e r v i c e - h t t p : / / t i n y u r l .

Mozilla/Firefox - http://tinyurl.com/ytmvfe

com/ptfe4

W3C Markup Validation Service - http://validator.

Weberê Lutando por um mundo melhor Música: Água Composição: Mestre Bode

Magê-Malien - Crianças que Brilham Faça parte você também deste projeto. Para doação de alimento entre em contato: arteccom@arteccom.com.br Informações: www.arteccom.com.br/ong

Não desperdice a água A água está para acabar As fontes do mundo inteiro Já começam a secar

Capoeira é bicho doido Mas tem que raciocinar Se acabar com a água toda A sede vai te matar

Água pra beber, água pra lavar, água preciosa, só gaste o que precisar (refrão)

Agora tô te avisando Depois não vem reclamar Não sabia gastou tudo Agora tem que pagar

Vamos todos nesse jogo Todos sem desanimar Despertando a consciência Aqui e em todo lugar

Água pra beber, água pra lavar, água preciosa, só gaste o que precisar (refrão)

60 :: tutorial

Produtividade 2.0 - Parte 5 Elcio Ferreira Desenvolvedor e instrutor na Visie Padrões Web http://visie.com.br/

Para os iniciantes em programação web Para finalizar esta série de artigos sobre produtividade em programação web, vamos apresentar algo diferente. Temos visto uma porção de profissionais iniciando no desenvolvimento web e gostaria de apresentar o maior segredo da produtividade em programação. Se você já é um programador experiente, provavelmente não há nenhuma novidade neste artigo para você. Antes, pode parecer que vamos dizer o óbvio. Mas temos encontrado muita gente desenvolvendo sem saber o óbvio. Por isso, guarde esse artigo. Vai ser útil quando você tiver que lidar com um novato

em sua equipe. O grande primeiro segredo da produtividade em programação é DRY, que é a sigla para “Don’t Repeat Yourself”. Esse é o primeiro e principal segredo da produtividade e qualquer programador iniciante precisa compreendê-lo bem se quiser se tornar produtivo. Tome, por exemplo, este código PHP: <?php // Conectando, escolhendo o banco de dados $link = mysql_connect(‘localhost’, ‘pesquisa’, ‘senha’) or die(‘Não foi possível conectar: ‘ . mysql_error()); mysql_select_db(‘pesquisas’) or die(‘Não foi possível selecionar o banco da dados’); // Executando a consulta SQL $query = ‘SELECT * FROM usuarios’; $result = mysql_query($query) or die(‘A consulta falhou!: ‘ . mysql_error()); ?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”pt-br” xml:lang=”pt-br”> <head> <title>Lista de usuários</title> <link rel=”stylesheet” type=”text/css” href=”/css/base.css” /> </head>

É um código bastante simples, que conecta no banco de dados, faz uma consulta e exibe os resultados. Agora veja este outro código, que faz quase a mesma coisa, mas envia um e-mail para cada um: <?php // Conectando, escolhendo o banco de dados $link = mysql_connect(‘localhost’, ‘pesquisa’, ‘senha’) or die(‘Não foi possível conectar: ‘ . mysql_error()); mysql_select_db(‘pesquisas’) or die(‘Não foi possível selecionar o banco da dados’); // Executando a consulta SQL $query = ‘SELECT * FROM usuarios’; $result = mysql_query($query) or die(‘A consulta falhou!: ‘ . mysql_error()); ?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”pt-br” xml:lang=”pt-br”> <head> <title>Lista de usuários</title> <link rel=”stylesheet” type=”text/css” href=”/css/base.css” /> </head> <body>

<body> <h1>Lista de usuários</h1> <h1>Lista de usuários</h1> <ul id=’lista’>

tutorial :: 61

<? while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { mail($line[“email”],”Cadastro confirmado”,”Olá, seu cadastro foi confirmado com sucesso.”); ?> <li>E-mail enviado para <b><?=$line[“nome”]?> - <?=$line[“email”]?></b></li> <? } ?> </ul> </body> </html> <? // Liberar os objetos mysql_free_result($result); mysql_close($link); ?>

Você deve ter percebido que, embora os dois códigos sejam bastante simples, há muita coisa repetida entre eles. Isso significa que o desenvolvedor escreveu duas vezes o mesmo código ou, na melhor das hipóteses, copiou e colou. Significa também que, numa eventual manutenção, ele terá que se lembrar de alterar todas as cópias desse código, em todos os arquivos. Para ajudar com esse problema, qualquer linguagem de programação atual conta com recursos para incluir ou importar arquivos de código. No PHP, usamos o comando include. Vamos trabalhar com quatro arquivos: conn.php - conexão

o código que seleciona os usuários no banco de dados, colocando-o numa função no arquivo funcoes.php, que fica: <?php function pegaUsuarios(){ // Executando a consulta SQL $query = ‘SELECT * FROM usuarios’; $result = mysql_query($query) or die(‘A consulta falhou!: ‘ . mysql_error()); return $result; } ?>

Agora, vamos criar o arquivo cabecalho.php, que conterá o código do cabeçalho de nosso arquivo HTML: <?php include(“conn.php”); include(“funcoes.php”); ?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”pt-br” xml:lang=”pt-br”> <head> <title><?=$titulo?></title> <link rel=”stylesheet” type=”text/css” href=”/css/base.css” /> </head> <body> <h1><?=$titulo?></h1>

ao banco de dados; funcoes.php - funções do sistema, reaproveitáveis; cabecalho.php - o cabeçalho do documento HTML; rodape.php - o rodapé do documento HTML.

Como você deve ter percebido, o cabeçalho inclui os arquivos conn.php e funcoes.php. Estes arquivos serão usados em todas as páginas, então incluí-los no cabeçalho faz

Veja como fica o nosso arquivo conn.php:

com que estejam disponíveis em todas, sem precisar escrever uma linha de include para eles em cada uma das páginas.

<?php // Conectando, escolhendo o banco de dados $link = mysql_connect(‘localhost’, ‘pesquisa’, ‘senha’) or die(‘Não foi possível conectar: ‘ . mysql_error()); mysql_select_db(‘pesquisas’) or die(‘Não foi possível selecionar o banco da dados’); ?>

Ou seja, apenas o código de conexão ao banco de dados. A vantagem de escrever isso assim é que escreveremos este código apenas uma vez. Numa futura migração de servidor, precisaremos alterar apenas em um lugar o login e a senha do banco de dados. Vamos fazer a mesma coisa com

Por fim, o rodape.php: </body> </html> <? // Liberar o objeto de conexão mysql_close($link); ?>

Este arquivo contém o ﬁnal de nosso código HTML e o código que fecha a conexão com o banco de dados. Veja como ﬁca simples nosso código na página que envia os e-mails: <?php $titulo=”Lista de usuários”; include(“cabecalho.php”);

62 :: tutorial

$result=pegaUsuarios(); ?> <ul id=’lista’> <? while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { mail($line[“email”],”Cadastro confirmado”,”Olá, seu cadastro foi confirmado com sucesso.”); ?> <li>E-mail enviado para <b><?=$line[“nome”]?> - <?=$line[“email”]?></b></li> <? } ?> </ul> <? mysql_free_result($result); include(“rodape.php”); ?>

Veja que, incluindo o cabeçalho e o rodapé, não preciso me preocupar em abrir conexão ao banco, não preciso me preocupar com SQL aqui, não preciso fechar conexão. Cuidei de tudo isso nos lugares certos e agora em cada lugar em que eu quiser selecionar todos os usuários basta

Perceba os dois blocos principais, como são semelhantes. Onde você for tentado a escrever código assim, resista bravamente. Veja esta alternativa: <?php $titulo=”Lista de usuários”; include(“cabecalho.php”); ?> <? foreach(Array(“nome”,”email”) as $i){ ?> <? $result=pegaUsuarios(); ?> <h2>Lista de <?=$i?>s:</h2> <ul id=’listanomes’> <? while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?> <li><?=$line[$i]?></b></li> <? } ?> </ul> <? } ?> <? mysql_free_result($result); include(“rodape.php”); ?>

chamar a função pegaUsuarios. Há ainda um exemplo que

Note que nós transformamos as pequenas diferenças

precisamos mostrar, que revela como podemos ser tentados

entre os dois blocos em variáveis e conseguimos escrever

a copiar e colar código que não deveria estar duplicado. Veja

um bloco com o que havia de semelhante entre os dois.

o seguinte código:

Não deixe redundâncias em seu código. Seja perfeccionista

<?php $titulo=”Lista de usuários”; include(“cabecalho.php”); ?> <? $result=pegaUsuarios(); ?> <h2>Lista de nomes:</h2> <ul id=’listanomes’> <? while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?> <li><?=$line[“nome”]?></b></li> <? } ?> </ul> <? $result=pegaUsuarios(); ?> <h2>Lista de emails:</h2> <ul id=’listanomes’> <? while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?> <li><?=$line[“email”]?></b></li> <? } ?> </ul> <? mysql_free_result($result); include(“rodape.php”); ?>

nisto. Você vai se agradecer. Próximos passos Pratique escrever código DRY até que isso se torne natural. Pratique até que você sinta nojo quando olhar código redundante. Depois de pouco tempo de prática, você perceberá um considerável ganho de produtividade, especialmente em manutenções. E estará pronto para aprender mais. Depois de décadas tentando deixar seus códigos o mais DRY possível, muitos desenvolvedores chegaram a soluções tão boas que hoje foram amplamente adotadas e são chamadas de padrões no mundo inteiro. Uma dessas soluções é a Orientação a Objetos, outra é o modelo MVC. Outras ferramentas muito interessantes para eliminar redundâncias são os recentes frameworks de desenvolvimento como o Ruby-on-Rails, o Django e o Turbogears. São assuntos que recomendamos a você que estude, você não vai se arrepender.

64 :: internacional

Julius Wiedemann Guilhermo Reis Nasceu e cresceu no Brasil, onde estudou Design e Marketing (sem terminar) até que teve a Especialista em de Informação Usabilidade. autor do Kit de Conhecimento sobre AI de oportunidade deArquitetura ir para o Japão. Trabalhouecomo designerÉde revistas e jornais até se tornar editor (http://tinyurl.com/p4j6w). Atualmente, é responsável por coordenar projetos e manutenções nos arte (e posteriormente editor) de uma editora japonesa. Em 2001, a editora alemã TASCHEN (www. websites do Banco Real. para ser o editor responsável pelas áreas de design e pop culture. Por lá, taschen.com) o contratou desenvolve o programa de títulos nas áreas de propaganda, graphic design, web, animação etc. reis@guilhermo.com J.Wiedemann@taschen.com

Aos políticos: está faltando a presença do Brasil na internet! Dessa vez, essa coluna vai ser de protesto, aliás a favor do bom uso da tecnologia para divulgar o Brasil pelo mundo. Depois de ver uma série na CNN, de uma semana sobre o país, vi que estamos perdendo a oportunidade de chegar até as pessoas através do meio que dominamos com excelência, custa pouco e tem alcance inigualável: a internet. O ponto alto da minha ira (ou melhor, o ponto baixo do programa) foi ver o moderador da CNN, Jim Clamcy, entrevistar políticos brasileiros e se dar conta do desapontador poder de comunicação desses perante uma televisão do porte como a CNN. Sem citar nomes, as entrevistas foram concedidas no Museu de Arte Contemporânea de Niterói. A dinâmica ocorreu com perguntas e respostas em inglês. Depois de ver o programa, fi quei perambulando pelo meu apartamento, pensando nas respostas que o Brasil poderia dar. No livro “Advertising Now. Online”, que saiu em janeiro, na Europa, selecionei campanhas interativas do mundo inteiro. Foram mais de 250 no total. Entre elas, estão duas que servem de exemplos fantásticos de como podemos usar a web para mandar a nossa mensagem. Uma é um site para a cidade de Montreal (www.madeinmtl.com), no Canadá, que queria colocar a disposição do mundo conteúdo sobre a cidade. Montaram um site onde o usuário pudesse explorar todos os aspectos da cidade em mais de 15 mil imagens, 400 textos, 50 horas de vídeo, além de música e curtas-metragens. Tudo montado com qualidade gráfi ca top de linha. O usuário pode procurar o que quer, através de vários métodos, seja por um mapa ou por um menu. Ele tem, à disposição, lojas, restaurantes, cultura, pontos para ver, para relaxar, para aprender etc. O site foi executado pela agência canadense Blue Sponge (www.bluesponge.com). O segundo exemplo aparece de um país que também vem dominando os prêmios internacionais na área interativa: a Suécia. O site, que se chama Stockholm The Musical (www.stockholmthemusical.com), convida você a assistir um musical onde o seu nome (ou apelido) será cantado e de acordo com as informações que você fornece. A experiência se resume em assistir um curta-metragem e, através do site, você pode reservar vôos e hotéis. O site foi, inclusive, financiado por eles mesmos, o que me leva a crer que no Brasil poderia se fazer o mesmo. O site de Stockholm foi criado pela agência FarFar (www.farfar.se), cujo fundador, Mathias Palm-Jensen, foi o presidente do Cyber Lions, no Festival Internacional de Publicidade em Cannes. Os dois site mencionados têm o inglês como idioma fundamental. O de Montreal também apresenta uma opção em francês, mas se quisermos trazer pessoas para conhecer o Brasil, estamos tratando de, basicamente, dois idiomas: inglês e espanhol. Como brasileiro vivendo fora do país por mais de dez anos, sou sempre perguntado sobre os melhores roteiros. Toda vez tenho que escrever uma lista de coisas para ver ou recomendar alguém de guia. Não seria fantástico recomendar um portal sobre o Brasil, ou sobre o Nordeste, sobre cidades

internacional :: 65

"O país está na moda pelo mundo já faz uns três ou quatro anos

“É preciso criar as casas, os prédios, as praças e principalmente as placas de sinalização.”

e até hoje ainda não temos um site oﬁcial que nos represente de maneira apropriada"

como Salvador, Belo Horizonte, Brasília, Rio de Janeiro, Manaus, Amazônia etc., onde você encontraria fotos, filmes, receitas de comidas, restaurantes, vida noturna, passeios, breve história, propostas de roteiros (inclusive, de acordo com a quantidade de dias de estadia) e muitas outras coisas? Na Europa, onde estou a quase seis anos, todas as cidades têm um site oficial. Na Alemanha, é só digitar www. frankfurt.de e você encontrará todas as informações sobre a cidade e ninguém quer te vender nenhum pacote na primeira página. Você vai até ali pela informação. O mesmo acontece se você estiver na página www.cambridge.co.uk. Muitas vezes, os sites não são sofisticados e nem têm essa proposta, mas, a partir daí, você encontra quase tudo que você quer. Se você entrar em www.salvador.com.br, vai achar um site que tem desde encontros na internet, internet grátis, pacotes de viagens etc., porém não oferece o que um turista estaria procurando em uma pesquisa básica sobre a cidade. Para não escrever, em vão, meus argumentos, fiz uma pequena pesquisa para ver o que eu realmente encontraria. As respostas não foram muito animadoras! Tentei o mesmo com quase todas as capitais de estados brasileiros e o resultado não me deixou muito animado. Mais ainda se contarmos com domínios com terminações “.COM”. Recebi, no dia 26 de dezembro, uma newsletter do AdNews (www.adnews.com.br), que noticiava que só o governo brasileiro tinha uma verba de R$ 412 milhões com publicidade. Se o governo possui essa verba apenas para anunciar as suas próprias benfeitorias, poderia muito bem criar, com apenas 2 ou 3% desse total, um portal que beneficiaria o país inteiro, criando empregos e elevando ainda mais a marca brasileira em nível internacional. O país está na moda pelo mundo já faz uns três ou quatro anos e até hoje ainda não temos um site oficial que nos represente de maneira apropriada. Um portal como esse pode funcionar também como um meio de veicular notícias boas sobre o Brasil e, em horas de crise (como a ocorrida no pré-Ano Novo, no Rio de Janeiro), poder contrabalançar com o que é veiculado de negativo fora do país. Ano novo, vida nova, site novo! O pedido aqui é simples. Com tantos talentos na internet, que inclusive exportamos, o Brasil tem de fazer bonito on-line. Eu desejo que o país tenha, em 2007, veículos de alto nível on-line para divulgar a nossa cultura, o nosso turismo, a nossa cozinha e atrair cada vez mais visitantes.

66 :: usabilidade

Robson Santos Guilhermo Reis Doutor em Design e Mestre em pela PUC-Rio, bacharel em Desenho Industrial pela ESDI/UERJ. Especialista em Arquitetura de Design Informação e Usabilidade. É autor do Kit de Conhecimento sobre AI Professor da UniverCidade eAtualmente, da PUC-Rio. Realiza pesquisa na coordenar área de ergonomia da interação (http://tinyurl.com/p4j6w). é responsável por projetoseeusabilidade manutenções nos humano-computador, além de atuar profissionalmente como designer gráfico e como designer de interfaces. websites do Banco Real. contato@robsonsantos.com reis@guilhermo.com

Fazer a vida mais fácil “Fazer a vida mais fácil”. Com esse tema, a Usability Professionals Association (UPA) realizou e estimulou a realização de diversos eventos em todo o mundo para celebrar, pela segunda vez, o dia mundial da usabilidade. O objetivo do evento é promover o valor da engenharia de usabilidade e do design centrado no usuário e foi organizado por voluntários e coordenadores em diversos países. A UPA, dessa forma, encorajou, organizou e patrocinou 36 horas de atividades em eventos locais ao redor do mundo, todos acontecendo simultaneamente no dia 14 de novembro de 2006. Na lista dos 40 países envolvidos figuram Argentina, República Tcheca, Noruega, Filipinas, Polônia, Egito, Portugal, e Brasil, entre outros. De acordo com a UPA Brasil, a importância da usabilidade não é trivial, pois está diretamente ligada a coisas importantes do dia-a-dia, tais como educação, saúde e segurança. A usabilidade, tema que há bem pouco tempo estava restrito ao meio acadêmico, já é assunto de interesse de profissionais de mídias digitais interativas e mesmo de empresas contratantes, que começam a compreender os ganhos advindos da implementação das abordagens de projeto centrado no usuário. De maneira geral, pode-se compreender a usabilidade como as características de um produto que o tornam fácil de usar e fácil de aprender. Por meio de métodos e técnicas para avaliação e projeto, é possível melhorar a efetividade e eficiência de uma interface, além de aumentar a satisfação do usuário, em uma situação específica de uso, como um caixa de auto-atendimento bancário ou um website de compras. Neste cenário, a UPA Brasil assume o objetivo social de unir projetistas e analistas de interfaces tecnológicas para constituir uma comunidade brasileira de profissionais de usabilidade. Perfil e mercado para profissionais de usabilidade Já é comum ouvir, em reuniões de projeto de websites, expressões como testes com usuários, card sorting ou recomendações ergonômicas. Também facilmente se ouvem nomes de autores como Jakob Nielsen, Donald Norman, Ben Shneiderman entre tantos outros. Esses fatos são indicadores de que começa a se estabelecer uma cultura de projeto pautada em usabilidade e com preocupação em atender às necessidades de usuários e aos requisitos da tarefa. Apesar dessa demanda por profissionais qualificados, ainda não existe uma formação específica e a formação do profissional de usabilidade é interdisciplinar, apoiada no tripé computaçãocomunicação-cognição. Qualquer que seja a origem do profissional, é importante conhecer a metodologia com profundidade e saber usá-la de forma adequada a cada caso. Além disso, o profissional em formação deve buscar equilibrar o conhecimento teórico com a prática do dia-a-dia. A crescente maturidade dos profissionais também se reflete no amadurecimento do mercado, que se pode considerar em fase de consolidação. Se, de um lado, consultores especializados e experientes ainda precisam “embutir” quase clandestinamente as avaliações

usabilidade :: 67

"É em mente que,as dopraças outroelado de uma interface, “É fundamental preciso criar aster casas, os prédios, principalmente as placashá um usuário, um cliente, um fornecedor ou um colaborador" de sinalização.”

de usabilidade em websites, por outro, a aculturação das empresas contratantes também traz bons resultados. Com esta abordagem é possível fazer com que as empresas entendam cada vez mais os benefícios da usabilidade e os profissionais contratantes passam a conhecer os diferentes métodos e as variáveis envolvidas em cada um deles, o que facilita todo o processo, desde a negociação até a realização da consultoria. Este quadro pode ser resumido ao encararmos que o mercado é sólido na qualidade e na quantidade de fornecedores, mas ainda em processo de convencimento dos clientes. Profissionais de usabilidade precisam estar atentos para os benefícios que a aplicação dos métodos e técnicas traz para o negócio dos clientes. Além de ter na ponta da língua argumentos em favor da aplicação da abordagem de projeto centrado no usuário, é importante saber negociar em termos de benefícios e de retorno de investimento. Dentre os principais benefícios podem ser destacados a inclusão de novos consumidores, a redução de custos com atendimento ao cliente, a fidelização, a identificação de novas oportunidades de negócio, sem esquecer-se da redução de custos com retrabalho e redução de custos associados a erros de operação. Além disso, é importante considerar que as técnicas de usabilidade trazem resultados objetivos e o olhar matemático para o terreno da comunicação na internet, o que colabora para aproximar a linguagem do consultor da linguagem do cliente, preocupado com ganhos advindos de seus investimentos. É fundamental ter em mente que, do outro lado de uma interface, há um usuário, um cliente, um fornecedor ou um colaborador. Quanto melhor se conhecem os comportamentos e aspirações destes diferentes personagens, mais efetivo e eficiente se torna a interação com dispositivos projetados e mais relevantes serão os resultados, independentemente de qual seja a natureza do sistema. O Dia Mundial da Usabilidade e a formação da UPA Brasil nos colocam alinhados aos profissionais de várias partes do mundo, que investem em conhecimento e se preocupam com o diálogo interdisciplinar necessário para a formação de massa crítica e para consolidação do mercado e da formação de cultura empresarial receptiva à atividade profissional de usabilidade no Brasil. Colaboraram: Bruno Rodrigues (Petrobras), Lucia Filgueiras (USP) e Sergio Carvalho (Sirius Interativa)

68 :: marketing

René de Paula Jr. Diretor de produtos do Yahoo Brasil. É profissional de internet desde 1996, passou pelas maiores agências e empresas do país: Wunderman, AlmapBBDO, AgênciaClick, Banco Real ABN AMRO. É criador da “usina. com”, portal focado no mundo on-line, e do “radinho de pilha” (www.radinhodepilha.com), comunidade de profissionais da área. rene@usina.com

Pé no chão e pé na tábua Vocês conhecem Lagos, Nigéria? Eu conhecia de ouvido: ouvi a respeito num podcast semanas atrás. Ontem, conheci um pouco mais lendo um artigo na revista Piauí, e descobri então que não quero conhecer Lagos tão cedo. Ao menos... não a pé :) Eu explico: o podcast bacana falava sobre urbanismo e sobre o quanto o mundo estava se favelizando. As maiores cidades do mundo (Lagos, por exemplo), hoje, não são mais cidades, são outra coisa, são mega-favelas fervilhantes. O urbanista falava disso com um certo fascínio, dizia que estavam surgindo ali novos paradigmas, novas formas de convívio humano, de empreendedorismo informal e de poder político. Ou seja, o cara não estava horrorizado, estava encantado. Como o urbanista falava com paixão, eu me empolguei também, embora “cum grano salis”, com uma pitada saudável de desconfiança. Quando li ontem o artigo na Piauí, a pitada de sal ganhou outros sabores: a descrição da miséria era tão vívida, tão pungente que a fumaça das serrarias, o cheiro de óleo diesel, o lixo e o fedor quase saltavam do texto. Eu fiquei desconcertado. Quem tinha razão, afinal? O urbanista idealista ou o jornalista pé-no-chão? Well, é tudo uma questão de ponto de vista... literalmente :) No artigo, estava a pista: muitos especialistas e urbanistas vão conhecer Lagos, mas ficam tão apavorados que passam direto dos carros blindados para helicópteros e, de lá de cima, o favelão parece fascinante mesmo, fervilhando de atividade humana, improviso e vontade de sobreviver e vencer. Vista de longe, qualquer coisa é inspiradora. De perto, porém, é outra história. Rio, São Paulo, vocês sabem como é. Ok, ok, mas por que estou eu aqui falando de românticos e realistas? Porque na nossa área não é diferente: o que não falta são gurus sobrevoando o digimundo de helicóptero e dizendo maravilhas. Sai um novo gadget? Lindo! Maravilhoso! Web 2.0? Sensacional! Milagroso! Conteúdo gerado pelo usuário? E-commerce? Comunidades? Lindo, lindo, lindo! Ok, eu também acho lindo e batalho diariamente por tudo isso. Mas como meu lugar é no front sempre, sei que nem tudo são flores e que para a mágica acontecer é preciso de um monte de ingredientes raros. É por isso que estou sempre aqui, nesta revista e nos meus podcasts na internet batendo na mesma tecla: tecnologia por si só não garante nada. Nosso trabalho não são bits e bytes, nosso trabalho é tornar a vida das pessoas mais plena, mais rica, mais fecunda. Nossa grande questão é COMO ser relevante, COMO ser útil, COMO conquistar a confiança e COMO trazer à tona o melhor de cada um de nós. Nós não estamos desenhando interfaces, apenas. Nem estamos programando aplicativos. Estamos abrindo novos horizontes para a experiência humana. E como tornar a vida humana mais digna através do nosso trabalho diário? Eu respondo: fazendo as perguntas corretas. E o melhor começo, como já disse em outras ocasiões, é perguntar... COMO.

marketing :: 69

"Nossa grande questão é COMO ser relevante, COMO ser útil, COMO conquistar a confiança e COMO trazer à tona o melhor de cada um de nós"

Ao invés de perguntar: - Que funcionalidades, conteúdos e serviços eu devo "entuchar" nesse site? Pergunte: - Como o usuário resolve seus problemas? - Como podemos ajudar o usuário a resolver seus problemas? - Como mostrar para o usuário que podemos ajudá-lo? - Como facilitar a adoção do que estamos oferecendo? - Como podemos ajudar o usuário a se sentir mais autônomo, mais seguro, mais pleno? - Como vamos saber se o usuário está ou não satisfeito? - Como podemos transformar o usuário em um advogado da nossa marca? E por aí vai. Querem ver um bom exemplo? Gracenote. Quando você coloca um CD e o iTunes reconhece o álbum, faixas e letras, é porque ele consultou o serviço da Gracenote, que tem um banco de dados de dezenas de milhões de músicas, e apresentou para você a informação necessária. A Gracenote é quase invisível, discretíssima, mas é fantástica. Ouvi uma entrevista com eles num podcast. Os planos são bárbaros: no futuro você vai ter dezenas de milhares de músicas no aparelho do teu carro, mas para escolher o que ouvir (sem atropelar ninguém) vai bastar dizer “quero ouvir Rolling Stones”. Essa instrução vai gerar uma busca na Gracenote que vai gerar uma playlist para você. Ou você dirá: quero mais músicas desse tipo aí, e a Gracenote vai gerar uma playlist bacana. Lembrou de um trecho de uma canção? Diga o refrão e a Gracenote te dirá que música é. Está tocando uma canção no rádio e você gostou? Coloque o seu celular próximo do alto-falante, aperte um botão e a Gracenote vai reconhecer que música é e te dar a ficha completa. A Gracenote é um site? Não necessariamente. Um software? Mais do que isso. Mas uma coisa a Gracenote faz: ela torna nossa relação com a música muito mais rica, mais fecunda, mais humana. Eles fizeram as perguntas certas. E a resposta só pode ser um mundo melhor.

70 :: webwriting

Bruno Rodrigues Autor do livro “Webwriting - Redação & Informação para a web”, da editora Brasport. É consultor de informação para a mídia digital da Petrobras e titular da primeira coluna sobre Webwriting do mundo, hoje veiculada na revista on-line “Webinsider”. Ministra treinamentos de Webwriting e Arquitetura da Informação no Brasil e no exterior. bruno-rodrigues@uol.com.br

666, o número da internet Experimente: ao longo de uma semana, acompanhe os jornais com outros olhos. Conte quantas vezes a internet é apontada como terreno propício para o exercício do que há de pior no ser humano, do tráfico de drogas à pedofilia. No mínimo, a Rede é descrita como palco para novos costumes bizarros e curiosos, como flertar, ainda que à distância, uma ilustre desconhecida, ou passar dias imerso em uma comunidade virtual como o “Second Life”. Tenho a impressão de que, por pouco, sociedade e mídia não proclamam a internet como “criação do demônio” e seitas mais radicais não queimam computadores e laptops em grandes fogueiras. Ao longe, observando tudo, estaria - em êxtase! - uma multidão de marmanjos, pais de meninos e adolescentes, defensores ferrenhos, entre outras coisas, de que "lugar de homem é na rua"... Esta visão estrábica da internet não surge na mídia e na cabeça dos pais à toa. É como se precisássemos de uma “consciência coletiva” nos alertando sobre o perigo que o “novo”, ao mesmo tempo fascinante e ameaçador, oferece - uma versão adulta do Grilo Falante. É tudo muito assustador: o pânico vai do comércio eletrônico (“vão roubar o número do meu cartão de crédito!”) aos games (“meu filho não vai mais sair de casa!”), dos relacionamentos (“o que vale é olho no olho!”) aos e-books (“preciso pegar nos livros que leio!”). Haja coragem e discernimento para não perder o bonde da história - é preciso confiar na Rede com um olho fechado e o outro bem aberto. Muitos passam por isso quase todo o dia. Eu, que vivo de (e na) internet, me peguei outro dia numa encruzilhada daquelas. Sempre fui defensor do uso que os adolescentes fazem do português na web, ao criarem novas palavras baseadas mais em seus sons e menos no que está no dicionário. O que não seria fonte de dor de cabeça para os professores, na minha opinião. Ou seja, o jovem saberia muito bem onde utilizar o “vc” ou o “você”. No Orkut, vale o novo; na redação da escola, o que Houaiss e Aurélio fazem questão de nos lembrar, sempre. Seria simples assim. E foi, no início. Quando o MSN e os “torpedos” ainda não faziam parte do dia-a-dia do adolescente - e da criança, também -, quando a atividade de se comunicar constantemente pela escrita pela Rede ainda era novidade, havia uma clara distinção do que era português e o que era “da web”. Outro dia, ao conversar com duas professoras de ensino médio, fiquei de queixo caído: agora é um Deus nos acuda. As provas vivem inundadas de “vc’s”, e o mais delicado, elas me explicaram, é que - óbvio - não é de propósito... Mas, o que fazer se é este o português que crianças e jovens usam para se comunicar hoje em dia pela Rede? Dá agonia e uma profunda insegurança. Uma delas, à beira da aposentadoria, disse, brincando, ter saudades “de quando a única ameaça à língua era a gíria” - e nada afetava a escrita.

webwriting :: 71

"Tenho a impressão de que, por pouco, sociedade e mídia não proclamam a internet como 'criação do demônio"

É hora de parar e pensar, então. No Brasil, a língua portuguesa já passou por mais de uma reforma. Por que “pharmácia” virou “farmácia”? Porque ninguém lia “parmácia”, oras. Até hoje me pergunto por que “caixa” não é “caicha”, ou vice-versa... Pela regra, apenas? Nosso “cadê” está condenado a ser “c-a-d-ê” por toda a eternidade, ou um dia escreveremos “kd vc”? A língua não retrata o que o povo fala? Ou o que a regra nos impõe? Mas aí bate o medo do desconhecido, do descontrolado, do que até ontem era absurdo. Arranquem rápido os computadores dos quartos dos filhos: à fogueira com eles, antes que seja tarde demais. Porque lugar de língua é no dicionário. Ou não?

72 :: 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. luli@luli.com.br

A grama do vizinho é (sempre) mais verde Claro que é: ela é artificial Há uma tendência natural para desvalorizarmos o que temos em função de soluções “mágicas” que desconhecemos. Meninos sonham ser bombeiros, meninas acham incrível ser bailarinas e não há adulto saudável que não tenha pensado em ter outra profissão – ou morar em outro país. À medida que crescem, as crianças percebem que enfrentar fogo e calos nos pés não é necessariamente uma boa opção, enquanto os adultos, coitados, continuam a acreditar em Papai Noel. A internet ajuda tornar essa ilusão mais palpável. Com a aceleração dos processos e da comunicação entre pessoas e empresas, a mobilidade deixou de ser uma fantasia para se tornar uma realidade. Trabalhar fora do país já não é mais coisa de jogador de futebol, nem é preciso ser multimilionário para se fazer um curso no estrangeiro, ainda mais se for on-line. É cada vez mais comum ouvir amigos com clientes em outros fusos horários ou saber de um ex-colega que foi passar uma temporada no Oriente Médio. Toda essa transitoriedade deixa muitos sem pontos de referência, e causa reações estranhas. Talvez a mais visível delas seja o crescente desconforto que se sente com relação às posses, carreira, relações. A Organização Mundial de Saúde alerta que, em um futuro próximo, a depressão será uma pandemia com mais vítimas que AIDS, SARS, Ebola ou Câncer. O tão falado “progresso”, que trouxe velocidade e variedade em uma escala admirável, parece ter perdido o foco. Na busca pela satisfação das necessidades, ele acabou por criar novos desejos que, como algumas bactérias de laboratório, são resistentes a tudo que conhecemos. Todos nós somos culpados em parte. Profissionais de comunicação são criadores de desejos, consumidos por todos, inclusive (e principalmente) por quem os cria. Afinal de contas, quem não quer um iPhone? Ou um Nintendo Wii, para não falar em Ferraris ou Armanis? A indústria da comunicação, de jornais a livros e filmes, adora explorar a história de pobres diabos que tinham de tudo – uma boa família, boa casa, comida farta e relações quase saudáveis – e colocaram tudo a perder por uma fantasia que só era real na cabeça deles. Essas pessoas, patéticas em sua maioria, são espelhos amplificados de gente que todos nós conhecemos. Pensei agora no filme “Beleza Americana”, mas poderia ter pensado em “Encontros e desencontros” ou em qualquer filme recente com o Bill Murray. Ou em Michael Jackson, Tom Cruise, Donald Trump... Cada vez que trabalho no exterior, percebo que um mercado estrangeiro é só um trabalho muito, muito longe de casa. As pessoas são as mesmas e tendem a fazer o mesmo, tanto para o bem como para o mal. A distância torna os erros passados invisíveis, mas como o ambiente é novo, é certo que se cometerá novos erros (somos humanos, lembra?). Esses novos erros serão

webdesign :: 73

"Proﬁssionais de comunicação são criadores de desejos, consumidos por todos, inclusive (e principalmente) por quem os cria"

julgados por desconhecidos, que não levarão em conta o atenuante de sua história pregressa. Algumas vezes fui trabalhar do outro lado do mundo só para constatar que o trabalho que eu buscava estava a duas quadras da minha casa. Mas daí eu já tinha mudado de casa. Acredito que o mesmo valha quando se muda de emprego, de profissão, religião, família ou cidade, mesmo dentro do Brasil. Por mais belas que sejam as promessas, o paraíso não existe. Sair significa recomeçar, reconstruir. Apagar o layout usado e partir da página em branco. Para uma atitude tão radical assim, é preciso pesar com muito cuidado se realmente vale tanto a pena virar as costas para tudo o que já foi construído ou se o que se promete é tão melhor do que o que já se tem. Mas você já sabe disso. Afinal, trabalha com design, não? ERRATA: O leitor Daniel Barbosa me deu um puxão de orelha com muita propriedade: quem pintou o quadro com um cachimbo e escreveu “isto não é um cachimbo” não foi Marcel Duchamp, mas René Magritte.

Promoção assine um plano de hospedagem efetue o pagamento anual e ganhe um pendrive ou uma webcam. Conﬁra o regulamento em nosso site. www.siweb.com.br tel: (11) 4063.8047 info@siweb.com.br

Hospedagem de Sites, Revenda de Hospedagem e Registro de Domínios, tecnologia ASP, PHP e .net no mesmo plano, teste grátis por 30 dias e comprove a qualidade de nossa infra-estrutura e atendimento. www.redehost.com.br tel: Rio Grande do Sul (51) 3042.2030 São Paulo (11) 4063.7574 Rio de Janeiro (21) 3527.0848 comercial@redehost.com.br

Parceria Tehospedo e você, Designer: a cada indicação você ganha 2 meses grátis para seu site, a cada 10, um site hospedado gratuitamente. Consulte mais vantagens. www.tehospedo.com.br/designer tel: RS (51) 3227.7727 / capitais de SP/RJ/MG/DF/ PR/SC 4062.1432, GO (62) 4052.1432 comercial@tehospedo.com.br

ZARP HOST Empresa de respeito, credibilidade, honestidade, consolidada na carteira de clientes, atendimento e serviços elogiados, valores justos, sua satisfação aqui e garantida. Hospedagem e registro de sites, planos individuais e revendas. www.datahosting.com.br tel: (11) 6951.2954 - (11) 6939.7305

Hospedagem de Sites Oferecemos registro de domínios e hospedagem em ASP, PHP e CGI. Planos a partir de R$ 9,90. www.zarphost.com.br contato@zarphost.com.br

atendimento@datahosting.com.br

Hospedagem de sites com infra-estrutura de altíssimo nível, planos a partir de R$ 8,90/mês. HTML, PHP, CGI, Flash, FrontPage, DreamWeaver, MySql, e-mail com anti-vírus/spam, suporte 24x7 entre outros recursos. www.hphost.com.br tel: (11) 6684.9597 info@hphost.com.br

A Informática Online.Net está preparada para hospedar seu site, nosso DataCenter possui servidores de última geração, nossos backbones sempre irão propiciar ao seu visitante uma alta velocidade e estabilidade de conexão. www.informaticasp.com.br tel: (11) 6944.2566 sac@informaticasp.com.br

Oferece hospedagem proﬁssional linux e windows com recursos grátis como loja virtual, blog, enquete, boleto. Possui planos de revenda ideais para webdesigners. Suporte qualiﬁcado 24 horas e registro de domínios. www.portal123.com/ tel: Minas Gerais (31) 3761.2253 São Paulo (11) 4052.9253 suporte@portal123.com.br

E-mail de 1GB, webmail com leitor de notícias e disco virtual. Soluções completas para webdesigners e desenvolvedores. Qualidade, estabilidade e segurança. www.speedhost.com.br tel: São Paulo (11) 5644-1047 Rio de Janeiro (21) 3523-0387 Paraná (41) 3015-3077

Hospede seu site com MYSQL 5.0 grátis, suporte integrado a .NET 2.0, PHP 5.2 e ASP no mesmo ambiente. Conheça também nosso plano de parceiro comissionado e ganhe comissões mensais de até 25%. www.iphotel.com.br tel: (11) 6971.0438

Registre seu domínio internacional .COM .NET .ORG .INFO .BIZ entre outras extensões com preços a partir de R$ 15,00 e conte com um completo painel de controle para gerenciar múltiplos domínios. www.ipdominios.com.br tel: (11) 6971.0438

Hospedagem de sites em plataforma Linux e Windows. Registro gratuito de domínios internacionais, acesse o nosso site e participe de nossa promoção. www.rjhost.com.br tel: (21) 2577.5545 vendas@rjhost.com.br

A EHB(ExtremeHostBrasil) trabalha com Hospedagem PHP ou ASP com servidores de ultima geração, utilizando Datacenters renomados para garantir o máximo de estabilidade em seu site. www.extremehostbrasil.com tel:(47)8405.4353 fale_conosco@extremehostbrasil.com

1) Alta Disponibilidade, Datacenter Brasil Telecom. 2) Link no Brasil, alta velocidade e alto desempenho. 3) Dotnet1/2, PHP4/5, ambiente integrado, o cliente escolhe. 4) Controle Total, você mesmo controla tudo pelo painel. 5) Suporte telefonico exclusivo, direto e sem intermediarios. www.develsoft.com.br/webhost tel: (16) 3618.1493 ou (16) 8123.4599

R$ 5 mensais ou R$ 50 ao ano. 800MB de espaço em disco, 20GB de transferência,PHP, MySQL, Emails e subdomínios ilimitados.Também registramos seu domínio. Atendimento imediato pelo MSN. www.triangulohost.com.br tel: (34) 3316-2433 hostmaster@triangulohost.com.br

Hospedagem de Sites com segurança e estabilidade total para os clientes mais exigentes nas plataformas Linux e Windows. Infra-estrutura de altíssima qualidade. Planos de Revenda e VPS. www.ativahost.com tel: (21) 2238-3407 vendas@ativahost.com

Hospedagem de Sites com infra-estrutura no Brasil, 6 anos no mercado, multi-serviços para você e seus clientes. Planos Windows e Linux, antivírus, anti-spam, banco de dados, relatórios de acesso, disponibilidade de 99,5%. www.creativehost.com.br tel: (11) 3849.1166 atendimento@creativehost.com.br

Para anunciar nesta seção, envie um e-mail para publicidade@arteccom.com.br, com o título "busca host" ou ligue para (21) 2253.0596