Ed34

Page 1

outubro 2006 :: ano 3 :: n 34 :: www.revistawebdesign.com.br

outubro 2006 :: ano 3 :: nº 34 :: www.revistawebdesign.com.br

DESIGN & ARTE

Ampliando suas fontes de inspiração

Webdesign

Reportagem: Conheça as transformações ocorridas no design para web Estudo de caso: A era dos sites como estratégia de branding Especial: Cobertura do Fórum Internacional de Design e Tecnologia Digital

R$ 8,90 I SSN 1806 - 0099

9 771806 009009

00034

E D I T O R A




4 :: quem somos

Editorial “Vamos lá, Picasso, essa tela é pra ontem!!!”

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

Nossa última reunião de pauta aqui na Arteccom foi bastante rica e estimulante: falaríamos sobre arte nesta edição! É um assunto

Direção de Redação Luis Rocha luis@arteccom.com.br

Criação e Diagramação Camila Oliveira

C o m o C a ro l i n a L e s l i e , d a A g ê n c i a C l i c k ( p á g i n a 3 9 ) , e x p l i c a bem que a arte não tem que agradar nenhum público e a função do designer é justamente encontrar soluções ou, simplesmente, “agradar” este mesmo público, por que design e arte estão tão próximos, andam tão juntos? A ponto do designer, numa agência de

camila@arteccom.com.br

Leandro Camacho leandro@arteccom.com.br

Ilustração Beto Vieira beto@arteccom.com.br

Publicidade Bruno Pettendorfer Débora Carvalho

publicidade, ser chamado de “diretor de arte”? Na minha cabeça, fico imaginando um diretor de arte mais ou menos assim: - “Vamos lá, Picasso, essa tela é pra ontem, viu?” Brincadeiras à parte, acho que um designer deve, ao invés de

publicidade@arteccom.com.br

Gerência de Tecnologia Fabio Pinheiro fabio@arteccom.com.br

Financeiro Cristiane Dalmati cristiane@arteccom.com.br

se sentir um artista, conhecer muito de arte e interpretá-la como f o r m a s d e e x p re s s ã o . U m a r t i s t a , n o s e u m o m e n t o d e c r i a ç ã o ,

Atendimento e Assinaturas Luanna Daumas luanna@arteccom.com.br

chora, ri, sofre, sente angústia e, finalmente, encontra uma maneira de extravasar seus sentimentos, através de formas, cores, sons, ocupação do espaço... Um designer também pode chorar, sorrir, sofrer, se o objetivo for encontrar soluções inovadoras para seus clientes. Ou seja, a

A Arteccom é uma empresa de design, especializada na criação de sites e responsável pelos seguintes projetos: Revista Webdesign :: www.arteccom.com.br/webdesign Curso Web para Designers :: www.arteccom.com.br/curso Encontro de Web Design :: www.arteccom.com.br/encontro Portal Banana Design :: www.bananadesign.com.br Projeto Social Magê-Malien :: www.arteccom.com.br/ong

arte deve servir apenas como uma grande fonte de inspiração. E, com esse objetivo, preparamos várias páginas para a sua imersão

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

no mundo da arte. Produção gráfica

Boa leitura.

www.prolgrafica.com.br

Adriana Melo

Distribuição www.chinaglia.com.br

9

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

interessante e essencial.


menu :: 5

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

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

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: Cappuccino/HZTA pág. 18 freelancer: Renato Loose

matéria de capa pág. 20 entrevista: Design e arte pág. 28 reportagem: Design na web

e-mais pág. 38 debate: Adaptar-se pág. 44 e-mais: Virais na web pág. 48 especial: FIND pág. 51 estudo de caso: Bicmusic pág. 54 tecnologia na web: CSS Hacks pág. 56 tutorial: Caminhando pelo HTML - Parte 5

com a palavra pág. 58 mercado de trabalho: Cesar Paz pág. 60 marketing: René de Paula Jr. pág. 62 bula da Catunda: Marcela Catunda pág. 64 webdesign: Luli Radfahrer


6 :: emails

na edição nº15, de março de 2005. Uma boa pedida é acessar o site do

na web Assunto: Direito Flash, ActionScript...

IDEAFIXA como uma das principais referências para o trabalho de

projeto do SERPRO, desenvolvido

Que tal uma reportagem a

designers. Todo mês vamos incluir

justamente sobre esta área (http://

respeito do que há de novo e

alguma publicação que pode servir

www.serpro.gov.br/acessibilidade).

“realmente útil” no ActionScript

como referência no trabalho criativo

3.0 do Adobe Flash 9? Ou algo

de nossos leitores.

do tipo “o que seria da web

Assunto: Direito Política na deweb privacidade nano web Assunto: Direito Trabalho exterior Olá, pessoal da minha revista

sem o Adobe Flash”, quais suas contribuições, seus problemas, seu

predileta! Como acompanho

Gostei muito da Coleção Brasil

crescimento na utilização em web

vocês há um bom tempo (desde

Design, mas tenho uma dúvida

sites, o que é viável e inviável.

sua estréia, diga-se de passagem),

em relação aos profissionais que

Parabéns pelo canal aberto para

gostaria de sugerir um tópico

atuam no exterior. Levando em

sugestões.

super importante e que a maioria

consideração a dificuldade para

dos sites deve ter: a Política de

conseguir um visto de trabalho

Misael Moura misael_mmm@hotmail.com

Privacidade. Como constituí-la,

permanente no exterior, gostaria

que benefícios e qual segurança

de saber como estes profissionais

Oi, Misael.

ela fornece ao site. É isso.

conseguem a sua permanência

Ótimas sugestões! Estes temas

Obrigada!

no exterior de forma legal,

são boas pautas para as seções

Sou do colégio FECAP e estou

Fernanda Prevedello fernandaprevedello@gmail.com

para realizar trabalhos e se

Tecnologia na Web e Tutorial.

produzindo um trabalho de

estabelecerem em empresas sem

Pensamos em procurar algum

conclusão de curso. Gostaria de

problemas com passaportes e

saber se poderiam nos ajudar e

Ótima sugestão, tanto é que ela

profissional fera em ActionScript

extradições de estrangeiros?

nos enviar os nomes das maiores

se tornou tema da coluna “Direito

para desenvolver um tutorial para a

Leandro Guedes chborb@hotmail.com

revista. O que acha? Abraços!

empresas presentes no mercado

na web”. Vá até a página 10 e boa

de web. Obrigada.

leitura!

Janaina Lume jana.lume@gmail.com

Durante o workshop Conexão (www.arteccom.com.br/conexao), Assunto: Acessibilidade

Direito na web do Assunto: Maiores empresas mercado

Assunto: Referências Direito na web Como vai, Janaína? Sobre sua

André Matarazzo respondeu justamente esta questão. Segundo

Sugestão de pauta: a revista

dúvida: qual o segmento do

Gostaria de saber se em alguma

ele, é bom sair do Brasil com o

digital internacional (feita por

mercado web que você quer

edição vocês já fizeram matérias

visto resolvido. Se você puder

brasileiros) IDEAFIXA (www.

informações (provedores de

sobre acessibilidade na web.

conseguir dupla cidadania, melhor

ideafixa.com). Se valer a pena,

hospedagem, agências interativas

Estou fazendo meu trabalho de

ainda. Geralmente, as grandes

entrem em contato! Obrigada.

etc.)? Se forem os provedores de

conclusão do curso de Publicidade

agências procuram ajudar os

hospedagem, uma boa pedida

e Propaganda e estou levantando

profissionais estrangeiros a resolver

Janara Lopes janara@gmail.com

o máximo de informações

este problema.

Obrigado pela indicação,

(www.hostmapper.com.br/ranking-

Janara. Na verdade, já tínhamos

hospedagem-de-sites.html), que

conhecimento do trabalho de

aponta as 50 maiores empresas.

vocês, excelente por sinal! Em

Sobre as agências, procure entrar

setembro, lançamos uma nova

em contato com o pessoal da

seção (Post-it) e colocamos a

AGADi (www.agadi.com.br) e

possíveis. Obrigado! Fernando Leite dodo@canecadigital.com.br

Fizemos sim! A reportagem saiu

é acessar o site da Hostmapper

APADI (www.apadi.com.br).

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



8 :: métricas e mercado

Média Salarial Brasil - Agosto/2006 Analista Júnior Desenvolvimento de Internet / Sistemas Web

2.455,00

(Fonte: 195 respondentes)

Analista Pleno Desenvolvimento de Internet / Sistemas Web

3.753,00

(Fonte: 329 respondentes)

Analista Sênior Desenvolvimento de Internet / Sistemas Web

4.830,00

(Fonte: 335 respondentes)

Analista Programador(a) Web

2.866,00

(Fonte: 223 respondentes)

Coordenador(a) de Projetos Web

5.852,00

(Fonte: 180 respondentes)

Editor/Produtor de Conteúdo Web

2.456,00

(Fonte: 40 respondentes)

Webdesigner Estagiário

584,00

(Fonte: 112 respondentes)

Webdesigner Trainee

1.418,00

(Fonte: 87 respondentes)

Webdesigner

2.303,00

(Fonte: 177 respondentes)

Web Development

3.422,00

(Fonte: 46 respondentes)

Webmaster

2.442,00

(Fonte: 183 respondentes)

Fonte: 20º Edição da Pesquisa Salarial Catho (www.catho.com.br)

20h39min

Vídeos e filmes

Esse é o tempo, em termos de horas navegadas no domicílio,

Pesquisa aponta um aumento de 21% no número de in-

dos usuários brasileiros. O Brasil é o primeiro colocado na cate-

ternautas residenciais que acessaram sites de vídeos e

goria, ficando a frente de países como Japão, EUA e França.

filmes em julho de 2006. Em junho, foram 3,4 milhões de

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

usuários únicos domiciliares. Segundo o Ibope, o maior acesso à banda larga tem incentivado um maior consumo

52%

... dos usuários corporativos serão depen-

de conteúdo áudio-visual.

dentes da prática de mobilidade para os

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

próximos dois anos, segundo previsão da Associação Brasileira de e-business. O celular foi considerado o dispositivo móvel mais adequado. Fonte: Associação Brasileira de e-business (www.ebusinessbrasil.com.br)

Você utiliza CSS Hacks para a criação de um site? Total de votos: 272 Sim - 64%

R$ 1 bilhão e 750 milhões

Não - 36%

Este foi o faturamento total do comércio eletrônico nacio-

acesse e participe!

nal, nos seis primeiros meses de 2006. O índice de crescimento nominal foi de 79%. No mesmo período de 2005, foram apurados 974 milhões. Fonte: Web Shoppers – 14ª Edição (www.webshoppers.com.br)

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

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 YouTube começa a reaver ‘dindim’

