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