Ed43

julho 2007 :: ano 4 :: nº 43 :: www.revistawebdesign.com.br

Dicas sobre organização do tempo, estruturação de ambiente e remuneração Pregnância: como trabalhar a organização visual de um site Luli: Ouro de Tolo, de Raul Seixas, em versão 2.0 Logotipo: características de sua aplicação na web Criação: com ou sem rótulo?

E D I T O R A

R$ 9,90 I SSN 1806 - 0099

9 771806 009009

00043

4 :: quem somos

Editorial De Parati

Equipe Direção Geral Adriana Melo

artesanato de Parati. Não sei se essa popularização do termo “webdesigner” é boa ou ruim, mas... Finalmente existimos! Falo isso porque uma vez meu irmão e eu encontramos uma ex-professora e ela perguntou o que estávamos fazendo, estudando... Ele disse “engenharia” e ela toda orgulhosa, falou: “Hummm, que bacana!”. Quando eu falei que estava estudando design, recebi um “o quê??”. E depois da minha explicação, um “Ah... Legal...”. Ou seja, há uns 15 anos a profissão não era popular. A internet acabou sendo o meio para divulgar essa área de atuação do designer. Por outro lado, as pessoas ainda não sabem porque precisamos estudar 4 ou 5 anos para nos tornarmos designers. E depois ainda tem a especialização...

Agora é a hora de colhermos esses frutos. Ao mesmo tempo em que o termo “webdesigner” já ganhou seu espaço na mídia, temos que saber como valorizar a profissão, estudar bastante e constantemente para aprendermos a criar diferenciais nos projetos que valorizem o nosso trabalho, que justifiquem nossos estudos e pesquisas. Qualquer dia ainda falaremos com orgulho: “Sou designer de interfaces”, e não teremos mais inveja de engenheiros,

Direção Executiva Sergio Melo Direção de Redação Luis Rocha Criação, Diagramação e Ilustração Camila Oliveira Leandro Camacho Publicidade Débora Carvalho Atendimento Luanna Chacon

Atendimento aos assinantes atendimento@arteccom.com.br Redação redacao@arteccom.com.br Anuncie publicidade@arteccom.com.br

médicos e advogados... ;-) Nesta edição, tentamos contribuir para que o trabalho de freelancers também seja bem realizado e devidamente valorizado. Esta é uma modalidade que ocupa um grande espaço nesse mercado e muitas vezes serve como porta de entrada para profissionais que depois decidem se aprofundar e se formar como designers. Espero que gostem da matéria!

Bem, estou retornando hoje de licença-maternidade e é um imenso prazer retomar esse contato com vocês. Com saudades,

Revista Webdesign www.revistawebdesign.com.br Curso Web para Designers www.arteccom.com.br/curso Encontro de Web Design www.arteccom.com.br/encontro Fórum Internacional de Design e Tecnologia Digital www.arteccom.com.br/find Concurso Peixe Grande www.arteccom.com.br/peixegrande

Adriana Melo

Criação e edição

adriana@arteccom.com.br

www.arteccom.com.br

Produção gráfica www.ediouro.com.br P.S.: E nessa edição temos mais fotografias especiais! As imagens dos ambientes que ilustram a reportagem de capa (páginas 30 a 36) foram enviadas gentilmente pelos profissionais freelancers Dado Queiroz, Glauco Diogenes, Mariana Julião, Thorii Pablo e Vinicius Augusto. Obrigada pela colaboração!

Distribuição www.chinaglia.com.br

9

E QUE PENSEI PENSEIQUE QUETRABALHANDO TRABALHANDO CASA, TERIA PARA MIM. E EU QUE EM EM CASA, VOCÊVOCÊ TERIA MAISMAIS TEMPOTEMPO PARA MIM.

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

Fiquei apaixonada quando vi essa casinha (foto da capa) numa lojinha de

menu :: 5

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

matéria de capa pág. 22 entrevista: Logotipos pág. 30 reportagem: Freelancer

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

e-mais pág. 38 debate: Com ou sem rótulo? pág. 44 e-mais: Pregnância visual

fique por den tro

pág. 51 estudo de caso: Pocket films

pág. 8 métricas e mercado

pág. 56 tecnologia na web: Wireframe

pág. 10 direito na web

pág. 60 tutorial: Actionscript - Parte 4

pág. 11 post-it com a palavra portfólio

pág. 64 internacional: Julius Wiedemann

pág. 12 agência: Casullo

pág. 66 webwriting: Bruno Rodrigues

pág. 18 freelancer: Renan Molin

pág. 68 marketing: René de Paula Jr.

pág. 20 ilustração: Felipe Guga

pág. 70 publicidade on-line: Ricardo Figueira pág. 72 webdesign: Luli Radfahrer

6 :: emails

Assunto: Agências no Brasil

alguma mudança no conceito do design quando se prefere usar

Assunto: Massagens em nosso ego!

frameworks? Um bom exemplo

Só gostaria de parabenizar a todos da revista. Desde 2005, sempre que posso leio. Além

Comecei a trabalhar com web

seria o Ruby on Rails, que vem

e preciso fazer uma pesquisa

crescendo muito. Basicamente, o

Já tinha ouvido no curso falar

A revista ajuda muito a minha

sobre as agências no Brasil e seus

uso de frameworks interfere na

sobre essa revista. Pois bem,

empresa com várias dicas sobre

clientes, para me atualizar um

hora da criação? Obrigado.

tomei vergonha na cara, fui até a

esse mundo que é o design.

pouco mais! Poderiam me indicar

Elyézer Mendes

banca de jornal e pedi a Revista

Obrigado, continuem sempre

algum site onde posso encontrar

elyezermr@gmail.com

Webdesign. Imediatamente, o

assim!

jornaleiro pegou a revista e me

Massato Takaki massatobsi@gmail.com

esses dados?

disso, vou ao EWD também!

Talita

Olá, Elyézer, ficamos felizes

falou: “muito boa essa revista”.

talitals@hotmail.com

em saber que a seção Emails

Eu realmente não esperava

vem fomentando um debate

aquele tipo de comentário do

Bruno, Ike, Massato e Michel,

saudável entre os nossos leitores.

jornaleiro. Então, perguntei,

ficamos extremamente lisonjeados

Agradecemos sua colaboração e o

“você já trabalhou com web

com os depoimentos! Talvez a

assunto “Ruby on Rails”, em relação

?”. Ele me respondeu que essa

explicação para todo o trabalho que

ao mercado de design, já entrou

revista também é voltada para os

realizamos ao longo desses quatro

em nossa pauta. Provavelmente,

afins na área de web (usuários),

anos esteja na própria comunidade

teremos novidades neste segundo

por essa colocação achei muito

que nos cerca, depositando sua

semestre, na seção Tecnologia

interessante, pois o profissional

confiança e procurando nos ajudar

na Web. Obrigado pela ajuda e

da área cria não para si, mas para

mensalmente, com o objetivo de

continue participando, ok?

os usuários finais.

melhorar a qualidade da revista.

Michel Lima

Tenham a certeza que nossa idéia

michelribeiro2004@gmail.com

é evoluir cada vez mais, contando

O site Janela possui uma lista extensa com as principais agências do país (www.janela.com.br/ agencias/web_br.html). Procure dar uma olhada por lá. Além disso, os sites das associações de agências digitais também podem ser boas fontes: APADi (www.apadi.com.br), AGADi (www.agadi.com.br) e AETI (www.aeti.com.br). Boa sorte em sua pesquisa!

Assunto: Distribuição nas bancas Assunto:

sempre com a ajuda de vocês!

Conheci a revista de vocês no ano

Troca de idéias Gosto muito da revista e sou

passado, através de um evento

Lendo a seção Emails, em especial

leitor há algum tempo. Mas não

da Locaweb. Sinceramente, ela

o de assunto “Entra GIMP, sai

sou assinante. E a revista chega

é maravilhosa! Superbom gosto.

Photoshop”, gostaria de citar um

em algumas bancas (de São

Estou vendo com meu sócio para

aspecto da mensagem de Fabio

Paulo), mas não é com freqüência.

fecharmos a assinatura dela.

Aires, em dizer que o Eclipse era

Mês chega, outro mês não. Por

Espero que cresçam cada vez

um substituto ao Dreamweaver.

que? Pelo fato da revista ser

mais e não percam o feeling que

O Eclipse é uma IDE para Java,

impressa no Rio?

vocês têm! Parabéns... Pro alto

Caio Foka

e avante!

caioffb@gmail.com

Bruno Borges

que pode ser estendido através de plug-ins (como, por exemplo, suporte ao PHP). Mas editor como o Dreamwaver, o que mais se identifica é o NVU (www.nvu. com), como podemos conferir no seguinte link: http://tinyurl. com/337duq. Espero ter colaborado e aproveito para parabenizá-los pelas matérias.

Não sei se é relevante, mas deixo uma sugestão: existe

bruno@fw2.com.br

Caio, entendemos seus questionamentos. Porém, devemos

Ainda não sou assinante,

DESCULPE A NOSSA FALHA!

esclarecer que, até a edição de

todavia sempre leio em agências

- Na edição de junho, no artigo

junho, o processo de impressão e

ou empresas de amigos.

de Ricardo Figueira, houve

distribuição da revista é feito todo

Fui ao Shopping Morumbi e

um erro na citação do ator

por São Paulo, através das empresas

praticamente li a revista inteira

que participou do filme “Alta

Prol Gráfica e Fernando Chinaglia,

em 1 hora e nem percebi.

Fidelidade”. Onde está Edward

respectivamente. Assim, vamos

Sinceramente, assinem, pois vale

Norton, favor considerar John

entrar em contato com a Chinaglia

muito a pena para todos!

Cusack.

para esclarecer melhor esta situação,

Ike

ok? Obrigado pelo aviso!

henrique@ike.com.br

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

8 :: métricas e mercado

Tempo de navegação residencial por internauta - Abril/07 País

Tempo médio por pessoa

Brasil

21h44min

EUA

18h49min

França

18h32min

Espanha

18h30min

Japão

17h39min

120% Segundo a Embratur, este foi o crescimento no número de visitantes, em apenas um mês, ao Portal Brasileiro de Turismo (www.braziltour.com), através de uma campanha de links patrocinados. Realizada entre maio e outubro de 2006, a campanha dobrou o número de acessos ao portal.

Fonte: Embratur (www.embratur.gov.br)

51,16%

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

Proporção de empresas no país que ainda não possuem

Navegadores mais utilizados - Junho/07 Navegador

website, segundo dados da pesquisa TIC Empresas 2006.

Fonte: NIC.br (www.nic.br)

%

Internet Explorer 6.0

49,52

Internet Explorer 7.0

16,96

Firefox 2.0

14,61

Firefox 1.5

9,00

mínios já foram registrados no país. O Brasil é um dos

Safari 2.0

1,86

seis países (além dos EUA, UK, Alemanha, Holanda e

Firefox 1.0

1,25

Outros

6,80

421 Número de empresas dedicadas à hospedagem de sites no Brasil. Atualmente, mais de um milhão de do-

Itália) que chegaram a tal marca.

Fonte: HostMapper Brasil (www.hostmapper.com.br)

Fonte: W3Counter (www.w3counter.com) / Dados baseados nas visitas de mais de 28 milhões de usuários únicos a 4.619 sites

Quais são as vantagens do trabalho freelancer?

Resolução de tela mais popular - Junho/07 Configuração

%

Configuração

%

Total de votos: 169 Autonomia - 64%

1024x768

50,64

1152x864

3,82

Custo baixo - 9%

1280x1024

16,91

1440x900

2,80

Remuneração - 27%

800x600

8,98

1680x1050

1,91

1280x800

8,31

Outros

6,63

acesse e participe! www.revistawebdesign.com.br

Fonte: W3Counter (www.w3counter.com) / Dados baseados nas visitas de mais de 28 milhões de usuários únicos a 4.619 sites

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 No Brasil, a coisa não é diferente. Segundo a pesquisa

Witricity O que tem demais

TIC Domicílios de julho/agosto 2006 (http://www.cetic.br/

esta foto ao lado? O

usuarios/tic/2006/rel-int-03.htm), o grupo que mais acessa a

fato de que a lâmpada

internet por nossas bandas é justamente o de 45 a 59 anos,

presa ao X da direita

onde 54,39% dos entrevistados afirma acessar a internet

está recebendo

diariamente.

eletricidade sem fio do X da esquerda.

A turma do meio é o grupo de pesquisadores do MIT que trabalha nesta invenção que vai mudar radicalmente tudo relacionado à energia a nossa

E nosso grupo de “surfistas prateados” (60+) traz expressivos 45,19% de usuários on-line diariamente.

volta. Além do fim dos cabos, vamos imaginar, por exemplo, celulares que não precisam bateria e carros elétricos que não

Cada tela com seu uso Com o avanço da

descarregam nunca.

tecnologia, cada vez

Saiba mais sobre Witricity direto do site do MIT:

mais os aparelhos

http://web.mit.edu/newsoffice/2007/wireless-0607.html

passam a poder executar as mesmas funções.

Internet não é coisa de jovem

Exemplo: ouvir música Ao contrário do que

no som, carro, celular,

se poderia imaginar,

computador, iPod ou TV.

internet não é coisa de

Embora todos estes aparelhos tenham a mesma capacidade, nós,

jovens. Na Inglaterra,

usuários, preferimos usar um ou outro em função da comodidade

segundo pesquisa

e do contexto.

divulgada

pela

E isso é exatamente o que mostra o estudo Ipsos

Hitwise Intelligence

Insight’s “MOTION” (http://www.emarketer.com/Article.

(http://weblogsfeed.

aspx?id=1004976), conduzido entre dezembro de 2006 e

hitwise.com/~r/hitwise/~3/117694732/54_increase_put_

janeiro 2007, acerca da preferência de aparelhos para consumo

silver_surfers.html), o grupo que fica mais tempo on-line é

de vídeo.

o daqueles entre 35-44 anos e a tendência de crescimento

Por mais que esta atividade possa se dar em diversos

aponta para que o grupo dos “silver-surfers” seja em breve

aparelhos atualmente, a TV continua sendo a de longe preferida.

aquele que passa mais tempo on-line. Não, não é sobre o

A novidade aqui é essa preferência não pela programação da TV e

novo filme do Quarteto Fantástico. “Silver-surfers” é como se

sim pelo aparelho e pelo conforto da experiência (um bom sofá?).

domina em inglês o grupo de usuários de internet acima dos

A pesquisa mostra um grande interesse por parte dos usuários em

55 anos (por causa dos cabelos grisalhos/prateados).

ver conteúdo da internet na telona.

10 :: direito na web

Freelancer: cuidados legais no desenvolvimento de um site “Quais são os cuidados legais que um freelancer deve tomar ao ser contratado para o desenvolvimento de um site?” Revista Webdesign (redacao@arteccom.com.br)

Gilberto Martins de Almeida Advogado formado na PUC/RJ, com Mestrado na USP e cursos

A condição de freelancer garante ao

deverá ficar na posse dele, desenvolvedor.

desenvolvedor de um site maior flexi-

Isto permite que ele possa consultá-lo a

bilidade jurídica, porém também mais

qualquer tempo,desenvolver novas ver-

riscos legais. Por um lado, ele evita a

sões, prestar serviços de garantia ou ma-

necessária subordinação técnica, hierár-

nutenção, consultoria etc. Cláusulas so-

quica e econômica a que estão sujeitos

bre metodologia de teste e aceitação são

os desenvolvedores que atuam sob um

cruciais para evitar custosas discussões

contrato de trabalho.

sobre se o que foi desenvolvido está ou

Por outro lado, o caráter de enco-

não de acordo com o encomendado.

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

menda a um fornecedor independente

Também é importante adotar cláu-

Gerente Jurídico da IBM, onde

transforma a prestação de serviços em um

sulas apropriadas de rescisão. O encer-

trabalhou por 11 anos, no Brasil

projeto que o une ao contratante do pon-

ramento prematuro do contrato, por de-

Almeida - Advogados, escritório

to de vista principalmente da natureza do

cisão unilateral do contratante, poderá

especializado.

serviço, sem maior pessoalidade. Como

deixar o freelancer em posição delicada,

Envie sua dúvida para:

tirar partido do que há de mais vantajoso

inclusive se ele tiver negociado uma con-

redacao@arteccom.com.br

e se precaver contra os riscos?

centração de pagamentos ao final do de-

e nos EUA. Sócio de Martins de

Em primeiro lugar, negociar uma boa

senvolvimento do site.

cláusula de propriedade intelectual, atri-

Quando, contratualmente, os direi-

buindo a propriedade ao freelancer, ou

tos sobre o desenvolvimento pertençam

ao menos certos direitos de comerciali-

ao freelancer, ele poderá registrá-los pe-

zação (como um distribuidor que adquiriu

rante as autoridades competentes (seja o

um território, ou que adquiriu um esto-

INPI, em relação ao código do programa;

que de licenças).

seja a Escola de Belas Artes, em relação

Em segundo lugar, tentar fazer com que a cláusula de propriedade intelec-

a aspectos gráficos; seja a Biblioteca Nacional etc.).

tual reverta em um posterior fluxo con-

Como se vê, a liberdade que marca a

tínuo de serviços de manutenção, ou

figura do freelancer tem como contraparti-

royalties. Para isso, será preciso reservar

da a responsabilidade de buscar proteção

formalmente o know-how de desenvol-

legal adequada, para que ele tenha como

vimento, dissociando-o do código-fonte

oportunidade não apenas um único arre-

do site desenvolvido.

messo livre, como o do basquete, mas sim

Falando em código-fonte, convém prever que o original ou uma cópia dele