M T V s e g u e o n d a d o Yo u Tu b e e l a n ç a O v e rd r i v e ? Acho que não... Notícia da Folha Online (http://www1.folha.uol.com.br/ folha/informatica/ult124u20504.

Páginas especiais para artistas como Paris Hilton e comerciais em vídeo são estratégias do maior site de vídeos do mundo para tentar começar a equilibrar seus gastos de cerca de US$ 1 mi mensais, só em tráfego de dados. O site, inaugurado em fevereiro de 2005, é o maior fenômeno de audiência do mundo, servindo mais de 100 milhões de vídeos por dia e efetivamente ameaça uma série de modelos já estabelecidos. A questão é ver em quanto tempo e de que forma ele vai encontrar seu ponto de equilíbrio financeiro e se tornar um verdadeiro negócio rentável. Leia as notícias: http://www.techcrunch.com/2006/08/22/paris-hilton-storms-youtube/ e http://www.bluebus.com.br/show. php?p=1&id=71407.

Google’s Click-to-call: do search ao telefone em um click

shtml) fala do lançamento do MTV Overdrive (só para quem usa Windows e tem o Window Media Player - http://mtv.terra.com br/ mtvoverdrive/) no Brasil. O site, que já existe nos Estados Unidos há um ano, seria a resposta da MTV para o sucesso do YouTube que, recentemente, anunciou que pretende ter em seu acervo, todos os videoclipes já feitos no mundo. Fui conferir o novo site e dei de cara com problemas de configuração, DRMs, incompatibilidades com browser, Macintosh etc. Bater no YouTube já saindo de cara com tantas restrições? I don’t think so... FaleBenQ encerra concurso com 100 vídeos O concurso ‘FaleBenQ’ (www.falebenq.com.br), criado pela 10’Minutos Interactive para a marca taiwanesa de eletrônicos recém-chegada ao

Direto do blog do Marcelo Sant’Iago (http://poucas-eboas.blogspot.com): o novo sistema de ‘click-to-call’ que o Google está apresentando e que deve estar disponível no Brasil em breve. Ao pesquisar um assunto no Google e encontrar um anúncio pago com um ícone de telefone ao lado, será possível clicar e receber uma ligação imediata do anunciante. A junção “internet+telefone” seria risível e impensável oito ou dez anos atrás. A maioria das conexões era discada e muito pouca gente tinha celular. Hoje em dia faz todo sentido. Teste o ‘click-to-call’ (http://tinyurl.com/zkpza).

Brasil, foi encerrado no final de agosto contando com a participação de mais de 100 vídeos criados por usuários com o objetivo de ensinar a falar ‘BenQ’ (‘benquíu’). Desde vídeos simples, criados com webcam, até animações elaboradas em desenho animado participaram do projeto, em que os usuários colocavam suas criações no YouTube e então enviavam os vídeos para o site FaleBenQ. Até a data, os vídeos já haviam sido visualizados mais de 200 mil vezes.


10 :: direito na web

Particularidades de uma Política de Privacidade Como constituí-la, que benefícios e qual segurança ela fornece ao site? Fernanda Prevedello (fernandaprevedello@gmail.com)

Em tempos de alto valor da “infor-

sobre quais informações serão compartilha-

mação” (senha pessoal, dados cadastrais,

das, qual a segurança contra invasões e apro-

hábitos de navegação, compras efetuadas,

priações indevidas, quais as áreas de acesso

número de cartão de crédito etc.), é natural

restrito, quais as situações e os procedimentos

que os proprietários de websites cada vez se

para liberar informações às autoridades, quais

preocupem mais quanto a alegações de vio-

conhecimentos e dados serão considerados

lação de privacidade, especialmente quando

como segredos comerciais, qual será o esco-

elas são acompanhadas de pretensão de in-

po de atividades passíveis de monitoramento

denizações, enquadramento criminal, habe-

eletrônico, além de, preferencialmente, um

com Mestrado na USP e cursos

as data etc. O tema está em evidência não

campo em branco para o internauta clicar caso

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

apenas em razão do noticiário envolvendo a

aceite receber e-mail marketing.

Gilberto Martins de Almeida Advogado formado na PUC/RJ,

Gerente Jurídico da IBM, onde trabalhou por 11 anos, no Brasil e nos EUA. Sócio de Martins de Almeida - Advogados, escritório especializado. Envie sua dúvida para: redacao@arteccom.com.br

Google (Orkut) e o Ministério Público.

E o que ela não deve conter? Regras

Mas, afinal, o que vem a ser uma Po-

conflitantes com as do Termo de Uso ou com

lítica de Privacidade? Legalmente, é uma

outras normas ou práticas do site, informe

estipulação unilateral que funciona como

inverídico sobre sigilo ou sobre não uso co-

contrato de adesão para os que freqüen-

mercial de dados, promessa não cumprida de

tem o website que a tenha adotado. Como

monitoramento e de segurança são apenas

contrato de adesão, há uma parte em que

alguns exemplos do que, infelizmente, por

se tem liberdade para definir regras a se-

desconhecimento das implicações legais, ain-

rem seguidas pelos visitantes, e há outra

da grassa no mercado.

parte em que o contrato não pode contrariar a lei sob pena de ser nulo.

Os benefícios que ela proporciona são, em primeiro lugar, de evitar mal-entendidos

A Política de Privacidade é composta

e expectativas equivocadas, ao esclarecer

de quê? Isso depende, em primeiro lugar,

claramente quais são as regras aplicáveis, e

do tipo de website, público-alvo, objetivos

em segundo lugar, de proteger a privacidade

comerciais, necessidades de segurança,

do próprio site e das pessoas que o freqüen-

dentre outros fatores a serem considera-

tam, na medida em que previne responsabili-

dos sob medida, caso a caso. Em assuntos

zação cível ou criminal. Terceiro, legitima, nas

de direito de privacidade, a palavra-chave

condições que especifica, o uso de cookies,

é proporcionalidade. Portanto, essa “cus-

web bugs, e envio de spam, contribuindo

tomização” é fundamental, sob pena de

para a sustentação comercial e econômica

a omissão de um item, ou a incompatibi-

do site, de forma legal.

lidade de outro, fazerem ruir a Política. Ou seja, desconfie de modelos pré-prontos.

Como se vê, Políticas de Privacidade são tudo, menos “política”. No fundo, são

À parte as adaptações individuais ne-

um equilíbrio entre direitos e interesses

cessárias, o conteúdo básico de uma Política

opostos, que costuma servir bem quando o

de Privacidade pode incluir regras e avisos

trabalho é de alfaiataria.


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 Peixe Grande entra na fase de votação Se os políticos entram, neste mês, na reta final de suas campanhas eleitorais, outubro representa também o início da corrida para as agências e os profissionais freelancers buscarem votos que vão garantir lugar na fase final do “III Concurso Peixe Grande”. Entre no site www.arteccom.com.br/webdesign/peixegrande e confira quem são os concorrentes nesta pescaria.

A web 2.0 com a cara do Brasil! Os projetos brasileiros que utilizam os conceitos de web

Banco de dados sobre o design brasileiro

2.0, como Videolog.tv (www.

Essa vai para a lista de favoritos: o portal DesignBrasil (www.

videolog.tv), Gazzag (www.

designbrasil.org.br), uma iniciativa do Ministério do Desenvolvimento,

gazzag.com.br), Camiseteria

Indústria e Comércio Exterior, traz uma série de informações relevantes

(www.camiseteria.com), Aprex

para quem trabalha na área: agenda de eventos, artigos, banco de

(www.aprex.com.br), entre

profissionais, dicas etc.

outros, estão fazendo sucesso no exterior! Para se ter uma idéia, o tema foi analisado recentemente

Referências criativas

por Richard MacManus (http://tinyurl.com/zukx3), consultor web e

Conhecer o trabalho de outros profissionais e agências é uma forma

colunista do site ZDNet (http://tinyurl.com/f329t).

de ficar atualizado sobre as novas tendências e as técnicas que vêm sendo utilizadas no mercado. Confira alguns bons exemplos: K2 Internet (www.k2.pl), Platinum FMD (www.platinumfmd.com. br), Emil Kozak (www.emilkozak.com) e Glauco Diogenes (www.

Dicas

glaucodiogenes.com.br). Conhece outras boas referências? Então,

Livro do mês

mande um e-mail para redacao@arteccom.com.br.

“Ergodesign e Arquitetura da Informação: trabalhando para o

Nova geração do design na web

usuário”

Dando continuidade ao trabalho de divulgação da produção

Autor: Luiz Agner

universitária na área do design na web, indicamos a monografia “O Ícone Interfacial: Estudo e Análise Conceitual e Tecnológica” (http:// tinyurl.com/fgv2r), apresentada por Eduardo Loureiro, na conclusão

"A época de bibliografia brasileira

do curso de Comunicação Social da Uni-BH. Se você possui ou

escassa na área de criação e

conhece algum trabalho acadêmico interessante, envie sua sugestão para redacao@arteccom.com.br.

desenvolvimento de sites parece ter chegado ao fim. Isso porque, nos últimos dois anos, uma série de autores nacionais vem contribuindo para tornar esta

Agenda de eventos 07/10 - Webmarketing (www.fiti.org.br) 12 a 15/10 - RDesign Lorena (www.fatea.br/rdesign/index.php) 28/10 - Intercon (www.imasters.com.br/intercon/2006) 18/11 - 11º EWD - POA (www.arteccom.com.br/encontro) 21/11 - 11º EWD - Curitiba (www.arteccom.com.br/encontro) 23/11 - 11º EWD - Brasília (www.arteccom.com.br/encontro) 25/11 - 11º EWD - São Paulo (www.arteccom.com.br/encontro)

realidade diferente. Um deles é Luiz Agner, professor da UniverCidade e PUC-Rio, em recente lançamento pela Quartet Editora (www.quartet.com.br). Com uma linguagem simples e objetiva, o livro apresenta uma série de questões envolvendo Arquitetura da Informação, Ergodesign e Usabilidade, mostrando como estes temas funcionam como ferramentas estratégicas na construção de ambientes interativos. Como diz Peter Morville, no texto de apresentação do livro: 'a educação é a chave para o sucesso. Somente compartilhando o nosso conhecimento, nós podemos ter a esperança de superar a disciplina e de construir uma comunidade."

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


12 :: portfólio agência - cappuccino/hzta

o r e s u l t a d o d a f u s ã o e n t re d e s i g n e t e c n o l o g i a Segundo a Wikipédia, o cappuccino é uma bebida

Investimento em pesquisa e tecnologia

de origem italiana. Sua fórmula apresenta os seguintes

A s s i m c o m o a c o n t e c e e m o u t ro s s e g m e n t o s , a

elementos: “1/3 de (café) espresso, 1/3 de leite

concorrência na área de internet fica a cada dia mais

vaporizado e 1/3 de creme vaporizado do leite”. No Brasil,

acirrada e exige que as agências interativas procurem

a tradicional receita foi adaptada e o chocolate em pó

aspectos que determinem um bom diferencial. Pensando

começou a fazer parte desta mistura.

nisso, a Cappuccino/HZTA vem destinando recursos em

Em 2006, foi a vez do mercado interativo experimentar

pesquisa e tecnologia.

o sabor de uma nova receita, no qual design e tecnologia

“O objetivo é que o resultado de nosso trabalho possa ser

surgem como os principais ingredientes responsáveis pela

visualizado em qualquer tipo de mídia digital, ou seja, podemos

geração de uma nova agência disposta a colocar seu nome

pensar em uma campanha com conteúdo para internet, celular,

definitivamente na história da internet brasileira.

palm, CD-ROM etc. Um outro diferencial é que atuamos

“A Cappuccino/HZTA (www.cappuccinohzta.com.

como o ‘braço digital’ de outras agências de publicidade e

br) foi criada a partir da fusão entre empresas que já

comunicação que ainda não tem prática no desenvolvimento

atuavam no segmento: a Cappuccino, especializada

de trabalhos para a internet”, revela Cláudio.

na área de design, e a HZTA, focada em soluções para

Além disso, o conhecimento e a experiência de

web. Unidas, elas criaram uma agência de comunicação

sua equipe na área de ilustrações se tornou uma ótima

digital, que alia os pontos fortes de ambas, oferecendo

oportunidade para a criação de uma unidade de negócios

ao mercado soluções digitais, com base em planejamento,

exclusiva. “Assim, muitas de nossas criações digitais têm

criação e tecnologia nesse setor”, explica Cláudio Roberto

um tom individualizado, pois suas ilustrações foram criadas

Tucunduva, sócio da agência.

aqui. Vendemos também mais este serviço (ilustrações)

De cara, o primeiro desafio seria unificar o posicionamento das duas antigas empresas a uma nova

para as agências para ser usado em campanhas on-line ou off-line”, aponta Leonardo Gibran, sócio da agência.

re a l i d a d e . “ P a r a q u e i s s o a c o n t e c e s s e , re a l i z a m o s

Localização estratégica

diversas reuniões entre os departamentos para reforçar

A Cappuccino/HZTA está localizada estrategicamente

o posicionamento da nova empresa e o redesenho dos

em São Paulo, considerado o grande pólo urbano do Brasil

processos. A partir da fusão, o foco se tornou atender

e o principal centro comercial de internet no país. “Não há

de maneira mais personalizada clientes que enxergam

como negar que a cultura da internet (e das outras mídias

a internet como investimento, trabalhando sempre em

digitais) é difundida com maior força e penetração na

soluções específicas para as necessidades particulares de

Grande SP, seja através da imprensa, de eventos e cursos

cada cliente”, afirma Cláudio.

que acontecem freqüentemente e outros fatores em geral.


portfólio agência - cappuccino/hzta :: 13

“Criamos um banco interno de sites favoritos, que vem crescendo progressivamente. Através dessa ferramenta, compartilhamos nosso conhecimento e nossas influências entre toda a equipe” (Anderson Bordim e Vitor Elman) Isso faz com que o mercado tenha conhecimento suficiente

futebol, boliche, kart, entre outros”, diz Cláudio.

para disponibilizar verbas para ações mais agressivas em

Preparando-se para o futuro

relação às soluções digitais”, analisam Anderson Bordim e

A evolução nos meios de acesso à internet tem

Vitor Elman, sócios da agência.

permitido a utilização de novos recursos na criação e

Porém, engana-se quem pensa que a área de atuação

desenvolvimento de interfaces digitais. Diante dos desafios

d a a g ê n c i a s e re s t r i n j a a p e n a s a S ã o P a u l o . “ Te m o s

que estão por vir, a Cappuccino/HZTA estuda de que forma

também clientes de fora, que nos contataram em busca de

pretende se inserir dentro deste contexto.

um diferencial e qualidade de trabalho, além de clientes

“As agências já começam a pensar em conteúdos

na Europa e EUA para os quais nossos preços ainda são

para criação digital não somente para a internet, mas para

bastante viáveis”, acrescentam.

outras mídias que começam a ser cada vez mais utilizadas

De olho no “banco de referências”

comercialmente, como palm, celular, entre outros. Além

Arquitetura de informação passando pelo design

disso, cada vez mais os clientes querem conhecer detalhes

de interface. Estes são alguns dos principais temas em

sobre retorno do investimento feito, uma vez que com a

pauta no processo de criação da Cappuccino/HZTA.

internet, o feedback do usuário e a medição dos resultados

E para manter sua equipe atualizada com o que há de

das ações são imediatos”, afirma Cláudio.

m a i s m o d e r n o n o m e rc a d o , a a g ê n c i a c r i o u , e m s u a

Dentre os projetos futuros da agência, o especialista

intranet, um banco de dados para que os profissionais

aponta a evolução nas ações estratégicas da empresa e a

possam cadastrar as principais referências de trabalho e

expansão de sua área de negócios. “Queremos trabalhar

compartilharem o conhecimento.

cada vez mais com a inteligência do negócio voltada a

“Passamos uma parte do tempo de criação

mídias on-line, focados no atendimento dos clientes como

buscando novas tendências através da internet.

contas, pensando sempre em vender não só ferramentas,

Criamos um banco interno de sites favoritos, que vem

mas também planejamento estratégico das ações on-line,

crescendo progressivamente. Através dessa ferramenta,

adequando às realidades on-line e off-line de cada cliente.

compartilhamos nosso conhecimento e nossas influências

Como metas para os próximos dois anos, pretendemos abrir

entre toda a equipe. Nesse banco, temos referências do

filiais no Sul e no Nordeste e melhorar a nossa captação de

que se está fazendo em todo o mundo, desde designers

projetos na Europa e nos EUA”, complementa.

australianos a poloneses. Assim, conseguimos ter um panorama global, onde, às vezes, nem a língua é uma barreira, pois o design e o conceito falam mais alto”, apontam Anderson e Vitor. Outra estratégia é o investimento em cursos de aperfeiçoamento, conforme a área e a necessidade de cada departamento. “Incentivamos o sentimento do desafio criativo da operação, sem competitividade predatória, dando liberdade de opinar nos processos de trabalho. Apoiamos ainda a realização de atividades estimulantes como shiatsu, happy hour e prática de esportes, como

Sócios da Cappuccino/HZTA reunidos


14 :: portfólio agência - cappuccino/hzta

“As agências já começam a pensar em conteúdos para criação digital não somente para a internet, mas para outras mídias que começam a ser cada vez mais utilizadas comercialmente, como palm, celular, entre outros” (Cláudio Tucunduva)

Cases - Hotsite “Seriexpert 2005”Canal Sony www.sonypictures.com.br/canalsony Tecnologias utilizadas: Action Script, Flash e Photoshop

A oportunidade de desenvolver hotsites promocionais para o canal Sony surgiu através da rede de contatos mantidos pela agência. Dentre os trabalhos já realizados, um dos destaques foi o hotsite da promoção anual direcionada aos chamados “fãs de carteirinha” do canal. “Eles precisavam de um hotsite que interagisse com o usuário e tivesse uma seqüência de atividades e/ou jogos que pudesse criar um ranking entre os participantes. Ao final da promoção, os líderes do ranking ganhariam prêmios. Desenvolvemos todo o conceito da campanha. A home do site era um braço com uma tatuagem do Sony e, ao fundo, um painel com várias fotos, imãs e imagens de personagens das séries, como seria realmente um quarto de um fã dos seriados”, relata Vitor Elman. Segundo ele, a criação buscou algumas referências do canal, como as “manchas” no contorno do site, além da própria linguagem moderna, dinâmica e ousada. “O site procurou passar também a mesma atitude que o canal tem na televisão. Conforme o usuário passa o mouse por cima da imagem do braço tatuado, a pessoa (dona do braço) se movimenta e o fundo se altera, dando uma idéia de um espaço maior. A leitura e a navegabilidade são fáceis. A fonte seguiu a linha jovem, como se fosse ‘rabiscada’ ou escrita à mão. A curiosidade é que o braço tatuado pertence a um dos nossos designers, que inicialmente ‘posou’ só para a realização de um primeiro layout, mas o resultado ficou tão bom que foi usado em definitivo”, revela.


portfólio agência - cappuccino/hzta :: 15

- Shop Tour

- Samba Comunicação

www.shoptour.com.br

www.sambacom.com.br

Tecnologias utilizadas: Flash, Illustrator, JavaScript e

Tecnologias utilizadas: Action Script, Flash, PHP e

Photoshop

Photoshop

A qualidade no trabalho e o pronto atendimento presta-

Tendo como base o tema “Nossa pegada é outra”, o

do mesmo em serviços menores foram aspectos fundamentais

desafio deste case seria criar um site que apresentasse

para que a agência conquistasse, aos poucos, a confiança do

os principais projetos da Samba Comunicação e passasse

Shop Tour. “Quando eles sentiram a necessidade de que o site

o c o n c e i t o d a a g ê n c i a , c o m u m v i s u a l q u e re m e t e s s e a

fosse reformulado, e acompanhasse a mudança de estratégia

idéia do “samba raiz”, com estilo.

do canal, passaram para nós o briefing. Assim, o desafio era

“O ponto de partida da criação foram algumas fotos

desenvolver um novo conceito: o site deveria deixar de ser

que ilustrariam um livro institucional da própria agência

somente um espaço corporativo e se tornar uma área comer-

(eram fotos artísticas da Escola de Samba Mangueira). Sur-

cial, onde a programação da TV também poderia ser vista pelo

giu a idéia de usar as fotos compostas num layout com

cliente, em qualquer hora ou local. E foi baseado nisso que

‘rabiscos’ por cima das fotos, que se tratam na verdade

iniciamos a criação”, conta Vitor.

de animações, que dão uma idéia de ritmo e movimento às

Dessa forma, foram feitos alguns estudos de combinação

imagens. Do caos dos rabiscos sai uma unidade visualmente

cromática e tipografia para que fosse alcançada a identidade

organizada e bonita, remetendo ao próprio conceito do

visual desejada. “As cores são predominantemente as do canal,

samba, que traz uma melodia em meio ao caos de tantos

porém foi adicionada uma paleta de cores de apoio com tons

instrumentos”, explica Vitor.

mais sóbrios (muitos tons pastéis), que combinaram com o azul

E as animações existentes dentro do site estão perfeitamente

tradicional do canal. Essas cores foram utilizadas para reforçar

integradas com o conceito defi nido no briefi ng. “A brincadeira

a segmentação do site (automóveis, imóveis etc.). Sobre a tipo-

interessante é a interatividade das imagens, pois conforme se

grafia, foi usada a fonte ‘Helvetica Condensed’ que dá peso à

mexe o mouse há a animação e a velocidade do movimento varia

leitura, sem serifa para colaborar com a idéia de modernidade

conforme a velocidade do mouse, dando a idéia de que o usuário

e requinte”, relata.

comanda o ritmo do samba. Foi utilizada uma fonte mais séria

No final, diz Vitor, o site acaba funcionando como uma

e elegante e com boa legibilidade para contrabalançar com os

“Central de Vídeos”. “Por isso, criamos ‘volumes’ dando a

outros elementos visuais do site. Outra curiosidade é que nossa

impressão de tridimensionalidade e com várias opções de

equipe criou o layout sem ter visto o livro institucional da agência

controle para cada vídeo. O fato legal desse case é a idéia de

(que ficaria pronto um pouco depois). Quando fomos apresentá-lo,

usar os vídeos integrados ao layout, que deu ao site uma idéia

a equipe da agência disse que o livro estava seguindo um layout

bastante próxima do conceito do programa na televisão”.

bastante similar, com a idéia dos rabiscos sobre a foto”.




18 :: portfólio freelancer - Renato Loose

www.miliciavitoria.com “A parte vetorial foi desenvolvida no Flash MX. Para as cores e finalização, optei pelo Photoshop 7”

ILUSTRAÇÕES QUE MARCAM O ESTILO DE UM DESIGNER Contato: renatolooz@gmail.com Site: www.cafeina.info Desenhar sempre foi uma prática presente na vida de Renato Loose e talvez seja um bom indício para explicar a sua

se tudo. Placas, cores, arquitetura, grafites, stickers.

escolha pelo design. “A partir do momento em que comecei a

Um bom designer deve ser observador. Entender o que

utilizar computadores, tive vontade de trazer os traçados para

acontece à sua volta, absorver e moldar à sua maneira de

o plano digital. Foi então que, por conta própria, comecei a

trabalhar as imagens. Guardando mais fontes, a inspira-

procurar e estudar quais seriam os melhores softwares para

ção pode vir de onde menos se espera, além de confe-

trabalhar. Ao mesmo tempo, fui atrás de livros sobre design

rir originalidade ao trabalho. Também retiro muitas

para conhecer melhor a evolução dos processos de criação e

lições do cinema, em especial, o europeu”.

as escolas e correntes de maior importância”, revela. Além do conhecimento autodidata, Renato buscou com-

E analisando o portfólio de Renato, é possível afirmar que as ilustrações representam o seu dife-

pletar sua formação cursando Comunicação Social na Univer-

rencial. Um exemplo está presente no site Milícia

sidade Federal do Espírito Santo (UFES). “Ela me ajudou nos

Missões Urbanas (www.miliciavitoria.com). “A

processos de criação, afinal, comunicação verbal e visual têm

intenção da imagem é mostrar que é possível

sempre o mesmo objetivo: passar uma mensagem. Fiquei mais

a convivência pacífica entre pessoas de dife-

objetivo e incisivo naquilo que me proponho a fazer. Aprendi

rentes culturas. Como se trata de um ambiente

tendo contato com pessoas que já trabalhavam na área utili-

típico das grandes cidades, utilizei a imagem

zando elementos que fazem parte tanto do ambiente visual,

distorcida de prédios e postes como forma de

quanto do escrito. Sem contar o fácil acesso a materiais como

representar o caos, a aglomeração e as fusões

livros para pesquisas de imagens e referências diversas”.

tão comuns à vida urbana. Para as cores, pensei

O resultado não poderia ter sido melhor: hoje ele conta com uma boa base referencial e de influências para realizar seu trabalho. “A base são os mangás. Depois vieram influências da

em tons mais frios e desgastados, contrastando levemente com o colorido dos personagens”. Ou seja, este é um segmento com boas

rua, do grafite e dos stencils, assim como elementos da cultura

oportunidades para os designers na web. “O

underground, especialmente a estética de tatuagens tradi-

leque é amplo e pode, por exemplo, trazer para

cionais e suspensões. A partir de estudos mais aprofundados,

rede um profissional que antes só trabalhava

incluí elementos de décadas passadas - destaque para os anos

com impresso. Para quem já está na internet,

50 e 60 - e, de vez em quando, esbarro na pop art, inspirado

as ilustrações podem valorizar ainda mais o

pelos trabalhos de Roy Liechtenstein”.

trabalho. Se o designer souber criar e mani-

Outro caminho para buscar novas referências é aguçar o instinto de observação. “Nas ruas, presto atenção em qua-

pular bem uma imagem desenhada, ele ganha em valorização e exclusividade de estilo”.

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



20 :: entrevista - design e arte

Design e arte são campos distintos do conhecimento humano. Porém, nada impede que ambos sejam utilizados em harmonia para a construção de representações que ajudem a tornar mais compreensíveis e sofisticados os objetos e a maneira na qual vivemos em sociedade. Nesta entrevista, Ronaldo Gazel, artista plástico, designer e diretor de arte na BHTEC e:house (www.bhtec.

vai usar. E é aí que nos encaixamos na história, e passamos a fazer parte dela.

com.br), fala como as referências fora do mundo tecnológico

Por outro lado, no que se entende por design hoje,

podem contribuir na construção de ambientes digitais mais

dentro de uma ótica artística, é plenamente possível

criativos e funcionais, além de ressaltar a importância da

desenvolver projetos de utilização alternativa, que podem

história da arte como base para o trabalho do designer.

ser altamente subjetivos e próximos até do antiuso. Nesse

Wd :: Por que e como o conhecimento da história

cenário se enquadram os experimentalistas, que buscam

da arte serve como base para trabalho de um designer

um tipo de reação mais sensorial, de semânticas totalmente

na internet?

específicas, heterogêneas, dentro de universos distintos,

Gazel :: A arte reflete o tempo em que é produzida. Conhecer a história da arte, ainda que apenas alguns pontos

sejam eles culturais, comerciais, didáticos, humanistas, matemáticos, psicológicos, estéticos.

dela, é fundamental para entendermos os questionamentos

O designer que pára de olhar o mundo com o olhar difuso,

e paradigmas que permearam as épocas e as respostas

amplo, capaz de compreender várias realidades, corre o risco

que o homem/artista deu (e ainda dá) a elas. Na verdade,

de virar uma engrenagem na linha de produção de sites, no

a história da arte, estando intimamente ligada à literatura,

melhor estilo “corte e costura” de HTML. Vai passar a apertar

à filosofia, à antropologia, à história, à religião, enfim, a

um parafuso, ao invés de compreender toda a engrenagem.

um sem-número de expressões humanas, acaba tendo

E é por isso que devemos, além de estudar a história da arte,

uma importância fundamental na vida de todas as pessoas.

firmar nossa posição como artistas designers - mentes capazes

Quanto mais longe da arte, mais perto do controle, do

de compreender as expressões artísticas não apenas como

sistema, do pensar “massificado”, pasteurizado.

uma superficialidade decorativa ou bela, e sim, uma interface

É preciso entender a história do design, para ser um

capaz de comunicar utilizando modelos não-usuais, linguagens

designer mais completo, mais consciente, mais coerente. É

não-verbais, fora do “logos”, da razão cotidiana; capazes de

preciso saber como surgiu o movimento do design; saber

questionar o que não se quer questionado; de propor o que

como o relacionamento dos objetos e do ser humano foi se

não se quer proposto; de causar o estranhamento, dando lugar

sofisticando com o passar do tempo. É importante porque

ao controverso. Enfim, capazes de compreender o mundo

uma interface é uma superfície de trabalho, de uso. E é

pictórico muito além da forma.

por isso que somos designers da web, projetamos, como

Wd :: Ao longo do tempo, os movimentos artísticos

um designer projeta um espremedor de suco, ou uma

vêm exercendo uma grande influência na produção do

cadeira, interfaces que um grupo de pessoas certamente

design. Em termos de internet, talvez um dos melhores


entrevista- design e arte :: 21

exemplos esteja no site das Havaianas (www.havaianas.

qualquer situação. Veja que paradoxo, digamos quase

com.br) e algumas campanhas on-line da Coca-Cola na

zen-budista: o artista busca gerar um reflexo altamente

França (www.coca-colablak.fr e http://secure.coca-cola.

pessoal; uma linguagem, uma “poiesis” própria, buscando

fr). Quando a arte deve ser aplicada em benefício do

o coeficiente de “arte” em um trabalho artístico, seja ela

design na web?

um vídeo, uma pintura, uma performance, um website

Gazel :: A arte pode trazer enormes benefícios para o

- linguagem essa que, apesar de desuniversalizada na

design na web, sendo uma linguagem não-verbal, capaz de

origem, tende a se comunicar com o senso-comum, tanto

despertar naquele que tem contato com ela, percepções e

na aceitação, quanto no estranhamento.

diálogos muito mais sofisticados (ou simples, diretos!) do

Já o designer normalmente trabalha com fins

que as narrativas e approachings das interfaces focadas em

utilitários extremamente bem definidos, e por isso a

percepções utilitárias puras. E o maior desses benefícios

pressão por coerência artística passa a ser mínima, em

se chama coerência estética. Essa coerência pode ser

favor de uma adequação máxima aos padrões estéticos

percebida no excelente site das Havaianas, evidenciando o

aceitos por um grupo majoritário - ou pseudomajoritário;

fato de que a ousadia em termos de linguagem, da difusão

padrões estéticos que são verdadeiros “lugares comuns”.

de valores semióticos sutis, fora do padrão midiático

Então, voltamos à história da “doxa”, do “ouvi dizer”, da

tradicional de informação, dispostos juntos a uma feliz

informação não-questionada e não-questionável. Quanto

combinação de fatores estéticos e expectativas sensoriais

menos vontade de reavaliar os valores e conceitos tidos

(revertidas de alguma forma em resultados positivos),

como inexoráveis, mais subvalorizada será a profissão de

transforma o lugar-comum dos pressupostos, das “doxas”

design, pois a pressão que passa a se exercer sobre nós,

pictóricas, dos pré-conceitos estabelecidos todos os dias.

designers, acaba sendo a mesma que um carregador de

Por isso mesmo, sites como esse, que felizmente têm

caixas: produção braçal, e não mental.

surgido em número cada vez maior, fazem tanto sucesso:

Wd :: A interação homem-computador é considerada

eles mostram que o caminho da arte no design na web é

por especialistas mais fria e distante, além de criar um

muito promissor, e dá resultados.

sentimento individualista entre as pessoas. Buscar

Wd :: Sobre a interação entre design e arte, podemos

referências nos movimentos artísticos pode ser um

afirmar que a principal diferença entre estes dois campos

caminho para proporcionar emoção e afinidade dentro

do conhecimento seja o compromisso com o público, ou

de um projeto digital?

seja, o designer tem compromisso com o público e o artista vive sem a necessidade e a pressão de fazer concessões? Gazel :: O perfil do artista hoje não pode ser traçado de modo simples, porque na pós-modernidade - período no qual vivemos, e que resgata todas as motivações e contradições do passado recente (movimentos modernos) em um timing assombrosamente rápido - há uma tal especificidade de propostas, conceitos e estéticas que permite ao artista, virtualmente, qualquer tipo de relação com o público, inclusive compromisso e descompromisso. Mesmo que uma proposta, em princípio, nos conduza a uma percepção romantizada do artista, como se ele não estivesse se importando para o público, não sofresse qualquer tipo de pressão, isso na verdade pode mostrar o contrário: a adequação do artista a nichos de mercado preparados para receber/consumir as suas características sui-generis, ou seja: para o artista, há um mercado em


22 :: entrevista - design e arte

Gazel :: Um cão, um cavalo, um boi são incapazes de

Gazel :: O cubismo representa o atonal, um universo

realizar gestos e ações que não sejam voltadas para a sua

no qual o simbolismo é completamente descartado,

própria existência física, sua preservação. Já o ser humano

cujas formas não remetem ao mundo e a seus símbolos,

é capaz de observar, gestualizar, modificar a natureza

mas sim à personalidade pura do geométrico. Alexander

pelo simples prazer estético, pela necessidade natural de

Calder (http://tinyurl.com/fbqu9), com seus mobiles, foi

mimese, sem qualquer relação com a sobrevivência.

o artista que mais conseguiu se aproximar desse ideal

Quando a interface digital (homem-computador)

cubista, na minha opinião: suas esculturas remetem a um

passa a desconsiderar ações e reações menos utilitárias,

mundo absolutamente próprio, que não dá margens a

aumentando o caráter prático em detrimento do

interpretações baseadas nas questões do cotidiano.

nos

O site internacional da Leo Burnett, apesar de gerar

robotizarmos, perdendo a habilidade de questionar, de

uma ótima sensação de profundidade, não tem uma

trocar pontos-de-vista, de negar o utilitário e promover o

influência cubista acentuada, já que, cognitivamente, ele

puramente estético/existencial. Por isso, sim, é louvável

é permeado por símbolos e letras, para a compreensão do

buscarmos referências nos movimentos artísticos para

conteúdo. Um site genuinamente cubista haveria de ser

criarmos interfaces um pouco mais humanas, que tornem

muito abstrato, com o mínimo de textos e imagens reais.

o ato de interagir um processo cada vez mais semelhante

Ainda que fosse em uma camada específica da interface,

ao agir natural do homem.

separando a arte cubista do conteúdo publicitário.

sensorial,

não-prático,

corremos

o

risco

de

Wd :: No livro “Vanguarda Européia e Modernismo

Wd :: Considerando o contexto político-econômico

explica

atual, permeado por guerras, intolerância religiosa

que a técnica da pintura cubista procurava

e injustiças sociais, é possível imaginar um resgate de

“apresentar a realidade através de estruturas

conceitos aplicados pelo movimento Dadaísta como

Brasileiro”,

Gilberto

geométricas,

Mendonça

desmontando

Teles

os

objetos

referência para projetos interativos?

para que, remontados pelo espectador,

Gazel :: Se analisarmos bem, todos os períodos da

deixasse transparecer uma estrutura

história foram permeados por esse tipo de acontecimento.

superior, a forma plástica essencial e

Sempre houve muitas guerras, muita intolerância - e

verdadeira da beleza”. De que forma

para cada época, uma contestação própria. Os artistas

esta técnica pode ser utilizada

modernistas eram naturalmente “engajados”.

pelo design na web? O site

Mas, nos dias de hoje, na dita pós-modernidade, tudo

internacional da Leo Burnett

é fragmentado - inclusive a crítica social. Encontram-se

( w w w. l e o b u r n e t t . c o m )

vários exemplos de movimentos de caráter contestador

pode ser apontado como

intrínseco, que fazem a crítica dentro de cenários

um exemplo?

específicos, quase nunca universais. O artista pode não falar da guerra como fez Picasso ao pintar “Guernica” até porque o impacto de uma pintura como guernica, nos dias de hoje, seria outro (afinal, muita água passou desde então) - mas ele critica a seu modo, uma crítica que se desuniversalizou desde a pop art, mas que se mantém viva em movimentos como o “sticker art” ou o “street bombing” - a arte urbana que envolve tantos artistas de diferentes áreas, que pintam, grafitam pela cidade, em superfícies autorizadas (ou não!), levantando questões urbanas ou simplesmente rasgando o cinza das ruas com cores vivas, intensas, volumes e tipografias sui-generis. Na internet, se houvesse um “street bombing”, seria


entrevista - design e arte :: 23

algo como uma área completamente livre dentro das interfaces (ou invadida!), que pudesse ser preenchida com arte. E, de certa maneira, eles também escandalizam, ao seu modo, como pretendiam os dadaístas. A diferença é que o engajamento é desnecessário, o mais importante é desenvolver a linguagem. Quanto ao resgate do Dadaísmo em projetos interativos, sim, é sempre uma ótima idéia! Afinal, Dadaísmo é sempre bem-vindo em qualquer situação, justamente para nos deslocar da linearidade dos ponteiros do relógio, do logos, do racionalismo. Ele é um movimento absolutamente atual, contestador em essência, e seus “jogos”, experiências

E se descobriu, findando-se a modernidade, que nenhum

como o “cadáver delicioso” (http://tinyurl.com/mrbgf)

dos movimentos estava mais ou menos próximo de uma

- espécie de colcha de retalhos de palavras, frases e

“verdade” artística - justamente porque essa “verdade”,

desenhos, ajudam-nos a reconstruir o pensar e o perceber.

ao ser encontrada, logo estaria superada.

Um “cadáver delicioso” é um ótimo ponto de partida para a criação de um projeto interativo digital dadaísta.

Podemos, então, conhecendo as características, as razões estéticas de cada movimento moderno, entender

Wd :: Acessando o site da agência Modernista!

suas circunstâncias, seus cenários - não simplesmente

(www.modernista.com), somos remetidos aos anos

reviver aquilo - mas criar uma relação entre uma questão

20, período no qual o mundo assistiria ao ápice do

atual vista sob aquela ótica. Essa é a receita para se

surrealismo (http://tinyurl.com/kurew), considerado

beber da fonte moderna e criar algo novo. E é por isso

um dos últimos movimentos de arte moderna. Como a

que não basta ter o conhecimento “dóxico”, superficial,

aplicação do inconsciente pode ajudar no processo de

sensorial, sobre uma época (apesar disso ser fundamental),

criação de uma interface digital?

entender sua picturalidade, suas formas, seu movimento,

Gazel :: Esse site da Modernista! é um bom exemplo

sua disposição, seu equilíbrio. É preciso conhecer a história

de como se comporta a arte nos dias de hoje, tanto no

da arte e ver que nenhum estilo surgiu ao acaso, mas sim

meio internet, quanto em qualquer outro. É perfeitamente

possuem origens claras - e desdobramentos que chegam

possível voltar no tempo e fazer uma releitura dos valores

até os dias de hoje, conseqüentemente. A partir desse

peculiares que formam o cerne de cada “manifesto” do

estudo fica muito fácil associar um projeto conceitualizado

período moderno. A diferença é que, naquela época, havia

hoje a uma estética moderna, seja qual for o movimento:

a nítida impressão de que o universalismo das propostas

cubismo, surrealismo, expressionismo etc.

poderia ser percebido e vivenciado como uma verdade, uma

No caso do surrealismo, é preciso mergulhar de cabeça

razão, sem prever suas contradições, sua transformação em

na psicanálise, e estar pronto para ir além da linguagem

outras verdades, tão efêmeras quanto o próprio homem.

comum, das percepções concretas, sensibilizando-se para

No período da modernidade, havia uma visão

os reflexos do inconsciente como feedback emocional para

romantizada, de um mundo inteiro para ser conquistado

a interface - o que parece bem subjetivo, porém plenamente

pela arte, ainda que por caminhos completamente

possível com interesse e muito estudo.

opostos, como os futuristas italianos, que traziam

Wd :: No livro “Iniciação à História da Arte”, da

o fascismo como uma grande virtude, um caminho;

Martins Fontes Editora, H.W.Janson e Anthony F.Janson

e o cubismo, que desconsiderava qualquer valor do

apontam que “ao contrário do Dadaísmo, a Pop Art não

mundo real, auto-suficiente em sua atonalidade. Eles

é motivada pelo desespero ou animosidade contra a

não poderiam existir sozinhos como verdade maior, como comprovou o tempo, mas foram absolutamente fundamentais, como todo movimento dentro da história.


24 :: entrevista - design e arte

civilização atual; considera a cultura comercial sua matériaprima, uma fonte inesgotável de material pictórico, mais do que um mal a ser combatido”. O uso da cultura de massa, tão emanada pelos seguidores da Pop Art, é uma linha conceitual que pode ajudar a aproximar os ambientes digitais de seu público-alvo? Gazel :: A Pop Art foi o último dos grandes movimentos modernos, e sua contribuição mais importante para a história da arte, ao meu ver, foi a mudança de percepção a respeito da apropriação e transformação de “memes” coletivos, ícones de massa, considerando uma “cultura pop”. A cultura pop, por sua vez, surgiu graças aos métodos industriais de criação e produção pictórica, a prevalescência da imagem de massa, em detrimento do conteúdo (também de massa, no entanto, de segunda ordem). Os clássicos exemplos “lata de sopa campbells” e as interferências na Marilyn Monroe e Mao Tse Tung demonstram isso com perfeição. É o início da era do consumo de imagens, à maneira industrial. Que vivemos até hoje, como num “pop” transgênico e muito acelerado. Poderíamos incluir aqui o kitsch e o neopop, mas seriam apenas categorizações para as transgenias diversas pelas quais passa a Pop Art até hoje. Continuamos consumindo o pop, construindo e desconstruindo sua forma e conteúdo de forma compulsiva, caótica, de modo cada vez mais veloz. Os ícones pop surgem e morrem quase no mesmo instante. O que mais me atrai na Pop Art é sua possibilidade de “cheating art”, ou seja, de fazer uma arte “trapaceando”, através dos meios de massa - inclua-se nessa categoria o sampling e a intervenção sobre todo tipo de imagem “lugar-comum”, desde logotipos conhecidos por todo o mundo até personagens (humanos ou não) pop extremamente regionalizados. A identificação com os “memes” acaba por facilitar a transmissão do que está agregado a ela - no caso, a arte. E é justamente nisso que vejo a grande possibilidade de se trabalhar o pop dentro dos ambientes digitais, aproveitar essa identificação quase insuperável (felizmente, quase) para se fazer ouvir. Uma espécie de comensalismo. Wd :: Segundo a Wikipédia (http://tinyurl. com/go7pj), o minimalismo representa uma série de movimentos artísticos e culturais ocorridos durante o século XX. Analisando a parte conceitual do movimento (“jogo de volumes e formas que esteja reduzido às suas configurações não mais que essenciais as suas


entrevista - design e arte :: 25

funções”), é certo dizer que a criação e o desenvolvimento

que precisa se ater a objetivos e regras já

de sites focados na usabilidade segue a mesma linha de

muito bem estabelecidas pela publicidade

pensamento?

(ou pela gerência de TI), sim. É quando a

Gazel :: De certa maneira sim, o movimento pró-

interface precisa ser o mais racional possível,

usabilidade busca enxergar e remover qualquer tipo

controlável, categorizada, sistemática. Isso

de ruído dentro da interface, com objetivo de chegar a

pode ser visto com mais intensidade nas

um coeficiente mínimo ideal de uso. É uma ótima causa.

interfaces unicamente funcionais, que de tão

O problema é que, assim como o próprio movimento

sistematizadas, acabam por virar “monstros”

Minimalista (e todos os demais movimentos modernos),

de organização, desumanizando ao máximo a

o movimento pró-usabilidade, na minha percepção,

linguagem entre o usuário e a interface.

acaba por acreditar (pela força da doutrina e do hábito)

A habilidade do designer em compreender

que só existe a realidade do uso, desconsiderando

os princípios dos quais a interface pode - e

o contraditório - que seria, nesse caso, a corrente

deve - se utilizar, sem se ater a regras gerais,

experimentalista, e que, na publicidade, poderíamos

“doxas” incontestáveis, clichês pictóricos - que

encontrar dividida em vários sub-movimentos, sendo o

normalmente nos levam a uma pasteurização das

mais importante deles o da “inversão de expectativa”

interfaces - é que vai fazer a diferença na hora de

- modo menos traumático de apresentar estéticas

conceitualizar a proposta.

pouco usuais a um público heterogêneo, abrangente,

A partir do conceito certo, sem subestimar

valendo-se de um gradiente entre o antiuso e o próprio

e nem superestimar o público (e a própria

uso, deixando o espectador/consumidor transtornado

interface), encontraremos o caminho mais

sensorialmente, abalado por alguns instantes, para,

interessante, mais adequado aos objetivos

no melhor estilo catártico, trazê-lo de volta ao mundo

(práticos e subjetivos) - pautando-se, dessa

cartesiano. Pronto, fez-se a mágica.

forma, por diversos valores semióticos e também

O mundo está girando numa velocidade espantosa,

por necessidades utilitárias, cada qual com sua

enquanto escrevo esse texto. Nós também, nossa

maneira de ser avaliada - ainda que o resultado

mente, nossos gostos, nossos paradigmas estão prontos

disso

para mudança, a cada instante. Acreditar numa linha

abstrato, uma subjetividade irritante (aos olhos do

unidirecional, em relação ao ideal do design na web, é

ser cartesiano), contrária aos critérios universais de

pura ilusão. É preciso considerar o antiuso, os reflexos da

avaliação atuais.

seja,

esteticamente,

um

picturalismo

própria frustração e a transformação que ela gera. Existem

Se esse for o caminho encontrado, é preciso

também sites que não têm qualquer relação com uma boa

encará-lo de forma corajosa. Isso porque nenhum

usabilidade (no sentido atual a que esse termo remete),

sistema de análise de interfaces que conheço

mas que usam a estética minimalista de modo primoroso,

consegue sair da esfera racional, do empirismo

cada qual a seu modo.

utilitário, até mesmo para lidar com os valores mais

Wd :: A Enciclopédia Itaú Cultural de Artes Visuais revela que “a liberdade de experimentação, o retorno

sensoriais, menos racionais - quando tratam destes, fazem-no de modo rasteiro.

às intenções expressivas e o resgate da subjetividade”

Tenho em mente que devemos mudar nossa

são algumas das principais linhas de pensamento do

opinião a cada instante, girar em torno da idéia

Neoconcretismo (http://tinyurl.com/gtnad). Diante de

inicial pelo menos uma dezena de vezes antes de nos

sua experiência na área, você acredita que os projetos

definirmos pelo conceito final. Assim, por exemplo,

experimentais on-line ainda são um campo pouco

se optamos por usar a simplicidade da forma básica,

explorado? Quais conceitos do Neoconcretismo poderiam

dos planos geométricos simples, podemos pesquisar o

ser aplicados no design na web?

cubismo ou o neoconcretismo. O importante é saber o

Gazel :: Em se tratando de design na web comercial,

porquê da escolha.


Radicado nos EUA, o carioca Nando Costa é criador do projeto Brasil Inspired (www.brasilinspired.com), no qual incentiva e divulga os trabalhos de design desenvolvidos no país. Apostando na experimentação, seu trabalho é um bom exemplo de como tal conceito pode ajudar o design digital a se tornar mais criativo. Nesta entrevista, ele fala sobre influências, cores, tipografia etc., além de analisar os desafios existentes na caminhada do profissional que vai para o exterior. Wd :: Em entrevista para a revista Zupi (http:// tinyurl.com/mzpot), você confidenciou que tem “...trabalhado tanto nos últimos anos que quase sinto que perdi um pouco da minha identidade”. Essa sensação já passou? Quais fatores constroem ou desconstroem a identidade e o estilo de um designer? Nando :: Acho que esse efeito já passou. Devo ter dito isso quando tinha a minha empresa (chamada Nakd), no Rio de Janeiro. Naquela época, como atuava como diretor de criação, a minha função, além designer, era guiar o estúdio, os designers e animadores com quem eu trabalhava, e também interagir com os clientes, pagar as contas e até lidar com as burocracias. No fim dos dois anos de minha experiência na Nakd, eu e minha esposa (Linn Olofsdotter - www.olofsdotter. com) estávamos esgotados e acho que isso nos afetou demais, nos deixou sem inspiração. Mas depois tudo passou e, hoje em dia, trabalhando como freelancer, me sinto muito mais confiante e feliz com o que faço. Sobre sua segunda pergunta, não sei exatamente como responder, pois isso depende muito de uma pessoa para outra. Não há regra. No meu caso, o fato de o meu trabalho ter perdido força, eu imagino que deve ter sido causado por cansaço, exaustão mesmo. Atualmente, con-


entrevista - AndrĂŠ Matarazzo :: 27


28 :: design na web: construindo sua história

Design na web: construindo sua historia Arquitetura, escrita, pintura, utensílios domésticos, vestimentas. É através da descoberta e da pesquisa de diversos objetos do passado que tornamos possível a reconstrução e o entendimento dos fatos e dos acontecimentos da história. Quando falamos de design na web, tratamos de um segmento que ainda engatinha para escrever definitivamente suas páginas na história deste campo do conhecimento. No livro “Uma introdução à história do design”, Rafael Cardoso aponta que “...talvez o maior desafio para o designer envolvido com a rede seja de encontrar soluções que resistam, por sua qualidade e densidade, a essa proliferação tumorosa de informações parciais...”. Diante disso, estudar os elementos que ajudaram a construir a prática do design pode ser o primeiro passo para garantir um diferencial neste mercado. “O conhecimento da história é uma das melhores formas de entrar em contato com questões profundas como identidade, representação, cultura. Acho que o designer, como todo criador, tem que buscar o autoconhecimento. E, por trabalhar com a coletividade, tem que buscar conhecer a sociedade também. A história é o autoconhecimento coletivo”, argumenta o escritor.


design na web: construindo sua história :: 29

o. t en m” m é so b ci e m rd o h a on e t Ca c to dad ael u f a ie a R c r o so a sc r a u b ce e e qu onh m rc e , t sca r do bu a i e cr qu do em o t t o e, om dad c r, tivi e gn ole i s c de a o om e c qu ar o lh ch ba “A tra or p E,


s e d 30 :: design na web: construindo sua história

Da Revolução Industrial à Era da Informação

meados da década de 1980. Para o design, as plataformas

Quais características históricas poderiam nos ajudar a

e programas de computador desenvolvidos desde então

entender a evolução do design? À primeira vista, os efei-

me parecem tão importantes quanto à própria web, que

tos da industrialização em nossa sociedade são conside-

teria outra cara e estrutura se não fosse por eles”, explica

rados o grande marco para a transformação no modo de

Rafael Cardoso, professor associado do Departamento de

produção do design, pois até então o ofício era realizado

Artes e Design da PUC-Rio.

de maneira artesanal.

“Não tínhamos design propriamente dito, tínhamos

Do HTML ao AJAX: como as tecnologias mudam a

história do design na web

artesanato que eventualmente poderia ser desenvolvido

Na busca por uma linha que norteie a prática do

com alguns padrões e repetições, mas não era regra.

design na internet, a grande dificuldade para se determi-

Podemos dizer que o design viveu três fases distintas: na

nar uma história envolve a escassez de registros e acervos

primeira fase, seu empenho era em modular produtos para

que produzam um espaço com material confiável de con-

serem seriados, ou seja, facilitar a produção. Na segunda

sulta. São poucos, mas os exemplos existentes já ajudam

fase, o design tinha que construir valores simbólicos e

a traçar um perfil da área. Estamos falando do UOL Histó-

agregar valor ao produto. Nesse momento de sociedade

ria (saiba mais, na página 36) e do Internet Archive (www.

da informação no qual vivemos, parece que estamos vol-

webarchive.org).

tando um pouco no tempo. A grande quantidade de ferra-

Apesar das dificuldades, o depoimento e a prática de

mentas e tecnologias nos dá a oportunidade de construir

quem trabalha na área servem como um bom caminho para

produtos para web que sejam quase artesanais. Embora

analisarmos de que forma este segmento de mercado cresceu

se use toda ciência de comunicação visual e se pense em

e se transformou ao longo dos seus 11 anos de existência.

comunicar para a massa, cada projeto ganha uma atenção quase artesanal”, analisa o designer Guilherme Marconi.

“A principal transformação no design para a web é a busca de sua própria identidade. Desde o seu surgi-

Levando em conta o peso que a Revolução Indus-

mento, no final do século passado, a web é uma grande

trial exerceu na forma como o design evoluiu ao longo do

tela em branco à procura de quem a preencha, tanto que

tempo, é certo considerar que o surgimento da internet

já foi considerada a maior exposição de arte interativa do

representa também uma nova etapa em sua história?

mundo. HTML, CSS, Flash, scripts, gerenciadores de con-

“Ainda falta distância crítica para avaliar se o surgi-

teúdo... Cada inovação abre um número enorme de possi-

mento da internet terá o mesmo peso histórico que teve

bilidades, e a maior glória do designer é explorá-las inces-

a industrialização. Afinal, quando falamos da chamada pri-

santemente. A maior transformação provocada pela web

meira Revolução Industrial, estamos falando de um dos

é a constante reinvenção de seus conteúdos e formatos,

acontecimentos mais transformadores em toda a história

além, é claro, da gigantesca democratização do acesso

da humanidade, de importância equivalente ao início da

aos meios de produção”, aponta Luli Radfahrer, professor-

agricultura ou das cidades há milhares de anos. Prefiro

doutor da ECA-USP.

pensar na internet como parte de um quadro maior, abran-

Para Marcelo Gluz, gerente de criação na Globo.com,

gendo a telefonia e a informatização - ou seja, o descola-

a evolução do design sempre esteve vinculada às desco-

mento radical entre o tempo em que as informações são

bertas tecnológicas. Principalmente quando estudamos as

transmitidas e o tempo em que as pessoas e as mercado-

transformações ocorridas nas tecnologias disponíveis para

rias são transportadas. Isto sim representa uma nova revo-

o desenvolvimento de ambientes digitais. “A primeira é

lução, a qual vem se adensando de maneira crítica desde

o surgimento do CSS, que permite mudar o visual de um site rapidamente, sem que se tenha que mexer nas estru-


na busca por talentos :: 31

design na web: construindo sua história :: 31

“O simples fato de a internet se utilizar de tabelas de HTML, com ângulos retos e precisão numérica, traz uma atmosfera ‘Bauhausiana’ ao design interativo” Marcelo Gluz turas. O CSS também é importante quando se fala em deixar o usuário personalizar seu espaço. Outro ponto que merece atenção é a possibilidade de interagir com o dado sem mudar de página. A primeira tecnologia que possibilitou isso foi o Macromedia Flash e agora apareceu o AJAX, tornando a experiência do usuário ainda mais fluida. Os sites se parecem cada vez mais com softwares residentes no lado do cliente. Já o aumento progressivo da banda não é um marco, mas um vetor que aponta a direção das próximas mudanças. Cabe aos designers usarem a banda com sabedoria, o que nem sempre ocorre”. Bauhaus aplicada na web? Analisando a história do design, é inegável o valor que os conceitos produzidos pela Bauhaus exerce nas diferentes gerações de profissionais, por defender a funcionalidade no design, sendo a estética uma conseqüência. Tanto é que a influência da escola alemã parece se refletir em determinados projetos de design para a web. “Todo bom design feito após a Bauhaus traz forte influência dela. Ela rompeu com o Art Nouveau em busca de um design mais racionalista, onde a forma deve ser fundamentada na função. Da mesma maneira, por sua natureza interativa, a web repele adornos supérfluos e exige grande esforço funcional. O simples fato de a internet se utilizar de tabelas de HTML, com Art Nouveau

X

Relaciona-se especialmente com a 2ª Revolução Industrial em curso na Europa, com a exploração de novos materiais e os avanços tecnológicos na área gráfica, como a técnica da litografia colorida que teve grande influência nos cartazes. Caracteriza-se pelas formas orgânicas, valorização do trabalho artesanal, entre outros. Fonte: Wikipédia (http://pt.wikipedia.org/wiki/Art_nouveau)

ângulos retos e precisão numérica, traz uma atmosfera ‘Bauhausiana’ ao design interativo. Não me agrada a idéia de disfarçar as tabelas com curvas. É preferível buscar soluções estéticas que assumam as características da mídia”, afirma Marcelo Gluz. É justamente neste ponto que os especialistas ressaltam a importância de se trabalhar a funcionalidade e a estética como aliados em um projeto de design. “A Bauhaus foi uma experiência histórica rica e maravilhosa, de grande relevância para o contexto da Alemanha, nas décadas de 1920 e 1930. É, ainda, uma lição importante de que é possí-


32 :: design na web: construindo sua história

“A escola americana é a grande influência quando se fala em tecnologia, não só no Brasil como em vários lugares do mundo. Mas vejo uma influência mais ligada aos conceitos de tecnologia do que propriamente ao design” André Nogueira

Escola de Ulm

X

É considerada a mais significativa tentativa de se restabelecer uma ligação com a tradição do design alemão. Foi sucessora da Bauhaus por seus métodos de ensino, disciplinas lecionadas, ideais políticos e por também acreditar que o design tinha um importante papel social a desempenhar. Fonte: Wikipédia (http://pt.wikipedia.org/wiki/Escola_de_Ulm)

vel realizar grandes projetos com pouco mais do que paixão e boas idéias. Infelizmente, a forma como o legado da

Hoje, justamente pelo fato de a história do design na

Bauhaus foi apropriado nos últimos 40, 50 anos tem sido

web ainda ser um processo recente e em construção, as

contra-producente para o design, especialmente no Bra-

opiniões sobre uma possível influência da escola americana

sil. Essa idéia que as pessoas costumam fazer de funcio-

nos projetos brasileiros se tornam bastantes divergentes.

nalidade é inteiramente equivocada. ‘Função’ não existe,

“Não acredito nisso, até porque não há uma ‘escola

pelo menos no sentido funcionalista, com F maiúsculo.

americana’. NYU, CalArts e Berkeley são muito diferentes

‘Função’ como contraposição à ‘Estética’ é um desastre

entre si e têm em comum apenas o fato de estarem nos

conceitual, que só tem prejudicado o design. Recomendo

Estados Unidos. Há coisas muito boas feitas no Reino Unido,

aos designers que esqueçam tudo que acham que sabem

na Suécia, no Japão e no Brasil, sem influência de teórico

sobre a Bauhaus e retornem às fontes para ver o que ela

algum (senão o designer brasileiro não estaria tão ‘na moda’

foi mesmo. Foi uma escola plural, antes de tudo, onde as

em empresas estrangeiras). O que há é um mercado muito

divergências e as dissidências eram respeitadas”, alerta

grande e bastante capitalizado nos EUA, que torna as inicia-

Rafael Cardoso.

tivas produzidas lá muito mais visíveis”, diz Luli.

Dessa forma, a dica é avaliar como os pontos posi-

Para Marcelo Gluz, existe um meio termo envol-

tivos e negativos de cada conceito vão ser aplicados na

vendo esta questão. “Bebemos muito do que é produzido

prática. “Usabilidade é a Bauhaus da web. Como a escola

nos EUA, mas não existe somente uma escola americana,

alemã, ela tem seu lado positivo - colocou a forma a ser-

assim como nem todos faziam design funcionalista na Ale-

viço da função e eliminou efeitos sem significado apa-

manha. Não acho que haja hoje uma grande revolução na

rente. No entanto, tanto os axiomas da Bauhaus como

maneira de fazer, ensinar e compreender design como

os princípios da usabilidade devem ser vistos como um

houve naquela época, mas vejo a indústria americana pro-

poste: servem de iluminação para quem está sóbrio, de

curando novas maneiras o tempo todo. Acho muito inte-

apoio para quem está bêbado. O apego excessivo à dita-

ressante o conceito de projetar plataformas interativas em

dura do funcional - representado por muitos portais de

vez de sites. O Google Maps (http://maps.google.com) e

serviços e por clientes e designers com preguiça criativa -

o YouTube (www.youtube.com) são bons exemplos disso.

acaba por gerar um material monótono, rígido, estúpido.

É possível consumir a ‘experiência YouTube’ de ver vídeos

E isso é o contrário do design”, orienta Luli Radfahrer.

em centenas de blogs mundo afora. Não só no site do You-

Escola americana no design na web

Tube. Outra manifestação importante do design americano

Quando falamos do design brasileiro, a ESDI (Escola

contemporâneo é o processo criativo baseado em proto-

Superior de Desenho Industrial) é um marco em nossa his-

tipação constante da IDEO (www.ideo.com). Ele cai como

tória, pois foi o primeiro curso de design em nível supe-

uma luva em projetos de internet e favorece a inovação”.

rior criado no país. Em termos de influência, os ideais

Um ponto de vista interessante neste debate refere-

da Escola de Ulm foram considerados como o principal

se às tecnologias envolvidas com o design na web.

modelo referencial para a ESDI.

“A escola americana é a grande influência quando se fala em tecnologia, não só no Brasil como em vários lugares


Ă­cones, quando usar? :: 33


34 :: design na web: construindo sua história

do mundo. Mas vejo uma influência mais ligada aos con-

Você fala com alguém em outro continente pelo Skype,

ceitos de tecnologia do que propriamente ao design.

com webcam, e parece que a pessoa está ali, mas não

Acho que o design interativo brasileiro já tem uma iden-

está. Fica um vazio, que só pode ser suprido pelo tátil.

tidade própria bastante forte”, cita André Nogueira, dire-

Temos aí um desafio imenso para o designer de web, não

tor de arte da Simples Consultoria.

é? Se você acrescenta a isto o fato que vivemos numa

O que determina os limites do design na web

sociedade onde todo mundo fecha os vidros ao parar no

Na evolução de sua história, o design na web encon-

sinal de trânsito, para afastar quem está perto, o desafio

tra alguns desafios para o seu desenvolvimento. O pri-

para o design fica ainda maior”, aponta Rafael Cardoso.

meiro deles seria a visão de que a interação homem-com-

Ou seja, como diz Luli Radfahrer, para se fazer coi-

putador é mais fria e distante, além de criar um senti-

sas para o século XXI, é necessário pensar como alguém

mento mais individualista entre as pessoas.

do século XXI. “A interação homem-máquina, por exem-

Em comparação com as outras áreas de conhecimento

plo, não é mais fria como era. E não estou falando de

(design gráfico e de produto), podemos considerar o pensa-

malucos que conversam com o carro para que a gasolina

mento acima como uma das principais limitações (gerando

não acabe, mas de situações bastante corriqueiras: você

novos desafios) para o exercício da prática na web?

recebe cartões virtuais, briga por MSN, gesticula falando

“O computador, tal como conhecemos hoje, está

ao celular e se entristece ao receber um e-mail ruim. Em

falido. Estamos a cada dia reinventando as tecnologias.

comparação com as outras áreas, um blog é muito mais

Parece que quase 90% da população possui celulares. O

quente que um jornal, o YouTube, muito melhor que a TV,

número de pessoas com acesso à tecnologia é cada vez

MMORPGs mais eficientes que fliperamas. É necessário

maior e vertiginoso. E sabemos bem que quanto mais pes-

se livrar de preconceitos e abraçar as novas tecnologias

soas assimilam a tecnologia, novos conceitos surgem, bem

para se criar um design relevante”, ressalta.

como novas tecnologias se desenvolvem. A cada dia que passa, as pessoas têm mais experiência digital e os sites vão deixando de ser aglomerados de botões frios para se

MMORPG

X

Um jogo de computador e/ou videogame que permite a milhares de jogadores criarem personagens em um mundo virtual dinâmico

transformarem em parte da experiência simbólica das pes-

ao mesmo tempo na internet.

soas”, analisa Guilherme Marconi.

Fonte: Wikipédia (http://pt.wikipedia.org/wiki/MMORPG)

Assim, o designer precisará compreender muito bem as transformações causadas pela inserção da tecnologia no cotidiano de nossa sociedade para que os projetos na área possam transpor os possíveis obstáculos existentes.

Trabalhando com a interatividade Em 2000, no livro “Projetando Websites”, Jakob Nielsen, considerado um dos gurus da usabilidade na web,

“Não sei se a interação humano-computador é mais

apontava que o “conteúdo era o rei”, em detrimento da

fria. Isto me parece bem discutível. Mais distanciada, tal-

estética visual de um site. Nos dias atuais, a discussão

vez, no sentido de ser algo que intermedia as relações

está mais focada no desenvolvimento de interfaces digi-

humanas, como o fazem também o telefone e a televisão

tais, onde o usuário e a sua interação nestes ambientes

(tudo que é ‘tele-’, aliás, que vem do grego, para dis-

passam a ser a grande prioridade para o sucesso de pro-

tante). Não vejo isto como algo específico à web. É um

jetos nesta área.

fenômeno mais amplo da Era Industrial, com sua revolu-

Dessa forma, já não é mais um exagero afirmar que

ção nos transportes e na comunicação. Temos a ilusão de

o conceito de interatividade modifica profundamente a

que está tudo perto (imagens instantâneas do último con-

prática do design na web. “Acredito que o ‘dado é o rei’,

flito no Oriente Médio, por exemplo) e, ao mesmo tempo,

justamente porque creio em design centrado no usuário.

paradoxalmente, essa proximidade nos parece ilusória.

O designer deve focar seus esforços em potencializar a


design na web: construindo sua história :: 35

“A principal transformação no design para a web é a busca de sua própria identidade” Luli Radfahrer experiência do usuário em facilidade, rapidez e agradabilidade. Muitas vezes, o designer precisa carregar mais a mão nos grafismos para vender melhor o dado, mas normalmente os grafismos excessivos mais atrapalham do que ajudam o usuário”, diz Marcelo Gluz. Segundo o especialista, o que Nielsen não previa em 2000 era que o entendimento do usuário sobre o que é a internet evoluísse e os dogmas precisariam acompanhar essas transformações. “O que era difícil em 2000, em 2006 pode ser fácil e em 2012 pode se tornar ridículo. Um sistema interativo deve manter o usuário desafiado para que não se torne monótono. Mas também não deve ser um obstáculo entre o usuário e a informação. Esse importantíssimo equilíbrio depende do momento histórico e do nível social e etário do usuário, e, portanto, não deve ser eternizado em dogmas de usabilidade”. “O avanço tecnológico e o surgimento de serviços web2 customizáveis (como o código-fonte do Google Earth, por exemplo) traz desafios que vão além do funcional, comercial, coletivo e HTML. Blogs e comunidades como o Orkut, por exemplo, são lugares em que a questão da funcionalidade não faz mais sentido - o indivíduo vai para lá se divertir, se surpreender, pesquisar, fuçar. Isso faz com que o usuário se torne mais consciente dos recursos e opções, o que muda completamente a relação do visitante com a interface, e, naturalmente, o design”, complementa Luli Radfahrer.

Dicas de leitura:

“Design gráfico: uma história concisa” Autor: Richard Hollis Editora: Martins Fontes

“Uma introdução à história do design” Autor: Rafael Cardoso Editora: Edgard Blücher


36 :: design na web: construindo sua história

Um acervo na história do design na web nacional

largura de 480 pixels. Hoje, a maioria ainda usa configuração

Bate-papo: Márion Strecker, diretora de conteúdo do UOL

de 800 pixels, mas uma boa parte já adotou configuração de 1.024 pixels. Cada mudança dessas afeta profundamente o

Nesta entrevista, conheça os principais aspectos envol-

desenho de um site.

vendo a evolução do design das páginas iniciais do portal,

Wd :: Considerando todas essas mudanças, é certo

além da importância do “UOL História” (http://sobre.uol.

afirmar que a evolução do design na web está direta-

com.br/historia).

mente atrelada à evolução tecnológica?

Wd :: No Brasil, não temos um órgão ou entidade

Márion :: Sim, o design na web depende direta-

que registre oficialmente a história da criação e o desen-

mente das tecnologias disponíveis para a criação, da

volvimento de sites. A própria produção bibliográfica na

velocidade das conexões e das características de har-

área ainda é escassa. Dessa forma, como surgiu a idéia de

dware e software usados pelo grande público. Não

registrar a história do UOL e qual a sua importância?

adianta nada fazermos páginas maravilhosas se elas não

Márion :: Criamos esse site porque achamos que, se nós não fizéssemos esse trabalho, ninguém faria e a história

puderem ser transmitidas rapidamente e visualizadas corretamente pela maioria das pessoas.

se perderia. A cada aniversário do UOL, fazemos um balanço

É possível criar versões diferentes para velocidades e

do que foi realizado e atualizamos o site UOL História. Como

para equipamentos diferentes. Fazer isto num site pequeno

na internet não temos grandes limitações de espaço, pode-

é fácil. Fazer isto num portal do tamanho do UOL, com mais

mos nos dar ao luxo de escrever a história da internet e da

de sete milhões de páginas diferentes e centenas de parcei-

empresa e mantê-las publicadas, para informação do público.

ros de conteúdo, cada qual com sua marca e seu “look &

Wd :: De 1995 aos dias atuais, quais foram as prin-

feel”, é muito mais complicado.

cipais transformações e marcos no design para web (por

Wd :: Hoje, o conceito de Web 2.0 vem causando

exemplo, no início, o posicionamento do logotipo da

uma grande discussão sobre a criação e o desenvol-

empresa apresentava um grande destaque e ocupava um

vimento de sites. Como o UOL interpreta toda essa

espaço muito maior do que o apresentado atualmente)?

movimentação e quais modificações ela vem trazendo

Márion :: Quando foi ao ar, em abril de 1996, o UOL

para o design na web?

tinha apenas oito canais e uma marca desconhecida. Por

Márion :: Atrás do conceito de Web 2.0 estão os

isso, havia um logotipo grande na home page. Hoje, o UOL

recursos que permitem que o público interfira na maneira

tem mais de mil canais que disputam arduamente espaço na

de ver informações ou mesmo páginas na internet. É sen-

primeira página do portal. Além disso, a marca UOL ficou

sacional. Já estamos usando esses recursos em alguns

muito conhecida, por isso pudemos diminuir sua dimensão.

dos nossos serviços interativos.

Primeiro tivemos de desenhar o site para o Mosaic, que

Wd :: O UOL já projeta que tipo de modificações o

era o software navegador que as pessoas usavam em meados

futuro trará para as empresas que trabalham com servi-

dos anos 90. Depois, redesenhamos para Netscape e, mais

ços de internet, principalmente no segmento de sites?

tarde, para Internet Explorer, o navegador que a Microsoft

Márion :: Mais da metade dos nossos assinantes

resolveu instalar junto com o Windows e se tornou o mais

já usa conexão em alta velocidade. Quase metade do

popular do planeta. Para atender ao maior público possível,

nosso público já possui monitor configurado em 1.024

precisamos sempre estar atentos aos navegadores usados e

pixels. Quando a grande maioria do público estiver

fazer com que nossas páginas funcionem bem em todos eles.

nessa nova situação, veremos um novo e grande salto

No começo do UOL, as pessoas usavam modem de

no design da internet. Já temos algumas amostras disso

14.400 bits por segundo! Depois, vieram os modems de

aqui e ali, principalmente nos EUA. Parece inevitável

28.800 bps, 56 kbps e nos últimos anos estamos vendo evo-

também que a web se torne cada vez mais multimídia,

lução semelhante na velocidade chamada de “banda larga”.

com uso mais intenso de animações, áudios e vídeos,

No começo, desenhávamos as páginas sabendo que a maior parte do público usava monitores confi gurados para

além de mais interatividade.



38 :: debate - adaptar-se

É preciso ao

usuário?

Analisando a comunicação visual utilizada pelos supermercados, por exemplo, é possível descobrir o perfil de cliente que cada marca deseja atingir. Fazendo um paralelo desta realidade com o mundo digital, podemos dizer que o público-alvo é quem dita as características de um site?


debate - adaptar-se :: 39

:: Ana Starling

:: Carolina Leslie

Designer e ilustradora - Estúdio Ana Starling

Arquiteta de informação na AgênciaClick

www.anastarling.com

www.lulileslie.com

“Fiquei imaginado os sites numa prateleira de supermercado. A primeira impressão seria uma linha quase contínua, de uma única cor, com alguns retângulos em proporções 3x4, destoantes, que

“Um site de qualidade é aquele que atende os objetivos de negócios da empresa, às necessidades de seus clientes e faz isso de uma maneira clara, simples e, acima de tudo, agradável”

saltam aos olhos como um popup” “Antes de discutir o que pode influenciar a qualidade “Fiquei imaginado os sites numa prateleira de supermer-

de um site, temos que ter em mente o que é um bom site.

cado. A primeira impressão seria uma linha quase contínua,

A meu ver, um site de qualidade é aquele que atende os

de uma única cor, com alguns retângulos em proporções 3x4,

objetivos de negócios da empresa, às necessidades de

destoantes, que saltam aos olhos como um popup.

seus clientes e faz isso de uma maneira clara, simples e,

Essa linha de produtos diferentes, dispostos todos

acima de tudo, agradável.

juntos no mesmo espaço, vistos ao mesmo tempo. Nessa

Um site projetado para meninas de 14 a 18 anos não

rede, por natureza globalizada, a comunicação é comu-

deve agradar a um executivo de 40. E isso é ótimo. Pode

mente homogênea. Parece mais difícil distinguir o

ser que esse site também não agrade a quem o projetou e

público específico ou o que, e como, ele

isso faz parte do processo de design. Temos que lembrar

deve ser interpretado e representado

sempre que o público-alvo pode ser bem diferente de nós

nesse meio. Talvez pela influência dos

e que algumas escolhas devem ser feitas de modo racional

recursos tecnológicos disponíveis, pela

e não emocional.

maçante repetição estética originada por es-

Muitos diretores de arte acreditam que o público-

ses recursos e pelo próprio meio, pela pouca

alvo pode estragar seu layout, porque vêem seu trabalho

exploração do digital, que permite, cada vez

como arte, quando deveriam vê-lo como design. A arte é

mais, a personalização e novos caminhos para

uma forma de expressão que, em geral, tem mais valor se

a comunicação.

não faz concessões a nenhum público. O design, pelo con-

Mas quem é esse público digital? O mesmo

trário, é uma ciência preocupada em encontrar soluções,

dos supermercados? O que está no supermercado

o que não pode ser feito sem se levar em conta às pessoas

está realmente direcionado para o seu público? Na rede dos três W’s, os navegadores podem navegar por oceanos mais distantes e traçar caminhos mais longos, mais personalizados. Explorar o meio é permitido, possível. Mas isso poderá surgir e acabar submerso no meio ditatorial comercial.”

e suas necessidades.”


40 :: debate - adaptar-se

“Você pode tomar a decisão de criar um layout extremamente leve e colorido (supondo que isso agradará o ‘povão’), mas arbitrariamente o :: Rhawbert Costa Sócio da Nitrocorpz Design

produz para uma resolução de tela de 1024x768 pixels. E aí, o porquê

www.nitrocorpz.com

desta decisão?” “Sim e não. Explico: depende da intenção do designer, sua bagagem cultural, imagética e técnica, processo e prazo de produção, remuneração etc. Interesses de ambas as partes, concomitantes ou não, também influenciam o resultado final, para o bem ou para o mal. Apenas definição de público-alvo é insuficiente para se começar a decidir. Precisamos de mais informações, dados concretos, números. Você pode tomar a decisão de criar um layout extremamente leve e colorido (supondo que isso agradará o ‘povão’), mas arbitrariamente o produz para uma resolução de tela de 1024x768 pixels. E aí, o porquê desta decisão? Quais os impactos da mesma? Por que não? É correta? Virtualmente impossível de responder sem obter mais informações. Decisões como esta acontecem às dezenas em uma velocidade incrível quando se projeta algo para a internet. Muitas vezes, o público-alvo nem sequer é o cliente do seu cliente, mas um misto das vontades pessoais dele com as necessidades do mercado que ele quer (ou acredita) atuar. Misture isso com sua interpretação da situação e pronto: você tem mais um projeto disponível para que o mundo todo acesse. Esta analogia apresentada (supermercado) serve como faísca para iniciar discussões mais profundas que independem bastante do tipo de trabalho visual em pauta: pode ser um cirurgião plástico ou um designer de interiores, no final são seres humanos que tomam as decisões, algumas vezes baseadas em fatos concretos, noutras não, mas sempre sujeitos a ‘errar’.”


debate - adaptar-se :: 41

Rodrigo Manfredi Diretor de arte da Submarino.com www.rodrigomanfredi.com

“O público-alvo é sempre o principal ponto a ser considerado quando se vai fazer qualquer comunicação, tanto on-line quanto off-line. Cada segmento de mercado tem necessidades e aspirações diferentes e conhecer esse perfil auxilia a agência ou o estúdio no direcionamento para a comunicação de seu cliente. Quando penso na criação de um website, isso não é diferente: sempre levo em consideração quem está do outro lado da tela e um estudo de seu perfil é essencial para que o usuário possa desfrutar ao máximo as informações e os serviços disponíveis para ele no site. Partindo desse ponto, parece claro dizer que o público-alvo dita o caminho a ser seguido pela comunicação de um site. Isso seria trivial se não estivéssemos falando de uma mídia tão dinâmica como a internet, no qual podemos ir até o limite do que o usuário espera e surpreendê-lo com algo a mais - e quase que, de maneira instantânea, analisar os resultados positivos ou negativos. Geralmente, essas inovações criam um novo hábito no consumidor que estava acostumado apenas com o mesmo e acabam virando referência para os próximos sites que vão ter o conteúdo semelhante ao seu. Elas são responsáveis, em sua grande maioria, pelas novas tendências que são seguidas por todos, mas só as que são assimiladas pela grande audiência da internet se estabelecem como parte relevante nos sites comerciais. Minha conclusão é que existe uma via de mão dupla, onde de um lado estão designers e desenvolvedores criando e desenvolvendo novas tecnologias e aplicações para a internet e do outro o público-alvo que, a cada dia, usa a internet de maneira mais intensa e torna-se mais crítico em relação ao que é útil e o que pode ser descartado nos sites.”

“Quando penso na criação de um website, isso não é diferente: sempre levo em consideração quem está do outro lado da tela e um estudo de seu perfil é essencial”


42 :: debate - adaptar-se

Participação dos assinantes

pa gan r ticip e he prê e mio s!

O público-alvo dita a qualidade do seu site?

Paulo Altieri comunicacao@adg.org.br

Não necessariamente. Por exemplo, um site com apelo popular não significa que seja melhor ou pior em termos de qualidade. Para um público “requintado”, a visão de um site como este é diferente da do público-alvo; o mesmo ocorreria se fosse ao contrário. Aqui a qualidade se aplica a ambos, mas o que dita isso é ponto de vista de um público. Outro público, outro ponto de vista.

vencedor!

Vânia Marques vania.marques@vivo.com.br

Nosso “freguês” é o usuário e suas críticas, sugestões e comentários que norteiam o nosso trabalho. Obviamente buscamos sempre surpreendê-los, antecipando suas necessidades e imprimindo um padrão de qualidade a altura do público-alvo.

Anderson Silva webmaster@nhsinformatica.com.br

A qualidade do site está diretamente relacionada com o grau de exigência do seu público-alvo. Isso acontece não só com sites, mas com programas de televisão, estilos musicais, moda, arquitetura etc.

Julio Cezar juliocezar@nce.ufrj.br

Acredito que exerça uma certa influência, porém não será o público-alvo em si o fator determinante para a qualidade do site. Um site de qualidade será sempre aquele que busque um diferencial, mesclando informação de forma clara e design moderno e ousado.

Michel Rozatti mike.net@uol.com.br

O público defi ne o fi m do site ou a “tribo” a qual ele pertence. A qualidade é atingida exatamente quando o site supre as necessidades de seu público e só vai conseguir realmente atingir seus objetivos, isto é, ter acessos, quando for considerado interessante por esse público.

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

O autor da melhor resposta ganha prêmios.


e-mais - sites polĂ­ticos :: 43


44 :: e-mais - virais na web

Virais na web:

uma “nova” fórmula para se propagar informação? Provavelmente, você recebeu no ano passado uma

hoje é sinônimo de bom, de marcante, de web de primeira.

imagem, onde o desafio era descobrir, dentre os diversos

Sendo bom e marcante, a peça tem a capacidade de ser

objetos que a ornamentavam, referências a bandas de

passada para frente no boca-a-boca”, acrescenta André

pop/rock. Ou, ainda, foi estimulado pela indicação de

Matarazzo, sócio da Gringo.nu (www.gringo.nu).

um amigo a entrar no site www.subservientchicken.com

Virais como conseqüência da Web 2.0?

e digitar ações para que uma galinha “louca” fizesse o que

Analisando os recentes projetos lançados no mercado,

você pedisse.

é possível afirmar que o atual conceito de participação

Criatividade e estratégia para disseminar uma

ativa dos usuários na evolução dos ambientes interativos

informação, fugindo do formato de propaganda

explique o crescimento das campanhas virais pela web e o

tradicional. Os exemplos acima são alguns dos bons

investimento de grandes marcas neste tipo de projeto?

casos de campanhas virais, que hoje se tornaram uma das

Para Ricardo Figueira, diretor de criação da

principais ferramentas para as grandes marcas espalharem

A g ê n c i a C l i c k ( w w w. a g e n c i a c l i c k . c o m . b r ) , a l g u n s

seus planos de comunicação ao mercado. Ou seja, elas

pontos podem esclarecer melhor essa percepção sobre

representam para a internet a tradução da velha tática do

participação interativa, viralidade e investimento. “O

boca-a-boca.

primeiro deles é que o consumidor é, por natureza, um

“Marketing viral é uma ferramenta de guerrilha e uma

formador de opinião. Alguém que, de alguma forma,

forma de colocar uma marca na web como informação e

passa por experiências que lhe proporcionam vantagens,

não como propaganda. É transformar o produto ou serviço

benefícios ou não. É alguém que vive em redes sociais, seja

de uma empresa em um conteúdo divertido e inovador com

no trabalho, entre amigos de faculdade ou simplesmente

o objetivo de que o consumidor passe a mensagem para

p o r a f i n i d a d e d e i n t e re s s e . Tro c a n d o e m m i ú d o s , o

frente. Gerar um boca-a-boca on-line”, explica Marcelo

consumidor é alguém capaz de gerar o bom e velho boca-

Coelho, da Espalhe (www.espalhe.inf.br), agência de

a-boca, e a diferença é que a internet tornou-se uma

marketing de guerrilha do Brasil. “A verdade é que ‘viral’

ferramenta de amplificação disso em larga escala, com uma


e-mais - virais na web :: 45

dimensão e velocidade absurdas”, diz.

As etapas na criação de um viral

Outra questão envolve a transformação na forma

Segundo os especialistas, as etapas na hora de se

como a mensagem é transmitida. “Se antes a propaganda

criar uma campanha viral pela web seguem a mesma

era baseada em emissão e recepção, hoje ela não só pode

l i n h a u t i l i z a d a p a r a o u t ro s t i p o s d e c a m p a n h a s o n -

como deve transformar um receptor em também emissor.

line. “Definição, planejamento, criação e produção. A

Na minha opinião, essa é uma das grandes diferenças da

viralização ocorre (ou não) uma vez que a campanha já

propaganda moderna para a propaganda tradicional, onde

está no ar. Se o usuário se identificar, ela emplaca. Se não,

a mensagem deve ter potencial de reação e o meio deve

não decola. Na nossa experiência, não é recomendável se

permitir a sua redistribuição”, afirma.

confiar 100% no viral como estratégia de divulgação. É

A conseqüência desse cenário para quem trabalha com

necessário investir em formas tradicionais de divulgação,

ambientes digitais é um maior investimento das grandes

pelo menos no começo da campanha”, aponta Michel Lent

empresas em formatos de sites que vão além do tradicional

Schwartzman, diretor geral da 10’Minutos Interactive

modelo institucional. “Muitos usuários procuram uma

(www.10minutos.com.br).

relação mais emocional com a marca (e vice-versa), e esse

Traçar o perfil do público-alvo também é um bom

tipo de relação é mais fácil de ser construído através de

caminho para se garantir o sucesso dessas campanhas.

sites periféricos ao site ‘institucional’. É por isso que existe

“Primeiro de tudo, conhecer profundamente o público

tanto espaço para hotsites, campanhas menores, virais.

primário a ser atingido, seus valores e seus hábitos com

Hoje, as marcas usam vários canais on-line e não apenas o

os meios interativos. Após entender exatamente em quem

seu .com.br”, aponta Matarazzo.

você vai provocar a ‘reação’, é imprescindível projetar o

Trabalhando com os riscos

tipo de ‘reação’ a ser provocada e, principalmente, qual

Os riscos envolvidos em campanhas virais são grandes,

é a mensagem residual que ela vai transmitir. Por fim,

pois seu sucesso dependerá exclusivamente de sua afinidade

disponibilizar e desenvolver meios para que as pessoas

com o público-alvo para espalhar seus objetivos, além da

possam repassar as suas experiências ou convidar novos

necessidade de se passar uma espontaneidade. Dessa forma,

participantes para a ação”, orienta Ricardo Figueira.

existe alguma forma para se medir os riscos antes de lançar uma campanha desse tipo?

Falando no desenvolvimento de sites voltados para campanha virais, colocar o termo “indique/envie

“O viral mais fácil é aquele que se espalha dentro

para um amigo” parece ter se tornado uma ferramenta

d e u m t a rg e t d e t e r m i n a d o , p o r a f i n i d a d e . M a s t e m

padrão. “Quanto mais fácil para o consumidor repassar a

também o viral que se espalha para todos os lados,

mensagem, maior será o retorno, por isso a mecânica de

indeterminadamente. São as ‘grandes idéias’ da web que

‘indique um amigo’ é tão popular. Mas, mesmo esta simples

todos sabemos e comentamos. Normalmente, o viral vem

mecânica, pode ser incrementada de alguma maneira. Um

acompanhado de riscos sim, e nem sempre mensuráveis.

exemplo é o ‘Share the Love!’, da Amazon: um esquema

Entendo que conceitualmente seja arriscado, mas em compensação o projeto é mais barato (viral de verdade

Payback

X

Ou prazo para recuperação do capital. É um indicador voltado

se espalha sem comprar mídia, por exemplo, que é cara)

à medida do tempo necessário para que um projeto recupere o

e o alcance do possível estrondo é fenomenal, fora que

capital investido.

quando algo cativa o usuário emocionalmente, o payback

Fonte: USP (http://tinyurl.com/meojo)

de b r a n d a w a re n e s s é gigantesco. Em tudo na vida, quanto maior o risco, maior possível o ganho envolvido”,

Brand awareness

afirma André Matarazzo.

Refere-se ao conhecimento que o público tem da marca. Fonte: Revista FAE BUSINESS (http://tinyurl.com/lm72j)

X


46 :: e-mais - virais na web

para indicar o produto que você comprou, dando descontos para amigos e comissão na venda para quem indicou. Tudo

Exemplos de campanhas virais

isso por trás de uma bonita mensagem de ‘compartilhe o amor”, cita Ricardo Cavallini, diretor de operações da Euro

- Algoz - Fiat (www.algoz.com.br)

RSCG 4D (www.eurorscg4d.com.br).

- Burger King - Subservient Chicken

A tática é investir na curiosidade para que o usuário

(www.subservientchicken.com)

fique tentado a descobrir a informação que se deseja

- Crossbar - Nike (http://tinyurl.com/lyxgy)

espalhar. “Geralmente, são sites simples, que visam sempre

- “Do you see music?” - Virgin

a facilidade para o usuário transmitir a mensagem para

(http://tinyurl.com/8ackj)

o seu grupo de influência. Mas isso não é uma regra. O

- Fale Benq (www.falebenq.com.br)

site www.oquetemnocopovermelho.com.br, por exemplo,

- Grocery Store Wars (www.storewars.org)

provoca o usuário a participar e descobrir o enigma. A

- Marc Ecko (www.stillfree.com)

própria navegação do site é complicada para instigar a

- “Neither this site nor Mozilla is connected with

ânsia do visitante pela descoberta. Hoje, para conquistar o

Microsoft” (www.ie7.com)

usuário, precisamos oferecer algo ousado e atraente para

- Sith Sense (http://tinyurl.com/zx9cw)

que ele se sinta orgulhoso de ter achado aquele site e

- Spread Internet Explorer

recomende para todos os seus amigos. Uma grande forma

(www.spreadinternetexplorer.com)

de fazer isso é permitir que o usuário participe. Deixe

- Super Bonder Reality Test

que o internauta, por exemplo, produza um conteúdo

(http://infectous.plugin.com.br/reality)

com a informação da sua empresa e possibilite que ele

- Whopperettes (www.whopperettes.com)

distribua facilmente para os amigos. Métodos muito usados ultimamente são o ‘Envie para um amigo’, a personalização

Fontes: André Matarazzo, Marcelo Coelho, Michel Lent, Ricardo Cavallini e Ricardo Figueira

da mensagem e o RSS”, indica Marcelo Coelho.

Dicas de leitura

Principais etapas na criação de virais

- “O marketing depois

1) Identificar um diferencial que irá viralizar o

de amanhã”

produto;

(www.depoisdeamanha.com.br)

2 ) Te r u m a i d é i a i n o v a d o r a e m c i m a d e s t e

Autor: Ricardo Cavallini

diferencial;

Editora: Digerati Books

3) Identificar os disseminadores desta idéia na web: blogueiros, jornalistas, usuários de l i s t a s d e d i s c u s s õ e s o u u s u á r i o s d e re d e s d e relacionamento;

“Blog corporativo”

4) Traçar uma estratégia para a viralização da idéia:

(www.blogcorporativo.net)

onde atacaremos? Quais disseminadores tentaremos

Autor: Fábio Cipriani

conquistar primeiro?;

Editora: Novatec

5) Soltar o viral. Fonte: Marcelo Coelho (Espalhe - www.espalhe.inf.br)


estudo de caso - Samambaia :: 47


48 :: FIND

O FIND na visão de um designer Por Felipe Memória Designer da Globo.com e professor da PUC-Rio. Mediador da mesa-redonda realizada durante o evento. Se vocês me perguntarem qual foi a primeira im-

seus clientes e fazer apenas trabalhos interessantes.

pressão que tive do Fórum Internacional de Design e

Como o custo se mantém baixo e, para ele, “dinheiro

Tecnologia Digital - FIND, posso dizer que o evento foi

não é importante”, a Sagmeister Inc. pôde sair do con-

o mais legal que eu participei nos últimos anos. Isso por-

vencional.

que todas as palestras tiveram um nível excelente, com

Sagmeister causou polêmica ao afirmar outra coisa

trabalhos extraordinários e diferentes pontos de vista.

que também concordo totalmente, mas que pode pa-

Um bom exemplo disso foi o culto a simplicidade: do

recer muito estranho vindo de um designer: nem todo

“Less is more”, defendido pelos primeiros palestrantes,

mundo precisa de uma marca. Reparei isso quando minha

versus o “Less is bore”, do Stefan Sagmeister.

mulher me pediu uma marca para a empresa de eventos

Falando nele, considerei a sua presença a maior

que ela estava abrindo, já com alguns clientes. Meu pon-

“surpresa” do evento, pois muitos aqui no Brasil não

to é o seguinte: a marca é irrelevante neste momento.

conheciam seu trabalho, que é simplesmente genial e

Vai trazer zero clientes a mais. Precisamos pensar no que

inspirador. Stefan levou o público ao êxtase com seus

realmente importa: o produto.

projetos experimentais supercriativos e loucos. Falou

E foi isso que Stefan defendeu na mesa-redonda.

da dificuldade em deter o crescimento de seu estúdio,

Recusou receber $ 20 mil de um cliente, afirmando que

o que faz com que tenha liberdade para poder escolher

ele não precisava de uma marca e bolou uma outra es-

Networking e visita aos estandes dos patrocinadores durante o coffee-break

Gui Borchert se preparando para sua palestra sobre criatividade e inspiração

Mais de 500 profissionais lotaram o Copacabana Palace para prestigiar o evento

PJ Pereira respondendo a pergunta de um participante on-line

Sagmeister se preparando para a mesa-redonda

Inamoto apresentando um dos cases da AKQA


FIND :: 49

tratégia para a empresa, dando gratuitamente idéias de

Microsoft em que eles usaram um enorme e tradicional

onde o dinheiro deveria ser realmente investido para

GIF animado no fundo da página.

fazer o negócio andar. Sagmeister sai da mesmice e da mediocridade. Virou ídolo e foi aplaudido de pé.

Em seguida, Gui Borchert foi dogmático em relação à busca contínua pela excelência. Para isso, apresentou

Já PJ Pereira e Rei Inamoto abriram o FIND com

cases interessantes da RGA, em que existiam limitações

uma apresentação bem feita e organizada, mostrando um

de projeto, como: briefing simples demais, trabalhos que

bom nível de entrosamento. A dupla da AKQA abordou

poderiam não ser interessantes num primeiro momen-

muitos conceitos do uso da internet como fonte de en-

to (como o cartão de natal da empresa e o Nike Run),

tretenimento, como plataforma para jogos on-line.

mas que tiveram um resultado surpreendente através de

Dentre os cases, destaque para as campanhas en-

abordagens diferentes e criativas.

volvendo games, que são um prato cheio para abordar a

Um ponto interessante de sua palestra, no qual me

questão da experiência do usuário. Os cases mostravam

identifiquei imediatamente, foi a força de vontade e a

integração do produto com celular e e-mail, idéias com

quantidade de horas de trabalho. Tal posicionamento

potencial de viralidade e principalmente possibilidade

causou até certa polêmica também na mesa-redonda.

de pessoas interagirem. O vídeo da campanha do X-Box

O ponto principal, muito bem destacado pelo PJ no

mostrou exatamente isso, com a multiplicação dos joga-

debate, é o seguinte: por mais que você seja talentoso

dores. O slogan genial do produto diz tudo: “X-Box live:

e consiga fazer coisas sensacionais em oito horas diárias

It’s good to play together”.

de trabalho, sempre vai aparecer alguém tão talentoso

Outra visão importante, destacada por Rei, ressal-

quanto você que trabalhe mais horas. E o mercado é as-

tava como eles tomam extremo cuidado em não aplicar a

sim, competitivo. Não é realmente muito popular afirmar

tecnologia simplesmente por ela existir, pelo desejo de

isso, mas concordo totalmente que coisas extraordiná-

aplicá-la. Como prova disso, apresentaram um case da

rias são pagas com olheiras.

PJ Pereira, Adriana Melo, Gui Borchert, Stefan Sagmeister, Rei Inamoto e Felipe Memória

Fotos: Odilon Jr. (odilon.fotografias@bol.com.br)


50 :: estudo de caso - Bicmusic

A era dos sites como estratégia de branding O gerenciamento estratégico de uma marca,

x

também conhecido pelo nome de branding, vem

Branding

sofrendo profundas transformações diante do uso cada

É o conjunto de ações ligadas à administração das marcas, nas

vez maior da internet no cotidiano das pessoas. Dessa forma, as ações on-line se tornaram importantes ferramentas de aproximação e

mais diversas áreas, com o objetivo de manter ou ampliar sua posição no mercado e consolidá-la cada vez mais na mente dos consumidores. Fonte: Desafio21 (http://tinyurl.com/khgrb)

relacionamento com o público-alvo das grandes empresas. Um exemplo recente desse cenário aparece

investirem no conceito de entretenimento na hora

no hotsite da campanha BIC Music (www.bicmusic.com.

de se criar e desenvolver campanhas interativas,

br), que apresenta o mundo musical como temática

tendência que começa a vingar no Brasil. Quais são os

para os novos isqueiros ilustrados da empresa.

desafios na hora de se trabalhar com tais projetos?

“O projeto é uma ação 100% de branding,

Heloísa :: É uma forma de fazer uma aproximação da

objetivando rejuvenescimento de marca e aproximação

empresa com o seu target, e não simplesmente vender

com seu target. Além disso, a BIC decidiu lançar a

um produto. É achar pontos comportamentais do seu

campanha de divulgação exclusivamente pela internet,

público-alvo e criar uma aproximação fundamentada nos

por se tratar de um tema musical e bastante vinculado

seus hábitos e gostos a fim de fazer parte o maior tempo

ao público jovem, que tem uma afinidade altíssima

possível não só da sua rotina, mas também do lazer.

com a inter net”, explica Heloísa Ticianelli, gerente

Wd :: Falando na interface gráfica do hotsite,

de Marketing e Novos Negócios da EverMedia (www.

vemos que os isqueiros personalizados da campanha

evermedia.com.br), responsável pelo planejamento e

BIC Music receberam um destaque com as ilustrações

criação da campanha.

de cada estilo musical (Rock, Soul, Eletrônica, Hip Hop

Para sabermos mais detalhes do desenvolvimento

e Pop Rock). De que forma vocês trabalharam a criação

deste projeto, além de Heloísa, conversamos também

destas ilustrações para que elas pudessem se encaixar

c o m D o u g l a s B o c a l ã o , c o o rd e n a d o r d e c r i a ç ã o d a

dentro do projeto gráfico?

agência. Confira a seguir.

D o u g l a s : : To d a s a s i l u s t r a ç õ e s p a s s a m a i d é i a

Wd :: Em termos de internet, já se tornou comum

de movimento, cores e da liberdade de expressar seu

no mercado inter nacional as grandes empresas

próprio estilo musical. A idéia principal é que cada


estudo de caso - Bicmusic :: 51

usuário possa olhar para o site e se identificar com ele. Além disso, todos os estilos musicais trabalhados no

Quais influências e como vocês definiram esta etapa dentro do processo de criação?

site têm características marcantes. Buscamos trazer uma

Douglas :: Nossa principal influência foi a street

identidade forte também para o layout. Para chegarmos

art (arte de rua), onde a diversidade de cores e

neste resultado, a equipe saiu a campo para estudar

d e f o r m a s o rg â n i c a s é m u i t o g r a n d e . A r i q u e z a d e

referências gráficas em casas noturnas, muros grafitados

detalhes que podemos encontrar passeando pelas

e capas de disco. O mix de tudo isso resultou em formas

r u a s é i m p r e s s i o n a n t e . Vo c ê p o d e v e r c a r t a z e s ,

orgânicas, setas, curvas e cores harmoniosas.

grafites, placas de trânsito e até sinalização de lojas

W d : : Vo c ê s u t i l i z a r a m m u i t a s s e t a s e t r a ç o s or namentados para indicar as seções do hotsite e

que podem inspirar e trazer aquele estalo que faltava na criação de um site.

orientar a navegação do usuário, além delas ilustrarem

W d : : A t i p o g r a f i a d o p ro j e t o é i n s p i r a d a e m

a própria marca do projeto. Que tipo de estudos vocês

fontes fantasia e parece ter recebido um tratamento

fizeram para definir o estilo gráfico a ser utilizado?

e s p e c i a l . C o m o a s u a e s c o l h a s e i n s e re d e n t ro d o

Douglas :: Faz parte da nossa metodologia o processo

conceito geral do hotsite?

de imersão, onde vamos buscar referências gráficas

Douglas :: A tipografia também sofreu influência

mundiais, seja por meio de livros, revistas, observando as

da arte de rua. Na maioria dos títulos, aplicamos

pessoas na rua ou buscando sites pela internet.

contornos característicos de grafitismo, além das

Mas não podemos confundir imersão com meditação.

cores fortes e marcantes. Utilizamos a família de

Apenas pensar no assunto não traz resultado, é preciso

fonte Bauhaus, que apesar de ser uma fonte clássica,

muito esforço, rascunhos, estudo de cores, versões preliminares, até alcançarmos o layout desejado. Neste caso, definimos que as formas utilizadas no hotsite tinham que expressar movimento - um dos elementos primordiais na música. Quisemos ambientar o hotsite para trazer as mesmas sensações de uma balada. Wd :: A combinação cromática do hotsite é puxada para tons fortes, porém elas ficaram bem harmoniosas.

“A equipe saiu a campo para estudar referências gráficas em casas noturnas, muros grafitados e capas de disco” (Douglas Bocalão)


52 :: estudo de caso - Bicmusic

transmite modernidade e se encaixa perfeitamente com a comunicação criada para o site. Wd :: O hotsite foi projetado para resoluções de tela acima de 1024x768 pixels. Por que vocês adotaram este padrão, já que as estatísticas no Brasil ainda apontam um certo equilíbrio nesta área? Douglas :: Na verdade, o hotsite prioriza a resolução 1024, mas também atende a 800x600. O usuário tem uma experiência maior com a resolução 1024, já que visualiza mais elementos na tela. Porém, a navegabilidade continua sem nenhum comprometimento em 800x600.

www.bicmusic.com.br

Mas acreditamos que a tendência seja a resolução 1024.

Todos os 52 samples foram criados exclusivamente

Wd :: Um dos destaques do projeto está na

para a BIC. O mixer é a sustentação do concurso cultural.

disponibilidade da ferramenta BIC Web Mixer, no qual

Quem gosta de música vai entrar no site, criar a sua,

o produtor musical Veiga criou, com exclusividade, os

divertir-se com os downloads e concorrerá a iPods. Os

52 samples disponíveis por lá. Como surgiu a idéia de

vencedores ainda poderão ter suas músicas em MP3 no

criar um mixer on-line e que tipo de tecnologia foi

seu próprio iPod.

utilizada para que ele pudesse se tornar funcional?

Wd :: Ainda sobre tecnologia, a EverMedia

Heloísa :: A BIC está lançando uma série limitada

criou uma versão Wap do hotsite. Diante da

temática de música. A EverMedia ficou responsável por

experiência com este projeto, vocês poderiam citar

toda estratégia exclusivamente on-line. A idéia foi criar

os principais desafios no desenvolvimento de sites

uma experiência inovadora para quem aprecia música e, a

para dispositivos móveis?

partir daí, surgiu a idéia do BIC Web Mixer. A ferramenta foi toda desenvolvida em Flash 7.0 e ASP.

Douglas :: Uma das principais barreiras é a d i v e rg ê n c i a e n t re a s t e c n o l o g i a s d a s o p e r a d o r a s e


na web ::::53 estudoTecnologia de caso - Bicmusic 53

das diferentes plataformas dos aparelhos. Podemos comparar a atual fase dos dispositivos móveis com a época em que o Netscape ainda brigava com o Internet Explorer e os designers quebravam a cabeça para criar sites compatíveis com os dois browsers. O mais sensato a fazer é seguir os padrões de desenvolvimento da W3C (The World Wide Web Consortium - www.w3.org) e criar wapsites simples, com navegação objetiva e fácil.

Wapsite da BIC Music

x

No wapsite desenvolvido pela Evermedia para a BIC Music, o internauta pode acessar a página por meio do browser do celular e fazer o download de 15 ringtones (toques para celular), escolhendo a música e o formato que preferir. Além disso, as músicas produzidas pelo próprio usuário poderão ser baixadas, via cabo, para os celulares compatíveis com MP3.

Wd :: Assim como a campanha, a sua divulgação será feita especificamente em mídia online e focada em portais voltados para o público jovem (Vírgula, Jovem Pan e MTV). Quais fatores influenciaram nesta decisão? H e l o í s a : : A campanha está focada no público jovem, pois é o que tem maior afinidade com a música. Por sua vez, é quem passa mais tempo na web. O Brasil está entre os países que mais gastam tempo na web e esse índice vem crescendo significativamente. Por esta razão, veio a escolha do investimento exclusivo neste canal e nos portais com perfis jovem e musical.

“Nossa principal influência foi a street art (arte de rua), onde a diversidade de cores e de formas orgânicas é muito grande” (Douglas Bocalão)


54 :: Tecnologia na web

Tecnologia na web CSS Hacks: em busca da renderização igualitária nos navegadores Reúna um grupo de desenvolvedores web em uma mes-

Explorer calculam a largura dos elementos diferente de bro-

ma sala e faça a seguinte pergunta: “quem nunca precisou

wsers como Konqueror, Mozilla, Opera e Safari (KMOS). Esse

utilizar CSS Hacks para garantir uma boa renderização nos

problema só era resolvido com o uso de CSS Hacks”, afirma

mais diversos navegadores de internet, por favor, levante a

Diego Eis, criador do Tableless (www.tableless.com.br).

mão?”. Certamente, uma minoria vai conseguir se destacar dentro do grupo.

Outro muito comum envolve o modo de compatibilidade definido (quirks ou strict mode). “Um dos mais comuns, e

“Todos nós, envolvidos com desenvolvimento, já passa-

que pode ser facilmente evitado, é colocar, inadvertidamen-

mos pela frustrante - ou para muitos, já esperada - experiên-

te, o IE6 para trabalhar em modo de compatibilidade (quirks

cia de constatarmos que nosso layout visualizado com preci-

mode), o que faz com que tenha os mesmos problemas na

são e perfeição em um navegador X, mostra-se totalmente

interpretação do Box Model que o IE5.x/Win tem. Isso acon-

‘quebrado’ e irreconhecível no navegador Y. Inconsistências

tece quando se coloca uma linha em branco, um comentário,

desta ordem devem-se ao fato de um mesmo código ser tra-

ou uma declaração XML antes do DOCTYPE. E muita gente,

tado de modo diferente por diferentes navegadores. E isto

sem saber porque está tendo problemas, acaba se valendo

não é exclusividade das CSS. Qualquer código ou script a ser

de hacks para que sua página seja exibida de forma correta

interpretado no lado do cliente, obviamente dependerá do

no IE6”, alerta Bruno Torres.

dispositivo que o usuário estiver usando”, relata Mauricio

IE: trabalhe com comentários condicionais

Samy Silva (www.maujor.com/blog).

Segundo os especialistas consultados pela reportagem,

Então, como poderíamos definir os CSS Hacks? “São

quando falamos de interpretação de CSS para o Internet Ex-

códigos CSS que se aproveitam de uma determinada falha

plorer, uma boa pedida é se aprofundar no assunto “comen-

(ou falta de suporte a algum recurso) em um determinado

tários condicionais”.

browser para fazer com que alguma propriedade CSS seja

“O Internet Explorer é a principal fonte de problemas

aplicada exclusivamente para aquele browser ou em qualquer

para os desenvolvedores, no que se refere à falhas de inter-

um exceto aquele. Ou seja, funcionam mais ou menos como

pretação de estilos CSS. Hoje sabemos da existência de uma

‘filtros’ detectores de browsers. Um filtro não confiável a lon-

funcionalidade do Internet Explorer, desde a versão 5 (para

go prazo, já que mudanças no código do browser podem fa-

Windows), que permite enviar determinado código apenas

zer com que um ou mais hacks deixem de funcionar”, explica

para este browser, inclusive com a possibilidade de enviar

o desenvolvedor web Bruno Torres (http://brunotorres.net).

apenas para versões específi cas. São os comentários con-

Erros mais comuns de renderização

dicionais, comentários HTML que são interpretados apenas

Entendido o conceito da aplicação de CSS Hacks, pode-

pelo Internet Explorer. Tudo que estiver dentro de um comen-

mos apontar algumas das principais falhas na interpretação

tário desse tipo será ignorado por qualquer browser, já que

dos navegadores que obrigam os desenvolvedores a utilizá-

é, efetivamente, um comentário, mas será interpretado pelo

los. “Sem dúvida, o erro mais comum é o de Box Model. Re-

IE. É isso que devemos usar, já que é uma funcionalidade do-

sumidamente, é um bug de cálculo de largura de elementos.

cumentada pela Microsoft e funciona a contento, sem causar

As versões 5 e 6 (dependendo do DOCTYPE) do Internet

maiores problemas”, orienta Bruno.


Tecnologia na web :: 55

nível avançado

Versão 7 do IE trará boas notícias? Em breve, a Microsoft vai lançar no mercado a versão 7 do Internet Explorer e promete melhorar a interpretação do

Referências on-line

CSS em seu navegador (http://tinyurl.com/9wev8). “O IE 7, para citar alguns avanços, virá com suporte mais robusto para

- Box Model Hack http://www.maujor.com/tutorial/boxmodelhack.php

seletores CSS2, restabeleceu o elemento HTML como a raiz do documento (acabou com a entidade superior ao HTML),

- Comentários Condicionais

não mais reconhece o hack underscore e corrigiu o bug da

www.maujor.com/tutorial/condcom.php

double margin”, cita Maurício Samy. “Se o IE7 for tudo isso que estão falando, muitos de nos-

- IE7 and IE7 http://meyerweb.com/eric/thoughts/2005/10/17/ie7-and-ie7/

sos problemas estarão resolvidos. Poderemos desenvolver com mais tranqüilidade e teremos mais recursos para utilizar

- O que é Quirks Mode?

em nossos projetos. A vida do desenvolvedor se tornará mais

http://www.revolucao.etc.br/archives/o-que-e-quirks-mode/

fácil. Tomara. Caso contrário, o IE7 será um novo fantasma, um novo problema”, analisa Diego Eis. No entanto, a grande esperança reside no trabalho cole-

- O que são, para que servem e exemplos de CSS Hacks http://www.tableless.com.br/csshacks

tivo incessante de pesquisadores pelo mundo. “Hoje em dia, após alguns anos de uso massivo do CSS, com diversos desen-

- Pandora’s Box (Model) of CSS Hacks And Other

volvedores ao redor do mundo pesquisando comportamentos,

Good Intentions

buscando formas de contornar falhas de maneira ‘lícita’, ou seja, sem o uso de hacks, temos cada vez menos que recorrer a estes para resolver nossos problemas”, finaliza Bruno.

Livros

http://tantek.com/log/2005/11.html#d26t1820

- Position Is Everything http://www.positioniseverything.net/index.php

- Quirks Mode http://www.quirksmode.org

- “CSS Hacks & Filters” Autor: Joseph W. Lowery (http://tinyurl.com/z7x5t)

- “Eric Meyer on CSS”

- Vídeo-tutorial sobre CSS Hacks http://www.tableless.com.br/videotutorial/videotutorial2/

Autor: Eric Meyer (http://tinyurl.com/l2rho) Fontes: Bruno Torres, Diego Eis e Maurício Samy Fontes: Bruno Torres e Maurício Samy


56 :: tutorial

Caminhando pelo HTML - Parte 5 Elcio Ferreira Desenvolvedor e instrutor na Visie Padrões Web http://visie.com.br/

Em nosso singelo tutorial do mês passado, escreve-

recemos informações adicionais a respeito dos outros docu-

mos a arquivo HTML muito simples, para demonstrar como

mentos, através do atributo title. Vamos fazer a mesma coisa

é simples a linguagem HTML. Este mês, vamos tornar as

agora, usando outra tag do HTML. Dentro da seção HEAD de

coisas divertidas, relacionando nosso arquivo HMTL com

nossa página, vamos inserir:

outros arquivos. Isto é o que torna a web especial, a ca-

<link href=”florentina.xml” />

pacidade de relacionar documentos. Para começar, vamos falar da forma básica e essencial de relacionar documentos

<link href=”florentina.css” /> <link href=”florentina2.css” /> <link href=”print.css” />

H T M L : a t a g A . Vo c ê v a i s e l e m b r a r q u e , m ê s p a s s a d o ,

Com isso, relacionamos nosso documento a quatro outros,

construímos um trecho de código assim:

um arquivo RSS e três arquivos CSS. Mas isso não basta. É preci-

<ul>

so dizer ao navegador o que fazer com esses documentos e de

<li>Home</li> <li>Produtos</li> <li>Serviços</li> <li>Trabalhe conosco</li> <li>Sobre</li> </ul>

Essa lista será o menu de nosso site. Para isso, será pre-

que tipo eles são. Fazemos isso com os atributos rel e type: <link rel=”alternate” type=”application/rss+xml” href=”florentina.xml” /> <link rel=”stylesheet” type=”text/css” href=”florentina. css” /> <link rel=”alternate stylesheet” type=”text/css” href=”florentina2.css” />

ciso que, ao clicar, nosso feliz visitante seja enviado a uma

<link rel=”stylesheet” type=”text/css” href=”print.css”

nova página. Você provavelmente sabe como se faz isso:

/>

<ul>

Com isso, estamos dizendo ao navegador que o pri-

<li><a href=”home.html”>Home</a></li> <li><a href=”produtos.html”>Produtos</a></li> <li><a href=”servicos.html”>Serviços</a></li>

meiro arquivo é um formato alternativo de nosso conteúdo (alternate), e que ele é do tipo application/rss+xml, ou seja,

<li><a href=”trabalhe.html”>Trabalhe conosco</a></li>

que é um arquivo RSS. Na segunda linha, dizemos ao nave-

<li><a href=”sobre.html”>Sobre</a></li>

gador que estamos relacionando uma folha de estilo (sty-

</ul>

lesheet) e que é do tipo text/css, ou seja, um arquivo CSS.

Simples, não? Talvez simples demais. Podemos aproveitar esse

A terceira e quarta linhas também são do tipo CSS, mas a

trecho de código para acrescentar informações adicionais a respeito

terceira apresenta uma folha de estilo alternativa (alternate

da página para qual linkamos. Por exemplo:

stylesheet). Isso fará com que o navegador não carregue

<li><a href=”sobre.html” title=”Saiba mais sobre a Florentina

essa folha de estilo a não ser que o usuário peça. Ainda

Móveis e sua fundadora, Florentina Maria”>Sobre</a></li>

Agora temos uma indicação mais clara do que este link nos trará. A este tipo de “informação sobre a informação” os eruditos da web chamam de metainformação. Há mais de uma utilidade para essa metainformação. A mais conhecida é o fato de que o navegador exibe esse texto numa tooltip quando o usuário passa o mouse sobre o link. Entre outras utilidades está o fato de que robôs de busca, como, por exemplo, o Google, entendem e indexam o conteúdo da tag title. Se você percebeu bem, para tornar nosso HTML rico, útil e interessante, fizemos duas coisas. Primeiro o relacionamos com outros documentos, através da tag link. Em seguida, ofe-

podemos melhorar isso: <link title=”Feed RSS da Florentina Móveis” rel=”alternate” type=”application/rss+xml” href=”florentina.xml” /> <link title=”Estilo CSS padrão” rel=”stylesheet” type=”text/css” href=”florentina.css” /> <link title=”Estilo CSS alternativo” rel=”alternate stylesheet” type=”text/css” href=”florentina2.css” /> <link title=”CSS de impressão” media=”print” rel=”stylesheet” type=”text/css” href=”print.css” />

O navegador agora sabe que o título de nosso Feed é “Feed RSS da Florentina Móveis”. Sabe também os títulos das nossas folhas de estilo. Assim, pode mostrar esse menu:


tutorial :: 57

Outro exemplo desse esforço de inserir metainformações são os microformatos. Microformatos são pequenos trechos de HTML comum, escritos seguindo regras específicas, geralmente contendo nomes de classe específicos, que, devido a essas regras, carrega mais metainformações que o simples HTML. Para explorar isso melhor, sugiro que você baixe a extensão Tails Export para Firefox (http://tinyurl.com/gflh2). Infelizmente, a Tails Export está disponível apenas para Windows. Mas há uma série de outras ferramentas capazes de lidar com microformatos que você pode usar. Por exemplo, para o microformato hCard você encontra uma extensa lista em: http:// Isso permite ao nosso usuário escolher com que estilo verá

tinyurl.com/e5yvk.

a página. Você deve ter notado também que o link “CSS de im-

De posse da Tails Export, entre no site do Tantek Çelik (http://

pressão” não aparece na lista. Isso se deve ao atributo media. O

tantek.com) e dê uma olhada na barra de status do navegador. Lá

navegador detecta corretamente o tipo de media de cada arquivo

você pode, por exemplo, exportar as informações de contato dele

css através desse atributo. Ele exibe então na lista aqueles cujo

para um vcard. O formato de arquivo vcard é entendido por aplica-

media for screen (tela) ou all (tudo). O valor default de media é

ções como o Outlook. Assim, ao entrar no site do Tantek, você pode

all, então, se você não especificar um valor para media, seu CSS

adicioná-lo aos seus contatos do Outlook com dois cliques. Como

será exibido em todas as medias. Note no código que, para o

ele fez isso? Dê uma olhada nesse trecho de código:

último link, estamos colocando media=”print”. Isso faz com que

<div class=”item vcard” id=”livebait”>

este CSS seja usado quando o usuário imprimir a página. Assim, posso ter uma “versão de impressão”, em que eu escondo menus, publicidades, fundos coloridos, mudo a fonte etc. E que funciona automaticamente, basta o usuário imprimir a página. Por fim, é importante dizer que ultimamente têm se trabalhado muito em novas maneiras de se inserir metainformação em uma pági-

<a href=”http://flickr.com/photos/tantek/ 187850720/”><img src=”http://static.flickr.com/74/187850720_fce42bc7e2_ t.jpg” alt=”photo of restaurant entrance” class=”photo” /></a> <a

href=”http://local.yahoo.com/

details?id=11054799” class=”url fn org”>

na. Uma das novidades de nossos dias é o fato de você poder inserir,

Live Bait</a>

por exemplo, a seguinte tag META no HEAD de sua página:

<div class=”tel”>+1 (212) 3539100</div>

<meta name=”ICBM” content=”-23.626508,-46.639688” />

<div class=”adr”>

Dessa forma, o navegador, se suportar este recurso, sabe as coordenadas geográficas de sua casa, empresa, ou seja, lá de onde for o site. Quer ver funcionando? Uma das maneiras de se usar isso é através de uma extensão para Firefox, chamada GeoURL. Você pode baixá-la em http://tinyurl.com/fqpbq e, em

<div class=”streetaddress”>14 East 23rd St.</div> <span class=”locality”>New York</span> <span class=”region”>NY</span>, <span class=”postalcode”>10010</span> </div> </div>

seguida, acessar qualquer site com essa tag META. Por exem-

Há um atributo class para cada um dos valores que será

plo, o nosso: http://visie.com.br. Ao fazê-lo, você deve ver um

exportado no vcard. E pronto, simples assim. O resto é com o

pequeno globo colorido em sua barra de status. Assim, você

navegador. Para saber mais sobre as classes possíveis e outros

pode saber onde fica nosso escritório. Clique nele com o botão

microformatos, acesse o site oficial do projeto: http://microfor-

direito do mouse e divirta-se:

mats.org. Com isso, nosso HTML já é rico e poderoso, altamente relacionado com outros documentos na web. E não deixou de ser uma linguagem muito simples. Praticamente todo o resto que faríamos para transformar nosso código em um site apresentável será feito com outras duas linguagens: CSS e Javascript. Sim, isso já é outra história.


58 :: mercado de trabalho

Cesar Paz Guilhermo Reis Engenheiro com pós-graduação em marketing e comércio exterior. Diretor Presidente da AG2 - Agência Especialista emDigital. Arquitetura de Informação Usabilidade. É autor do Kit deAgências Conhecimento sobre AI de Inteligência Fundador e diretor daeAGADi (Associação Gaúcha das Digitais) e APADi (http://tinyurl.com/p4j6w). Atualmente, é responsável por coordenar projetos e manutenções nos (Associação Paulista das Agências Digitais). Colunista do jornal Propaganda e Marketing e do site Webinsider. websites do Banco Real. cesarpaz@ag2.com.br reis@guilhermo.com

Koruja! -

Oi, cara, tudo bom? Recebi teu portfólio, achei bem legal.

-

Pô, valeu.

-

Como é mesmo o teu nome?

-

Koruja.

-

Coruja?

-

É Koruja, com K.

-

Não, cara, teu nome, teu nome de batismo...

-

Pode me chamar de Koruja, todo mundo me conhece por Koruja.

-

Como assim, Koruja?

-

Koruja, pô!

Então tá, né. Resolvi não lutar contra a natureza, me condicionar ao nível de interlocução imposto e quem sabe, com sorte, descobrir que tipo de Koruja era aquela. -

Ahmmm, ok, Koruja... Onde você já trabalhou?

-

Em lugar nenhum.

-

Como? Mas e o teu portfólio?

-

Ah, eu fiz a maioria das coisas em casa, vagabundeando. Fiz uns freelas também.

Puxa, me comovi com tamanha honestidade! Naquele instante, entendi que o lado do meu cérebro que funcionava não era o mesmo lado do cérebro do Koruja e que, embora ele falasse um idioma que se aproximava muito do meu, o diálogo não iria rolar. Não sei exatamente por que, além do desespero por qualquer profissional que conhecesse um pouco de Photoshop e soubesse copiar algumas linhas de HTML, resolvi, naquele verão de 1998, rasgar todos os manuais de recursos humanos e dar uma chance para o Koruja! -

Muito bem, Koruja. Você pode começar amanhã um “estágio” de um mês...

-

Bacana, onde é meu ninho?

Hoje, inverno de 2006, aquele Koruja não teria chance. O desenvolvimento de soluções para o ambiente de internet amadureceu. As agências digitais cresceram e criaram novas competências e metodologias. Um “web tudinho” que fazia projeto de interface, criação, direção de arte, webdesign e programava HTML foi substituído por cinco especialistas nas estruturas maiores e por dois ou três nas menores. A especialização permitiu a produção de projetos web em escala e uma profissionalização das estruturas de desenvolvimento. Hoje, para fazer parte dos principais “times” de soluções de internet no país, vários critérios passam a ser fundamentais no processo de seleção e manutenção de talentos por parte das empresas que se tornaram players do setor. Na AG2, empresa que ajudei a criar e dirijo até hoje, valorizamos, cada vez mais, nos nossos profissionais, as seguintes características:


mercado de trabalho :: 59

"Um `web criar tudinho´ que os fazia projeto interface, criação, direção “É preciso as casas, prédios, as de praças e principalmente as placas de arte, webdesign e programava HTML foi substituído por cinco de sinalização.” especialistas nas estruturas maiores e por dois ou três nas menores."

1.

Motivação pessoal: o profissional precisa ter ânimo, energia, inquietação, capacidade de indignação e

espírito empreendedor. 2.

Trabalho em equipe: pobre do cara que não sabe compartilhar informações. São valorizados apenas

aqueles que sabem motivar, incentivar os colegas, planejar e organizar os processos e ter sinergia na construção de objetivos com o grupo. 3.

Gestão: a capacidade natural de relacionamento com as pessoas e habilidades no gerenciamento de proces-

sos e recursos são fundamentais para dar conta da dinâmica dos diferentes tipos de projetos web. 4.

Visão positiva: não vejo chance para talentos que têm na “dificuldade” e nos “problemas” a sua matéria-prima.

Ter visão positiva de si próprio, da sociedade e da empresa em que trabalha é condição para a evolução profissional. 5.

Fazer acontecer: apenas alguns profissionais têm uma enorme capacidade de realização, outros se per-

dem em processos, fórmulas, manuais e questões técnicas. A capacidade de “fazer acontecer” pressupõe que o profissional tenha entendimento de prioridades, iniciativa, persistência, determinação, performance e compromisso com o negócio. O Koruja se mostrou um bom profissional e era um cara supercriativo, e nos ajudou bastante. Não sei se tem a ver com o “nome”, mas sempre foi um grande parceiro das madrugadas de trabalho. Preferia produzir à noite! Ficou conosco quase dois anos e depois foi trabalhar com vídeo. Eu continuei tendo que desesperadamente identificar, contratar e reter talentos. O fato é que mesmo sabendo que nem tudo no mundo é resultado de racionalidade, tratei de reconstruir pacientemente todos os manuais de recursos humanos que eu mesmo havia rasgado no início da internet. Passei a ser muito mais científi co na busca e na retenção dos melhores profissionais.

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.

VEJA MAIS DEPOIMENTOS EM NOSSO SITE.

www.easymailing.com.br

tel. 55 51 3061.0636


60 :: 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ência Click, 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

Manifesto antibanquinho (Esse banquinho aí do teu lado... não, não, aquele ali. Me empresta? Coisa rápida, é só para fazer um manifesto.) Caríssimos, do alto desse banquinho quarenta anos vos contemplam, e é alçado a esta altura imerecida que proclamo: abaixo os banquinhos. (Pronto, aqui está teu banquinho. Não pretendo usá-lo de novo, obrigado)

Vocês me conhecem, eu não sou de botar a boca no trombone à toa, no máximo um manifesto aqui e uns podcasts ali, mas chega uma hora que temos que tomar posição. E é imbuído do senso de dever que digo: arredemos pé das nossas posições. Estamos entrincheirados demais. Estou falando sério. Outro dia acompanhei de perto um site novo ser metralhado por todos os lados: desenvolvedores fuzilando a compatibilidade com browsers, designers estapeando a usabilidade, criativos bombardeando o coitado do logotipo. O episódio só não foi trágico porque o dono do site tinha um bom-humor e à prova de balas. Nem adianta pensar em desarmamento. Cada lado ali (engenheiros, designers, marketeiros, etc) demorou anos pra conseguir seu arsenal: estudaram, praticaram, se aprimoraram, se organizaram... e se engessaram. Se ao menos o confronto fosse bonito, algo como uma bela roda de capoeira... mas nunca é: cada um fica na sua trincheira jogando farpas e insultos de lá pra cá. Enquanto isso, felizes da vida, passam ao largo os verdadeiros inovadores, os visionários, aqueles que ao invés de defender territórios desbravam novos mundos. OK, basta de alegorias e metáforas. Já deve ter dado para entender. Eu estou cutucando os donos-da-verdade de plantão, aqueles profissionais que sobem no banquinho para... (que outra palavra eu uso? Ai ai ai...) ditar (ufa!) regras a torto e a direito. Abaixo os banquinhos. Abaixo quem se julga acima. Abaixo as opiniões incontestáveis. Abaixo o absolutismo. Absolutismo nunca fez sentido, e na internet faz menos ainda. Suponhamos que você faça um site para a sua agência. A agência quer se posicionar junto ao mercado como criativa e antenada com o state-of-the-art em novas mídias, e para isso faz um site multimídia, inovador e irreverente. Pronto, o site está no ar. Começa o tiroteio: xiitas vão chiar (xiitas chiam by default) que o site não é tableless, não é W3C-compliant e que não roda no Opera pra Linux. Alguns puristas vão achar que o site é banda-intensiva e exclui propositalmente quem tem banda estreita e máquinas antigas. Outra ala vai apontar seus canhões contra o fato de que a mudança do logo foi meramente cosmética, enquanto chovem flechas de quem diz que aquela é uma sub-utilização dos recursos novos do flash XYZ. Nessa hora eu bato o pé duas vezes: em primeiro lugar, desçamos do banquinho. Se a agência escolheu uma linha X de comunicação com seu target e esse target por acaso não te inclui, ela deve saber o que faz. Se a agência quer ser vista dessa maneira e não de outra, idem. Não há uma solução de comunicação que seja universal, há sempre escolhas a se fazer.


marketing :: 61

"Abaixo os banquinhos. Abaixo quem se julga acima. Abaixo as opiniões incontestáveis. Abaixo o absolutismo."

Se ela errou o tiro, que aprenda com as conseqüências. Em segundo lugar: se a agência foi capaz de produzir aquela comunicação e não outra, isso diz muito dela, sobretudo sobre seus méritos e... limitações. Para exemplificar melhor suponhamos outro cenário: uma agência mediana encomenda seu site a um terceiro e o resultado é algo absolutamente arrasador e genial, muito acima da cultura digital da própria agência, um site impecável, revolucionário, trendsetter. Isso não seria propaganda enganosa, mostrar uma fachada que não corresponde ao que ela é capaz de pensar e realizar? Ou alguma ética estranha diz que um site impecável ,mas irreal é preferível a um site “pecador” mas verossímil? Pecado por pecado, meus blogs pessoais são forrados de pecadilhos técnicos. Nem poderia ser diferente, porque não sou técnico. Meu podcast vai ao ar do jeito que eu gravo, sem edição ou cortes. Nem poderia ser diferente, porque não sou locutor nem apresentador. As milhares de fotos que eu publico não têm retoques, além de Levels e Crop. Eu não quero criar uma ficção de mim mesmo, e não tenho o menor pudor quanto a imperfeições. Nossas deficiências são tão nossas quanto as nossas qualidades, e mesmo que eu tenha minhas certezas, elas são inseparáveis da minha história, da minha perspectiva, do lugar onde estou sentado. Minha opinião é absolutamente parcial. Toda opinião é. Quer pensar outside the box e inovar? Saia da trincheira. E não é nenhum banquinho que vai te tirar do buraco :)


62 :: bula da Catunda

Marcela Catunda Trabalhou na TV Globo, TV Bandeirantes, TV Gazeta, Manchete e SBT. Foi redatora da DM9DDB e Supervisora de Criação de Mídia Interativa da Publicis Salles Norton. É sócia do site Banheiro Feminino, está no Orkut e trabalha como autônoma. blog - http://pirei.catunda.org marcelacatunda@terra.com.br

E se eu chamasse Catundo? O que seria de Catunda, se Catundo fosse? Já me peguei pensando na frase acima. Em muitos anos trabalhando não foram poucas às vezes que imaginei como seria minha vida profissional se eu fosse um Catundo. Meus pais só tiveram filhas, mas me lembro até hoje da preocupação do velho em nos ensinar a trocar pneus, entender de cebolões e nos preparar para uma vida independente. Repeti a quarta série do primário e como castigo (ou prêmio) tive que trabalhar um ano para aprender a gostar da escola e dar valor pros estudos. Ledo engano, me apaixonei foi por trabalhar e não parei mais. Foram anos trabalhando e estudando até que ficou só o trabalho. A gente tá sempre aprendendo e estudar também nunca é demais. Pensando bem, valeu a lição. Escolhi a TV bem cedo e fiquei nela por longos quatorze anos. É muito tempo quando na época, fazendo as contas, não somamos mais de trinta poucos. Nesse tempo, vi assistentes virarem braços direitos de diretores, diretores propriamente ditos, editores chefes, gerentes de programação... E eu quase na mesma. Mas, e seu chamasse Catundo, será que eu teria me tornado um respeitado profissional de TV? Hum... Confesso que quando migrei pra internet me senti bem mais confortável com esse assunto. Mas será que se eu chamasse Catundo eu seria um bem sucedido cidadão ponto com? A ausência total da TPM teria me ajudado a galgar um lugar no pico do universo www? Hum... E eu escutaria: - Bonita camisa, Seu Catundo. - Boa jogada, Catundo. Tacada de mestre. Deixe-me segurar seu charuto! (sai fora). - Seu Catundo, reunião na sala 14 com aquela gostosa do RH. - Seu Catundo, sua esposa na linha 2. (que estranho) - Seu Catundo, sua braguilha está aberta. (cruzes) Mas o que me diverte não é só pensar no sucesso financeiro que eu teria se Catundo eu fosse, mas também no dia-a-dia profissional. Receberia Catundo, em seu e-mail, as fotos das últimas beldades da Playboy e Sexy enviadas pelos amigos? Sim e seriam consumidas nisso boas horas de trabalho, muito bem gastas por sinal. Perderia Catundo mais outras boas horas de seu dia mergulhando no infinito de uma boa olhada nos atributos físicos de suas colegas de trabalho? É lógico que sim e por que diabos não? É notória a capacidade feminina de se apegar aos detalhes, mínimos que sejam, podem apostar: as mulheres tudo vêem, tudo memorizam, tudo relembram e depois “algumas vezes” jogamos isso na cara dos seres masculinos. Mas e Catundo? Catundo, como portador de um cromossomo y no lugar de um dos x perderia a capacidade de fazer mais de uma coisa ao mesmo tempo? Catundo, ao tentar fazer a barba atendendo a um telefonema, perderia ¼ do sangue de seu corpo? Não. Definitivamente não quero fazer a barba. Na vida prática, preencher um gênero masculino no lugar do feminino nos formulários


bula da Catunda :: 63

"A ausência total da TPM teria me ajudado a galgar um lugar no pico do universo www? Hum... "

por aí me faria abrir mão de algo que muito me anima: minha suscetibilidade ao mundo invisível. A crença em quiromantes, tarólogas e astrólogas poderia ser sensivelmente reduzida. Eu, enquanto Catunda, sucumbo sem pestanejar a uma bola de cristal e um baralhinho enfeitado, se rolar um incenso e uma toalha colorida então, acredito até que sou a reencarnação de uma jabuticabeira. Fazer o quê? Mas, voltando ao mundo real, se é que ele existe - ser um Catundo poderia tornar-se determinante na hora de receber um cheque de um pagamento atrasado, por exemplo, ou de colocar o “tal” na mesa e falar com voz grossa (sem parecer ataque de mulherzinha) que não dá mais pra trabalhar desse jeito. Já dou risada só de pensar. Seria tão divertido. Eu poderia apresentar o Aprendiz. Será? A viagem de ser um Catundo é a mesma de ser um orangotango. Tudo seria diferente se num dia treze de sessenta e poucos eu tivesse usado uma fita azul no lugar de um lacinho cor-de-rosa. Eu poderia ser um halterofilista, um surfista, um guitarrista... Mas não sou. Eu sou a Marcela, sou mulher, adoro meu trabalho e sonho com um mundo melhor (para todos os gêneros) mesmo não sendo miss.


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

Para que, afinal, seu cliente precisa de um website? Já faz algum tempo que a época dos “geninhos” fazedores de sites acabou, uma época em que o importante era “estar” na web, o que quer que isso significasse. Com ela, também acabou a época dos “achismos” e dos chutadores, o que garantiu, para muitas empresas sérias, verbas significativamente maiores para o desenvolvimento de ações digitais. À medida que o mercado de comunicação digital evolui, mais e mais pessoas começam a usar com galhardia termos antes reservados aos mascadores de bits e outros sujeitos de óculos esquisitos e cortes de cabelo improváveis. Já não se fala mais em portais, a onda agora é fazer com que as campanhas de comunicação sejam “virais”, criem comunidades, usem blogs e, para os mais versados nas artes mercadocibernéticas, usem características colaborativas de Web2 etc etc etc. No entanto, a busca por efi ciência não parece ser uma prioridade hoje em dia. Dos dois lados do balcão de negociações, nada é menos sexy que se falar em taxas de conversão ou sucesso de operações. É um raciocínio torto, para se dizer o mínimo. Pois se qualquer profissional de comunicação se apressa em defender a importância da área digital para a fidelização de um público, por que a maioria deles continua a se comportar como adolescentes mimados que detestam uma planilha de Excel? É triste reconhecer, mas muitos profissionais de design digital não sabem/querem/gostam de ler um Briefing, um relatório de pesquisa ou um planejamento estratégico de seus clientes. Em português, isso quer dizer que esses profissionais não são capazes de identificar claramente quais são os objetivos da comunicação. Aí, como diz aquela velha expressão, “se não sabes aonde vais, por que teimas em correr?”. Muitos se defendem argumentando que seus clientes são incapazes de elaborar um plano mínimo, e que mudam de idéia de acordo com o que está na moda ou que foi mostrado pela concorrência, sem ao menos considerar se a solução proposta é boa para eles. Pode até ser verdade, mas de qualquer maneira, é o cliente quem contrata seus serviços e, para citar outras duas velhas expressões, “o freguês tem sempre razão” e “a corda sempre rompe do lado mais fraco”. Se a vida é dura e noção é um artigo em falta entre os profi ssionais de marketing, o que se deve fazer? Para começar, levar a sério a idéia de ser parceiro de seu cliente. Isso significa ter um interesse real por suas conquistas e colaborar efetivamente para que ele as conquiste. Caso contrário, o designer se comporta como um pintor ou pedreiro: faz exclusivamente o que é mandado, dane-se se não der certo. Agindo assim, não é de se esperar que ganhe mal. Falando o óbvio, clientes trabalham para empresas e, portanto, devem visar lucro em suas operações. Para isso, é preciso identificar um objetivo para a ação digital e uma estimativa de recursos para viabilizá-la a contento. Um blog corporativo, por exemplo, deve ter de dois a cinco


webdesign :: 65

"É triste reconhecer, mas muitos profissionais de design digital não sabem/querem/gostam de ler um Briefing, um relatório de pesquisa ou um planejamento estratégico de seus clientes. "

posts por dia. Isso significa de 10 a 25 posts por semana, ou 500 a mil e poucos posts por ano. O cliente é capaz de arcar com isso? Não? Então não arrisque, pois a coisa pode ficar feia. O mesmo raciocínio se aplica a outras áreas. Para que se quer o website? Para aumentar reconhecimento de marca? Para dar maiores informações sobre produtos e serviços? Para Vender on-line? Para dirigir a atenção para outros canais de vendas (como concessionárias em websites de automóveis, por exemplo)? Para prestar serviços ao consumidor? Para cortar custos? Para aumentar a fidelidade à marca? Para ações promocionais? Para cada uma dessas perguntas há uma resposta clara, direta e eficiente. Ela não passa por CSS ou AJAX, mas consegue estabelecer uma meta – e, o que é melhor, mensurá-la. Isso serve para justifi car verbas para o desenvolvimento de novas ações e a contratação de seus futuros serviços, mesmo que eles não sejam os mais baratos ou mais rápidos do mercado. Me parece uma boa recompensa para a árdua tarefa de ler algumas páginas de planejamento, mas eu posso estar enganado.

VOCÊ TAMBÉM PODE AJUDAR! Você também pode colaborar doando cestas básicas para o projeto Magê-Malien.

Todos temos o compromisso de cuidar para que o nosso país seja um lugar melhor. Um gesto de solidariedade não muda o nosso mundo, mas muda o mundo daquele

barraca da Pescaria

que recebeu a sua ajuda.

Capoeirista passarinho

Para doação de alimento entre em contato: arteccom@arteccom.com.br

Magê-Malien - Crianças que Brilham Faça parte você também deste projeto. Informações: www.arteccom.com.br/ong

Gustavo Loureiro, sócio diretor da agência STAGE3, já fez sua doação.


A alta qualidade do serviço de hospedagem da Acquaria Web Solutions lhe dá a tranqüilidade para dirigir sua empresa, com a certeza de que seu cliente terá acesso a qualquer momento a seu endereço na internet. www.acquaria.com.br tel: (47) 8414.4383 acq@acquaria.com.br

Você quer Hospedagem Profissional? Servidores estáveis e que não saem do ar? Então venha conhecer a DataHosting, suporte diferenciado e qualificado, planos especiais de revenda, plataforma windows e linux. www.datahosting.com.br tel: (11) 6951.2954 - (11) 6939.7305 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

maxiservers DATA CENTER HOSTING Com o maxiservers você acerta no alvo, o melhor e mais seguro em hospedagem de sites! A partir de 14,90 mensais você hospeda seu site de forma fácil, rápida e segura. Acesse Já! www.maxiservers.com vendas@maxiservers.com

A Brasil Hosting assume a missão de “prestar os melhores serviços, oferecer preços justos e respeitar o consumidor”. Assine agora mesmo um dos nossos planos e sinta a diferença de um hosting com ética. www.brasilhosting.com tel: (48) 4052.9591 atendimento@brasilhosting.com

Oferece hospedagem profissional linux e windows com recursos grátis como loja virtual, blog, enquete, boleto. Possui planos de revenda ideais para webdesigners. Suporte qualificado 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

Provedor fundado no ano de 2001, com infra-estrutura própria e datacenter no Brasil. Plataforma Windows com suporte integrado à Net 2.0, ASP e PHP5 no mesmo ambiente, contando ainda com MYSQL gratuito e SQLServer 2000. www.iphotel.com.br tel: (11) 6971.0438

Hospedagem de sites a partir de R$ 6,60, planos Windows e Linux, servidores semi-dedicados e dedicados de alta-qualidade, suporte altamente qualificado e 24 horas. www.novahost.com.br tel: (21) 2702.3653 vendas@novahost.com.br

Hospedagem com infra-estrutura no Brasil, 6 anos no mercado. 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

Hospedagem de Sites a partir de R$ 15,00 mensais com 30 dias grátis para testar nossa qualidade. Sistemas para Imobiliárias, Concessionárias e Lojas Virtuais Online. http://www.braghost.com.br braghost@braghost.com.br

Hospedagem de Qualidade em Windows e Linux. Planos a partir de R$ 4,90 mensais. Atendimento personalizado por telefonia fixa, Voip, Skype e e-mail, eliminando a distância para que você tenha liberdade de escolha. www.jotachost.com.br tel: (11) 4063.2395 - (41) 3352.9153 sac@jotachost.com.br

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

studioserver Internet Solution

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

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

Top Hospedagem Hospede seu site com quem conhece do assunto. Servidores de Alto Desempenho! Suporte Rápido e Eficiente! Tranqüilidade e segurança para você! Top Hospedagem - Qualidade é a nossa marca. www.tophospedagem.com.br tel: (31) 3077.3310

Soluções completas para webdesigners e desenvolvedores.Sistema inteligente e seguro de email com disco virtual.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

Loja virtual GRÁTIS. Assine um plano de hospedagem 3 ou 4 e ganhe uma loja virtual completa e de fácil administração. Escreva o código WBM no formulário de inscrição e ganhe ativação + 1 mensalidade. www.studioserver.com.br tel: (13) 3273.3379 comercial@studioserver.com.br

ZARP HOST 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

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


ABC ABCMIX Flash Tutorials Vídeo-aulas interativas em flash para Joomla! CMS. Viewlets sob encomenda para treinamento web e provedores de hospedagem. www.joomlaflashtutorials.com tel:(61) 8464.4383 tutorials@abcmix.com

Toda a experiência em treinamento presencial disponível agora na forma digital. Aprendizado rápido, na velocidade de seus negócios. www.actionsoft.com.br tel: (11) 6864.4709 carlos@actionsoft.com.br

A Bluestar Technology oferece toda a linha de treinamentos oficiais Borland, CA e Conectiva Mandriva. Temos ainda treinamentos profissionalizantes em Programação Web, com Java, Delphi e PHP. Invista em você, na sua carreira e no seu futuro. www.bluestar.inf.br tel: (61) 3347.9255 atendimentodf@bluestar.inf.br

Promoção de cursos de informática -Pacote Office -Montagem, Manutenção, Configuração de Computadores -Programação (Lógica de programação) -Redes e Linux -Windows e Internet tel: (21) 3393.6351 - (21) 3473.8683 ctl.informatica@pig.com.br

Domine os softwares de Web Design: Illustrator, Indesign, Photoshop, Dreamweaver, Fireworks e Flash. www.aisinformatica.com.br tel: (21) 2548.8989 copagerente2@hotmail.com

SERVIÇOS E TREINAMENTO EM INFORMÁTICA

Web Design, ASP, PHP, SQL, JAVA e outros. O participante dominará os padrões, conceitos e as boas práticas de desenvolvimento para os principais modelos adotados pelo mercado. www.digidatabrasil.com.br tel: (21) 2233.8967 - (21) 2203.2276 digidata@digidatabrasil.com.br Av. Pres. Vargas, 482 - sobreloja 206 - Centro - Rio de Janeiro/RJ

Disponibilizamos uma ampla gama de treinamentos, visando a capacitação para um mundo competitivo. Os cursos abrangem desde o básico de informática até os profissionalizantes. www.diginetinformatica.com.br tel: (71) 3382.7898 R: 124 - Elio Earli marketing@diginetinformatica.com.br

Ligue gratis:

Descrição: Especializada em treinamentos individualizados, a Digital ensina a trabalhar com softwares da área web, assim como os mais usados pelo desenvolvido mercado offshore da região. www.digitaltreinamentos.com.br tel: (22) 2762.1903 contato@digitaltreinamentos.com.br

0800 7 720 721

A Fuctura é uma empresa que constantemente está preocupada com qualidade e com novas tecnologias. Na área de treinamento oferecemos cursos tradicionais, cursos on-line como o curso de Tecnologias AntiHackers e de ponta como o curso de Bolsa de Valores. www.fuctura.com.br tel: (81) 3088.0992 e-mail: contato@fuctura.com.br

Web Designer + Fotografia Web Developer A melhor qualificação profissional em desenvolvimento de páginas e sites para a internet. Você conectado às novidades do mercado. Web Designer é na People ! www.people.com.br tel: (19) 3739.6400 ou 0800 7 720 721

Usabilidade, Arquitetura da Informação, Web 2.0, Webwritting, Tableless, Python, Zope e Plone com os maiores especialistas do mercado. Aprenda conceitos e ferramentas que serão seu principal diferencial competitivo. www.simplesconsultoria.com.br tel: (11)3898.2121 cursos@simplesconsultoria.com.br

A Tecnoponta treina há quinze anos profissionais preparados diretamente para o mercado de Web. Crie dinamismo, organize e manipule dados na Web, processando informações em Background . Cursos de Flash Action Script, Ajax e Tableless, ASP.NET c/ C#.NET www.tecnoponta.com.br tel: 3222.9492 treinamento@tecnoponta.com.br

Aprenda Oracle, Java, Linux, ITIL

Curso WEB Marketing e Comunicação Digital 28 à 30/08 - Rio de Janeiro 18 à 20/09 - Porto Alegre 16 à 19/10 - São Paulo Conheça a programação completa no site www.wbibrasil.com.br tel: (51) 3233.1771 marketing@wbibrasil.com.br

Operador de Microcomputador, Assistente Administrativo, Analista de Suporte Técnico, Linux /Star Office, Programação, Inglês, Telemarketing e Excelência no Atendimento, Editoração e Produção Gráfica, Web Design, Hotelaria e Turismo www.databyte.com.br tel: (21) 2482.4763 Unidade Madureira – Av. Ministro Edgard Romero 415

INVISTA EM SEU FUTURO Cássio Raphael Vitiello de Sousa Especialista Oracle - Sócio Diretor www.worldsoft.com.br tel: (11) 3289.5963 contato@worldsoft.com.br

AGORA NO BRASIL! O melhor treinamento Linux, pertinho de você. tel: (11) 3124.6000

Cursos Presenciais ou e-Learning. Computação Gráfica, WEB Design, AutoCAD, 3D Studio. Horários Flexíveis, Início Imediato, Garantia de Aprendizado. Marque uma Aula GRÁTIS! www.treinasoft.com.br tel: 11 5573.9067 Citreinasoft@treinasoft.com.br Av. 11 de Junho, 63, (Metrô Santa Cruz)

Multiplique conhecimento! Nossos Treinamentos: OpenOffice, Banco de Dados, Gestão e Qualidade, Programação Java, Análise de Sistemas, PHP e MySQL PHP com Ajax, Gnu/ LINUX LPI tel: (61) 3244.2510 atendimento@x25.com.br SGAS 910 Ed. Mix Park Sul sl 239 – Brasília/DF

Para anunciar nesta seção, envie um e-mail para publicidade@arteccom.com.br, com o título "busca cursos" ou ligue para (21) 2253.0596



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.