Ed33

R$ 8,90 I SSN 1806 - 0099

9 771806 009009

00033

Webdesign

setembro 2006 :: ano 3 :: n 33 :: www.revistawebdesign.com.br

setembro 2006 :: ano 3 :: nº 33 :: www.revistawebdesign.com.br

Direito na web: evitando riscos na terceirização de serviços E-mais: sites políticos, um mercado em alta para o design na web Entrevista: saiba como utilizar a tipografia popular em sites Estudo de caso: edição de vídeo e pré-produção como diferenciais

E D I T O R A

4 :: quem somos

Editorial Nas minhas aulas de ergonomia participei de alguns testes de usabilidade com pictogramas. Lembro-me de um deles com figuras de animais, para algum zoológico, acredito. Nossa tarefa era identificar qual macaco tinha mais cara de macaco e assim por diante, porque a idéia era, com o mínimo de traços ou elementos, tornar uma figura f a c i l m e n t e i d e n t i f i c á v e l . A t é p o rq u e , a o s o f re re m a s re d u ç õ e s necessárias, um ícone não poderia se tornar ilegível.

Enfim, agora estamos mais íntimos de outros ícones... os criados para os meios digitais. Não sei se pela velocidade que a internet exige ou por qual outro motivo, os ícones não estão recebendo a devida atenção que mereciam há tempos. Qualquer projeto, para se tornar consistente, deve ser pensado nos mínimos detalhes. Ícones bem feitos não devem ser um luxo para os grandes portais.

Eu me irrito constantemente com os ícones. Encontramos na web desde ícones substituindo palavras, que temos que adivinhar o que significam na mente de quem os criou, até ícones que só servem como adorno, pesando uma página desnecessariamente.

Agora, por outro lado, eles podem ser muito úteis. Eles têm a função de reduzir o tempo de leitura e de otimizar o espaço da tela. Aqui mesmo no Word vejo que tenho acesso a várias funções simultaneamente graças aos ícones. Então, vamos dar a devida atenção a estes pequenos detalhes que podem trazer grandes diferenciais para os projetos on-line e ainda contribuir, assim, para o amadurecimento do meio digital.

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

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

Criação e Diagramação Camila Oliveira camila@arteccom.com.br

Leandro Camacho leandro@arteccom.com.br

Suzanna Duarte suzanna@arteccom.com.br

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

Publicidade Bruno Pettendorfer Débora Carvalho publicidade@arteccom.com.br

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

Financeiro Cristiane Dalmati cristiane@arteccom.com.br

Atendimento e Assinaturas Renata Fontan renata@arteccom.com.br 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

Criação e edição

Boa leitura.

www.arteccom.com.br

Abraços,

www.prolgrafica.com.br

Produção gráfica

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.

Ícone: vilão ou mocinho?

Equipe

menu :: 5

ap

re s e pág ntaç ão .4 qu pág em .5 som me os n u con tat pág o .6 em pág ails .6 fale con fiq osc ue o po rd pág en .8 t ro pág métr ica . 10 se dir m pág . 1 1 e i t o n e rc a d o aw po steb it po rtf ó pág lio . 12 ag pág . 18 ência :m f re oo ela z nce ma tér r: E ia d du pág a rd ec oD . 20 ap a ucc ent pág ign re v . 28 e ista íco : ti nes po s , qu and popu e-m lar o ais es usa r? pág . 38 de pág . 42 bate: nav e-m pág eg ais . 46 and : si est oa tes pág u os p do . 52 olít om d ico tec ec de pág s a n ... s olo . 54 o: S g ia n am tut am ori aw al: bai com eb C a : G a ap min e ala pág h a n re n c i v ado ra do . 58 rd pe usa pág ec l o bili HT ont . 60 ML dad eúd ma pág e o P : rke a M . 62 r te a rc tin 4 o g b pág sN : Re ula . 64 ähr da né Ca d we e t P u bd aul nd esi a: aJ gn r. : L u M a rc ela li R Ca adf tun ahr da er

6 :: emails

abraço e parabéns pelo sucesso.

Olá, Gustavo, obrigado pelo aviso,

Marcelo Barcia profbarcia@gmail.com

você tem toda a razão! Grafamos

abordado o assunto “webtrends”.

Professor Marcelo, obrigado pelo

mas erramos na 31. Desculpem a

Caso não, gostaria de sugerir o

retorno! Este é um tema importante

nossa falha!

tema para as próximas edições.

para a carreira dos profissionais da

Creio que este assunto é

web. Esperamos que seu blog ajude

tratado de forma superficial e

os nossos leitores e seus alunos a

contraditória, em relação aos

entender as particularidades que

termos utilizados pelos softwares.

envolvem esta área. Boa sorte!

na web Assunto: Direito Estatísticas de sites Gostaria de saber se já foi

Ramiro Jr. ramiro.sixto@terra.com.br

Oi, Ramiro, tudo bem?

Direito nawebdesigner? web Assunto: Profi ssão Estou com um problema na empresa onde trabalho para assinarem minha carteira.

Acabei de me formar no curso da Estácio, de Gestão e Criação de Ambientes e Internet, só que a empresa não assina minha carteira como web designer. Estão alegando que não existe esta função. Há um ano estou com a função de técnico de programação visual. Quero minha carteira como web designer. Como provar para eles a existência desta categoria?

Felipe criacao@mundoverde.com.br

Na edição nº08, de agosto de 2004, falamos sobre estratégias para medir o retorno financeiro e institucional que um site pode trazer para uma empresa. Dentro da reportagem, abordamos quais eram os termos mais utilizados pelo mercado. Em breve, vamos retomar este importante assunto, para revelar quais são as métricas atuais mais utilizadas, ok?