toda uma série exitosa de lances.

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 Mapas com cenário real de navegação Esculturas hiperrealistas A dica vem de Luanna Chacon, atendimento da Revista Webdesign: a versão on-line do jornal Washington Post publicou uma série de fotos (http://tinyurl.com/fyrgy) de diversas exposições envolvendo os trabalhos do escultor australiano Ron Mueck. O impressionante destas fotos é o tamanho realismo no qual o artista consegue imprimir em suas obras. Destaque para a peça “Two Women”.

Blog do mês: Revolução Etc A indicação do mês

Como sempre, o Google anuncia um daqueles projetos de cair o

vem de Minas Gerais,

queixo! A novidade é o lançamento da ferramenta “Street View”,

mais precisamente de

disponível no Google Maps (http://maps.google.com), que permite

Uberlândia: estamos

ao usuário ver e navegar em 360 graus por ruas de várias cidades

falando do blog do

dos Estados Unidos. A dinâmica é simples: clicando no botão

designer de interfaces

“Street View”, é possível sair navegando no nível da rua, ter visões

Henrique Pereira (www.

panorâmicas, andar virtualmente pelas ruas da cidade escolhida,

revolucao.etc.br). No ar

verificar os restaurantes antes de chegar e também dar um zoom nos pontos de ônibus e sinalizações de rua para montar seus planos de viagem.

desde 2005, o espaço apresenta análises sempre interessantes sobre as últimas novidades envolvendo os conceitos e as linguagens utilizadas

Trabalhos com massinha

para a criação de sites. Conhece algum blog interessante

Quem é leitor assíduo da Webdesign deve ter percebido que,

voltado para o design para web? Então, mande sua dica para

na edição de fevereiro, seção Entrevista, utilizamos as técnicas

redacao@arteccom.com.br.

de criação com massinha para definir a linha gráfica do assunto “Publicidade on-line”. Falando neste assunto, quem quiser conhecer outros bons exemplos, a dica é acessar o site da ilustradora canadense Barbara Reid (www.barbarareid.ca).

Agenda de eventos 14/07 - 12º EWD - Belo Horizonte (www.arteccom.com.br/encontro) 15/07 - NDesign Floripa 2007 (www.ndesign.org.br/2007)

Tipografia made in Brasil - parte II

18/08 - 12º EWD - Brasília (www.arteccom.com.br/encontro)

Se na edição passada indicamos o “Tipografia artesanal urbana”

15/09 - 12º EWD - Curitiba (www.arteccom.com.br/encontro)

(www.viniguimaraes.com), nesta trazemos mais algumas boas

15/09 - Design na Brasa - São Paulo (www.designnabrasa.com.br)

referências envolvendo a produção tipográfica no Brasil.

Destaques para o lançamento da DT Ninfa (http://doodesign. com.br/dootype), de Eduilson Coan, o projeto Manguebats (www.

29/09 - Pixel Show - São Paulo (www.pixelshow.com.br) 19/10 - 1º Encontro Brasileiro de Arquitetura da Informação - São

fundicao.com/manguebats), e o recente retorno da antológica

Paulo (www.aibrasil.org/encontro/home)

revista Tupigrafia (www.tupigrafia.com.br).

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

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

12 :: portfólio agência - Casullo

Casullo: o resultado da mistura entre o tradicional e a modernidade

Com raízes em Recife, a Casullo (www.casullo.com.br) talvez seja a melhor expressão das transformações que a cidade vem sofrendo nos últimos tempos. Localizada no Porto Digital, pólo de tecnologia de referência nacional e internacional, sua existência é permeada por dois elementos que unem o tradicional com a modernidade: o clima no bairro do Recife Antigo, com suas igrejas barrocas, ruas seculares e uma cultura cheias de tradições, e casarões antigos restaurados para abrigar empresas que trabalham com tecnologia de ponta. “É uma mistura inédita e que só existe aqui: o novo e o antigo, passado e futuro. Não seria o passado sem retoques, mas uma visão de passado renovada, o antigo se transformando em novo.

A preservação de tradições e o pensamento voltado para o futuro.

Acredito que se pode enxergar um pouco desta ‘união’ de moder-

portfólio agência - Casullo :: 13

- Abril Pro Rock Tecnologias: Banco de dados + Flash + PHP www.abrilprorock.com.br

www.casullo.com.br nidade, com um ligeiro e sutil toque elegante do ‘tradicio-

O sucesso na realização de um projeto para o Porto

nal’ nas páginas desenvolvidas pela Casullo”, afirma Klaus

Digital, em parceria com a Astronave, empresa produtora

Hachenburg, diretor de negócios e marketing.

de eventos, acabou contribuindo para que a agência ficas-

A aposta em algumas premissas básicas de negócios,

se responsável pelo desenvolvimento do site da edição

como atendimento personalizado, planejamento de ações,

dos 15 anos do “Abril Pro Rock”, um dos festivais mais

design diferenciado e agilidade na entrega dos projetos,

tradicionais do cenário musical brasileiro.

vêm garantindo um rápido crescimento da agência. “São

Em relação ao processo de criação, o objetivo era que

valores que nos diferenciam da concorrência e aumentam

o site estivesse integrado com a linha definida para as peças

nossa competitividade. Hoje, temos uma média de con-

promocionais off-line. “Fomos responsáveis por criar a pre-

versão de propostas em quase 50%, ou seja, de cada dez

sença web, dando dinamismo e animações, bem como o pro-

propostas que fazemos, fechamos cinco. Uma das explica-

jeto de navegação. O grid do projeto foi desenvolvido junto

ções para isso é que a grande maioria das prospecções é

com a equipe da Astronave. Definimos quais seriam o enca-

feita por indicação dos nossos clientes”, diz Klaus.

minhamento visual do projeto e o conceito de navegação. Um

Outra característica fundamental é a estruturação de seu ambiente de trabalho. “Criamos um espaço descon-

fator importante era a integração com as peças promocionais que estavam sendo desenvolvidas pela agência”.

traído, onde as portas estão sempre abertas (literalmente)

Além disso, para facilitar a navegação do usuário, foi

e as equipes multidisciplinares estão sempre integradas

utilizado um dos preceitos básicos das leis da usabilidade

e interagindo. Isso não significa que não existem normas

na web. “Dentro do conceito gráfico, procuramos conciliar

ou organização. Existem sim, porém sem o peso da hie-

o visual com uma navegação funcional e de fácil acesso ao

rarquia. Além do convívio diário, procuramos promover

conteúdo, com o mínimo de cliques. Como em projetos

eventos e momentos específicos de descontração, rela-

dessa natureza, o apelo visual é forte”.

xamento ou happy hours”.

14 :: portfólio agência - Casullo

- Promonove

- Informativo Porto Digital

Tecnologias: Banco de dados para as seções atualizáveis e ce-

Tecnologia: HTML

nário 3D + Flash + PHP

www.portodigital.com.br

www.promonove.com.br

O convite para desenvolver o site da Promonove, braço de marketing promocional do Gruponove, agência com mais de 30 anos de mercado, surgiu pela indicação de um cliente em comum.

O espírito deste projeto era criar um ambiente virtual

A criação desta newsletter representa o primeiro

de atendimento. “Como numa loja de conveniência, as

grande projeto desenvolvido pela Casullo para o Porto

empresas de promoção precisam ter agilidade nos servi-

Digital. “Tem um lado emocional muito bacana ao fazer

ços e nas ações. Trabalhamos o projeto com base nessa

um projeto desse, principalmente para uma empresa que

metáfora. O projeto evoluiu de uma ilustração 2D para um

é sediada no Recife Antigo e no Porto Digital. Inclusive,

cenário 3D”, revela Klaus.

exploramos imagens das pontes do Recife para dar esse

Diante do desafio, os criativos da Casullo desenvol-

ar do ‘bairro’. Além disso, a newsletter ganhou o prêmio

veram uma interface com diversos elementos combinados

ABERJE 2006 (seção regional, mas fomos para o nacional)

e organizados de forma que não houvesse uma poluição

de melhor informativo eletrônico, concorrendo com infor-

visual. “A intenção era criar uma navegação mais intuitiva

mativos de multinacionais”.

e de descobrimento, com um visual mais orgânico e realis-

A proposta então era seguir a linha de comunicação já

ta com a introdução de elementos humanos. Ao passar o

utilizada por eles. “Adaptamos para um formato de news-

mouse por cima dos elementos, eles seriam revelados ou

letter que pudesse ser dinâmico e se adaptasse ao vários

que os próprios elementos da loja remetessem aos seus

formatos de comunicação que eles costumavam enviar”.

conteúdos. Dessa forma, mesmo sem um espaço exclusivo

Outro ponto fundamental foi desenvolver um infor-

para um menu de navegação, o internauta pode facilmente

mativo que aguçasse a curiosidade do usuário. “Criar uma

chegar a qualquer informação”.

newsletter visualmente rica, que despertasse a vontade de ler o conteúdo. Ela é toda composta por chamadinhas para os textos no site e sempre acompanhada de imagens e ilustrações que destacam o conteúdo”.

portfólio agência - Casullo:: 15

- Revista Key

- Mach3

Tecnologias: Flash + HTML

Tecnologias: Flash + 3D + HTML

www.revistakey.com.br

www.mach3.com.br

O desafio deste projeto era criar um site que seguisse o conceito da revista impressa, que possui uma linha gráfica de alta qualidade. “Utilizamos os tons dourados da primeira edição, exploramos bem algumas fotos no site, para dar um gostinho ao usuário do que o espera na revista e trabalhamos com a mesma família tipográfica”, conta Klaus.

Além disso, outros fatores influenciaram nas definições de usabilidade e arquitetura da informação do site.

“Isso foi um mix de como o conteúdo estava apresentado na revista com a solução que encontramos para dispor os itens do menu de forma integrada com a marca. Partindo disso, pensamos no melhor caminho para a informação chegar ao usuário”.

Uma das curiosidades deste projeto envolveu os estudos que foram feitos para que ele atingisse um bom nível de criatividade. “Durante o processo de criação, assistimos diversas vezes os vídeos de making of dos ensaios fotográficos da revista e ouvíamos a trilha sugerida repetidamente”.

O bom relacionamento com a New Style, agência que cuida da conta da Procter & Gamble, foi determinante para a produção deste hotsite. Assim, a idéia era que a comunicação on-line seguisse o conceito definido para o material de ponto de venda.

Dessa forma, a primeira etapa do projeto envolveria a aprovação de um wireframe detalhado. “Esse processo foi fundamental para a agilidade do desenvolvimento das outras etapas. Depois de aprovado os wireframes, partimos para o projeto gráfico e conteúdo. Prototipamos todas as telas, para então implementar o site. A idéia era, acima de tudo, que fosse um hotsite convidativo com fácil acesso às informações”, diz Klaus.

No final, o resultado parece ter atingido o objetivo inicial. “Esse foi um site bem dinâmico em seu processo de criação e implementação. Sabe aquele projeto que dá certo do início ao fim?”.

18 :: portfólio freelancer - Renan Molin

AOK Tecnologias: Flash + XML www.aok.com.br

Mente aberta, design criativo Contato: ola-tokio@dmolin.com Site: www.dmolin.com

Para se ter uma idéia do poder dos blogs como fonte de informação das novas gerações, o depoimento de Renan Molin sobre o surgimento de seu interesse pelo design nos ajuda a esclarecer tal afirmação. “Ainda no segundo grau, por algum motivo, comecei a passar horas vendo sites ‘bonitos’. Lembro-me que foi a época do boom dos blogs, acompanhava sempre alguns, como: ‘Meu Patinho de Borracha’, da Ana Beskow, e um blog de alguém que tinha o nome de Poloweb. Navegava também por alguns sites, como X-Conspiration, 4efx, Poows, in4design, Varegera, Fluxuscentral e mais um monte de gente boa por aí.

Aos poucos, surgiu a idéia de montar um blog, o Coletivo5. com, onde postava links sobre design. Foi então que comecei e nunca mais parei”.

Uma das características marcantes da carreira de Renan é o pensamento crítico e aberto para execução e absorção de novas idéias. “Tento sempre renovar minha linguagem gráfica para não cair em maneirismos. Faço o que gosto e sofro influências diretas no meu trabalho e não escondo isso. Acredito que toda a informação que recebemos, seja ela visual, sonora, ou de qualquer natureza, acaba sendo incorporada em nossa criação. Logo, sou aberto a qualquer influência que me pareça saudável. Algumas influências foram e são relevantes para a construção da minha forma de ver e pensar design, como Abbott Miller, David Carson, Salvador Dalí, Thomas Schostok, estudioCrop, Dado Queiroz, Eduardo Recife, Colletivo, Adhemas Baptista e Nando Costa”, revela.

Dentro deste processo, ele destaca a importância dos projetos experimentais como ferramenta para evolução do processo criativo. “A experimentação é fundamental para você evoluir graficamente. As pessoas deveriam poder ficar, ao menos, um ano de sua vida só fazendo experi-

mentações na área do design. Os resultados e o aprendizado são fantásticos. Ao longo do tempo, desenvolvi uma prática saudável que é a de sempre experimentar em meus trabalhos pessoais e não-comerciais. Isso reflete diretamente no resultado dos trabalhos comerciais. Inclusive, é um ótimo exercício para descobrir novas técnicas e ampliar a percepção das formas e das cores”.

O grande prazer proporcionado pelo trabalho talvez seja uma das principais razões para justificarmos a escolha de Renan pelo case da AOK. “Trata-se de uma banda de hardcore de Curitiba. Rolou muita liberdade e tempo para fazê-lo. Ele envolve elementos contemporâneos e outros de época. Foi todo construído em Flash+XML e possui um sistema de notícias bem interessante, desenvolvido especialmente para o site”, conta.

Segundo Renan, a banda precisava de uma reformulação em sua identidade visual para ganhar mais destaque no cenário independente. “Assim, o site era a vitrine mais forte para que isso acontecesse. Então, tratamos de criar um layout moderno e que, de uma forma bem clara, se contrapusesse ao rótulo de banda de metal associada a ela”.

Para que tal objetivo se tornasse realidade, a escolha da combinação cromática foi uma das etapas mais importantes no processo. “As cores claras e alegres fazem par as cores mais escuras que permeiam todo o material gráfico do novo CD Samurai. O resultado foi um trabalho que trouxe bons resultados para a imagem da banda e que cumpriu seu ciclo e seu objetivo”.

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

20 :: portfólio ilustração - Felipe Guga

Felipe Guga www.felipeguga.com Wd :: Como define seu estilo e onde você busca as referências para o seu trabalho?

Felipe :: Acredito que não sei e nem quero definir o meu estilo, uma vez que isso pode e vai me limitar a testar novas linguagens um dia. Meu trabalho não tem qualquer tipo de apego a algum estilo, escola ou movimento da arte.

Meu traço tem um pouco de tudo que eu vejo, leio, sinto, ouço, é uma mistura de tudo que me toca e me é sensível.

Posso afirmar que meu estilo é alegre, colorido e sempre tenta passar mensagens positivas.

Hellven (2007)

Ugly is Beautiful (2006)

Cliente: trabalho pessoal

Cliente: trabalho pessoal

Materiais utilizados para composição: “nanquim, ecoline, pilot, lápis

Materiais utilizados para composição: “nanquim, ecoline, bico de

de cor, scanner e Photoshop para finalização”

pena, scanner e Photoshop para finalização e edição das cores”

22 :: entrevista - Logotipo

Expressão simbólica

das

manifestações visuais e comportamentais Na constituição da identidade visual de uma empresa, o desenvolvimento do logotipo é uma de suas principais etapas. Este é o tipo de trabalho que vai muito além do uso de ferramentas específicas.

Na verdade, para a concepção de um projeto de qualidade, o designer vai precisar de uma boa bagagem para compreender os diversos aspectos e valores que permeiam uma corporação.

Neste contexto, a internet trouxe algum tipo de transformação para a realização deste processo? A resposta vamos conferir a seguir, através da análise de Valpírio Monteiro, diretor de criação da GAD’Design (www.gad.com.br).

entrevista - Logotipo :: 23

Wd :: Ainda é comum no mercado as pessoas confundirem a denominação entre o que seja um logotipo e

“O logotipo será o elemento que vai orientar, criar critérios,

uma marca. Em termos de design, quais são as diferenças entre esses conceitos?

Valpírio :: Uma marca compreende um conjunto de

definir padrões e até quebrar paradigmas”

manifestações próprias e muito mais complexas que um desenho (no caso, o logotipo).

Quando desenvolvemos uma marca, nos apropriamos

sentar e consistência com a profundidade e assertividade que o representado necessita.

de aspectos culturais, comportamentais e de valores intrín-

Wd :: No artigo “O design como gestão e a gestão

secos de uma corporação, expressos através de um conjunto

do

de conexões emocionais que hoje chamamos de marca.

asp?cod=252&tipo=A), o professor João de Souza Leite

design”

(www.apdesign.com.br/noticias_view.

Precisamos, hoje, ter coerência e consistência em todas

afirma que “...o designer é o único que elabora modelos

as manifestações visuais e comportamentais - este conjunto

balizados por seu contato direto com o homem, seja

de pontos de contato é o que chamamos de marca.

através da percepção visual, seja pela relação corporal

O logotipo é a síntese do desenho, a expressão sim-

estabelecida com o objeto do projeto”. Diante de sua

bólica deste conjunto de sensações e manifestações, sejam

experiência, quais seriam as principais diferenças na pro-

visuais ou comportamentais.

jeção de um logotipo no mundo real e no mundo virtual?

Wd :: Dentre as principais etapas na constituição da

Valpírio :: Diria que o processo construtivo e me-

identidade visual de uma empresa, podemos citar o de-

todológico é o mesmo - o que muda é o suporte e as

senvolvimento do logotipo. Quais são as características

ferramentas empregadas, criando uma linguagem diferen-

no desenvolvimento que vão influenciar na construção

ciada, de acordo com o meio.

de seu conceito final?

Valpírio :: Coerência e consistência. Coerência que expresse a identidade e os valores do que o logo irá repre-

Wd :: Da escolha da família tipográfica à definição da paleta de cores, quais são as principais etapas no desenvolvimento de um logotipo?

24 :: entrevista - Logotipo

“Símbolo, tipos, cores e grafismos são os elementos básicos da constituição de uma identidade” Valpírio :: Símbolo, tipos, cores e grafismos são os elementos básicos da constituição de uma identidade.

As etapas podem diferir um pouco, de acordo com o processo de conhecimento de cada cliente, mas diria que pesquisa, aculturação, conhecimento do mercado (segmento, concorrentes e consumidores), plataforma conceitual, idéia central, desenho e definição do conjunto de elementos que irão definir o projeto.

Wd :: Quais são os estudos sociais e de grupos necessários para o desenvolvimento de um logotipo?

Valpírio :: Como disse Cláudio Ferlauto, em artigo publicado na Revista da Abigraf (www.abigraf.org.br), que “a cultura é o norte do designer”, quanto mais amplo for nosso conhecimento das relações sociais, da percepção do que representam os símbolos para os grupos sociais, de conceitos de antropologia, de etnografia e como as pessoas interpretam e lêem os índices, tanto mais pregnância terá nosso trabalho enquanto designers e construtores de metáforas visuais.

Portanto, tendo esta base de conhecimento genérico, o que devemos fazer é aprofundar o conhecimento no caso específico, principalmente através de pesquisas, artigos e tendências sobre o universo que estaremos trabalhando.

Wd :: Em entrevista para o site Coletiva.net (www.coletiva.net/perfilDetalhe.php?idPerfil=221), você apontou que “hoje, o design deixou de ser substantivo para ser verbo”. Que tipo de influência o desenvolvimento de um logotipo vai exercer dentro do branding de uma empresa?

entrevista - Logotipo :: 25

Valpírio :: O logotipo será o elemento que vai orientar, criar critérios, definir padrões e até quebrar paradigmas.

Nada como um novo conceito e uma nova expressão visual para modificar uma cultura corporativa.

Wd :: Ainda sobre branding, o Google vem usando uma estratégia muito interessante: em datas comemorativas, o logotipo de seu site sofre algumas adaptações que representem uma espécie de homenagem. Quais são os parâmetros que devem ser utilizados em estratégias deste porte? E como evitar os riscos de banalização do logotipo?

Logotipos comemorativos

X

Como forma de comemorar datas especiais, eventualmente o Google modifica o logotipo de sua página principal. Como exemplos, podemos citar os logos criados para as festas de final de ano, Copa do Mundo, dias de aniversários de personalidades, entre outros. Na página da empresa, existe um museu virtual com todos os desenhos já criados.

Fonte: Google (www.google.com/intl/en/holidaylogos.html)

Valpírio :: Depende da estratégia e do posicionamento da marca. Como o Google tem uma representação principalmente em meios digitais, fica bem mais fácil fazer alterações de desenho e aplicá-los rapidamente.

Na questão de ferramentas, é absolutamente exeqüível. Na questão da estratégia da marca, tenho algumas dúvidas, pois acho que perde um pouco na questão da pregnância e visibilidade que se quer transferir destes valores expressos no desenho para a marca.

Até porque os desenhos são de uma simplicidade que beiram a ingenuidade.

26 :: entrevista - Logotipo

Wd :: O avanço tecnológico permitiu que muitos negócios pudessem existir somente no mundo virtual, contando apenas com uma infra-estrutura física enxuta,

Especificações do Google Para quem se interessar em utilizar o logotipo do Google em sua página, a empresa traz algumas recomendações para a

necessária apenas para o andamento das questões li-

sua correta aplicação: estão disponíveis quatro formatos em

gadas ao mundo real. Neste contexto, quais são as

relação ao tamanho do logo (25%, 40%, 50% e 60%) e três

transformações no processo de criação de um logotipo para uma empresa focada na venda ou prestação de ser-

tipos de fundo (branco, cinza e preto).

Fonte: Google (www.google.com.br/intl/pt-BR/logos.html)

viços virtuais?

Valpírio :: Acho que o processo deve ser o mesmo, independente de estar no virtual ou real. Como falei anteriormente, o que muda é somente o meio e a ferramenta de aplicação.

Wd :: O manual da marca é o documento no qual você define os parâmetros de aplicação, evitando assim o seu uso indiscriminado. O Google, por exemplo, disponibiliza em seu site algumas especificações no uso de seu logotipo. Pensando nisso, quais são as particularidades na definição dos aspectos para a aplicação de um logotipo no meio digital?

Valpírio :: O manual deve prever e condicionar situações de ordem mais permanentes, senão corre o risco da rápida obsolescência.

Sempre temos que ter o cuidado de definir regras de aplicações genéricas, que permitam flexibilidade e, principalmente, usabilidade.

A grande questão na formatação de um manual é sempre o bom-senso: devemos definir regras básicas de uso e aplicação, mas temos que trabalhar com uma banda de proteção, uma faixa que permita o projeto se movimentar e crescer.

Ele tem que evoluir como uma Escola de Samba.

Wd :: A dinâmica e a temporalidade são algumas das características intrínsecas do meio internet. Assim, dentro da estratégia de comunicação das empresas, o processo de reformulação de seus sites deve ser pensado periodicamente. Neste contexto, quando deve ser recomendada a reformulação do logotipo de uma empresa?

“Marca é sempre meio e não fim”

X

entrevista - Logotipo :: 27

Valpírio :: Depende muito do caso - freqüência de exposição na mídia, mudança do posicionamento estratégico, entrada de novos concorrentes no mercado.

Dizia-se na década de 80 que uma marca tinha que ter a capacidade de durar, no mínimo, dez anos.

Hoje, este parâmetro é variável e flexível, dependendo daquelas condicionantes expostas acima.

Wd :: Outro aspecto envolvendo a internet está presente nas diversas ferramentas que, aparentemente, parecem “facilitar” o processo de criação da identidade visual de uma empresa. Como exemplo, podemos citar o site Cool Text, que oferece uma funcionalidade para o desenvolvimento rápido de logotipos (http://cooltext. com/Logos). Diante deste cenário, de que forma o profissional do mercado de design deve justificar o valor de seu trabalho?

Valpírio :: Principalmente através da estratégia, da construção do posicionamento e da idéia central de uma marca.

Marca é sempre meio e não fim - o desenho é somente um suporte, o que interessa é a idéia por trás do desenho.

E isto este site não pode entregar.

Wd :: Em termos de valores, quais são os fatores que influenciam na definição dos custos do desenvolvimento de um logotipo?

Valpírio :: Visibilidade, abrangência, exposição de meios, pontos de contato e expertise dos profissionais envolvidos (bagagem).

28 :: entrevista - Logotipo

“O manual da marca tem que evoluir como uma Escola de Samba”

Bibliografia sobre marca

- Derrota das marcas Autor: Georges Chetochine

- Manual para você criar, gerenciar e avaliar marcas

Editora: Makron Books

Autor: José Roberto Martins Editora: Negócio

- Grandes marcas grandes negócios Autor: J.R. Martins

- 11 consagradas leis de marcas na internet

Editora: Negócio

Autor: Al Ries Editora: Makron Books

- Guerras de marcas Autor: David D’Alessandro

- Como construir marcas líderes

Editora: Makron Books

Autor: David Aaker Editora: Futura

- Marcas de valor no mercado brasileiro Autor: Lula Vieira

- Criando e administrando marcas de sucesso

Editora: Senac-RJ

Autor: David Aaker Editora: Futura

Fonte: GAD’Design (www.gad.com.br)

30 :: freelancer

freelancer :: 31

Atuar como freelancer tem sido uma boa alternativa para os profissionais que desejam entrar no mercado e para quem procura uma forma de complementar o seu orçamento.

Além disso, um dos grandes fascínios por esta modali-

“O freelancer não tem a figura física do chefe ao seu lado, administrando e fiscalizando sua produção. Por isso, é importante que se organize” (Thorii Pablo)

dade de trabalho envolve a possibilidade do controle de sua própria produção. Se por um lado esta característica repre-

orçamento, é aconselhável que já se negocie o prazo com o

senta uma vantagem, de outro ela traz uma série de respon-

cliente. Você deve avaliar junto ao cliente qual a demanda de

sabilidades para a carreira do profissional.

prazo para o projeto. Se perceber que o cliente tem pressa

Nesta reportagem, vamos revelar a realidade dos free-

(todos têm), mas que realmente o prazo é de urgência e se

lancers brasileiros, mostrando aspectos como organização do

sua planilha já estiver cheia, a melhor opção é não fechar

tempo, detalhes sobre negociação, visão das agências sobre

o orçamento. Indique um amigo que tenha um trabalho de

este segmento de mercado, além dos fatores envolvidos para

qualidade e ‘passe a bola adiante’. Pense, você não estará

a montagem de um ambiente adequado de trabalho.

perdendo um cliente, e sim preservando os que já possui”,

Primeiro desafio: administração do tempo

orienta Mariana.

Já dizia o ditado popular que “liberdade não é sinô-

Um bom exemplo deste cenário está presente na vida

nimo de libertinagem”. A flexibilidade de horários na vida

de Glauco Diogenes (www.glaucodiogenes.com.br). “Levei

de um freelancer pode ser uma das grandes vantagens para

um bom tempo para me adequar, ‘criar’ uma rotina ‘sob

o andamento de seu processo de criação. Ao mesmo tempo,

medida’, mas hoje em dia as coisas estão rolando de uma

esta característica se transforma também em um desafio,

maneira bem mais organizada. Trabalho, em média, 12-14

pois será preciso administrar corretamente os horários para

horas por dia, seleciono o tipo de projeto que vou desen-

que o desenvolvimento e a entrega dos projetos não sejam

volver e dificilmente pego um trabalho ‘para ontem’. Estou

prejudicados. “O freelancer não tem a figura física do chefe

sempre em busca da máxima qualidade”, revela.

ao seu lado, administrando e fiscalizando sua produção. Por

Em seguida, desenvolva habilidades de negociação

isso, é importante que se organize. Procuro não assumir

Trabalhar por conta própria significa desenvolver habi-

mais projetos do que sei que sou capaz, para não perder o

lidades também na área comercial, afinal você se torna o

controle da produção e iniciar uma bola de neve de stress

administrador de sua vida profissional. Nesta caminhada,

desestimulante”, relata Thorii Pablo (www.thorii-pablo.com).

para garantir uma remuneração constante, o freelancer acaba

Para Mariana Julião (www.maryjuliao.com.br), é impor-

desenvolvendo algumas técnicas utilizadas geralmente pelos

tante que o profissional saiba conciliar os projetos que estão

profissionais de vendas. Assim, alguns detalhes podem aju-

em andamento e os que ainda estão por vir. “É comum cair na

dar, por exemplo, na busca por novos clientes e na divulga-

‘cilada’ de se preocupar com os projetos que temos em mãos,

ção de seu trabalho.

esquecendo-se dos que estão por vir. E, quando isso acontece,

“O bom e velho boca a boca tem trabalhado bastante

a tendência é de criar uma fila interminável de projetos que

para mim. Quando lancei meu site, em 2003, fiz um ‘barulho”

acaba por prejudicar o tempo individual de cada criação. A pior

grande. Na época, trabalhava em uma produtora web e meus

conseqüência é o prazo curto, pois as pequenas atividades do

colegas tinham muitos contatos, além disso conheciam as fer-

dia-a-dia de quem trabalha sozinho, como ir a reuniões e fazer

ramentas e sites legais para estar divulgando. Fui reconhecido

orçamentos, acabam tomando o tempo, já tão curto, do pro-

pelos criadores da maioria dos grandes portais de design,

jeto em andamento, gerando estresse para o profissional”.

gente do calibre de bd4d, linkdup, k10k, Newstoday, Shift,

Então, como fugir desta armadilha? “Primeiro, é fun-

Brasil Inspired, entre outros. Como já tinha alguns contatos

damental manter uma planilha organizada e atualizada, que

de outros mercados, principalmente de moda, que foi onde

mostra claramente os prazos finais, mas isso é obvio. A

comecei, aproveitei para fortalecê-los. Daí para começar a

melhor dica que posso dar é: muito cuidado na hora de pas-

fazer revistas, eventos, vinhetas, animações para televisão

sar orçamentos. É onde tudo começa. Antes de passar um

foi um pulo. Felizmente, tem dado certo”, diz Glauco.

32 :: freelancer

,

to

o

p

tração cuidadosa de seu portfólio on-line é vista

como uma ferramenta fundamental no processo de divul-

co

en

Alves (www.nacionale.cc), a adminis-

zo

gação de seu trabalho. “Cobro-me bastante quando começo

um projeto para entregar um trabalho de qualidade, pois ele será

parte do meu portfólio”.

cliente” (Marian aJ mo

assar um o de p rça s m te

n

el que já se ne go cie No caso de Doug

ra

é

o ac

háv sel

Além disso, o bom relacionamento com os clientes aumenta poten-

cialmente as chances de o freelancer realizar outros projetos, através de

indicação. “A melhor propaganda é aquela feita pelo cliente satisfeito. Um

job muito bem sucedido acaba levando a outros jobs interessantes”, ressalta Thorii. “No meu caso, normalmente são clientes antigos que retornam com novos projetos ou que trazem novos clientes”, constata Ana Quartin (www. anaquartin.com.br). se manter um relacionamento saudável entre freelancer e clientes. A

mente quando falamos de valores ou com relação ao

o)

relação não seja prejudicial para ambos os lados, principal-

uli ã

primeira delas envolve a defi nição de limites e regras para que a

“A

n

Ainda sobre este assunto, algumas questões são importantes para

tempo disponível para o andamento do projeto.

“A maioria dos clientes tende a pensar que o freelancer é exclusivo e que a sua atenção deve ser integral. Assim, adquirem o péssimo hábito de não respeitar o horário comercial e utilizar o telefone celular como uma ‘arma perturbadora’, pronta para estragar fi nais de semana e almoços familiares. Para que isso não ocorra, o primeiro passo é sempre cumprir os prazos ou, ao menos, manter o cliente bem informado com relação ao andamento do projeto. Aprenda, cliente chato é cliente inseguro! Se ocorrer de receber uma ligação em horário importuno, atenda, explique que não é uma boa hora e marque um retorno. Sumir ou não atender é pior. O cliente se desespera e provavelmente pensará que você não é um profissional confiável”, aponta Mariana.

Em relação à definição de valores de um projeto, ela diz que uma boa alternativa é procurar ser transparente na negociação. “Mostre que você é um profissional qualificado, que seus valores estão de acordo mercado e que esta é a margem de preço dos seus projetos. Se o cliente realmente não tiver recursos e você se interessar em fazer o projeto mesmo assim, proponha outras soluções, como descontos revertidos em permutas ou facilitação de pagamento (dividindo em parcelas maiores). Alguns profissionais costumam fazer orçamento com margem de negociação, não deixa de ser uma boa solução. Mas nunca abaixe além do previsto, pois você logo se arrependerá, principalmente quando o cliente te ligar no final de semana”.

Ou seja, determine parâmetros que ajudem na definição do preço final. “Uti-

freelancer :: 33

“O bom e velho boca a boca tem trabalhado bastante para mim” (Glauco Diogenes)

Ambiente de trabalho de Dado Queiroz

Ambiente de trabalho de Glauco Diogenes

lizo alguns, desde o tipo de trabalho que vou desenvolver,

tando meus serviços. Também utilizo cláusulas específicas para

passando por quem é o cliente, finalidade do projeto, quan-

etapas de produção e entrega dos projetos, além de multas

tidade e variedade de mídias, tempo de produção, staff do

bilaterais que garantem o compromisso assumido. Nunca tive

projeto. No caso de projetos de websites, trabalho com valo-

grandes problemas com relação a isto”, acrescenta Glauco.

res específicos, dependendo do projeto: sound designer, ani-

No final, os especialistas indicam que o ideal é encon-

madores, programadores, assistentes etc.”, enumera Glauco.

trar um perfil de cliente que se deseja trabalhar. “É impres-

“A composição de valores é a mesma empregada pela maio-

sionante como muito se fala sobre clientes procurarem ser-

ria das empresas, com o diferencial que há bem menos des-

viços de qualidade e pouco se fala da situação contrária. Se

pesas fixas a serem sanadas, na maior parte dos casos. De

perceber que estou estressando com um cliente, mesmo man-

resto, é o mesmo de sempre: número de horas, visibilidade

tendo meu padrão de qualidade e respeito por ele, é porque

do projeto, porte do cliente, relação prazo/liberdade etc.”,

desviei do meu caminho e estou lidando com o cliente errado.

completa Dado Queiroz (www.dado.estudiocrop.com.br).

Estressa com cliente quem quer. Se ele não te pagou ou pro-

Outro aspecto fundamental durante uma negociação

curou você com um ‘serviço para ontem’, e você não está mais

envolve a formalização de um contrato, que será o docu-

se sentindo bem, então está na hora de reavaliar sua postura

mento de segurança que vai sacramentar o acordo dos ser-

e definir os clientes que deseja ter”, afirma Thorii.

viços exatos a serem prestados pelo freelancer. “Sempre for-

Calote, como evitá-lo?

malizo a prestação dos serviços, através de um contrato que

A falta de pagamento, conhecida popularmente como

deve ser assinado por mim e pelo cliente. Este contrato des-

calote, é uma das principais reclamações envolvendo o cotidiano

creve todas as etapas que serão realizadas no projeto, desde

dos profissionais freelancers. Quem já passou por isso relata os

o briefing à publicação. Nele, também há uma declaração de

principais erros que costumam proporcionar tal situação.

qual é o serviço que irei prestar e, no caso de terceirização,

“A culpa foi minha, quer dizer, do cliente que não

qual é o serviço que será feito por terceiros. Ainda consta

pagou, mas eu não tomei os cuidados que deveria. Na ver-

uma descrição de todas as áreas do projeto, com seções,

dade, foi um cliente bem indicado, que tinha um projeto

sub-seções e os prazos. E, no final, temos os valores firma-

muito bacana em vista e que logo me interessei em reali-

dos, as condições de pagamento e os itens não previstos no

zar. Ele foi simpático desde o início e firmamos um acordo

contrato”, atesta Mariana. “Tenho um grande amigo, que é

informal. E a empolgação foi tamanha que comecei a tra-

advogado especializado em propriedade industrial e intelec-

balhar no projeto, sem ao menos ter recebido o sinal! Uma

tual. Conversei durante muito tempo com ele para desenvol-

série incontável de erros. Primeiro, cliente é cliente: nunca se

vermos uma proposta que fosse sucinta, prática e fundamental-

deixe levar pela simpatia de um cliente, mesmo que seja seu

mente segura, tanto para mim quanto para quem está contra-

melhor amigo, e deixe as formalidades de lado - orçamento,

34 :: freelancer

“O portfólio e a experiência profissional contam e muito na escolha de um freelancer” (Sung Hean) contrato assinado etc. Segundo, projeto é trabalho: nunca se empolgue com um trabalho futuro, por mais bacana que seja e abdique de todas as regras que você impõe para o início de um projeto - como o sinal, por exemplo. E, por último, trabalho é dinheiro: não se esqueça que você é designer e que isso é o que você faz para sobreviver. Ao ignorar tudo o que aprendeu pela empolgação de realizar ‘um projeto legal’, você põe em risco o pão de cada dia”, aponta Mariana.

Ambiente de trabalho de Mariana Julião

Visão das agências sobre o trabalho do freelancer Um dos segmentos de mercado que mais solicita os serviços de freelancers são as agências digitais. A explica-

É ali que conseguimos captar o estilo, bom gosto e técnica

ção está nas vantagens na contratação do trabalho desses

do candidato. Precisa-se ter cuidado para não se encantar

profissionais. “A vantagem é o aumento da capacidade de

demais com o portfólio e depois, na prática, ver que o por-

produção da empresa, sem necessariamente envolver um

tfólio não foi feito pelo candidato ou que ele, para reprodu-

aumento no quadro de funcionários, principalmente quando

zir aquela qualidade, precisaria de 30 dias no mesmo layout.

se trata de volumes de trabalho fora da média mensal que

No dia-a-dia, a coisa é bastante diferente. Os jobs chegam,

costumamos ter. A principal desvantagem é o acompanha-

muitas vezes, com o briefing confuso e os prazos de entrega

mento do trabalho e a disponibilidade do profissional no

estão cada vez mais apertados. Ganha quem faz melhor, no

caso de alguma alteração ou correção que o projeto precise

menor espaço de tempo”, complementa Luciano Garcia, pre-

sofrer”, afirma Sung Hean, sócio diretor de criação da Bina-

sidente da Spirit Comunicação (www.spiritweb.com.br).

tural (www.binatural.com.br).

Detalhes envolvendo o ambiente de trabalho

Ou seja, tudo vai depender da especificação do projeto.

Muitas empresas procuram investir uma determinada

“A maior desvantagem do ‘bom freelancer’ é saber que seu

verba para prover um ambiente físico que estimule a produção

emprego está sujo pela atuação de pessoas que não são cor-

de seus profissionais. Na vida de quem trabalha por conta pró-

retas profissionalmente. Não é de hoje que recebo jobs de

pria, este é um aspecto que deve ser levado em consideração na

empresas que desistiram do trabalho no meio do caminho,

hora de montar o seu ambiente de trabalho.

porque o freelancer ‘sumiu’. Supondo que o freelancer seja

“Esta é uma questão essencial e tenho para mim que o

correto e profissional, a grande vantagem é um acordo com

ambiente de trabalho representa, pelo menos, uns 20% do

menos impostos para o contratante e a possibilidade de um

‘bolo’ motivacional de qualquer profissional. Sentir-se bem

trabalho mais específico para o cliente”, diz Daniel Perrone,

no lugar em que você passa a maior parte de seu tempo não

diretor de criação da Diretta Web (www.diretta.com.br).

tem preço. No meu caso, primei essencialmente pelo con-

Pelo lado dos freelancers, conhecer os critérios utiliza-

forto. Meu estúdio não é muito grande, mas é extremamente

dos pelas agências na terceirização de determinados serviços

funcional, podem trabalhar confortavelmente até seis pessoas.

é um bom atalho para se garantir oportunidades num futuro

Tenho sistema wireless, quem vem trabalhar comigo tem cone-

próximo. “O portfólio e a experiência profissional contam

xão veloz, uma boa geladeira, televisão, DVD e um videogame

e muito na escolha de um freelancer. Na maioria das vezes,

(para as horas de stress), sofá, puffs, uma grande mesa de tra-

esses profissionais são indicados por conhecidos ou terceiros

balho, mesa para refeições e um banheiro que tem chuveiro

que já trabalharam conosco”, revela Sung.

quente, caso eu precise ir até um cliente e/ou uma reunião de

“Na área de criação, mais do que diploma, experiência internacional e línguas, o portfólio é muito importante.

última hora, não preciso ir para casa pra tomar banho e me aprontar”, relata Glauco.

freelancer :: 35

Além do conforto, outros fatores vão influenciar na estruturação do ambiente do freelancer. “Um dos principais é o local. Deve-se escolher um local tranqüilo, onde a pessoa se sinta à vontade e, ao mesmo tempo, ativa para o trabalho.

Já ouvi casos de pessoas que não conseguem trabalhar em casa e acabam se deixando levar pela preguiça. Isso é cada um, durante um ano mantive meu escritório em casa e juro nunca ter caído em tentação. Outro aspecto é a praticidade.

Optei por ter um laptop por causa da mobilidade e também pela liberdade que ele me proporciona, assim posso viajar, ou mesmo trabalhar em outros ambientes fora o escritório, além de ser muito útil em reuniões. Também investi em uma mesa digitalizadora que me dá a opção de trabalhar com mouse e com a caneta. Assim, tenho mais liberdade na criação nos layouts e controle para navegar. E, por último, o acesso à internet. Preocupei-me em contratar um provedor que me oferecesse o máximo de velocidade de acesso por um valor justo. Não adianta investir no seu ambiente de trabalho físico se o virtual não for bom”, destaca Mariana.

Ambiente de trabalho de Thorii Pablo

layout, dedicar-se naquilo que tem de especial no trabalho em si, e não na forma de vender ou geri-lo. Evidentemente, o ideal é o equilíbrio entre ambos, mas o mercado está aí para nos mostrar que, na maior parte dos casos, se investe mais fortemente em uma das duas opções”, finaliza Dado.

No final, tais aspectos funcionarão para que o profissional tenha a tranqüilidade necessária para desenvolver seu diferencial no mercado. “Vejo duas vertentes em relação às

Ambiente dos criativos

qualidades que um freelancer deve buscar para garantir um

Se você busca referências de como montar

diferencial. A primeira é o profissional que resolve, que mata

um ambiente que estimule à criatividade, uma boa

jobs com eficiência e dentro do prazo; que faz o que o cliente

pedida é acessar o blog Criativos S.A. (www.criati-

pede/precisa. A outra é o profissional ao qual os clientes vão

vos-sa.com), inspirado no “On My Desk” (http://on-

atrás em busca de uma linha de trabalho específica, normal-

my-desk.blogspot.com), da ilustradora Linzie Hun-

mente chamada ‘estilo’. O primeiro profissional deve investir

ter, onde “profissionais criativos apresentam seus

mais em sua própria efi ciência, em gestão de processos, qua-

ambientes de trabalho”.

lidade de atendimento etc., pois a agilidade acabará contando mais do que o layout. O segundo deve buscar sempre o melhor

Focando em um nicho de mercado Bate-papo: Vinicius Augusto (www.vini.com.br), especialista na criação de interfaces para sites de comércio eletrônico

Wd :: Por que você decidiu trabalhar como designer freelancer?

Vinicius :: Em 2000, trabalhei em uma agência de publi-

legal, alguns dias ficava sem o que fazer. Só que os trabalhos foram cada vez mais aumentando. Não só em quantidade, mas sim no tamanho dos trabalhos.

cidade que iniciava seus trabalhos na web. Porém, lá não

Wd :: Em sua carreira como freelancer, você acabou

tinha a liberdade de criação que queria. Havia uma competi-

se especializando na criação de interfaces para sites de

ção entre os funcionários e com o próprio dono da agência,

comércio eletrônico. Como surgiu a oportunidade neste

pois ele também fazia alguns layouts.

segmento?

Então, resolvi trabalhar por conta própria. Não é fácil,

Vinicius :: Com o boom do e-commerce em 2004, várias

principalmente no início. Como ainda não tinha um portfólio

empresas que só tinham lojas físicas começaram a montar

36 :: freelancer

suas lojas virtuais. Foi então que surgiram sistemas de ecommerce prontos para locação. Então, fechei parcerias com empresas, como a Soluções Net, pois eles eram empenhados em desenvolver um sistema cada vez mais completo e o layout ficava em segundo plano. Eles me indicavam e eu ia fazendo os layouts personalizados.

Atualmente, sou referência em layouts de lojas virtuais. Crio layouts personalizados para cada tipo de segmento.

Existem muitos fatores que fazem uma loja virtual vender mais. Uma delas é o layout. Mas você tem que diferenciar os layouts por ramo de atividade. Um exemplo claro é uma loja de som e acessórios de carro, ela tem que ter um layout voltado para o público que consome esse produto. Um layout para uma loja virtual de informática tem que ser totalmente

Ambiente de trabalho de Vinicius Augusto

diferente. Hoje, faço mais lojas virtuais do que sites propriamente ditos.

Outro ponto importante é quanto ao valor do trabalho.

Wd :: Na estruturação do trabalho freelancer, é pre-

Lá fora te pagam muito mais. Não porque o padrão de vida

ciso investir alguma verba na montagem de um ambiente

lá é maior ou os designers de lá cobram caro. Eles valorizam

que proporcione ao profissional um ambiente adequado de

nosso trabalho. Sempre cobrei 30 a 40% mais caro para traba-

trabalho. No seu caso, quais investimentos foram feitos na

lhos para gringos. Numa primeira oportunidade de trabalho,

montagem do ambiente?

tinha cobrado o mesmo valor daqui. O valor deu ao cliente

Vinicius :: Optei por montar um home office. Você reduz os custos em, no mínimo, 60% ao mês. Aluguel de sala, internet, combustível, alimentação, tudo isso você não precisa pagar

um conceito de que eu era amador, acabei perdendo o job.

Wd :: Quais dicas você daria para o profissional que deseja viver profissionalmente como freelancer?

se trabalhar em casa. Mas essa economia tem que ser inves-

Vinicius :: O começo é muito difícil, mas tem que ter

tida num bom equipamento. Estou num apartamento e um dos

perseverança. Seja pontual em todos os trabalhos. Se você

quartos é meu escritório. Por mais que você trabalhe em casa, o

promete entregar tal dia, entregue antes. Obviamente que já

ambiente onde você fica tem que se parecer um escritório.

furei prazos, por diversos motivos. Mas, se isso vai acontecer,

Quanto aos investimentos: fiz uma bancada que envolve

avise o cliente com antecedência. Com o tempo, você será

todo local que estou. Dessa forma, consigo tirar fotos de pro-

reconhecido, os clientes que te procuram num dia, voltarão

dutos de clientes, planejar layouts etc. Em equipamentos, tenho

meses depois solicitando seus serviços novamente.

monitor LCD de 19”, dois PC’s e um notebook. Para impressão

Se hoje existem os sobrinhos ou os webdesigners que

de trabalhos, amostras etc., possuo uma Epson R270 com Bulk

fazem os cursinhos de R$ 99,00, você tem que se destacar no

Ink (que proporciona uma economia de 90% nas impressões),

meio dessa multidão. Muitos freelancers pensam que o cliente vai

além de armários para arquivamento de contratos.

te procurar naquele momento apenas e nunca mais volta. Tenho

Wd :: Você possui alguns clientes estrangeiros. Diante

clientes que atendo desde quando comecei, há sete anos.

de sua experiência, como você avalia o tratamento dos

Outro ponto importante, e que sofri na pele, foi a expe-

clientes brasileiros e os lá de fora em relação ao trabalho

riência com os próprios freelancers. Diante da demanda, tive

do profissional freelancer?

que terceirizar o trabalho com outros freelas. Mesmo acom-

Vinicius :: Por várias vezes atendi agências de fora do

panhando o trabalho de perto, alguns não tem nenhum com-

Brasil. Nosso trabalho é muito mais valorizado lá fora do que

promisso. Então, você pode ficar com as mãos atadas, como

aqui. Eles estão mais abertos à novidades, estilos diferentes

fiquei diversas vezes. Mas, com o tempo, você vai garimpando

etc. Sempre fui feliz nos trabalhos para o exterior. Sempre

e achando os melhores. Hoje, tenho três profi ssionais de alto

foram corretos em termos de pagamento, pois sempre fui

gabarito que sempre trabalham comigo nos momentos que

pontual nas entregas.

estou envolvido com muitos projetos.

38 :: debate - rótulo

Quando um cliente busca os serviços do porte de um Felipe Taborda, irmãos Campana, André Matarazzo ou Nando Costa, por exemplo, ele deseja agregar ao seu projeto a personalidade e o estilo de trabalho desses profissionais.

No entanto, alguns profissionais alertam que o designer precisa ter uma certa parcimônia na hora de se aceitar determinada rotulação, pois existe a possibilidade de seu trabalho ficar estigmatizado no mercado, limitando assim seu campo de atuação.

Pensando nisso, o processo de criação de um designer deve ter ou não um “rótulo” que identifique seu trabalho?

debate - rótulo :: 39

Gustavo Piqueira Sócio da Rex Design, também ilustra livros infantis e desenha alfabetos distribuídos pela type foundry T26 www.rexdesign.com.br

“ E m p r i m e i ro l u g a r, c re i o q u e o m o v i m e n t o d e rotulagem/estigmatização não parte exclusivamente do mercado. Pelo contrário. Este apenas reage (às vezes, de forma inclemente, é fato) ao direcionamento que o próprio designer dá a sua produção. Se este passa anos dedicandose a uma única linguagem ou segmento, é natural que, mais

“Tradutores de mensagens dos clientes’ não são designers. São tradutores de mensagens dos clientes. Executores com algum know-how técnico”

dia menos dia, não consiga se desvencilhar dela (a não ser

atividade cuja essência fundamental é o encontro/embate

via aposentadoria).

da necessidade mercadológica com a subjetividade criativa,

Por outro lado, se os anos se passaram numa constante

é o controle dessa correta dosagem que fará com que o

fuga de qualquer ingrediente pessoal (o tal ‘toque autoral’),

profissional, seja ele qual for, não se veja subitamente

o risco é o mesmo. Fica-se taxado como um profissional

condenado a repetir ad infinitum uma fórmula pronta.

insosso, talhado apenas para projetos de tom genérico

Se a fórmula é autoral ou genérica, tanto faz. Uma

(Afinal, ‘tradutores de mensagens dos clientes’ não são

fórmula é uma fórmula, ora. Pode até ser confortável,

designers. São tradutores de mensagens dos clientes.

gerar dinheiro ou status (Quem sabe, até dinheiro e status

Executores com algum know-how técnico).

ao mesmo tempo). Não importa. Fórmulas são sempre

Ou seja: nem tanto ao céu, nem tanto a Terra. Numa

enferrujadas e sem graça.”

40 :: debate - rótulo

ara p a t u roje gir se p ão atin n , es para o. õ ç cad r e e e u om so exc liente ia n s bra c o n a el, rê m ar a o c isív r efe se v r o l a a o d r eo mp ois ina ac salv ta pa exe rno rm m e o a , t u t c r e e lg us êr ad .A le b gne Proje um od do i e t a a , s e c c ido j r e . os us o d me hec p ro n eig eb o l t m o m n n sa s e o o oc lie “O mes lvo” p re nto olh óli ess oc m f e c , s e t r u r a s az im ao ne po af de gd est to ele lico-a sig m ’ n e v a i e s u r u n d i d e s st eq em ran do cas um ab eo do eb sta qu m‘ ner tar go a púb e d l e r a c g r i i r a r r a e nt é nt da es sp

m m o o in ra od viç cha ga jet do Ea ? io al d os ser r p ro ara u os. ner s m á t p d o a rí do ta m o, gin esig . oje e u ) t s r a d r s c d é p Co m o do ce xe nte rav oi cia ep ão se do clie , at an qu iên uaç r o s . da p t uto o te t e u u a a d e j e nto h se o. xp .É oc lien p ro me p ro os ea d ten sa ae rc a oc rad o r d s e e a d e á a á r m j r s d m o p a sp e s rsa da e te est em açã ina oe qu ica ive ta p ada ien d z t d l e d a i m n j s r i r c t t a i í o e t e r s s m ult c re sd . Pr par det ee cte ter eo re s on .” qu mo ea ma de avé es ara s c r t u c o a t e e Ac ais n l e ç m d a as ra lie be um am a e p u a j l c l a s s ( a c t a e i a f s e r o id m un ara ido se e ndo sol Éo for com com do ta p um n. qua ra con m a s e g e j e a c i e n r s r o d s o r b e er de a, b per oc em op om sab cid de se l em , nã od blic e l s ê s m ú h u c e s e t p o on ró ma eçõ lica sa v seu re c os, n. O exc pre mp ao g d i s i m a s a i o e e r e t nc ra qu od jun que vo e re d’ d De o. O sal dif n i v , l s r e io -a of m ign tór lico des ‘top úb per e o o p r , É s eu em Ma ir s ndo ng i a t t a cer ara s, a n ep e uag ling “A

oc

o

rio ritó on esc e ond o L d ng a ndi éri ora Val Bra iret d n o ia ond Sóc aL r éri m.b tda Val L .co n ign sig s e De ld w.v ww

debate - rótulo :: 41

Bruno Porto Diretor da ADG Brasil e professor do Raffles Design Institute (Xangai, China) www.brunoporto.com

“Quando verdadeiro, o rótulo ou o portfólio ajudam o consumidor a entender o que ele vai comprar, em termos de tempo, dinheiro e resultado” “Rótulos são bons, quando verdadeiros.

dia, principalmente em se tratando de web,

E m u m p ro d u t o q u a l q u e r - d i g a m o s , u m

isso é delicado pacas, porque o que tem de

refrigerante -, se você retira o rótulo, o que

gente vendendo como seus projetos que

sobra é o produto em si. Você o consome e

não passam de um frila executado para uma

seu sabor não muda sem o rótulo, você gosta

grande agência ou clientes estrangeiros que

ou não. O rótulo apenas te ajuda a lembrar,

são apenas um amigo com um home-office na

da próxima vez, se é aquela experiência que

Europa, não está no gibi!

você quer repetir. Consumir um produto que

Quando verdadeiro, o rótulo ou o

você não conhece sem rótulo é arriscado.

portfólio ajudam o consumidor a entender o

Não há indicação alguma do que vem pela

que ele vai comprar, em termos de tempo,

frente, e em se tratando de negócios, não é

dinheiro e resultado. Analisar o portfólio

recomendado nem aí nem na China.

d o p ro f i s s i o n a l o u e m p re s a é e s s e n c i a l

Mas beber um treco só porque o rótulo

para saber se há, por exemplo, projetos

parece atraente pode dar uma ressaca braba

executados dentro de contextos semelhantes,

no dia seguinte, caso as informações no

ou o uso constante de um tipo de solução de

rótulo não sejam acuradas. E ressaca, em

maneira que esta já possa ser considerada

negócios, pode significar prejuízo, perda de

re p e r t ó r i o . E e n t ã o a v a l i a r s e i s t o s e r á

empregos, famílias sem sustento etc. Talvez

benéfico para aquele job específico. Amigo

valesse a pena ter lido a composição do goró,

cliente, consuma design responsavelmente e

a bula. Quem informa isso é, em grande parte,

não se impressione com rótulos, por que isso

o portfólio do profissional ou empresa em

qualquer designer razoável sabe fabricar.”

questão, mas há que saber lê-la. E, hoje em

42 :: debate - rótulo

André Stolarski Diretor de design da produtora carioca Tecnopop www.tecnopop.com.br

“Nada de rótulos, estilos, estigmas ou personalidades em excesso. Em seu lugar, procure manter a sua identidade em forma”

“Identidade sem rótulos. Personalidade, estilo, rótulo, estigma e identidade são as cinco palavras-chave que estão espalhadas por essa questão.

Cada uma delas tem um sentido diferente e os designers que lidam com marcas sabem bem disso. Por isso, vale a pena repassar essas noções uma por uma.

A noção de estilo implica em uma pré-determinação, em fazer com que os projetos tendam a comportar-se de uma certa maneira, independentemente de sua natureza. Se essa tendência for muito forte, o estilo se transforma em um rótulo. Se pensarmos no estilo como um elixir engarrafado e no designer como a sua essência, a noção de rótulo fica mais clara.

O estilo é algo que depende diretamente do designer. O rótulo, não. Ele está do lado de fora. Já o estigma é um rótulo que, de tão grudado, decalcou sua tinta na embalagem. E ela será difícil de tirar, mesmo se o designer quiser.

Se essas garrafinhas venderem bem e ganharem popularidade, seu produto, o designer, vai se tornar uma personalidade, vai ganhar fama.

Todas essas noções são atraentes, mas nenhuma é suficiente. Todas podem fazer surtir efeitos benéficos, mas causarão diversos efeitos colaterais caso sejam superdosadas. Isso porque todas elas são formas restritas de atacar o problema da identidade, que é bem mais complexo e interessante.

Por isso, nada de rótulos, estilos, estigmas ou personalidades em excesso.

Em seu lugar, procure manter a sua identidade em forma. Qual forma? Uma forma saudável e equilibrada de a imagem existir e se comportar em relação aos seus referentes: os designers, suas obras e seus planos para o futuro.”

debate - rótulo :: 43

Participação dos assinantes Design comercial ou alternativo: onde você se encaixa?

Mariano Carvalho mariano@maiscriativo.com.br

Por que não transformar o alternativo em um pouco comercial, dando uma aparência mais estratégica e consolidada para tal design? Ou um design comercial mais atrativo, com inova-

Vencedor!

ção atraindo ainda mais os clientes? Utilize um pouco de cada, na medida certa, e você terá um cliente satisfeito.

Prêmios: 1 pendrive (Patrocínio: SiWeb), 1 ano de hospedagem grátis (Patrocínio: PlugIn), Consultoria de Webmarketing (Patrocínio: Acessa Host) e Livro “Tempo é Lucro” (Patrocínio: X25)

Wagner Gonçalves falecom@wagnergoncalves.net

Procuro sempre me encaixar tanto no alternativo como no comercial, afinal estamos cada vez mais integrados na sociedade, apresentando soluções de comunicação visual para um público

2º lugar

cada vez mais exigente.

Prêmio: 3 meses de hospedagem grátis (Patrocínio: Digiweb)

Joana Paula joana_selas@hotmail.com

Ora no design comercial, ora no alternativo, nos encaixamos nas necessidades e perfil do cliente e do público-alvo do site e/ou outras aplicações desenvolvidas.

Ricardo Ramirez digital@iguassudigital.com

Encaixo-me no design comercial, onde as tendências variam de cliente para cliente, as linguagens são distintas, os ramos variados, mas o objetivo é o mesmo: usabilidade, navegabilidade fácil, relacionamento com cliente direta e logicamente lucro.

Assinantes ganham descontos exclusivos em cursos e empresas de hospedagens. Confira no site!

Se você é assinante, participe desta seção pelo site www.revistawebdesign.com.br

44 :: e-mais - pregnância

Pregnância: saiba como trabalhar a organização visual na web A tela ainda está em branco, o cursor do mouse pisca cada

- cor, tipografia e animações, por exemplo. Além disso, con-

vez mais acelerado e à sua volta uma dezena de informações

ceitos como o da pregnância servem para que os designers

aguardam para serem agrupadas visualmente na montagem de

possam dar um passo maior em direção à forma criativa de

um layout. Assim, na etapa de concepção de uma interface de

desenvolverem seus projetos em design para web. Isso porque

um site, os conceitos de pregnância vão ajudá-lo a definir da

tenho visto muitos sites excelentes, porém com o mesmo visual.

melhor maneira a organização visual de seu projeto.

Parece-me que há pouca ousadia neste sentido - claro com

“Pregnância visual é a característica que determinado

algumas experiências interessantes -, mas no campo dos sites

elemento visual tem de se destacar em meio a outros. Ou seja,

comerciais tenho encontrado muitas interfaces iguais umas às

tanto em projetos impressos quanto digitais, a pregnância está

outras”, aponta Cereja.

presente, em maior ou menor grau, nos diversos recursos visuais

Influências na organização visual de um site

que os compõem”, explica José Ricardo Cereja, coordenador

No livro “Gestalt do Objeto”, o professor João Gomes Filho

do setor de design do Colégio Santo Inácio (RJ) e professor de

aponta que a pregnância da forma está diretamente ligada a orga-

Computação Gráfica da PUC-Rio.

nização formal do objeto. Trazendo esta realidade para a internet,

Falando sobre as principais diferenças na aplicação dos

quais fatores influenciam na organização visual de um site?

conceitos de pregnância em relação aos projetos impressos e

“Acredito que a questão central de um site deva ser a

digitais, o professor destaca a importância do entendimento

usabilidade. Assim, a pregnância será usada a seu favor. Desse

sobre o comportamento do usuário. “Posso dizer que a pregnân-

modo, todo o design da interface deve considerar a hierarquia

cia visual tem ‘presença’ maior no meio impresso, interferindo

das informações e a facilidade com que o usuário consegue

mais na percepção do leitor, causando sensações agradáveis ou

identificar a informação que está buscando. O estudo da

não, dado o tempo em que se detém para realizar determinada

pregnância é essencial desde a fase de definição do layout,

leitura da peça gráfica. Ao passo que, no ambiente virtual, estas

pois, muitas vezes, várias informações diferentes ‘brigam’ pela

sensações são diluídas, tanto pela dinâmica do movimento dos

atenção do usuário, sem que as mais importantes consigam se

olhos seguindo o cursor percorrendo os focos de atenção e

destacar a contento. Isso acontece freqüentemente em web-

grupamento de informações na interface, além é claro do tempo

sites de baixa pregnância visual. É um tormento para o visitante

de permanência e percepção visual determinada pela dinâmica

encontrar o que está procurando, o que pode desestimulá-lo

da navegação”.

a continuar a visita”, alerta Lígia Fascioni, doutora em Gestão

Diante disso, de que forma podemos justificar a aplicação

Integrada do Design (www.ligiafascioni.com.br).

dos conceitos de pregnância na criação e no desenvolvimento

Para o professor Cereja, esta questão deve ser analisada a

de um site? “Eles são fundamentais, porque auxiliam a impor-

partir de três vertentes principais. “Poderia aqui dissertar sobre

tante tarefa de hierarquizar informações visuais na interface. É

os fatores de cada um dos elementos clássicos da organização

um ótimo conceito em torno do qual se pode tomar decisões

visual de um site: fotos, desenhos, ícones, tipografia, logotipo,

importantes sobre o uso de outros elementos conjuntamente

texto, animação etc. No entanto, prefiro agrupar estes elementos em três categorias - imagens, texto e vídeo - para dizer que

e-mais - pregnância :: 45

o resultado final ou os fatores de relevância devem considerar

elemento tem intra-relações visuais e que estabelece relações

o equilíbrio entre os elementos que fazem parte destes três

com os outros elementos. Ou seja, um logotipo, por exemplo,

grupos. Obviamente, considerando os diferentes níveis de

mantém em seu próprio desenho relações de pregnância inter-

importância na composição da imagem final que é percebida

nas entre sua cor, sua forma e sua tipografia. Daí, então, ele vai

pelo usuário. Isso porque o usuário percebe uma interface como

relacionar-se com os outros recursos visuais presentes e deve

uma grande massa de forma e cor antes de pôr atenção em um

se destacar mais ou menos tanto quanto haja equilíbrio entre

determinado campo visual ou informação. É neste momento

eles”, destaca Cereja.

que a pregnância visual se faz presente, em ritmo crescente,

Um exemplo deste cenário está presente na aplicação de

da percepção geral do usuário para a percepção específica de

ícones em uma interface. “Pregnância de ícones é um capítulo à

determinado conjunto de informações visuais”.

parte, pois eles geralmente possuem tamanho reduzido e estão

O que determina uma boa pregnância?

próximos uns dos outros. Nesse caso, a identificação da forma

Buscar harmonia e equilíbrio no uso dos principais elemen-

é essencial para a usabilidade”, ressalta Lígia.

tos visuais (fotos, desenhos, ícones, tipografia, logotipo etc.) é

Limites em sua aplicação

apontado como um dos principais caminhos para se atingir um

Na edição de janeiro de 2007, quando abordamos

bom grau de pregnância em um site.

os conceitos da Gestalt, Luli Radfahrer apontava que as

“Todos eles com a possibilidade de serem organizados

características básicas de uma boa pregnância combinam,

em planos visuais, de forma a manterem pregnância visual

ao mesmo tempo, o inusitado, que aguce a curiosidade do

de acordo com a hierarquia e relevância da informação a qual

observador, e a coerência, que não prejudique o processo de

estão ancorados. É muito importante não esquecer que cada

identificação e leitura visual do projeto.

“Muitas vezes, várias informações diferentes ‘brigam’ pela atenção do usuário, sem que as mais importantes consigam se destacar a contento” (Lígia Fascioni)

46 :: e-mais - pregnância

Dessa forma, alguns fatores vão determinar os limites na

e concluído por outra. Se puder deixar

aplicação dos conceitos de pregnância visual na web. “Os limites

algum recado para os designers é que

são sempre o conforto e o interesse do usuário. É permitido

se mantenham fiéis ao projeto inicial,

brincar e ousar, desde que o público-alvo tope, desde que essa

apesar das adaptações recorrentes

brincadeira seja interessante para ele, e, principalmente, se o

ao longo do trabalho. Para alguns

foco do site for entretenimento. Acredito que sites dedicados à

digo ainda: desenvolvam um projeto.

informação sejam mais limitados nesse aspecto e devam seguir

Porque sei que muitos não o fazem,

preceitos mais clássicos de organização da informação e boa

partem direto para o layout. Além

pregnância”, afirma Lígia.

disso, se a identidade visual do site

Além desses, não podemos esquecer da tradicional filoso-

é determinada e trabalhada com

fia do “menos é mais”, principalmente quando lidamos com um

qualidade desde o início, aumentam

meio que oferece amplas possibilidades tecnológicas. “Para

as chances do resultado final ser

mim, o principal limite é conseguir equilibrar as possibilidades

satisfatório”, argumenta Cereja.

tecnológicas que instigam o designer a ir mais longe com a eficácia em hierarquizar os elementos visuais no site. Costumo dizer que, em webdesign, ‘o menos é mais’. Isto é, invista na qualidade dos elementos visuais e não na quantidade deles na interface. Estes excessos podem prejudicar o resultado. O designer deve produzir pensando no usuário, considerando que ele não detém, na maioria das vezes, o mesmo conhecimento e cultura visual que ele. O designer deve conduzir o usuário pelas mãos por dentro do site. E isso se faz, antes de tudo, a partir das imagens para depois ser complementado com o conteúdo

Bibliografia recomendada - Arte e Gestalt: padrões que convergem Autora: Janie Rhyne Editora: Summus

textual. Portanto, trabalhar de forma adequada a pregnância dos elementos visuais na interface é uma tarefa que merece

- Arte e Percepção Visual

cuidado”, orienta Cereja.

Autor: Rudolf Arnheim

Erros mais comuns em sua aplicação

Editora: Thomson Learning

O primeiro deles parece ter se tornado comum pelo mercado. “Posso indicar o excesso de elementos e a baixa

- Gestalt do objeto

capacidade de síntese, mas imagino que esse seja um

Autor: João Gomes

problema global. Para se ter uma idéia, é possível detectar

Editora: Escrituras

essas características em sites de várias nacionalidades”, indica Lígia.

Outra falha a ser destacada envolve a “descontinuidade progressiva na construção da identidade visual do site”.

“O que quero dizer com isso é que tenho a impressão que alguns sites começam a ser desenvolvidos com todos os critérios projetuais, mas que, depois de um determinado

- Principles of Gestalt Psychology Autor: Kurt Koffka Editora: Harcourt

- Sintaxe da linguagem visual Autor: Donis A. Dondis Editora: Marins Fontes

ponto, passam a servir aos arroubos artísticos do designer que abandona técnicas e informações importantes. Em outros casos, parece que o site foi iniciado por uma equipe

Fonte: José Ricardo Cereja

e-mais - pregnância :: 47

“O designer deve conduzir o usuário pelas mãos por dentro do site” (José Ricardo Cereja)

48 :: e-mais - pregnância

Fatores relevantes para a organização visual de um site

ter significado universal, compreensíveis aos usuários.”

4) Vídeos e Animações

1) Logotipo

“Vídeos são um excelente recurso para quem sabe utilizá-los. É

“Considerando-o como símbolo visual de um conceito, é o que

muito difícil compatibilizar peso de imagens em movimento (o que

vai representar a identidade visual do site.”

também vale para as animações) com a dinâmica de navegação

2) Tipografia

