Ed35 by Emanuel Limeira

novembro 2006 :: ano 3 :: n 35 :: www.revistawebdesign.com.br

novembro 2006 :: ano 3 :: nº 35 :: www.revistawebdesign.com.br

sites móveis “Em 2008, dispositivos móveis vão superar computadores de mesa no acesso à internet”

Webdesign

Prepare-se para a nova etapa do design para web!

E D I T O R A

I SSN 1806 - 0099

9 771806 009009

00035

R$ 9,90

- Entrevista: conheça os princípios fundamentais para a boa prática do design - Direito na web: evitando riscos no uso de conteúdo de sites colaborativos - Tecnologia: saiba como utilizar vídeos para fisgar o interesse dos usuários

4 :: quem somos

Editorial

Equipe

O que me emociona... de celulares a Niemeyer

Direção Geral Adriana Melo

Bem, dois assuntos nesta edição me atraíram para escrever essa

Direção de Redação Luis Rocha

adriana@arteccom.com.br

Primeiramente, vejam na página 31: “em 2008, o número de pessoas acessando a internet via dispositivos móveis ultrapassará os acessos através de computadores de mesa no mundo”. Ou seja: fiquem atentos, pois alguns de seus sites já devem começar a ser planejados, desenhados

luis@arteccom.com.br

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

Leandro Camacho leandro@arteccom.com.br

Ilustração Beto Vieira

e construídos com este perfil, visando o acesso por meio destes

beto@arteccom.com.br

ambientes. Como encontraremos as melhores soluções? Provavelmente

Publicidade Bruno Pettendorfer

nos pequenos detalhes. Esse é nosso novo grande desafio. Lembrem-se que, na corrida da internet, ganha quem larga na frente. Vamos falar agora de Oscar Niemeyer. Como lembrou o professor João Leite, em nossa entrevista principal, para nosso arquiteto “beleza é função essencial a ser cumprida”. Achei que foi um ótimo exemplo neste momento em que tanto tentam colocar em guerra na internet “estética x função”, “beleza x usabilidade”. Essa frase nos ajuda a refletir melhor sobre o que é função. Não podemos distorcer seu significado. Cada elemento, em qualquer peça gráfica, só não deve ser inserido gratuitamente, deve sempre ter uma função, independente se esta for meramente ilustrativa, decorativa, com um objetivo mais técnico ou com o apelo de simplesmente encantar o usuário. Somente precisa estar claro o objetivo, a utilidade de cada elemento gráfico. E por que esses assuntos me emocionaram? Porque o primeiro é um

Débora Carvalho publicidade@arteccom.com.br

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

Desenvolvimento Web Cadu Sant'Anna cadu@arteccom.com.br

Financeiro Cristiane Dalmati cristiane@arteccom.com.br

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

grande desafio técnico na área de internet e os princípios do design são a base de todo o processo. E isso tudo junto é simplesmente design. Boa leitura!

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

Produção gráfica www.prolgraﬁca.com.br

Adriana Melo

Distribuição www.chinaglia.com.br

:: A Arteccom não se responsabiliza por informações e opiniões contidas nos artigos assinados, bem como pelo teor dos anúncios publicitários. :: Não é permitida a reprodução de textos ou imagens sem autorização da editora.

“introdução” para vocês: internet no celular e princípios do design.

menu :: 5

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

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

fique por den tro pág. 8 métricas e mercado pág. 10 direito na web pág. 11 post-it portfólio pág. 12 agência: 14bits pág. 18 freelancer: Jonas Kühner pág. 20 ilustração: Guilherme Marconi

matéria de capa pág. 22 entrevista: Sementes do design pág. 30 reportagem: Seu site está no ar!

e-mais pág. 40 debate: Atuais influências no design para web pág. 46 e-mais: Construção de marcas pág. 51 estudo de caso: Kid Abelha pág. 56 tecnologia na web: Vídeos na web! pág. 60 tutorial: Produtividade 2.0 - Parte 1

com a palavra pág. 64 usabilidade: Marcos Nähr pág. 66 webwriting: Bruno Rodrigues pág. 68 marketing: René de Paula Jr. pág. 70 bula da Catunda: Marcela Catunda pág. 72 webdesign: Luli Radfahrer

6 :: emails

na web Assunto: Direito 3D na web

na web Assunto: Direito Qualidades de um site

Oi, Marcio. Procure conversar com

Gostaria de sugerir uma matéria

a Diretta (www.diretta.com.br),

sobre o 3D na web, como esta

agência responsável pela produção

tecnologia vem sendo utilizada

do site da Heineken. Porém, como

nos layouts de websites. Um

este tema sempre gera dúvidas

grande abraço!

entre os nossos leitores, vamos

Ricardo Tiburcio ricardo@dﬂay.com.br

torná-lo um dos próximos assuntos da seção Direito na Web. Obrigado!

Assunto: Estética e usabilidade

Ricardo, ótima sugestão. Parabéns pelo artigo do Marcos

Certamente o tema vai virar pauta

Sou leitor da Revista e queria

da seção Tecnologia na Web,

sugerir uma edição falando sobre

ok? Por enquanto, visite o site

as qualidades necessárias para

web Assunto: Direito Registronade domínios

Nähr, “Estética ou usabilidade?”. Sinceramente é a primeira

da agência Seagulls Fly (www.

Trabalho em uma organização sem

abordagem sobre um tema

um site e qual é o modelo mais

seagullsﬂy.com), especializada em

ﬁns lucrativos, que atua nas áreas

polêmico que vejo na revista. Hoje

usado.

3D. Aguarde novidades :-)

de educação, arte e cultura, meio

existe uma legião de fanáticos

ambiente, saúde e assistência

que defendem usabilidade

social. Temos o site da organização

versus usabilidade somente,

que é .org.br. A minha dúvida

desdenhando da estética. Assim,

Marcos, em dezembro, além dos

é: para os sites das áreas é

a postura da Webdesign, na

vencedores do Concurso Peixe

necessário ser .org.br ou posso

edição 33, se mostrou corajosa,

Grande (www.arteccom.com.

utilizar o “.com.br”?

mesmo que para muitos não seja

Marcos Vinicius marcoswebrb@yahoo.com.br

br/webdesign/peixegrande), que

Eiko Saito de Lima eikodelima@gmail.com

serve para apresentar algumas das principais tendências do mercado, vamos fazer uma reportagem

Olá, Eiko, como vai? Passamos sua

especial sobre os elementos que

dúvida para Erica Saito, da Verisign.

deﬁnem a qualidade de um site.

Veja o que ela aconselha: “Você

Esperamos que ela atenda as suas

sempre pode registrar um domínio

necessidades!

web Assunto: Direito Uso de na marca

.com.br, contanto que tenha um CNPJ para apresentar no momento

Direito na web Assunto: Webdesign, versão e-book! Gostaria muito de ver a Revista Webdesign em mídia eletrônica (e-book). Seria muito legal, pois poderia pagar via web e fazer o download. Um abraço! Hilton Muccillo hilton@performancecg.com.br

Estou desenvolvendo um site

do registro. Para cada tipo de

sobre cervejaria para o projeto

domínio no Brasil registrado com

da matéria de Webdesign, do

a NIC.Br, há uma regra especíﬁca.

curso de Desenho Industrial da

É preciso atentar para o número

Universidade Gama Filho - RJ.

máximo de domínios ‘.com.

Gostaria de saber se poderia

br’ que uma organização pode

utilizar a marca Heineken como

ter sob um mesmo número de

ilustração da cervejaria. Mas

CNPJ. Já os domínios ‘.com’ são

deixando bem claro, na página

usados internacionalmente e não

inicial, que o hotsite é um projeto

apresentam restrições desse tipo.

Hilton, em breve, vamos fazer um

acadêmico, sem ﬁns lucrativos e

Podem ser registrados por pessoa

upgrade no site da revista. Vamos

que não tem nada relacionado à

física ou jurídica e não há número

estudar sua idéia e analisar a

marca Heineken.

máximo por pessoa ou empresa”.

viabilidade de lançar tal versão, ok?

Marcio Fernandes contato@marciofernandes.com

Obrigado, abraços!

Desculpe a nossa falha! Na edição de outubro (nº 34), na seção DEBATE, página 39, a palavra “IMAGINANDO” foi grafada erroneamente.

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.

politicamente correta. Moises de Moura moises@mosaiko.com.br

Moises, realmente esta é uma questão delicada. Não devemos adotar uma postura radical, criando uma ditadura tanto de estética, como de usabilidade. O importante é lembrar que estes dois campos do conhecimento são muito importantes na criação e no desenvolvimento de um site e devem trabalhar sempre em harmonia, sem radicalismos.

8 :: métricas e mercado

Tipo de navegação durante o expediente - Brasil Sites por categoria

Notícias

74%

Financeiros (Internet Banking e de investimentos)

56%

E-mail pessoal

32%

Comércio eletrônico (compras e leilões)

30%

Fonte: Web@Work América Latina 2006 (www.websense.com)

7,1 milhões Total de usuários residenciais que visitam sites de comércio eletrônico atualmente. Ou seja, 52,9% do universo de internautas

Em apenas três dias (entre 27 e 29

35%

de setembro), esse foi o aumento proporcionado no faturamento das 15 lojas de varejo on-line envolvidas

com acesso residencial no Brasil.

na LiquidaWeb, promoção conjunta

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

coordenada pela Câmara Brasileira de Comércio Eletrônico (Camara-e.net).

Dois em cada três funcionários usam

68%

mensagens instantâneas no horário de

Terceira idade na web

trabalho. Enquanto 36% usam mensagens

Pesquisa da Babylon detectou um aumento de 112,5%

mais para ﬁns relacionados ao trabalho, 19%

no número de pessoas acima de 60 anos que utilizam

admitem usá-las mais para assuntos que nada têm a ver com seus serviços, e outros 14% dizem usá-las igualmente para ﬁns relacionados e não relacionados ao trabalho. Fonte: Web@Work América Latina 2006

os seus sistemas de dicionários eletrônicos e tradução de textos. O levantamento envolveu mais de 2,8 milhões de usuários no Brasil. Fonte: Babylon (www.babylon.com.br)

(www.websense.com)

Você sabe inserir vídeos em um site?

Café versus internet

Total de votos: 294

Funcionários no Brasil (64%) prefeririam abrir mão de seu

Sim - 58%

café matinal que da possibilidade de usar a internet no tra-

Não - 42%

balho para fins pessoais. Fonte: Web@Work América Latina 2006 (www.websense.com)

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

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

métricas e mercado :: 9

ViuIsso?

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

Notícias e comentários sobre comunicação digital, internet e publicidade 8p: isso é Web 2.0, e brazuca!

Guarda-chuvadoor

Junte Flickr+Fotolog+Orkut+Brasil e você tem

Um guarda-chuva que exibe imagens e serve como

8p.com.br (www.8p.com.br), o novo projeto/aplicativo/

mídia (além de fotografar, filmar e enviar via internet

ferramenta que a Globo.com está soltando em beta. É de

wireless). Se não for hoax, certamente é para se tomar

longe o mais bem elaborado projeto Web 2.0 brasileiro

cuidado. Andando na chuva, olhando para cima? Cuidado

que eu vi até agora. Com a qualidade e o cuidado habitual

para não cair no bueiro destampado em dia de tempesta-

dos produtos da Globo.com, mas com um Q a mais.