Lembrando que o Google entrou firme neste segmento, ao lançar a poderosa ferramenta Google Analytics (http://tinyurl.com/zewqj).

Assunto: Direito Empreendedorismo na web

Assunto: Com vocês, os gerenciadores de conteúdo!

muito legal ler sobre os caminhos e idéias dos designers que são

não consegui trabalhar com ele

referências, não só no Brasil como

direito. Se ainda não tem, fica

no mundo. A internet não tem

uma sugestão para matéria.

fronteira. Gostaria de participar

Leidiane lleidiane@gmail.com

da revista.

Leidiane, temos como linha

rodrigo.manfredi@gmail.com

de softwares específicos,

Oi, Wagner e Rodrigo. O primeiro

mas sim os conceitos que

passo é vocês cadastrarem os

envolvem sua escolha, custos,

seus portfólios no site da revista.

conceitos, benefícios etc. Como

Assim, nossa Equipe Editorial

gerenciadores de conteúdo é

poderá avaliar a possibilidade de

um assunto quente entre os

publicação.

reportagem sobre os fatores que determinam sua utilização dentro

própria de cargos e salários.

empreendedorismo, da edição

de um site. Vá até a página 52 e

Assim, como entendemos

29. Sou professor universitário

depois nos fale o que achou, ok?

que esta questão merece

em duas universidades e

um aprofundamento, vamos

recentemente criei um blog

encaminhá-la para o Dr.Gilberto

sobre este tema: http://tinyurl.

Martins, que é colunista da seção

com/zdzq2. Tenho certeza de que

leitores da Webdesign. Um cordial

Rodrigo Manfredi

editorial não abordar o uso

satisfeito com a matéria sobre

da área de tecnologia, que são

Primeiro, gostaria de parabenizá-

falar muito dele, mas ainda

mais de um ano e fiquei muito

participação, Abraços!

Wagner Rosati wrccdesign@gmail.com

e pelas últimas três edições. É

empresas possuem uma estrutura

potenciais empreendedores

revista?

software Drupal. Tenho ouvido

complicado! Geralmente, as

próximas edições. Obrigado pela

divulgação de um portfólio na

los pela qualidade da revista

nossos leitores, preparamos uma

ele pode ser útil para os muitos

Qual é o procedimento para a

tem alguma publicação sobre o

Sou leitor da Webdesign há

sua dúvida vai virar tema de nossas

nana web Assunto: Direito Portfólio revista

Queria saber se a Webdesign

Este é um assunto realmente

Direito na Web. Provavelmente,

certo o nome dele na edição nº26,

Assunto: Falha nossa!

Na edição nº31, na página 25, é colocado o nome Carlos Cruz como criador da fonte Brasilêro. O nome correto é Crystian Cruz.

Gustavo Lassala lassala@bol.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

A eficácia do e-mail mkt De acordo com um estudo realizado pelo Winterberry Group, nos Estados Unidos, as campanhas de e-mail marketing geram

Este foi o percentual de aumento no va-

10%

lor médio dos planos básicos oferecidos pelas 25 maiores empresas de hospedagem no país. O preço passou de R$

um retorno 17 vezes maior que das campanhas realizadas via

20,12, em julho de 2005, para R$ 22,20,

correio tradicional, e até 73 vezes maior que o de campanhas

segundo análise do relatório de julho da

de telemarketing.

Hostmapper Brasil.

Fonte: Dinamize

Fonte: Hostmapper Brasil

10,3 milhões

4,1 milhões...

Total de usuários únicos que acessaram os sites na categoria

...de usuários conectados em banda larga até o final de

Entretenimento, no mês de junho. A categoria se manteve

2006. Esta é a estimativa da empresa E-Consulting (www.

como a terceira maior da internet brasileira, atrás apenas dos

e-consultingcorp.com.br). A taxa de penetração será de

buscadores, portais e comunidades (com 12,3 milhões de usu-

2,3% da população (base de 180 milhões) e de 12,9% dos

ários) e de Telecom/Serviços de Internet (com 11,8 milhões).

usuários de internet.

Fonte: Ibope//NetRatings

Fonte: E-Consulting

4,3 milhões de pessoas

73 milhões

Ou seja, 47% dos compradores on-line utilizaram cartão de

Total de visitas ao portal de telefonia móvel da Copa do

crédito para pagar o equivalente a 85% de todas as transa-

Mundo da FIFA, durante a edição 2006 do torneio.

ções realizadas pela internet no Brasil.

Fonte: FIFAworldcup.com

Fonte: Credicard Itaú

Qual item exerce maior influência na hora de se Este foi o crescimento na audiência única

18,5%

nos sites de esportes, mais especificamente nos de futebol, que atingiu 5,5 milhões de usuários únicos em junho de 2006.

Fonte: Ibope//NetRatings

implementar um gerenciador de conteúdo?

Total de votos: 342 Custo - 12% Facilidade de uso - 35% Layout flexível - 35% Segurança - 19% acesse e participe! www.arteccom.com.br/webdesign

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

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 Zune: centenas de milhões de US$ para ganhar a briga O já faladíssimo Zune, marca que a Microsoft irá lançar para competir com o iPod, contará com centenas de milhões

o estudo começou a ser feito.

[BlueBus: http://tinyurl.com/opjyo]

Concurso “Sósia do Garfield” chega ao fim

de dólares de investimento em marketing, ao longo de qua-

O concurso, idealizado pela 10’Minutos para o lança-

tro ou cinco anos, para tentar bater o seu concorrente. Será,

mento do filme Garfield 2, divulgou os ganhadores. Mais

na realidade, mais do que um player de música, funcionan-

de 200 gatos participaram. Na foto,

do como uma marca própria, dando vida a outros produtos,

um deles, caracterizado como o sósia

como tocadores de vídeo portáteis e games, dentro do mes-

do filme. Veja os outros vencedores:

mo guarda-chuva Zune.

http://tinyurl.com/od8rl.

Quando falávamos em iPod Phone e pensávamos em outros produtos da linha, acho que estávamos todos sonhan-

Fox dá dinheiro por “Obrigado Por Fumar”

do com alguma coisa que a Microsoft já planeja abertamente para sua nova marca. Usa, portanto, contra o iPod, a mesma estratégia usada para seu sistema operacional, browser e programa de mensagem instantânea: lança depois um produto mais completo, para se aproveitar do mercado criado pelos seus concorrentes e, em seguida, se tornar líder. Será que ela vai conseguir de novo?

[BlueBus: http://tinyurl.com/rgcu8]

Ação da agência de buzz LiveAd distribuiu notas ver-

As 10 marcas mais valiosas do mundo

dadeiras de R$ 1 adesivadas para divulgar a estréia do filme

1º Coca-Cola - US$ 67,0 bi

“Obrigado Por Fumar” (http://tinyurl.com/rnmlx), da 20th

2º Microsoft - US$ 59,9 bi

Century Fox. As notas foram distribuídas por promotoras

3º IBM - US$ 56,2 bi

vestidas de executivas, em áreas próximas aos cinemas, para

4º GE - US$ 48,9 bi

chamar atenção para a estréia do filme.

5º Intel - US$ 32,3 bi

A idéia de colar adesivos em notas de R$ 1 vai na raiz

6º Nokia - US$ 30,1 bi

da idéia do viral, levando a mensagem adiante na medida

7º Toyota - US$ 27,9 bi

em que as notas são repassadas. A questão é que a turma

8º Disney - US$ 27,8 bi

provavelmente vai gostar da idéia e querer guardar a nota

9º McDonald’s - US$ 27,5 bi

como recordação brecando um pouco o efeito viral. Mas cer-

10º Mercedes-Benz - US$ 21,7 bi

tamente deve impactar e gerar buzz. Os adesivos convidam

Fonte: Interbrand

os usuários a visitar o site do filme. Preocupados em não

Google está em 24º lugar, avaliado em US$ 12,37 bi.

danificar as notas (o que é contra a lei), os adesivos foram

Cresceu 46% em um ano, maior taxa já registrada desde que

feitos para descolar facilmente.

10 :: direito na web

Evitando riscos na terceirização de serviços “Trabalho com design na web e pretendo contratar alguns profissionais freelancers para trabalhar comigo, porém tive uma consultoria jurídica que me disse que tal situação cria vínculo empregatício. Como as empresas fazem para terceirizar e não correr esse risco, ou ao menos não serem processadas?”

Caio Vinícius (caio@audaxweb.com.br)

A terceirização de serviços é uma rea-

mesma pessoa seja sucessivamente alocada

lidade no mundo inteiro, atendendo a uma

por diversas empresas prestadoras sempre

necessidade imperiosa nos negócios. No

em benefício da mesma empresa tomado-

passado, não havia a CLT, apenas o contrato

ra, pagar valores que no total neutralizem

de locação de serviços, previsto no Código

qualquer vantagem comparativa entre os ga-

Civil. A partir do momento em que foi insti-

nhos de celetistas e de não-celetistas, evitar

Advogado formado na PUC/RJ,

tuída a legislação trabalhista em nosso país,

ter para o mesmo tipo de atividade pesso-

com Mestrado na USP e cursos

o campo da prestação de serviços ficou su-

al empregado e pessoal terceirizado, evitar

Gerente Jurídico da IBM, onde

jeito a discussões sobre quais as fronteiras

dar o mesmo tipo de crachá e vantagens a

trabalhou por 11 anos, no Brasil

entre uma relação de serviço e uma relação

empregados e a subcontratados, exigir que

de trabalho.

a empresa prestadora conquiste outros clien-

Gilberto Martins de Almeida

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

e nos EUA. Sócio de Martins de Almeida - Advogados, escritório especializado.

A jurisprudência predominante tem

tes em vez de ficar dependendo de um único

Envie sua dúvida para:

entendido que o que caracteriza uma rela-

cliente. E outras mais poderiam ser citadas

redacao@arteccom.com.br

ção de emprego (portanto, necessariamen-

(quanto mais sejam usadas, melhor; embora,

te vinculada a um contrato de trabalho) é:

lógico, sua viabilidade e conveniência devam

subordinação técnica ou hierárquica, depen-

ser examinadas caso a caso).

dência econômica, e interesse de contratar

No mais, vale a pena destacar o caráter

em função da pessoa (acima do interesse em

autoral do desenvolvimento de websites (o

um perfil determinado).

que permite margem para diferentes estilos de

Por isso, para minimizar os riscos de

cada programador etc.), inclusive porque esse

pleitos trabalhistas - riscos esses que dificil-

desenvolvimento é protegido pelo direito de

mente podem ser 100% afastados - há que

autor. Isso ajuda a desfazer a impressão de que

se tomar o maior número possível de cuida-

se trate de atividade essencialmente marcada

dos para evitar a incidência em um dos crité-

por subordinação técnica ou hierárquica.

rios mencionados no parágrafo anterior.

Esse é um assunto bastante sensível,

Isto significa, por exemplo, promover

que não dispensa a análise das circunstâncias

rodízio entre prestadores, colocar um su-

específicas de cada situação, que pode variar

pervisor para filtrar ordens e instruções (em

significativamente, em razão do contexto etc.

vez de transmiti-las diretamente ao pessoal

Mas as dicas acima podem, ao menos, ser um

da empresa contratada), impedir que uma

importante ponto de partida.

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 Nielsen anda lendo a Revista Webdesign? : - ) Jakob Nielsen, considerado um dos gurus da usabilidade na web, divulgou, no final de julho, um “alertbox” falando das vantagens no uso de layout líquido em sites (http://www.useit.com/alertbox/ screen_resolution.html). Estamos por dentro, pois esse assunto foi tema na edição de junho.

Testando as cores

Referências on-line

Você precisa criar uma paleta de cores, além de testar uma possível

Procura boas referências em termos de design? Algumas revistas on-line podem ajudar a abrir seus caminhos! Estamos falando da Internacional Illustrated (www.theinternationalillustrated.com), NewWebPick.com (www.newwebpick.com) e Idea Fixa (www.ideafixa.com).

Nova geração do design na web

combinação cromática na web? Pois bem, a dica é acessar a ferramenta on-line gratuita ColorBlend (www.colorblender.com), que possui ainda a funcionalidade de exportar as definições para os programas Photoshop e Illustrator.

(Imagem) Verdadeira ou falsa?

Para valorizar a produção

A Autodesk lançou recentemente um interessante teste on-line

universitária e estudantil

para verificar o olhar dos profissionais em relação à imagens de

na área do design na web,

objetos ou cenas reais e aquelas produzidas por computação gráfica.

a Revista Webdesign inicia,

Acesse o site “Is it fake or foto?” (www.fakeorfoto.com) e teste seus

neste mês, a divulgação

conhecimentos visuais!

de trabalhos acadêmicos de destaque. Estreando a seção, indicamos o projeto “Auto da Compadecida em hipermídia” (http:// tinyurl.com/g9vgl), de Juliana Apolo e Aline Alves, apresentado na conclusão do curso de pós-graduação de hipermídia da Universidade Anhembi Morumbi. Neste trabalho, elas apresentam uma adaptação da obra de Ariano Suassuna para a internet.

Se você possui ou conhece algum trabalho acadêmico interessante, mande sua sugestão para redacao@arteccom.com.br.

Dicas Livro do mês “Real Web project management: case studies and best practices from the trenches” Autores: Thomas Shelford e Gregory Remillard “Os projetos de desenvolvimento web são influenciados por diversos fatores: as mudanças tecnológicas

Agenda de eventos

constantes e cada vez mais rápidas, as mudanças freqüentes

02/09 - Pixel Show (www.pixelshow.com.br)

rápido de produtos pelos concorrentes, alterações no modelo de

14/09 - FIND (www.arteccom.com.br/find)

negócio durante o desenvolvimento do projeto e a influência na

24/09 - 5° Design na Brasa (www.designnabrasa.com.br)

expectativa dos clientes pela falsa noção de que mudanças nas

28/10 - Intercon (www.imasters.com.br/intercon/2006)

especificações do projeto são simples de serem executadas e que

18/11 - 11º EWD - POA (www.arteccom.com.br/encontro)

o direcionamento do projeto pode ser alterado facilmente. Com

21/11 - 11º EWD - Curitiba (www.arteccom.com.br/encontro)

estudos de casos e numa linguagem simples, este livro aponta

23/11 - 11º EWD - Brasília (www.arteccom.com.br/encontro)

caminhos de como deve ser uma metodologia que gerencie com

25/11 - 11º EWD - São Paulo (www.arteccom.com.br/encontro)

sucesso o cotidiano dos projetos de desenvolvimento web.”

de escopo, a curta duração dos projetos, o desenvolvimento

Santana Dardot, Production Director da Sapien (www.sapien.com.br)

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

12 :: portfólio agência - mooz

MOO MO OZ

pela construcao de um design contemporaneo brasileiro

O batuque pop de Chico Science e Nação Zumbi

“Para definir a gente é meio complicado, até porque

anunciavam novos tempos: “Rios, pontes e overdrives,

as pessoas mudam. Mas, no geral, gostamos do que

impressionantes esculturas de lama, mangue, mangue,

fazemos e tentamos fazer o mais bem feito possível

mangue”. Recife, anos 90. Um grupo de artistas,

aquilo que nos é posto. Isso é essencial para qualquer

designers, jornalistas e músicos seria o responsável pela

profissão”, conta Gustavo.

criação do movimento manguebit (www.manguebit.org.

Apostando na inovação

br), cujos ideais se tornariam definitivos no manifesto

Apesar de um pouco mais de um ano de existência,

“Caranguejos com Cérebros” e que até hoje repercutem

a aposta em projetos inovadores tem rendido bons frutos

no cenário musical do país.

para o crescimento do estúdio. “Estamos tentando fazer

Ano 2006, Boa Viagem, Recife. O estúdio de

coisa nova, sabe? Atualizamos o nosso site sempre que um

design mooz (www.mooz.com.br) desponta no

novo trabalho sai do forno e postamos as novidades em

mercado nacional. Sua história se inicia em

sites sobre design gráfico, ilustração etc. Numa dessas,

março de 2005, quando os designers Gustavo

fomos destaque em quatro edições da revista Flavorpill

Gusmão e Eduardo Rocha e o publicitário

(http://beta.flavorpill.net). Foi quando muitas pessoas fora

Daniel Edmundson resolveram unir suas

e dentro do país começaram a ver o nosso trabalho. Além

ha bilida des em prol d e u m me s mo

disso, tivemos dois projetos selecionados na 8ª Bienal de

ideal: contribuir para a construção

Design Gráfico, da ADG Brasil (Associação dos Designers

de um design contemporâneo

Gráficos do Brasil). Isso nos ajudou e a nossa visibilidade

brasileiro.

aumentou bastante”.

A indicação na Bienal serviu, inclusive, para que eles pudessem ampliar seus contatos em outras regiões do país. “Em junho, fomos a São Paulo para visitar editoras e agências de publicidade: prováveis parceiros em trabalhos futuros. Mas tudo com indicações de pessoas que conheciam nosso trabalho ou com um pouco de cara-de-pau”.

Além disso, a experiência do estúdio em aceitar desafios envolvendo projetos não muito comuns, como o desenvolvimento de menus animados do DVD da banda Nós4, serve como dica de segmento a ser explorado pelas agências que trabalham com este mercado. “Com certeza, é um novo nicho de trabalho para agências que atuam neste mercado. Principalmente se você estiver de algum modo ligado ao segmento fonográfico”.

portfólio agência - mooz :: 13

processo criativo nao tem formula. mas tambem nao e sentar e esperar a inspiracao baixar. tem que suar As influências de Recife

dar ao trabalho do outro.

Diante de toda a riqueza histórica, cultural e artística

“Isso serve para criar um ciclo

envolvendo Recife, qual influência a cidade exerceria no

vicioso. No mais, é ler, observar,

trabalho de criação do estúdio?

conversar, parar de trabalhar de vez em quando, só para

“Na verdade, Recife é mais um detalhe geográfi co do

passar um tempo vendo coisas legais”.

que influenciador direto de nossos trabalhos. Aqui se tem

Além desses fatores, Gustavo revela algumas paixões

o costume de regionalizar um pouco o trabalho, aplicando

presentes nas referências do estúdio: as ilustrações e

textura de xilogravuras, por exemplo. Acredito que somos

a tipografia. “Tentamos ao máximo customizar tanto a

influenciados pela cultura local, mas de outro jeito, talvez

ilustração, quanto os tipos em nossos trabalhos. Cada

pelas cores, ou por nosso próprio cotidiano. Uma influência

um tem seu jeito, se fulano gosta de trabalhar mais

menos tradicional e mais contemporânea. A maior parte dos

quando está empacado, tem gente que prefere

nossos clientes é ligada à produção cultural local: algumas

fazer outra coisa. Processo criativo não

bandas, produtores locais de festivais de música clássica e

tem fórmula. Mas também não é

independente, estilistas e por aí vai. Basicamente, a gente vê

sentar e esperar a inspiração

referência em tudo e é isso o que achamos mais legal”, explica

baixar. Tem que suar”.

Gustavo Gusmão.

Uma fórmula que parece ter dado certo no processo de criação dos rapazes do mooz é o estímulo que cada um procura

14 :: portfólio agência - mooz

Cases www.madamesurto.com.br

www.donasanta.com.br

Tecnologia utilizada: Flash MX

Tecnologias utilizadas: Flash MX + Javascrip + PHP O desafio envolvendo este projeto era saber exatamente o que a loja gostaria de exibir em seu site, já que se trata de uma grande maison multimarcas.

"A partir do conteúdo delimitado, desenvolvemos a arquitetura de navegação e assim começamos a p ro j e t a r c a d a p á g i n a . A i d é i a e r a f a z e r u m a e s p é c i e d e p o r t a l d e m o d a d i re c i o n a d o à s m a rc a s v e n d i d a s na loja, sem, no entanto, perder o espírito de site institucional”, revela Gustavo.

Além disso, o desafio era desenvolver um site que pudesse mudar a cada temporada da moda, com

A oportunidade de participar do projeto de criação do site

diferentes backgrounds e animações semanais na home.

da grife pernambucana Madame Surtô surgiu através da rede de

“ Tu d o m u i t o l i m p o p a r a q u e n ã o h o u v e s s e

parceiros que a agência mantém. “Um amigo nosso, Evandro Borel,

interferência dos grafismos do site nos produtos

nos chamou para um trabalho em parceria com ele e com a Jazzz (um

exibidos em suas seções. Utilizamos uma tipografia mais

escritório de design para web aqui de Recife, que ficou encarregado

sóbria, no melhor estilo suíço. As cores de fundo mudam

da programação do site e da administração de conteúdo)”.

a cada estação, então só tivemos que nos preocupar

Assim, coube ao mooz definir qual seria a interface gráfica do

com as cores do texto e de alguns boxes fixos. Toda a

site. “O processo de criação se deu basicamente em cima de uma

programação foi feita pela Jazzz, empresa parceira da

sessão de fotos que fomos fazer da então nova coleção da Mada-

mooz nos projetos web”.

me Surtô. Após algumas centenas de fotos do ateliê, de algumas peças e da modelo, começamos a pensar em como o site poderia ficar visualmente. Queríamos que o projeto gráfico transmitisse os detalhes das roupas e de como tudo era feito: muito colorido, temas florais, linhas, bordados e por aí vai. Os letterings dos títulos do menu foram feitos exclusivamente para o site”.

Em termos de estrutura, Gustavo aponta que o site segue uma grid básica. “Menu do lado esquerdo, parte central com o conteúdo principal de cada seção e a coluna da direita com um box de navegação de notícias ou coleções. Queríamos dar mais impacto no colorido tirado das próprias peças de roupa da grife”.

portfólio agência - mooz :: 15

www.coquetelmolotov.com.br Tecnologias utilizadas: PHP + Flash Este projeto serve como um bom exemplo da importância em se manter uma rede de relacionamentos na área. “Já conhecíamos o pessoal do Coquetel Molotov, então foi meio que só começar a fazer o site. Eles são um coletivo que promove a música independente. Já possuíam um site anteriormente, mas a atualização estava complicada e por isso a necessidade de um novo, com outra estrutura”.

A liberdade na criação foi um dos pontos marcantes do trabalho. “Começamos com ilustrações que dariam a cara do site.

O lettering das seções do menu foi feito exclusivamente para isso e segue a estética das ilustrações. Para a fonte de texto, escolhemos a Georgia como padrão e todas as derivações hierárquicas de informação foram feitas com as variações de tamanho e estilo da fonte (normal, bold ou itálico)”. É importante citar também que o conhecimento prévio do público-alvo do site foi fundamental para definir que tipo de interface seria utilizado. “A grid principal resume-se em menu à esquerda e conteúdo à direita. Algumas páginas têm uma segunda coluna intermediária, com histórico de postagens, para o visitante ter acesso as matérias mais antigas, transformando o site num grande glossário sobre música independente. Além disso, o site lembra muito o formato blog, estrutura essa bastante familiar aos visitantes habituais do site. Isso colabora para minimizar problemas de usabilidade”.

18 :: portfólio freelancer - Eduardo Duccigne

coisas novas, rabiscando alguns conceitos e layouts que, na maioria das vezes, não saem do disco rígido. Mas todos

O design experimental made in Mato Grosso do Sul

resultam em boas experiências que sempre procuro aplicar em trabalhos futuros”.

Contato: eduardo@ilusorium.net Site: www.ilusorium.net

Morar em uma região (Campo Grande - Mato Grosso do Sul) onde o design ainda procura seu reconhecimento parece ser, ao mesmo tempo, mais um obstáculo a ser vencido e uma certeza na vida de Eduardo Duccigne. “A única que tenho é de que quero ser designer. A área específica eu ainda não sei.

No momento, a web é minha preferida, mas tenho vontade de aprender coisas diferentes e trabalhar em outros segmentos, como 3D, motion design etc”.

A preferência pelo design na web surgiu quando ele começou a entender como o meio realmente funcionava. “Fui conhecendo sites de designers, de artistas, de agências e tudo foi me mostrando que era exatamente isso que eu queria. No design em geral, posso dizer que comecei na web e só depois passei a conhecer mais sobre as outras vertentes”.

A paixão pela área serviu como um incentivador na busca por referências a serem aplicadas no seu trabalho. “Tudo me

“A escolha de cores foi feita a partir de estudos sobre a psicologia das cores”

influencia: desde um designer consagrado até uma propagan-

As conseqüências desse laboratório se revelam quan-

da bacana em uma revista. Gosto muito de reparar em detalhes

do analisamos alguns dos projetos presentes no portfólio

de artes impressas, por exemplo, e tentar adaptar aquilo para

de Eduardo. “Uma das grandes ousadias no site do res-

a web. Acho interessante aplicar ‘técnicas’ de outros lugares

taurante italiano Cantina Masseria (www.cantinamasseria.

em produtos de internet”.

com.br) foi a de desenhá-lo inteiro de um modo diferente.

Procurei fugir um pouco do comum na questão da diagramação e design do layout, mixando o perfil clássico do restaurante com formas e arquitetura mais modernas. O resultado final foi excelente. O projeto foi aprovado na primeira apresentação, com apenas alguns detalhes a serem discutidos. O resultado foi satisfatório também para mim, se pudesse refaria o site desde o início, pois pude aprender muito durante seu processo”, explica.

E para que seu trabalho ultrapasse as fronteiras do Mato Grosso do Sul, Eduardo conta com a internet como ferramenta de divulgação. “Geralmente, procuro fazê-la

www.ilusorium.net

pela web, por ser um meio muito mais econômico e não

Além disso, não ter medo de experimentar suas idéias

menos abrangente. Sempre procurei manter meu portfó-

tem ajudado na evolução de seu trabalho. “Geralmente, eu

lio on-line e atualizado. Até hoje foi fundamental para

sou a minha própria cobaia. Estou sempre experimentando

gerar bons frutos”.

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

20 :: entrevista - tipos populares

EM NOME DA TIPOGRAFIA POPULAR BRASILEIRA Você já reparou como os letreiros e menus de bares, as frases nos pára-choques de caminhão e os anúncios carregados por homens-placa representam uma tendência na forma da escrita popular brasileira?

Pois bem, pensando nisso, o designer Pedro Moura criou o projeto “Tipos Populares do Brasil” (www. tipospopulares.sibilina.com), no qual busca valorizar esta vertente da estética nacional, além de criar um espaço para a divulgação de tipos inspirados por tal conceito.

entrevista- tipos populares :: 21

Nesta entrevista, ele nos conta mais detalhes envolvendo a produção tipográfica e como estas fontes podem ser aplicadas em projetos web.

Wd :: Como foi criado e quais são os objetivos do projeto “Tipos Populares do Brasil”?

a tipografia popular brasileira, cada uma pertencendo às classificações que os letreiros estudados receberam.

Mas não queria que o projeto ficasse confinado ao meio acadêmico. Para isso, criei o site como forma de espalhar a palavra, debater minhas idéias e agregar mais pessoas

Moura :: O projeto foi minha monografia de conclusão

interessadas no tema. Hoje, somos cinco designers envolvidos,

de curso em Desenho Industrial/Programação Visual pela

disponibilizando as nossas fontes para download grátis no site,

UFRJ. Sempre tive interesse pela prática reflexiva. Queria algo

que já conta com uma marca de nove mil visitas desde que

que questionasse o papel do design e suas possibilidades

entrou no ar, em agosto de 2004.

dentro da nossa sociedade. Mas também sabia que queria me

O projeto se tornou exatamente o que eu desejava:

dedicar à tipografia no projeto, que, dentro das cadeiras do

um espaço coletivo para a troca de idéias e o intercâmbio

curso, foi a que sempre mais me interessou. Então, deparei-

de informações sobre o tema. Continuo registrando

me com o problema: como encontrar um objeto de estudo

letreiros por onde quer que eu vá, em viagens para outras

que sintetizasse semiótica, tipografi a e, ao mesmo tempo,

cidades. Foram somadas mais duas fontes minhas, e outras

debatesse sobre a questão da estética brasileira do design,

contribuições dos designers Buggy (Recife), Fernando

o tão discutido “design nacional”?

Rocha (Rio de Janeiro), Gustavo Lassala (São Paulo) e

Encontrei a resposta nas ruas, no trajeto entre o trabalho, a faculdade e a minha casa: os letreiros pintados

Fernando PJ (Salvador), cada um representando sua visão pessoal do tema, de acordo com a região em que vivem.

à mão, espalhados pela cidade, que comunicam tanto

O site conta com uma galeria de fotos de tipografias

quanto qualquer publicidade convencional, e que são

populares de várias regiões do país, 11 fontes para

iniciativas de pessoas que, muitas vezes, tiveram pouca

download e um sistema completo de comentário - que é

ou nenhuma formação acadêmica - que dirá de design!

muito importante para receber o feedback dos visitantes.

Meus pais contam que eu comecei a me alfabetizar

Um detalhe técnico sobre o site: foi utilizado o gerenciador

lendo todo tipo de placa que eu via na rua, nos espaços

de conteúdo Mambo Open Source, que é também um

que faziam parte do meu cotidiano. Além disso, meu pai,

projeto coletivo e freeware.

que foi meu primeiro “professor” de artes e comunicação

Wd :: Ainda é pouco comum vermos projetos web

visual, também tem diversos trabalhos com letreiros

utilizando a tipografia popular. Uma das poucas exceções

pintados à mão. Posso dizer que o projeto foi um retorno

está no site do filme “A Pessoa é para o que Nasce”

às minhas próprias origens.

(www.apessoa.com.br). Existe algum tipo de dificuldade

Entre março e junho de 2004 fiz um registro fotográfico

para se adaptar os tipos populares ao meio digital?

em várias cidades do Estado do Rio de Janeiro, desde a

Moura :: As fontes inspiradas em tipografia popular

capital até o interior. Era tudo na marra, eu não tinha câmera

nunca serão ferramentas de otimização da leitura em tela,

digital na época, minha fiel Nikon registrou cerca de 300

como é o caso das fontes em grade fixa, das pixeladas etc. A

fotos de letreiros populares dos mais diversos tipos. Depois

utilização dos tipos populares no meio digital vai depender

de uma seleção do material registrado, concentrei-me em

da escolha do designer em querer se utilizar da estética

desenvolver quatro fontes que melhor representassem

peculiar que elas trazem no seu projeto gráfico.

22 :: entrevista - tipos populares

Apesar das diferenças técnicas dos meios digital

termos específicos para o estudo deste segmento - todo

e impresso, considero ambos projetos de design e que

pesquisador de tipografia sabe que uma fonte bastão é

dependem, da mesma forma, de um projeto gráfico

aquela sem diferenças na espessura do desenho das letras,

consistente para que sejam bem sucedidos. Alguns outros

o que não é o caso das fontes “tipo bastão” do projeto.

sites apresentam tipografia popular, porém sempre como

Sendo assim, a classificação dos tipos ficou dessa forma:

um desdobramento da identidade visual utilizada na

- “Bastão”: são facilmente encontradas em menus

publicidade do objeto do site. A marca do Pedro Luís e a

de bares, supermercados e tabuletas de açougues.

Parede (www.plap.com.br) foi um projeto pioneiro nessa

Sua característica essencial é o desenho baseado em

área, desenvolvido pelo Billy Bacon e seu estúdio Nü-Des.

pincéis retos, onde a espessura de linhas ascendentes e

Wd :: Dentro das fontes disponíveis no site do

descendentes é dada pelo movimento da pincelada do

projeto, temos uma classificação dos tipos populares

artista. Trata-se do tipo que apresenta maior regularidade

(bastão, cursivas, rústicas, fantasia e outras fontes). Quais

em sua construção. A forma como é desenhada remete

características definem cada uma delas?

à construção tipográfi ca tradicional: a letra é primeiro

Moura :: A classificação surgiu como uma forma de

“tirada” em lápis a partir de uma linha base, para depois ser

entender melhor como o fenômeno da tipografia popular

aplicada à pincelada que dará a dinâmica da peça gráfi ca.

acontece. Os termos utilizados para a classificação são um

Elas são representadas, no projeto, pela fonte Responsa.

pouco problemáticos e só devem ser considerados como

- “Cursiva”: não são necessariamente tipografi as manuscritas, mas sua construção remete à caligrafia, tendo seus caracteres formando uma seqüência harmônica com elementos de ligação entre as letras, como traços contínuos.

Na maioria das vezes, sua construção é híbrida, misturando letras de características cursivas com outras que remetem às sem-serifa. A fonte Tetéia é a representante no projeto.

- “Rústica”: são a manifestação espontânea do ato da escrita aplicada na sinalização de comunicação imediata, que acabam recebendo construções interessantes e anticonvencionais pela precariedade de recursos do seu autor. Seria um bom exemplo de tipografia popular “rústica” a fonte Brasilêro, do Crystian Cruz (http://tinyurl.com/jdgtw).

Eu também resolvi me aventurar e criei a minha Marvada.

- “Fantasia”: assim como seu correspondente na tipografia convencional, são fontes apropriadas para titulação. Essa classificação foi criada

"Quem trabalha com design sabe que algumas regras devem ser quebradas"

para abranger todas as construções inéditas do projeto, mas que possuam uma lógica de estrutura, assim como desenhos que apresentem semelhanças com tipografias clássicas. Escolhi para representá-la a fonte Caprichoza (com grafia errada propositalmente na nomenclatura).

- As outras fontes presentes

entrevista - tipos populares :: 23

no projeto são disponibilizadas na seção “Outras Fontes”.

Por serem criações de outros autores, achei melhor não restringi-las dentro de uma classificação.

Wd :: Você é autor de várias fontes apresentadas pelo projeto. Pegando o exemplo da Simpatia, desenvolvida em parceria com os designers Eliza Rizo e Mauricio Diaz, você relata que a fonte de inspiração surgiu no carnaval de 2005, durante as festas realizadas

de mídias. Na maioria das vezes, eu fiz um redesenho

pelas ruas do Rio de Janeiro. Quais são as referências

dos caracteres, na mão mesmo, a partir das referências

e que tipo de elementos influenciam o processo de

fotográficas coletadas no primeiro momento do projeto.

criação de um tipógrafo?

Depois vinha o processo de vetorização dos caracteres e

Moura :: Acho que as referências variam de acordo

eu me via com duas escolhas: criar uma fonte otimizada

com o trabalho de cada tipógrafo e a bagagem de

em termos técnicos (poucos nós no contorno, arquivo

referências visuais que ele acumula ao longo da sua vida.

“.ttf” leve), redesenhando os caracteres em programas

Meu trabalho em tipografia, no momento, se preocupa

de desenho vetorial, ou preservar ao máximo o aspecto

mais com as possibilidades estéticas, fontes que tenham

gestual da pincelada ou irregularidade do desenho,

um valor estético agregado muito bem definido, do que

fazendo o rastreio automático em programas de

necessariamente aspectos técnicos de legibilidade. Nunca

vetorização por rastreio de bitmap.

tive a possibilidade de desenvolver um sistema tipográfico

A fonte Marvada foi um caso específico: cada

propriamente dito, apesar de ter muita vontade. Sinto-me

caractere foi representado exatamente como estava na

mais à vontade sendo um entusiasta de tipografia e não um

fotografia, equalizando a imagem e fazendo o rastreio,

tipógrafo: falta-me ainda muita bagagem para que possa me

para preservar ao máximo o aspecto rústico. Depois de

apropriar desse título.

vetorizados os caracteres, criei os arquivos de fontes

Minhas referências são as mesmas do meu trabalho

numa versão bem antiga do Macromedia Fontographer,

em design: o ambiente e a paisagem urbana. A realidade

importando os desenhos vetorizados. Os ajustes de

concreta e as coisas que já existem, despercebidas no

kerning (entreletra) foram uma dificuldade à parte, pois é

nosso cotidiano, sempre são boas referências para idéias

comum não existir uma grade fixa nos letreiros populares

novas, por mais absurdo que isso possa soar. O design

e eles não funcionam segundo os padrões da tipografia

tem uma pretensão de criar um universo visual baseado

convencional. Então, tive que ver as combinações de letras

em valores supostamente universais, mas que não o são -

uma por uma, como deve ser.

principalmente quando se fala de design como ferramenta de mercado. Não existe design imparcial.

Wd :: Os especialistas afirmam que a tipografia exerce forte influência na transmissão da mensagem.

Wd :: Falando ainda sobre seu processo de criação,

Pensando nisso, os tipos populares do Brasil se encaixam

quais ferramentas e materiais você costuma utilizar

em apenas projetos específicos ou podem ser utilizados

para criar uma fonte?

nos mais variados segmentos?

Moura :: Eu desenho bastante. Acho imprescindível o ato

Moura :: As fontes que eu desenvolvi nesse projeto, por

gestual de manusear o lápis no papel. Funciono mais rápido

virem de uma realidade culturalmente definida, representam

assim. O caso das fontes do projeto foi específico da situação

uma estética muito bem definida e a tem fortemente

que eu tinha: apropriar-me da estética de letreiros pintados à

representada no seu desenho. Geralmente, um designer vai

mão para produção de fontes tipográficas digitais.

escolher utilizar uma das fontes do Tipos Populares do Brasil

Foi muito interessante fazer essa transposição

querendo representar valores estéticos essencialmente

24 :: entrevista - tipos populares

brasileiros. É como se, no código postscript de cada

design brasileiro, que, por mais que não seja consensual, será

uma das fontes, tivesse sido colocado um algoritmo

sempre importante para a nossa afirmação perante o mundo,

escondido que provoca uma reação em cadeia, que

e perante nós mesmos enquanto povo.

inevitavelmente trará à tona a eterna discussão sobre

Mas quem trabalha com design sabe que algumas regras devem ser quebradas, de acordo com a circunstância. As fontes estão lá para download, para serem utilizadas de acordo com a visão pessoal de cada designer. O momento mais gratificante é ver a idéia que outra pessoa teve para o seu trabalho.

Wd :: Em entrevista para a edição de maio de 2004, Buggy, tipógrafo e fundador da “Tipos do Acaso”, apontou alguns fatores importantes na hora de se definir a tipografia de um site: legibilidade em tela, adequação ao conceito, variação de estilos (negrito, itálico etc.). Considerando estes aspectos, os tipos apresentados no projeto são adaptáveis às exigências da internet?

Moura :: Não mesmo. Nunca aconselharia ninguém a utilizar as fontes do projeto no sistema de navegação de um site complexo, que envolva lógica informacional mais robusta, portais em geral.

Como exemplo, está o próprio site do projeto: as fontes são utilizadas apenas para visualização do catálogo e layouts pontuais (testeiras, imagens de topo) - elas não participam do sistema de acesso à informação. Para esses casos, a escolha deve ser por um sistema tipográfico que possibilite desdobramentos de hierarquia da informação, onde a variação de estilos é imprescindível.

As fontes do Tipos Populares do Brasil são mais aconselhadas para hotsites, sites que queiram um forte impacto visual ou projetos experimentais. Desenvolvi um site para promover a banda Superb (www.sibilina.com/superb). Utilizei, na identidade visual da banda, a fonte adrenalina-sp, do Gustavo Lassala. O aspecto urbano ficou bem apropriado à proposta da banda.

Wd :: Um tipo inspirado na escrita popular é o “Brasilêro”, criado por Crystian Cruz. Em entrevista na edição de fevereiro de 2005, ele aponta “que o sucesso da utilização de uma tipografia numa peça de design depende mais do designer que está utilizando a fonte do que de seu criador”.

Dessa forma, quais dicas você daria para que o profissional possa extrair toda a riqueza contida nas fontes do “Tipos Populares do Brasil” em um site?

Moura :: Concordo com o Crystian. Aliás, eu preferiria não

entrevista - tipos populares :: 25

dar dica nenhuma, que não seja: aproveite! É bem melhor, para me surpreender com as diversas idéias que podem surgir

um tipógrafo viver só de tipografia.

Mesmo assim, vários projetos brasileiros de

das pessoas que utilizarem as fontes. Só peço para quem

tipografia vêm entrando em catálogos de fonthouses

for utilizar as fontes, que mande para o meu e-mail pessoal

internacionais, recebendo prêmios lá fora, a Bienal Letras

(pedromoura@gmail.com) uma imagem em baixa resolução,

Latinas, que passou por São Paulo, trouxe ótimos exemplos

para adicionarmos à nossa galeria.

da cena nacional, temos a Tupigrafia, que é a publicação

Como eu disse, elas representam uma estética

nacional exclusiva sobre o tema, além de ser belíssima.

essencialmente popular, mas não significa que isso seja

Tudo está convergindo para uma consolidação de uma cena

uma regra para a sua utilização. Posso citar dois exemplos

tipográfica brasileira consistente, e penso que já está na

distintos de utilização das fontes que ilustram bem isso:

hora de o mercado apostar no talento nacional, ao invés de

a marca de camisas MONO (www.weare-mono.com)

importar soluções de fora, como acontece em tantos jornais

tem uma proposta estética bem impactante, arrojada e

e revistas de grande circulação, na hora da formulação e

experimental. Eles utilizaram a fonte Thereza Miranda, do

redesign de seus projetos gráficos.

Fernando Rocha, na estampa de uma blusa inspirada numa música da banda de rock Modest Mouse - sendo que ela foi

Wd :: Quais dicas você daria para o profissional que deseja se aprofundar no mundo da tipografia?

também utilizada numa publicidade de CDs de forró! As

Moura :: Um livro essencial é o “Elementos do

possibilidades de utilização das fontes só se restringem à

Estilo Tipográfico”, de Robert Bringhurst (Editora

criatividade do designer.

Cosac Naify). O Bruno Porto tem o seu “Memórias

Wd :: As fontes do projeto estão disponíveis para

Tipográficas” (Editora 2AB), que é belíssimo e muito

download. Por que você decidiu oferecê-las gratuitamente?

importante para entender como a tipografia é essencial

Moura :: Foi uma decisão baseada em algumas opiniões

na formação da nossa cultura visual, e mesmo no nosso

que eu recebi ao longo do projeto. A que mais pesou foi o

imaginário gráfico pessoal. No caso do Tipos Populares

fato de ter constatado que, por estar me apropriando de uma

do Brasil, dois livros foram fundamentais para o projeto:

estética popular, seria mais coerente que o download fosse

“Utopia e Disciplina”, de André Villas-Bôas (Editora

gratuito. Mesmo assim, escolhi por disponibilizar versões

2AB), e “A História da Arte como História da Cidade”,

demo das fontes, incompletas, para ter um maior controle

de Giulio Carlo Argan (Editora Martins Fontes).

de quem as está utilizando. Se houver o interesse da pessoa

A Tupigrafia, que eu já citei, é ótima para saber o

em adquirir as versões completas das fontes, é só entrar em

que acontece e cada publicação é um prazer à parte:

contato e tudo se negocia.

recomendo a qualquer um se tornar colecionador (www.

Wd :: Diante de sua experiência no projeto, como você analisa a produção tipográfica no Brasil?

tupigrafia.com.br). O Henrique Nardi e seu projeto Tipocracia (www.tipocracia.com.br) oferece cursos de

Moura :: A produção nunca esteve tão boa, imagino.

excelente qualidade, por todo o Brasil. E o designer

Muita gente criativa está procurando não só produzir, mas se

Yomar Augusto (www.yvo6.com.br) tem um grande

especializar na área. O problema é que, infelizmente, a nossa

workshop de caligrafia, o projeto Kalligraphos, que é a

cultura tipográfica é muito recente. Ainda é muito difícil para

base do trabalho tipográfico.

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 :: ícones, quando usar?

Como a iconografia pode melhorar a experiência de navegação em um site Trânsito intenso na Rua São Clemente, uma das principais vias de acesso do bairro de Botafogo, no Rio de Janeiro.

O sinal (ou semáforo) fechado é uma ótima oportunidade para que uma mãe, segurando sua pequena filha no colo, possa passar uma lição valiosa: a imagem de uma mão aberta, em vermelho, representa o momento em que devemos esperar o tráfego fluir; já a de homem caminhando, em verde, é a indicação para que possamos atravessar, enquanto os carros esperam a passagem dos pedestres.

A didática materna vivenciada acima demonstra um exemplo de como os pictogramas, símbolos gráficos utilizados geralmente em locais públicos, servem como importantes ferramentas para a transmissão de orientações, cujo objetivo seja o cumprimento de determinadas tarefas. “É impossível olharmos para alguma coisa e não percebermos, ainda que de modo inconsciente, algumas propriedades dela. Por propriedades, entendam-se valores lógicos e semióticos dos mais diversos tipos, que permitem ao nosso ser a categorização da coisa observada em uma escala de valores, que se comporta como o raio de uma circunferência, que vai da periferia (memória mais ‘distante’) até o centro (memória atual, o ‘agora’ do ‘ser’). Um ícone é a palavra usada para designar formas (de todos os gêneros) que suporte uma composição específi ca de valores que as torna muito especiais - e, ainda mais importante - que transforma o ícone em um ‘meme’ coletivo, um ‘DNA’ de memória que é compartilhado e propagado em um grupo de pessoas”, afirma Ronaldo Gazel, diretor de arte na BHTEC e:house.

ícones, quando usar? :: 29

“Os ícones são parte fundamental do mecanismo de interação dos usuários com os computadores, indicando zonas de acionamento de comandos ou ainda simplesmente reforçando visualmente alguma informação que o sistema apresenta” (Mauro Pinheiro) No mundo virtual, este conceito vem sendo utilizado

nismo de interação dos usuários com os computadores,

como apoio para que os usuários possam obter a melhor

indicando zonas de acionamento de comandos ou ainda

experiência durante o período de navegação. “Especifica-

simplesmente reforçando visualmente alguma informação

mente nos sistemas computadorizados, a partir da intro-

que o sistema apresenta”, explica Mauro Pinheiro, profes-

dução da manipulação direta das interfaces gráficas com o

sor assistente do departamento de Desenho Industrial da

uso do mouse, os ícones são parte fundamental do meca-

Universidade Federal do Espírito Santo (UFES).

Meme Unidade de informação que se multiplica de cérebro em cérebro ou entre locais onde a informação é armazenada

A função dos ícones na web Mas como definir a função principal dos ícones, quando pensamos na memorização de determinadas tare-

(como livros) e outros locais de armazenamento ou

fas e na estética gráfica das interfaces digitais? “Os primei-

cérebros. Os memes podem ser idéias ou partes de idéias,

ros ícones surgiram como metáforas para facilitar o enten-

línguas, sons, desenhos, capacidades, valores estéticos e morais, ou qualquer outra coisa que possa ser aprendida facilmente e transmitida enquanto unidade autônoma.

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

dimento do funcionamento dos sistemas. A estratégia deu tão certo que as pessoas se lembravam mais da forma do ícone do que do nome do comando que ele representava.

Logo, os ícones se tornaram a cara do software, desem-

30 :: ícones, quando usar?

“Com o ingresso massivo de designers na criação de interfaces, o que parecia inconciliável se tornou indissociável. O design mostrou que valor estético e valor funcional não precisavam competir entre si” (Frederick van Amstel) penhando papel fundamental na formação de sua própria

‘cartinha’ na seção contatos: a carta, sozinha, não gera

identidade. Foi a partir daí que o valor estético dos ícones

valor positivo (talvez nostálgico), e um texto falando ‘con-

começou a ser explorado em softwares”, argumenta Fre-

tato’ já diz o suficiente. Os dois, juntos, formam o imbró-

derick van Amstel, professor do curso de Tecnologia em

glio”, alerta.

Web Design do Opet (PR) e professor convidado da gradu-

Web já possui uma iconografia própria?

ação em Design da Unisul (SC).

Afirmar que a internet já assumiu um padrão no uso

Segundo Amstel, influenciada pela linguagem visual

de ícones talvez seja uma atitude precipitada diante de

das interfaces de softwares, o processo de criação das

um universo ainda tão recente no cotidiano das pessoas.

primeiras páginas web utilizou ícones sem ganho funcio-

Até porque a utilização deste recurso parece ter sofrido

nal, como se isso fosse representar a construção de um

forte influência da área de software.

ambiente mais interativo. Para que esse quadro fosse

“A maioria dos ícones que encontramos com freqüên-

revertido, o design foi fundamental para que ocorresse

cia na web tem suas origens nos softwares de desktop. A

uma mudança de valores. “Esses ícones não tinham a fun-

imagem da casa para indicar ‘home’ já era usada antes da

ção de facilitar a memorização e nem o aprendizado: seu

web em apresentações multimídia feitas com o Hypercard,

único objetivo era o ganho estético. Com o ingresso mas-

o avô do Director”, diz Frederick van Amstel. “Esse para-

sivo de designers na criação de interfaces, o que parecia

lelo sistema operacional-web funciona muito bem. Quer

inconciliável se tornou indissociável. O design mostrou

dizer, sempre que pudermos replicar linguagens e funcio-

que valor estético e valor funcional não precisavam com-

nalidades dos sistemas operacionais mais populares, maio-

petir entre si”.

res as chances de facilitar a aprendizagem e compreensão

Dessa forma, os ícones vão atingir sua plenitude

daquilo que estamos projetando. Usar um ícone ‘+’ em

dentro de um site caso ajudem os usuários na tarefa de

um menu, por exemplo, nos lembra o funcionamento de

se atingir o objetivo final durante o período de navega-

abrir e fechar pastas do Windows Explorer. O ideal é sem-

ção. “É claro que uma iconografia com bom acabamento,

pre usar comportamentos que os usuários estejam espe-

harmoniosa e consistente agrega valor estético ao projeto

rando”, aponta Felipe Memória, designer de interface da

gráfico. Assim como todos os outros elementos gráficos

Globo.com e professor da PUC-Rio.

também têm este papel. Mas seu principal objetivo está

Se não é original, podemos considerar a particulari-

em guiar o usuário na busca pela informação, ajudando

dade como uma definição mais plausível? “Sim, mas isso

na memorização de caminhos e tornando o meio digital

não significa que a iconografia para web esteja definida,

mais amigável”, diz Melissa de Toledo, diretora de arte

já que a internet é jovem e seus padrões continuam em

da Sirius Interativa.

desenvolvimento”, afirma Dirceu Veiga, criador do WebI-

Portanto, não caia na armadilha de agregar ícones

cones.com.br, site brasileiro especializado em ícones para

em seu site apenas como um esmero gráfico. É o que

web e software. “A iconografia deve estar de acordo com

Ronaldo Gazel classifica como uso de “ícones bonitinhos,

o projeto gráfico de cada site. Por exemplo: a criada para

mas ordinários”. “Eles são belos e animados, porém nem

o site do governo de São Paulo (saiba mais, na página 35)

sempre divertidos e interessantes, ou capazes de substi-

não poderia ser a mesma de um site para crianças ou para

tuir uma palavra, algo concreto, sem cair no clichê, por

o público jovem”, acrescenta Melissa, da Sirius.

mais que eles se esforcem. Um exemplo rápido: a famosa

Outra linha de pensamento parte do princípio que a

ícones, quando usar? :: 31

“(Ícone) seu principal objetivo está em guiar o usuário na busca pela informação, ajudando na memorização de caminhos e tornando o meio digital mais amigável” (Melissa Toledo) iconografia na web ainda vive em cima da popularidade dos símbolos usados atualmente nos sites. Um bom exemplo, segundo Maria de Lourdes, diretora de comunidades de prática e tecnologia web da Sociedade Brasileira de Gestão do Conhecimento (SBGC), está no trabalho realizado pela designer Ro London, que coletou os 300 ícones (www.intersmash.com/300images) mais interessantes e usados em sites por ela pesquisados.

“Assim como a casa, temos uma série de outros ícones populares na web: carta para e-mail, lupa para busca, ponto de interrogação para ajuda, impressora para versão para impressão, cadeado para segurança, carrinho de compras para sites de comércio eletrônico, seta para a esquerda para a ação de ‘voltar’ e ‘x’ para ação de fechar”, enumera Memória.

Seja como for, o especialista aponta que o surgimento de padrões será benéfico para que os ícones sejam mais facilmente assimilados pelos usuários. “Imaginem se cada aeroporto do mundo tivesse um sistema de pictogramas independente. O que seria dos turistas? Não é à toa que existe um padrão internacional seguido por todos os aeroportos. Para quem lembra são aqueles mesmos pictogramas usados no jogo Banco Imobiliário. Seria bom se na web fosse assim. É por essas e outras que digo que sinalização tem tudo a ver com interface web. Os pictogramas usados pelos automóveis também seguem o mesmo padrão em todo o mundo. Quando estamos sem combustível o que é que acende? O símbolo da bomba de gasolina, certo? Em todos os carros que já vimos, não é? Por que será?”, argumenta.

Quando atingiremos este estágio? Só o tempo dirá. “A casinha, para ‘home’, é um bom exemplo de ícone ‘universalizado’ pelo uso. Digamos que apenas o tempo vai dizer se ela vai resistir, até (por exemplo) haver uma troca de paradigmas tal que substitua o conceito de ‘home’ por outro, como ‘hiperespaço’(?) ou algo assim. A arroba, por exemplo, agüentou um bom tempo, mas como ela era um dos pouquíssimos registros gráficos relacionados ao universo da internet, então foi absurdamente utilizada, das mais diversas formas - até que não resistiu”, exemplifica Ronaldo Gazel.

na busca por talentos :: 31

32 :: ícones, quando usar?

“A primeira etapa continua sendo a mesma de qualquer peça de comunicação e design: a definição do público-alvo” (Dirceu Veiga)

um ícone e contar que o usuário final entenderá nossa mensagem. Devemos ter muito claro quem estará visualizando essa informação”, orienta Márcio Ismail, diretor de criação da Publicidade Interativa.

Criação de ícones: fique de olho no público-alvo

Para evitar que isso aconteça, a recomendação é

O avanço da tecnologia tem permitido que o desen-

fazer uma pesquisa do termo/ação a ser traduzido como

volvimento de um site possua uma série de novas funcio-

ícone. “Muitos já têm uma simbologia bem aceita, como

nalidades. Por exemplo: o espaço para comentários vem

o globo terrestre para designar a ‘web’ e o envelope para

se tornando uma função muito comum e o símbolo de um

‘e-mail’. Nestes casos, o melhor é manter o mesmo con-

balão tem sido o ícone mais utilizado para representá-

ceito para não correr o risco de não se fazer entendido.

lo. “Recentemente, estamos acompanhando também um

Para ações pouco popularizadas na internet, o ideal é sim-

grande movimento para a padronização do ícone de RSS

plificar partindo de metáforas genéricas e fugir das espe-

(mais uma vez, influenciado por um software, o Firefox) e

cíficas. Por exemplo, um ícone de produto para um site ou

a popularização do ícone de link externo (seta na diagonal

software de uma loja de ferramentas: é mais interessante

vazando de um quadrado)”, cita Felipe Memória.

usar uma caixa de papelão (representando a forma mais

Assim, dentre as etapas que envolverão a criação de um novo ícone, a principal delas está no estudo do

comum de entrega de produtos) do que fazer um ícone de um produto específico, como um alicate”, cita Dirceu.

público-alvo. “A primeira continua sendo a mesma de

Além disso, ele ressalta a importância dos detalhes

qualquer peça de comunicação e design: a definição do

técnicos dentro deste processo. “Quanto aos tamanhos,

público-alvo. A partir desse ponto se escolhem as cores,

ícones em tamanhos menores que 32x32 pixels dão uma

formatos, tamanhos e metáforas”, aponta Dirceu. “Acho

visão estética melhor. Os tamanhos mais comuns na web

que o mais importante é dar bastante atenção ao público-

são 32x32, 24x24 e 16x16 pixels”.

alvo. Desta forma, fatores como idade e deficiências visu-

Um recurso que pede moderação em seu uso

ais devem ser levados em consideração. No meio digital,

Como vimos, as etapas que envolvem a criação de

contraste de cores e luminosidade podem ficar bastante

ícones devem ser cercada de cuidados. A equipe da Globo.

comprometidos de acordo com diferentes tipos e tama-

com é a prova viva desse cenário. A experiência prática

nhos de monitores e resoluções de tela. E o papel prin-

deles está presente no site GloboEsporte.com, que pos-

cipal de um ícone é transmitir a mensagem com bastante

sui, em sua interface gráfica, uma área com os escudos

clareza. Um bom contraste e um traço que não gere ambi-

de times de futebol para indicar as seções específicas de

güidade na interpretação do símbolo ou ruído visual tam-

cada um deles (“Tudo sobre o seu time”).

bém são importantes”, complementa Melissa.

“Esse elemento é repetido em todas as páginas de

Ainda sobre a escolha das cores e dos formatos, é

futebol nacional. Considero esse um uso atípico e excep-

preciso entender como a forma e o significado podem

cional de iconografia. No GloboEsporte.com funciona

afetar o resultado final de um ícone. “A forma engloba

porque os escudos dos clubes são muito conhecidos, prin-

os conceitos gráficos, como traço e cores. Se vamos

cipalmente por seus torcedores. Ainda assim, tomamos o

usar uma forma mais retangular ou orgânica, cores vivas,

cuidado para fazer com que seus nomes aparecessem no

preto-e-branco, fundos e uma série de outros fatores aju-

estado de ‘mouse over’ e criamos uma página principal

dam a manter a identidade de toda uma família de ícones,

de times no menu, com a listagem por ordem alfabética”,

mesmo tratando, às vezes, de assuntos tão diferentes. Em

explica Felipe Memória.

termos de significado, devemos tomar muito cuidado com

Para quem achou a ação de extremo zelo, sua eficá-

as metáforas. Nunca podemos nos fechar na hora de criar

cia transparece no depoimento de quem já visitou o site.

ícones, quando usar? :: 33

“Quando a iconografia se tornar familiar para o usuário, ela pode potencializar a experiência de uso de um site, agilizando a navegação e tornando-a mais prazerosa” (Felipe Memória)

no qual o usuário combina livremente o ícone com um

“Ele é excelente para quem entende de futebol. Eu, pro-

ções reais”.

rótulo que descreve seu significado, é interessante para explorar diferentes possibilidades de combinação entre texto e imagem, mas não se pode confiar no resultado como uma avaliação real. O ideal é fazer um Icon Sorting antes e depois testar o protótipo da interface em situa-

vavelmente, teria dificuldades para identificar os times do

Falando em metodologias, o eBay, um dos maiores

Nordeste, por exemplo. Mas os designers resolveram meu

sites de compras e vendas on-line do mundo, realizou

problema: colocaram tarjas indicativas ou ‘legendas’ com

uma minuciosa etapa de testes para medir a eficácia dos

os nomes dos times”, revela Maria de Lourdes, da SBGC.

ícones inseridos em suas páginas. “Recentemente, li uma

“A maior sacada da equipe do GloboEsporte.com foi per-

pesquisa publicada, em 2004, por funcionários do eBay. O

ceber que os usuários buscavam informações específicas

artigo falava sobre a metodologia de testes utilizada para

sobre seus times e se beneficiariam muito de um atalho

que eles avaliassem a crescente quantidade de ícones na

para essa função. Esse exemplo ilustra várias funções de

interface do site. Foram 17 pessoas participando do expe-

ícones: atalho, decoração, fetiche etc.”, diz Frederick.

rimento, em duas etapas de testes. O comportamento das

Ou seja, a lição que fica é: use o recurso com mode-

pessoas durante o processo, aliado ao feedback verbal,

ração. “No mesmo GloboEsporte.com, por exemplo, não

gerou conclusões relevantes para a empresa. Ao final do

poderíamos ter usado esse conceito em um ‘Tudo sobre

estudo, concluíram que mais de três ícones associados

as equipes’ na página de Fórmula 1. Carrinhos coloridos

a determinado nome de usuário era o máximo tolerado

ou símbolos das escuderias seriam incompreensíveis para

pelas pessoas. A partir dos dados gerados pela pesquisa

a grande maioria das pessoas. São imagens que estão

foi criado um manual para que os ícones fossem sempre

longe de ter a mesma popularidade dos escudos dos clu-

consistentes visualmente, na forma de interação e no posi-

bes. As pessoas simplesmente não conhecem. Neste caso,

cionamento por todo o site”, aponta Felipe Memória.

ao invés de agilizar a navegação, estaríamos criando uma barreira para os usuários”, esclarece Memória.

Testando a eficácia e o papel ícones na usabilidade do site Para garantir o uso correto de ícones dentro da estrutura de um site, será preciso testar sua eficácia com

Outro aspecto é testar os detalhes técnicos que envolvem os ícones. “É importante também ter certeza de que o tamanho e as cores são adequados para o público e testá-lo em diferentes monitores e resoluções. Além disso, utilize um software (Colour Contrast Analyser) que analisa contraste”, alerta Melissa Toledo.

quem realmente vai usufruir as suas funcionalidades. “Vox

Tudo isso para que os ícones possam ajudar a aper-

populi, vox dei. A melhor maneira de se testar qualquer

feiçoar a usabilidade de um site. “Ela é melhorada a partir

coisa é colocar ‘na boca do povo’. Isso inclui todas as for-

do momento em que um sistema iconográfico é fácil de

mas de pesquisa, seja ela completa e baseada nos mode-

aprender, de ser recordado, eficiente na utilização e, além

los em voga atualmente, ou uma de pequeno porte, feita

de tudo, agradável. Quando a iconografia se tornar fami-

com os membros de uma equipe”, conta Ronaldo Gazel.

liar para o usuário, ela pode potencializar a experiência de

Segundo Frederick van Amstel, para que a avaliação seja feita com maior precisão, será preciso colocar os ícones no contexto onde eles serão utilizados. “Ou seja, num protótipo da interface. Testá-lo isoladamente, através de métodos como o Icon Sorting (http://tinyurl.com/nmmtg),

uso de um site, agilizando a navegação e tornando-a mais prazerosa”, finaliza Memória.

34 :: ícones, quando usar?

A biblioteca da iconografia - Artigos

Teste de ícones

Elementos de semiótica aplicados ao design

Usabilidoido (http://tinyurl.com/nmmtg)

Autor: Lucy Niemeyer (http://tinyurl.com/or3sb)

Apple human interface guidelines: icons Apple (http://tinyurl.com/rw9l4)

Creating Windows XP icons Microsoft (http://tinyurl.com/5d77)

How to create Vista Icons Axialis Software (http://tinyurl.com/orbcj)

Fontes: Dirceu Veiga, Mauro Pinheiro, Revista Webdesign

Autor: João Gomes Filho (http://tinyurl.com/ru7uv)

www.bauhaus.de

Icon analysis: evaluating low spatial

www.guiborchert.com/gworka/index.html

frequency compositions

www.guidebookgallery.org/icons/components

Boxes and Arrows (http://tinyurl.com/p8ur3)

www.iconfactory.com

IBRAU (http://tinyurl.com/lguj7)

www.iconfish.com

Handbook of pictorial symbols Autores: Rudolf Modley, William Myers e Diana Comer (http://tinyurl.com/pgxxk)

Idea index: graphic effects and typographic treatments Autor: Jim Krause (http://tinyurl.com/oyjb6)

www.iconshock.com

Livro do ícone

www.iconwerk.de

Autor: William Horton (http://tinyurl.com/q8hhp)

International picture language: psyche

www.interfacelift.com

miniatures / general series

http://pages.ebay.com/help/myebay/

Imaginary Museum (http://tinyurl.com/oj4zs)

da forma

- Sites http://feedicons.com

Ícones, grandes aliados do projetista

Gestalt do objeto: sistema de leitura visual

myebay-icons.html

Look of the century: design icons of the 20th century Autor: Michael Tambini (http://tinyurl.com/ncn5u)

Learning to love the pixel: exploring the

www.plugmasters.com.br/bancodeicones

craft of icon design

www.webicones.com.br

Symbol source book: an authoritative

Boxes and Arrows (http://tinyurl.com/qto4a)

www.kare.com

guide to international graphic symbols

www.khm.de/~timot/PageElephant.html

Autor: Henry Dreyfuss (http://tinyurl.com/m4m49)

Material type icons task force Dartmouth (http://tinyurl.com/lahve)

Pelos poderes do ícone

Fontes: Dirceu Veiga, Felipe Memória, Melissa Toledo, Revista Webdesign

- Livros Usabilidoido (http://tinyurl.com/njyhk)

1000 Symbols: what shapes mean in art and myth Autores: Rowena Shepherd e Rupert Shepherd

Pixelart 2D e 3D Armando Fontes (http://tinyurl.com/qdags)

Editora Taschen

Sinais e símbolos: desenho, projeto e

Usabilidoido (http://tinyurl.com/p2z6a)

Processo de criação de ícones

ICONS: Signs (http://tinyurl.com/q3w2u)

(http://tinyurl.com/ltfaz)

significado Autor: Adrian Frutiger (http://tinyurl.com/mbvsy)

Fontes: Frederick van Amstel, Maria de Lourdes, Mauro Pinheiro, Melissa Toledo

Designing interfaces: patterns for effective interaction design Autora: Jenifer Tidwell (http://tinyurl.com/oypbw)

Designing pictorial symbols

- Revista Newwebpick - edição “Asia Special” www.newwebpick.com

Autor: Nigel Holmes (http://tinyurl.com/r2t7s)

Fonte: Ronaldo Gazel Designing visual interfaces: communication oriented techniques Autores: Kevin Mullet e Darrell Sano (http://tinyurl. com/qsjh3)

design/web/design: 2 Autor: Luli Radfahrer (http://tinyurl.com/mt9zf)

ícones, quando usar? :: 35

Um exemplo de padronização no uso de ícones na web Bate-papo: Márcio Ismail, na época, diretor de arte do projeto

A Sirius Interativa desenvolveu recentemente um guia de padronização visual (http://tinyurl.com/r2o5f) para os sites do Governo do Estado de São Paulo. Nesta entrevista, vamos saber os principais detalhes este projeto.

Wd :: Como surgiu a oportunidade de criar um guia de padronização visual dos sites do Governo do Estado de São Paulo?

Márcio :: O governo tinha uma preocupação muito grande com sua presença na internet, além de querer comunicar de forma clara todas as suas qualidades. A Sirius Interativa foi procurada para iniciar a definição de uma nova cara para o portal do governo, além de servir de guia para os outros sites e futuras atualizações.

Wd :: Por que vocês decidiram criar uma padronização para o uso de ícones?

Márcio :: É impressionante a dimensão que o portal atinge. As áreas, serviços e produtos que estão nele, ou são derivados, são enormes. Claro que existem casos específicos que seguem uma linha visual própria, mas, no geral, era muito importante definirmos um conjunto de regras mínimas para que os ícones criados seguissem o mesmo caminho.

Wd :: Que tipo de estudos vocês fizeram para definir os padrões de ícones?

Márcio :: Estudamos, principalmente, as necessidades do portal atual e das possíveis utilizações dessa iconografia. Tentamos ao máximo fugir de metáforas distantes do motivo final, para evitarmos algum tipo de ruído e seguimos a linha gráfica do portal. Trabalhamos sempre com o entendimento seguro da imagem. Nada de ícones de difícil entendimento. Num portal assim estamos falando praticamente com todo o tipo de usuário.

Wd :: O avanço da tecnologia permite que o desenvolvimento de um site possua uma série de novas funcionalidades.

Diante disso, como vocês planejaram esta questão na padronização visual dos sites do Governo do Estado de SP? Márcio :: Demos as diretrizes básicas para que daqui para frente sejam criados novos ícones. Com o tempo vão surgir novas demandas e o objetivo é que seja criado um banco de ícones para ser usado nos sites e projetos ligados ao portal. O mais importante nessa hora é conseguir manter que o mesmo ícone seja utilizado sempre para a mesma função.

36 :: debate - navegando ao som de...

O uso de recursos sonoros em sites parece ter sofrido com sua má utilização logo no início da internet comercial. Ou seja, o carregamento demorado e a falta de sintonia com o conceito da página eram alguns dos problemas mais comuns.

Hoje, as tecnologias nesta área avançaram e já é possível disponibilizar fundo musical e outras mídias sonoras que não afastem ou prejudiquem a navegação de um usuário. Analisando o atual cenário no Brasil, como, quando e onde é recomendável utilizar recursos musicais em um site?

debate - navegando ao som de... :: 37

“Também é obrigação dos desenvolvedores explicarem para os clientes (especialmente aqueles que acham o máximo diversos sons e fundos musicais dos sites dos outros), quando o projeto tem contexto ou não para aplicá-los”

:: Ludmilla Rossi Diretora geral da Mkt Virtual www.mktvirtual.com.br

“Acredito que os efeitos sonoros contribuam muito para uma rica experiência de navegação para os usuários. Porém, quando são utilizados sem contexto, causam irritação e até mesmo a desistência de ir além dentro de um site. A aceitação dos efeitos sonoros também está relacionada com o propósito: não adianta encher de sons um projeto no qual o usuário tem o perfil de apenas ler ou buscar informações para o trabalho, por exemplo.

No entanto, em sites onde os usuários entram para se entreter, e esperam ser surpreendidos, os efeitos sonoros estimulam e prendem a atenção, especialmente se aliados a um design que crie ganchos para os sons serem explorados.

Tudo isso envolve o planejamento desde o início do projeto, pois assim dá para pensar em uma forma de enriquecer sem atrapalhar a navegação, e criar o desejo nos internautas de ir além, tornando assim estes sons ótimos aliados para agradar o visitante de um site. Também é obrigação dos desenvolvedores explicarem para os clientes (especialmente aqueles que acham o máximo diversos sons e fundos musicais dos sites dos outros), quando o projeto tem contexto ou não para aplicá-los.

A questão do carregamento - que hoje não é o maior dos problemas - é resolvida com os sons de maior peso em streaming ou carregamento modular, o que não onera tanto no tempo de espera, mas ainda assim deve ser considerada para aqueles sites com tráfego muito intenso, onde voltamos à questão do planejamento.”

38 :: debate - navegando ao som de...

:: Melissa Lesnovski Sócia da Aldeia - Agência de Internet www.aldeiainternet.com.br

“O usuário deve ser o fiel da balança na escolha :: Marcio Bomfim Designer da Globo.com | GloboEsporte.com www.marciobomfim.com

“Além da adequação ao projeto gráfico e ao tema, é preciso avaliar o público-alvo a quem

dos recursos sonoros. A ele deve ser dado o direito de escolher entre ouvir som ou não, a qualquer momento durante a navegação” “Não existe fórmula mágica para avaliar a pertinência

se destina o site e as conseqüências práticas e

do som em um site. O que existe é a velha regra da coe-

técnicas da utilização de áudio”

rência. A inserção de som pode incrementar a ambiência do site e torná-lo amigável ao público-alvo, mas também

“O primeiro passo para definir a utilização ou não de

pode enterrar sua credibilidade.

áudio em um site é identificar a necessidade e as conveni-

Quando o conteúdo sonoro é o objeto do site, o

ências. Definitivamente, o áudio não é obrigatório e nem

público está disposto a ouvi-lo com atenção, não se inco-

sempre é sinônimo de qualidade ou ousadia, muito pelo

modando tanto com a eventual demora na navegação.

contrário: um tema fora de contexto pode acabar com

Rádios on-line, sites de bandas, produtoras de áudio,

um belo projeto.

entretenimento e jogos podem investir em recursos sono-

Apesar de a banda larga de boa qualidade estar cada vez mais presente nas empresas e residências, as

ros mais avançados, cuidando sempre da relação ‘peso versus qualidade’ do arquivo veiculado.

conexões discadas e máquinas pouco potentes ainda são

Quando o conteúdo sonoro não é o objeto de um

realidade para o internauta brasileiro. Portanto, além da

site, e sim um reforçador de sua ambiência, todo cuidado

adequação ao projeto gráfico e ao tema, é preciso avaliar

é pouco. Lidamos com um conteúdo pesado, não-solici-

o público-alvo a quem se destina o site e as conseqüên-

tado pelo usuário e, até segunda ordem, desnecessário.

cias práticas e técnicas da utilização de áudio.

Caso optemos pela presença da trilha, é necessário que

Sites de bandas, casas de festa, rádios, candidatos/

escolhamos peças de qualidade, autorizadas ou compos-

políticos e outros temas, em que o som faz parte da identi-

tas para a ocasião. Um site com música ruim é infinita-

dade e serve como apoio ao projeto gráfico, são exemplos

mente pior do que um site silencioso.

em que o áudio é muito importante. Em meu site (www.

Sites corporativos merecem atenção quanto ao

marciobomfim.com), o som que utilizo faz parte da pro-

ambiente sonoro. Existe a percepção, em parte do

posta do site: carioca, Rio de Janeiro, Bossa Nova, paz.

público, de que sites com som são menos ‘sérios’. A não

Mas ainda é muito comum vermos sites institucionais

ser que haja uma trilha corporativa, aplicada em outras

com loops totalmente desacompanhados da usabilidade,

mídias ou familiar ao público, a melhor opção é o silêncio.

sem um botão de stop, ou com um botão tão escondido,

Esses sites costumam ser acessados no trabalho: outro

que obriga o usuário a fechar a janela ou desligar a caixa

motivo para evitar dissabores ao usuário.

de som. Em geral, o áudio deve ser evitado e incluído

Em qualquer caso, o usuário deve ser o fiel da

apenas em projetos que de fato necessitem dele, mas

balança na escolha dos recursos sonoros. A ele deve ser

nestes casos deve prevalecer o bom senso: na dúvida,

dado o direito de escolher entre ouvir som ou não, a qual-

para não arriscar, o melhor é não utilizar o áudio.”

quer momento durante a navegação.”

navegando ao som de... :: 39

Marcelo Albagli Diretor de criação da Canvas Webhouse www.canvas.com.br

“Quando utilizamos fundo musical para peças on-line, como banners ou intervenções, a principal reclamação que recebíamos era a invasão de privacidade dos usuários. Na maioria das vezes, essas peças eram acessadas de dentro de empresas e os funcionários não curtiam muito a idéia de serem delatados pelo som - ou então, como navegavam ouvindo música, a trilha sonora atrapalhava a experiência desses usuários.

Na minha opinião, o som só deve aparecer quando solicitado, não pode ser uma surpresa - principalmente em banners, que são inseridos na navegação do usuário sem que este os tenha solicitado. Em hotsites, onde podemos utilizar mais esse recurso, a opção de controle de volume não pode deixar de estar presente.

Mas o principal, como sempre, é a qualidade criativa da trilha sonora.

Geralmente, sons de clipart não são tão pobres quanto imagens de cliparts, porém o melhor é sempre produzir a trilha com exclusividade para cada peça. É raro que os clientes desejem investir em músicos e estúdio, mas por isso mesmo damos prioridade aos animadores que tenham boa noção musical quando estamos contratando. A boa noção musical também traz outros benefícios para a equipe criativa - como uma boa noção de ritmo, por exemplo.

No mais, infelizmente não podemos ainda basear a criação somente na trilha sonora. Embora fundamental em produtos audiovisuais, não é todo usuário que possui caixas e placa de som de qualidade. Dessa forma, geralmente prefiro ainda usar o som mais como um recurso extra do que como o ponto de partida para a criação.”

“O som só deve aparecer quando solicitado, não pode ser uma surpresa - principalmente em banners, que são inseridos na navegação do usuário sem que este os tenha solicitado”

40 :: debate - navegando ao som de...

Participação dos assinantes

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

Como, quando e onde é recomendável utilizar recursos musicais em um site?

Sérgio Mari Jr. sergio@infonauta.com.br

Ao utilizar músicas ou efeitos sonoros em um site, temos que considerar que atualmente, em tempos de mp3, rádios on-line e podcasts, o controle sobre o que ouvir enquanto navega está nas mãos dos usuários. Um usuário que esteja ouvindo músicas ou um podcast pode se zangar com um site que dispara outros sons, atrapalhando sua concentração. Músicas só são bem vindas

vencedor!

em sites de entretenimento, onde a exploração dos sentidos do usuário é o foco principal. Mesmo assim, não deve ser acionada automaticamente. É o usuário quem deve decidir se liga ou não o som sugerido pelo site.

Alexander Rodrigues alexrodrigues43@yahoo.com.br

Essa questão é delicada e geralmente o uso dos recursos sonoros na web é feita de maneira impensada. Temos que ter em mente sempre o usuário, interferindo o mínimo possível em sua navegação. Devemos guardar o som como um elemento de surpresa, algo que vá enriquecer a experiência de quem usa nossos produtos. Na minha opinião, músicas e outros efeitos sonoros devem ser usados onde o som é elemento principal: em sites de músicos, gravadoras, shows etc.

Carlos Eduardo kaducao@yahoo.com.br

Sites com temas bem específicos, onde o recurso musical sirva de complemento para o objetivo do site, sem sobressair às idéias, ao layout e, principalmente, sem irritar o usuário.

Gustavo Esteves gustavo.esteves@gmail.com

Acredito que existem duas maneiras para utilizarmos sons: alerta sonoros quando acontecem eventos no site e sons que integram o ambiente do site.

Rafael Souza rafael@crcsp.org.br

Esta etapa deve ser avaliada de acordo com a proposta do projeto, ou seja, dependendo da sensação que o site queira passar ao usuário.

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

O autor da melhor resposta ganha prêmios.

42 :: e-mais - sites políticos

SITES POLÍTICOS: a nova geração dos cabos eleitorais Segundo dados do Tribunal Superior Eleitoral (TSE), as eleições políticas no Brasil, em 2006, contam com mais de 15 mil candidatos dentre os cargos elegíveis (presidente, s e n a d o r, d e p u t a d o s f e d e r a l , e s t a d u a l e d i s t r i t a l ) , distribuídos pelos 29 partidos políticos existentes.

Levando em conta a importância que a internet vem

“Muitos partem do princípio que, para um site político, basta colocar a biografia, discursos, fotos e alguns textos” (Fabiano Carnevale)

assumindo no cotidiano das pessoas, é imprescindível que as campanhas políticas marquem presença no mundo virtual, tornando os sites os novos cabos eleitorais dos candidatos e partidos políticos.

projetos e mídia on-line da Navigators.

“Além do fenômeno de alcançar os usuários a qualquer hora e lugar, as possibilidades de geração espontânea de

“Em enquete realizada na periferia de São Paulo,

conteúdo e sua capacidade de viralidade são fantásticas.

pela Escola do Futuro USP (laboratório interdisciplinar

Estamos falando de um universo de mais de 30 milhões de

que investiga como as novas tecnologias da comunicação

pessoas, que podem incentivar, estimular e gerar conteúdo

podem melhorar o aprendizado), a internet aparece em

para uma campanha”, acrescenta Fernando Gustavo, sócio-

terceiro lugar como sendo a maneira como as pessoas se

diretor da I-Bizz Mídia e Tecnologia, agência responsável pelo

informam sobre os programas de governo dos candidatos

site do Partido dos Trabalhadores (PT - www.pt.org.br).

n a s e l e i ç õ e s , p e rd e n d o a p e n a s p a r a o s t e l e j o r n a i s

Um novo mercado que se abre?

e o h o r á r i o e l e i t o r a l g r a t u i t o n a T V, m a s f i c a n d o n a

Além das transformações que a internet vem trazendo

frente das revistas e jornais impressos”, afirma Ricardo

para o marketing político, devemos levar em consideração

Barreto, diretor da RBW Comunicação e Tecnologia, que

também as oportunidades que este mercado poderá trazer

desenvolveu os portais do Partido Popular Socialista (PPS

para as agências e os profissionais freelancers.

- www.pps.org.br) e do Partido Trabalhista Brasileiro (PTB - www.ptb.org.br).

“ Ta n t o p a r a a s a g ê n c i a s d i g i t a i s c o m o p a r a a s tradicionais, o retorno principal é a oportunidade de

Ou seja, a web se transformou em uma ferramenta

participar de campanhas de grande importância no cenário

fundamental para proporcionar uma experiência completa

nacional, além do lado financeiro. Para o freelancer, por

na interação com o usuário/eleitor. “Antes, precisamos

exemplo, as oportunidades surgem, pois é gerada uma

entender qual é o objetivo de um site. Se o criador do site

maior demanda de contratação temporária pelas agências

quiser apenas aparecer na internet, basta criar algumas

selecionadas para participar das campanhas”, revela

páginas e pronto. Entretanto, se há um objetivo nesse

Fernando. “Este segmento ainda é novo no Brasil, o que

site, é preciso pensar, estudar, planejar e arquitetar bem

abre grandes perspectivas profissionais. Além do mais,

as informações para que o site seja relevante e atraia o

de dois em dois anos são milhares de pessoas que se

maior número de usuários”, diz Felipe Morais, gerente de

candidatam em todo o país”, complementa Ricardo.

e-mais - sites políticos :: 43

“A internet aparece em terceiro lugar como sendo a maneira como as pessoas se informam sobre os programas de governo dos candidatos nas eleições” (Ricardo Barreto) No entanto, o especialista ressalta a resistência de um

existe uma preocupação em utilizar a internet como um

segmento que ainda procura as vantagens proporcionadas

novo espaço de discussão pública. De buscar, a partir dos

pela web. “Eles preferem a televisão, os cartazes, os

sites, construir redes de apoio sólidas e participativas. ivas. Vale

santinhos, os muros etc. Como decorrência não se tem o

o exemplo de Howard Dean, que construiu onstruiu sua campanha,

devido cuidado na criação dos sites e na sua atualização. É

pelo elo apoio do Partido Democrata, mocrata, à presidência dos mo

como se qualquer um soubesse criar um site”.

EUA, em 2004, basicamente 20 0 e a partir de seu blog (Dean

D e s s a f o r m a , p ro c u re re u n i r o m a i o r n ú m e ro d e

for America).

America)) Foram arrecadados dados mais de 25 milhões de d

argumentos para vencer a visão predominante ominante de site om

dólares, somente com contribuições som m buições médias de pessoas

como uma espécie de ‘panfleto eletrônico’.

“Muitos ele

físicas (de cerca de U$ 80, no ce e o máximo) pela web. Ainda

partem do princípio que, para au um site, basta colocar a

que não tenha a sido o indicado do d partido, a campanha de

biografia, discursos, fotos os e alguns textos do próprio

Dean segue co como um marco na história da relação entre a o

político. Mas uma característica acterística geral dos internautas intern

política e a inte internet”, aponta Fabiano. e

é ir além da informação que receberam e, mais que isso,

Um ponto p positivo nesta discussão está no fato de as

há a necessidade de interagir/reagir agir/reagir gir/reagir ao conteúdo que

normas eleitorais à eleitora a se tornarem mais rígidas com relação r

lhe foi exposto. Nisso, os sites políticos brasileiros a ainda

propaganda imp impressa, o que certamente tornou p nou a internet n

caminham com passos desajeitados, s, navegando em águas á

como um dos principais palcos para a exposição p posição dos p

revoltas”, cita Fabiano Carnevale, webmaster do site tte do

candidatos. Porém Porém, m fique atento! Para evitar eventuais ntuais abusos, nt

deputado federal Fernando Gabeira.

o TSE determinou a algumas regras para o desenvolvimento olvimento e a

Situação bem diferente do que vem ocorrendo o no cenário político internacional. “Nos EUA e na Europa, a, já a

manutenção de propaganda eleitoral eletrônica. pro o “Foi expressamente proibida - em qualquer período expressa a

44 :: e-mais - sites políticos

“Além do próprio site, a campanha tem que ter uma grande atenção aos sites de comunidade e conteúdo como Orkut, YouTube e blogs” (Fernando Gustavo) - a propaganda em páginas de provedores de serviços de

a diversidade dos dispositivos e plataformas de acesso à

acesso à internet. Os candidatos podem manter página

internet, como os PDAs e celulares, com as respectivas

na internet, sob qualquer terminação, sujeitando-se a

modalidades interativas (ringtones, imagens, acesso WAP e

regras específicas apenas o DPN ‘.can.br’. O pedido de

os aplicativos brew e Java)”, alerta Fernando Gustavo.

registro deste domínio deve obrigatoriamente obedecer

Dentro desse cenário, já podemos apontar alguns bons

à especificação ‘nomedocandidatonumerodocandidato.

exemplos de sites políticos no país. Um deles é o do deputado

can.br’, correspondendo o nome aquele indicado para

Fernando Gabeira (www.gabeira.com.br), que possui uma

figurar na urna eletrônica. O registro é isento de taxa e

estrutura própria, com profissionais (designer, webwriters e

deferido somente após o efetivo requerimento do registro

webmaster) trabalhando exclusivamente para o portal.

de candidatura perante à Justiça Eleitoral. O candidato

“Possibilitar ao máximo a troca entre o político e o

a rc a c o m a s d e s p e s a s c o m c r i a ç ã o , h o s p e d a g e m e

eleitor deve ser a prioridade dos sites políticos. Com o

manutenção da página, sendo que o domínio é cancelado

site, é possível você expandir a representação política,

automaticamente após a votação”, orienta Ana Amélia de

ligando sites e matérias de interesse à campanha ou ao

Castro, advogada, consultora legal em TI e professora de

mandato político. Ou seja, o eleitor pode, a partir de

Direito convidada da FGV.

uma proposta apresentada pelo candidato/parlamentar,

Sites políticos possuem particularidades na criação?

encontrar no site informações relevantes sobre o tema

RSS, blog, espaço para comentários, enquete, conteúdo,

da proposta, tendo assim mais chances de construir uma

áudio etc. Da mesma forma que acontece com qualquer

opinião a respeito do assunto. Por exemplo, a partir de

projeto, a criação e o desenvolvimento de sites políticos devem

uma proposta de regulamentação da prostituição, você

ser feitos sempre com o que há de melhor no mercado.

pode encontrar artigos, entrevistas, sites e vídeos sobre

“Não deve faltar criatividade para garantir inovações

o tema (contra e a favor) e dessa forma já está dando ao

e diferenciais que tornem o site original. Interatividade,

eleitor novas possibilidades de se inserir no assunto que

navegação simples, visual agradável, conteúdo utilitário, vídeos

vão muito além do blábláblá do horário eleitoral”, finaliza

curtos e objetivos e, sobretudo, atualização permanentemente

Fabiano Carnevale.

são requisitos fundamentais”, afirma Sérgio Xavier, diretor da SX Brasil Comunicação Digital, responsável pela criação do site do Partido Verde (www.pv.org.br).

Outro aspecto envolve o crescimento das ferramentas colaborativas, que ganham força com o advento da chamada web 2.0. “Além do próprio site, a campanha tem que ter uma grande atenção aos sites de comunidade e conteúdo como Orkut, YouTube e blogs. Estimular o nome do candidato nestes veículos é como aumentar a exposição e o tempo de TV a que um candidato tem direito, mas é necessário cuidado ao lidar com estes públicos, pois diferente da TV, não há a menor possibilidade de controle sobre o que será ou não publicado. Não esqueceria também

46 :: estudo de caso - Samambaia

Samambaia: como tornar a tecnologia uma aliada na produção de um conceito Um conceito de criação de sites ainda pouco

projeto criativo nosso. Já tínhamos algumas idéias de nome

explorado no Brasil envolve aquele tipo de projeto no

e do que fazer, mas ainda faltava alguma coisa. Foi então

qual os profissionais investem boa parte do tempo de

que nós ganhamos o concurso Apple de Criatividade Digital

trabalho na pré-produção. Ou seja, a criação vai além dos

(www.apple.com/br/criatividadedigital).

computadores e suas ferramentas, buscando no mundo

Como prêmio, ficamos quase um mês viajando pelos

real as referências necessárias para o desenvolvimento

EUA. Lá, pudemos perceber como a cultura brasileira

de interfaces digitais.

estava em voga no exterior. E percebemos que não existia

São poucos, mas os exemplos existentes demonstram

nada até o momento com a proposta da Samambaia: uma

o nosso potencial na área. Um deles é a Samambaia (www.

marca quase folclórica e utópica buscando divulgar uma

samambaia.com.br), projeto focado em “promover uma

cultura “genuinamente” brasileira.

releitura contemporânea das manifestações do povo

Por eu ter vindo de uma formação em Design Gráfico,

brasileiro”. Nesta entrevista, Pedro Garcia, um dos

estava cansado de debater o que seria o “design”

criadores do projeto e diretor de arte na MRM Worldwide

genuinamente brasileiro. Na nossa visão, quanto mais

London, braço digital da McCann Erickson, revela os

longe do design tradicional e mais próximo do design

principais aspectos no desenvolvimento do site, que

vernacular (naif, popular) melhor.

envolveu uma extensa pesquisa de imagens, edição de vídeo e estudo tipográfico.

Wd :: Como surgiu a idéia de criar a Samambaia? E por que a escolha desse nome?

Pedro :: O Juca Battiston era minha dupla de criação na Globo.com e nós sempre conversávamos sobre ter um

Então, ficou fácil escolher o nome: nada mais brasileiro do que a Samambaia, sonoro nome que vem do tupiguarani. Só que para que tudo isso pudesse acontecer de verdade, convidamos a Claudinha Niemeyer para fazer parte desse nosso “coletivo criativo” e passamos a criar juntos a partir daí.

estudo de caso - Samambaia :: 47

Wd :: Quais são as fontes de inspiração da Samambaia e como elas influenciaram na criação e no desenvolvimento do site?

Pedro :: Tentamos nos inspirar não só em temas, mas também na linguagem gráfica popular brasileira. Por isso, não adianta usar a linguagem mais moderninha do momento ou tentar ser cool. Acredito que o que fazemos é mais atemporal, pelos menos em termos de conceito.

Trabalhamos o site como se fosse qualquer outra peça, ou seja, procuramos fazer com que o usuário mergulhasse no universo da Samambaia ao entrar no site. É claro que temos todas as limitações tecnológicas, assim como as outras peças (camisetas, vídeos, painéis etc.) também têm as suas limitações. E esse acabou se revelando um dos desafios mais interessantes da nossa proposta: ser um

bem mais universal, que pudesse ser entendido tanto no

coletivo criativo capaz de criar uma identidade brasileira

Brasil quanto no exterior. E, pelo fato de o projeto da

para as mais diversas mídias.

Samambaia ser um escape nosso para não ter que ficar

Wd :: É comum as grifes de roupas mudarem seus

limitado e fazendo sempre projetos comerciais, tentamos

sites conforme são lançadas as suas coleções (inverno,

fazer tudo bem diferente, com a nossa identidade, sem se

verão, primavera e outono). O site da Samambaia

importar tanto com o resultado comercial.

está em sua segunda versão, no qual apresenta as

Wd :: Um dos diferenciais no site do projeto está no

novas criações. Dessa forma, quais foram as principais

extenso trabalho de pré-produção, que focou na busca

modificações realizadas?

de referências visuais do mundo real. Dessa forma, quais

Pedro :: Sempre tentamos transmitir algo além da estampa da camiseta. Coisa, aliás, que foi bem complicada quando eu me mudei para Londres. Percebi que as pessoas de fora do Brasil praticamente perdiam todo o contexto por trás da Samambaia e só analisavam o visual.

Por isso, acho que nessa segunda versão, tanto nas estampas, quanto no site, tentamos causar um impacto

o “T en ta mo s no s ins pir ar nã só em te ma s, ma s ta mb ém na lin gu ag em gr áf ica po pu la r br as ile ira ”

foram as principais etapas na elaboração e construção do site?

48 :: estudo de caso - Samambaia

Pedro :: Geralmente, ficamos bastante tempo guardando tudo que achamos interessante, deixando as idéias amadurecerem. Uma vez que conseguimos fechar um conceito criativo, começamos a realmente produzir.

Por mais que a gente tente se organizar, tudo acaba andando meio em paralelo: as camisetas, o site, o DVD, embalagens, novos produtos etc.

Como todos nós trabalhamos com criação e propaganda, já estamos acostumados com o desafio de conceituar, preparar e produzir nossas idéias. Só que, no caso da Samambaia, ao invés de contratar alguém, preferimos fazer tudo nós mesmos. Então, a gente vai

Esboço do site

lá, prepara, filma, fotografa, edita, desenha, anima... Dá

Wd :: A expansão da tecnologia de banda larga

um trabalhão, mas garante que o resultado saia 100% do

tem permitido a criação de interfaces digitais que

jeito que a gente quer.

possibilitem a integração de áudio, vídeo e texto. Uma

Wd :: Em termos de design, percebemos que a

das inovações no site está na animação do vendedor

tipografia utilizada em boa parte dos objetos do site é

que expõe as camisas na banca, conforme o usuário

inspirada em fontes manuscritas. Que tipo de estudos

vai escolhendo os modelos de estampa. Que tipo de

vocês fizeram para definir este tipo de fonte?

tecnologia vocês utilizaram e quais foram os principais

Pedro :: Assim como diversas coisas dessa segunda

desafios para tornar este conceito viável?

fase da Samambaia, tentamos usar elementos próprios da

Pedro :: Na verdade, a idéia é bem simples:

cultura popular brasileira. Para essa tipografia, fomos até

basicamente é vídeo digital mapeado quadro-a-quadro

o camelódromo da Rua Uruguaiana, no Centro do Rio, e

no After Effects. Fomos filmar o feirante trocando as

conseguimos descobrir o cara que pinta todas as placas

camisetas (que é a parte central do site) e, com fotos do

da área: o Sr. Mazaki, um descendente de japonês muito

cenário, construímos o resto em volta dele. Todos os outros

simpático por sinal. Ele criou para a Samambaia uma

elementos foram “ilustrados” no Photoshop.

tabela com todos os caracteres e reaproveitamos para montar as frases, tanto nas camisetas quanto no site.

O mais trabalhoso, na verdade, foi mapear quadroa-quadro as estampas no After Effects em cima do vídeo.

estudo de caso - Samambaia :: 49

Mas, como a Samambaia é quase um projeto de vida, a

Dessa forma, quais são os cuidados para evitar que o

gente costuma se dedicar ao máximo para que cada

áudio em um site não seja prejudicial à navegação do

detalhe possa fazer a diferença.

usuário?

Wd :: Falando em After Effects, como você aprendeu

Pedro :: De uma forma geral, sou contra áudio não

a dominar o programa e quais são as particularidades e

solicitado em sites, banners ou coisas do gênero. Quase

cuidados no seu uso voltado para projetos web?

sempre já estou ouvindo alguma música no computador

Pedro :: Já mexia bastante em Flash e Photoshop e como sempre ouvia falar que o After Effects era uma

e também como uso várias janelas, muitas vezes fica uma luta para descobrir de onde está vindo o som.

mistura dos dois, resolvi baixar alguns tutoriais para

Mas, nesse caso, o áudio é bem pertinente para

começar. Levei um tempo até me adaptar, mas o que

deixar o visitante no clima da feira livre. Para que não

ajudou bastante foi ter feito o meu projeto de graduação

fosse prejudicial à navegação do usuário, utilizamos o

da Faculdade de Design todo em vídeo. Acho que a melhor

áudio em volume baixo e com o botão para desligar bem

maneira para aprender mesmo é tentar arrumar algum

visível na interface. Fora isso, ele só começa depois que

projeto real para praticar.

todo o site já carregou e tem um “bitrate” bem pequeno

E agora cada vez mais tem se usado After Effects na

para não pesar muito.

web, porque sem tanta limitação de banda, ele acaba sendo

x

muito mais fácil e prático para fazer manipulação de imagens,

Bitrate

vídeos e animações com muitos efeitos. No entanto, ele tem

Também conhecido como data rate, indica o volume de dados

que ser usado com cuidado, porque pode complicar bastante

transferido a cada segundo num fluxo de áudio ou de vídeo.

alguma mudança de conteúdo ou atualização.

Fonte: José Valter (http://tinyurl.com/edg4u)

Wd :: Apesar dos vários recursos “pesados”, o site apresenta um rápido carregamento entre suas seções.

Qual é o segredo para se atingir tal eficácia?

Pedro :: Isso também deu um certo trabalho, mas daqueles que valem a pena, porque no final o site fica bem mais rápido. Ao invés de usar um vídeo inteiro para toda área que estava sendo animada, só utilizamos a parte onde o vendedor se mexe.

Exportamos uma seqüência de JPEGs e fomos posicionando no Flash de acordo com a animação. E, como era uma seqüência de imagens, deu para aproveitar os frames da ida e inverter a ordem para fazer a animação da volta, praticamente cortando pela metade o tamanho do arquivo.

Wd :: Nesta edição promovemos um debate sobre a validade do uso d e re c u r s o s s o n o ro s e m u m s i t e .

Vocês utilizaram este recurso de maneira bem adequada, ao colocar um fundo sonoro ligado ao ambiente dos centros populares de comércio.

Wd :: Falando em navegação, percebemos que a interface do site privilegiou a intuição, no qual os objetos se tornaram os alvos dos cliques dos usuários.

Quais aspectos determinaram este tipo de escolha?

50 :: estudo de caso - Samambaia

na moldura para usuários com resolução baixa e tentar deixar o layout harmonioso mesmo para quem acessa com resoluções bem maiores.

Wd :: Vocês disponibilizaram duas versões do site: português e inglês. Quais aspectos foram relevantes para que essa decisão fosse tomada?

Pedro :: O site da Samambaia passou a ter m u i t o s a c e s s o s d o e x t e r i o r, p r i n c i p a l m e n t e d e p o i s que desfilamos no “São Paulo Fashion Week”, criando estampas para a “Ellus 2nd Floor”. Além disso, c o m e ç a m o s a re c e b e r e - m a i l s e p e d i d o s d o m u n d o todo, culminando com algumas lojas internacionais que “Para essa tipografia, fomos até o camelódromo da Rua Uruguaiana, no Centro do Rio, e conseguimos descobrir o cara que pinta todas as placas da área”

passaram a vender produtos da Samambaia.

Como eu me mudei para Londres recentemente, e passamos a vender aqui também, era muito importante que

Pedro :: Também não sou muito fã de interfaces

o site tivesse uma versão em inglês. Inclusive, atualmente, a

que tenham metáforas de objetos reais e você tenha que

Samambaia é muito mais conhecida fora do Brasil do que no

“descobrir” onde estão as coisas, a não ser quando

nosso próprio país. Recentemente, por exemplo, tivemos alguns

realmente o projeto peça uma experiência mais

trabalhos publicados no livro T-Shirt 360º, de Barcelona.

lúdica. Porém, como a idéia era realmente transmitir a

Wd :: Quais são os próximos passos do projeto? Vocês

experiência da feira, utilizamos esse recurso, mas de uma

têm planos de lançar uma opção de comércio eletrônico?

maneira simples e intuitiva.

Pedro :: A Samambaia quer ficar cada vez menos

Wd :: O variado uso de resoluções de tela por parte

limitada às camisetas e às exigências atuais do mercado

do público-alvo de um site é um aspecto fundamental

da moda. Um exemplo disso foi o DVD que lançamos

na hora de se projetar interfaces digitais. Como vocês

recentemente e alguns outros projetos artísticos que

trabalharam esta questão no site do projeto?

temos em mente. Mas acredito que o site sempre terá um

Pedro :: Observamos que o nosso site era visitado principalmente por designers, que geralmente utilizam monitores grandes com resoluções bem maiores que a média.

papel fundamental, porque é a nossa principal interface de comunicação com o mundo.

O comércio eletrônico sempre foi parte da proposta

Já que o conteúdo era bem amarrado e não dava

do site da Samambaia. Porém, logo no lançamento da

para ter muita flexibilidade, resolvemos concentrar tudo

marca, focamos nossas vendas para lojas, por uma questão de escala de divulgação do nosso trabalho.

O p t a m o s , e n t ã o , p o r n ã o e x p l o r a r o c o m é rc i o eletrônico para não gerar uma concorrência desleal com as lojas que vendiam nossos produtos. Atualmente, estamos estudando seriamente a possibilidade de lançar o e-commerce no nosso site. Mas antes queremos nos estruturar, porque a loja virtual vai gerar uma demanda que ainda não estamos preparados para atender.

52 :: Tecnologia na web

Tecnologia na web Como se preparar para escolher um gerenciador de conteúdo Na edição de dezembro de 2005, quando abordamos

Comunicação Digital (www.sxbrasil.com.br).

quais conceitos e tecnologias continuaram em alta e quais caí-

Além disso, fl exibilidade para adaptação da interface,

ram em desuso, o professor Carlos Bahiana, da PUC-Rio, anun-

segurança e facilidade no uso são outros aspectos a serem

ciava que a popularização dos gerenciadores de conteúdo web

levados em conta. “Analise se a ferramenta se encaixa em seus

(CMS - Content Management System) traria uma diminuição na

recursos e necessidades de layout e de estrutura de conteúdo.

produção de sites feitos de “maneira artesanal, página a pá-

Segurança é um fator que cresce muito com o porte da em-

gina, com alimentação feita por FTP e necessidade de alterar

presa. Muitas ferramentas bem conhecidas foram tachadas de

dezenas de arquivos HTML a cada atualização de design”.

inseguras e prejudicadas com isso”, explica Guilherme Capilé,

Quando analisamos os sistemas disponíveis no mercado,

diretor de operações da Tecnodesign (www.tcdesign.com.br).

sejam eles comerciais ou de código-fonte aberto, a quantidade

“É importante avaliar a facilidade de uso, principalmente para

de novos sites ou que foram remodelados a partir da inclusão

os produtores de conteúdo (que manterão o site) e também

de um gerenciador e a opinião de especialistas neste mercado,

para os outros profissionais envolvidos (arte e tecnologia). Não

o tiro de Bahiana parece ter sido certeiro.

“A era dos sites sem gerenciadores de conteúdo, de al-

adianta escolher um CMS que não se encaixe no perfil de sua equipe”, argumenta Érico.

gum tipo, chegou ao fim. Cada vez menos veremos sites feitos

Perfil do site influi na escolha?

‘apenas’ em HTML, sem um sistema de retaguarda. Desde blo-

Definitivamente, a resposta parece ser sim. Ainda mais quan-

gs até grandes sites de notícias, passando por sites institucio-

do pensamos nas novas tecnologias que apontam para a tendên-

nais de todos os tamanhos. Pode-se comparar esta transição

cia do desenvolvimento de sites cada vez mais dinâmicos.

ao começo da era industrial. Sites são produtos que saem do

“Quanto mais dinamismo se quer em um website, maior

processo artesanal e se tornam cada vez mais industriais, sem

é a necessidade de se automatizar a forma que as informações

perda de qualidade, é claro”, afirma Érico Andrei, diretor de

devem estar disponíveis. Estes são os principais candidatos a

Tecnologia e Parcerias da Simples Consultoria (www.simples-

gerenciadores de conteúdo. Se um website não vai ter nenhu-

consultoria.com.br).

ma alteração durante meses, o investimento pode não valer

O que avaliar na hora da escolha

a pena. Além disso, muitas vezes se imagina que um website

Assim, na hora de definir que tipo de gerenciador será

com um layout muito sofisticado não se encaixe no perfil para

utilizado em seu projeto web, alguns fatores devem ser ava-

gerenciadores de conteúdo. Isso vale se você estiver olhando

liados. “Acredito que os principais passam pela adequação às

para as ferramentas que são mal-projetadas e limitam a flexi-

necessidades do projeto e, se for o caso, a compatibilidade

bilidade do website”, diz Capilé.

com o sistema que já é utilizado (se é em PHP, ASP ou outra

Além desses perfis, a designer e ilustradora Carolina Vigna-

linguagem, por exemplo). Não é inteligente ter um CMS capaz

Marú (www.vignamaru.com.br) acrescenta nesta lista os sites

de gerenciar um portal se você vai publicar um blog, e vice-ver-

que vão apresentar massa crítica de conteúdo e aqueles em que

sa”, afirma Walmar Andrade, gerente de criação da SX Brasil

o cliente quer uma certa independência. “Quando o seu site é

Tecnologia na web :: 53

nível básico

muito grande, por mais que use a dupla dinâmica CSS e PHP,

bilidade e conhecimento para selecionar e preparar boas fotos

você pode ter muitas dores de cabeça na hora de fazer um gran-

antes de publicá-las, por exemplo”, ressalta Christian.

de redesign. Com um CMS, a coisa fica muito mais simples, o

Em termos da identidade visual, os especialistas consulta-

que significa também mais rapidez e, portanto, menos custo”.

dos nesta reportagem foram unânimes em afirmar que os ge-

Vantagens e desvantagens no uso de um gerenciador

renciadores de conteúdo não prejudicam a qualidade estética

Assim como toda tecnologia, é preciso estar consciente

de um site. “Os CMS são extremamente versáteis. É claro que

que os sistemas de gerenciamento de conteúdo vão apresen-

restrições existem, mas vamos encontrá-las em qualquer téc-

tar diversas facilidades ou determinar alguns obstáculos na

nica, linguagem e ambiente. É função do designer saber lidar

administração de projetos web.

com elas e contorná-las”, afirma Carolina. “Se o gerenciador

Sobre as vantagens, o fato de o conteúdo ficar dissociado

não tem uma flexibilidade para se adaptar ao design projetado,

da estrutura parece ser a principal delas. “Na fase de produ-

não deve ser escolhido. O CMS deve se adequar ao projeto, e

ção, essa separação facilita muito o andamento dos processos.

não o contrário”, finaliza Walmar.

Para os designers possibilita, por exemplo, criar templates que servirão de modelos para cada seção, acabando com o trabalho de produzir dezenas de páginas”, aponta Christian Laurito, diretor de criação da E4W Solutions (www.e4w.com.br).

Opções disponíveis no mercado “Para blogs, indicaria de olhos fechados o WordPress (www.wordpress. org), que tem uma flexibilidade tremenda e, por ser de código aberto,

Outra vantagem, segundo Christian, é que assim que a

possui centenas de plugins e está sendo sempre aprimorado. Foi feito

arquitetura de informação estiver definida dentro do geren-

para gerenciar blogs, mas pode sem problemas ser usado em sites.

ciador, os webwriters podem começar a incluir o conteúdo do site, antes mesmo de o design estar pronto. “Na fase de

Quem estiver a procura de gerenciadores para projetos menores, uma boa alternativa é visitar o OpenSourceCMS (www.opensourcecms.com), que permite testar gratuitamente, sem instalar nada, gerenciadores

manutenção, os benefícios são evidentes. Podemos citar, por

como Joomla, Mambo, Drupal e dezenas de outros.”

exemplo, a possibilidade de atualizações remotas no caso dos

(Walmar Andrade)

publicadores web. Sabemos também que, em alguns projetos, o mesmo texto pode aparecer em lugares diferentes do site.

“No momento, as sugestões passam pelo Plone (www.plone.org opção escolhida pelo governo federal e diversas organizações como IDG, Larousse, OAB-SP e Universidade Metodista), o WordPress e o

Nestes casos, se ele for alterado através da ferramenta, todas

MediaWiki (www.mediawiki.org).”

as matérias são atualizadas automaticamente, podendo inclu-

(Érico Andrei)

sive apresentar visuais diferentes”.

Mas, se por um lado a independência oferecida pelos ge-

“Sou fã do Mambo (www.mamboportal.com). É poderosíssimo e tem uma interface gostosa, fácil de usar e simples de aprender.”

(Carolina Vigna-Marú)

renciadores na hora de se administrar o conteúdo de um site

“O Pindorama (http://pindorama.sf.net), ferramenta de código-fonte

seja apontada como uma grande vantagem em seu uso, de ou-

aberto, foi projetado tendo em vista a flexibilidade total para o website

tro ele se torna um desafio para garantir o controle de qualidade do projeto. “O conteúdo, incluindo normas ortográficas, fica

(layout e conteúdo) e segurança (como gera arquivos estáticos no website, pode não oferecer risco algum ao cliente).”

(Guilherme Capilé)

por conta dos colaboradores. O mesmo vale para as imagens

“Vou citar três opções nas quais a E4W tem experiência: Publique

publicadas. Nestes casos, a estética do site passa a depender

(www.publique.com.br), Calandra (www.calandra.com.br) e Vignette

também do bom gosto dos profissionais que as publicam. E nós, designers, sabemos que são necessários um mínimo de sensi-

(www.vignette.com).”

(Christian Laurito)

54 :: tutorial

Escrevendo HTML, fi finalmente nalmente - Parte 4 Elcio Ferreira Desenvolvedor e instrutor na Visie Padrões Web http://visie.com.br/

Este mês, finalmente, vamos escrever nosso primeiro arquivo HTML. Você verá que a tarefa é muito fácil. E nos prepara para o aprofundamento no mês que vem, quando vamos inserir informação extra em nosso documento através dos microformatos.

o título da página, na janela do navegador, nos favoritos e nos buscadores. Portanto, escolha bem esse título.

- meta content-type: depois do último artigo, acho desnecessário falar sobre a tag meta content-type, não? Bom, para

A estrutura básica do HTML

quem perdeu o último artigo: é onde inserimos informações a

Para começar, criamos nosso documento, e inserimos nele

respeito do tipo de documento e, o que é mais importante para

a estrutura básica de um arquivo HTML para o site da empresa

quem escreve HTML, qual a página de código usada.

fictícia “Móveis Florentina”. Vamos fazer a página sobre a em-

- body: por fim, é na tag body que vamos inserir o conteú-

presa. Vai ficar assim: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd”> <html> <head> <title>Móveis Florentina - Sobre a empresa</title> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8” /> </head> <body> </body>

do, o corpo da página. O que estiver aqui será o que realmente

</html> Pode parecer complicado, mas não é. Vamos dissecar parte por parte:

vai aparecer quando o usuário carregar a página.

O conteúdo - títulos: vamos começar inserindo na tag body o título desta página, fazemos isso usando a tag H1, a tag para os títulos principais: <h1>Móveis Florentina</h1> Em seguida, o título de segundo nível: <h2>Sobre a Empresa</h2>

Seguido de dois títulos de terceiro nível: <h3>Localização</h3> <h3>Contato</h3> Estão disponíveis para nosso uso as tags até o sexto nível de títulos (h6), embora, para a maioria dos casos, três ou quatro níveis sejam mais do que suficientes.

- Doctype: A primeira linha desse trecho de código é o Doc-

- divisões: os próprios títulos em nossa página nos dão uma

type de seu arquivo HTML. Você não pode publicar um HTML sem

boa idéia da divisão dos conteúdos desta página em seções. Em

Doctype, porque é ele quem diz de que tipo é seu documento e

cada uma dessas seções, ou divisões da página, vamos marcar

com que versão do HTML você está trabalhando. Em nosso caso,

com uma tag div: <div id=”cabecalho”> <h1>Móveis Florentina</h1> </div> <div id=”principal”> <h2>Sobre a Empresa</h2> <h3>Localização</h3> </div> <div id=”contato”> <h3>Contato</h3>

escolhemos trabalhar com o Doctype XHTML 1.0 Strict.

- HTML: logo em seguida vem a tag html. Ela é o elemento raiz de nosso documento, e deve sempre conter todas as outras tags, exceto o Doctype.

- head: a primeira tag dentro de html é a head. Ela delimita o cabeçalho da página, onde estarão as informações sobre a página que não vão aparecer no próprio corpo página. Coisas como a folha de estilo com que a página será exibida, os scripts que serão executados e o arquivo RSS que contém as notícias

</div>

desta página. Chamamos de meta-informação a informação a

- texto: há diversas tags para a marcação de texto, algumas

respeito de determinada página que não é parte do conteúdo.

de uso mais genérico, outras mais específicas. Há, por exemplo,

- title: vamos começar a inserir meta-informações em nossa

tags específicas para citações. Mas, na maior parte do tempo,

página pela tag mais importante do head, a tag title. Ela define

vamos usar as tags comuns de parágrafo, as tags p:

tutorial :: 55

<div id=”cabecalho”> <h1>Móveis Florentina</h1> </div> <div id=”principal”> <h2>Sobre a Empresa</h2> <p>A Florentina é uma empresa de móveis diferente. Com quarenta anos trabalhando com móveis, temos uma linha de primeira qualidade, com avaliação técnica de qualidade a cada passo do processo de produção. Desenvolvemos móveis sob encomenda e sob medida para a sua casa ou escritório.</p> <h3>Localização</h3> <p>Com dezoito filiais na grande São Paulo, há sempre uma Florentina perto de você. Se desejar, consulte nossa lista de lojas.</p> </div> <div id=”contato”> <h3>Contato</h3> <p>Entre em contato conosco pelo e-mail flo@florentina.com</p>

</div>

- formulário: por fim, vamos inserir um formulário de contato ao final de nossa página.O código fica assim: <form method=”post” action=”envia.php”> <label for=”nome”>Nome: <input name=”nome”></label> <label for=”email”>e-mail: <input name=”email”></label> <label for=”assunto”>Assunto: <input name=”assunto”></label> <label for=”msg”>Mensagem:</label> <textarea name=”msg”></textarea><br /> <input type=”submit” value=”Enviar” /> </form>

Com isso, temos um formulário com os campos nome, e-mail, assunto e mensagem, que submete para a página envia.php. Precisamos aqui dedicar alguma atenção ao funcionamento das tags label. Sua função é oferecer, nas descrições dos campos de formulário, uma área de clique.

</div>

Ou seja, clicar na descrição é o mesmo que clicar no cam-

- lista: vamos agora, logo depois do título principal da

po. No caso de campos texto ou select, por exemplo, clicar

página, inserir uma lista dos links disponíveis para outras

na descrição coloca o foco no campo. No caso de radio-

páginas nesse mesmo site. Vamos fazer um menu. Menus,

buttons ou checkboxes, o clique na descrição equivale ao

na verdade, são listas de links, apenas. Construiremos nos-

clique no campo, aumentando a área de clique e evitando

so menu, a princípio, assim:

que seu usuário tenha que “fazer a mira”.

< div id=”cabecalho”>

Temos agora nosso conteúdo todo descrito em HTML.

<h1>Móveis Florentina</h1>

Até aqui, nossa página não está atraente. Por outro lado,

<ul>

você vai perceber que ela funciona em dispositivos móveis

<li>Home</li> <li>Produtos</li> <li>Serviços</li>

e mesmo em navegadores de texto. No próximo mês, vamos relacionar este arquivo com arquivos externos, inserin-

<li>Trabalhe conosco</li>

do figuras, links para outras páginas, uma referência a um

<li>Sobre</li>

arquivo RSS, um favicon, javascritpt e CSS. Vamos também

</ul>

inserir informações em um microformato, o hCard.

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

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

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

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) 6142.5653 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

Hospedagem de Sites, Registro de Domínios, Marketing Digital, Desenvolvimento de Sites. 30% de desconto no plano de Hospedagem. Basta digitar, durante a compra, no campo cupom, a palavra: “promowebdesign”. www.ebrasil.net tel: 0800 70 404 70 com@ebrasil.net

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

A Fractoweb oferece soluções completas para hospedagem de sites, telefonia, transmissão de dados e data center, utilizando a mais moderna e robusta tecnologia para suas aplicações. www.fractoweb.com.br / fracto@fracto.com.br São Paulo: (11) 3835.6990 - (11) 3523.1580 Rio de Janeiro: (21) 3723.1580 Porto Alegre: (51) 3123.1580

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

Registro rápido de domínios nacionais e internacionais; Hospedagem segura para WebSites; Painel de Controle fácil de usar; Antivírus e Anti-Spam para e-mails. www.provedorweb.com.br tel: (31) 3463-2828 provedorweb@povedorweb.com.br

studioserver 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

Internet Solution

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

ZARP HOST

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

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

- criação e desenvolvimento de sites - hospedagem em php - asp - html - registro de dominios com, net e .com.br - desenvolvimento de logomarcas e midia gráfica tel: (21) 2480-8607 - (21) 9851-0500

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

58 :: usabilidade

Marcos Nähr Guilhermo Reis Especialista Trabalha há três em Arquitetura anos na Dellde Computadores, Informação e Usabilidade. onde é responsável É autorpelo do Kit website de Conhecimento da empresa.sobre Atua como AI (http://tinyurl.com/p4j6w). designer de interfaces desde Atualmente, 1998, tendoé realizado responsável trabalhos por coordenar em empresas projetos como e manutenções Espacio Digital nos(hoje websitesInternet), Agência do Banco Godigital Real. e RBS, além de participar do desenvolvimento de portais de companhias reis@guilhermo.com como GVT, Telefônica, Telemig Celular e Amazônia Celular.

Estética ou usabilidade?

Mesmo que a importância da usabilidade seja reconhecida já há algum tempo, é equivocado assumir ou sugerir que o seu papel seja o principal (ou o único) na definição da interação com o usuário. Em um artigo sobre o assunto, Didier P. Hilhorst (fundador da User Interface Designer) atesta exatamente o contrário: o aspecto visual vem em primeiro lugar e a usabilidade em segundo!

Em primeiro lugar, vamos considerar o reino da percepção humana. A qualidade estética percebida foi estudada em grande parte no campo da psicologia. Por exemplo, atrativos físicos infl uenciam suposições sobre outros traços da personalidade. Olhos azuis e um belo sorriso podem levar as pessoas a assumirem que você seja uma pessoa confiável. Ter um rosto bonito é uma vantagem. As pessoas tendem a fazer juízo do que está ao seu redor baseadas em aspectos efêmeros. Isto pode soar como um clichê, mas você nunca tem uma segunda chance de ter uma boa primeira impressão. Atratividade e outros aspectos de apelo estético são traços físicos que evocam uma resposta emotiva. Isto tem um papel fundamental na experiência do usuário.

Qualidade estética Apesar de centrada no pensamento e prática humano, a qualidade estética teve, em grande parte, um papel inconseqüente na interface para usuários e no design de websites. Existem diferentes razões que explicam porque a estética não recebeu a atenção que merece no campo da alta tecnologia.

Primeiramente, a qualidade estética é predominantemente subjetiva. É difícil medir o quanto estes aspectos atrativos são percebidos pelo usuário e por isto surgem diferentes interpretações. No entanto, a subjetividade não é, em hipótese alguma, uma razão para que o aspecto estético seja alienado do processo de design, muito pelo contrário, já que os usuários orientam suas ações baseadas justamente em critérios não ortodoxos.

Durante uma recente discussão sobre design, Andrei Herasimchuk, em seu blog Design by Fire (www.designbyfire.com), lembrou de um ponto chave que é ignorado por muitos. Ele tem a ver com quão relativa é a estética e sua percepção de valor ou qualidade.

Exemplificando, Yahoo, Google e eBay podem se dar ao luxo de usar uma estética bastante pobre pelo fato de não termos muito o que escolher, em termos de funcionalidade, em relação à concorrência. Agora pegue a indústria automobilística, por exemplo: todas as empresas fabricam carros com basicamente a mesma qualidade. Por isto, marcas como Ford, BMW e Volkswagen se diferenciam entre si pela experiência que elas vendem, tipificada pelo seu design. A indústria automobilística é uma indústria madura, a web - ainda - não é.

Por último, o debate já antigo entre forma e função. Um grande número de especialistas em usabilidade prega as virtudes do design funcional. A função, ou facilidade ao usar, é crítica para qualquer interface, sem dúvida. Mas a forma não necessariamente segue a função, no má-

usabilidade :: 59

“É preciso criarlugar, as casas, os prédios, as praças e principalmente as placas “Em primeiro vamos considerar o reino da percepção humana.” de sinalização.”

ximo influencia a função. Eu acredito firmemente que um bom design é, de fato, usável. Se problemas relacionados à interação ocorrerem, algo não foi pensado no design como um todo.

Experiência do usuário Eu vejo o design, e não a usabilidade, como o carro chefe para moldar a experiência do usuário. A estética afeta a percepção de facilidade de uso, profundidade do uso e o prazer no uso. Existem muitos especialistas do ramo que alegam que o uso mínimo de imagens, textos com fontes grandes e alto contraste são aspectos chave. Tais recomendações incluem o mínimo ou nenhum uso de imagens para melhorar o tempo de download, textos com fontes grandes e alto contraste para facilitar a leitura.

Mesmo sendo verdade que os aspectos acima mencionados melhoram a usabilidade, uma questão permanece: seguir tais recomendações é a chave para um website usável e de sucesso? Para muitos experts o papel da qualidade estética é secundário em relação à função, ou como outros ainda sugerem: a atratividade não é um fator de importância na experiência do usuário. Eu acredito que estas afirmativas não condizem com a realidade.

Usabilidade é um fator que dá forma ao uso atual, mas as impressões de um usuário sobre um website (sobre utilidade, facilidade de uso e prazer no uso) são formadas pelo visual do site, pela sua estética. Em essência, a atratividade molda diretamente a percepção da facilidade de uso. Especialistas em usabilidade têm um papel indiscutível quanto a tornar a web um espaço mais amigável, mas desdenhar a idéia de que o design vem em primeiro lugar na experiência do usuário é um equívoco.

Além disso, um fator de importância periférica, que os peritos em usabilidade freqüentemente negligenciam, é a marca e a identidade corporativa. A marca não só afeta a atratividade (ou vice-versa), mas também forma a percepção do consumidor. Design é um processo ou prática de formar e comunicar de maneira efetiva uma marca. As escolhas que se fazem na seleção de cores, estilos e formas irão afetar a qualidade estética. Na prática, a maioria das agências de propagandas não são boas para desenvolver websites, mas elas entendem a necessidade da atratividade e da força da marca.

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

Os intocáveis Eu estava prestes a começar este artigo dizendo “você que gosta de idiomas...”, mas me toquei a tempo que pouca gente tem apreço por línguas. Deletei tudo, e recomecei com “você que lida muito com estrangeiros...”. Deleta, deleta, deleta. De volta ao cursor piscando no início de uma página branca. É raro eu travar. Normalmente eu saio escrevendo/palestrando/gravando sem o menor embaraço, e as idéias vão se concatenando naturalmente, haja vista/ouvido o improviso do podcast Roda e Avisa (http://www.usina.com/rodaeavisa).

Um tema, porém, quebra essa regra. Se eu não esvaziasse a lixeirinha do meu desktop, ela pareceria hoje um cesto de papéis de escritor empacado, coberta por folhas amassadas atiradas com fúria. Que tema é esse? Simples: o que não se diz. Ponto. Complicadíssimo, o tema.

Falemos de fotografia, então, pra facilitar. Todo mundo tem câmera, e todo mundo gosta de uma boa foto, não? Pois bem, comecemos por aí. Câmeras retratam a realidade, certo? Câmeras não mentem. Olhemos então aquele teu álbum de viagem. Monumentos, belas paisagens, momentos dignos de uma foto, pessoas posando. Álbum é sempre assim. Agora reveja as fotos e me diga: o que não aparece?

Enquanto você digere a pergunta, eu dou uma pista: câmeras têm lentes, e com lentes você enquadra. Quando você enquadra algo, seleciona o que vai aparecer... E o que não vai aparecer.

A menos que você ande fazendo fotos em 360 pelo mundo... O que aparece é uma fração bem pequenina comparado com o mundão que não aparece.

Você fotografou o mendigo? O prédio feio? As pessoas infelizes? O céu chuvoso? A sua mala bagunçada? Provavelmente não. Isso não é coisa que se mostra normalmente, e a gente nem registra na memória.

(Paulistanos como eu são PHD nisso: conseguem não-ver o caos e enxergar só o que é bacana na cidade, vide http://www.flickr.com/photos/renedepaula) Deve fazer parte da nossa natureza “maquiar” a realidade e deixar de lado coisas que “não ornam”. Isso é sinal de urbanidade e educação, inclusive, e cada cultura ou língua (lá venho eu com idiomas e gringos de novo) lidam de maneiras diferentes com isso. Em alguns países é inadmissível se falar da vida íntima, em outros ninguém tem pudor em dizer que teu cabelo está horrível.

Varia muito, mas uma coisa é certa: algumas coisas nunca são ditas. Outra coisa é certa: isso tem um preço, um preço que pagamos a prazo porque não enfrentamos as coisas à vista. Nosso ofício interativo não escapa dessa sina, e a prova é: estamos sempre tropeçando da mesma maneira, vamos sempre ter os mesmos problemas. E, se tudo no mundo tem uma causa, problemas repetidos só podem ser... Efeito de causas crônicas.

E como algo que causa problemas pode ser crônico? Simples: porque não se fala dela.

Não pega bem. Não é “legal”. Nesse assunto ninguém toca. Tem gente que (sobre)vive disso: você já deve ter visto um “intocável”, uma daquelas figuras que orbitam em torno desse área fortificada. Sempre tem: por vezes os criativos são intocáveis, por vezes os engenheiros, por vezes os “chegados” do chefe.

marketing :: 61

"Que tema é esse? Simples: o que não se diz. Ponto.

Complicadíssimo, o tema."

Nem tudo que é intocável, porém, tem que ser eterno. Muitas vezes os nossos monstros sagrados são tigres de papel, basta um assoprão e eles somem da nossa vida. E é pensando nisso, nesse exorcismo dos nossos fantasmas crônicos, é que eu sugiro um remédio importado: o post-mortem, um apelido dado a uma avaliação do que foi bom ou ruim durante um projeto. Acabou o projeto? Post-mortem nele!

Quer tentar fazer? Acabo de fazer um bem simples: cada um dos envolvidos listou ao menos três coisas que foram ótimas, três que foram boas e três que foram ruins. Um coordenador vai juntar tudo isso, consolidar e compartilhar com todos. De um post-mortem simples assim pode nascer um plano para que os erros não mais se repitam e também para que inovações positivas sejam incorporadas ao processo.

Simples. Transparente. Mas levemente arriscado, também: um brasileiro pode se magoar porque o estrangeiro não teve papas na língua, ou um outro latino pode ter sido mais passional do que devia, ou... Ok, lá venho eu de novo com línguas e culturas :) Que mania. Aponte minhas manias, por favor, não tem problema. Aponte-as ou...

Vou repetir a dose nas próximas edições :)

Arraial Magê-Malien

Toca do coelho

Capoeirista passarinho

Magê-Malien - Crianças que Brilham Faça parte você também deste projeto.

Para doação de alimento, computadores e voluntariado, entre em contato: arteccom@arteccom.com.br Informações: www.arteccom.com.br/ong

barraca da Pescaria

Brincadeira da farinha

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

Como cumprir prazos num frio de rachar Quando o frio chega, minha criatividade vai esquiar em Bariloche. Não tem nada mais desagradável e desesperador pra mim do que teclar com as mãos geladas, a chuva caindo lá fora e uma cama quentinha e aconchegante a poucos passos da sala fria.

Criar e ser genial num frio de rachar, mas isso dá? Quando a criatividade se congela e dá uma banana pro criativo, o que fazer? Assunto difícil para qualquer profissional, mas a porca torce ainda mais o rabo quando esse profissional, além de criativo, é um freela. Que fria.

Perdi as contas das noites de inverno cheias de textos começados, de idéias dispersas fazendo par com os copos vazios de chá espalhados pela mesa, sem contar com aquele edredom jogado na cama, clamando por minha presença.

A temperatura cai quando nada parece suficientemente bom para ser apresentado e com os ponteiros rodando, tem hora que a falta de inspiração parece não chegar ao fim. “Vou ligar lá e dizer que alguém morreu. Eu, por exemplo”. – penso lá pelas duas da manhã. Claro que sempre existe uma saída, o difícil é encontrá-la no desespero da noite. “Vou dormir”. – e vou.

A ressaca da noite fria sem inspiração é terrível. Um misto de incerteza, pés frios e esperança.

Retomar o job é preciso, recebê-lo então...

A ansiedade de fazer um bom trabalho é um complicador imenso quando a paz para que ela exista depende exclusivamente da sua inspiração e pés quentinhos. “De manhã é sempre assim, mas não tem erro a tarde eu consigo” – penso perto da hora do almoço.

A tarde chega com a noite na seqüência, e assim segue o correr das vinte e quatro horas.

Alguns cinqüenta e tantos docs. abertos depois, chega também o desespero. Aquele mesmo da noite gelada e passada, mas agora um pouco pior, porque, além de mais frio, restam apenas algumas horas para a idéia chegar numa reunião com o cara que vai me amar (e me chamar sempre) ou me odiar para a eternidade (e não me chamar nunca mais). “Um banho. Um banho quentinho na madrugada e voltarei cheia de idéias geniais” – penso me ensaboando.

Pronto, agora a coisa tá jóia. Tenho exatamente cinco horas para enviar meu trabalho para o cliente no meio desse frio de lascar e não tenho nenhuma idéia do que vou apresentar, criar ou fazer. É o meu fim.

O trabalho em questão não era o que podemos chamar de divertido, nem o segmento a que ele se destinava, mas era um trabalho e era um cliente. “Eu não sei fazer isso caceta”.

Será que uma redatora freela pode escolher trabalho? A difícil resposta é um o que? E foi nesse dia que quase fiquei ainda mais pobre - quando pirei no meio de uma noite fria sobre “será que eu não sei fazer trabalhos assim?”.

Apelei então para uma amiga escritora e poeta e desabafei. Ela só me disse: “Pense numa árvore” – e desligou. Na hora, aquilo me pareceu um desatino, mas os poetas são desatinados.

Pensei na tal árvore e comecei então a escrever sobre a dita cuja, com a minha autocensura no último volume, sim porque sou péssima com linguagens poéticas e morro de vergonha de mim quando me meto a fazer isso.

Escrevi, escrevi, escrevi e daí liguei pra ela, pedi pra ela entrar no e-mail dela e ler minha

bula da Catunda :: 63

"Quando a criatividade se congela e dá uma banana pro criativo, o que fazer? "

árvore. Ela leu e disse: - “Perfeito! Agora substitua algumas árvores pelo nome do seu cliente e monte o roteiro”.

- Ã? – exclamei! Comecei a montar aquele quebra-cabeça e de repente as peças começaram a se encaixar. E foi ficando bonito. Ai que medo! Foi ficando lindo. Ai que piegas! Mas tava bonito. Ai! Emocionei!

Aquele monstruoso roteiro, que antes me amedrontava, foi ficando tão legal. Era uma árvore dando frutos bem ali na minha frente e o frio foi indo embora, os dedos teclaram frenéticos e entreguei com apenas uma hora de atraso o que acredito ser hoje, um dos melhores roteiros de institucional que criei.

E foi numa noite fria que aprendi duas lições. A primeira é que metáforas são salvadoras, principalmente quando estamos escravos de idéias geniais. Descobri nesse dia que ser genial era justamente o que aquele trabalho não precisava, ele precisava sim era de simplicidade.

A segunda lição foi aprender que não é preciso dizer não para trabalhos que não tenham exatamente a nossa cara, porque a criatividade tem várias faces e nem sempre uma cambalhota seguida de um duplo twist carpado é exatamente genial.

Ah! Claro que tem mais uma lição, mas essa a vida já tinha me ensinado. Aquela que diz assim, que quem tem amigos nunca está sozinho (nem sente frio).

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

Restart Será preciso esperar que as coisas “travem” para se recomeçar?

Todos os “consultores de carreira” – sejam eles “head-hunters”, “coaches” ou qualquer outro anglicismo que esteja na moda para os gurus da auto-ajuda profissional – adoram dizer por aí que estar por baixo é o primeiro passo no caminho para se estar por cima. Em seu discurso lotado de chavões, sempre há espaço para citar que, em Chinês, um mesmo caractere significa “crise” e também “oportunidade”. Pensando bem, dane-se. Não estamos na China, e tanto Pescoço em Francês como Vaca em alemão não são exatamente palavras bonitas em nossa língua. O uso de exemplos estrangeiros, estejam eles no design ou em qualquer outra área profissional, não é sempre adequado. O mesmo se aplica a qualquer idéia.

Mas voltemos ao tema da carreira – ou, em termos mais precisos, do que você faz hoje, como se apresenta, como chegou até aí e, acima de tudo, se está completamente satisfeito na posição em que se encontra agora. Se a resposta a esta última pergunta for um sonoro SIM, meus parabéns. Você sabe se manter por aí em um país que considera velho qualquer profissional de mais de 40 anos? Pois é, você que já foi um dia parte da “molecada esperta” da tal nova mídia, sabe como não é tão difícil se chegar ao mainstream e, assim que estiver confortável, ser ameaçado?

Mas qual é a do Radfahrer? Deu para ser terrorista de uma hora para a outra? Longe disso. Aliás, muito pelo contrário. Em uma profissão muito recente, que não existe nada parecido com uma “carreira” nem gente com quatro décadas de casa para contar histórias de caminhos das pedras, de vez em quando é importante parar para pensar onde se está e, acima de tudo, se dessa forma se conseguirá chegar a algum lugar daqui a alguns anos.

Eu já tinha visto um trailer desse filme antes. Ele se chamava “editoração eletrônica” e tinha vindo para revolucionar as agências de propaganda e os estúdios de design. O tempo passou e muitos dos designers que trabalhavam com prancheta em 1986 hoje usam tábuas gráficas megacibertecnológicas conectadas a seus Macs. Muitos dos “geninhos” que montaram seus estúdios apoiados única e exclusivamente na tecnologia emergente não sobraram para contar história. Algo parecido aconteceu com as gráficas, com as editoras, com produtoras de vídeo (que eu saiba, a Globo continua a existir) etc etc etc.

“Mas web é diferente” – pensaria você. E não há como negar, você está certo. Em parte. Se por um lado a internet é efetivamente nova, tanto no papel de intermediária quanto como produto final, por outro algumas coisas continuam iguais, entre elas a sua conta de luz, água e supermercado no final do mês. E o que dá para viver aos vinte e poucos, morando com os pais, talvez não seja o suficiente vinte anos mais tarde, com você no papel de arrimo de família (e filhos na escola).

Por mais confortável que seja a vida, sempre chega o dia em que acordamos com a

webdesign :: 65

"Pensar diferente é mais ou menos como usar a marcha a ré do carro: não leva a lugar algum, mas ajuda a manobrar e a sair de enrascadas, quando necessário."

pergunta: “mas como foi que eu vim parar aqui?” – nesta empresa, nesta profissão, nesta cidade enfim. Ela costuma ser acompanhada de uma série de arrependimentos causados por escolhas erradas e um monte de tristezas que não costumam a levar a lugar algum. Poucos são aqueles que, uma vez constatada a sensação de beco sem saída, se preocupam em procurar outras soluções. Menos ainda são os que consideram a viabilidade de, mesmo estando “tarde” para outra carreira, outra escola, outra área de expertise, mudar para algo mais abrangente e gratificante. Pensar diferente é mais ou menos como usar a marcha a ré do carro: não leva a lugar algum, mas ajuda a manobrar e a sair de enrascadas, quando necessário.

Por isso o título deste artigo. Da mesma forma que computadores antiquados, muita gente toca a vida em velocidade lenta, enfrentando um “bug” atrás do outro e insistindo em erros anteriores até a hora em que trava tudo e é obrigado a reiniciar. Outros ainda cometem operações ilegais e são fechados. Azar deles. Será preciso chegar a tanto? Será que uma teimosia juvenil justificaria uma frustração para o resto da vida? Na USP eu canso de ver uns comunistas ainda achando glórias no governo de Fidel. Me questiono se as conquistas são reais ou se são a única esperança de velhos que se agarraram tão fanaticamente aos seus ideais ancestrais que deixaram de ver as mudanças do mundo. Como machistas, racistas ou homofóbicos, são patéticos.

Não é por culpa ou teimosia que a maioria de nós prefere reclamar do que tem a procurar opções, mas simplesmente por hábito ou por não conseguir ver as coisas de outro jeito. O budismo prega há milênios que a felicidade está em se contentar com o que se tem, em vez de se preocupar com o que nos falta. Por um lado, isso pode ser fundamental na hora de mudar de vida. Por outro, pode ser a mesma velha história do copo metade-cheio ou metade-vazio que, em um raciocínio circular, faz com que este texto volte ao ponto que partiu, não chegando a lugar nenhum. Será?