de uma página. Por isso, recomendo muito critério na inserção de

“Texto também é imagem. Letras são signos que expressam

vídeos em sites. Da mesma forma, deve-se entender que uma anima-

significados e que, em conjunto funcionam de forma distintas

ção é um recurso que conta uma pequena história. Animações sem

(palavras). O cuidado com a escolha das fontes e seus tamanhos é

propósito tendem a frustrar o usuário e, conseqüentemente, com-

imprescindível, pois parte importante do sucesso da comunicação

prometer a avaliação do site.”

é determinada neste momento. Além disso, concomitantemente

5) Áudio

é importante o gerenciamento prático do conteúdo. Ou seja,

“Presente em profusão nos sites hoje em dia, pode ser con-

distribuir idéias de forma concisa, com títulos e subtítulos descriti-

siderado um item de organização visual. Isso porque a música

vos, listas, itens etc.”

provoca a formação de imagens na mente de quem a escuta.

3) Imagem

Sem entrar em detalhes científicos sobre este processo, aponto

“A qualidade e o equilíbrio entre imagens - fotos, desenhos, ícones

apenas que é extremamente incômodo ao usuário a repetição

- é necessária e desejável. É importante que a pregnância visual

contínua de trechos musicais nos sites, mesmo que haja a opção

destes elementos esteja de acordo com a proposta do site e com o