de (http://tinyurl.com/rp8y2)!

Essa junção de ferramentas de sucesso promete fazer um barulho interessante. Forte candidato a ser o primeiro projeto do país a virar coqueluche entre os brazucas (Orkut, Fotolog, YouTube, tudo gringo).

Afinal, o que é Web 2.0? Um interessantíssimo documentário de 24 minutos (http://tinyurl.com/

IDG: Especial “Portais Web Brasil”

jr359) com os CEOs das

O IDG Now! tem publicado reportagens aprofunda-

principais “startups” ame-

das sobre os principais portais do país. Tem números, po-

ricanas, tentando deﬁnir o

sicionamento, estratégia etc. Vale a pena ler e guardar:

que é aﬁnal Web 2.0.

- iG: http://tinyurl.com/n5t33 - UOL: http://tinyurl.com/lkryq - Terra: http://tinyurl.com/rf7yd

A produção corporativa de conteúdo vai morrer? Vale a pena ler as reﬂexões de Marcelo Coutinho (http://

- Yahoo: http://tinyurl.com/rtqfu

tinyurl.com/o2hxk), diretor-executivo do IBOPE Inteligência,

- MSN: http://tinyurl.com/o4q8y

em seu artigo sobre o conteúdo gerado por usuários e seu

- Globo.com: http://tinyurl.com/nn6qh

impacto nas empresas produtoras de conteúdo.

10 :: direito na web

Questões legais envolvendo o uso de conteúdo colaborativo Estou desenvolvendo um site onde o conteúdo será totalmente criado e mantido pelos usuários. Eles enviarão artigos, contos e histórias e manterão o conteúdo do site. Porém, gostaria de ter controle e liberdade de assim que o material for publicado, eu possa utilizá-lo da forma que quiser (publicá-lo em jornal, revista, livro, TV, rádio etc.) e editar ou modiﬁcar o material enviado. Gostaria de saber se isso é legal? Qual é a melhor forma de avisar ao usuário? Rafael Hoffmann (agaême@gmail.com)

Gilberto Martins de Almeida Advogado formado na PUC/RJ, com Mestrado na USP e cursos em Harvard e no M.I.T. Ex-

Cada vez mais, o conteúdo que

explicitamente todas e quaisquer delas

circula na internet é produzido em

que sejam cogitadas como de efetivo

caráter de colaboração. Por exemplo,

ou potencial interesse. A lei diz que os

“jornais” eletrônicos cujas matérias

negócios envolvendo direitos de autor

são provenientes de contribuições dos

devem ser interpretados estritamente, ou

leitores-colunistas.

seja, é preciso definir tudo no maior grau

Em alguns casos, a direção do site

de detalhe possível.

assume a prerrogativa de fazer às vezes do

E v i d e n t e m e n t e , s e o p ro p r i e t á r i o

trabalhou por 11 anos, no Brasil

editor, e em outras vezes são os próprios

do site não pretender explorar

e nos EUA. Sócio de Martins de

leitores que, coletivamente, decidem

comercialmente, de forma direta ou

quais matérias deverão ser “publicadas”.

indireta, as matérias enviadas pelos

Ta i s s i t u a ç õ e s t a m b é m s e

leitores-colaboradores, tudo ficará mais

Gerente Jurídico da IBM, onde

Almeida - Advogados, escritório especializado. Envie sua dúvida para: redacao@arteccom.com.br

enquadram na legislação dos direitos

simples e mais facilmente assimilável.

d e a u t o r. O u s e j a , o p r o p r i e t á r i o d e

Finalmente, vale a pena conservar a

site que pretender reservar para si os

prova documental das condições em vigor

direitos patrimoniais de exploração do

na época de aceitação das contribuições de

conteúdo recebido de terceiros deverá

terceiros. Assim, não restará dúvida sobre

deixar claro, previamente e com bastante

quais eram as regras disponíveis. Em suma,

destaque, que aos respectivos autores

utilizar as obras de outrem é sempre algo

caberão apenas os chamados direitos

que demanda formalização adequada, e

m o r a i s ( re i v i n d i c a r a p a t e r n i d a d e d a

nem a internet escapa dessa realidade.

obra, e se opor a modificações que comprometam a reputação).

Exemplos de sites colaborativos

Do contrário, todos os direitos de comercialização das matérias pertencerão

- Camiseteria (www.camiseteria.com)

aos autores das mesmas, conforme prevê a

- Digg (http://digg.com)

lei. A propósito, convém que, no interesse

- Leia Livro (www.leialivro.com.br)

do proprietário do site, seja estabelecido e x p re s s a m e n t e q u e o s d i re i t o s d e s t e último quanto à exploração das matérias abrangerão o uso, armazenamento e reprodução em quaisquer mídias, citando

- OhMyNews (www.ohmynews.com) - Overmundo (www.overmundo.com.br) - Wikipédia (http://pt.wikipedia.org)

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 Vamos falar sobre tipografia? Para os designers que procuram mais informações sobre o mundo da tipografia, uma boa pedida é visitar “A Casa do Tipo” (www. acasadotipo.com.br), que apresenta dicas de cursos, livros e palestras, além de disponibilizar alguns artigos e materiais didáticos para download.

Revista on-line sobre artes visuais Atenção! Surge, diretamente de Recife, mais uma boa referência editorial para os designers brasileiros. Estamos falando do lançamento da Revista Boca (www.revistaboca.org), que procura “registrar a produção contemporânea de artes visuais”.

Gerador “automático” de logotipos

Nova geração do design na web Em novembro, destaque para o trabalho acadêmico desenvolvido pelos alunos Bruno Oyama, Igor Marques, Marcelo Falco, Nathalia Resende, Ritiane Silva, Rodolfo Martinez e Rogério Lindo, da Universidade Anhembi Morumbi. A idéia do projeto “Relação de Vídeo e Hipermídia através das obras de Lucas Bambozzi” (http://rec.webmista.com) foi apresentar a relação entre design e vídeo, através da experimentação. Se você possui ou conhece algum trabalho acadêmico interessante, envie sua sugestão para redacao@arteccom.com.br.

Continuam as brincadeiras em cima da tão falada Web 2.0! Depois das ferramentas automáticas para geração de nomes de empresas (http://tinyurl.com/a8byj) e para validação de sites que utilizam conceitos e tecnologias do movimento (http://web2.0validator. com), agora quem tira um sarro é o desenvolvedor Alex P, com o seu gerador “automático” de logos para sites Web 2.0 (http:// msig.info/web2.php).

Quer uma vaguinha?

Dicas Livro do mês “A Cauda Longa: do mercado de massa para o mercado de nicho” Autor: Chris Anderson Editora: Campus/Elsevier

Mauro Amaral, do site Carreira Solo (www.carreirasolo.org), lançou recentemente um quadro de vagas on-line muito útil

“Em janeiro de 2006, na edição nº 25

para os profissionais que buscam oportunidades nas áreas de

da Revista Webdesign, analisamos o

Design, Jornalismo, Propaganda & Marketing e TI e também para

movimento Web 2.0 e as profundas

as empresas que procuram reter os talentos justamente nestas

transformações que ele vem trazendo

áreas. Então, a dica do mês é acessar o Vagas (http://vagas.

na criação e no desenvolvimento de ambientes digitais. Dentre

carreirasolo.org). Boa sorte!

os temas abordados na reportagem de capa, Fábio Seixas, um dos sócios do Camiseteria.com, citava a teoria da Cauda

Agenda de eventos 07/11 - “CSS: Ultrapassando os limites do HTML” - RJ (www.infnet. com.br/palestras) 11/11 - “Arte digital - dicas e truques” - SP (www.impacta.com.br) 18/11 - 11º EWD - POA (www.arteccom.com.br/encontro) 21/11 - 11º EWD - Curitiba (www.arteccom.com.br/encontro) 23/11 - 11º EWD - Brasília (www.arteccom.com.br/encontro) 25/11 - 11º EWD - São Paulo (www.arteccom.com.br/encontro)

Longa, ‘onde a tecnologia e a internet possibilitam que usuários e produtos antes perdidos no meio da multidão possam ter a chance de aparecerem e serem reconhecidos’. Para quem ainda não sabe, o autor da idéia foi o jornalista americano Chris Anderson, editor-chefe da revista Wired (www.wired.com). A teoria se tornou uma realidade concreta com o lançamento do livro ‘The Long Tail’ (www.thelongtail.com), cuja edição traduzida foi lançada recentemente pela Editora Campus/ Elsevier. O livro é uma boa pedida para os profissionais que quiserem entender e se aprofundar sobre os conceitos que movimentam o mercado web nos últimos anos.”

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

12 :: portfólio agência - 14bits

Alberto Santos Dumont é um nome extremamente

Arcoverde, sócio diretor da 14bits.

significativo para a história brasileira, pois é uma das

Assim, o nome escolhido para representar a vontade

melhores representações sobre a nossa capacidade para

dessa equipe surgiu como uma forma de homenagear o

produzir e explorar novos campos do conhecimento.

trabalho realizado por Dumont. “Nós queríamos algo bem

Lembrando que, em outubro de 2006, foram completados

brasileiro, mas que fosse fácil para as pessoas de outros

100 anos do primeiro vôo motorizado, feito realizado por

países. 14bits remete a tecnologia e inventividade e tem um

Dumont dentro de um 14-Bis.

signiﬁcado a mais para quem é brasileiro”.

14-Bis

Horas de vôo De 2003 aos dias atuais, as viagens já realizadas pela

Tinha a forma de um “T”, era feito de bambu e revestido de

tripulação da 14bits trouxeram algumas valiosas lições. A

linho. Recebeu esse nome porque, durante um teste, foi unido a

primeira delas envolve a questão da qualidade dos projetos.

um balão n°14 para testar se o avião teria equilíbrio para voar. O

“Somos mais focados em qualidade do que em quantidade.

14-Bis tinha dez metros de comprimento, 12 de distância entre as asas e pesava 210 quilos. Fonte: Brincando na Rede (http://tinyurl.com/zlxmz)

Foi um desafio estabelecer um portfólio sólido que nos permitisse ter acesso a boas oportunidades. Tivemos que trabalhar muito e nem sempre com as condições desejáveis

Sob a inspiração empreendedora e inventiva do

de prazo e verba”, revelam Bruno e Jaime.

aviador, a 14bits (www.14bits.com.br) procura desenvolver

Outra questão importante é a avaliação constante sobre

um trabalho que alcance um longo ciclo de navegação. “A

o método de produção. “Procuramos fazer trabalhos com

agência começou pela iniciativa de três amigos que já haviam

alta qualidade artística e tecnológica. Além disso, buscamos

trabalhado juntos em outras empresas e que abraçaram a

evoluir e rever constantemente nossos processos de trabalho,

oportunidade de iniciar um novo estúdio para produzir

de organização e de comunicação”.

conteúdo multimídia. Aos poucos, a equipe aumentou e

Eles ressaltam ainda a importância de se alinhar a

com muito trabalho o teco-teco se tornou um avião com

concepção dos trabalhos com as particularidades de cada

uma tripulação de primeira linha que busca voar cada vez

cliente. “Temos proﬁssionais com variadas expertises e todos

mais alto”, contam Bruno Hamzagic, diretor de arte, e Jayme

aprofundam-se bastante em suas respectivas especialidades.

portfólio agência - 14bits :: 13

As influências e as referências partem das mais variadas mídias e tecnologias. Procuramos estar sempre antenados nas tendências tecnológicas e artísticas atuais, mas tentamos também alinhar o resultado de cada peça com as características e peculiaridades de cada cliente, sem necessariamente ‘rotular’ nosso trabalho com algum estilo especíﬁco”. Influências na escolha das rotas Na busca por passageiros que embarquem nos vôos oferecidos pela agência, algumas características ajudam na divulgação dos serviços. “A maior parte das oportunidades

www.14bits.com.br

vem de indicações de clientes e parceiros ou da exposição

tecnológico. Os parâmetros do que é viável mudam rapidamente

dos trabalhos realizados. Para nós, o fundamental para

e variam dependendo da audiência e os conhecimentos técnicos

ganhar um projeto é entender o que o cliente precisa e

necessários também evoluem rapidamente. A própria internet

criar soluções viáveis”, explicam.

é a maior fonte de informações neste caso. Todo o pessoal que

Além disso, eles lembram que a agência não descarta

trabalha na 14bits tem bastante conhecimento técnico. Isso

possíveis rotas de navegação. “Não focamos nenhum

faz muita diferença na hora de pensar e propor soluções. Uma

nicho específico de mercado. Como estúdio buscamos

pessoa que não tenha nenhum interesse em tecnologia e em

boas oportunidades para desenvolver o nosso trabalho,

linguagem digital vai provavelmente achar muito chato trabalhar

situações em que o que temos a oferecer é relevante para

com a gente”, aﬁrmam.

o cliente. Nossos projetos podem ser uma ação pontual,

E para que a qualidade nos projetos seja alcançada,

uma campanha ou um detalhe de uma peça dentro de uma

a agência procura tornar o ambiente de trabalho o mais

grande campanha. Ele pode estar completo em três dias

agradável possível. “Todos colaboram com os processos e

ou ter atualização e acompanhamento permanentes. O que

todos trazem referências e experiências pessoais importantes.

fazemos é sempre um trabalho em equipe - multidisciplinar

Com processos eﬁcientes, os desgastes normais do dia-a-dia

-, mas os talentos individuais têm um peso decisivo no

são menores. Nosso objetivo é poder oferecer condições

sucesso de cada projeto”.

c a d a v e z m e l h o re s p a r a q u e o s n o s s o s p ro f i s s i o n a i s

Isso porque o mercado interativo apresenta tantas

tenham oportunidades de ampliar seus conhecimentos,

novidades em um espaço de tempo cada vez mais curto.

seja fazendo cursos, reservando tempo para estudos

“Convivemos diariamente com estas questões. Todos

específicos, fazendo viagens. Temos um longo caminho

os projetos têm que ser considerados do ponto de vista

para percorrer, mas esta é a direção”.

14 :: portfólio agência - 14bits

CD-ROM Melissa 25 anos

Vetor Zero

www.14bits.com.br/trabalhos/frames_melissa

www.vetorzero.com.br

Tecnologias utilizadas: Director e 3D

Tecnologias utilizadas: Flash, Ruby on Rails e XML

O briefing partiu da identidade visual do cliente para Um dos segmentos que vem trazendo bons frutos para a agência são os trabalhos em CD-ROM. “Eles permitem uma

construir um projeto objetivo e funcional. “O objetivo foi criar uma interface que interferisse o menos possível na visualização

liberdade que ainda não podemos ter na maioria dos projetos

dos vídeos e imagens dos projetos. Por ter muito conteúdo

para internet. Limitações de tamanho de arquivo, por exem-

disponível, é possível que os usuários passem um bom tempo

plo, ficam em segundo plano”, revelam Bruno e Jaime.

no site. Nós nos preocupamos em fazer um projeto que não

Dentre os projetos já realizados pela agência no segmen-

fosse visualmente cansativo. O site tem pouco conteúdo de

to, destaque para o CD-ROM produzido para a Melissa. “O

texto. A fonte foi escolhida por ser compacta e moderna e por

trabalho é composto de um livro e de um CD-ROM. O livro é

combinar com a identidade visual do cliente”.

puramente artístico e apresenta o trabalho de diversos artistas

Um dos destaques do site é a forma de apresentação dos

plásticos. O nosso desafio foi criar uma interface interativa

vídeos. “A primeira decisão difícil é se iríamos ou não usar ví-

fácil de consultar e que, ao mesmo tempo, proporcionasse uma experiência bacana. No final, funcionou bem. A navegação é agradável e o acesso ao conteúdo é muito fácil”. Outro desafio envolvia o curto prazo de desenvolvimento. “Participamos da elaboração do roteiro, fizemos a gravação dos vídeos na Grendene com o pessoal da Moviola e com o

deo em Flash. A vantagem em usar vídeo neste formato é que eles ficam integrados a interface do site e o usuário não precisa de nenhuma tecnologia adicional para assistir. A desvantagem é que o vídeo em QuickTime fornece algumas opções de compressão mais interessantes, como o H264 e é um formato mais familiar para o pessoal do mercado publicitário. O vídeo em Flash também é mais complicado para ser baixado para o

diretor Tiago Vassão, além de toda a programação do CD. A

computador dos usuários. A solução que fizemos foi colocar os

direção de arte foi feita em conjunto com a Lobo Filmes, o que

vídeos em Flash e deixar opções para download em QuickTime.

também é muito desafiador. Na parte técnica, o mais complexo

Outra decisão difícil é decidir as dimensões e a quantidade de

foi fazer a programação das animações de interface. Toda a

compressão dos vídeos. No caso da Vetor Zero, optamos, em

movimentação e montagem das telas foram feitas por progra-

conjunto com o cliente, por fazer vídeos bastante generosos

mação para permitir uma navegação bem flexível”.

em dimensões e com pouca compressão”, explicam.

portfólio agência - 14bits :: 15

Tesis Web www.tesisweb.com.br Tecnologias utilizadas: Flash, PHP e XML

Um ponto interessante neste projeto envolveu a liberdade criativa. A idéia de compor a interface do site com uma antiga vitrola e um gato descansando surgiu das observações em relação ao ambiente de trabalho do cliente. “Fizemos uma visita a Tesis para conhecer a empresa. Eles têm vários gatos circulando pela produtora e queriam que o site fosse descontraído e bem humorado. A vitrola surgiu de uma conversa com um dos sócios da empresa, que tinha a idéia de colocar um rádio no site. No final, toda a área de portfólio do site faz referência a vitrola no visual e na movimentação dos elementos da tela. A identidade visual reflete um pouco da cultura e das referências dos próprios profissionais da Tesis”, explicam Bruno e Jaime. Para que essas idéias pudessem se tornar reais, a 14bits utilizou uma combinação de tecnologias. “O site utiliza Flash, XML e um sistema em PHP que permite que o cliente atualize as informações do site. Os vídeos também são em Flash. No caso dos vídeos, optamos por uma imagem pequena, mas som com qualidade de CD, uma vez que o trabalho do cliente é a produção de áudio. A interface do site tem ilustração e animação 2D, feita inicialmente com papel e lápis e ilustração e animação 3D. Alguns elementos da interface são animados com algoritmos de programação, para permitir uma maior flexibilidade na interatividade e para acomodar o conteúdo dinâmico”. A aposta parece ter dado certo: o site ganhou diversos prêmios e foi publicado no livro “Web Design: Portfólios”, da editora alemã Taschen, sobre portfólios na internet.

18 :: portfólio freelancer - Jonas Kühner

Contato: jonas@criatipos.com Site: www.criatipos.com

Criando uma identidade profissional através das experimentações Falando sobre como procura estimular seu processo de

www.criatipos.com “Projeto experimental envolvendo Flash, tipograﬁa e vídeo”

criação, o designer Stefan Sagmeister, fundador da conceitu-

net utilize cada vez mais vídeo. As pessoas que trabalham com

ada agência Sagmeister Inc. (www.sagmeister.com), revelou,

web têm mais noção de como conduzir um trabalho interativo,

em entrevista recente (http://tinyurl.com/oh8eg), que busca

ao contrário daquelas que trabalham em produtoras de ﬁlmes

inspiração longe de seu estúdio, de forma que tenha mais

que acostumaram a pensar em conteúdo estático. Em relação

tempo e liberdade para criar e desenvolver suas idéias.

à tipograﬁa, acho um excelente exercício de design, pois fazer

Na vida proﬁssional de Jonas Kühner, além de fugir do círculo vicioso da tecnologia, ele aposta na prática constante

um alfabeto mantendo um conceito gráﬁ co em cada letra é um desaﬁo”, conta.

para alcançar o aperfeiçoamento de suas técnicas. “Sair da

Outra característica marcante de seu portfólio envolve

frente do computador e respirar ar puro é bom para destravar

a experimentação. “Acredito que experimentar sempre no-

a criação. Ver exposições, livros, arte feita na rua também é

vas formas de interação, de soluções gráficas e estar sempre

bastante inspirador. Mas acho que o mais fundamental é pra-

atento ao que está sendo feito culturalmente pelo mundo

ticar bastante o processo criativo, tentar abrir o maior número

(música, artes, filmes, design etc.) é muito importante. Um

de possibilidades de conceitos em cada trabalho. Quanto mais

portfólio que possua uma seção de experimentos autorais,

se pratica, melhor se cria. Tentar não se bloquear em uma idéia

algo genuíno do profissional, ajuda a diferenciá-lo, a revelar

ﬁxa logo no início do processo é fundamental, algo que venho

a sua personalidade. Um case que eu venho trabalhando

tentando praticar cada vez mais a cada projeto”, diz.

faz tempo é um site pessoal dedicado exclusivamente à ex-

Uma das vantagens deste processo é que o designer

perimentação em Flash, tipografia e vídeo, que pretendo

vai delineando os elementos que deﬁnirão o estilo e a iden-

lançar em breve. Nesse site, utilizo cores e fontes de minha

tidade de seu trabalho. Além disso, observar a atuação de

preferência, algo absolutamente autoral, onde posso expe-

outros proﬁssionais também serve como uma boa ferramenta

rimentar o estilo que mais me agrada”.

na busca por referências. “O estilo que eu curto ver e fazer é

Um exemplo de sucesso em sua trajetória é o eyepunch.

um estilo mais agressivo e caótico, por conta da inﬂuência dos

com, conceituada comunidade voltada para o design, no qual

esportes (bodyboard/skate) e a música (rock) que eu sempre

ele é um dos fundadores. “O interessante é que conseguimos

curti. Os designers que me revelaram como poderia ser fei-

criar um local para trocar referências e divulgar projetos entre

to algo interessante com esse estilo, principalmente o foco

designers. Implementamos há uns dois anos a possibilidade

em tipograﬁa, foram David Carson (www.davidcarsondesign.

dos leitores enviarem conteúdo para colaborar com o site,

com), Marcello Rosauro (www.bionico.tv), Elesbão e Haroldi-

algo que consideramos interessante para manter o site sem-

nho (www.visorama.tv) e Billy Bacon (www.nudes.com.br)”.

pre atualizado. Proﬁssionalmente o eyepunch foi interessante,

Analisando a caminhada de Jonas, podemos destacar os projetos de motion e tipograﬁa. “Acho inevitável que a inter-

pois testamos diferentes organizações de conteúdo nas diferentes versões do site. Enﬁm, experimentamos”.

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

20 :: portfólio ilustração - Guilherme Marconi

nova seção

Guilherme Marconi www.cloning.com.br Wd :: Como define seu estilo e onde você busca as referências para o seu trabalho?

Marconi :: Leio muito sobre história da arte. Por isso, a influência nítida de artistas clássicos: Kandinsky, Pablo Picasso e Joan Miró. Além disso, posso citar o trabalho de alguns designers: Clarissa Tossin (www.a-linha.org), Kjá (www.interludio. tk), Kako (www.kakofonia.com), Chuck Anderson (www.nopattern.com) e Joshua Davis (www.joshuadavis.com). Defino meu estilo como um mix de tudo que vejo: das conversas com amigos, das idas ao restaurante japonês no fim de semana, dos bons momentos do meu namoro, do meu humor... Desenho cada situação de uma forma sempre parecida: objetos cortados, linhas pontilhadas, patterns, cores (muitas cores), um pouco de geometria, um caos organizado, eu diria! Agência Tudo (2006) Material utilizado: “muitas e muitas folhas A4, lápis 2B e 4B, apontador amarelo, borracha safada de R$1,00, depois scanner e algumas horas de composição”.

Restaurante SushiBan (2006) Material utilizado: “referências de tecidos e pinturas orientais, foto de um carpa (koi) e bastante Corel Draw”.

22 :: entrevista - as sementes do design

Como cultivar as sementes do design É impossível não parar, admirar e pensar quanto tempo levou para que a beleza das imponentes árvores preenchesse definitivamente um bom pedaço do bairro Jardim Botânico, no Rio de Janeiro. Para se ter uma idéia, segundo o site Ambiente Brasil (http://tinyurl.com/jk3ps), “uma árvore que atinge 50 metros de altura, aprofunda-se cerca de 2,5 metros no solo, mas se espalha a distâncias que chegam a mesma medida da altura, podendo até cobrir a superfície do tamanho de um campo de futebol”. Fazendo um paralelo em cima deste cenário, podemos dizer que o design, para alcançar sua plenitude, deve ser permeado por princípios fundamentais que garantam sua sustentação diante de qualquer circunstância. Nesta entrevista, João de Souza Leite, designer e professor da Escola Superior de Desenho Industrial (ESDI), vinculado à Universidade do Estado do Rio de Janeiro (UERJ), e da Pontifícia Universidade Católica do Rio de Janeiro (PUC-Rio), vai nos ensinar como plantar e cultivar as sementes necessárias para o desenvolvimento de uma base sólida para a boa prática da profissão.

Wd :: Aloísio Magalhães, pioneiro do design gráfico

explorado a respeito da linguagem gráfica, sua história,

no Brasil, dizia que “design é a compatibilização entre

elementos e relações, sejam estas exclusivamente formais,

intuição e metodologia”. Podemos dizer que antes de

portanto da sintaxe entre os elementos, sejam relações de

criarmos exceções dentro de um projeto, devemos

significado, o que implica conhecer o valor simbólico das

conhecer profundamente as regras e os princípios que

formas em seu exato contexto.

permeiam a prática do design?

Certamente seria o caso de afirmar que as exceções

João :: Regras e princípios devem ser relativizados.

só têm valor quando contrapostas a este quadro mais

Em princípio, não existem regras absolutas para a prática

completo de conhecimento. Ou seja, quando o domínio das

do design. O que existe é um conhecimento pouquíssimo

relações é tal que a experiência dá margem à invenção. Há que se evitar a crença em certo tipo de genialidade. Isto pode ser um grande equívoco. Basta lembrar o quanto a atividade dos atletas, dos músicos, dançarinos ou de qualquer outro tipo de profissionais demanda que sua prática tenha bases sólidas. O grande problema do design no Brasil é ter sido montado sobre uma série de regras e não exatamente sobre uma inteligência de projeto e tudo que daí deriva, a saber, todo o conhecimento técnico devidamente apurado. Por exemplo, é por não conhecer os princípios do design tipográﬁco que a nossa produção mediana tem tão pouca consistência.

entrevista - as sementes do design :: 23

Características da web 1. Interatividade “Interagir é trocar informações. É assistir e agir, não estar passivo ao recebimento de informações” 2. Atualização “Se comparada a livros, folders e portfólios, é o meio com o menor custo de levar informações atualizadas ao usuário”

Wd :: Em bate-papo no UOL (http://tinyurl.

3. Alinearidade

com/lvykm), o arquiteto e designer Rafic Farah

“Os usuários de um site decidem em qual direção desejam

apontou que “...a informação... tem sido, digamos,

seguir. Um site não é linear como a TV, por exemplo, que já tem

esteticamente mal resolvida na internet. Ainda

uma programação pronta.”

temos muito a aprender. Ou, temos muito a

4. Hipertexto

desenhar e desenvolver uma linguagem visual

“Possibilidade de interligar diversas informações: internas

que agrade aos olhos e nos emocione”. Diante

ao site (diferentes níveis), continuação de textos âncora e refe-

disso, entender as características que envolvem a

rências adicionais”

internet, por exemplo, pode ser considerado um

5. Multimídia

dos desafios do designer?

“Integração entre animação, áudio, imagem, texto e vídeo”

João :: Sem dúvida. O ambiente do hipermídia é

6. Adimensionalidade

uma novidade por nós ainda explorada como se fosse

“O espaço na internet é praticamente gratuito se compa-

papel. Como se fosse uma superfície plana sobre a

rado ao espaço em qualquer mídia impressa. Porém, quanto

qual se dispõe a informação, sem considerar que este

maior o número de informações, melhor deve ser trabalhada a

ambiente, por exemplo, acaba com a perspectiva

hierarquia entre elas”

renascentista. A lógica, por exemplo, pode ser das

7. Personalização

superposições. Dos planos que se encobrem e por

“Tabelas comparativas reduzem o tempo de navegação e

vezes permitem transparências. As questões envolvendo essas características têm ficado ou no domínio dos ergonomistas, que tentam

permitem que o usuário analise o produto de acordo com seus critérios. Quando há muitas informações a comparar, essa tabela deve ser dinâmica”

mensurar problemas de legibilidade, embora hoje já

8. Acessibilidade

comecem a se preocupar efetivamente com as questões

“A informação on-line, além de atingir qualquer pessoa

de navegação, ou dos técnicos em informática, a quem

que se interesse pelo assunto, possui certos benefícios pe-

as questões de linguagem visual não importam.

rante a passagem de informação off-line: usuários deficientes

Caberá então a quem conduzir uma investigação

visuais podem converter o texto para fala com um browser que

formal e signiﬁ cativa neste âmbito? Penso que devam

lê textos; pequenas deficiências visuais podem ser contornadas

ser os designers. Mas, certamente, o que está em rede

se aumentado o tamanho da fonte original”

atualmente não demonstra muito trabalho neste sentido.

Fonte: compilação de conceitos presentes nos livros “Projetando

Sem dúvida melhoramos, mas estamos muito aquém

Websites” (Jakob Nielsen), “Não me faça pensar” (Steve Krug) e “de-

do que poderíamos estar. Isto, a meu ver, se deve à falta

sign/web/design: 2” (Luli Radfahrer)

24 :: entrevista - as sementes do design

de energia disciplinada no sentido do estudo de todas estas

É o reconhecimento de que as partes integram um todo

características do novo, mas nem tanto, ambiente.

e são interdependentes entre si.

Wd :: No livro “design / web / design” (http://

Assim sendo, é sempre necessário funcionar através

dwd3.blogspot.com), Luli Radfahrer ressalta que “...

de categorizações, ou seja, um projeto, sobretudo na

é fácil criar e produzir um layout simétrico, com todos

web, exige primeiramente que se estabeleçam níveis de

os elementos centralizados ou duplicados do outro

semelhança e equivalência entre as informações.

lado. Porém, conseguir o equilíbrio entre os elementos

Num segundo estágio, é necessário estabelecer

de um layout, com pontos de interesse e elementos

critérios gráficos de identificação entre esses diferentes

que chamam a atenção, é muito mais difícil”. Seria a

níveis, através de especificações tipográficas e cor, por

quantidade de conteúdo/informação uma das principais

exemplo. O que interessa, portanto, é a relação, melhor

influências para se garantir a organicidade de um

dizendo, tensão estabelecida entre ordem e desordem, não

projeto? Que outros elementos exercem influência

a quantidade de informação.

dentro deste processo?

Wd :: Ainda no mesmo livro, Luli alerta que “...

João :: Primeiramente, uma ressalva. A palavra

um layout poluído tem tantos elementos disputando

organicidade é ótima para a nossa reflexão. O que significa

a atenção do leitor que a comunicação se perde, como

exatamente? Um organismo é um conjunto de órgãos

uma conversa em uma feira”. Dessa forma, quais

que desempenham funções distintas, simultaneamente

técnicas contribuem para se atingir o conceito de

complementares, que garantem o funcionamento do seu

síntese visual?

todo. Organicidade é esta qualidade de funcionamento.

João :: Interessa, primeiramente, entender o que significa poluição visual. Falta de harmonia, falta de tensões no nível necessário a caracterizar diferenças entre as informações, excesso de ruído? Se introduzirmos elementos aleatoriamente, movidos exclusivamente pela intuição, há um certo risco de que certas decisões não possuam o tão necessário fator de ordenação. O público quer ser bem tratado, ter pistas sobre como proceder, orientação que lhe indique caminhos. A operação de navegação na web pode ter características semelhantes a uma aventura do saber, ao caminharmos progressivamente nas vias cada vez mais dispersivas da informação. Mas, na maioria das vezes, o que interessa é a operacionalidade de um site. Para tanto, é necessário que eu, designer, saiba sinalizar esses caminhos possíveis. Wd :: Em palestra recente, o arquiteto e designer Kiko Farkas (www.kikofarkas.com.br), criador da Marca Brasil, ressaltava que o original está ligado ao princípio, pois ele não é diferente, mas sim único. Qual é a importância da originalidade de um projeto? João :: Meu caro Luis, confesso que não me preocupo com a originalidade. Isto não é, de modo algum, o que acredito que seja o problema. Ser original é o resultado

entrevista - as sementes do design :: 25

“A idéia de grid, de estrutura modular de uma superfície, é basicamente instrumental, nao uma ferramenta de tortura, restrita”

do trabalho de poucos, sem dúvida. Acho sim que

aproximados uns dos outros, para que sejam vistos

nosso grande problema é atingir um nível mediano de

como um conjunto coeso”. Diante de sua experiência,

produção com muita qualidade. Costuma-se confundir

que recursos devem ser utilizados para se alcançar a

qualidade com criatividade ou originalidade. Não são,

legibilidade em um projeto?

definitivamente, a mesma coisa.

João :: Gosto de pensar todo objeto gráfico, e

Um trabalho pode ser criativo, mas não necessariamente

entenda-se aí também os sites, como uma estrutura

credenciar seu projetista a desenvolver qualquer tipo de

complexa formada por camadas, ou layers se quiser. A

projeto. Acredito no conhecimento, em tudo o que foi feito ao

cada camada corresponde uma categoria de informação

longo da história para se pensar a transmissão de informações

que estabelece conexões com as outras camadas.

e os modos de emocionar pessoas.

Por

exemplo,

determinada

especificação

Há muito por se estudar. É através do estudo

tipográfica faz com que se estabeleça um nível

da produção atual e histórica, da sua análise em

de entendimento entre todos os itens com aquela

profundidade, da compreensão dos propósitos que

mesma característica. Posteriormente, os nexos que

orientaram esta ou aquela decisão de projeto, da

se estabelecem se dão por relações de posição, sem

compreensão da estrutura, seja ela dinâmica ou estática,

dúvida. Mas isto pode ser definido por eixos, por linhas

moderna ou desconstruída, que se poderá atingir certa

condutoras, por marcações de registro. Todos estes

maturidade neste segmento que classifico como o

detalhes se estabelecem como recursos do design

segmento mediano, que por fim é o que mais importa,

tipográfico, leia-se aqui tanto o desenho da letra como

pois é o mais presente na vida cotidiana das pessoas

o design de sua disposição no espaço.

normais, ou seja, do maior público possível.

Assim, posso ter um elemento distanciado

Wd :: No texto “Princípios de Design” (http://

d e o u t ro , m a s s i m u l t a n e a m e n t e c o n e c t a d o a e l e

tinyurl.com/qbxus), a professora Isabela Lara Oliveira

a t r a v é s d e s s a s re l a ç õ e s e s p a c i a i s - s e j a m re l a ç õ e s

explica que, “...segundo o princípio da proximidade,

c ro m á t i c a s , re l a ç õ e s t i p o g r á f i c a s o u re l a ç õ e s e n t re

itens relacionados entre si devem ser agrupados e

características de imagens.

26 :: entrevista - as sementes do design

“O ambiente do hipermídia é uma novidade por nós ainda explorada como se fosse papel. Como se fosse uma superfície plana sobre a qual se dispoe a informaçao, sem considerar que este ambiente, por exemplo, acaba com a perspectiva renascentista” Wd

Especialistas

apontam

que

alinhamento é um dos princípios fundamentais do design, por garantir a organização de um projeto. De que forma um projeto pode variar o uso do alinhamento sem prejudicar o conceito de organização, evitando assim a colocação arbitrária de elementos em uma peça? João :: Há que se entender que alinhamento é simplesmente a relação que se estabelece entre elementos gráﬁcos (entendase letra ou imagem), segundo alguma espécie de eixo. Nada implica que este eixo tenha que ser rigorosamente ortogonal. Nem que tenha que se distribuir, sobre uma superfície, eixos vários segundo uma estrutura modular. A idéia de grid, de estrutura modular de uma superfície, é basicamente instrumental, não uma ferramenta de tortura, restrita. Há que se compreender a lógica dos eixos, que poderão ser modulados, ortogonal, oblíquo ou até mesmo sinuoso. O que importa é a lógica da composição. Tem equilíbrio? Possui os contrastes necessários à determinação das diferenças entre qualidades diferentes de informação, transmite a proporção adequada ao tratamento de uma determinada informação? Estas são as perguntas a se fazer. Wd :: Na edição de outubro, quando abordamos a construção da história do design para web, o professor da PUC-Rio, Rafael Cardoso, ressaltava que “...a forma como o legado da Bauhaus foi apropriado nos últimos 50 anos tem sido contra-producente para o design, especialmente

entrevista - as sementes do design :: 27

no Brasil. Essa idéia que as pessoas costumam fazer de funcionalidade

inteiramente

equivocada.

‘Função’

não existe, pelo menos no sentido funcionalista, com F maiúsculo. ‘Função’ como contraposição à ‘Estética’ é um desastre conceitual, que só tem prejudicado o design”. Como você enxerga essa relação entre a funcionalidade e a estética em um projeto? João :: A implantação do design moderno no Brasil se deu tal e qual uma espécie de religião, com seus dogmas e postulados absolutos. Neste sentido, a apreensão da natureza dos problemas e a discussão de suas possíveis soluções ficaram por muito tempo condicionados a alguns modelos. O que dificultou seriamente a compreensão de que design é o processo de análise de problemas, adequação e condução de soluções. A estética está na capacidade de se negociar linguagens entre três atores no processo de um projeto: o cliente, fonte inspiradora de qualquer ação projetiva; o usuário, que delineia um determinado tipo de linguagem própria; e o designer, responsável por agregar ao conjunto objetivo das questões de comunicação, um traço estético que conceda identidade ao projeto, dentro do quadro de atendimentos a aspectos objetivos do problema. Como aponta o Rafael, função não é uma característica unidimensional. A beleza, o prazer da forma, por exemplo, como diria Oscar Niemeyer, é função essencial a ser cumprida. Portanto, função para quem? E, mais complicado ainda, beleza para quem? Todo problema exige uma análise que avalie essa complexidade. A impressão mesmo é que o pensamento da Escola de Ulm que, mais do que a Bauhaus, foi o que conformou em princípio toda a educação de design por aqui, tendia a um pensamento mais mecânico, unidirecional, linear. Wd :: Para os profissionais que desejam se aprofundar no assunto “princípios do design”, que tipo de bibliografia você recomendaria? João :: Antes de tudo, alguns livros básicos sobre tipografia. A tipografia desempenha o papel condutor no campo do design gráfico. Sem a informação verbal, existem outros nomes para caracterizar o que, por muitas vezes, é chamado de design gráfico. Por exemplo, ilustração ou animação.

28 :: entrevista - as sementes do design

A letra, o desenho da letra e seu posicionamento no espaço se constituem como elementos básicos. Recomendaria alguns clássicos, ainda que alguns sejam

Dicas de leitura

relativamente recentes, mas mesmo assim clássicos,

- “Elementos do Estilo Tipográfico”

alguns

Autor: Robert Bringhurst

poucos

aqui

editados,

estrangeira, inglês ou espanhol.

outros

língua

Editora: Cosac Naify

- “Pensar com Tipos” Autora: Ellen Lupton Editora: Cosac Naify

- “The Thames and Hudson Manual of Typography” Autor: Ruari McLean Editora: Thames and Hudson

- “Grid systems in graphic design” Autor: Josef Muller-Brockmann Editora: Arthur Niggli

- “Making and breaking the grid” Autor: Timothy Samara Editora: Rockport

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

entrevista - AndrĂŠ Matarazzo :: 29

30 :: seu site está no ar!

Prepare-se para os desaﬁos da internet móvel No momento em que esta reportagem estava sendo produzida, a cidade do Rio de Janeiro, onde fica localizada a redação da Revista Webdesign, era brindada por um belo dia de sol. Apesar de o céu azul e límpido, devemos lembrar que, nos últimos anos, a expansão tecnológica levou para o ar das grandes cidades uma densa massa transparente, onde circulam diariamente milhões de informações. Estamos falando da tecnologia das redes sem fio. Através de dispositivos móveis, como telefones celulares e computadores de mão, ganhamos mobilidade, agilidade e flexibilidade para acessar dados de lugares

seu site está no ar! :: 31

“Tudo no celular deve ser muito mais objetivo, não só a interação, mas também conteúdo, partindo da premissa: ‘menos é sempre mais” Ricardo Figueira e maneiras antes inimagináveis. “É um excelente comple-

devem se preparar para uma nova e desafiante etapa de

mento que preenche uma lacuna importante na produti-

uma área que poderá trazer bons frutos em um futuro

vidade das empresas, principalmente. Para cada função,

não muito distante. Dessa forma, vamos procurar ajudá-

seus subsídios. Vendedores na rua, por exemplo, podem

los a entender por quais caminhos o design deverá seguir

facilmente acessar bases de dados ou sistemas que gerem

daqui para frente.

contratos, podem consultar preços e fechar uma venda em

Da internet “fixa” para internet móvel

poucos minutos, mesmo longe de um computador, apenas

Em julho de 2002, durante o 5º Encontro de Web

com um celular ou PDA na palma da mão”, exemplifica

Design, Mauro Alencar, diretor de criação da AKQA (www.

Stivy Soares, formado em Engenharia Elétrica pela UFSC

akqa.com), argumentava que “a natureza da internet é ser

(Universidade Federal de Santa Catarina) e em Design de

móvel. É estar com você onde quer que você esteja”.

Produtos pela CEFET - SC.

Pensando nisso, e levando em conta os conceitos

Para se ter uma idéia da rápida expansão deste seg-

de usabilidade, arquitetura da informação e os princí-

mento, as últimas estatísticas da Agência Nacional de

pios fundamentais do design, a primeira questão a ser

Telecomunicações (ANATEL) apontam mais de 94 milhões

avaliada está nos desafios e nas diferenças na hora de

de celulares habilitados no país, gerando uma otimista

se projetar interfaces para a internet “fixa” e para a

visão “de uma linha de celular para cada dois habitantes”.

internet móvel. “A diferença está basicamente em enten-

E as previsões envolvendo este mercado não param

der como ela se comporta com relação ao usuário e como

de surpreender! Em palestra recente, César S. Cesar, dire-

o usuário se adapta a interface. Algumas características

tor de marketing e vendas da Hands, detalhou as análises

devem ser estudadas e não simplesmente tomadas como

de algumas conceituadas consultorias do mercado de tec-

deﬁ ciência. É um modo de acesso diferente do que esta-

nologia, como Gartner, IDC e Ipsos Research, cujas esti-

mos acostumados em nossos confortáveis monitores, mas

mativas apontam que, em 2008, “o número de pessoas

não é um método deficiente”, afirma Thiago Rigonatti,

acessando a internet via dispositivos móveis ultrapassará

administrador do site Mobile Life (www.mobilelife.com.br)

os acessos através de computadores de mesa no mundo”.

e especialista em soluções e mercados móveis.

Diante desse cenário, as agências e os profissionais

Outro aspecto a ser considerado parte da própria tec-

que trabalham com a produção para mídias interativas

nologia móvel, que apresenta uma variedade considerável.

32 :: seu site está no ar!

“Não acredito que, como ocorreu na web ﬁxa, passaremos por um rebuscado período, com exageros no uso dos recursos e apenas no momento seguinte encontraremos o equilíbrio que hoje experimentamos na internet ﬁxa. Os limites nos impõem tal parcimônia” Stivy Soares “Desenvolver e criar ambientes de internet para mobile

URA

não é difícil do ponto de vista de viabilizar conteúdos em

Abreviatura de Unidade de Resposta Audível. Trate-se de um

celular. Entretanto, o complexo é fazer isso adequada-

aparelho utilizado por empresas de call center (atendimento) para

mente, com relevância e, principalmente, de forma consis-

que possam ser digitadas opções no atendimento eletrônico.

tente. Dentre os diversos desaﬁos, um dos maiores é atender de maneira adequada à diversidade de plataformas

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

e de recursos operacionais interativos disponíveis para a população usuária de mobile no Brasil. Comparando com

ceito tradicional de web, entretanto emprega basicamente

o universo de desenvolvimento web, imagine só, se de

conceitos de classificação e semântica como recursos de

certa forma é complexo desenvolver um site para rodar em

identificação de opções na interação”.

todos os browsers para Windows, Linux e macOs, imagine

O segundo são aqueles em que os recursos gráfi-

para mais de dez tipos de telas de tamanhos diferentes,

cos começam a ser utilizados. “Outro modelo interativo

inúmeros sistemas operacionais, diversos modelos interati-

bastante comum - e que traz um pouco mais de recur-

vos e ainda considerar a experiência de uso de cada porta-

sos gráficos, mas ainda assim a navegação é totalmente

dor”, analisa Ricardo Figueira, diretor de criação da Agên-

linear - são os de aplicação que utilizam, em vez de

ciaClick (www.agenciaclick.com.br).

opções textuais, ícones. Essas aplicações já possuem

Assim, o especialista ressalta que objetividade e

uma ligação menos direta com o menu numérico e seu

síntese serão as primeiras palavras no dicionário básico

modelo interativo ganha mais personalidade com o

de criação voltado para estes dispositivos. “O pensa-

recurso gráfico”, explica Ricardo.

mento criativo para desenhar interfaces e aplicações de

Por último, aparecem os mais sofisticados, cujo

celular é totalmente diferente da internet para desktops,

ambiente permite navegação em browser. “No geral são

partindo inclusive da premissa de que a relação do

completamente diferentes operacionalmente dos celulares

usuário com o seu mobile é completamente diferente

tradicionais e acompanham uma canetinha e tela touch-

do que com o seu computador pessoal, desde o modus

screen para substituir o mouse do computador tradicio-

operandis até a percepção de privacidade sobre o meio.

nal. Muitos deles já permitem interação multimídia e fácil

Tudo deve ser muito mais objetivo, não só a interação,

gerenciamento de informação. Entretanto, sua tela é ainda

mas também conteúdo, partindo da premissa: ‘menos é

bem pequena comparada ao computador, o que também

sempre mais’. O desafio para criar a interação começa

exige o princípio da objetividade em relação às opções de

exatamente aí, na busca da consistência e da síntese no

interação e conteúdo disponível”.

mínimo de esforço e recurso para o usuário”.

Segundo Ricardo, à primeira vista, esses modelos

Formas de interação com a interface

podem ser apontados como ideais, por herdarem possi-

Antes de partimos para as etapas de criação e

bilidades interativas similares ao computador tradicional.

desenvolvimento de sites para dispositivos móveis, vamos

Porém, devemos lembrar dos obstáculos econômicos para

conhecer os modelos de interação de interface. Segundo

a sua expansão. “Seu preço no Brasil ainda é muito alto,

Ricardo Figueira, são basicamente três. “O modelo mais

tornando o produto um pouco inacessível. De qualquer

básico, e de maior capilaridade entre os usuários, é um

forma, quem já tem um celular deste tipo, e sabe utilizar

arquétipo interativo que utiliza scroll, selecionar, avançar

seus recursos, adquire outra relação com o seu aparelho,

e retornar. A interação é similar à operação de URA, onde

integrando realmente a internet móvel nos hábitos do dia-

as informações são acessíveis pela indexação e escolha

a-dia de forma natural e espontânea. Para estes apare-

linear de opções. Este modelo é o mais distante do con-

lhos, a interface cria uma infinidade de experiências muito

seu site está no ar! :: 33

similares ao computador em que a experiência de desenvolvimento de interfaces web passa a ser mais utilizada, porém associada a outros princípios, principalmente a conveniência. Isso é um tipo de preocupação que muitos desenvolvedores para mobile já possuem incorporados no seu cotidiano e que precede qualquer outra finalidade, mesmo as estratégias mais ousadas”, argumenta. Vou criar um site móvel. Por onde começo? A primeira resposta que surge para tal questionamento passa pela busca da funcionalidade. “Um site projetado para dispositivos móveis precisa ser, antes de tudo, funcional. Precisa ter um objetivo concreto e suprir necessidades. Arrisco dizer que, nessa área, hoje revivemos uma fase ‘arts and crafts’, em que cada elemento do design tem sua função. Não acredito que, como ocorreu na web fixa, passaremos por um rebuscado período, com exageros no uso dos recursos e apenas no momento seguinte encontraremos o equilíbrio que hoje experimentamos na internet fixa. Os limites nos impõem tal parcimônia”, orienta Stivy Soares. Arts and Crafts

Movimento estético surgido na Inglaterra, em meados do século XIX. Fez frente aos avanços da indústria e pretendia imprimir em móveis e objetos o traço do artesão-artista, que mais tarde seria conhecido como designer. Fonte: Wikipédia (http://pt.wikipedia.org/wiki/Arts_and_Crafts)

A experiência de Luiz Cláudio Tângari, sócio-diretor da Meritia (www.meritia.com), aponta que a criação e o desenvolvimento seguem praticamente o mesmo fluxo de um site para internet “fixa”, com algumas particularidades significativas. “O site deverá ter páginas de leitura rápida. Além disso, o tamanho delas é um fator restritivo (para o acesso não ficar muito caro). Outra recomendação é desenvolver de três a sete padrões de layout, que deverão ser alternados segundo o modelo de dispositivo usado pelo cliente. Por final, os testes são muito mais (muito mesmo) trabalhosos”, descreve. “Na minha visão, é essencial passarmos por, pelo menos, quatro fases: sendo a primeira o estudo sobre a relevância e o valor do produto a ser oferecido sob contexto mobile; em segundo, o desenho da arquitetura interativa do produto ou serviço; em terceiro, o desenvolvimento tecnológico; e, por fim, testes, tanto de usabilidade quanto de performance”,

34 :: seu site está no ar!

completa Ricardo Figueira. Outra dica é definir como prioridade a definição do conteúdo a ser publicado. “Usuários móveis possuem, em geral, uma perspectiva diferente de usuários de desktops. Comumente tem uma intenção ime-

W3C e os dispositivos móveis O W3C disponibiliza o documento “Mobile Web Best Practices 1.0” (http://tinyurl. com/r2rcl), no qual aponta as melhores

diata e específica para encontrar um certo conteúdo e procuram uma

práticas para desenvolvimento web voltado

certa informação ou parte dela que sejam relevantes para seu uso. Esses

para dispositivos móveis. A idéia é que um

usuários dificilmente se interessam por navegar em um site procurando

site seja desenvolvido uma única vez e seja

o conteúdo ou lêem longos documentos, até mesmo por conta da anato-

possível acessá-lo tanto no computador

mia dos seus dispositivos”, indica Thiago Rigonatti. Além disso, os especialistas afirmam que a aplicação da premissa

quanto no dispositivo móvel. Fonte: SemJanelas.net (http://tinyurl. com/lul2l)

“menos é mais”, criada pela Escola de Bauhaus, será muito útil nestes ambientes. “Se nunca teve a (infeliz) experiência de um usuário móvel que acessa um site feito para PC, faça o teste: redimensione a sua janela de browser para algo em torno de 240x120 pixels e logo irá ver a dificuldade para se navegar. A maioria dos browsers para esses dispositivos não trabalha com uma série de recursos disponíveis para PC. Então, de nada adianta aquele script fantástico ou aquele frame bacana no topo do site. Por último, mas não menos importante, procure seguir os padrões de desenvolvimento web. O W3C é uma referência no assunto. Projetar um site de acordo com os padrões oferece uma facilidade até mesmo pela visão linear de evolução da web oferecida pela organização”, diz Thiago. Como fica o design para a internet móvel? Parece que uma dúvida muito comum quando falamos da tecnologia móvel, mais especificamente de internet, está no relacionamento entre o que praticamos para plataformas fixas e o que não faremos em dispositivos móveis e vice-versa, além dos conceitos de design que podem ser aplicados nestes ambientes. “Quando vejo um lançamento de site convencional, admiro os setores que realizam estudo de cores, design, diagramação e testes de usabilidade e navegação. Infelizmente, quando se fala de dispositivos móveis, a maioria do mercado acredita numa adaptação ou migração sem dar atenção aos mesmos itens. Um mesmo usuário pode acessar o site freqüentemente pelo PC ou pelo dispositivo móvel. É o mesmo usuário procurando conteúdos (ou parte dele) de uma forma diferente. Entregar uma mera adaptação sem prévio estudo demonstra o descaso pelo acesso do visitante que é o motivo da existência do próprio website”, alerta Thiago. Assim, o especialista destaca a importância de se conhecer as características que permeiam os ambientes que proporcionam o uso desta tecnologia. “A tendência em um desktop é trabalharmos de forma a mostrar o conteúdo em wide screen (maior amplitude horizontal), enquanto em um dispositivo móvel a maioria das telas se posiciona na vertical. Esse é o primeiro vetor. O segundo é que geralmente esses dispositivos não possuem um sistema de navegação como o ‘mouse’, dependendo de toques na tela ou algum cursor com clique seletor, o que influencia

“A diferença está basicamente em entender como ela se comporta com relação ao usuário e como o usuário se adapta a interface. Algumas características devem ser estudadas e não simplesmente tomadas como deﬁciência” Thiago Rigonatti

seu site está no ar! :: 35

diretamente o design de sua aplicação ou website”, orienta. Pensando nestes detalhes, o design será guiado por algumas recomendações. “As palavras de ordem são navegabilidade e legibilidade. Quanto menos imagens, melhor, mas se for utilizá-las, que sejam as mais leves possíveis, sempre cuidando para que não extrapolem os limites da tela. Mantenha as dimensões das imagens sempre fixas, para que, caso não sejam carregadas, não deformem o layout do site”, explica Stivy Soares. Ele ressalta ainda os cuidados com o uso de funções específicas oriundas do desenvolvimento na internet fixa e na hora de se definir a combinação cromática das interfaces. “Imagens em botões geram um problema a mais quando os visitantes optam por não carregá-las. Para evitar esse tipo de problema, abuse das tags de ALT. Lembre-se que esses dispositivos não têm mouse e boa parte não tem teclado, então esqueça por completo da função onMouseOver e similares. Quando necessário, coletar informações com pouco texto digitável ou, preferencialmente, através de respostas prontas selecionadas com checkbox ou radiobox. Evite frames, popups e DIVs ﬂutuantes. Evite cores exóticas, pois as telinhas dificilmente as suportarão. Nesse mesmo sentido, trabalhe com o máximo de contraste entre fundo e texto, facilitando a leitura”. Para finalizar, Eduardo de Souza, sócio-diretor de criação na kwead. com, lembra que a usabilidade será um dos conceitos mais utilizados nestes projetos. “Usabilidade, sempre, em primeiro lugar. É importante termos um cabeçalho indicando onde estou e uma barra de navegação fácil de ser identificada, de preferência no topo e no final da tela (para quem fez internet em 95/96, isso é bem familiar)”. Como vender um site para dispositivos móveis? Para fisgar possíveis clientes interessados em direcionar investimentos neste segmento, um bom argumento de venda é apresentar como o público-alvo da empresa vem se relacionando com tal tecnologia. “Devemos pensar para que ou por que o cliente de uma determinada empresa acessaria algum tipo de conteúdo na rua. Por exemplo: o que podemos oferecer de serviço para facilitar a vida desse cliente?”, questiona Eduardo de Souza. Para se ter uma idéia, esse foi um dos principais fatores que levaram a Caixa Econômica Federal a produzir uma versão mobile de seu site (saiba mais informações, na página 35). Além disso, a possibilidade de se ampliar o canal de relacionamento com os clientes, sempre será um fator positivo na hora de vender novos modelos de negócio. “Uma versão mobile de um website pode servir para ofertar um serviço ou aumentar o seu acesso a um determinado conteúdo. Tudo depende do seu modelo de negócio e de procurar focos de disseminação para seu modelo de receita. Vale lembrar ainda que o website pode ser a ferramenta de acesso a um determinado serviço que poderá ser entregue por outro meio”, indica Thiago Rigonatti.

36 :: seu site está no ar!

A sua CAIXA Móvel Bate-papo: Flávio Barros, gerente nacional da internet e canais móveis da CAIXA

o desenvolvimento do site para dispositivos móveis. Wd :: Quais foram as etapas envolvidas na criação do site para dispositivos móveis? Flávio :: As etapas envolvidas na criação foram: iden-

Nesta entrevista, Flávio Barros revela as razões para

tificação das necessidades de produtos e serviços a serem

a Caixa Econômica Federal (CAIXA) lançar uma versão

disponibilizadas; layout das telas; desenvolvimento dos

para dispositivos móveis do site da instituição. Confira.

aplicativos, a homologação das funcionalidades; e, após

Wd :: Quais motivos levaram a CAIXA a desenvolver uma versão mobile de seu site? Flávio :: O principal motivo foi criar um novo canal com o objetivo de intensiﬁcar o relacionamento entre a ins-

a divulgação, a entrada em produção e monitoração da versão mobile do site da CAIXA. Wd :: Quais ferramentas vocês utilizaram na hora de criar e desenvolver o site?

tituição e seus clientes. Além disso, proporcionamos maior

Flávio :: Desenvolvemos a versão mobile do site da

comodidade (o cliente pode receber informações sobre

CAIXA internamente e utilizamos as linguagens WML,

datas/avisos dos benefícios sociais e economiza ao evitar

HTML e ASP.

deslocamentos às agências ou terminais) e aproveitamos o crescimento de telefonia móvel, trazendo assim uma oportunidade de acesso aos serviços móveis da CAIXA pelos usuários de celular de todas as classes sociais. Wd :: Qual o perfil do público que acessa o site da CAIXA através de dispositivos móveis? Que tipo de

Simule uma navegação móvel!

métricas vocês utilizam para medir o número de acessos através deste ambiente? Flávio :: O perfil do usuário é aquele que já é cliente ou qualquer pessoa que possui um dispositivo móvel (celular, computadores de mão, Palmtop ou Pocket PC) que tenha acesso à internet, via tecnologia WAP. Além de consultar os resultados das loterias e capitalização, saldo do FGTS, telefones CAIXA e calendários sociais, o usuário poderá acessar suas contas para consultar saldo e extrato. Quanto às métricas utilizadas, a CAIXA possui aplicativos internos que registram diariamente os acessos aos produtos, bem como as novas adesões efetuadas no canal. Wd :: Levando em conta os conceitos de usabilidade, arquitetura da informação e os princípios fundamentais do design, quais foram os desafios enfrentados na hora da criação e do desenvolvimento da versão do site da CAIXA para dispositivos móveis? Flávio :: O principal desafio enfrentado quanto à usabilidade foi adaptar os produtos CAIXA às telas dos dispositivos móveis, sem que houvesse o comprometimento da visualização das informações e levando em conta a praticidade da navegação nas telas. A falta de padronização quanto ao formato e tamanho das telas também dificultou

A Opera disponibiliza um simulador on-line de navegação móvel (http://tinyurl.com/9uxks), o “Opera Mini Simulator”, através de uma interface que sugere o uso de um telefone celular. Muito útil para quem não conhece o ambiente e deseja aprender mais sobre a tecnologia. Exemplos de sites móveis - Bloglines (http://bloglines.com/mobile) - CNN Mobile (http://www.cnn.com/mobile) - Herald Tribune (http://mobile.iht.com) - Google (http://tinyurl.com/rka5y) - Mobile Flickr (http://www.flickr.com/mob) - New York Times (http://mobile.nytimes.com) - Selig (http://wap.selig.com.br) - Time Mobile (http://mobile.time.com) - Yahoo!Mobile (http://mobile.yahoo.com) - Wapedia (http://pda.du.wapedia.org) - Wapedia Português (http://pt.wapedia.org) Fontes: Eduardo de Souza, Luiz Cláudio Tângari, Ricardo Figueira e Thiago Rigonatti

seu site está no ar! :: 37

Bibliografia sobre internet móvel Artigos - “Desenvolvendo websites para PDA” Fonte: Mobile Life (http://tinyurl.com/mwbzc)

- “Designing for Mobile” Fonte: Blue Favor (http://tinyurl.com/e9eo6)

- “Make Your Site Mobile-Friendly in Two Minutes” Fonte: Mike Davidson Blog (http://tinyurl.com/clc96)

- “Where Are All the Mobile Internet Users?” Fonte: eMarketer.com (http://tinyurl.com/ht2fc) Fontes: Eduardo de Souza, Luiz Cláudio Tângari, Ricardo Figueira e Thiago Rigonatti

Livros - “Handheld Usability” Autor: Scott Weiss (www.handheldusability.info)

- “Mobile and Wireless Design Essentials” Autor: Martyn Mallick (http://tinyurl.com/rqua2) Fonte: Luiz Cláudio Tângari

Sites para consulta - Flash Devices (www.flashdevices.net) - GSM Arena (www.gsmarena.com) - Infosync (www.infosyncworld.com) - Luciano Ayres - Blog (www.lucianoayres.com/blog) - Marco Casario Blog (http://casario.blogs.com/mmworld) - mGain (www.knowledge.hut.ﬁ/projects/mgain/index.html) - MobHappy (http://mobhappy.com/blog1) - Wap Review (http://wapreview.com/blog) Fontes: Eduardo de Souza, Luiz Cláudio Tângari, Ricardo Figueira e Thiago Rigonatti

40 :: debate - atuais influências

atuais influencias À primeira vista, analisando alguns grandes projetos digitais feitos por agências e freelancers brasileiros, podemos afirmar que o estilo urbano é uma das tendências estéticas mais utilizadas atualmente. Do grafite e da arte de rua passando pelo design clean da Apple, é possível apontar quais são as linguagens e os conceitos que vêm influenciando o design para web?

:: Armando Fontes Webdesigner na Weblife Studios www.armandofontes.com.br

mente dedicado à pesquisa e inovação, seja substituído pela geração expressa de alternativas sustentadas apenas

“A web é tão multicultural que não consigo ver ape-

no repertório do designer. Funciona como uma cômoda

nas uma linguagem em voga: vejo muitos modismos, com

fórmula de sucesso, só que, como design não é fórmula, a

estéticas cada vez mais perecíveis. Não existe mais a pere-

solução encontrada torna-se rapidamente ultrapassada.

nidade. Pode-se constatar que nos sites de maior sucesso

Com o Google e o Photoshop abertos, procura-se uma

atualmente o que se destaca não é o visual. É um conjunto

imagem, uma fonte da moda e aplica-se o efeito mais cool

completo de soluções em design; com arquitetura de infor-

do momento. Está pronto um site que vai ‘bombar’ como

mação bem pensada, funções interessantes, integradas a

sendo o melhor de todos os tempos da última semana. Na

um visual marcante, não necessariamente vanguarda. Sou

semana seguinte, ele já era.

fã do Box.net (www.box.net), que em meio a tantos sites

São muitos os sites que coloco nos Favoritos apenas

de compartilhamento de arquivos, apresenta um serviço

pelo apelo visual, mas volta e meia me pergunto por que

muito inteligente.

nunca mais volto a visitá-los. Ora, se eles não têm conteúdo,

Voltando a falar apenas do visual, o que acontece,

funcionam como o último sucesso nas rádios: tocam até a

infelizmente, com freqüência, é que o prazo dos projetos

exaustão e depois todo mundo esquece logo. Está na hora

é cada vez mais curto, fazendo com que o tempo, anterior-

de consumir ou gerar outra novidade.”

debate - atuais influências :: 41

no design para web “Acredito que nosso papel, como proﬁssionais, é usar qualquer linguagem e conceito que seja :: Victor Sahate

conveniente ao mesmo tempo para o projeto, para

Diretor de arte da Gringo www.gringo.nu

o cliente, para os usuários e para nós”

“Uma vez, um amigo, que é professor de educação

enorme na internet e tem influenciado bastante os desig-

física e personal trainer, me falou uma frase enquanto con-

ners, que largaram a idéia quadradona, retinha e perfei-

versávamos poeticamente sobre o metabolismo, alimenta-

ta dos pixels para trabalhar com os ‘blurs’, movimentos,

ção e saúde: ‘nenhuma comida engorda, quem engorda é

‘zooms’, luzes, brilhos e sombras comuns e hiper-realis-

você!’. Da mesma forma me sinto confortável em dizer: ‘o

tas dos vídeos. Do outro está o que alguns chamam de

design para web não sofre influências, quem se influencia

‘web2.0’, voltada e focada para redes sociais, com con-

é você!’. Cada designer tem sua percepção individualizada

teúdo desenvolvido, criado e alterado por usuários e que

do mundo. Cada um tem suas experiências e seus traços,

traz consigo também um ar estético peculiar. Esses sites

cada um é impactado no decorrer da vida por estímulos,

normalmente não têm muitas imagens, são leves, com co-

tendências, vontades, desejos e emoções bem originais,

res chapadas, box bem retos, fontes grandes e padrões,

mas será que não tem alguma coisa em comum nos sites

bem ‘HTMLzentos’, lembrando, às vezes, aqueles primeiros

que vemos por aí?

sites de dez anos atrás - é como se o site não quisesse cor-

Atualmente, a internet caminha em dois grandes eixos. O primeiro é o eixo publicitário, sendo vista como um meio

rer riscos de não ser acessado por alguém no mundo por qualquer motivo.

super potencializado, onde vídeos, filmes, animações, efei-

Acredito que nosso papel, como profissionais, é usar

tos especiais, narrações e sons ficam cada vez mais comuns,

qualquer linguagem e conceito que seja conveniente ao

bem finalizados e atrativos. Com isso, a internet ganha uma

mesmo tempo para o projeto, para o cliente, para os usuá-

cara mais cinematográfica, como pode ser visto em hotsi-

rios e para nós. Somos cada vez mais livres para criar boas

tes, sites promocionais, lançamentos, sites de filmes, ban-

soluções. Quando falamos ‘da arte de rua até o design

das etc. O outro eixo é social e tem como base a interação

clean da Apple’ já representamos um universo bem amplo

entre pessoas, grupos e comunidades - como os sites do

de opções estéticas, onde todas fazem sentido no meio

Google, Yahoo e boas iniciativas da Globo.com no Brasil. As

internet e funcionam. Importante é perceber até onde a

linguagens mais usadas hoje em dia derivam desses eixos.

expressão artística deve se conter para atender às exigên-

De um lado, a estética de cinema/TV ganha um espaço

cias e limitações de um bom projeto.”

42 :: debate - atuais influências

:: Gustavo Scandiuzzi Diretor de criação da Rage www.rage.com.br

“O que é fashion hoje, amanhã pode

“A web tem o propósito de poder inovar, permite mente livre,

ser brega e vice-versa. Um site bem

aberta ao velho e ao novo. A expressão neste meio ainda é extrema-

concebido é aquele que tem unidade e é

mente livre, isso permite que tenhamos opostos e todos sobrevivam

ﬁel a seu público-alvo. No fundo, quem deﬁne o que é tendência é a população”

tranqüilamente, sem preconceito ou avalanche de rótulos ou doutrinas. Essa diversidade é que é encantadora na web. Tendências? Há sempre em todos os locais, na web não é diferente. Tudo reflete também como ondas que vão e vêm ou se misturam gerando novos conceitos e novas tendências. Muito do que se vê nas ruas está sendo utilizado como referência para se criar experiências on-line com uma visão mais ampla e com uma linha gráfica mais livre, o que permite ao usuário uma interação que vai além de um simples avançar e voltar entre páginas estáticas, diferente da estética conservadora e blocada que tínhamos até pouco tempo atrás. O dinamismo da web permite testar vários conceitos, sejam novos ou de filosofias antigas. Essa mistura de conceitos e redefinições do que é a arte é que permitem a geração de novos traços, novas vidas e novas tendências. Isso é o mais envolvente do meio. A miscigenação de idéias é que quebram barreiras e geram novos conceitos de design. Acredito que é possível se ter um design clean, mas que, ao mesmo tempo, seja impactante. Assim como é possível ter um design over em cores e traços e, ao mesmo tempo, parecer clean e ter seu aspecto também impactante. O que diferencia um bom trabalho é o conjunto do design com o objetivo/propósito do conteúdo abordado e a qual target está direcionado a atingir. Regras rígidas em design? Isso é crime contra a criatividade. O que é fashion hoje, amanhã pode ser brega e vice-versa. Um site bem concebido é aquele que tem unidade e é fiel a seu público-alvo. No fundo, quem define o que é tendência é a população. O design é só o espelho do que a sociedade apresenta. No caso da web, a sociedade não tem fronteira de idade, sexo, credo ou idioma, o que gera uma diversidade absolutamente apaixonante e complexa em sua definição, forma e geração de resultados.”

debate - atuais influências :: 43

Luiz Fernando Souza Diretor de arte de web na Editora Abril www.eﬂux.com.br

“Estamos deixando para trás aquela fase em que, para nos intitularmos designers de internet (e suas muitas variáveis), bastava fazer um curso de Dreamweaver, saber um pouco de Flash e sair fazendo páginas por aí. Hoje, o mercado está acordando para a importância da mídia internet e o próprio público está exigindo cada vez mais, seja na facilidade de navegação, objetividade, tecnologia, conteúdo diferenciado e, sobretudo, emoção, arte e design. Com o aperfeiçoamento dos softwares e a disponibilização de bandas cada vez mais largas, estão se tornando mais comuns sites com grandes imagens e filmes interativos que tomam todo o fundo de uma tela. Isso traz um impacto e uma identidade com a marca muito grandes, lembrando que a pessoa só está lá porque ela desejou assim. A interatividade com o público é outro fator que traz a simplicidade como ponto chave na navegação. Em tempos onde é comum se ter uma câmera no bolso, todos querem ter seus 15 minutos de fama, disponibilizando fotos e vídeos on-line. Assim, o papel da internet é tornar isso realidade e da forma mais fácil possível. Simplicidade é a palavra. Sem deixar a emoção de lado.”

“COM O APERFEIÇOAMENTO

DOS SOFTWARES E A DISPONIBILIZAÇÃO DE

BANDAS CADA VEZ MAIS LARGAS, ESTÃO SE TORNANDO MAIS COMUNS SITES

COM GRANDES

IMAGENS E FILMES

INTERATIVOS QUE TOMAM TODO

”

O FUNDO DE UMA TELA

44 :: debate - atuais influências

gan

par

tici he p pe e rê m ios!

Participação dos assinantes Quais são as linguagens e os conceitos que inﬂuenciam o design para web atualmente?

Marcio Toledo mntoledo@gmail.com

Atualmente, acredito que o cinema tem grande influência no design para web. Alguns estilos como grafite e retrô, com uma pitada de experimentalismo, também estão em ascensão de tempos para cá. Os conceitos, ao meu ver, se formam através da bagagem cultural e profissional de cada um dos envolvido nos projetos para web. Com isso, surgem todos os dias trabalhos com mais di-

vencedor!

versidade de conceitos e muito interessantes.

Alexander Rodrigues alexrodrigues43@yahoo.com.br

Não tem como falar de web hoje em dia e não citar o AJAX na parte do desenvolvimento. Tudo o que gira em torno do que se convencionou chamar de web 2.0 inﬂuencia muito os novos projetos. Conteúdo produzido pelo usuário, comunidades produtoras de conhecimento, descentralização do poder de publicação e outras coisas.

Luciano Loffi lucianoloffi@gmail.com

O design para web está se aperfeiçoando, a necessidade de relacionar-se cada vez mais na web é o grande xis da questão. Nessa onda, as novas tecnologias precisam estar direcionadas em suprir essa demanda - interatividade ao extremo, individualizar a comunicação e conteúdos altamente dirigidos para os diferentes tipos de públicos estão entre as características que farão a diferença.

Carlos de Oliveira vamoss@vamoss.com.br

A linguagem do momento é o JavaScript, pois ela tem proporcionado a chamada evolução da web (Web 2.0). Além dela, temos o CSS, que tem mostrado um lado criativo de fazer layouts, pois estou sempre achando peças inovadoras pela internet!

Samira Bittar olhosespanhois@hotmail.com

ActionScript, PHP, .Net, C, ASP, entre outras linguagens podem estar na moda, mas o Java permanece com o seu reinado. O melhor conceito para um bom site é que ele seja limpo, direto e que fale com o usuário como se fala com um amigo íntimo.

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

O autor da melhor resposta ganha prêmios.

design na web: construindo sua histรณria :: 45

46 :: e-mais - construção de marcas

como ferramenta na construção de marcas reportagem sugerida pela leitora Renata Pimentel (rspimentel@globo.com)

Provavelmente, você já deve ter ouvido falar de branding,

importante do que a ‘realidade’. O maior valor de um

um dos termos mais constantes nos dicionários práticos dos

produto está construído na mente do consumidor e não

proﬁssionais de marketing e que está intimamente ligado ao

necessariamente nos atributos físicos que estão sendo

processo contínuo de construção de uma marca no mercado.

vendidos. Por exemplo, a percepção que você tem de

“O brand é a percepção do consumidor de um produ-

uma marca de refrigerante é definitivamente mais impor-

to ou serviço. Ou seja, é absolutamente crucial para toda

tante do que o líquido sendo efetivamente consumido”,

a estratégia de marketing e comunicação aplicada a um

explica Marcello Póvoa, sócio e diretor da MPP Solutions

produto (ou serviço). Percepção é, em muitos casos, mais

(www.mppsolutions.com).

“De nada adianta uma bela identidade visual e uma boa campanha de comunicação se o site não funcionar. O consumidor simplesmente não volta se o site não funcionar” Marcello Póvoa

e-mais - construção de marcas :: 47

Além disso, o branding se tornou uma importante estratégia competitiva para se diferenciar uma marca da outra. “Acredito que muitas empresas têm inclusive descoberto novos potenciais a partir de sua estratégia de branding. Tem feito elas enxergarem quem é perfeitamen-

“A internet é uma mídia bidirecional que permite o diálogo entre marca e consumidor, o que facilita a prática de branding” Daniel Vasconcelos

te o seu público. Já não existem mais marcas/produtos sem público. Primeiro se pensa em quem quer atingir, para

busca, e que hoje tem um dos brands mais valiosos do pla-

depois pensar o que se vai inventar para atendê-lo”, diz

neta”, afirma Marcello.

Junior Simões, diretor de Mídia Interativa & Eventos da agência Tangerina (www.tangerina.com.br).

Tal aspecto ganhou extrema importância justamente pelo fato de as empresas estarem cada vez mais próximas

Tão fundamental que o investimento em ações na área

de seu público-alvo. “Por um lado, a internet fortaleceu o

se tornaram permanentes. “As empresas devem investir em

aspecto racional da decisão de compra, uma vez que derru-

branding para manter o contato com os seus clientes em

bou fronteiras e permite fácil comparação entre produtos

uma troca constante de valores que vão além do seu pro-

em escala global. Por outro, é uma mídia bidirecional que

duto. O resultado dessa troca é o que vai ficar associado

permite o diálogo entre marca e consumidor, o que facilita

ao produto de forma positiva ou não influenciando no rela-

a prática de branding. Uma tendência recente é branding

cionamento do consumidor com a marca”, aponta Marcos

por conteúdo, ou seja, anunciantes estão criando canais de

Veiga, designer sênior do iG (Internet Group).

TV, podcasts, videocasts ou revistas on-line que, além de

Para Daniel Vasconcelos, designer gráﬁco com mestrado

promoverem suas marcas, promovem o estilo de vida em

em Marketing Communications pela Universidade de West-

que elas se inserem. A possibilidade de criação de comuni-

minster, em Londres, um bom exemplo deste cenário está

dades e o acesso exclusivo à promoções também ajudam a

presente no iPod. “Hoje em dia poucos são os produtos e

construir a marca on-line”, diz Daniel.

serviços impossíveis de serem copiados. A única parte à prova

“A internet permitiu que as empresas ficassem mais

de cópia é a marca e o próprio design do produto. O iPod é o

próximas de seu público, tendo uma troca de experiências

maior exemplo disso, uma vez que existem milhares de digital

direta entre seus produtos e consumidores, uma interativi-

music players no mercado, mas nenhum conseguiu chegar

dade que não era possível pela TV ou outras mídias conven-

perto da marca e design da Apple”.

cionais. Criou-se assim um canal onde se pode rapidamente

Branding na era da internet

mensurar os resultados de suas ações junto a esse público

Uma das principais mudanças ocasionadas nas estra-

e moldar essas ações de acordo com os resultados obtidos.

tégias de branding está na forma como os consumidores

Em geral, a boa aceitação do usuário em uma brand expe-

se relacionam com as marcas. “A web não mudou o concei-

rience o transforma em propagador dessa ação que passa a

to de branding, mas sim algumas de suas práticas. Talvez

difundir sua experiência pela rede em forma de marketing

a mais significativa tenha sido a importância do aspecto

viral”, completa Marcos.

funcional na percepção do consumidor. Ou seja, de nada

Falando em campanhas virais, Daniel cita um recente

adianta uma bela identidade visual e uma boa campanha

caso ocorrido no cenário musical da Inglaterra. “A inter-

de comunicação se o site não funcionar. O consumidor sim-

net fez o marketing viral se transformar numa ferramenta

plesmente não volta se o site não funcionar. Vide o Google,

extremamente poderosa. A banda Arctic Monkeys (www.

um site construído em cima de um algoritmo inovador de

arcticmonkeys.com) se tornou recordista em vendas por

48 :: e-mais - construção de marcas

“A boa aceitação do usuário em uma brand experience o transforma em propagador dessa ação que passa a difundir sua experiência pela rede em forma de marketing viral” Marcos Veiga várias semanas, depois de permitir o download gratuito do

digital. “O design em uma estratégia de branding, além

seu single de estréia no MySpace”.

de estabelecer uma identidade para todos os estágios e

Outro bom exemplo está presente nos blogs corporati-

peças que compõem essa ação, visa tornar a experiência do

vos, que apontam as mudanças na forma como as empresas

usuário agradável e intuitiva. É a forma de fisgar o consumi-

vêm se relacionando com seus clientes. “A marca deve ser

dor visualmente e também de guiá-lo por essa experiência,

fluída, deve ser percebida a todo instante e em qualquer

estabelecendo a ordem e o conjunto em que as informa-

meio. E não falo apenas da marca como nós designers cos-

ções possam ser melhor absorvidas. A mensagem deve ser

tumamos imaginá-la - tipográfica, colorida, um desenho.

de rápida assimilação para manter o interesse do usuário

Falo da sua percepção e presença como um todo junto ao

que a partir daí poderá se aprofundar em sua experiência”,

consumidor. Temos hoje com a internet uma relação com

afirma Marcos Veiga.

marcas vivida em sua plenitude. Visitamos infinidades de

Dessa forma, Junior Simões aconselha que o designer in-

sites atrás de notícias, serviços, facilidades e bom preço.

vista em um segmento que poderá representar sempre novas

Mataram o ombudsman, um rapaz que ninguém nunca tinha

oportunidades em sua carreira. “Assim como agora a marca

visto o rosto, nascido no final dos anos 80, e colocaram no

deve estar presente e se relacionando com o cliente de ma-

lugar dele um blog, onde as empresas comentam sobre seus

neira rápida e em vários formatos e mídias ao mesmo tempo,

produtos, suas intenções, seus costumes, recebem críticas

a presença e estratégia de como esta marca irá se relacionar

e falam com o seu consumidor em primeira pessoa, rápido,

na web é de suma importância. Para o designer, a percepção

fácil e de forma inteligente”, analisa Junior.

do que é branding em sua essência vai fazê-lo abrir os hori-

O papel do design nas estratégias de branding

zontes para um mundo muito além da criação no Illustrator ou

Diante dessas transformações, o design será uma im-

Photoshop. Ele deverá aprender e saber de mercado, público-

portante ferramenta na construção e no desenvolvimento

alvo, estratégias de marketing, dentre outras para criar de

de marcas em tempos de uma sociedade cada vez mais

maneira correta, criativa e cada vez mais global”.

e-mais - construção de marcas :: 49

“Para o designer, a percepção do que é branding em sua essência vai fazê-lo abrir os horizontes para um mundo muito além da criação no Illustrator ou Photoshop” Junior Simões

Biblioteca de branding - Daniel Vasconcelos “Wally Olins on Brand” Autor: Wally Olins / Editora: Thames & Hudson “Excelente livro teórico, mas de fácil leitura sobre

Por que esses sites são bons exemplos de branding?

branding e como marcas funcionam. O autor é considerado uma autoridade em branding e foi co-fundador da Wolff Olins, uma renomada consultoria da área”

- CNET (www.cnet.com)

“Marks of Excellence”

“Um site de tecnologia tão completo, vasto e bem

Autor: Per Mollerup / Editora: Phaidon Press

organizado, que qualifica a marca como a melhor

“Traça a origem e a história das marcas. Mostra

do gênero, e vice-versa”

evolução do conceito de marca registrada, rico em exemplos e ilustrações”

- Do Something Amazing (www.dosomethingamazing.com)

- “Brand Apart”

“Site da Força Aérea Norte-Americana para recru-

Autor: Joe Duffy / Editora: One Club Publishing

tamento. Para quem gosta do assunto, vende muito

“Mostra como marcas conhecidas criaram e

bem a imagem da Instituição Militar”

desenvolveram seus ‘brand voice’. Interessante referência sobre como desenvolver a personalidade de

- Nike Air

uma marca a partir do logo”

(www.nike.com/nikeair/us) “O refinamento gráfico e a tecnologia no site refletem a preocupação com a excelência da marca e seu posicionamento”

- Junior Simões “Brand Equity, Gerenciando o Valor da Marca” Autor: David A. Aaker / Editora: Negócio

- The Altoids Entertainment Extravaganza (www.altoids.com) “Belo exemplo de comunicação de marca através de um estilo gráfico muito elaborado e proprietário” Fonte: Marcello Póvoa

“Harvard Business Review on Brand Management” Autor: Vários / Editora: Harvard Business School Press “The Brand Gap: How to Bridge the Distance Between Business Strategy and Design” Autor: Marty Neumeier/ Editora: New Riders Press

estudo de caso - Kid Abelha :: 51

O que você sabe sobre as abelhas? Abelhas operárias, colméia, favo, flor de lótus, néctar, polinização. Não, a Revista Webdesign não virou um uma revista especializada em zoologia! Na verdade, a abordagem sobre tais elementos serve para mostrar como a concepção de um site pode ir muito além da tecnologia. Foi justamente o que aconteceu com Gabriel de Oliveira (www.gabrieloliveira.com.br), responsável pelo design do novo site da banda Kid Abelha (www.kidabelha.com.br). Para chegar na atual interface, ele teve que fazer uma profunda pesquisa sobre o comportamento das abelhas e desenhar vários rascunhos em papel. Nesta entrevista, Gabriel vai revelar os principais desafios no projeto, além dos detalhes técnicos envolvidos para que o conceito inicial pudesse se tornar realidade. Boa leitura! Wd :: Ao acessar pela primeira vez o site da banda,

Wd :: Um dos principais desafios neste

o usuário é avisado que a resolução de tela para melhor

projeto era apresentar os 24 anos da banda de

v i s u a l i z a ç ã o é d e 1 0 2 4 x 7 6 8 p i x e l s . Q u a i s f a t o re s

forma completa, através de uma navegação simples

influenciaram para que vocês adotassem as medidas

e ágil. Quais foram as etapas envolvidas na criação

como padrão mínimo do site?

e no desenvolvimento do site?

Gabriel :: O site foi inicialmente projetado

Gabriel :: As principais etapas envolvidas

para a resolução de 1024x768, por uma questão de

neste processo foram: estudo conceitual,

aproveitamento da tela e resolução de imagem.

arquitetura de informação, concepção visual,

Mas como 25% dos fãs ainda utilizam 800x600, disponibilizamos uma versão nesta resolução que entra automaticamente quando detectada a configuração pelo browser. Recomendamos 1024x768 por apresentar melhor qualidade de imagem, mas os internautas que navegarem em 800x600 não serão prejudicados.

tecnologia e produção de conteúdo. O pessoal

52 :: estudo de caso - Kid Abelha

do Kid Abelha queria algo que se diferenciasse pelo estilo

Em toda a carreira, a banda ainda não havia montado

e que fosse original em sua navegação. O site antigo já

nenhuma peça gráfica que explorasse esse conceito e

havia sido agraciado como melhor conteúdo de banda

lançá-lo como tema do novo site parecia uma boa idéia.

brasileira da web e o desafio agora era apresentar tudo

Nos dias seguintes, realizei pesquisas sobre a vida das

isso de forma estética, inteligente e intuitiva.

abelhas e sobre a estrutura das colméias, para começar a

O estudo conceitual nos permitiu construir toda

recolher elementos e montar associações que ajudassem

a história que sustenta e que dá vida ao site. Já a

a construir toda a história. A partir daí comecei a rabiscar

a rq u i t e t u r a d a i n f o r m a ç ã o a j u d o u a d e f i n i r a

idéias para tentar chegar num formato que abrangesse o

melhor forma de distribuir o conteúdo

conceito como um todo.

e disponibilizá-lo ao internauta. A

Nesta altura, o formato convencional já estava

concepção visual serviu para modelar o site de

descartado e o que estava buscando era algo mais

acordo com o conceito, a tecnologia dando dinâmica à

orgânico, que desse liberdade de movimento à navegação

navegação e a produção de conteúdo para rechear tudo

e que remontasse a estrutura de uma colméia. Comecei a

isso, com muito mel e geléia real.

esboçar algo e cheguei a um conjunto de favos suspensos

Wd :: Vocês apostaram em um formato de navegação menos convencional, utilizando as metáforas da Flor de

que viriam a ser as áreas do site. Interessante, mas ainda faltava um elemento central.

Lótus, como ponto central, e do favo da colméia, que

Pesquisando um pouco mais descobrimos que as

abrange as seções do site. Quantos estudos e de que

abelhas operárias encontram somente na Flor de Lótus

forma vocês definiram a grid final do site?

o néctar que produz a geléia real para a abelha rainha.

Gabriel :: O primeiro passo foi elaborar um conceito

Eureka! Esse seria o coração do site (a Flor de Lótus) e para

que interagisse com os fãs, algo que ficasse subtendido

poder levar esse néctar real aos demais favos, estendemos

e que sustentasse o layout para que o site não ficasse

ramos de flores que interligam todas as demais áreas, de

meramente bonitinho. Então, após alguns estudos e

modo que o site possa ser entendido como um único ser,

rabiscos, chegamos a algo que não poderia ser mais

como uma colméia real.

simples e objetivo: a idéia da colméia.

estudo de caso - Kid Abelha:: 53

Wd :: A interface divide-se em três hexágonos para

a repercussão em alguns canais de comunicação, em

a esquerda e três hexágonos para a direita, além de um

especial no Orkut, na comunidade do Fã Clube do Kid

maior que representa a “página inicial”. Quais aspectos

Abelha. Os fãs pareceram se adaptar bem à navegação e

determinaram a arquitetura da informação do novo site?

muitos destacaram inclusive a companhia da abelha que

Gabriel :: Os principais fatores que determinaram a

vai polinizando as flores no acesso de uma área a outra.

arquitetura de informação do novo site foi o estudo de

O site foi planejado para um público jovem, o que

comportamento do usuário (em relação ao antigo site) e o

justifica o visual descolado e a navegação orgânica. Ele

acesso à informação para que fosse intuitivo e prático.

não segue os padrões convencionais de um site comum e,

O maior desafio foi “encaixar” as áreas de forma

para chegar a algumas áreas, é preciso às vezes pensar um

que seguissem a mesma lógica de navegação, para que o

pouquinho, mas é um desafio que propomos aos

internauta pudesse a partir de qualquer ponto do site, ir a

fãs, de se aventurarem no site e descobrirem um

outro e encontrar a informação desejada.

pouco mais da história da banda.

Na verdade foi um grande quebra-cabeça, resolvido

Wd :: Cada seção do site é apresentada dentro

por duas pessoas, eu e a Luciana Moraes, responsável pelo

de um alvéolo colorido do favo da colméia, com

site do Kid Abelha há nove anos. Foi ela quem estruturou

ilustrações em cima de fotos dos integrantes da banda.

todo conteúdo do site e que é responsável também pelas

De que forma vocês modelaram a interface e quais

atualizações mensais.

ferramentas foram utilizadas neste processo?

Wd :: Foram realizados testes de usabilidade para

Gabriel :: O uso de cores nas diferentes

garantir que os usuários iriam entender a nova lógica

seções do site foi utilizado com o intuito de marcar

de navegação? Qual o perfil do público que acessa o

cognitivamente cada área. A aplicação vetorial sobre

site da banda?

as fotos teve como objetivo marcar as imagens

Gabriel :: Realizamos testes iniciais com um grupo

d a s re s p e c t i v a s s e ç õ e s d e f o r m a q u e n ã o p o l u í s s e

mais próximo de amigos e conhecidos, e o resultado foi

visualmente o conjunto, nem exigisse demais da placa

muito bom. Após o lançamento do site acompanhamos

d e v í d e o d o u s u á r i o . A s f o t o s a p re s e n t a d a s n o s i t e

54 :: estudo de caso - Kid Abelha

também surgiram de um ensaio exclusivo para o site,

fontes também estabelece uma uniformidade, o que

por isso seguem a mesma ambientação.

colabora com a leitura do usuário.

O desenho da interface surgiu no papel. O computador

Outro fator importante também é a orientação do texto,

é muito bom como ferramenta, mas na hora de se expressar

a forma como ele está alinhado em relação a outros elementos,

uma idéia nada melhor do que uma folha de papel. Para o

isso também ajuda a leitura cognitiva do conjunto.

rascunho ﬁnal, utilizei uma folha A2 e desenhei toda estrutura

W d : : A a t u a l i z a ç ã o d o s i t e é re a l i z a d a a c a d a

em graﬁte. Claro que na tela do computador não ﬁcou igual,

início de mês, sendo que as seções Agenda, Estrada e

o papel engana, parece que iria caber tudo nos favos, mas no

Novidades acompanham as atividades realizadas pelo

ﬁm tive que recorrer a periferia do site para desdobrar

Kid Abelha. Quem é o responsável e de que forma vocês

o conteúdo. O resultado ficou bom. Dessa

planejaram as atualizações? Vocês utilizam algum tipo

forma, tivemos espaço suﬁciente para poder desenvolver o conteúdo.

de gerenciador de conteúdo web? Gabriel :: O site é atualizado mensalmente pela Luciana

O site foi redesenhado no Adobe Photoshop e depois

Moraes, também responsável pela produção de conteúdo e

todo montado no Flash vetorialmente. Os únicos bitmaps

que desenvolveu junto comigo a arquitetura de informação.

são as fotos, que são carregadas dinamicamente. Todo o

Todo site é dinâmico e alimentado via base XML.

resto do site é vetorial, o que garantiu também velocidade na abertura e na navegação. Wd :: A tipografia do site é constituída por fontes sem serifa e apresenta um tamanho que favorece uma

Não cheguei a desenvolver um gerenciador exclusivamente para isso, até porque a Luciana também é p ro g r a m a d o r a A S P, e n t ã o e l a f a z a s a t u a l i z a ç õ e s diretamente nas bases em XML.

boa leitura do conteúdo. Quais fatores influenciam na legibilidade de um site e como vocês trabalharam esta questão no projeto? Gabriel :: O uso de fontes sem serifa favorece a leitura na tela do computador, mas isso não é tudo. Respeitar a aplicação de uma mesma família sem variar entre diversas

Fotos: Flavio Colker

XML (eXtensible Markup Language)

É uma recomendação da W3C (World Wide Web Consortium) para gerar linguagens de marcação para necessidades especiais. Fonte: Wikipédia (http://pt.wikipedia.org/wiki/XML)

estudo de caso - Kid Abelha :: 55

W d : : O s i t e a p re s e n t a u m c a r re g a m e n t o b e m

navegação do usuário, além da apresentação de diversas

rápido, através do uso combinado de ActionScript,

músicas e vídeos que envolvem a história da banda. Em

P H P, F l a s h , J a v a S c r i p t e X M L . P o r q u e v o c ê s

qual etapa do projeto foi definido o uso desses recursos e

escolheram estas tecnologias?

quais os desafios para que eles fossem inseridos no site?

Gabriel :: O site foi todo programado em ActionScript

Gabriel :: O uso destes recursos foi definido logo

2.0 para poder explorar melhor os recursos de animação

no início do projeto. O intuito de se fazer o site todo em

e interatividade, próprios do Flash. A tecnologia XML é

Flash já previa a exploração de recursos audiovisuais que

a mais prática no carregamento das informações, pois

enriquecessem a experiência dos fãs.

não necessita de consulta ao banco de dados e tem uma estrutura relativamente simples de ser construída. O Javascript foi utilizado para interagir com alguns recursos do Flash como o reescalonamento do site de acordo com o tamanho do browser e o PHP, na validação dos formulários. A melhor experiência mesmo foi a construção de

O maior trabalho, no entanto, foi reunir e digitalizar todo este material. Alguma coisa já havia do site antigo, mas muita coisa teve que ser produzida e convertida para o Flash. Todo o trabalho, da criação à produção de conteúdo, levou em média quatro meses, dentre finais de semanas e madrugadas a fio, mas o resultado foi compensador.

todo site em ActionScript, pois depois que você vê tudo

Wd :: O novo site da banda foi lançado em

pronto e funcionando, nem acredita que foi capaz de

j u l h o d e 2 0 0 6 . Q u a l re t o r n o o K i d A b e l h a e v o c ê s

digitar milhares de linhas de código em diferentes frames

obtiveram com o trabalho?

e movieclips e fazer todas elas conversarem entre si. Foi um desafio e tanto.

Gabriel :: O site foi muito elogiado pelos fãs e recebemos pedidos de outras bandas para a produção de

Wd :: Um dos recursos adicionais no novo site é a

seus sites. A renovação da imagem da banda na internet

disponibilização de áudio e vídeo, seja através de uma

também deu um novo gás no site, que contou com um

rádio que funciona como um fundo sonoro durante a

aumento considerável no número de visitas diárias.

56 :: tecnologia na web

Tecnologia na web Câmera, luz e... os vídeos estão na web! Se alguém ainda tinha dúvidas sobre o futuro dos

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

vídeos na internet, os mais de um bilhão de dólares inves-

Além desses aspectos, Mauro de Tarso e Guilherme

tidos recentemente pelo Google na compra do site You-

Almeida, desenvolvedores Flash da Mkt Virtual (www.mk-

Tube (http://tinyurl.com/gkhdt) servem para mostrar um

tvirtual.com.br), lembram que a versão 8 do Flash foi um

dos caminhos na trilha dos profissionais envolvidos com a

catalisador para que os vídeos fossem mais facilmente uti-

criação e o desenvolvimento de ambientes digitais.

lizados com aplicações especiais. “Tudo isso agrega valor

“Eu nunca tive dúvidas que era só uma questão de

aos sites, especialmente os de entretenimento ou até

tempo, de desenvolvimento tecnológico, assim como tam-

mesmo os corporativos que precisem de vídeo-aulas para

bém não tenho dúvidas que não existe outro meio audio-

explicações de produtos etc. As aplicações de vídeo abrem

visual mais poderoso do que a imagem em movimento”,

alguns horizontes para inúmeros segmentos de negócios

afirma Marcelo Albagli, diretor de criação da Canvas Web-

se beneficiarem cada vez mais com a internet”.

house (www.canvas.com.br).

Quando recomendar a inclusão de vídeos em um site?

Além disso, o especialista ressalta o aumento do in-

Ok, os vídeos podem ser o formato do momento, mas

teresse dos usuários por estes formatos na web. Dados

a recomendação é adotar uma postura cautelosa, pois isso

de pesquisa do Ibope//NetRatings confirmam o seu prog-

não significa que você vai sair criando e desenvolvendo tais

nóstico: em julho de 2006, houve um crescimento de 21%

aplicativos para qualquer tipo de cliente.

no número de internautas residenciais que acessaram sites de vídeos e filmes.

“Apesar de estar na moda, um site nem sempre precisa de vídeo para ser legal. Aliás, é bom analisar a proposta

“Finalmente, a internet começa a ser reconhecida pelo

dele e a quem se destina para que o vídeo não vire um re-

que é e não por um veículo de sites estáticos e informati-

curso inútil ou, pior, um obstáculo chato a ser atravessado

vos. Diferente da TV ou outros meios de comunicação, na

pelo usuário. Vale lembrar que o vídeo é mais um formato

internet, a possibilidade de se expressar, criar, publicar e

e não a idéia em si. No calor da moda, é fácil confundir uma

divulgar o que se quer está na mão do usuário. Já vimos

coisa com a outra e achar que colocar um vídeo pode solu-

esta democratização da informação nos blogs, flogs, or-

cionar um briefing, quando, na verdade, ele é apenas parte

kuts e podcasts. Agora, o formato do momento é o vídeo.

dessa solução. Por exemplo, se vamos fazer um portal de

Muitos fatores contribuem para isso: a popularização de

notícias, onde elas mudam rapidamente e o que importa é

câmeras digitais, filmadoras e celulares com câmera, o

justamente essa velocidade, talvez o vídeo mais atrapalhe

crescimento de sites que hospedam vídeos, como o You-

que ajude. Por outro lado, se entramos num site de uma

Tube e Google Vídeos, a maior penetração da banda larga

banda ou de um estúdio de cinema, tudo que queremos são

e o próprio amadurecimento do mercado e anunciantes em

trailers e videoclipes”, explicam Fabio e Touché.

relação ao papel da web. Claro que tudo isso contribui para

Ou seja, o importante é analisar as particularidades

a expansão, mas talvez o crescimento tenha apenas um

do público-alvo a ser atingido. “Os vídeos exigem maior

motivo: o poder do usuário. Se não fosse ele a fazer, editar,

consumo de banda, o que impacta para o cliente e para

publicar, assistir e viralizar conteúdos e vídeos de todos os

o visitante do site. O importante é dosar a quantidade

tipos, a infra-estrutura para isso estaria crescendo?”, argu-

e formatos, pois vídeos acabam gerando um aumento no

mentam Fabio Maca e Touché Paiva, coordenador de cria-

tráfego mensal. O tempo de loading não acaba sendo um

ção e diretor de criação, respectivamente, da Euro RSCG

problema grande, já que hoje é muito fácil trabalhar vídeos

tecnologia na web :: 57

nível médio

“Talvez o crescimento tenha apenas um motivo: o poder do usuário. Se não fosse ele a fazer, editar, publicar, assistir e viralizar conteúdos e vídeos de todos os tipos, a infra-estrutura para isso estaria crescendo?” Fabio Maca e Touché Paiva no Flash com streaming e inteligência no carregamento. O importante na hora de usá-los é que eles tenham conceito: seja o trailer de um filme, seja apenas um vídeo que servirá como background, seja uma transição em vídeo”, orientam Mauro e Guilherme. Assim, na hora de decidir pela inclusão ou não de vídeos dentro de um projeto, a dica é avaliar sempre o custo/benefício do investimento neste formato. “Produzir um vídeo envolve uma equipe maior, mais produção, consome mais banda e, geralmente, é mais caro também. Na outra ponta, requer ainda um usuário com boa conexão. Aqui na Canvas atendemos alguns clientes que utilizam vídeo em streaming para se comunicar com o mercado internacional e com a imprensa; da mesma maneira, cada vez mais se vê nos festivais de publicidade o vídeo fazendo parte de campanhas on-line”, revela Marcelo. Metendo a mão na massa Parece que temos o primeiro consenso dentre as etapas necessárias para se incluir recursos de vídeos em um site. “Analise o target e os objetivos da marca para saber se o vídeo é realmente o melhor formato a ser utilizado. Depois disso, devemos observar onde o site será inserido, avaliando critérios como: o site comporta vídeos, em que formato, em quais dimensões, para quais players, em streaming ou não? A próxima etapa é a captação (a hora de gravar mesmo) e depois a edição (cortar partes, mexer na ordem, inserir legendas ou packshots e por aí vai). Finalmente, vem o encoder para diminuir o peso e, em caso de vídeo transparente, colocamos no Flash 8 para trabalhar com a imagem recortada. Para finalizar, QA (Quality Assurance - Controle de Qualidade) e validação”, descrevem Fabio e Touché, da Euro RSCG 4D. Para o motion designer Fabricio Lima (www.designattack.com), a dica é tomar cuidado com o tamanho dos vídeos a serem veiculados na web. “Primeiro, você deve se certificar de que tipo de vídeo você vai colocar em um site. Se for em quicktime (recomendado para trabalhos visuais com muitos gráficos e cores, ou filmagens), é necessário colocar em um tamanho bacana para a web, geralmente 420 de largura e com a altura proporcional a largura escolhida. Depois, você deve comprimir o arquivo, pois geralmente em quicktime, sem compressão alguma, eles vão ter em

58 :: tecnologia na web

“É bom analisar a proposta dele e a quem se destina para que o vídeo não vire um recurso inútil ou, pior, um obstáculo chato a ser atravessado pelo usuário. Vale lembrar que o vídeo é mais um formato e não a idéia em si” Fabio Maca e Touché Paiva

média 30 megas, e isso fica meio complicado de jogar dentro de um site. Após isso, deve-se inserir um código para a

Caso prático: Videolog.tv

inclusão do vídeo dentro do HTML, que pode ser gerado automaticamente em programas como o Dreamweaver etc”. Além disso, Mauro e Guilherme, da Mkt Virtual, apontam a importância da edição dentro deste processo. “Nesta etapa, você deixa o vídeo do jeito que você quer que ele seja visto no site, com as máscaras, cortes e efeitos que

Para se ter uma idéia do que é necessário para se trabalhar com vídeos em um site, Bruno Dulcetti, sócio do Videolog.tv (www.videolog.tv) vai nos contar alguns detalhes. “Na parte de desenvolvimento, usar tecnologia Flash, para se obter vídeos com a extensão .FLV. Muitos sites utilizam tecnologias do Windows Media Player,

quiser. Depois, é preciso converter o vídeo para .FLV, que

mas ela é limitada, pois muitas vezes aceitam somente

é o formato suportado pelo Flash. Nessa parte, é preciso

vídeos com a extensão .WMV. No Videolog.tv, você pode

otimizar o máximo possível o vídeo, para se chegar em um

postar qualquer tipo de vídeo que o codec transforma

resultado satisfatório de peso/qualidade. Podemos com-

para .FLV com ótima qualidade. Isso porque a qualidade

primir ou tirar o som, reduzir o ‘canvas’ do vídeo, reduzir

do codec ajuda muito. Geralmente, para se ter um

a taxa de kilobytes por segundo, a quantidade de quadros

resultado satisfatório, utilize Flash 8, um codec Flash 8

por segundo e, se o vídeo tiver máscaras, é necessário es-

vp6, vários servidores estáveis e confiáveis. Em questão

pecificar que ele será convertido com canal alpha. Depois

de linguagem, a que mais gostar. Nós utilizamos PHP com

de tudo isso, ele está pronto para ser aplicado”.

banco de dados MySQL”.

Para finalizar, quem procura se especializar na área, a busca por conhecimento vai passar por temas como roteiro e edição. “Cada vez mais os vídeos vão ganhar espaço e os profissionais que quiserem trabalhar (bem) com a nova

Além disso, ele cita as vantagens no uso dos padrões. “Sem esquecer dos webstandards, que deixam os códigos mais leves, rápidos e fáceis de serem manipulados. Fora isso, a utilização de AJAX, quando necessário, entre outros fatores”.

linguagem devem estudar mais assuntos como roteiro e edição. Da mesma maneira que não basta sacar de Photoshop para ser designer, também não basta saber importar um arquivo de vídeo para dentro do computador para trabalhar plenamente com essa linguagem que o nosso meio

Dicas de leitura

está tendo acesso”, orienta Marcelo, da Canvas. - “Creating Motion Graphics with After Effects” Autores: Trish e Chris Meyer

Ferramentas para se trabalhar com vídeos na web - Adobe Premiere - After Effects - Final Cut

Editora: CMP Books

- “Creating Web Video with Adobe Premiere” Autor: Thomas Luehrsen Editora: Peachpit Press

- “Flash MX Design for TV and Video”

- Flash 8

Autores: Janet Galore e Todd Kelsey

- Flash 8 Video Encoder

Editora: Wiley

- Sorenson Squeeze 4.0

- “Microsoft Windows Media Resource Kit”

- Windows Media Encoder

Autores: Bill Birney e Tricia Gill

Fontes: Fabio Maca, Fabricio Lima, Guilherme Almeida, Marcelo Albagli,

Fontes: Fabricio Lima e Marcelo Albagli

Mauro de Tarso e Touché Paiva

Editora: Microsoft Press

60 :: tutorial

Produtividade 2.0 - Parte 1 Elcio Ferreira Desenvolvedor e instrutor na Visie Padrões Web http://visie.com.br/

Web 2.0, maturidade

ferramentas realmente adaptados a essa “coisa nova” que

Talvez você tenha vivido isso e vá se lembrar. O come-

é a web. Mas esse tempo chegou. Uma geração de profis-

ço da internet foi muito movimentado. Era uma invenção

sionais maduros, de idéias realmente valiosas, de métodos

nova todo dia. Um site novo, um programa novo, um jeito

comprovados e ferramentas bem adaptadas e produtivas

novo de fazer coisas velhas.

está brilhando na web. Os produtos que eles fazem são

Todo esse movimento parecia realmente algo muito importante e muita gente que não conseguia entender mui-

de certa maneira diferentes de tudo o que se viu até aqui. A sua maneira de trabalhar também.

to bem aquilo tudo, passou a considerar a internet uma coi-

Embora nenhuma das idéias, ferramentas ou métodos

sa mágica, em que tudo o que se fizesse seria maravilhoso

aplicados seja completamente original, seu uso combinado

e mudaria nossas vidas.

é tão diferente de tudo o que se fez antes que algumas

Entre estas pessoas, estavam muitos investidores, o

pessoas resolveram até dar nome a isso: web 2.0.

que causou a chamad “bolha ponto com”, com empresas que

N a v e rd a d e , a w e b 2 . 0 n ã o é t o d a n o v a , c o m o u m a

nunca deram lucro e sequer tinham um modelo de negócios

“nova versão” da web. É apenas um nome bonito que

consistente sendo avaliadas em milhões de dólares.

deram a esse nível de maturidade que alcançamos. Sabe-

Havia dinheiro sobrando para qualquer idéia, por mais absurda que fosse, cujo nome terminasse com “.com”. En-

mos um pouquinho mais hoje do que antes da bolha a respeito do que fazer e de como fazer, só isso.

tre os desenvolvedores e demais profissionais da web era

Sabemos um pouco mais sobre o que fazer

o tempo das descobertas. Estávamos fazendo coisas que

A web tem possibilidades únicas, coisas que só ela

nunca haviam sido feitas antes e inventando os meios de

pode fazer. Perdemos muito tempo no passado tentando

fazê-las. Claro, a maior parte dessas coisas não deu certo e

reproduzir na web as coisas de fora dela. Era a publicidade

seu valor não passou de uma boa experiência. E estávamos

que parecia TV, o layout que parecia impresso, o discurso

sendo pagos por isso.

que parecia jornal, a loja que parecia venda por catálogo.

Levou algum tempo, mas aconteceu o inevitável: os in-

Os negócios que realmente tiraram “algo mais” da

vestidores começaram a pedir retorno do seu dinheiro. E os

web são aqueles que exploraram suas características úni-

negócios de web, feitos sem qualquer planejamento como ne-

cas, coisas que não poderiam ser feitas de outra maneira.

gócios, baseados apenas na idéia romântica de ser pioneiro e

Por exemplo:

chegar antes de todo mundo, foram à bancarrota. Os primeiros

- Hotmail: foi o primeiro “webmail” de sucesso. Webmail

anos de nosso milênio foram anos de “água fria” para a web.

é web, mais e-mail, duas coisas só possíveis com a internet.

Apenas as boas idéias sobreviveram e apenas os bons profis-

Nesse caso, não é “o que” a fonte do valor. Permitir que as

sionais permaneceram.

pessoas escrevessem umas às outras os correios já permitiam

Esse tempo de recessão nos negócios de internet ficou

há muito tempo. Foi o “como” a origem do valor do negócio.

conhecido como “pós-bolha”. Esse filtro foi, na verdade, muito

Comunicação escrita praticamente instantânea, sem papel,

bom. A web retomou seu crescimento, dessa vez sobre uma

em qualquer lugar. O Hotmail era realmente algo novo.

boa base. Os bons negócios, fundamentados num modelo de

- Amazon: comprar sem sair de casa não era algo

valor, podiam contar agora com bons profissionais. E esses

novo. Os norte-americanos já tinham vasta tradição em

profissionais tinham agora na bagagem muita experiência a

compras por catálogo. Mas ninguém tinha conseguido ofe-

respeito do que funcionava ou não na web.

recer antes a quantidade de títulos que a Amazon oferecia

Foram precisos alguns anos para que a desilusão da

dentro da sua casa. E a quantidade de informação oferecida

bolha passasse e fossem criados modelos, estratégias e

sobre cada produto também era impossível num catálo-

tutorial :: 61

go impresso. Acordada para as novidades, a Amazon logo

quanto os de análise e programação trouxeram o que sa-

começou a aproveitar seu banco de dados para algo tam-

biam para o novo ambiente, mas ninguém sabia exatamente

bém novo, indicar livros do seu interesse analisando o perfil

como lidar com a web.

de pessoas que compram os mesmos produtos que você. - Google e Yahoo!: um negócio sobre a própria web, a busca na web. Claro, não seria possível sem a web. A experiência desses gigantes pioneiros serviu de escola para nós e hoje sabemos um pouco mais sobre como extrair

Dez anos depois, aprendemos um pouco mais sobre como fazer. Já temos uma boa idéia do que funciona melhor em desenvolvimento de sites. Conhecemos melhor as tecnologias envolvidas e suas possibilidades e as ferramentas e métodos para lidar com isso.

real valor da web. Estamos projetando produtos e serviços

Falando de maneira especial sobre desenvolvimento de

cujo valor está baseado na web, que seriam impossíveis sem

software, temos hoje um conjunto de ferramentas de produ-

ela. Entre outras coisas, estamos dando voz às pessoas e dan-

tividade incomparável, ágil, maduro e bem integrado. Desen-

do a elas poder sobre o conteúdo que disponibilizamos.

volver software para a web hoje é muito diferente de há cin-

Aprendemos também um pouco mais a respeito de

co anos. Infelizmente, ainda há muitos desenvolvedores que

como construir a interação entre o usuário e nosso pro-

simplesmente não conhecem essas ferramentas e continuam

duto. Aprendemos como deixá-lo usar nosso produto em

trabalhando da mesma maneira que fazíamos em 1995.

qualquer lugar, em qualquer navegador, em qualquer dis-

É sobre isso que tratará essa nossa série de artigos.

positivo, com coisas como os padrões web e o trabalho

Vamos analisar alguns ambientes de programação, metodo-

de acessibilidade. Aprendemos como fazer com que ele

logias de desenvolvimento e ferramentas de produtividade

consiga usar nosso produto, com a usabilidade. Aprende-

que surgiram ou amadureceram nestes últimos dez anos.

mos com coisas como AJAX e outras formas de RIA como oferecer uma experiência melhor de interação.

Vamos também dar uma boa olhada em ferramentas mais antigas, mas que foram nesses dez anos integradas ao

Sabemos um pouco mais sobre como fazer

processo de desenvolvimento web. Mês que vem, começa-

Ao mesmo tempo em que nos ensinou um pouco sobre

remos com uma dessas: controle de versão.

o que dá certo ou não, a amarga experiência pós-bolha nos

Você vai conhecer uma das excelentes opções livres

ensinou também sobre como fazer dar certo. A web é um

para controle de versão, o Subversion (http://subversion.

ambiente de desenvolvimento de software e criação de

tigris.org), e vai entender por que você não deveria come-

peças de comunicação única. Nada antes era semelhante

çar um projeto sem uma boa ferramenta de controle de

à web. E tanto os profissionais das áreas de arte e design

versão. Até lá.

64 :: usabilidade

Marcos Nähr Guilhermo Reis Trabalha há três anos na Dell Computadores, onde é responsável pelo website da empresa. Atua como Especialista em Arquitetura de Informação e Usabilidade. É autor do Kit de Conhecimento sobre AI designer de interfaces desde 1998, tendo realizado trabalhos em empresas como Espacio Digital (hoje (http://tinyurl.com/p4j6w). Atualmente, é responsável por coordenar projetos e manutenções nos Agência Internet), Godigital e RBS, além de participar do desenvolvimento de portais de companhias websites do Banco Real. como GVT, Telefônica, Telemig Celular e Amazônia Celular. reis@guilhermo.com

O que é preciso para ser um bom designer? Uma das melhores definições de design gráfico que já ouvi é esta da designer Jessica Helfand: “Design gráfico é uma linguagem visual que une harmonia e equilíbrio, cor e luz, escala e tensão, forma e conteúdo. Mas é também uma linguagem idiomática, uma linguagem de símbolos e alusões, de referências culturais e inferências perceptuais que desafiam tanto o intelecto quanto o olhar”. Gosto muito desta definição. A primeira parte é um sumário convencional do design gráfico, com o qual todos concordamos. Mas a segunda parte nos leva para uma área mais densa: ela trata o design como uma força expressiva. Essa segunda afirmação deixa claro que a consciência cultural é muito mais importante para um designer do que as habilidades técnicas ou as qualificações acadêmicas. Ao ser perguntado se fazia pesquisas específicas para escrever cada um de seus livros, o escritor inglês Iain Sinclair respondeu que a sua vida era uma grande pesquisa. Não consigo pensar em nada mais apropriado para um designer gráfico. Se você não estiver constantemente absorvendo o que existe ao seu redor, você nunca será um designer gráfico. Dizem que os arrombadores de cofre esfregam a ponta dos dedos com lixas para aumentar a sensibilidade táctil. Isto deixa a ponta dos dedos super sensíveis e faz com que eles consigam sentir as nuances do mecanismo que abre o cofre. O mesmo vale para o design gráfico: quanto mais sensível você se tornar em relação ao mundo ao seu redor, melhor será a sua resposta (criativa) em relação a este mundo. Isto significa estudar o design em todas as suas manifestações contemporâneas e também a história do design e das artes visuais em geral, mas também quer dizer conhecer o mundo além do design gráfico. Às vezes os designers imaginam que o mundo gira ao redor do design gráfico, especialmente quando se trabalha com isto mais de 14 horas por dia. Mas ele não gira! Os bons designers, em sua maioria, têm interesses pessoais que vão muito além do design gráfico. O design pode até ser a sua preocupação maior, mas ele não deixa de ter outros interesses. OK, mas afinal, como isto me ajuda a ser um bom designer gráfico? A coisa mais importante quando você estiver discutindo um trabalho com um novo e potencial cliente é demonstrar conhecimento, abertura e receptividade. O designer que demonstra apenas sinais de soberba e restrição de foco de atuação não vai inspirar o seu cliente. Isto parece óbvio, mas é surpreendente a quantidade de designers que usam as reuniões com clientes para falar sobre si mesmos e seu trabalho. Esses são os mesmos designers que reclamam mais tarde que o seu trabalho é freqüentemente rejeitado ou que eles nunca podem fazer o que eles querem. Estes designers são culpados do pior crime que um designer gráfico pode cometer: auto-suficiência e visão estreita da realidade. Para o designer com

usabilidade :: 65

"A maneiracriar como um designer apresenta idéias é tão ou mais “É preciso as casas, os prédios, as praçassuas e principalmente as placas importante que as próprias idéias." de sinalização.”

ambições, essas duas coisas são fatais! Se você puder demonstrar algum conhecimento sobre o campo de atuação do seu cliente, se conseguir falar sobre o projeto com tranqüilidade e se ouvir mais ao invés de só falar sobre si mesmo, você vai se impressionar com a receptividade do seu novo cliente sobre suas idéias. Parece um paradoxo, mas quanto menos você embasar o relacionamento cliente/designer sobre você próprio, mais sucesso você terá. Além de possuir referências culturais e ter conhecimento do mundo além do design gráfico, um bom designer também precisa se comunicar bem. Isto não é o mesmo que saber fazer discursos eloqüentes, mas se refere à habilidade de saber falar sobre o seu trabalho, especialmente com clientes e com quem não é designer, de maneira coerente, convincente e objetiva, sem se utilizar da mesma linguagem que você costuma usar com outros designers. E como a comunicação é uma via dupla, isto significa também saber ouvir. O design gráfico precisa comunicar uma idéia sem o uso de comentários (escritos ou falados) que descrevam suas intenções: você não pode ficar ao lado de um website, por exemplo, chamando a atenção das pessoas que entrem no site e explicando para cada usuário como você utilizou os grids para criar uma noção de conjunto, pode? Apesar disso, os designers precisam das palavras, especialmente quando estão apresentando um novo projeto. Convencer o seu cliente de que suas idéias são corretas e de que o dinheiro dele está sendo bem gasto requer argumentos muito bem formulados. Uma boa técnica para desenvolver a habilidade verbal é descrever o que você criou sem mostrar o trabalho. Tente descrever com a maior quantidade de detalhes possível, de tal modo que não seja necessário ver o trabalho para entender o que você projetou. E lembre-se: a maneira como um designer apresenta suas idéias é tão ou mais importante que as próprias idéias. Quando uma idéia é rejeitada, muitas vezes é a apresentação que está sendo rejeitada e não a idéia em si.

66 :: webwriting

Bruno Rodrigues Guilhermo Reis Autor do livro “Webwriting - Redação & Informação para a web, da editora Brasport”. É coordenador Especialista em Arquitetura de Informação e Usabilidade. É autor do Kit de Conhecimento sobre AI de informação do website Petrobras e titular da primeira coluna sobre Webwriting no mundo, elaborada (http://tinyurl.com/p4j6w). Atualmente, é responsável por coordenar projetos e manutenções nos desde 1998 e hoje veiculada na revista on-line “WebInsider”. Ministra treinamento de Webwriting e websites do Banco Real. Arquitetura da Informação no Brasil e no exterior. reis@guilhermo.com bruno-rodrigues@uol.com.br

A palavra, coadjuvante na web Texto, texto, texto. A web é o paraíso da palavra. É nossa enciclopédia, biblioteca, revista semanal. Algum problema? Pelo contrário - a web surgiu desta maneira, e muito de sua força ainda reside na informação como palavra. Eu disse ainda. Busque uma definição para web e encontrará várias, mas todas giram em torno de um ponto: é nela que reside o potencial da imagem na internet; é ela a interface gráfica da Rede. Não há como escapar. A web é cruel com quem aposta na força da força solitária da palavra - não há site que sobreviva sem um impacto visual, todos sabem. Em nenhuma outra mídia o clichê “a imagem vale mais que mil palavras” foi tão verdadeiro. E olhe que estou falando apenas em layout, em ilustração, em fotografia - ainda não cheguei ao vídeo. Se a imagem é capaz de levar vários recados em um só pacote, o vídeo é a maior concentração de informações por pixel quadrado. O vídeo dá conta do recado, e com uma capacidade de persuasão que a palavra não alcança. Não adianta espernear, porque é um caminho sem volta. Na web, a palavra está fadada a desempenhar o papel de coadjuvante da informação. Uma coadjuvante de luxo, mas, ainda assim, coadjuvante. Eu amo a palavra. Sou, antes de tudo, um redator. Mas aprendi, ao longo de todo este tempo de trabalho com web, que a palavra precisa se enamorar da imagem. Muito mais do que já acontece na mídia impressa. Falou-se muito, nos últimos anos, em convergência de mídias. Que a web iria integrar texto, imagem, áudio e vídeo. Como a banda larga ainda era insípida no mundo inteiro e a história não caminhava, a tal convergência perigou não acontecer. Mas, de três anos para cá, a realidade mudou. O YouTube é apenas a ponta do iceberg. Demonstra que o interesse do internauta mudou, que ele evoluiu na forma de consumir informação na web. E que, com a explosão da banda larga, ele agora pode - e quer - mais. Como recuperar a palavra em um ambiente realmente multimídia como será a web daqui por diante? O redator irá sobreviver? Na dúvida, como profissionais de Comunicação, precisamos entender que nossa matéria-prima é a Informação, seja lá qual for o seu formato. Você sabe que não é preciso entender de vídeo para trabalhar em uma revista. Mas, na web, limitar a experiência - e interesse - à palavra pode ser arriscado. O perigo não é individual, mas diz respeito à classe como um todo. O novo profissional de Comunicação, aquele que está saindo das universidades, precisa ter noção de que o mercado de mídia digital espera muito mais dele. Para os que já estão no mercado, temos uma vantagem, porque já experimentamos a Informação em um formato ou mais. Basta não criar resistência e, antes de tudo, ajudar

webwriting :: 67

"A web é cruel com quem aposta na força solitária da “É preciso criar as casas, os prédios, as força praçasda e principalmente as placas palavra não há site que sobreviva sem um impacto visual" de sinalização.”

na conscientização dos que estão chegando. Não perca tempo imaginando se a palavra precisa dar uma volta por cima ou se a web irá virar o crepúsculo do texto, até porque não é verdade. Por muito tempo ela dividirá as atenções com o vídeo, e é bastante provável que nunca venha a existir uma web sem informação textual. Enfim, invista seu tempo entendendo como funciona esta tal convergência de mídias e você estará acrescentando muito mais ao mercado! * * A idéia deste texto surgiu em minha coluna no site “Comunique-se”, e pretende ser um alerta aos profissionais da área - o mercado está mudando, e quem puder anunciar aos quatro ventos, que o faça!

68 :: marketing

René de Paula Jr. Diretor de produtos do Yahoo Brasil. É profissional de internet desde 1996, passou pelas maiores agências e empresas do país: Wunderman, AlmapBBDO, Agência Click, Banco Real ABN AMRO. É criador da “usina. com”, portal focado no mundo on-line, e do “radinho de pilha” (www.radinhodepilha.com), comunidade de profissionais da área. rene@usina.com

Pergunte-se COMO OK, OK, esse título lembra dietas, adesivos de carro e campanhas de auto-ajuda. É vero. E dietas me lembram verão, e verão me lembra tempo, e tempo me faz pensar no meu aniversário, e 42 anos de idade me faz lembrar da resposta para o sentido da vida e do universo e tudo o mais e também me faz pensar que pressupor que todos leram o mochileiro das galáxias é coisa de dinossauro, mesmo. Desculpem-me a crise rápida de meia-idade, mas é que toda vez que me preparo para escrever minha coluna aqui na revista, eu me pergunto: quem sou eu, enfim, diante de tanta gente gabaritada, frente a tantos leitores com fome de relevâncias? Com meu currículo rico em INdisciplinas escolares e heróica resistência à Academia (academias de ginástica incluídas), que respostas eu posso oferecer aqui? Well, respostas devo ter algumas, mas as minhas têm um carimbo que diz: válida apenas no contexto original e com prazo de validade de 30 dias. Por essas e outras que prefiro... semear perguntas. Uma boa pergunta vale mais que mil certezas, disso eu tenho certeza. Nem toda pergunta ajuda, porém. Perguntar “por que”, especialidade inesgotável de crianças numa idade chata, não refresca muito. Por que? Simples: ao perguntar “por que” erramos na mosca. Claro que é intrigante entender os motivos, a causa, a vontade original. É tão instigante saber a razão de um ato que você pode, ao final de uma vida inteira cavucando a causa primeira, chegar a uma conclusão bombástica do tipo: a resposta é o sexo. Ou o poder. Ou o ácido desoxirribonucléico. Ou a vontade de um deus qualquer. E aí eu pergunto: o que você faz com isso? É como perguntar a alguém: por que você... me ama/ deixou de me amar/ me deixou/ me conquistou/ me deu um beijo na boca/ etc etc etc. Ou perguntar: por que você entra no meu site? Por que não entra? Por que prefere o do concorrente? Por que você nos abandonou? Que tipo de resposta você efetivamente espera? E que tipo de luz você espera dessa resposta? Convenhamos. Well, o mundo é grande. Pergunte o “por que” à vontade, é grátis. Eu prefiro perguntar “como”. Por exemplo: - Como você usa internet? - Como você navega em um site? - Como você se comunica com amigos? - Como você mima alguém distante? - Como você escolhe um presente de aniversário? - Como você descobre qual o melhor carro para você comprar? - Como você encontra o que quer na internet? - Como você se informa todo dia?

marketing :: 69

"Perguntar 'como' traz à tona a infinidade de soluções que gente como eu e você damos para todos os passos de um processo."

- Como você sabe se um site é confiável ou não? - Como você se comporta numa comunidade on-line? - Como você se expressa quando escreve e-mails? E quando manda mensagens instantâneas? - Como você concebe uma idéia? - Como um site vai crescer? - Como é que sua comunidade vai se manter saudável? - Como você gasta seu tempo? - Como você lida com toneladas de e-mail? - Como você registra as coisas importantes? - Como você gostaria de ser tratado? - Como será que as pessoas te vêem na internet? - Como você controla sua própria imagem na internet? - Como você gostaria que o site XYZ fosse? - Como você gostaria que a internet fosse? - Como a internet mudou sua vida? - Como você gostaria que a sua vida fosse? Perguntar “como” abre caminhos. Quando você pergunta “como”, acaba se aventurando em mares nunca dantes navegados por você. Ao se perguntar “como eu compraria um carro hoje”, você pode descobrir que consultar amigos no trabalho ou pesquisar sites e comunidades pode ser tão indispensável quanto ir à concessionária e falar com o vendedor. E que a decisão final pode ser tomada depois de uma troca de SMS e MMS com alguém que você confia. Perguntar “por que” pressupõe que exista uma resposta única. Perguntar “como” traz à tona a infinidade de soluções que gente como eu e você damos para todos os passos de um processo. Perguntar “como” te força a prestar atenção, a observar, a notar diferenças. Perguntar “como” te abre os olhos para a riqueza sem fim da criatividade de todos nós. Lembre-se: não estamos desenhando interfaces ou aplicações. Estamos tornando a vida dos usuários mais rica e mais digna. E se você quiser ver meu entusiasmo juvenil aﬂorar aos plenos 42 anos de idade, pergunte-me como ;)

70 :: bula da Catunda

Marcela Catunda Trabalhou na TV Globo, TV Bandeirantes, TV Gazeta, Manchete e SBT. Foi redatora da DM9DDB e Supervisora de Criação de Mídia Interativa da Publicis Salles Norton. É sócia do site Banheiro Feminino, está no Orkut e trabalha como autônoma. blog - http://pirei.catunda.org marcelacatunda@terra.com.br

Tá bem legal, mas não dá pra ser verde? - É. Dar dá, mas... - E, se em vez de ser assim, fosse em pé? Dava pra ser em pé? - Bom. Em pé também dava, mas é que... - Prefiro o logo desse lado aqui ó e um pouquinho mais pra direita. É possível? - Impossível não é, mas é que daí... - Mudando a cor, deitando a peça, jogando o logo pra direita e tirando esse negócio aqui vai ficar muito bom. Dá, né? - É que vai virar outra coisa e a idéia era... - Vamos fazer como eu pedi. Senão não vai rolar... O diálogo fictício acima representa um dia difícil durante a apresentação de uma idéia. Nem todos os dias são assim. Ainda bem. Mas por que será que às vezes é tão difícil aprovar um trabalho? Onde será que surgiu o ruído que fez com que tudo que foi apresentado parecesse fora de nexo? Será que eu entendi errado? Procuro culpados, mas será que existe algum? - Tá tudo certo. É um processo alérgico. Vou receitar uma pomada pra você passar duas vezes ao dia e pronto. Qualquer coisa você volta ou me liga. - E se eu não ligar? - Tudo bem. É só fazer tudo como eu indiquei. - E, se em vez de duas, eu passar vinte e cinco vezes? - Não aconselho. - E se for um spray em vez de uma pomada? Não gosto de pomadas. - Que eu saiba, esse remédio só tem em pomada e comprimidos. - Então é isso. Quero comprimidos, mas em vez de um antialérgico eu queria me entupir de antiinflamatórios. Dá? - Ixi. O diálogo acima seria entre um paciente e um médico. Uma mudança no tratamento, neste caso, poderia ser fatal, o que faz do diagnóstico algo inquestionável. Puxa! Por que diabos com criação as coisas têm que ser diferentes? Uma vez... Eu apresentei uma campanha inteira sem conseguir terminar uma frase. Uma hora era o atendimento que entrava no meio e questionava “e se a coisa fosse um pouco mais complexa?”, depois vinha o planejamento e sugeria “é bom, mas falta converter...”, e antes que eu pudesse dizer alguma coisa, entrou um mídia com o dilema “a conversão é o de menos, precisamos é saber onde, o onde é a pergunta”... O “onde” é a pergunta? Onde estou? Por que eu não falo nada? Assim não pode. Como vou defender minha idéia desse jeito? Alguém pode me deixar falar? E foi no final dessa reunião que escutei do cliente a pérola que deu título a essa coluna: Puxa gente tá bem legal, mas não dá pra ser verde? O meu desespero diante dessa pergunta foi tamanho que mal consegui entender o que veio depois disso. Ser verde, azul ou uma mesa de centro era o que menos tinha importância. Nada mais fazia sentido, e então vi ruir em minutos nossa idéia (de toda a equipe). De repente, nada do que havia sido proposto foi

bula da Catunda :: 71

"Mas por que será que às vezes é tão difícil aprovar um trabalho? Onde será que surgiu o ruído que fez com que tudo que foi apresentado parecesse fora de nexo?"

aproveitado e caminhávamos para mais um job remendo. Coisa mais linda. Eu, não tive como explicar, logo, o cliente não teve como entender. Conclusão? Entrou no ar uma coisa metade boa, metade ruim, também conhecido como treco remendado. Papo de Médico II Acredito que seja exatamente esse o princípio do caos que impera na cabeça de um cirurgião plástico, por exemplo. Ele sabe bem o que fazer e como fazer. Mas como botar lábios de Angelina Jolie em quem parece ter chupado um limão? E dar pernas de Ana Hickman a quem em pé não tem um metro e meio? Ou dar um corpo de Bündchen àquela silhueta que mais parece um Tender? Madeixas de Brad Pitt e um abdome de Paulo Zulu no Sargento Garcia? Como assim? O resultado? Caras repuxadas, vastas cabeleiras simetricamente calculadas e tão estupidamente parecidas que poderiam ser todos irmãos. E quem operou é autoridade máxima. Ser igual nesse caso não é problema. E ninguém questiona, ou aparece no meio da sala de cirurgia pra dar pitaco de onde é que corta, onde é que costura, onde é que cola ou põe o remendo. O esticado então sai todo feliz, achando que ficou dez anos mais jovem, sem pensar sobre ter ficado alguns reais mais pobre. Nessa hora, o dinheiro não importa. Algum tempo depois... Quando o cliente sai porta afora o tempo fecha e o pau come. É aquela lavação de roupa suja dos infernos. Todo mundo querendo se enforcar diante daquela insuportável sensação de fracasso. Todos querem achar culpados. Todos estão com sede de vingança. Culpados? Vingança? A essa altura? E quem se importa? O job é para amanhã e é preciso trabalhar com as novas diretrizes, ou para ser mais clara, é chegada a hora do “remendar”. Moral da história: não dava. Não dá pra ser verde p.... nenhuma e não me enche, não me enche que eu sou freela.

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

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

VEJA MAIS DEPOIMENTOS EM NOSSO SITE.

www.easymailing.com.br

tel. 55 51 3061.0636

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

Para discutir o gosto Por que todos fazem tanta questão de ter “bom gosto” hoje em dia? Profissionais ligados às áreas de comunicação e design já estão cansados de saber que gosto se discute. Sempre. E muito. Pior do que isso, em reuniões com a maioria dos clientes, sempre parece que o poder de decisão é inversamente proporcional ao senso estético. Com isso em mente, quero usar o espaço desta coluna para fazer algumas considerações a respeito dessa coisa tão difícil de definir quanto fundamental para a sobrevivência de qualquer um na profissão. Qualquer um, com mais de uns 15 minutos de experiência profissional, já teve de se acostumar com o fato que boa parte do tempo investido em reuniões e discussões com os clientes será gasto em explicar que a profissão tem em si muita técnica; que uma determinada diagramação ou tipografia tem seu porquê e, principalmente, que não se pode, jamais, misturar elementos de uma proposta com pedaços de outra sem comprometer completamente a harmonia da peça e, conseqüentemente, a eficiência da comunicação. Tudo isso para quê? Para nada. O freguês, já diziam os velhos botecos, tem sempre razão, ainda mais quando o material a se discutir não tem fundamento exato, numericamente mensurável. A maior alegria da profissão, em tempos de auto-ajuda metrossexual, acaba por se tornar igualmente a sua maior desgraça, já que o termo “design”, por estar diretamente relacionado a esta coisa difícil de definir que chamamos de “bom gosto”, se torna um valor relativo. Pois quem nunca ouviu falar bobagens do tipo “gosto não se discute”, ou, pior ainda, “quem ama o feio, bonito lhe parece”? Por mais que esse horror de situação pareça universal e perene, talvez sirva de conforto ter em mente que toda essa busca pelo “novo-estético” é relativamente recente - e está diretamente ligada a toda a série de fenômenos dos últimos 20 anos, de globalização a pós-moderno. Tenha uma breve conversa com pessoas das gerações que o precederam e você verá que essa corrida atrás de novos badulaques bonitinhos é razoavelmente recente. Isso acontece porque, como já disse em um artigo anterior, design hoje em dia é sinônimo de refi namento. O consumo desenfreado de iPods, de celulares de último tipo e de toda espécie de produto que caracteriza o “design victim” é o equivalente tecnológico de um sinal de distinção social, da mesma forma que assim o eram os códigos de etiqueta e/ou vestimenta de sociedades ancestrais. Assim vivemos a ditadura do belo, em que é mais importante seguir o que se define como adequado, ou melhor, “de bom gosto”. Mas, afinal, o que é gosto? A capacidade de discernir o que pertence a altos padrões estéticos e/ou de qualidade? Quem define essa capacidade? Quem a muda? Seja quem for, certamente será uma pessoa de muito poder. Uma pessoa de “bom gosto” é capaz de tomar as decisões “certas”, mesmo que sejam subjetivas e dependentes da cultura local (como o Japão) ou do tempo (como os anos 80). Seja

webdesign :: 73

"É triste reconhecer, mas muitos proﬁssionais de design digital não sabem/querem/gostam de ler um Brieﬁng, um relatório de pesquisa ou um planejamento estratégico de seus clientes. "

como for, a decisão é absoluta e maniqueísta. E bastante preconceituosa. Nem todos têm “bom gosto”, muitos o reconhecem, poucos o exercitam, praticamente todos o almejam. Para mim, gosto é um valor associativo - identifica o indivíduo a um grupo ou modo de vida, de forma imediata, fácil e não necessariamente verdadeira. Saber identificar safras de vinhos é um valor, ainda mais se, para isso, o indivíduo não precisar passar horas e horas decorando nomes de safras, uvas e regiões. Gosto também é um filtro, que edita e seleciona o que é definitivamente “bom”, dentre as diversas e variadas ofertas de hoje. É valorizado, mesmo tempo fascista e autoritário. Apple, Sony, Nokia, Mini, Absolut... Várias marcas querem se apropriar do gosto. Algumas, como a Porsche, conseguem até por grandes períodos. Outras são irregulares, patéticas até. Como “respeito” ou “amor”, não se pode atribuir “gosto” a um produto, empresa ou serviço. Ele é legitimado e instintivo. Acima de tudo, bem perigoso.

As crianças brilharam no Copacabana Palace Capoeirista abre a roda homenageando o Brasil e sua diversidade cultural

Sob o comando do carismático Mestre Bode, as crianças do projeto Magê-Malien deram um show de capoeira, educação e cidadania no palco do FIND (Fórum Internacional de Design e Tecnologia Digital).

Capoeirista Passarinho presenteia Stefan Sagmeister com desenhos produzidos Capoeiristas demonstram

pelas crianças do projeto

suas habilidades

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

Promoção assine um plano de hospedagem efetue o pagamento anual e ganhe um pendrive ou uma webcam. Conﬁra o regulamento em nosso site. www.siweb.com.br tel: (11) 4063.8047 info@siweb.com.br

Você quer Hospedagem Proﬁssional? Servidores estáveis e que não saem do ar? Então venha conhecer a DataHosting, suporte diferenciado e qualiﬁcado, planos especiais de revenda, plataforma windows e linux. www.datahosting.com.br tel: (11) 6951.2954 - (11) 6939.7305 atendimento@datahosting.com.br

A Brasil Hosting assume a missão de “prestar os melhores serviços, oferecer preços justos e respeitar o consumidor”. Assine agora mesmo um dos nossos planos e sinta a diferença de um hosting com ética. www.brasilhosting.com tel: (48) 4052.9591 atendimento@brasilhosting.com

Oferece hospedagem proﬁssional linux e windows com recursos grátis como loja virtual, blog, enquete, boleto. Possui planos de revenda ideais para webdesigners. Suporte qualiﬁcado 24 horas e registro de domínios. www.portal123.com/ tel: Minas Gerais (31) 3761.2253 São Paulo (11) 4052.9253 suporte@portal123.com.br

Parceria TeHospedo e você, Designer: dê a seu cliente mais vantagens. Através desta parceria seus clientes terão até 3 meses de isenção na hospedagem. Saiba mais em nosso site. www.TeHospedo.com.br tel: RS (51) 3227.7727 / capitais de SP/RJ/MG/DF/ PR/SC 4062.1432, GO (62) 4052.1432 comercial@tehospedo.com.br

Hospedagem de Sites a partir de R$ 15,00 mensais com 30 dias grátis para testar nossa qualidade. Sistemas para Imobiliárias, Concessionárias e Lojas Virtuais Online. http://www.braghost.com.br braghost@braghost.com.br

Hospedagem de 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

Provedor fundado no ano de 2001, com infra-estrutura própria e datacenter no Brasil. Plataforma Windows com suporte integrado à Net 2.0, ASP e PHP5 no mesmo ambiente, contando ainda com MYSQL gratuito e SQLServer 2000. www.iphotel.com.br tel: (11) 6971.0438

Hospedagem de Sites com infra-estrutura no Brasil, 6 anos no mercado, multi-serviços para você e seus clientes. Planos Windows e Linux, antivírus, anti-spam, banco de dados, relatórios de acesso, disponibilidade de 99,5%. www.creativehost.com.br tel: (11) 3849.1166 atendimento@creativehost.com.br

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

Hospedagem Proﬁssional PHP a partir de R$ 4,90 Servidores 64 bits Dual Core - Revenda de Hospedagem. Sua melhor opção, Conﬁra! www.infotecnico.com.br tel: (48) 3235.2761 contato@infotecnico.com.br

R$ 5 mensais ou R$ 50 ao ano. 800MB de espaço em disco, 20GB de transferência,PHP, MySQL, Emails e subdomínios ilimitados.Também registramos seu domínio. Atendimento imediato pelo MSN. www.triangulohost.com.br tel: (34) 3316-2433 hostmaster@triangulohost.com.br

Hospedagem de Sites, Revenda de Hospedagem e Registro de Domínios, tecnologia ASP, PHP e .net no mesmo plano, teste grátis por 30 dias e comprove a qualidade de nossa infra-estrutura e atendimento. www.redehost.com.br tel: Rio Grande do Sul (51) 3042.2030 São Paulo (11) 4063.7574 Rio de Janeiro (21) 3527.0848 comercial@redehost.com.br

Hospedagem de sites em plataforma Linux e Windows. Registro gratuito de domínios internacionais, acesse o nosso site e participe de nossa promoção. www.rjhost.com.br tel: (21) 2577.5545 vendas@rjhost.com.br

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

ZARP HOST Soluções completas para webdesigners e desenvolvedores.Sistema inteligente e seguro de email com disco virtual.Qualidade, estabilidade e segurança. www.speedhost.com.br tel: São Paulo (11) 5644.1047 Rio de Janeiro (21) 3523-0387 Paraná (41) 3015.3077

Hospedagem de Sites Oferecemos registro de domínios e hospedagem em ASP, PHP e CGI. Planos a partir de R$ 9,90. www.zarphost.com.br contato@zarphost.com.br

Para anunciar nesta seção, envie um e-mail para publicidade@arteccom.com.br, com o título "busca host" ou ligue para (21) 2253.0596

ABC Aprenda Oracle, Java, Linux, ITIL

ABCMIX Flash Tutorials Vídeo-aulas interativas em ﬂash para Joomla! CMS. Viewlets sob encomenda para treinamento web e provedores de hospedagem. www.joomlaﬂashtutorials.com tel:(61) 8464.4383 tutorials@abcmix.com

Toda a experiência em treinamento presencial disponível agora na forma digital. Aprendizado rápido, na velocidade de seus negócios. www.actionsoft.com.br tel: (11) 6864.4709 carlos@actionsoft.com.br

A Bluestar Technology oferece toda a linha de treinamentos oﬁciais Borland, CA e Conectiva Mandriva. Temos ainda treinamentos proﬁssionalizantes em Programação Web, com Java, Delphi e PHP. Invista em você, na sua carreira e no seu futuro. www.bluestar.inf.br tel: (61) 3347.9255 atendimentodf@bluestar.inf.br

Pacotão completo 15 cursos com: Digitação, Windows XP, Internet, Ofﬁce XP, Web Design, Montagem.1 Aluno por micro. R$ 24,90 mensais. Desconto de 82% em todas as mensalidades. www.cursomdata.net tel: Madureira (21)3350.4880, Marechal Hermes (21)3390.0386, Campo Grande (21)2412.9515 campogrande@cursomdata.net

A Fuctura é uma empresa que constantemente está preocupada com qualidade e com novas tecnologias. Na área de treinamento oferecemos cursos tradicionais, cursos on-line como o curso de Tecnologias AntiHackers e de ponta como o curso de Bolsa de Valores. www.fuctura.com.br tel: (81) 3088.0992 e-mail: contato@fuctura.com.br

Disponibilizamos uma ampla gama de treinamentos, visando a capacitação para um mundo competitivo. Os cursos abrangem desde o básico de informática até os proﬁssionalizantes. www.diginetinformatica.com.br tel: (71) 3382.7898 R: 124 - Elio Earli marketing@diginetinformatica.com.br

Ligue gratis:

0800 7 720 721

Usabilidade, Arquitetura da Informação, Web 2.0, Webwritting, Tableless, Python, Zope e Plone com os maiores especialistas do mercado. Aprenda conceitos e ferramentas que serão seu principal diferencial competitivo. www.simplesconsultoria.com.br tel: (11)3898.2121 cursos@simplesconsultoria.com.br

Web Designer + Fotografia Web Developer A melhor qualificação profissional em desenvolvimento de páginas e sites para a internet. Você conectado às novidades do mercado. Web Designer é na People ! www.people.com.br tel: (19) 3739.6400 ou 0800 7 720 721

Curso WEB Marketing e Comunicação Digital 28 à 30/08 - Rio de Janeiro 18 à 20/09 - Porto Alegre 16 à 19/10 - São Paulo Conheça a programação completa no site www.wbibrasil.com.br tel: (51) 3233.1771 marketing@wbibrasil.com.br

A Tecnoponta treina há quinze anos proﬁssionais preparados diretamente para o mercado de Web. Crie dinamismo, organize e manipule dados na Web, processando informações em Background . Cursos de Flash Action Script, Ajax e Tableless, ASP.NET c/ C#.NET www.tecnoponta.com.br tel: 3222.9492 treinamento@tecnoponta.com.br

INVISTA EM SEU FUTURO Cássio Raphael Vitiello de Sousa Especialista Oracle - Sócio Diretor www.worldsoft.com.br tel: (11) 3289.5963 contato@worldsoft.com.br

Descrição: Especializada em treinamentos individualizados, a Digital ensina a trabalhar com softwares da área web, assim como os mais usados pelo desenvolvido mercado offshore da região. www.digitaltreinamentos.com.br tel: (22) 2762.1903 contato@digitaltreinamentos.com.br

AGORA NO BRASIL! O melhor treinamento Linux, pertinho de você. tel: (11) 3124.6000

Cursos Presenciais ou e-Learning. Computação Gráﬁca, WEB Design, AutoCAD, 3D Studio. Horários Flexíveis, Início Imediato, Garantia de Aprendizado. Marque uma Aula GRÁTIS! www.treinasoft.com.br tel: 11 5573.9067 Citreinasoft@treinasoft.com.br Av. 11 de Junho, 63, (Metrô Santa Cruz)

Multiplique conhecimento! Nossos Treinamentos: OpenOfﬁce, Banco de Dados, Gestão e Qualidade, Programação Java, Análise de Sistemas, PHP e MySQL PHP com Ajax, Gnu/ LINUX LPI tel: (61) 3244.2510 atendimento@x25.com.br SGAS 910 Ed. Mix Park Sul sl 239 – Brasília/DF

Para anunciar nesta seção, envie um e-mail para publicidade@arteccom.com.br, com o título "busca cursos" ou ligue para (21) 2253.0596