para se desligar o som.”

conteúdo disposto. Fotos devem ter qualidade, apelo estético e de

Fonte: José Ricardo Cereja

fácil carregamento; desenhos devem ser legíveis; e ícones devem

“Pregnância visual é a característica que determinado elemento visual tem de se destacar em meio a outros” (José Ricardo Cereja)

e-mais - pregnância :: 49

Exemplos de pregnância em sites - Ana Couto Design

- Natura

www.anacouto.com.br

www.natura.com.br

“O site é limpo, claro, didático e funcional, além de belo e elegante. Não à

“É coerente com a identidade da marca. Por ser claro e limpo, naturalmente

toa, eles são um dos maiores escritórios de branding do país: pregnância é

acaba resultando em um design com alta pregnância. É fácil de achar o que

tudo no design de marcas.” (Lígia Fascioni)

se quer e as opções são facilmente identificáveis.” (Lígia Fascioni)

- Eletrobrás

- Rolex

www.eletrobras.gov.br

www.rolex.com

“Concentra conteúdo para um usuário específico, mas que, no entanto,

“Gosto pela sofisticação com que os elementos visuais são trabalhados e

devido à organização dos elementos visuais e da hierarquia das informa-

pela pregnância presente em diferentes planos. É um bom exemplo da con-

ções, apresenta objetividade e clareza de forma a abranger um público

jugação de imagem, vídeo e texto de maneira elegante e fora do padrão

mais amplo.” (José Ricardo Cereja)

corrente.” (José Ricardo Cereja)

50 :: estudo de caso:: Pocket films

Um diário de viagens aberto às experimentações Imagine um roteiro de viagens, que inclua países como

aparelho - o que anos depois virou o celular de hoje, né?

México, Canadá, França, Noruega, Nepal, Cambódia e Japão?

Nessa época, comecei a fazer filmes portáteis, peque-

Pois bem, essas foram algumas das experiências vividas por

nos mesmo, até por questões de Hard Drive - tinha que usar

Juliana Mundim (www.mymilk.org).

pouca memória, pois não tinha o equipamento necessário,

Os ambientes, as culturas e as paisagens observadas foram

então fazia filminhos de tamanho 320x240, de poucos minutos

tantas, que acabaram servindo de inspiração para que ela criasse

de duração, e que só poderiam mesmo ser vistos na internet

o projeto “Pocket Films for Travelers”, ou “Filmes de Bolso para

e olhe lá, pois era 1999.

Viajantes” (www.pocketfilmsfortravelers.com).

No fim de 99, a idéia foi evoluindo para “Filmes

Neste bate-papo, Juliana vai nos revelar os detalhes envol-

de Bolso para Viajantes”, que era a de mostrar sempre

vendo a concepção e o desenvolvimento do site do projeto, que

estrangeiros. Um africano em Nova Iorque, um americano

contou com a participação de Zeh Fernando (www.zeh.com.br),

no Brasil, um norueguês na Austrália, um pássaro em

além de algumas curiosidades envolvendo suas viagens.

migração, turistas, refugiados etc. Aos poucos, o conceito

Wd :: No texto de introdução do projeto, você afirma

foi se transformando e hoje em dia ele mostra mais o olhar

que ele é um filme, mas não um filme no formato convencional

estrangeiro - que é o meu próprio (mas esse conceito ainda

no qual estamos acostumados a ver. Como surgiu a idéia de

pode ser encontrado no vídeo da Noruega ou no da Nova

montar um site que representasse os principais momentos

Zelândia, por exemplo).

de suas viagens pelo mundo?

A idéia sempre foi a de fazer um filme, mas acho o

Juliana :: Tive a idéia de fazer o Pocket Films quando

mundo muito cheio de coisas diferentes! Ele está em formação

morava em Nova Iorque. Inicialmente, fiz uma série chamada

constante. São muitas texturas, cheiros, pessoas, formatos e

“Films to go”, que eram filmes pequenos para levar para a

achei que um filme estático, como estamos acostumados, não

viagem (é possível ver o vídeo desta idéia no site; é o último

seria o caso para este projeto. Por isso, resolvi fazer um filme

deles dentro da seção VLOG - “When I first had this idea”).

diluído e desconstruído, como o mundo é - acontecendo tudo

Tinha pensado num device, um aparelho imaginário em que a

ao mesmo tempo ali on-line, pois a internet é um espaço vivo

gente comprasse os filmes na banca e colocasse dentro deste

e ativo, tão orgânico quanto a Terra.

estudo de caso - Pocket films :: 51

A web se assemelha mais com o mundo do que uma sala de cinema: as pessoas que navegam no site fazem seu próprio caminho, constroem seu filme em seus próprios tempos. A conexão com o público é mais fácil on-line. Uso textos, fotos, música, desenhos e vídeos para as pessoas juntarem as partes de um todo e chegarem as suas próprias conclusões. Portanto, falar do mundo em andamento dentro da internet fazia mais sentido para mim.

Wd :: Apesar da aparente simplicidade da interface, o site possui um grande acervo de áudio, texto e vídeo. Quanto tempo durou para você recolher todo o conteúdo apresentado neste projeto? E quais materiais você utilizou para a captação desses materiais?

www.pocketfilmsfortravelers.com

No caso do México foi uma grande colagem de fotos e desenhos. Dentro desta colagem, você vai descobrindo

Juliana :: Tenho viajado desde 2001, mas alguns

áudios e vídeos “escondidos” e a programação em Flash do

vídeos são de 1999. O material no site, neste momento,

Zeh foi importantíssima para a navegação e entendimento

foi captado até 2006. Neste ano, vou colocar os países

do “espírito mexicano” ali. E por aí vai!

que visitei nos últimos 11 meses. Viajo com uma câmera

Wd :: Sobre a interface, ela é um dos destaques pela

miniDV Sony VX2000, microfones, fios, canetinha, tinta,

sua originalidade, pois representa uma espécie de ras-

lápis de cor, cadernos e uma câmera fotográfica digital -

cunho do mapa-múndi, inclusive com a textura do papel

que era uma Sony Mavica, mas para o último ano comprei

e dos adesivos que unem os papéis do desenho. Quais

uma Panasonic FZ70.

foram as principais etapas para a sua modelagem? Você

Wd :: Ainda sobre o acervo, quanto tempo

iniciou o processo no papel e depois finalizou no compu-

você levou para definir o que seria publicado,

tador? Quais materiais foram utilizados em sua criação?

em qual formato e o processo de tratamento

Juliana :: Primeiro, abri um mapa-múndi bem grande

de todo este material?

e usei papel de seda para passar por cima, com lápis 2B

Juliana :: Venho produzindo esse ma-

mesmo. Para ter um clima de mundo em construção, quis

terial por alguns anos, então o processo de

fazê-lo mais orgânico e “handmade” (feito à mão), então

edição de material vai acontecendo na cabeça

colei os pedaços de fita crepe para juntar os blocos do

naturalmente, durante e após a captação. É impor-

planeta e “escaniei” aos poucos - até porque o meu scan-

tante ressaltar que esse é um projeto muito orgânico,

ner era bem menor do que o papel. Foi tudo feito à mão,

desde sua concepção até o formato do próprio site.

inclusive as fontes da página principal.

Desta maneira, tudo correu meio fluído e sem

Wd :: Você utilizou pequenas sinalizações para indicar

burocracias mentais. Além do que, conhecendo bem o

os lugares no qual existe algum tipo de registro, seja ele

material e o conceito do projeto, dá para ter uma idéia

fotográfico, audiovisual ou textual. Na apresentação de

do que entra ou não.

cada material, é possível perceber a utilização de diversas

Já sobre o processo de tratamento do material, isso

técnicas de criação, como colagem e ilustração. Quais fato-

varia. Se for foto, sempre trabalho cada uma no Photoshop.

res influenciaram na definição do uso de cada uma delas?

A mesma coisa vai para os vídeos, usando After Effects ou

Juliana :: São muitos fatores, mas acho que, no

Final Cut. Os desenhos que faço durante as viagens, às

fim, é mesmo o país somado a minha experiência den-

vezes, viram animações ou acabam no topo de alguma foto

tro dele. Eu me lembro do que estava sentindo no país,

para contar uma história, como no caso do Cambódia.

naqueles dias ali, sabe?

52 :: estudo de caso - Pocket films

Geralmente, tenho material de vídeo, fotos, desenhos e textos de cada país que vou. Às vezes, a idéia vem dentro do próprio país, ou só depois que olho para o material em casa. Às vezes, o material influencia também. Se o vídeo está melhor eu uso, se é a foto eu uso, se são os dois eu uso os dois, por que não?

O importante é dar pano para manga da imaginação de quem vê o site. Quanto mais informações eu der sobre as viagens, mais eles podem ter uma idéia do que foi visto e principalmente sentido.

Wd :: A família tipográfica utilizada no projeto varia entre fontes mais clássicas e algumas manuscritas. Quais estudos foram feitos para a definição da tipografia do site? E como ela se insere dentro do conceito definido para o projeto?

Juliana :: Decidi usar fontes diferentes no projeto para dar uma diferenciação entre os países. O mundo (ainda) é um pouco diferente entre si, então as fontes mudam para estabelecer esta fronteira mesmo, tipo aqui é outro país, são outras fontes etc.

Muitas das fontes foram feitas à mão, porque o projeto é um grande diário de viagens. A fonte à mão é para ajudar a passar essa idéia de coisa feita na estrada, às vezes dentro de um caminhão balançando (risos) ou na sala de espera de um aeroporto (como realmente algumas foram feitas - vide Vietnã e Inglaterra).

“Abri um mapa-múndi bem grande e usei papel de seda para passar por cima, com lápis 2B mesmo” (Juliana Mundim)

Wd :: Outro destaque do site é a qualidade na edição dos vídeos. Diante da experiência, você poderia nos dizer

Poderia falar que vídeos com muito movimento de câ-

quais são as particularidades na criação de vídeos que se-

mera são mais difíceis de serem vistos em baixa resolução,

rão apresentados exclusivamente na web? Em qual etapa

mas é besteira não mexer a câmera por causa disso, pois da-

do desenvolvimento do site a edição foi inserida?

qui a dois minutos estes problemas todos serão resolvidos.

Juliana :: Primeiro, fiz o esqueleto do site em um

Ou poderia falar que vídeos muito longos para inter-

grande quadro na parede, depois fui editando o material

net não funcionam, mas é outra informação incerta. Acho

de cada país. Alguns vídeos já estavam prontos, pois vinha

que, para criação em web, não podemos colocar muitos

editando nos últimos anos, outros foram feitos durante o

limites e regras, pois os problemas estão sendo resolvidos

making do site. Realmente varia.

todos os dias e a tendência é ficar cada vez melhor. Sobre

Não penso em vídeo para web na hora de criar. Penso só em vídeo. Acho que podemos até falar, hoje, nesse

especificações técnicas de Flash e velocidade de streaming, o Zeh sabe informar melhor.

momento, sobre o que faz um bom vídeo para web, mas é

Zeh :: Como a Juliana disse, os vídeos foram criados

uma informação muito volátil, pois vocês bem sabem que

sem o suporte final em consideração (o que foi o melhor

a web está se transformando todos os dias.

de qualquer forma): o site foi construído depois que todo

estudo de caso - Pocket films :: 53

o material já tinha sido criado.

Na hora de adaptarmos para web, tivemos de repensar como alguns vídeos seriam oferecidos - por exemplo,

“Atualmente, o Google Analytics é a melhor opção para análise de navegação em sites em Flash” (Zeh Fernando)

vídeos com muito movimento, com uma nitidez muito alta, ou com texto, acabaram sofrendo mais com a compressão

o carregamento do site é feito de maneira rápida, facili-

para web. Nesses casos, simplesmente optamos por com-

tando o período de navegação do usuário. De que forma

pactá-los com mais qualidade.

vocês conseguiram obter tal performance do site?

Wd :: Um aspecto interessante envolvendo os

Zeh :: O site foi construído em cima de um framework

vídeos está no design de algumas funcionalidades do

específico que levava em consideração uma grande quantida-

player, que segue uma linha gráfica baseada em traços

de de dados que teriam de ser carregados dinamicamente.

rabiscados. Quais fatores influenciaram nesta decisão?

Assim, materiais como seções específicas foram man-

Juliana :: Queria que o site parecesse mais orgânico e

tidas externamente e carregadas quando necessário, ten-

manual possível, como se ele fosse um grande caderno de

tando fazer um carregamento inteligente de forma escon-

rascunho, destes que a gente leva na mala da viagem para

dida sempre que possível.

fazer diário do que vê. Os players à mão foram desenhados

Da mesma forma, praticamente todo material carrega-

para dar a impressão de que rabisquei o vídeo em um papel

do é mantido escondido, “cacheado” localmente, dentro

e ele começou a acontecer.

do próprio Flash, para evitar que seções já visitadas ou

Wd :: Ainda sobre os vídeos, quais ferramentas foram utilizadas para a edição dos áudios e dos vídeos publicados no site?

Juliana :: Editei tudo no Final Cut Pro, usando o editor de som do próprio programa. Também uso o After Effects para animação e filtros.

conteúdos já vistos tenham de ser carregados.

Wd :: Diante da quantidade de conteúdo disponível, como vocês planejaram as atualizações do site? O uso de Flash ajuda nesta etapa de administração?

Juliana :: Acabei de chegar de outra viagem ao redor do mundo, que durou 11 meses. Durante este tempo, cap-

Wd :: Em termos de infra-estrutura tecnológica do

turei o máximo de vídeos, fiz fotos, escrevi textos e histó-

site, vocês escolheram o Flash como base para o seu

rias. Agora, vou começar a editar tudo e, à medida que for

desenvolvimento. Apesar do farto material disponível,

ficando pronto, vou subindo os novos países.

54 :: estudo de caso - Pocket films

“Flash não só foi a plataforma escolhida, ou a plataforma ideal, mas a única plataforma cabível” (Zeh Fernando) Zeh :: Atualizações são feitas de forma modular: no-

utilizam a plataforma HTML, existem inúmeros anali-

vos conteúdos - novos “países” - são produzidos externa-

sadores de log muito bons que vão te dar um panora-

mente, em separado, e adicionados ao framework original

ma geral do site, alguns até melhores do que o Google

do site com a inclusão de um ponto no mapa, sem a neces-

Analytics.

sidade de grandes mudanças no site original. Assim, uma

Mas sites em Flash são baseados num conteúdo mais

vez que o conteúdo de cada país tenha sido criado, é só o

etéreo, numa navegação menos comum, não mais baseada

caso de criar um novo filme em Flash, personalizado para

em arquivos específicos de “páginas”, por isso é neces-

cada país, e adicioná-lo ao site principal.

sária uma solução personalizada. O Google Analytics per-

Nesse caso, e em especial na forma como a navegação

mite que visitas sejam registradas através de Javascript,

e a visualização do conteúdo funciona, o uso do Flash ajuda

criando uma estrutura de navegação simbólica. Então, ele

imensamente. Dado o formato do conteúdo disponível no

é atualmente a melhor opção para análise de navegação

site, ele teria perdido quase todo seu significado se qual-

em sites em Flash.

quer outra tecnologia tivesse sido usada. Nesse sentido,

Wd :: Na edição de junho, apontamos como os proje-

Flash não só foi a plataforma escolhida, ou a plataforma

tos experimentais podem ajudar na evolução dos proces-

ideal, mas a única plataforma cabível.

sos de criação de um profissional. Pensando nisso, quais

Wd :: Analisando a codificação do site, percebemos

eram as expectativas em relação a este projeto?

o uso do script do Google Analytics. Por que vocês de-

Juliana :: Esse é um projeto com alvo mais emocional

cidiram utilizá-lo como ferramenta de métricas? E que

do que profissional. Foi feito por paixão pelas paisagens

tipo de retorno um site deste porte pode trazer para a

e populações somada a uma vontade enorme de mostrar

carreira de um profissional?

esse sentimento para as pessoas.

Juliana :: Quanto ao Google, o Zeh sabe responder

Porém, penso que existe uma conseqüência para

melhor - aliás, tive muita sorte do Zeh estar neste projeto,

qualquer coisa que a gente faça. Comunicando o que

porque ele é genial! É muito difícil responder essa per-

sentimos, acabamos obtendo retornos - tanto do público

gunta, porque esse site realmente não foi feito mirando

quanto de outros profissionais - o que é muito bom!

a carreira profissional. Para mim, ele funciona mais como

Zeh :: Existe uma grande diferença entre o trabalho

uma declaração de amor ao planeta - sem querer parecer

comercial, que é feito com algum objetivo específico (e de

“imagine-all-the-people” demais, mas é isso que ele é de

terceiros) em mente, e o trabalho experimental, mais pes-

verdade, mesmo.

soal, que é onde você define seus objetivos enquanto ain-

Fiquei feliz por terem muitas pessoas no mundo todo visitando e blogando o site por aí! E é lógico que isso tudo

da está se aproximando deles. Caminhando sem direção, talvez, podendo apreciar a paisagem como lhe convier.

dá certa exposição para mim e para o Zeh! Mas não rolou

Obviamente, este trabalho é muito mais da Juliana

um Pinky e o Cérebro na estratégia. Foram mais formas de

do que meu. No entanto, vejo o tempo que dediquei a ele

amar o mundo do que dominá-lo (risos).

como uma coisa mais pessoal, já que pude ter certa influ-

Zeh :: Valeu, Ju! O Google Analytics acabou sendo a

ência no modo como a coisa era feita, e estava trabalhando

opção mais óbvia, devido ao modo como ele pode se encai-

em prol de algo sem muita preocupação comercial, que ti-

xar bem em sites construídos em Flash. No caso de sites que

nha mais uma mensagem do que um slogan associado.

tecnologia na web :: 55

Tecnologia na web Wireframe: uma ferramenta eficaz para a construção de um site Talvez você não saiba, mas mesmo o simples trabalho de desenhar numa folha de papel o rascunho da interface

coordenador da área de experiência do usuário da Sirius Interativa (www.sirius.com.br).

de um site representa uma das principais etapas em sua

Que ferramentas devo utilizar?

constituição. Ao estruturar esta dinâmica, você passa a

Se a sua verba está curta para o investimento em fer-

desenvolver um processo conhecido como wireframe.

ramentas que possam ajudar no seu trabalho, a boa notícia

“Nele, lançamos mão apenas de traços em preto, de-

é que um wireframe pode ser produzido com custo baixo.

limitando áreas que vão sendo destinadas a determinados

“Sou a favor do papel e lápis, sempre! E, se necessário

objetos do sistema (imagens e funcionalidades contem-

(quando o projeto é muito complicado e grande), recortes e

pladas), como: logo, menu, chamadas, destaques, imagens,

colagens até chegar a um wireframe quase inquestionável.

além de busca, breadcrumbs, banners etc.”, explica Renata

Nesse ponto, migramos esses roughs para um programa

Zilse, professora de pó-graduação da PUC-Rio e UniverCida-

vetorial, como o Illustrator ou para o Visio, quando o siste-

de e sócia do estúdio dmp.br design (www.dmpbr.com.br).

ma possui muita interação com a equipe de programação

Assim, o wireframe vai exercer algumas características

(um comércio eletrônico, por exemplo)”, orienta Renata.

fundamentais no processo de criação e desenvolvimento

Para quem precisa entregar um documento mais for-

de um site. “A primeira delas é servir como base para o

mal, existem algumas opções no mercado. “Muitos amigos

designer responsável pela parte gráfica trabalhar, já que

utilizam lápis e papel para produzi-los. Acredito que isso

o wireframe foca em interface, interações, nomenclatura

seja suficiente. É claro que muitos clientes não vão com-

e descrição de áreas e elementos da tela. Outra função

preender a validade dessa técnica por estarem acostuma-

possível é utilizá-los em protótipos para pequenos testes

dos a receber entregas de caráter mais formal. Por aqui,

de usabilidade, como, por exemplo, testar qual a melhor

usamos o Axure ou o Visio para passar o wireframe para o

entre duas interfaces para uma mesma página do site ou

plano documental, o que propicia entregas com qualidade

como a interface se comporta no momento de uma intera-

estética e arquiváveis para uso futuro na manutenção dos

ção em AJAX, por exemplo”, diz Alexandre Saddi, designer

sites”, relata Fernando Aquino, consultor e co-fundador do

de interface do núcleo de aplicativos da Globo.com (www.

Núcleo de Experiência do Usuário da CTIS.

alexandresaddi.com).

Em relação à escolha da ferramenta mais apropriada, a

Além disso, sua concepção vai ajudar, principalmen-

dica é avaliar os atributos oferecidos por cada uma. “Temos

te, no andamento do projeto. “Apesar de ter como autor

muitas ferramentas no mercado que variam grandemente

principal um arquiteto de informação, a sua construção

em recursos e custo. Não faria um julgamento de valor

recebe o olhar do designer, analista de interface web, ana-

sobre elas, pois acreditamos que devemos selecionar as

lista de sistemas, cliente e outros perfis que interferem

que se mostrem as mais adequadas para uma determinada

no documento. É, portanto, uma referência central para

empresa e metodologia. Feito isso, esta passa a ser a esco-

o desenrolar do projeto”, afirma Sergio Carvalho, sócio e

lha certa. O que sugiro é preparar uma matriz comparativa,

56 :: tecnologia na web

“O wireframe é uma referência central para o desenrolar do projeto” (Sergio Carvalho)

no qual se devem listar todos os atributos mais relevantes

consenso é necessária para que as coisas que estejam no

ao seu contexto de uso e tomar uma decisão esclarecida

wireframe sejam passíveis de serem realizadas nas condi-

que não seja baseada apenas em opiniões externas. Esco-

ções de prazo e equipe disponível”, explica Fernando.

lher sempre a ferramenta mais apropriada para você e não

Já a prática vivida por outros indica que apresentar

para os outros. Na Sirius, usamos o Powerpoint, por sua

wireframes para aprovação do cliente pode não ser o ca-

praticidade, maleabilidade e ubiqüidade, e o Axure por ser

minho ideal. “A experiência que tenho é que isso não fun-

uma ferramenta que permite a construção de protótipos

ciona. O cliente não tem a capacidade de abstração neces-

navegáveis sem grande esforço”, declara Sergio.

sária para entender que aquilo será sua interface um dia,

Em qual etapa incluir o wireframe?

principalmente porque ele sempre está ansioso para ver

Entendidas as funções do wireframe e as ferramentas

pronto (um layout já com cores, o logo da empresa aplica-

disponíveis para o seu desenvolvimento, chegou o momen-

do, formas e tipos de objetos é sempre mais interessante).

to de apontarmos em qual etapa ele deverá ser utilizado.

O que considero mais eficiente - e temos feito no estúdio

“Logo depois de definidos os conceitos e primeiros rabis-

- é apresentar ao cliente as telas já layoutadas - com todos

cos e antes do design gráfico. Vale lembrar que não é ne-

os elementos e objetos do sistema já definidos - e discutir

cessário elaborar wireframes para todas as páginas de um

dúvidas pertinentes a ele e questões encontradas quando

site. Normalmente, por questões de prazo e recursos, são

ainda nos wireframes”, argumenta Renata.

elaborados os wireframes das principais páginas e daquelas

Quais são as vantagens no uso de wireframes?

onde existem potenciais problemas de interface/interação

A primeira delas envolveria o fato de o projeto passar

com o usuário. Estes são tomados como base para o resto

por uma série de experimentações. “Wireframes são como

do site e, eventualmente, problemas pontuais são tratados

esboços: fundamentais no processo de desenvolvimento. É

e resolvidos rapidamente”, diz Alexandre.

onde estamos mais livres para tentar, é parte fundamental

Alguns especialistas indicam o uso da metodologia co-

do trabalho! Mas, assim como existem designers gráficos

nhecida como desenvolvimento iterativo. “É assim mesmo

ou de produto que não traçam mais uma linha no papel (vão

que se escreve, pois se refere à iteratividade do processo,

direto para o computador), existem designers de sistemas

e não interatividade nas ações. As versões iniciais dos wire-

interativos que não passam pelos wireframes. Acho que,

frames devem surgir na fase de concepção dos projetos, lá

em ambos os casos, vai fazer falta depois. Um retrabalho

no comecinho mesmo. Conforme o projeto for acontecen-

numa fase pós-aprovação de layouts ou, pior, após o início

do, o wireframe deverá passar por sucessivas atualizações

da programação será bem mais comprometedor em relação

até estar suficientemente maduro: aprovado por clientes

a prazos e custos estimados”, alerta Renata.

e testado junto aos usuários. É importante que o arquiteto

Outros aspectos importantes passam pelo foco na es-

trabalhe centrado no usuário final, sem deixar de mediar

truturação do trabalho e o tempo disponível para possíveis

a relação entre desenvolvedores, montadores, designers,

ajustes. “Discutir um projeto em cima de um wireframe leva a

arquitetos, equipe de usabilidade e de gerenciamento do

um foco total na interface, interações, nomenclatura, conteú-

projeto. Essa participação multidisciplinar em busca de

do e funcionalidades. Já se a mesma discussão fosse feita em

tecnologia na web :: 57

nível médio

cima de um layout gráfico já finalizado, com certeza o assunto iria cair em tipografia, cores e outras questões no momento errado, podendo deixar questões muito mais importantes de lado. Outra vantagem é que a velocidade de reação em ajustar uma interface em wireframe é muito maior se comparada a uma tela de layout gráfico”, aponta Alexandre.

Wireframe engessa o processo de criação?

A possibilidade desta afirmação se tornar real acontecerá quando os processos de arquitetura de informação e design não estiverem em sintonia. “Não vejo como um designer pode prejudicar o trabalho de um arquiteto da informação ou vice-versa, se ambos trabalham em sintonia e juntos buscando um objetivo único: sucesso no resultado do trabalho. E isso significa: bons índices de usabilidade, eficiência e eficácia de uso, boas taxas de retorno e, se possível, muitos elogios. Da mesma forma que um programador ou analista de sistemas não joga contra. Numa equipe coesa, multidisciplinar, a participação conjunta só tem a contribuir. O problema é quando o projeto segue uma linha de produção, onde as etapas começam e se encerram antes ou depois da anterior; quando não existe discussão durante e entre as fases; ou ainda quando os membros das equipes não se comunicam”, constata Renata.

Até porque o desenvolvimento de um wireframe não precisa incluir os elementos visuais que serão definidos pelo designer. “Não são poucos os autores que afirmam que o wireframe deve focar apenas na parte de arquitetura do site, não entrando em detalhes do plano estético. O wireframe não precisa ter cores, gráficos e imagens. A diagramação do wireframe não precisa ser absolutamente seguida pelo designer, que deve apenas respeitar o caráter informacional e funcional das coisas. Trabalhando com esse nível de liberdade, não há motivo para queixas”, orienta Fernando.

Para quem ainda duvida desta realidade, Sergio Carva-

58 :: tecnologia na web

“O wireframe não precisa ter cores, gráficos e imagens” (Fernando Aquino)

lho cita um caso recente ocorrido em um projeto desenvolvido pela Sirius. “Buscamos que este documento receba

Bibliografia Recomendada

a interferência de outros profissionais, de outros olhares, que adicionam a ele mais valor. Desta forma, o documento passa a ser um recurso natural para o trabalho de concepção gráfica. Uma referência, e não um conjunto de regras imutáveis da interface. Na fase de design, o arquiteto vai

- Blueprints for the Web Autora: Christina Wodtke Editora: New Riders Press - Emotional Design

colaborar com o designer para que as suas visões possam

Autor: Donald Norman

convergir na construção de um ambiente de interação que

Editora: Basic Books

reflita de forma apropriada os valores da marca e crie um ambiente de interação que atenda de forma precisa aos

- Information Architecture for World Wide Web

atributos estabelecidos para a interface no plano de pro-

Autor: Peter Morville e Louis Rosenfeld

jeto. Recentemente, construímos uma proposta de inter-

Editora: O’Reilly

face para uma intranet onde a intervenção do designer foi significativa e ajudou a melhorar, e reforçar, a visão

- The design of everyday things

proposta em wireframe. Na verdade, esperamos que isto

Autor: Donald Norman

aconteça em todos os projetos, que o wireframe seja uma primeira camada a partir da qual outras camadas, fruto de uma intervenção multidisciplinar, possam ser adicionadas até a construção da interface final”.

Editora: Currency - The Elements of User Experience Autor: Jesse James Garrett Editora: New Riders Press - The Inmates are running the asylum Autor: Alan Cooper Editora: Sams - The Invisible Computer Autor: Donald Norman Editora: The MIT Press Fontes: Alexandre Saddi, Fernando Aquino e Renata Zilse

tutorial :: 59

Actionscript - Parte 4 Neto Leal Programador Flash há sete anos (www.netoleal.com.br), Adobe Certified Professional and Instructor. Atua na AgênciaClick em São Paulo.

Trabalhar com dados dinâmicos é essencial em sites ricos.

Mas, como nosso tema aqui é OOP, vamos dar uma olhada em

A possibilidade de criar interfaces que se ajustam ao seu con-

como utilizar práticas de OOP para tornar esse processo de

teúdo pode tomar um pouco mais de nosso tempo durante o

leitura/consumo de dados em XML mais fácil, estruturado e ma-

desenvolvimento, mas depois o retorno é imenso quando é pre-

nutenível. No artigo da edição passada, mostrei como vincular

ciso fazer modifi cações de conteúdo seja ele visual, sonoro ou

classes personalizadas com símbolos modularizando comporta-

textual.

mentos de objetos visuais. Hoje, ainda utilizaremos essa prática.

Hoje, existem várias formas de se trabalhar com dados

Vamos começar então criando nosso arquivo FLA.

dinâmicos em Flash. Você pode usar arquivos de texto simples em txt; pode usar também páginas dinâmicas em ASP, PHP,

Temos um componente List e aci-

CF, JSP para gerar texto simples; pode usar arquivos XML (es-

ma dele um texto estático indicando

táticos ou dinâmicos); pode consumir WebServices, trabalhar

“Acessorios”. Peço que nomeie o List

com Flash Remoting, Flash Media Server, entre outros. Dessas

com o seguinte nome: lsAcessorios. Em

maneiras de consumir dados dinâmicos em Flash, talvez a mais

seguida, selecione ambos o texto e o

popular seja o XML.

List. Converta-os em um único símbolo

Se você nunca usou XML, adianto que não é preciso ter conhecimentos muito avançados para conseguir trabalhar com

utilizando as seguintes configurações na caixa de diálogo Convert to Symbol.

esse formato. XML é um documento de texto simples baseado em TAGs (da mesma forma que é o HTML) e que é usado para

Note que, no momento em que

portar dados e integrar tecnologias diferentes através de um

transformamos em símbolo, já deter-

formato comum. Este artigo não visa entrar em detalhes sobre

minamos as configurações de Linkage

XML, XSL e tecnologias relacionadas. Tenho certeza que se você

para o símbolo. Recordando o que foi

precisa de mais familiaridade com XML poderá facilmente en-

visto anteriormente, o campo AS 2.0

contrar mais informações “googlando” na web.

class, vincula o símbolo com uma deter-

Se você é um desenvolvedor ActionScript há algum tempo,

minada classe que pode ser criada por

é bem provável que você já tenha usado XML em trabalhos seus.

nós. Nesse caso, a classe Acessorios no

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

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

www.easymailing.com.br

tel. 55 51 3061.0636

60 :: tutorial

package com.netoleal.revistawd.visual ainda será criada mais na frente.

Vejamos então o arquivo XML a ser usado nesse exemplo: <?xml version=”1.0” encoding=”UTF-8”?> <acessorios> <acessorio id=”1” nome=”Relógio”/> <acessorio id=”2” nome=”Colar”/> <acessorio id=”3” nome=”Brinco”/> <acessorio id=”4” nome=”Piercing”/> <acessorio id=”5” nome=”Anel”/> <acessorio id=”6” nome=”Chapéu”/> <acessorio id=”7” nome=”Cachecol”/> </acessorios>

Trata-se de um documento simples com um nó raiz chamado acessorios e vários nós filhos cada um com o mesmo nome, acessorio. Cada nó filho do nó raiz tem dois atributos: id e nome. Nenhum nó filho tem conteúdo. Convencionalmente, para se ter acesso ao valor Colar por exemplo, usaríamos a seguinte estrutura: var nome:String = docXML.firstChild.childNodes[ 1 ].attributes.nome;

private var no:XMLNode function XAcessorio( noAcessorio:XMLNode ) { this.no = noAcessorio; } public function get id( ):Number { r e t u r n N u m b e r ( t h i s . no.attributes.id ); } public function get nome( ):String { return this.no.attributes. nome; } }

Achou que seria muito código, hein? Enganou-se. Com isso já podemos gerar um objeto próprio a partir de um XMLNode com o padrão de nossos nós <acessorio>. Esta classe tem um método construtor que ao ser invocado recebe como parâmetro um XMLNode. Esperamos que este XMLNode venha com o formato que estabelecemos lá atrás no arquivo XML. Podemos ver que a classe tem duas propriedades, id e nome, ambas resgatando os valores homônimos entre os atributos do XMLNode que será passado através do método construtor da classe.

Método construtor tem sempre exatamente o mesmo

Essa é a forma mais comum. Você até já deve ter usado algo parecido. Mas concorda que é um pouco ilegível? Para alguém que nunca viu o documento XML carregado e ainda não parou para analisar seu código, fica um pouco difícil de entender a estrutura assim ao olhar de cara. Veja se não seria mais fácil se pudéssemos simplesmente escrever assim: var nome:String = acessorios.items[ 1 ].nome;

nome da classe e não deve nunca ter seu tipo de retorno informado. Métodos construtores são usados para realizar operações iniciais dos objetos “preparando o terreno” para o funcionamento geral dos objetos que serão instâncias dessa classe.

Saindo um nível dentro do XML, chegamos à estrutura principal. Na classe XAcessorio, conseguimos acesso aos atributos de cada XMLNode da nossa estrutura XML. Agora, podemos criar uma classe que dará acesso a todos os itens criando várias instâncias de XAcessorio. Chamaremos essa

Concorda que seria mais fácil? Então, esse é nosso objetivo. Criar um parser para este XML, de forma que tor-

nova classe de XAcessorios.importcom.netoleal.revistawd. dados.XAcessorio;

ne fácil a navegação através de sua estrutura de nós. Uma forma que seja inclusive possível de se escrever utilizando recursos de autocompletar que editores mais avançados, como o Flash Develop, são capazes de fazer.

Começaremos então de dentro para fora. O primeiro passo é “converter” cada nó filho do nó raiz em um objeto ActionScript próprio. Chamaremos cada nó desse de XAcessorio. Seguindo a estrutura dos nós, podemos dizer que cada XAcessorio terá duas propriedades. Uma chamada id e outra chamada nome. Assim, podemos criar a seguinte classe: class com.netoleal.revistawd.dados.XAcessorio {

class com.netoleal.revistawd.dados.XAcessorios extends XML { function XAcessorios( strXML:String ){ super( strXML ); this.ignoreWhite = true; } public function get items( ):Array { var res:Array = new Array; var nos:Array = this.firstChild. childNodes; var n:Number = 0; var t:Number = nos.length; var i:Number; while( n++ < t ){ i = n - 1;

62 :: tutorial

res.push( new XAcessorio( nos[ i ] ) ); } return res; } }

Tudo pronto com a nossa estrutura de dados. A classe XAcessorios herda todas as funcionalidades da classe nativa XML. Isso quer dizer que toda a capacidade de entender

Void { this.xmlAcessorios.load( url ); } private function mostraAcessorios( Void ):Void { this.lsAcessorios.labelField = “nome”; this.lsAcessorios.dataProvider = this.xmlAcessorios.items; } }

estruturas XML, carregar arquivos XML dinamicamente e tudo mais que a classe XML já tem, a classe XAcessorios também tem.

A classe Acessorios só possui um único método público: loadXML. Tornando esse método público, temos a

No método construtor da classe, já definimos o valor

possibilidade de usar no FLA, quantas vezes quisermos o

da propriedade ignoreWhite como true para que espaços

mesmo símbolo de Acessorios para carregar e exibir diver-

em branco entre os nós no documento XML não sejam inter-

sos arquivos XML diferentes que tenham a mesma estrutura

pretados como nós. A propriedade ignoreWhite foi herdada

que o original. Isso vai poupar muito tempo, não?

a partir da classe XML. A única propriedade excedente (além das que foram

Analisando um pouco mais a estrutura que temos, podemos chegar ao seguinte fluxo:

herdadas da classe XML) que a classe XAcessorios possui é a propriedade items. Essa propriedade no formato Array nos dará uma lista de objetos da classe XAcessorio contendo aquelas propriedades que criamos lá atrás (id e nome).

Ambas as classes XAcessorio e XAcessorios devem ser salvas dentro da seguinte estrutura de diretórios a partir da pasta em que for salvo o arquivo FLA: com/netoleal/ revistawd/dados as duas classes precisam estar em arquivos salvos com exatamente o mesmo nome da classe acrescidos da extensão as.

Finalmente chegamos a [ultima fase. Vamos exibir os

Para funcionar, precisamos somente nomear a instância

dados que preparamos na nossa interface. No primeiro pas-

do MovieClip que ficou no Stage na timeline principal. No

so desse artigo, criamos um arquivo FLA com um símbolo

meu exemplo usei o nome de instância: mcAcessorios. A

chamado Acessorios vinculado com uma classe chamada

seguinte instrução inicia todo o processo para exibir o con-

com.netoleal.revistawd.visual.Acessorios que ficamos de

teúdo do XML e deve ser escrita no FLA:

criar. Eis que temos o código para ela: import com.netoleal.revistawd.dados.XAcessorios; import mx.controls.List; import mx.utils.Delegate; class com.netoleal.revistawd.visual.Acessorios extends MovieClip { private var lsAcessorios:List; private var xmlAcessorios:XAcessorios; function Acessorios( Void ) { this.xmlAcessorios = new XAcessorios( ); this.xmlAcessorios.onLoad = Delegate.create( this, mostraAcessorios ); } public function loadXML( url:String ):

mcAcessorios.loadXML( “files/xml/acessorios. xml” );

Note que o arquivo XML está salvo dentro da pasta files/ XML/ a partir da pasta em que você salvar o arquivo FLA. Com isso, chegamos ao final de mais um artigo que fala sobre OOP e ActionScript. Algumas palavrinhas devem ter ficado obscuras para você como super, private, public, get. Elas serão tema do próximo artigo aqui na Webdesign.

Obrigado e até lá!

64 :: internacional

Julius Wiedemann Guilhermo Reis Nasceu e cresceu no Brasil, onde estudou Design e Marketing (sem terminar) até que teve a Especialista em de Informação Usabilidade. autor do Kit de Conhecimento sobre AI de oportunidade deArquitetura ir para o Japão.

Trabalhouecomo designerÉde revistas e jornais até se tornar editor (http://tinyurl.com/p4j6w).

Atualmente, é responsável por projetos e manutenções nos arte (e posteriormente editor) de uma editora japonesa.

Emcoordenar 2001, a editora alemã TASCHEN (www. websites do Banco Real. para ser o editor responsável pelas áreas de design e pop culture. Por lá, taschen.com) o contratou desenvolve o programa de títulos nas áreas de propaganda, graphic design, web, animação etc. reis@guilhermo.com J.Wiedemann@taschen.com

Copa do Mundo de 2014: a corrida está apenas começando Faz pouco tempo que o novo Ministério assumiu o comando e dentro de todas as ambições e planos que foram colocadas ao público, tem uma que pode fazer os corações brasileiros saltarem nos próximos anos. A Copa do Mundo de 2014. Como seria possível fazer o país inteiro participar da corrida? Afinal, futebol é algo que interessaria a muita gente, do Oiapoque ao Chuí.

Só tem um jeito: a internet.

Mas antes que comece a falar de planos, vamos pensar numa pequena parcela da verba de mais de um bilhão que o governo planeja destinar à publicidade em 2007, e o que isso, junto com o nosso talento na internet, não poderia fazer para nos ajudar a produzir uma corrente de energia, torcida e, melhor ainda, de conteúdo que dariam grande suporte à campanha. A questão é que não temos muito tempo. A decisão sobre a próxima Copa do Mundo, depois da África do Sul, vai sair no congresso da FIFA, já em 2008.

A América do Sul estaria bem cotada, mas hoje em dia eventos deste porte são disputados a tapa por todos os países, já que se tornaram um cartão postal de uma nação inteira. Exemplo disso são os sites que encontrei sobre eventos que ainda estão para acontecer, como www. beijing2008.cn e www.london2012.org, onde se pode acompanhar o desenvolvimento de toda a estrutura para as Olimpíadas em Londres e Beijing; www.southafrica2010.org, que propõe o mesmo para a Copa do Mundo na África do Sul. A má notícia é que não encontrei nenhum site que realmente tenha algo consistente sobre a corrida brasileira.

No dia 29 de setembro de 2006, o presidente da FIFA, Joseph Blatter, e o presidente da CBF, Ricardo Teixeira, se encontraram com o presidente Lula. Blatter disse na época que a realização do evento no Brasil só dependia do país, afirmando que “a bola está no campo do Brasil”.

Entregamos oficialmente os primeiros documentos à FIFA, no dia 13 de abril. Temos agora até o final de julho para completar todos os requisitos, inclusive com as garantias do governo brasileiro. Segundo o site da FIFA, as visitas de avaliação estarão acontecendo até setembro, e o resultado sai em novembro. Blatter também comentou em um evento que, depois da Copa do Mundo na Alemanha, os parâmetros da FIFA ficaram muito altos, já que o evento foi impecável (e eu morava em Colônia na época, uma das sedes, e estou de prova, além de ter ido a jogos em Berlim e Munique), e que se a América do Sul não oferecesse o mesmo nível, a FIFA teria que olhar para outras regiões.

Sei que, na prática, acabamos de entrar na briga, mas o único site que encontrei (www. brasil2014.org), infelizmente não é nada de impressionar. Num estilo bem amador, coloca apenas informações da mídia relacionadas ao evento. Precisamos mais que isso. Nessa época de user generated content, tenho certeza de que muitas pessoas teriam histórias fantásticas para contar e encantar o comitê da FIFA que estará fazendo logo suas visitas e relatórios. O Brasil pára completamente para as Copas do Mundo, não interessa onde ela esteja acontecendo. De álbum de fotos à entrevista, de depoimentos em vídeo ou em texto, temos o potencial de criar o maior portal de off-FIFA de todos os tempos. Podemos até convidar pela internet membros

internacional :: 65

“Nessa época de user generated content, tenho certeza de que

“É preciso criar as casas, os prédios, as praças e principalmente as placas de sinalização.”

muitas pessoas teriam histórias fantásticas para contar e encantar o comitê da FIFA”

do comitê da FIFA para escutar estas histórias nas nossas casas.

Nunca me esqueço de quantas pessoas, em várias partes do mundo, em época de Copa do Mundo, já me comentaram sobre a decoração que fazemos nas ruas, sobre o amor pelo futebol, sobre os motivos de sermos o celeiro de jogadores do mundo, e por aí vai. Para começar, temos cinco títulos, sendo que o primeiro, de 1958, ainda está na cabeça de algumas pessoas de forma viva. O último foi no Japão, em 2002. Fora isso, ainda temos mais duas finais que são parte da nossa história, em 1950, no Brasil mesmo, e na França, em 1998.

Por que temos chances reais nessa disputa? A FIFA tenta trabalhar com um sistema de rotação de continentes e, desde 1950, não sediamos uma Copa do Mundo. Somos a nação que representa o melhor do futebol. Nossos jogadores são adorados no maior mercado do mundo, a Europa, porque além de trazerem resultados, eles têm tido um comportamento excelente e são carismáticos. Hoje, o Brasil têm na Champions League, um número enorme de jogadores, superado apenas por um ou dois países, dependendo da temporada. A Nike, que criou a campanha mundial de futebol “Joga Bonito” em português, é um exemplo dessa força.

Tive a chance de entrevistar executivos de marketing da Nike, no quartel general europeu na Holanda, como também diretores de criação da agência Wieden & Kennedy. O argumento deles para usar o nome em português é de que o futebol brasileiro é o ícone do que é mais admirado hoje no esporte: jogar com beleza. Resultados, eles dizem, são sempre importantes, mas quando isso carrega junto à beleza, o resultado é o espetáculo. Mas, como o comentário de Blatter insinua, a disputa está mesmo aberta.

Com tudo isso em mente, vai aqui um apelo para empresas de internet e membros do governo, para que esses se unam e possamos criar um movimento na internet que possivelmente extrapolaria as fronteiras do nosso país e criaria potencialmente um incrível argumento para sediarmos a Copa do Mundo de 2014. A internet pode fazer mais uma vez a diferença. Sugestões, comentários e propostas, por favor enviar para redacao@arteccom.com.br.

66 :: webwriting

Bruno Rodrigues Guilhermo Reis Autor do livro “Webwriting - Redação & Informação para a web”, da editora Brasport. É consultor de Especialista em Arquitetura de Informação e Usabilidade. É autor do Kit de Conhecimento sobre AI informação para a mídia digital da Petrobras e titular da primeira coluna sobre Webwriting do mundo, (http://tinyurl.com/p4j6w). Atualmente, é responsável por coordenar projetos e manutenções nos hoje veiculada na revista on-line ‘Webinsider’. Ministra treinamentos de Webwriting e Arquitetura da websites do Banco Real.

Informação no Brasil e no exterior. reis@guilhermo.com bruno-rodrigues@uol.com.br

Todos podem escrever - mesmo!

Mexer com a formação do profissional de Comunicação Social é meter a mão em um vespeiro. Se o caso é o diploma de Jornalismo, então, é como atear fogo ao vespeiro e ainda sair com queimadura de terceiro grau. Já vi muita gente que eu considerava calma e ponderada quase babar de ódio com a simples menção do assunto.

Como jornalistas, designers, publicitários, sabemos que é preciso entender do riscado para trabalhar na área. Tenho 40 anos, quase 20 de profissão, e se nesse tempo já ficou claro para mim que não é qualquer um que pode executar bem um trabalho na área de Comunicação, imagine para quem tem 50 anos de estrada...

Não é fácil nem rápido atuar na área. É seleção natural, e a grande maioria sabe disso.

Em resumo, pelo menos para mim, a vivência já responde a questão. Ou seja, não vou me estender, porque este aspecto da discussão é tão bobo e óbvio, que não vejo razão para gastar o teclado. Talvez, um dia, em uma mesa de chope, se faltar assunto.

Ao trabalhar com internet, ficou mais fácil enxergar o que realmente vale a pena investigar. Na mídia digital, muito do que vale para TV, rádio, revista e jornal não se encaixa. Quem escreve para um site de uma empresa, lidando com material institucional, precisa ser jornalista?

Então ser jornalista é... Escrever? Mesmo? A atividade se diluiu tanto ao longo dos anos que terminou como escrita?

Há algumas colunas disse que escrever não é dom divino. As reações foram pesadas. Pelo menos dois leitores reagiram indignados, e afirmaram que, sim, escrita não é para todos, é vocação, é inspiração, é mexer com as entranhas, é sofrer, é...

(Peraí... Mas isso não é Literatura?)

Quem tem tempo para pensar em inspiração, quando o fechamento do jornal se aproxima perigosamente, e até mesmo na web, quando há vários textos para um hotsite que precisa ser entregue no dia seguinte? Há espaço para tanto “subjetivo”?

Em 2000, participou de um de meus cursos uma simpática profissional do Sindicato dos Jornalistas do Rio. Já na época, a questão do diploma na web veio à tona. Com toda a calma de quem observa as mudanças sem medo, ela foi clara: - Jornalismo é apuração, não é redação, gente...

Isso! Então chegamos à questão que vale a pena perder tempo, gastar teclado e varar a madrugada tagarelando em uma mesa de chope. Apuração é talento. Mas um talento que se aprende. Ou deveria, se as faculdades de Jornalismo centrassem seus esforços nesta direção.

Não coloquem a culpa nas universidades e nos professores, apenas. Levante a mão o jornalista que não optou pela profissão porque escrevia bem. O ruído começa do início.

(Intervalo: não preciso dizer aqui que é óbvio que o texto do redator precisa ser bom,

webwriting :: 67

“Há algumas colunas disse que escrever não é dom divino. “É preciso criar as casas, os prédios, as praças e principalmente as placas As reações foram pesadas. Pelo menos dois leitores reagiram de sinalização.” indignados”

preciso? Então está dito) Não dá para argumentar pela escrita. Argumente pela apuração. Ela é a alma do jornalismo, seja na web ou na mídia impressa, no rádio ou na TV. A apuração é digna, ela se aprende, se desenvolve. É ela que coloca a atividade jornalística no patamar de uma Medicina, de uma Engenharia.

A sociedade não se move sem a apuração - ou andaria às cegas, sem ela. Batalhemos por Faculdades de Apuração, então! A redação foi o meio que a apuração encontrou para a notícia chegar ao leitor. E só. O resto diz respeito a ego, uma imensa armadilha...

Campanha Weberê para a festa de São João Colabore doando brindes e brinquedos para que o nosso arraial fique mais iluminado.

Para doação de brindes, brinquedos e alimento, entre em contato: arteccom@arteccom.com.br

Magê-Malien - Crianças que Brilham Faça parte você também deste projeto.

Para doação de alimento entre em contato: arteccom@arteccom.com.br Informações: www.arteccom.com.br/ong

68 :: marketing

René de Paula Jr. Doula sênior de projetos interativos. É profissional de internet desde 1996, passou pelas maiores agências e empresas do país: Wunderman, AlmapBBDO, AgênciaClick, Banco Real ABN AMRO. É criador da “usina. com”, portal focado no mundo on-line, e do “radinho de pilha” (www.radinhodepilha.com), comunidade de profissionais da área. rene@usina.com

Uau sem culpa Quantas vezes por semana alguma coisa na web te faz dizer em voz alta “uau, que legal!”?

Convenhamos: poucas. O Google Street View (http://maps.google.com/help/maps/streetview/ index.html)? O Orkut com feed RSS? Os demos do Silverlight (www.microsoft.com/silverlight)?

Well, é o que eu consigo me lembrar assim de bate-pronto. Lembro desses e... do site da HBO Brasil (www.hbo-br.tv).

Um aparte: eu sou um ex-HBO. Eu fui produtor de programas na HBO por um ano (programas de TV, bem-entendido, não programas de computador :) Quando foi isso? 1996?

Caramba, 11 anos. Foi quando eu larguei TV e comecei a trabalhar com internet. Faz tempo, mas devo ter na gaveta um esboço maluco que fiz na época sugerindo como deveria ser o site da HBO, embora eu não tivesse a mínima idéia de como fazer aquilo. Delírio total. Aliás, o que fiz foi um wireframe sem nem mesmo sonhar que havia wireframes no mundo. Vou ver se encontro essa relíquia, quero ver se delirei demais.

Voltemos aos nossos uaus. Outro dia, eu vi um não-geek, não-digerati dizer “uau, quele-gal!”. Corri pra ver, claro, e dei de cara com... O site da HBO. Uau, eu também disse. Fiquei impressionado. Pareceu-me mais útil, bem-resolvido e sofisticado do que qualquer outro site brasileiro de TV, sobretudo TV a cabo. Logo de cara, o site mostra o título do programa que está passando naquele momento e dá uma indicação visual do tempo restante. Logo abaixo, um espaço enorme para chamar algum destaque da programação e abaixo disso uma versão condensada da grade. Para cada filme destacado, a indicação de quando vai passar novamente. Bacana.

A home por si só já dava conta de um monte de cenários de uso possíveis: saber o que está passando, saber o que o canal tem de melhor, saber o que vai acontecer na semana etc. Pra quem, como eu, que sonhara com um site bacana fazia 11 anos, aquilo foi um deleite.

(Um aparte: isso não é jabá não. Não sou mais HBO e o site nem deve ter sido produzido no Brasil. Estou só compartilhando um uau pessoal e intransferível, mesmo) Fiquei tão empolgado, que imediatamente disparei um e-mail elogioso pra uma comunidade/ lista que eu administro, o radinho de pilha (www.usina.com/radinhodepilha). Eu sempre faço isso: se eu gosto, compartilho.

Well, pelo visto minha dica não era tãããão legal. Visto pelos olhos dos mais puristas, o site quebrava tantas regras e cânones (acessibilidade, tableless design etc.) que meu uau pareceu uma blasfêmia. Ouvi uma saraivada de críticas técnicas: uso excessivo de imagens, fontes pouco legíveis e mais um rol de pecadilhos e crimes e erros e atrocidades. Ninguém achou “legal”.

Como EU poderia ter indicado algo tão pecaminoso, me disseram?

Tentei mudar o rumo da discussão, tirando o foco da questão herética: “mas, não é beeeeem legal? Comparem com os outros!”. Não funcionou. O site levou tiro de todo lado. Quase me arrependi de ter extravasado meu entusiasmo. Eles tinham razão, havia uma série de pontos de melhoria.

Mas, apesar de tudo, apesar da patrulha ideológica e da santa inquisição html-ística... Eu continuava

marketing :: 69

“Por que será que coisas não necessariamente impecáveis provocam ‘uau’? E por que será que tantas coisas sacrossantas provocam bocejos na grande massa?”

achando beeeeeeeem legal. Minha empolgação resistiu à fúria dos cruzados. Devo ser um herege mesmo.

Merecendo ou não, é bem broxante levar baldes de água fria, ainda mais quando você está tão animado.

Mas... no final não me arrependo. Pecado é pecado, mas “uau” é milagre :) E eu adoro milagres.

Pensemos no Orkut: mesmo nos seus tempos mais instáveis, mesmo na sua interface mais tosquinha, ele foi fonte de zilhões de “uaus”. “Uau, olha quem eu encontrei!”, “uau, tem mais gente que detesta salsinha!”. Pense no... YouTube, inicialmente tão feinho e desengonçado: “uau, que legal, dá pra colocar no meu blog!”, “uau, que legal, dá pra gravar direto da webcam!”.

Como conseguir “uaus”? É uma proeza técnica, uma pirueta tecnológica ou será que uaus têm outra origem?

Por que será que coisas não necessariamente impecáveis provocam “uau”? E por que será que tantas coisas sacrossantas provocam bocejos na grande massa (RSS, por exemplo)?

Eu tenho uma pista: o uau acontece quando damos de bandeja para o usuário algo singelo e quase óbvio que ele nem sonhava ser possível, algo que, mesmo que perguntássemos, ele não seria capaz de formular. O uau acontece quando criamos algo cujo valor salta à vista, que encanta à primeira vista, que oferece uma possibilidade imprevista, e que se encaixa na vida do usuário como uma luva. Uaus surgem quando temos o dom de pensar, sentir e sonhar como o usuário. Isso para mim é sagrado. Podem me crucificar, mas os outros pecadilhos... Eu bem que perdôo :)

70 :: publicidade on-line

Ricardo Figueira Vice-Presidente de Criação da AgênciaClick. Trabalha com propaganda interativa há mais 10 anos.

Acumula prêmios e participação como jurado em quase todos os festivais internacionais, incluindo CannesLion, London Festival, One Show NY e outros. É membro da Academia de Artes e Ciências Digitais de Nova Iorque e responsável pelas estratégias criativas da AgênciaClick.

Blog: http://ricfigueira.blogspot.com

The Brazilian Interactive O que o samba, o futebol e a propaganda interativa têm em comum? Sem swing, os três ficam sem graça. Talvez esse seja um dos motivos pelo qual o brasileiro se destaca mundialmente nessas três naturezas. Infelizmente, não entendo tanto de futebol quanto gostaria, de samba tenho uma pequena noção e sobre interatividade, passei os últimos 12 anos da minha vida ralando o suficiente para me atrever a contar um pouquinho dessa história.

A fama do criativo interativo brazuca começou em 2000, ano em que a publicidade on-line passou a fazer efetivamente parte integral da indústria da comunicação. Desde então, o Brasil não parou de exportar talentos para todos os cantos do mundo. Muitos fatores contribuíram para isso e é claro que os festivais internacionais foram as verdadeiras alavancas. Principalmente na época em que a comunicação interativa se resumia a banners, não por opção, mas por condição e maturidade de mercado mesmo - traduzindo ao bom e velho português, prazo e investimento em internet. E é aí que começa tudo.

Aqui entre nós, nessa época muita gente se recusava a fazer um anúncio de um quarto de página porque, nas palavras deles, “não dava layout”; fazer um banner de 468x60 então seria no mínimo uma brincadeira de mau gosto. Mas o desafio chamou atenção de muita gente que ainda não estava contaminada por aquela empáfia, mas por outro lado chamou a atenção dos criativos mais novos pelas possibilidades dinâmicas e interativas do meio.

Assim nasceu a escola criativa mais ousada e radical da comunicação brasileira: a escola dos banners brasileiros. O menor e mais sintético formato de anúncio do mundo com todas as restrições imagináveis e que durante muitos anos foram as únicas iniciativas interativas cabíveis dentro dos prazos e investimentos do nosso mercado.

Isso fez com que o criativo interativo brasileiro se tornasse o maior especialista em idéias simples, com direções de arte pertinentes e conceitos interativos fortes. Logo, o mundo passou a reconhecer e premiar banners “brasileiros” nos mais diversos festivais internacionais, porque como falei anteriormente ele de fato “swinga” muito mais do que a grande maioria. Cheguei até a ouvir recentemente alguns diretores de criação de outros países usarem a expressão “brazilian banner” como um adjetivo que se refere a peças simples, inteligentes e interativas. E se isso por um lado é muito bom, por outro é ruim porque virou estereótipo, e estereótipo se torna alvo fácil de crítica pela simples evidência.

Vejam o que aconteceu recentemente com a Crispin and Porter (www.cpbgroup.com), nos Estados Unidos. A Crispin é uma agência irreverente e tem em sua carteira de clientes várias marcas que estão em segunda posição dentro do seu segmento, ou seja, mais dispostas a arriscar e fazer barulho.

Com isso, toda campanha irreverente e ousada naquele país passou a ser adjetivada de “Crispin Campaign”, seja de lá ou não, e da Crispin mesmo não se espera outra coisa, tornando-a assim vítima do estigma criado pela própria evidência.

Visitamos outro cenário agora, na Europa, os malditos sites maravilhosos da Volvo. Quem em sã consciência e um pouquinho de experiência não reconhece um site feito por aqueles caras que passam

publicidade on-line :: 71

“A verdade é que o nosso mercado está evoluindo perceptivelmente, devagar, mas evoluindo”

mais de 12 meses num projeto e depois pelo menos um mês testando? Vou usar outro estereótipo para classifi cá-los: sites verdadeiramente “hollywoodianos”. Huuum, e tem, claro, os japoneses, não podia deixar de citá-los. A combinação entre criação, mercado e cultura desses caras, quando comparados ao resto do mundo, resulta numa grande estranheza, que às vezes dá muito certo e às vezes parece bizarro demais para a nossa cultura.

Poderíamos escrever várias páginas sobre os diversos estilos de criação-interativa ao redor do mundo ou até mesmo as diferentes tendências dentro de pequenos países como a Suécia e Holanda, mas não seria necessário tudo isso para dizer que agora não existe mais uma polaridade que torne um país indiscutivelmente muito melhor do que os outros em criatividade interativa. Existem sim vários mercados com condições específicas que geram diversidades criativas. Essas especialidades contribuem para que a comunicação interativa seja mais abrangente, mais completa e mais imersiva.

Enfim, toda essa movimentação criativa mundial dos últimos anos pra cá é interessante para fazer algumas reflexões. Por exemplo: qual seria o resultado da atuação de um profi ssional ícone europeu aqui no mercado brasileiro?

Ou um americano no mercado japonês? Ou ainda um japonês na Europa? E o brasileiro com a sua escola de banners e projetos “se vira nos 30”, como se sairia em outros cantos do mundo?

A verdade é que o mundo é cada vez mais “se vira nos 30” e demanda cada vez mais simplicidade e efi ciência, “grooving and swinging”. Mas, o melhor de tudo, e independente do que o resto do mundo pense sobre o estilo criativo brasileiro ou independente dos resultados dos festivais, a verdade é que o nosso mercado está evoluindo perceptivelmente, devagar, mas evoluindo. Impulsionado por vários fatores como investimento, resultado, mudança de comportamento do consumidor e, sobretudo por causa de gente desbravadora que está fazendo bem mais do que banner mesmo ainda se virando nos 30”.

Para terminar, quem quiser conhecer algumas peças que contam um pouquinho dessa história, é só entrar em http://ricfigueira.blogspot.com. Lá, postei uma série de banners e trabalhos que ajudaram a construir essa jornada e o reconhecimento da criatividade interativa no Brasil nos últimos anos. Divirta-se.

72 :: webdesign

Luli Radfahrer PhD em Comunicação Digital, já dirigiu a divisão de internet de algumas das maiores agências de propaganda e de alguns dos maiores portais do Brasil. Hoje, é Professor-Doutor da ECA-USP, Diretor Associado do Museu de Arte Contemporânea e consultor independente. Autor do livro ‘design/web/ design:2’, administra uma comunidade de difusão do conhecimento digital pelo País. luli@luli.com.br

“E agora, para onde?”

Depois de muito ralar, eles “chegaram lá”, seja lá onde for. Nome, salários, prêmios, reconhecimento etc. Como seria de se esperar, comemoram efusivamente. Lá pelas tantas horas da manhã, alguém bêbado acha tudo muito lindo, e considera cantar Raul Seixas. Para a surpresa de todos, o inconsciente se mistura às palavras e o manifesto surge:

Eu devia estar contente Porque sou webdesigner Numa agência respeitável E ganho uma bolada por mês.

Ah! Mas que sujeito chato sou eu Que não acha nada engraçado Tendências, Youtube, Web2, SecondLife Eu acho tudo isso um saaaaaaco!

Eu devia agradecer aos céus Por mandar bem como artista Eu devia estar feliz Porque consegui comprar um Powerbook MacIntel.

E olhar a pilha de RSS e podcasts Se sentir atolado Ter consciência que é humano, ridículo, limitado Que não vai conseguir ler tudo nem com um dia de 72 horas.

Eu devia estar alegre e satisfeito Por ter um Vale Refeição decente Depois de ter passado fome por dois anos Como escraviário da Criação.

Ah! Eu devia estar sorrindo e orgulhoso Por ter finalmente emplacado um hotsite Mas eu acho tudo isso monótono E um tanto quanto viciante...

Eu devia estar contente Por ter conseguido entregar o job no prazo Mas confesso abestalhado Que eu estou decepcionado.

Porque não foi difícil usar templates E agora eu me pergunto “e daí?”

A web tem uma porção de coisas grandes Pra conquistar, e eu não posso ficar aí parado.

Eu devia estar feliz pelo Chefe Ter me concedido o domingo à noite Pra assistir os sitcoms que downloadei...

E ainda acreditar Que fazer Propaganda Gera empregos e ajuda a Economia do país...

Eu que não pego tendinite Na frente de um monitor LCD Com o Gmail aberto, cheio de mensagens Esperando ser respondidas Porque longe do AJAX de páginas que premiam No cume calmo dos tags que registram Assenta a sombra sonora de MP3 que eu nunca vou ouvir.

Ah! Eu que não esquento A cadeira de um emprego Pois tenho oportunidades de trabalho Esperando ser atendidas Porque longe das 80 horas de labuta semanal No cume calmo do meu Blog que protesta Suspiram lindos projetos que eu nunca realizarei...

webdesign :: 73

“Olhando para trás parece que tudo foi tão fácil e que os desafios que o chamaram para o mundo on-line são coisa de velho nostálgico”

É inegável que a internet se profissionalizou. Trabalhos pagam melhor, clientes entendem para que serve a web, fornecedores têm produtos confiáveis... Tudo isso sem falar na imensidão de serviços disponíveis por aí, gratuitos ou não. Olhando para trás parece que tudo foi tão fácil e que os desafios que o chamaram para o mundo on-line são coisa de velho nostálgico.

Por outro lado, há tanta coisa nova por aí, que se preocupar com um portal de e-commerce ou com um banner em Flash parece coisa do passado. Será que nos transformamos naquelas “duplas de criação” de que ríamos tanto quando entramos na área? Se for assim, o que fazer para recuperar a paixão por aquela que foi um dia a redentora das mídias?

A resposta fica a cargo de você. Minha intenção foi só levantar a pergunta.

Promoção assine um plano de hospedagem efetue o pagamento anual e ganhe um pendrive ou uma webcam. Confira o regulamento em nosso site. www.siweb.com.br tel: (11) 4063.8047 info@siweb.com.br

Empresa de respeito, credibilidade, honestidade, consolidada na carteira de clientes, atendimento e serviços elogiados, valores justos, sua satisfação aqui e garantida.

Hospedagem e registro de sites, planos individuais e revendas. www.datahosting.com.br tel: (11) 6951.2954 - (11) 6939.7305 atendimento@datahosting.com.br

Hospedagem de sites com infra-estrutura de altíssimo nível, planos a partir de R$ 8,90/mês. HTML, PHP, CGI, Flash, FrontPage, DreamWeaver, MySql, e-mail com anti-vírus/spam, suporte 24x7 entre outros recursos. www.hphost.com.br tel: (11) 6684.9597 info@hphost.com.br

A Informática Online.Net está preparada para hospedar seu site, nosso DataCenter possui servidores de última geração, nossos backbones sempre irão propiciar ao seu visitante uma alta velocidade e estabilidade de conexão. www.informaticasp.com.br tel: (11) 6944.2566 sac@informaticasp.com.br

Revendas de hospedagem com 15 GB de espaço e 350 GB de transf.mensal por R$ 20,00. Hospedagem de sites com 1 GB de espaço e 12 GB de transf.Mensal por R$ 5,00.

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

Seja seu próprio servidor de hospedagem em hospede você mesmo o site de seus clientes, ilimitados domínios e e-mails, painel de controle CPanel para você e seus clientes, estatísticas, webmail, etc www.hospedagem.srv.br tel. (11) 4816.1994 hospedagem@hospedagem.srv.br

Hospede seu site com MYSQL 5.0 grátis, suporte integrado a .NET 2.0, PHP 5.2 e ASP no mesmo ambiente. Conheça também nosso plano de parceiro comissionado e ganhe comissões mensais de até 25%. www.iphotel.com.br tel: (11) 6971.0438

Há 6 anos no mercado, oferecemos planos HTML, PHP e ASP na medida para sua necessidade. Planos à partir de R$9,90 mensais.

Promoção: Utilize o código “webdesign” na inscrição e ganhe 20% de desconto! www.sitehosting.com.br tel: (11) 4063.2829 tel: (51) 4063.8629 suporte@sitehosting.com.br

Hospedagem de sites em plataforma Linux e Windows.

Registro gratuito de domínios internacionais, acesse o nosso site e participe de nossa promoção.

Site: http://www.blesshost.com.br E-mail: comercial@blesshost.com.br

www.rjhost.com.br tel: (21) 2577.5545 vendas@rjhost.com.br

E-mail de 1GB, webmail com leitor de notícias e disco virtual.

Soluções completas para webdesigners e desenvolvedores.

Qualidade, estabilidade e segurança. www.speedhost.com.br tel: São Paulo (11) 5644-1047 Rio de Janeiro (21) 3523-0387 Paraná (41) 3015-3077

Hospedagem de Websites em ambiente Linux e Windows com suporte integrado a DOTNET 2.0, PHP, ASP e outros.

Painel de Controle, Sistema de Revenda de Hospedagem, Registro de Domínios, Servidores Dedicados e Co-location.

Data Center próprio com a mais alta tecnologia. www.misterhost.com.br tel: (11) 3902.4212 misterhost@misterhost.com.br

Parceria Tehospedo e você, Designer: a cada indicação você ganha 2 meses grátis para seu site, a cada 10, um site hospedado gratuitamente. Consulte mais vantagens. www.tehospedo.com.br/designer tel: RS (51) 3227.7727 / capitais de SP/RJ/MG/DF/ PR/SC 4062.1432, GO (62) 4052.1432 comercial@tehospedo.com.br

A EHB(ExtremeHostBrasil) trabalha com Hospedagem PHP ou ASP com servidores de ultima geração, utilizando Datacenters renomados para garantir o máximo de estabilidade em seu site. www.extremehostbrasil.com tel:(47)8405.4353 fale_conosco@extremehostbrasil.com

1) Alta Disponibilidade, Datacenter Brasil Telecom.

2) Link no Brasil, alta velocidade e alto desempenho.

3) Dotnet1/2, PHP4/5, ambiente integrado, o cliente escolhe.

4) Controle Total, você mesmo controla tudo pelo painel.

5) Suporte telefonico exclusivo, direto e sem intermediarios. www.develsoft.com.br/webhost tel: (16) 3618.1493 ou (16) 8123.4599

Hospedagem de sites, Revenda, VPS e Registro de Domínios. Planos com 500MB de espaço por apenas R$ 9,50 por mês. Assine agora e tenha o primeiro mês GRÁTIS nos planos de hospedagem e revenda. www.trixhost.com tel: (11) 3717.4889 suporte@trixhost.com

Hospedagem de Sites com segurança e estabilidade total para os clientes mais exigentes nas plataformas Linux e Windows. Infra-estrutura de altíssima qualidade.

Planos de Revenda e VPS. www.ativahost.com tel: (21) 2238-3407 vendas@ativahost.com

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