Ed36

dezembro 2006 :: ano 3 :: n 36 :: www.revistawebdesign.com.br

dezembro 2006 :: ano 3 :: nº 36 :: www.revistawebdesign.com.br

Peixe Grande

2006

a nova safra do design para web Entrevista: Julius Wiedemann, da TASCHEN, fala sobre a criação de sites pelo mundo

Estudo de caso: um estudo exclusivo da interface do site 8P (Globo.com)

Reportagem:

Webdesign

quais são os critérios para definir a qualidade de um site?

Tecnologia na web: como e quando utilizar recursos sonoros em um site

E D I T O R A

I SSN 1806 - 0099

9 771806 009009

00036

R$ 9,90

4 :: quem somos

Editorial

Equipe

Profissional 2.0

Direção Geral Adriana Melo

Luis Rocha é nosso diretor de redação. É ele quem escreve toda essa

Direção de Redação Luis Rocha

adriana@arteccom.com.br

revista mensalmente. Queria que vocês conhecessem um pouco mais sobre este profissional que passou o ano inteiro pesquisando, entrevistando e redigindo para vocês, buscando sempre o máximo de qualidade.

Então, com que palavras eu o definiria? Está antenado com tudo o que acontece no mundo da internet sem perder o foco, está sempre buscando aprender mais sobre design, é super ético e educado com os colaboradores e entrevistados atraindo para si ótimas fontes, trabalha concentradíssimo e é, acima de tudo, HUMILDE: sempre disposto a aprender com toda a equipe, acatar sugestões, ouvir críticas e trocar idéias. Bem, o resultado é que ele desenvolve cada vez mais o seu potencial e a qualidade de seu trabalho só aumenta. Um grande profissional. Um profissional, eu diria assim... 2.0, acessível, nos atuais padrões exigidos pela internet :)

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 beto@arteccom.com.br

Publicidade Bruno Pettendorfer 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

Gostaria, então, de parabenizá-lo, especialmente, por todo talento, dedicação e competência e agradecer também nossos excelentes designers, toda a equipe Arteccom, nossos participativos leitores, colunistas, colaboradores, anunciantes, enfim, todos os responsáveis pela grande evolução que a revista passou durante este ano.

Um Feliz Natal para todos!

Obrigada por tudo e até 2007!

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/find Projeto Social Magê-Malien :: www.arteccom.com.br/ong

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

Produção gráfica www.prolgrafica.com.br

Adriana Melo

Distribuição www.chinaglia.com.br

menu :: 5

apresentação

e-mais

pág. 4 quem somos

pág. 48 estudo de caso: 8P.com.br

pág. 5 menu

pág. 54 tecnologia na web: áudio na web pág. 58 tutorial: Produtividade 2.0 - Parte 2

contato pág. 6 emails

com a palavra

pág. 6 fale conosco

pág. 64 usabilidade: Cesar Paz pág. 66 webwriting: Bruno Rodrigues pág. 68 marketing: René de Paula Jr.

fique por den tro

pág. 70 arquitetura da informação: Guilhermo Reis

pág. 8 métricas e mercado

pág. 72 webdesign: Luli Radfahrer

pág. 10 direito na web pág. 11 post-it

portfólio pág. 12 peixe grande pág. 14 agências pág. 26 freelancers

matéria de capa pág. 32 reportagem: O que é que esse site tem? pág. 42 entrevista: Design pelo mundo

6 :: emails

Além disso, somos nós que devemos agradecer, pois os caminhos que tomamos ao longo dos três anos de existência da revista foram sempre sugeridos pelos próprios leitores, que são o grande bem material de um veículo informativo. Continuem participando e contribuindo para

web Assunto: Direito Imagensnaroyalty-free Queria saber se as imagens royalty-free podem ser usadas em sites e em material de divulgação como, por exemplo, folders, banners, entre outros.

Maxwell Rodrigues maxrodsilva@ibestvip.com.br

mais, às suas expectativas.

Fernando e Wagner, como vão?

Na edição 32, de agosto de 2006, nosso colunista Dr. Gilberto Martins, da seção Direito na Web, respondeu uma dúvida muito similar a de vocês. Se tiverem oportunidade, procurem ler essa edição, mais

que a Webdesign atenda, cada vez web Assunto: Direito Design na e arte

Wagner Carvalho wcfdesign@yahoo.com.br

Para respondermos a sua dúvida,

especificamente a página 12.

Maxwell, vamos recorrer a Não sou assinante da revista e por isso me contento em comprar aquelas edições que me chamam mais atenção pela matéria de capa.

E que edição a número 34! Não há uma matéria sequer que não valha a pena ser lida! Meus parabéns!

Sinceramente posso dizer que é o melhor número da Webdesign já rodado. Continuem assim!

Rafael Poggi rpoggi@gmail.com

web Assunto: Direito Cargos na e salários

explicação enviada no começo do ano pelo leitor Ricardo Rehder:

Uma questão me levantou

“Royalty-free é a imagem que

uma dúvida, na edição 34:

você paga uma única vez e pode

na página sobre “Métricas”,

ser usada múltiplas vezes em

gostaria de saber quais são

múltiplos projetos, por tempo

as responsabilidades e os

indeterminado”.

conhecimentos de cada área daquelas que estão descritas juntamente com os salários. Sei

Direito na web em Assunto: Direitos autorais sites

que a faixa salarial mostrada

Assunto: BH no Peixe Grande?

Fiquei muito chateada em saber

é a média dos grandes pólos

Surgiu uma dúvida interessante

O conteúdo da Webdesign tem

que a Metrópolis chegou tão

comerciais do país. Porém, moro

na equipe web da minha empresa:

me impressionado muito. Vejo

perto de concorrer a final do

em Santa Catarina e não tenho

precisávamos explicar para um

que estão dando mais ênfase

Peixe Grande e não conseguimos

referência salarial para o mercado

cliente “leigo”, o que era arquivo-

para os conceitos e estudos

(ficamos em 22º). Mas vi que não

da minha região.

fonte. Procuramos definições,

do design em si (usabilidade,

tem nenhum representante de BH

Leonardo Cidral leonardo@saochico.com

termos e não conseguimos chegar

entre os finalistas, espero ter uma

a nenhum resultado satisfatório.

outra oportunidade de conseguir

Oi, Leonardo. Em edições

Gostaria de saber se já teve

um espaço nessa revista que é

anteriores, publicamos a média

algum tema relativo a isso na

nosso guia no dia-a-dia de trabalho.

salarial nacional, que é por onde

revista. Um grande abraço,

você pode tirar uma base de piso

Fernando Rocha fernando@atualcd.com.br

Luciana Tavares luciana@metropolis.srv.br

tipografia, estética da arte), do que apenas a manipulação dos softwares. Parabéns, pois desde que comecei a ler a revista tenho aumentado meu conhecimento no curso de Design Gráfico aqui em Aracaju, levando para

para a sua categoria. Em termos

Lamentamos que vocês não tenham

de descrição de cargos, uma

Fiz um site para um cliente, mas à

se classificado para final :-( Porém,

boa pedida é acessar o site do

época da assinatura do contrato,

se Belo Horizonte não figura

Ministério do Trabalho e Emprego

não foi incluído no mesmo a cláusula

entre os agraciados na categoria

(MTE), na seção Classificação

que menciona que o direito do

agência, Minas Gerais está muito

Brasileira de Ocupações (CBO

projeto original se restringe a

bem representada com Patos de

- www.mtecbo.gov.br), que traz

empresa criadora do mesmo para

Rafael e Hunald, ficamos muito

Minas (MídiaProativa) e Contagem

uma definição genérica sobre

que a partir dele possa administrar

felizes que a linha editorial

(Agência Evolute). Agradecemos

os profissionais web. Como sua

mudanças futuras. A pergunta

da revista venha ajudando no

sua participação, lembrando

sugestão é oportuna, na edição

é: se o cliente quisesse exigir

crescimento profissional de

que os finalistas da edição 2006

de janeiro de 2007 vamos criar na

que eu fornecesse o CD com o

vocês. Nosso intuito é enfatizar

foram aqueles que prepararam

seção Post-it, um espaço chamado

conteúdo original, os arquivos

a importância dos conceitos

campanhas para arrecadação de

“Qual é a sua função?”, no qual

.FLA, .SWF e HTML, pelo fato de

fundamentais do design como

votos públicos. Em 2007, teremos

apresentaremos as definições

não haver citado no contrato que

base para uma boa formação do

algumas novidades no sistema de

sobre os principais cargos de

são de propriedade minha, eu seria

profissional na área.

classificação dos participantes do

profissionais web.

obrigado a ceder isso a ele?

Selo. Aguardem!

a sala de aula e discutindo com os professores as bibliografias sugeridas nas matérias.

Hunald Júnior hunaldjunior@gmail.com

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

8 :: métricas e mercado

Habilidades relacionadas ao uso da internet Habilidades

Percentual (%)

Usar um mecanismo de busca de informação

28%

Enviar e-mails com arquivos anexados

19,85%

Enviar mensagens em salas de bate-papo etc.

16,53%

Usar um programa para trocar filmes, músicas etc

8,15%

Criar uma página na web

5,53%

Usar a internet para realizar ligações telefônicas

3,97%

Nenhuma das mencionadas

1,51%

Fonte: 10.510 entrevistados / TIC Domicílios 2006 (www.nic.br/indicadores)

Esta é a estimativa de crescimento, nos pró-

40%

ximos cinco anos, no número de internautas

Não aos pop-ups!

com renda inferior R$ 1 mil. Os motivadores:

Oitenta e seis por cento de usuários não aprovam o

redução de preço dos produtos comercializados pela internet e extensão do prazo de financiamento. Fonte: Câmara Brasileira de Comércio Eletrônico (www.camara-e.net)

1 milhão de “.br”

uso de pop-ups publicitários em sites, segundo pesquisa realizada pela empresa inglesa CCB. Fonte: Brand Republic (www.brandrepublic.com)

Telefone celular com acesso à internet Possui

Percentual (%)

milhão de domínios “.br”, registrados no Registro Brasilei-

Sim

38,38%

ro (Registro.br). Nos últimos 12 meses, o crescimento no

Não

57,80%

número de registros foi de quase 20%.

Não sabe ou não respondeu

3,82%

Alcançamos, no final de outubro, a marca histórica de um

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

Fonte: 4.869 entrevistados que possuem telefone celular / TIC Domicílios 2006 (www.nic.br/indicadores)

8 bilhões Este é o montante de buscas realizadas mensalmente pela internet. Além disso, 85% dos usuários encontram o que pesquisam através dos sites de busca, sendo que 60% clicam nos três

A Web 2.0 alterou a maneira como você cria sites?

Total de votos: 324 Sim - 64% Não - 36%

primeiros resultados da busca e 80% não entram na segunda página dos resultados.

Fonte: HotList (www.hotlist.com.br)

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 I love Windows e suas mensagens brilhantes:

Saem os “telespectadores”, chegam os “teleinterativos”

“Teclado desconectado ou não encontrado, para

Ouvi pela primeira vez o termo “teleinterativo”, atra-

avançar pressione F1 ou tecle enter para reiniciar o PC.”

vés do Pedro Cabral, da AgênciaClick, em sua palestra no

(Via Chongas.net: www.chongas.net) Como é o profissional web brasileiro de hoje?

iMasters Intercon 2006, em São Paulo.

Faz todo sentido pensar assim, levando-se em consideração que aquele que está frente às telas interativas, não é mais um reles “espectador” e sim um “interagente”, portanto, “interativo”. “Teleinterativo”. Gostei. Vou começar a usar! © Pedro Cabral!

Revelados: finalmente, o iPhone e o novo iPod Video Seriam estas as razões de Steve Jobs estar tão tranqüilo em relação ao lançamento do Zune?

Tudo de mentira, claro! Mas o design é lindíssimo, né?

Segundo as 448 respostas da pesquisa realizada pela 10’Métricas, entre os dias 25 e 27 de outubro de 2006, em parceria com o BlueBus, o profissional web brasileiro “médio” de hoje tem menos de 30 anos (70%), é homem (77%), mora no estado de São Paulo (70%) e é da capital (88%).

A função que ele(a) desempenha é bem distribuída: 33% se dedicam à direção de arte, 16% ao atendimento/ projetos, 15% ao planejamento, 14% à redação e 8% dos que responderam são diretores ou gerentes gerais.

Setenta e nove por cento dos que responderam declararam ganhar até R$ 3 mil reais, sendo que 50% dizem estar contratados com carteira assinada. A maioria ganha pouco, mas 61% são “solteiro morando com os pais (36%)” ou "sozinho" (25%).

A grande maioria trabalha entre 8 e 12 horas (77%), mas 51% dizem encontrar tempo para se especializar. Veja mais detalhes da pesquisa em: http:// www.10metricas.com.br.

10 :: direito na web

Contratações via cadastramento eletrônico Vamos desenvolver um site onde os internautas poderão se cadastrar para vender ou comprar algo, porém faremos a intermediação desta compra e venda. Gostaríamos de saber qual a segurança ou qual a garantia que podemos ter com relação ao pagamento da comissão que teremos direito, já que o cadastro e o aceite do termo com as condições será todo feito virtualmente. Scheila Martinello (scheila@altosite.com)

Gilberto Martins de Almeida Advogado formado na PUC/RJ, com Mestrado na USP e cursos em Harvard e no M.I.T. ExGerente Jurídico da IBM, onde trabalhou por 11 anos, no Brasil

O cadastramento eletrônico como sinal

ção de atributos, que permite que um titular

de adesão a termos e condições contratu-

de um certificado digital possa ter não só

ais é algo que vem sendo discutido entre

a sua identidade comprovada, mas também

os juristas sob vários ângulos. Por um lado,

os seus demais predicados (dados pessoais,

se entende que os contratos “clickwrap”,

profissionais etc.), fica ainda bastante espi-

em que a contratação se consuma mediante

nhosa a tarefa de conferir cadastros. Numa

um clique, são válidos e eficazes, desde que

contratação on-line, pedir evidências off-

guardada com confiabilidade e segurança a

line? Será que isso não afugentará possíveis

prova desse clique (log segregado etc.).

candidatos? Por outro lado, correr o risco

Por outro lado, o fato de uma contratação ser entabulada à distância, e por via

de não conseguir localizar e identificar um futuro devedor?

e nos EUA. Sócio de Martins de

de meios eletrônicos, reforça a necessida-

Não é por outra razão que alguns

Almeida - Advogados, escritório

de de clareza sobre as circunstâncias do

sites de comércio eletrônico têm recorri-

negócio. Já houve decisões judiciais dizen-

do a seguradoras, empresas de logística,

do, por exemplo, que regras conflitantes

administradoras de cartões etc., para se

constantes em diferentes seções de um

protegerem contra esses problemas, apro-

website devem ser interpretadas da forma

veitando as características de operação e

mais favorável ao consumidor, e que todas

de relacionamento que tais parceiros ofe-

as informações do website serão conside-

recem. A propósito: a Justiça tem ultima-

radas como fazendo parte do contrato, e

mente decidido que dados cadastrais não

não apenas aquelas mencionadas na tela

são dados privados, e podem ser compar-

de cadastro ou em um botão específico.

tilhados com terceiros. Convém, de todo

especializado.

Envie sua dúvida para: redacao@arteccom.com.br

Mais um aspecto a ser levado em con-

modo, deixar claro para os contratantes

ta: quem é o contratante do outro lado? Ele

que os dados cadastrais deles serão com-

é maior de idade, com plena capacidade ju-

partilhados com os parceiros do website e

rídica para firmar contratos válidos? Qual

com entidades como Serasa etc.

a garantia disto? Os dados de cadastro

As alternativas práticas apontadas no

por ele informados estão, garantidamen-

parágrafo anterior não configuram um mun-

te, corretos? Um eventual relaxamento do

do ideal, mas representam um quadro pro-

website em relação a tais questões pode

visório razoável enquanto não se tem certi-

custar caro. Por precaução, em situações

ficação de atributos acoplada a assinatura

nas quais se prevê que o contratante será

digital, o que está sendo presentemente es-

devedor de valores ao website, convém

tudado pelas autoridades encarregadas da

qualificar bem o futuro devedor.

ICP-Brasil para introdução em nosso país, a

Neste ponto, vale notar que enquanto não for implementada a chamada certifica-

exemplo do que foi feito na Espanha, Bélgica e em outros países.

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 Sites políticos: a constatação de um novo mercado Na edição de setembro, a Webdesign apontou a abertura de um novo e promissor mercado: os sites políticos. Do sul, a agência Reweb (www.reweb.com.br) traz um bom exemplo. Ficou responsável pelo site da candidata Yeda Crucis (www.yeda45.com.br), vencedora no Estado do Rio Grande do Sul, e ajudou a reforçar a importância da web na divulgação de campanhas políticas.

Brasil pioneiro no meio acadêmico

Cores na web

No final de outubro, o professor Robson Santos apresentou a tese de

Se você procura ferramentas on-line para trabalhar a combinação

doutorado “Usabilidade de interfaces para sistemas de recuperação

cromática de seus projetos, seguem três boas dicas: ColorBlender.

de informação na web: estudo de caso de bibliotecas on-line de

com (www.colorblender.com), Color Contrast Check (http://tinyurl.

universidades federais brasileiras” (http://tinyurl.com/y37m69),

com/46ojk) e Web Safe Colours (http://tinyurl.com/kby4j).

a primeira em design defendida na América Latina. No trabalho,

Halls de olho na acessibilidade Na última promoção envolvendo a bala Halls, a Cadbury Adams Brasil deu um bom exemplo, provando que é possível criar campanhas publicitárias na internet seguindo os preceitos para a criação de sites acessíveis. Além da versão em Flash, o site da

apresentado na Pontifícia Universidade Católica do Rio de Janeiro PUC-Rio, Robson investiga quais os principais fatores que colaboram para a satisfação do usuário desse tipo de sistemas. Se você possui ou conhece algum trabalho acadêmico interessante, envie sua sugestão para redacao@arteccom.com.br.

promoção “É coisa da sua cabeça” possui uma área de acesso via texto (http://tinyurl.com/vn4e8).

Dicas

Referências criativas - Parte II

Livro do mês

Dando continuidade ao espaço de indicação de trabalhos criativos,

“Pensar com tipos: teoria e

confira alguns bons exemplos: El Moreno (http://tinyurl.com/y6z2wl),

prática do design”

Alexandre Orion (www.alexandreorion.com), Jonathan Yuen (www.

Autora: Ellen Lupton / Tradução:

jonathanyuen.com), T3rzer (www.t3rzer.com) e web.burza (http://

André Stolarski

web.burza.hr). Conhece outras boas referências? Então, envie um

Editora: Cosac Naify (www.

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

cosacnaify.com.br)

Interface de criação digital “Dividido em três seções (letra,

Buscando uma forma diferente de divulgação, o pessoal da Lampejos

texto e diagrama), o livro da

lançou uma ferramenta de criação de pixel arte. “Procurávamos por algo interativo, com poder viral e que pudesse existir e se propagar a partir

professora Ellen Lupton é uma boa pedida para quem procura

da intervenção do usuário, tornando explícito o nosso propósito como

bibliografia atualizada na área de design, mais especificamente

agência de comunicação digital”, explica Fábio Fonçati. O resultado

quando falamos de tipografia. Misturando teoria com

ficou interessante e merece uma visita: Grapixel (www.grapixel.com.br).

exemplos práticos, Lupton utiliza uma linguagem objetiva para

Cartões de Natal on-line Outro exemplo criativo de divulgação do trabalho de uma agência interativa está presente nos cartões de Natal on-line, produzidos anualmente pela carioca Made. “Vemos estas peças interativas como produtos poderosos de marketing que utilizam tecnologia, criatividade e bom design para passar adiante nossos votos, divulgar as nossas qualidades e estreitar os laços entre as partes”, revela Bruno Pacheco, diretor da agência. Confira alguns exemplos: 2004 (http://tinyurl.com/y7sd8n) e 2005 (http://tinyurl.com/vjyxt).

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

apresentar os conceitos fundamentais que regem este campo do conhecimento. Para completar, a autora explica como a tipografia pode ajudar na hierarquia de elementos em um site, além da importância do planejamento de layouts acessíveis, tanto para os mais diversos tipos de programas e equipamentos, como para os portadores de deficiência visual. Destaque ainda para as imagens comentadas de sites, que trazem sempre um ensinamento de como os conceitos fundamentais do design vêm sendo aplicados na web.”

12 :: peixe grande

Concurso Peixe Grande

2006:

peixe grande :: 13

o mapa da pescaria mudou!

Mais do que apontar quem foram os melhores ou os vencedores, os resultados da terceira edição do Selo Peixe Grande (www.arteccom.com.br/webdesign/peixegrande), concurso promovido anualmente pela Revista Webdesign, servem para mostrar de que forma o mapa da pescaria no design para web vem sofrendo significativas transformações: de São José dos Campos, passando por Pato de Minas, chegando a Caxias do Sul, o mercado de criação e desenvolvimento de sites vem se expandindo, a cada ano, pelos quatro cantos do país.

Os números de 2006 são significativos. Na primeira fase da premiação, foram contabilizados mais de 15 mil votos, sendo que a disputa envolveu 171 inscritos na “Categoria Agência” e 316 na “Categoria Freelancer”. Deste total, o público decidiu quais seriam as 20 agências e os 10 profissionais freelancers que participariam da última etapa do prêmio.

A seguir, você poderá conferir quem foi agraciado com o Selo Peixe Grande 2006, cuja escolha final, depois da votação pública, ficou a cargo de um júri especializado nos mais diversos aspectos que envolvem o design na web (cores, equilíbrio, harmonia, tipografia, usabilidade etc.), composto por Adriana Melo (Arteccom), André Matarazzo (Gringo), Cláudia Mont’Alvão (PUC-Rio), Claudio Toyama (Equilibrio Inc.), Felipe Memória (Globo.com), Luli Radfahrer (USP), Michel Lent Schwartzman (10’Minutos) e Robson Santos (Confederação Nacional do Comércio).

14 :: peixe grande - agência

“Layout bem diferenciado e um portfólio variado e bem interessante. Mas as animações poderiam ser usadas com um pouco mais de cautela” (Comissão Julgadora)

Agência Evolute

(Contagem - MG)

www.agenciaevolute.com.br

Crescimento apoiado na agilidade e na inovação O surgimento da Agência Evolute é um bom retrato do crescimento do mercado de internet no Brasil. “Ela foi criada para atender a demanda cada vez mais crescente do departamento de internet da Comunicato Evolute, agência de comunicação integrada com mais de 10 anos no mercado”, explicam Hely Lopes e Ricardo Mazzucatto, executivo de contas e diretor de web, respectivamente.

Os resultados da ação foram imediatos e hoje a decisão parece ter sido a mais acertada. “O setor de internet da agência se desenvolveu com muita agilidade e rapidamente grandes contas foram conquistas. Surgiu então a necessidade de criar uma nova empresa que representasse apenas esta área. Com autonomia, equipe própria, sistemas de trabalho inovadores e experiência adquirida na área de comunicação, temos conseguido obter excelentes resultados em um prazo recorde”.

Case: Fundação Sara www.fundacaosara.org.br

A idéia principal no desenvolvimento do site da Fundação Sara, que apóia crianças com câncer em toda a região de Montes Claros, Norte de Minas e algumas cidades do sul da Bahia, era apresentar um ambiente informativo sobre a doença e que ajudasse a fundação. “O design foi planejado como se uma criança o desenhasse, usando elementos comuns ao universo delas, como giz de cera, lápis de cor, papel picado. Criamos um ambiente desenhado e alegre, além de interativo. Para toda esta interatividade e para que estes elementos pudessem funcionar suavemente, escolhemos utilizar o Flash em todo o site”.

Um aspecto curioso neste projeto foi o envolvimento emocional da equipe de criação da agência. “Passamos o briefing, apresentando um vídeo que contava toda a história da fundação. Quando terminamos de apresentá-lo, alguns de nossos designers estavam muito emocionados. Então, todo o trabalho foi feito com muito carinho e amor, pensando no bem de todas as crianças atendidas naquela casa”.

peixe grande - agência :: 15

“Ótimo uso de Flash, portfólio variado, com excelente uso de interatividade em vários deles. Porém, a navegação pelo portfólio não é muito intuitiva e há itens sem link na lista de clientes” (Comissão Julgadora)

Aldeia -Agência Internet

(Porto Alegre - RS)

www.aldeiainternet.com.br

Bagagem com cerca de 300 projetos realizados Se você quiser saber um pouco mais sobre o surgimento da internet comercial no país, uma boa pedida é acompanhar a trajetória da Aldeia. “Nossos primeiros desafios foram demonstrar a utilidade da internet nos negócios e aprender a criar e produzir para o novo meio. Além de vender nossos serviços, ensinávamos ao mercado o potencial da nova mídia. A rede evoluía rápido e adicionamos tecnologia ao design para entregar sites dinâmicos, oferecer serviços on-line, criar comunidades e outras ações digitais”, relata Gladimir Dutra, gestor executivo da agência.

Dez anos depois, a Aldeia acumula cerca de 300 projetos em seu portfólio. “Hoje, a Aldeia atende clientes no Brasil e no exterior. Além disso, a experiência adquirida nos primeiros anos de atividade permitiu que a empresa desenvolvesse soluções sólidas, criativas e adequadas às necessidades dos clientes”.

Case: Gisele Bündchen www.giselebundchen.com.br

O relacionamento da Aldeia com Gisele Bündchen é de longa data: desde 2001, a agência é responsável pelo planejamento, criação e desenvolvimento do site oficial da modelo. “Quase seis anos depois, produzimos a segunda versão do site, ainda mais interativo e afinada com o público. A primeira fase do novo site durou nove meses, entre planejamento, execução e implementação”, conta Gladimir.

Segundo ele, o conceito da nova versão nasceu do bom material fotográfico disponível. “As fotos são os elementos geradores de cada interface, ocupando a tela inteira. O resultado é a criação de diversos sites em um só, em que a linha condutora é a forma de navegação. Este forte requisito visual demandou uma solução técnica bastante customizada, utilizando Flash, Javascript e XML para exibir o grande volume de informações, publicadas via gerenciador de conteúdo”.

16 :: peixe grande - agência

“Site interessante, cujo layout, uso de cores e tipografia chamam a atenção imediatamente. Apesar da interface bonita, fica a desejar em termos de negócio e de estratégia” ( Comissão Julgadora)

Drimea Comunicação

(São Paulo - SP)

www.drimea.com.br

Praticidade e dinamismo na produção de projetos Criada em 2001, a Drimea é o resultado da união de três obstinados jovens em busca de realização profissional. “Com a experiência adquirida em grandes agências ao longo dos estágios realizados no período de faculdade, resolvemos criar a nossa. Nosso lema é sempre procurar clientes e nunca esperar eles baterem em nossa porta”, afirma Ricardo Ferraz, sócio-diretor da agência.

Outro ponto fundamental nesta caminhada é a flexibilidade nos projetos. “Utilizamos o design das peças sempre aliado à praticidade e ao dinamismo. Crescemos a cada ano, oferecendo soluções criativas que geram retorno para os clientes.

Hoje, contamos com mais de 35 clientes ativos nos mais variados ramos de negócios”.

Case: LMG Digital www.lmgdigital.com.br

O desafio deste projeto envolvia a criação de um ambiente digital para uma das maiores empresas no mercado de impressão de médio e grande formato. “Conhecemos a LMG sem querer, quando um dia procurávamos uma gráfica que pudesse realizar a impressão da arte de um triedro para um cliente nosso. Gostamos muito do serviço e do atendimento da LMG, que nos convidou para conhecer a gráfi ca e todo o processo de impressão digital.

Fomos lá um dia para conhecer e a partir daí nossa relação passou a ser além de cliente/fornecedor”, contam Ricardo Gimenez e Diego Kanaane, sócios-diretores da agência.

O conceito na criação e no desenvolvimento do site seria retratar um ambiente gráfico. “Logo na abertura, uma cabeça de impressão imprime literalmente o site, imitando uma máquina tradicional com black, yellow, ciano, magenta. A estrutura principal foi desenvolvida como se fosse um produto de impressão, com marcas de corte e informações de impressão. A barra lateral, além dos atalhos para determinados menus, representa a escala de cores presente nos produtos impressos pela LMG. O site, criado em Flash e PHP, mostra tudo o que a empresa faz, desde o portfólio até equipamentos que deixam os concorrentes de queixo caído”.

peixe grande - agência :: 17

“Original, diferente, feito com cuidado. O portfólio bastante focado no negócio e nas soluções oferecidas está de parabéns. No entanto, o layout das telas acarreta em excessiva rolagem e o excesso de cliques prejudica um pouco a usabilidade do site” ( Comissão Julgadora)

Ebis

(Caxias do Sul - RS)

www.ebis.com.br

Especialista na utilização estratégica da internet Se hoje a Ebis apresenta larga experiência no mercado de internet corporativa, muito de seu crescimento deve-se ao fato de buscar sempre novos desafios. “A agência nasceu para atender uma perspectiva de demanda em relação ao surgimento da web. Iniciou como consultora estratégica em comércio eletrônico e participou do desenvolvimento de um dos primeiros shoppings virtuais (Beta) do Brasil, o Shopping Porto Alegre”, afirma Dhari Pissetti, diretor da empresa.

Além disso, a agência sempre procurou tratar o design como um ponto fundamental em projetos digitais. “Oferecemos mais que um site plenamente funcional, mas estilo e conceito aos nossos clientes. Esses princípios são expressos no próprio site da Ebis, que procurou, na sua criação, transcender ao desafio de apenas apresentar as três empresas que a compõe, mas mostrar estética em um design diferenciado e único, que o destaca entre os demais sites na internet. Características essas reconhecidas e tidas como referências até por sites nos Estados Unidos e Europa”.

Case: Florense www.florense.com.br/site2006

Uma das etapas fundamentais para que o projeto tivesse um bom andamento foi traçar o perfi l de cliente da Florense, especializada na fabricação de móveis. “Ela cria ambientes para um público extremamente exigente. Dessa forma, o grande desafio era transpor esses ambientes para o meio web. Além disso, o site deveria explorar, ao máximo, todas as possibilidades da internet ao exibir o catálogo de produtos e demais conteúdos, como a versão on-line da revista lançada pela empresa”, aponta Dhari.

Assim, a próxima etapa seria criar uma interface que proporcionasse interatividade, além de gerar uma identificação com o públicoalvo. “O conteúdo é ricamente exibido, com fotos que ocupam quase todo o tamanho da tela, demonstrando toda a riqueza de detalhes e acabamento dos produtos Florense. Apesar da grande quantidade de conteúdo, a navegação é fácil, leve e rápida, um exemplo de que a tecnologia Flash tem muito a oferecer ao usuário em termos de interatividade. A estética é limpa e refinada, encontra espaço e é de vital importância no resultado final deste site”.

18 :: peixe grande - agência

“O detalhe da perereca subindo no canto esquerdo da tela chama a atenção de imediato. No entanto, apresenta uso exagerado de famílias tipográficas em uma mesma interface” ( Comissão Julgadora)

Espécie Soluções Web

(Ponta Grossa - PR)

www.especie.com.br

Produção universitária como estímulo profissional A experiência de integrar uma equipe de desenvolvimento de produtos de informática e serviços de design para web na Universidade Estadual de Ponta Grossa serviu como estímulo para a criação da Espécie. “Precisávamos criar uma marca que fosse facilmente lembrada e associada à criatividade, qualidade e confiança. A criação de um símbolo para a empresa, a perereca, foi um dos aspectos que favoreceu o fortalecimento da marca. Aos poucos, as pessoas passavam a nos conhecer pelo site da perereca ou então pela marca da perereca”, explica José Carlos Cravo, diretor de arte.

A aposta parece ter dado certo. Com pouco mais de um ano de mercado, a agência já tem no seu currículo aproximadamente 40 websites desenvolvidos, sendo três deles para Holanda, e 50 clientes atendidos em mais de 30 ramos de negócios diferentes.

Case: Construtora Miquelão www.miquelao.com.br

A proposta deste projeto era refazer o site da construtora, adicionando novos recursos e desenvolvendo metodologias de suporte, manutenção e estrutura de atualização. “Com a função de servir não apenas como canal de comunicação com o usuário, mas também de agregar mais valor ao seu cliente, o site oferece a possibilidade de acompanhar cada etapa das obras administradas pela empresa. Através de um sistema de gestão de conteúdo, colaboradores da própria construtora mantêm atualizado o status de cada projeto, bem como as notícias que são de importância para seus atuais e futuros clientes”, diz Cravo.

Apostando em um design moderno, a Espécie procurou desenvolver um ambiente com maior funcionalidade e dinamismo para garantir boas condições de navegação e uso. “Com isso, a Construtora Miquelão ganhou um eficiente espaço de comunicação e interação com seu cliente na internet, mostrando estar sintonizada com o mercado e com a evolução tecnológica”.

peixe grande - agência :: 19

“É o mais objetivo de todos os portfólios, com acesso em um único clique. No entanto, o título dos trabalhos e o nome do cliente deveriam vir antes das imagens” ( Comissão Julgadora)

eSpiral Design Studio

(Rio de Janeiro - RJ)

www.espiral.biz

Design movido à amizade e dedicação A história da eSpiral se inicia em setembro de 2002, após o reencontro de dois velhos amigos (Tatiane Forli e Rodrigo Costa).

“Voltamos a nos encontrar pelos caminhos da vida. Nós dois gostamos do trabalho meticuloso e perfeito. Logo em seguida, juntou-se à sociedade Lara Velho, talentosa cineasta e amiga de Tatiane. Passamos a ocupar parte do escritório da mãe de Lara num sobrado em Laranjeiras. Coisa de uns 10 m2 entre Photoshops, Flashs e muita inovação”, revela Rodrigo.

Vencendo os obstáculos comuns aos empreendedores deste segmento, hoje a agência conseguiu conquistar seu espaço. “Nos reinventamos, mudamos de endereço e ganhamos novos clientes. Assim, a eSpiral foi vagarosamente se consolidando, capaz de agradar gostos sofisticados como o dos alemães, que se tornou um dos principais mercados da empresa”.

Case: Fellini www.fellini.com.br

Uma das grandes vantagens no desenvolvimento deste projeto foi o prévio conhecimento do cliente sobre a web. “Começamos a conversar e percebemos que o Nelson Laskowsky, dono do restaurante, é uma pessoa ligada às novidades tecnológicas e que gasta muito de seu tempo na internet pesquisando novas idéias para aplicar em seu negócio. Juntos, concluímos que o novo site deveria ser algo que destoasse dos sites convencionais do ramo da gastronomia e partimos para uma solução menos focada no aspecto corporativo e mais voltada para a riqueza da experiência do usuário”, destaca Ivan Salles, diretor comercial.

Um dos destaques da interface está na panela animada. “Ela é um capítulo à parte. Precisávamos de uma espécie de mascote para ciceronear o visitante. Fomos ao restaurante para fazer uma sessão de fotos do buffet e das dependências da casa, quando nos deparamos com a simpática panelinha de barro azul (na verdade, ela é meio arroxeada, mas alteramos a cor no computador).

Começamos a tirar inúmeras fotos em diversos ângulos e posições. Quem vê o site hoje tende a julgar que a panela foi feita em 3D, mas toda a animação foi feita no braço, com cada frame de animação fotografado um a um à mão livre. Posteriormente, o ‘f’ de Fellini foi acrescentado em Photoshop”.

20 :: peixe grande - agência

“Apesar de pecar em alguns detalhes com relação à usabilidade, o site é limpo, coerente, correto, simpático e com navegação organizada” ( Comissão Julgadora)

fullDesign Comunicação Integrada

(Brasília - DF)

www.fulldesign.com.br

Comunicação para construção de marcas Um aspecto fundamental para explicar o sucesso dos quatro anos de existência da fullDesign está em sua visão antenada sobre as constantes transformações ocorridas no segmento de comunicação. “Trabalhamos com o conceito de Comunicação Integrada: integração entre as mídias que divulgam cada negócio - jornal, revista, rádio, TV, internet e outras - e a promoção da interação entre elas, com planejamento baseado em pesquisas que também define ações below the line e de construção de marca”, afirma Fabiano Abreu, diretor de planejamento.

Assim, ele ressalta que os projetos da fullDesign não se destacam apenas pela criatividade. “Eles são focados essencialmente em planejamento, priorizando a visão global em cada ação, seja na criação do layout no site até a utilização de diferentes ferramentas de marketing on-line para análise de resultados. Tudo visando a construção de marca de seus clientes em curto, médio e longo prazo”.

Case: Montana www.montana.inf.br

O briefing definia claramente o desafio: criar e desenvolver uma comunicação institucional que representasse o novo posicionamento da empresa, especializada no segmento de contact center, e promovesse um relacionamento contínuo e interativo com o mercado.

Assim, o novo site institucional da empresa nasceu com a função de servir de mídia de apoio de todo o projeto de comunicação. “O site conta com gerenciador de conteúdo para todas as seções (inclusive para a versão em inglês), área para cadastramento segmentado de usuários interessados em receber newsletters, informações institucionais detalhadas e outras funcionalidades. Ele foi desenvolvido para dar uma linguagem baseada no conceito de tecnologia sem esquecer o lado humano de interação com o cliente no projeto”.

peixe grande - agência :: 21

“Boa escolha de cores, bom aspecto visual e boa navegação, além da boa exibição dos trabalhos. Somente a tecnologia que torna tudo um pouco lento” (Comissão Julgadora)

MídiaProativa

(Patos de Minas - MG)

www.midiaproativa.com.br

Crescendo com o apoio de uma incubadora Para quem ainda tem dúvidas sobre a importância das incubadoras no desenvolvimento das pequenas e médias empresas no país, a mineira MídiaProativa serve como um bom exemplo. “Para enfrentar as dificuldades iniciais (falta de capital, estrutura física e ferramental), foi fundamental o apoio da Incubadora de Empresas de Patos de Minas/SEBRAE, através do provisório espaço físico, internet e respaldo com consultores”, ressaltam Alaércio Fonseca e Fernando Melo, sócios-fundadores da agência.

Conquistada a autonomia necessária para seguir o caminho com suas próprias pernas, hoje a agência é referência no investimento permanente na capacitação de seus profissionais, através da participação em workshops e treinamentos em centros como Rio de Janeiro, São Paulo e Belo Horizonte.

Case: Beats Patos www.rodopiando.com.br

O relacionamento com a Cadoro Promoções, produtora mineira de shows e eventos culturais, é duradouro e representa constantes desafios para a agência. Um deles foi criar o hotsite do Beat Patos.

“Por ser a principal peça de divulgação do evento, a intenção foi causar um impacto visual, já que o público do evento se identifica com conceitos relacionados não só à música eletrônica, mas também à moda, estética pop e modernidade”, relata o designer Bráulio Santana.

Um obstáculo a ser vencido era o pouco tempo disponível para o desenvolvimento do hotsite. “Atendendo à necessidade do cliente, em uma semana preparamos o layout e a animação em Flash”, lembra Guilherme Loureiro.

22 :: peixe grande - agência

“Site zen, com ótimo uso de cores e interatividade, fazendo com que o visitante se transporte para um outro espaço. No entanto, o uso de Flash em toda a interface pode prejudicar a usabilidade e tornar a navegação mais demorada” (Comissão Julgadora)

Mkt Virtual

(Santos - SP)

www.mktvirtual.com.br

Liberdade, atitude e inovação Pelo segundo ano consecutivo, a Mkt Virtual consegue fisgar a premiação. A história da agência se inicia em janeiro de 2001, quando os jovens Maurício Matias e Ludmilla Rossi decidem abrir uma pequena produtora incubada dentro de uma outra empresa.

Apesar de todas as dificuldades existentes para o desenvolvimento de pequenas e médias empresas no Brasil, hoje a agência colhe os frutos de seu árduo trabalho: são 16 colaboradores, mais de 160 projetos e know-how para projetos de todos os tipos. “A maior realização dos sócios é fazer o que amam, podendo gerar empregos e proporcionar a toda equipe evolução profissional, constante aprendizado e motivação para continuar neste mercado exigente, porém apaixonante”, diz Ludmilla Rossi, diretora da agência.

Case: Crail www.crail.com.br

Explorar a liberdade criativa para criar um ambiente digital com atitude e inovação. Assim começou o projeto para a Crail, empresa brasileira especializada no mercado de skate.

“A navegação vertical, através da rolagem do mouse, é diferenciada. Todas as seções possuem visuais exclusivos e são bem ilustradas. O site foi feito em Flash e conta com um sistema administrativo em PHP, para gerenciar informações que tornam o site altamente interativo com blog, notícias, cadastro, produtos e Posse Crail”, conta Ludmilla.

Além do site institucional, a agência ficou responsável ainda pelo desenvolvimento de uma área de comércio eletrônico, que foi chamada de Crail Shop. “A loja comercializa todos os produtos via internet, através de uma solução completa de gerenciamento e venda”.

peixe grande - agência :: 23

“Bom, relevante, sem grandes inovações, mas com boa aplicação dos conceitos de design. Poderia melhorar a distribuição dos elementos na página” (Comissão Julgadora)

Phocus Interact

(São José dos Campos - SP)

www.phocus.com.br

Participação ativa na evolução do design para web De antigos usuários dos sistemas de BBS para desenvolvedores de projetos para as novas mídias interativas. O que parecia ser apenas um desejo, hoje se tornou uma grande realidade. “Na época, já tínhamos em mente que a internet seria uma revolução e queríamos ser participantes e não apenas usuários”, conta Eduardo Costa, um dos sócios-fundadores.

Se fizerem um balanço do ano que passou, certamente a agência vai constatar que terão muitos motivos para comemorar a realização de um sonho. “Parece ser o ano da grande arrancada: inauguramos nossa nova sede, ampliamos a equipe e trouxemos para a cidade os colaboradores que já trabalhavam em São Paulo. Também reformulamos toda a identidade visual e acabamos de estrear o site novo. Agora, pretendemos nos firmar como uma das principais agências nacionais de internet”.

Case: Chaves & Campoy Arquitetura www.chavesecampoy.com.br

Desenvolver um ambiente interativo para comemorar os 15 anos do escritório de arquitetura, além de apresentar os projetos realizados. Este era o desafio proposto pela Chaves & Campoy Arquitetura.

“Decidimos fazer algo elegante, de fácil navegação e que transmitisse toda a credibilidade que o escritório conseguiu ao longo de todos esses anos. Para isso, optamos por fazer o site utilizando a tecnologia ‘Flash + ActionScript’. Também usamos XML para que todas as seções e fotos do site possam ser atualizadas de forma dinâmica”, diz Eduardo.

Lançado em setembro, o projeto já começa a render frutos. “Há um acompanhamento das estatísticas de acesso e o recebimento do feedback dos usuários. Até agora, foi possível constatar que o retorno do site é excelente”.

26 :: peixe grande - freelancer

“Portfólio variado e distinto, com ótima qualidade gráfica. Porém, apresenta algumas inconsistências em termos de usabilidade, tais como a impossibilidade de fechar a janela com o screenshot da peça do portfólio” (Comissão Julgadora)

André Rodrigues

(Vila Velha - ES)

www.rodriguesdesign.com.br

Foco nos profissionais consagrados A história deste capixaba com o design começou através de projetos experimentais para eventos pequenos e bandas do cenário underground do Espírito Santo. Para aperfeiçoar a prática, André buscou sua evolução profissional no curso de Desenho Industrial da Universidade Federal do Espírito Santo (UFES). “Ao entrar em contato com obras de diversos profissionais consagrados, principalmente David Carson e Alexander Rodchenko, fui aperfeiçoando meu estilo e definindo minha linha de criação”.

O resultado não poderia ter sido melhor. “Atualmente, possuo cerca de 30 clientes fidelizados, incluindo as principais empresas âncoras do Estado (Grupo Arcelor, Petrobrás, CVRD, Aracruz e Samarco). Nos últimos anos, obtive inúmeras realizações, entre elas a conquista do Peixe Grande 2005, que divulgou meu trabalho em nível internacional”.

Case: Vida Viva www.vidaviva.bio.br

Dentre os projetos realizados neste ano, André destaca o trabalho feito para a empresa Vida Viva, organização formada por profissionais e empresas de diversas áreas ligadas à Promoção da Saúde e da Qualidade de Vida. “O website é 100% dinâmico e gerenciável pela própria empresa. Possui um conteúdo aberto para todos os internautas e uma área restrita, voltada exclusivamente para os afiliados do Programa de Qualidade de Vida promovido pela empresa”.

O desenvolvimento da “área do cliente” foi considerado um dos grandes diferenciais deste projeto, pois é lá onde o usuário pode contratar os serviços da empresa. “Criamos uma área de acompanhamento do status dos principais fatores de risco cardíaco, além de diversos testes de estresse e qualidade de vida. Tudo isso através de dados e gráficos de fácil entendimento e alertas e mensagens que têm por finalidade mostrar as principais falhas na prática do programa”.

peixe grande - freelancer :: 27

“Site de fácil navegação e com pouco uso de barras de rolagem. Possui uma certa inteligência, mas acaba por ficar monótono. Uma dica é rever a combinação cromática utilizada para a apresentação do portfólio” ( Comissão Julgadora)

Henrique Leal

(Curitiba - PR)

www.studiowcom.com

Em busca do reconhecimento O primeiro projeto na área surgiu aos 16 anos e foi feito em parceria com dois amigos. O que Henrique ainda não sabia na época era que aquele possível passatempo se tornaria sua profissão no futuro. “No início, estava bem perdido, apesar de gostar da área.

Não conhecia absolutamente nada, inclusive meu primeiro layout (trabalho de faculdade) foi feito no PAINT! As dificuldades eram muitas, principalmente quando o profissional é jovem e não possui um nome na praça. Cobrar os valores reais dos websites e banners parecia bem impossível”.

Para evoluir, ele buscou conhecimento em muitos livros técnicos, cursos, palestras e atividades práticas. “Acho que não só para mim, mas para qualquer profissional que trabalha com criação e desenvolvimento de sites, o mais importante e motivador é o reconhecimento”.

Case: Canil Tads Henriques www.caniltadshenriques.com

“A propaganda é a alma do negócio”. Esse foi o lema utilizado por Henrique Leal para conquistar o projeto. “Esta conta surgiu em uma feira de filhotes que estava ocorrendo em frente a um shopping de Curitiba. A feira foi divulgada na TV e me despertou a idéia de vender websites para os criadores que tivessem grandes canis e trabalhassem somente com esta atividade”.

O passo seguinte foi ligar, no momento certo, para analisar o possível interesse do cliente. “Tudo ocorreu bem, fazendo com que eu partisse para a próxima etapa, que era a criação de um layout e proposta. O cliente foi bem tranqüilo e já tinha algo em mente, passando para mim exatamente o que queria. Trabalhei mais com HTML/CSS e menos Flash, resultando em um website rápido, fácil de entender e do agrado do cliente. No final, o layout não ficou arrojado, nem clean, mas sim legível tanto para o usuário leigo quanto para o mais avançado”.

28 :: peixe grande - freelancer

“Diferente, com boa organização do volume de informações apresentadas. No entanto, peca pela velocidade de acesso aos screenshot, o que dificulta a navegação pelo portfólio do profissional” (Comissão Julgadora)

Leonardo Matias

(São Paulo - SP)

www.lookmysite.com.br

Garimpando oportunidades nos eventos O interesse de Leonardo por projetos envolvendo mídias interativas começou cedo, através do conhecimento nas principais ferramentas de desenvolvimento web utilizadas na área. “Essa curiosidade começou a gerar frutos em 2000, quando desenvolvi sites para pequenas empresas. Aos 16 anos, por indicação de amigos, participava de eventos da antiga Macromedia que contavam com palestrantes estrangeiros, cuja bagagem de conhecimento somou muito para mim. A pouca idade era motivo de estranheza aos outros participantes do evento, até que fui abordado pelo diretor de uma agência de web, onde comecei a trabalhar e pude me qualificar profissionalmente, trabalhando com grandes projetos”.

A oportunidade não seria desperdiçada e ele viveria um período de intensa experiência profissional. “Participei de projetos desde a criação até a programação de complexos sistemas web para clientes grandes como Electrolux, Motorola, ESPN, OFuxico, entre outros. Em termos de identidade e estilo, pude desenvolver um design clean, com navegações interativas em Flash, sempre pensando em criar para o usuário uma boa sensação ao utilizar aplicativos na internet”.

Case: Feiras & Negócios www.feirasenegocios.com.br

Poderia ter sido apenas pela indicação de uma agência parceira em diversos trabalhos, mas um dos trunfos para que Leonardo conseguisse conquistar este projeto envolveu também a qualidade de seu portfólio. O próximo desafio seria criar um ambiente dinâmico e interativo.

“Mas sempre lembrando que os recursos devem ser utilizados de maneira inteligente, transparecendo suas funções ao usuário.

Em termos de design, o site apresenta áreas divididas com linhas retas e blocos, que utilizam as cores do logotipo da empresa, visando um aspecto de portal dinâmico e interativo”.

Além disso, o projeto serviu como uma valiosa lição. “Consegui 100% de aprovação de layouts na entrega de todos os rascunhos. Façanha conseguida, obviamente, através de um bom briefing elaborado junto ao cliente, somados às horas dedicadas na criação”.

peixe grande - freelancer :: 29

“Ótimo aspecto visual, limpo e arrojado. Peca na usabilidade com a abertura de pop-up para a visualização do site” (Comissão Julgadora)

Rodrigo Bondioli

(São Paulo - SP)

www.bondioli.com.br

Criou e programou para descobrir seu potencial A trajetória de Rodrigo com o mundo da internet se inicia em 1996, quando vai trabalhar na agência Paintbox como assistente de arte, desenvolvendo layouts para grandes empresas. No entanto, sua grande dificuldade seria definir em qual área ele gostaria de seguir.

“Depois de muito tempo criando, desenvolvendo e programando, descobri que minha paixão e futura carreira seria no segmento de criação. Depois disso, passei por agências como Tenda Digital, Basics, Chleba e Agência Click”. E para que seu trabalho esteja sempre em evidência, Rodrigo busca atualização em diferentes fontes de informação. “Estudo e pesquiso bastante para inovar. Meu estilo é fácil de identificar: gosto muito de colagem, grounge, tudo com muita arte e sempre seguindo um conceito, um ponto de partida”.

Case: Giz Propaganda www.gizpropaganda.com.br

O desafio deste projeto era seguir o conceito do próprio nome da agência. “Sendo assim, o layout é uma lousa, onde o usuário pode interagir com o site, desenhando e rabiscando com o giz, que é o cursor do mouse. Em alguns momentos, passa um avião de papel sobre a tela, ambientando uma escola”.

Para que tudo isso fosse possível de ser realizado, Rodrigo utilizou Photoshop, Flash, Actionscript e XML. No final, ele acredita que foi desenvolvida uma navegação simples e criativa, com um layout inovador, para viabilizar a divulgação dos trabalhos e facilitar os contatos com a agência.

30 :: peixe grande - freelancer

“Apresenta excelente aspecto visual, com cores e tipografia bem adequadas.

No entanto, a lista de clientes poderia ser menor e ter, pelo menos, um clique a menos na navegação” (Comissão Julgadora)

Vinicius Augusto

(Belo Horizonte - MG)

www.viniciusaugusto.com.br

De Minas para o mundo A caminhada de Vinicius começou mais por hobby do que por uma certeza de profissão. “Em 1999, desenvolvia sites pessoais, de pequenas empresas etc. Tudo era amador, não tinha qualquer conhecimento profundo em nenhum programa.

Sempre trabalhava nas horas vagas e achava que aquilo ali nunca seria meu ganha-pão”.

Entre idas e vindas, ele conseguiu superar os obstáculos, se convenceu que o design poderia ser o seu ganha-pão e hoje se tornou especialista em layouts para comércio eletrônico.

“Devo ter em torno de 40 lojas virtuais com minha assinatura. Trabalho sozinho: montei um home office em minha nova casa, já que me casei recentemente. O ponto alto em minha carreira foi no início de 2006, quando fechei um contrato com uma agência de publicidade de Portugal. Fiz e faço até hoje diversos sites para empresas da Suíça, Portugal etc.”.

Case: Task www.task.com.br

Um dos pontos favoráveis neste projeto está no fato de Vinicius já ter trabalhado na Task, considerada uma das maiores empresas de hospedagem e acesso em Minas Gerais. “Assim, tive liberdade de usar novas idéias e conceitos. Procurei utilizar um layout mais clean, mas que não deixasse de ser comercial.

Através dele, você tem todas as informações que são necessárias para se assinar um plano, entrar no webmail, painel de controle etc. Fiz todo o design do site e a programação (em ASP.net) foi feita pela própria empresa”.

Para o ano que vem, as mudanças no foco de negócios da empresa promete ser o próximo desafio na carreira de Vinicius.

“Deverão ser lançados novos serviços como VoIP, controle de acesso etc. Já estamos produzindo a nova versão do site, que deve estrear em janeiro de 2007”.

32 :: o que é que esse site tem?

O que é que

esse site tem?

Conheça os critérios para se definir a qualidade de um site

“Cinco atributos básicos da usabilidade: ser fácil de aprender, eficiente na utilização, fácil de ser recordado, ter poucos erros e ser subjetivamente agradável”

Felipe Memória

o que é que esse site tem? :: 33

“Fazer o que todos os concorrentes estão fazendo, por mais seguro que possa parecer, não garante o sucesso de um site” Rodrigo David

dos portais iG, iBest e BrTurbo e presidente da Academia iBest de Design, ressalta que o desenvolvimento de um site está intimamente relacionado ao seu público-alvo. “É importante avaliar se há pertinência nas informações fornecidas, se a identidade visual do site está alinhada a da

Certamente isso já aconteceu algumas vezes com você.

Lendo um livro ou uma revista contendo referências sobre

empresa e se existem áreas bem definidas de interação entre o público do site e a empresa”.

sites premiados na área ou acessando alguma comunidade

Porém, se a definição dos objetivos é apontada como

voltada para o design para web, você procura entender o

uma das principais etapas na criação de um site, ela tam-

porquê de tantos elogios por aquele determinado trabalho.

bém é um dos desafios a serem vencidos por quem traba-

Movido pela curiosidade, você abre de imediato seu nave-

lha no segmento. “Parte da dificuldade de muitas empre-

gador, começa a digitar “www ponto xyz ponto com ponto br”

sas é justamente definir um objetivo claro para a sua pre-

e pronto! A sua experiência é imediatamente tomada por um

sença na internet e, a partir daí, criar métricas para medir

fascínio de cair o queixo. E a primeira pergunta que vem logo à

o sucesso (em vendas, em acessos, em tempo de nave-

cabeça é: “mas o que é que esse site tem?”.

gação, em retorno para a marca etc.) de um determinado

Minutos depois, recomposto e parando para refletir, a resposta surge através de vários argumentos: pode

website”, diz Daniel Sansão, sócio da Contágio Criação e membro da Academia de Design do Prêmio iBest.

ser a combinação cromática, a tipografia pouco usual, as

Em busca da criatividade e da originalidade

formas inusitadas, uma idéia original, a navegação ágil e

Antes de descobrirmos o que pode ser considerado

simples, a boa convergência entre áudio, vídeo e texto,

criativo e original em um ambiente digital, vamos conhe-

além de uma ótima harmonia e equilíbrio entre os ele-

cer como as palavras criatividade, originalidade e quali-

mentos da interface.

dade podem ser aplicadas na área.

Nesta edição, conversamos com alguns dos profissio-

“São conceitos absolutamente correlacionados. É

nais que participam das comissões julgadoras das princi-

difícil considerarmos uma sem as outras, e vice-versa.

pais premiações direcionadas para web no Brasil. O con-

São particularmente difíceis de se dissociar na análise de

teúdo deste bate-papo será muito útil, pois vai nos revelar

qualquer objeto de estudo - seja um site, uma obra de

quais são os critérios de avaliação utilizados para definir a

arte, uma peça teatral, o design de uma furadeira, de um

qualidade de um site.

automóvel ou de um site. A originalidade está ligada dire-

Qual é o objetivo?

tamente à habilidade de ver um problema sob um novo

Na busca para se atingir um bom nível em um site,

ângulo. Já a criatividade liga-se à capacidade de pro-

os especialistas apontam que um dos primeiros passos a

por soluções diferenciadas para esta nova perspectiva,

ser seguido é deixar claro para quem o acessa o objetivo

de forma coerente e consistente, enquanto a qualidade

da existência daquele ambiente. “Tudo gira em torno da

é a maneira de juntar as duas anteriores de forma per-

correta definição do objetivo da ação ou do retorno sobre

feita, sem erros ou partes não bem resolvidas ou pensa-

o investimento (ROI). Se soubermos para que o site foi

das”, argumenta Pedro Mozart, sócio-diretor da Urbana e

feito, saberemos definir se ele está adequado ou não ao

jurado do Prêmio Internet Corporativa.

seu público-alvo, baseado no sucesso dos objetivos pré-

Como bem lembra Michel Lent, para se comparar

definidos (vendas, cadastros, exibição de portfólio etc.)”,

o que vem a ser criativo e original em um site, antes é

explica Michel Lent Schwartzman, sócio-diretor da agência

preciso separar grupos de um mesmo segmento e com o

10’Minutos e jurado do Selo Peixe Grande.

mesmo objetivo. “Dependendo do negócio ou objetivo,

Pensando nisso, Rodrigo David, gerente de produção

a execução do site tende a ser muito diferente. A criati-

34 :: o que é que esse site tem?

“Parte da dificuldade de muitas empresas é justamente definir um objetivo claro para a sua presença na internet” Daniel Sansão vidade é relevante em casos bastante específicos, geralmente relacionados a empresas cujo diferencial deve ser medido exatamente pela criatividade (agências de publicidade e estúdios de design). Não acho que a criatividade deva ser um fator diferencial em sites com foco em prestação de serviço ou informações. Nestes casos, o que vale e se diferencia na realidade é a facilidade de uso”.

“Em um site de comércio eletrônico, por exemplo, aspectos como originalidade e criatividade são menos importantes do que uma identidade visual consistente, que facilite a navegação do usuário em um sistema leve e funcional - além do estoque, preço e logística, é claro. Já websites para trabalhar marcas podem, muitas vezes, abrir mão da usabilidade para garantir uma experiência lúdica e inovadora para o usuário. Tudo depende do objetivo daquela empresa ou marca na internet”, complementa Daniel Sansão.

Para reforçar sua visão, ele cita como exemplos os sites Flickr, Google e Havaianas. “Os dois primeiros não têm uma identidade visual forte, que destacaríamos pela qualidade, mas funcionam como uma interface muito leve e simples para sistemas e conceitos - estes sim originais e criativos - que revolucionaram o mercado. No outro extremo estão sites como o da Havaianas, por exemplo. É um site criativo e bem trabalhado visualmente, um pouco pesado e difícil de navegar para a média dos usuários nacionais, mas que complementa muito bem todo o trabalho de marca que tem sido feito ao redor das Havaianas há algum tempo”.

Ou seja, um bom caminho para se atingir tais parâmetros passa pela construção de uma identidade. “O site para se tornar original deve ter personalidade. Os grandes sites são reconhecidos por seus diferenciais, sejam eles tecnológicos ou de design. É preciso pensar ‘fora da caixa’. Fazer o que todos os concorrentes estão fazendo, por mais seguro que possa parecer, não garante o sucesso de um site. É preciso analisar o negócio e trazer para o site, funcionalidades que não podem ser encontradas em outro lugar. Só é original quem se arrisca, foge do padrão e busca novos caminhos”, destaca Rodrigo David.

o que é que esse site tem? :: 35

Trabalhando a identidade visual do site

“Estou cada vez mais convencido de que o princi-

Assim, no processo de construção da personalidade

pal critério é quando o usuário encontra o que procura.

de um site, a aplicação dos conceitos fundamentais do

Por mais que questões como webwriting, arquitetura da

design será fundamental para garantir o sucesso de seu

informação e design de interface trabalhem juntas para

projeto. “Em geral, a qualidade da identidade visual é a

apresentar ao usuário o melhor sistema de informação

combinação de características como boa harmonia de cores,

possível, por vezes o profissional web carece de distan-

preocupação com o gestalt da página, trabalho de tipografia

ciamento para desatar alguns ‘nós’. Neste momento, vale

pensado para funcionar na internet, fotos bem trabalhadas e

o raciocínio ‘back to basics’. É irônico, mas em um mer-

uma estrutura e tecnologia que permitam uma boa combina-

cado que já está maduro como o nosso, muitas vezes é

ção desses elementos”, afirma Felipe Memória, designer da

preciso ‘esfriar o cérebro’ e deixar a lógica falar. Ou seja,

Globo.com e jurado do Selo Peixe Grande.

parar de raciocinar para observar e ouvir o que o usuário

Já Robson Santos, professor de pós-graduação na

deseja”, orienta Bruno Rodrigues, coordenador de infor-

PUC-Rio, ressalta que a consistência funciona como um

mação do site da Petrobras e jurado do concurso Plug In

dos principais fatores de percepção de uma identidade

Website Awards.

visual na web. “Isto significa utilizar elementos gráficos

E para se alcançar tais objetivos, o especialista res-

(tipografia, cores, imagens) de maneira a dar uma noção

salta que o processo de se abastecer um site com infor-

de unidade para quem navegue por qualquer seção do

mações precisa ser feito com o conhecimento prévio das

website. Note-se que unidade não significa uniformidade e

particularidades ali existentes. “Muitos são os produtores

que consistência não é meramente repetir tudo em todas

de conteúdo que encaram a web como mais uma mídia e

as páginas. Veja, por exemplo, o Submarino, que muda as

não param para perceber que há peculiaridades na infor-

cores das seções e no entanto continuamos a perceber

mação para a mídia digital. O fiel da balança é observar

tudo como uma unidade, pois há outros elementos gráfi-

se o processo está encarando a informação apenas como

cos que dão a noção de identidade visual”.

texto. Se isso acontece, esqueça - o site está fadado a

Lembrando que, todo esse processo tem que ser coe-

ser abastecido de conteúdo por um profissional que, como

rente com o posicionamento que se deseja dar ao site.

eu digo, ‘enche caixinha’, ou seja, escreve como escreveria

“Em última instância, ele é um produto com algum obje-

para qualquer outra mídia e não pára para pensar se uma

tivo final: passar uma mensagem, vender uma imagem,

informação ficaria melhor como texto, imagem ou gráfico”.

vender um produto, disponibilizar conteúdo, servir como

Assim, a dica é tratar a informação em um outro nível.

um aplicativo etc. A identidade tem que agradar e ser pen-

“E enxergar ela como geradora de conhecimento para o usu-

sada para o público a que ela se destina. Dependendo das

ário, que nada mais é que ‘informação + informação’. E, neste

características desse público, ela pode ser mais ou menos

ambiente, nada melhor que rechear cada uma das páginas de

elegante, mais ou menos de varejo, mais ou menos mini-

um site com ‘Leia mais’, ‘Veja também’ etc. Minha dica final é

malista. O que vai definir a qualidade da identidade visual

ter total controle sobre o conteúdo que é produzido, o que

é o quanto essas linhas serão bem pensadas e produzidas

passa pela atualização rígida das informações e o cuidado

dentro da estratégia do site para atender seu público-

em não criar áreas com informações repetidas em um mesmo

alvo”, explica Memória.

site. É bom concentrar cada assunto em lugar só, o conceito

Conteúdo na web vai além do texto Não podemos esquecer também que nas avaliações realizadas pelos principais concursos do mercado de criação e desenvolvimento de sites estão sob análise a qualidade e a coerência de conteúdo ali publicado.

da ‘célula única de informação”.

Facilidade no uso: com vocês, a usabilidade e a arquitetura da informação!

Entendemos a importância dos cuidados em relação ao gerenciamento do conteúdo a ser veiculado em um site,

36 :: o que é que esse site tem?

“Muitas pessoas utilizam as novas ferramentas de interação sem critério, apenas para que os sites sejam classificados como Web 2.0” Rodrigo David

cura em um site de comércio eletrônico. “Temos aí, pro-

além do desenvolvimento de uma identidade visual para

arquitetura bem projetada possui categorização e organi-

vavelmente, um problema de arquitetura em potencial. Se ele acha o conteúdo de determinada página incompleto e com falta de informações pertinentes e necessárias, um outro problema de arquitetura pode ser identificado. Uma

se construir uma personalidade única ao projeto. Assim,

zação do conteúdo bem pensados, leva em consideração

para que tudo isso seja assimilado pelo usuário, trabalhar

a lógica de organização de conteúdos pertinentes e rela-

os conceitos de usabilidade será fundamental para garantir

cionados. Ela deve considerar o modelo mental do público-

um período de experiência completo dentro do ambiente.

alvo para que essas decisões de projeto sejam tomadas.

Porém, a dúvida que fica é: como definir o nível de usabili-

Amantes de futebol têm como direcionamento principal de

dade em um site?

navegação seus times do coração. E amantes de Fórmula-

“Costumo dizer que essas características são aquelas

1? O que procuram? Pilotos brasileiros, pilotos em geral,

que atendem aos princípios básicos contidos na definição

circuitos ou escuderias? Uma boa arquitetura da informa-

que mais gosto do termo, dada pelo Jakob Nielsen, em

ção tem que refletir essas questões”, argumenta.

1993. Segundo nosso polêmico ‘guru’, a usabilidade não

Web 2.0 e os desafios da interatividade

é uma propriedade singular, unidimensional de uma inter-

Os conceitos do movimento Web2.0 parecem ter

face com os usuários. A usabilidade tem componentes

marcado definitivamente a forma bilateral como os usuá-

múltiplos e é tradicionalmente associada com cinco atri-

rios vão interagir em ambientes digitais. Pensando nisso,

butos: ser fácil de aprender, eficiente na utilização, fácil

quais ferramentas devem ser utilizadas para atingirmos a

de ser recordado, ter poucos erros e ser subjetivamente

interatividade dentro de um site?

agradável. A preocupação com essas questões define,

“Basicamente, ferramentas que possibilitem a comu-

mesmo que de forma superficial, um primeiro nível de

nicação entre as pessoas, que dêem voz aos usuários. O xis

usabilidade de um site. Para que o nível seja realmente

da questão é fazer com que a publicação de conteúdo por

aferido, é necessário que sejam feitos testes de usabili-

parte de ‘amadores’ seja instantânea e fácil para qualquer

dade”, orienta Felipe Memória.

um. Isso quer dizer que pessoas que não sabem o que é

Outro ponto importante neste debate refere-se à

HTML e FTP precisam conseguir publicar conteúdo: dar

forma como será trabalhada a arquitetura da informação.

sua opinião, escrever matérias, compartilhar fotos, áudios,

“Uma boa arquitetura começa no planejamento do website

vídeos, o que for. Com essa facilidade, meu irmão, que não

e se materializa na superfície com a qual o usuário entra

é fotógrafo, compartilha suas fotos com outras pessoas,

em contato. Então, considero fundamental, partindo do

porque consegue publicá-las em 30 segundos sem precisar

pressuposto de que houve um bom planejamento, criar

da minha ajuda. Minha mãe, que é arquiteta e não jorna-

um sistema de rotulagem cuidadoso, que utilize termos e

lista, publica textos e mais textos sobre arte e moda sem

expressões que sejam familiares ao público-alvo. É neces-

nunca ter ouvido falar em tag”, analisa Felipe Memória.

sário compreender que o projeto de um website deve

No entanto, a opinião de todos os especialistas consul-

ser direcionado a quem o vai utilizar, não para o gosto e

tados nesta reportagem foi unânime: utilize com parcimô-

entendimento de quem o projeta. Arquitetura de informa-

nia os novos recursos de interatividade, sempre avaliando

ção existe para facilitar o acesso do usuário ao conteúdo”,

a real necessidade de sua aplicação. “Os conceitos da Web

explica Robson Santos.

2.0 devem ser aplicados de forma transparente para o usu-

Como exemplo prático, Memória analisa o caso de

ário. Infelizmente muitas pessoas utilizam as novas ferra-

um usuário com dificuldades em achar o produto que pro-

mentas de interação sem critério, apenas para que os sites

o que é que esse site tem? :: 37

sejam classificados como Web 2.0. É preciso fornecer ferramentas que tenham serventia, que sejam funcionais e não troféus de uma nova internet”, alerta Rodrigo David.

“Arquitetura de informação existe para facilitar o acesso do usuário ao conteúdo” Robson Santos

Modelo brasileiro de avaliação de websites Bate-papo: Clorisval Pereira Jr., mestre em design pela PUC-Rio. Atualmente, trabalha com desenvolvimento de projetos e consultoria na Sarjana (www.sarjana.com.br) Nesta entrevista, o especialista revela as etapas e as influências na criação de um modelo de avaliação de websites (http://tinyurl.com/ycyvt6), criado em parceria com Rodolfo Capeto, na época em que atuavam como coordenadores da área de design da Rede Nacional de Ensino e Pesquisa (RNP - www.rnp.br).

Wd :: Como surgiu a idéia de se criar os indicadores para se avaliar a qualidade de websites da RNP? Clorisval :: A partir de 1999, a RNP passou a adotar diversos processos de controle de qualidade de gestão. Considerando os aspectos de consolidação da imagem corporativa e de comunicação com os clientes da organização, o website da RNP foi escolhido como um fator para medição de qualidade e superação de metas.

Entre 1999 e 2000, fizemos um levantamento de diversos modelos e métodos de avaliação de websites.

Encontramos diversas referências sobre avaliação de software, na área de IHC (Interação Humano-Computador), e algumas referências pontuais voltadas para avaliação de websites. Não havia, na época, um modelo amplo de avaliação de sites que englobasse todos os aspectos que considerávamos necessários e pertinentes.

Desse levantamento, optamos por desenvolver um modelo global de avaliação de websites, que acabou resultando em um artigo apresentado e publicado nos anais do “IHC 2000 - III Workshop sobre Fatores Humanos em Sistemas Computacionais”. Esse modelo foi adotado como referência para medição da qualidade do website da RNP. Wd :: Quais conceitos e documentação foram utilizados para se determinar o modelo final?

Clorisval :: Duas referências iniciais de avaliação de software foram o QUAIS, um questionário sobre satisfação do usuário, desenvolvido na Universidade de Maryland, pelo Ben Shneiderman (www.cs.umd.edu/~ben), e o ErgoList (www.labiutil.inf.ufsc.br/ergolist), um check-list ergonômico desenvolvido pelo LabiUtil, de Florianópolis. São modelos de avaliação baseados em inspeção por check-lists, que resultam em uma pontuação que pode ser usada como índice para comparação em sucessivas medições.

38 :: o que é que esse site tem?

Outra referência importante, na época, foi o trabalho “Usability Heuristics for the Web”, desenvolvido pelo Keith Instone, a partir de heurísticas de usabilidade criadas pelo Jakob Nielsen. Também usamos referências sobre tratamento de texto, como o material desenvolvido pelo projeto “Plain Language”, do governo americano, e diretrizes do W3C referentes à conformidade técnica e acessibilidade. A partir do material que levantamos, desenvolvemos um check-list com pontuação para ser usado tanto na medição do índice de qualidade como na definição de diretrizes de projeto.

Wd :: Como essas diretrizes ajudam a melhorar a qualidade de um website?

Clorisval :: A avaliação dos check-lists definidos no modelo auxilia na tarefa de verificação de aspectos deficientes no website e sistematizam o processo de definição de prioridades para ações de redesign.

Mais ainda: a documentação que resulta da avaliação, o relatório dos aspectos verificados e as recomendações de melhorias formalizam o processo de comunicação e decisão entre todos os envolvidos no projeto, desde a direção da organização, aos patrocinadores, à equipe técnica.

A partir da aplicação do modelo de avaliação, todo o processo de manutenção e revisão do website ganha em eficiência. Com os resultados, podemos definir claramente metas, ações a serem conduzidas, prazos e a equipe envolvida em cada tarefa. Com metas claras, a melhoria da qualidade no website fica mais perto de ser alcançada.

Wd :: Que tipo de retorno a RNP teve ao adotar este modelo de avaliação?

Clorisval :: No aspecto interno, a sistematização do processo de verificação e a comunicação de resultados trouxeram maior envolvimento da organização no processo de manutenção do website. Facilitou o relacionamento entre a equipe de desenvolvimento e os setores responsáveis por demandas de veiculação de conteúdo no website. Isso resulta em ganho de produtividade. No aspecto externo, as melhorias no website resultaram em maior satisfação dos usuários, assim como reconhecimento qualitativo no segmento de atuação, que é ganho em imagem corporativa.

Wd :: De 2000 aos dias atuais, quais foram as principais transformações ocorridas nos critérios de avaliação?

Clorisval :: Muito mudou na web desde a primeira versão do modelo que desenvolvemos: novas tecnologias e novos conceitos de negócio. As pesquisas de usabilidade abraçaram a web, a exemplo do Nielsen através do Nielsen Norman Group. O campo da arquitetura de informação surgiu e expandiu de forma fenomenal.

Já se sabe muito mais sobre webwriting. Temos novas especificações do W3C, normas de acessibilidade como a Section 508 (www.section508.gov), além de publicações bem interessantes sobre experiência do usuário na web, como o trabalho do J.J.Garrett (http://jjg.net).

O modelo de avaliação passou por algumas revisões desde 2000. Tanto por conta dos novos conhecimentos, como pela própria experiência na aplicação do método de avaliação. Mantendo a estrutura de check-list com pontuação, vários tópicos de verificação foram alterados ou atualizados.

Wd :: Diante de sua experiência vivida com este trabalho, quais critérios indicaria como fundamentais, conforme o modelo de avaliação criado por vocês?

Clorisval :: A web se desenvolveu muito. Podemos encontrar excelentes soluções de interação em sites de diversos segmentos. Mas vale destacar algumas questões como fundamentais. Foco no negócio, assim como visão do segmento de atuação são um ponto-chave. A web aprendeu muito com concorrência e sobrevivência pós-bolha. Relacionamento com o usuário e qualidade de resposta é fundamental. Suporte, bases de conhecimento para solução de problemas e canais de interação funcionais. Funcionalidade sempre. Ausência de barreiras. Clareza. Apuro estético até os menores detalhes.

o que é que esse site tem? :: 39

Algumas premiações brasileiras - Prêmio iBest (www.premioibest.com.br) - Prêmio Internet Corporativa (www.internetcorporativa.com.br) - Plug In Website Awards (www.concurso.plugin.com.br) - Selo Peixe Grande (www.arteccom.com.br/webdesign/peixegrande)

Como definir uma boa navegabilidade em um site?

Onde estou? Como voltar para o local de onde vim? E para onde posso ir? Segundo Robson Santos, se o usuário conseguir responder a essas três perguntas, estamos diante de um bom sistema de navegação. “Imagine chegar em uma cidade que você não conhece. Basicamente será necessário ter vários suportes para o deslocamento (mapa, nomes de ruas, placas de trânsito). Em um website deve-se ter algo similar, referências e sinais que auxiliem o deslocamento do usuário. Cada tipo específico (compras, educacional, institucional etc.) exigirá uma abordagem de navegação diferente.

No entanto, o princípio básico é sempre o mesmo: orientar o usuário sobre como se deslocar pelas seções do website”.

Quais critérios definem o uso adequado de tecnologias em um site?

- Boas condições de desenvolvimento para a equipe - Custos e prazos para desenvolvimento e manutenção - Diferencial competitivo - Estabilidade e robustez no ambiente de produção - Produtividade - Recursos disponíveis (APIs, componentes, arquitetura interna) - Segurança Fontes: Abel Reis (AgênciaClick) e Érico Andrei (Simples Consultoria)

40 :: o que é que esse site tem?

gan

Participação dos assinantes

par he

tici pe prê e mio s!

Qual foi a edição de 2006 que você mais gostou? Por quê?

Luciana Perdigão luciana@kweb.srv.br

Edição de abril, com a matéria de capa “Negociação”. Porque para mim a negociação é a parte mais difícil do nosso trabalho.

Temos que aprender a mostrar nosso valor para o mercado e saber mostrar aos nossos clientes que o que ele chama de “caro” envolve várias horas de trabalho de uma equipe de profissionais formados, que não param de estudar, pesquisar e se dedicar ao

vencedora!

crescimento na profissão.

Rafael Burity rafaelburity@gmail.com

A edição de setembro foi até agora a que melhor serviu aos meus interesses como designer. Visto que esclareceu e trouxe uma ótima visão da utilização da iconografia na navegação dos sites produzidos por mim. Estou muito satisfeito com o conhecimento adquirido através da Webdesign.

Nando Borges desrazao@hotmail.com

Edição de agosto. Falar sobre profissão sem citar o mercado de trabalho não adianta! A busca por talentos na área de Web Design é constante. É um mercado que está crescendo e mostra que a demanda por trabalho também está aumentando.

Dicas de como facilitar essa “entrada” são sempre bem-vindas!

Wagner Gonçalves web@mminformatica.com.br

Muitas edições marcaram e tiveram boa repercussão aqui na empresa e com meus amigos do ramo, porém quero destacar a edição de janeiro. Foi a edição que mais valorizou os profissionais da web, promovendo novos talentos outrora desconhecidos, além da matéria que é assunto do momento: Web 2.0. Parabéns por mais um ano vencido!

Davi Assumpção davi@daviassumpcao.com

Edição de novembro. O “admirável mundo novo” que surge, ultrapassa o imaginário e derruba a frieza que há entre desktops e usuários. A propagação de idéias, formas, informações, produtos e serviços colocará os cidadãos numa perspectiva do conhecimento de que novas formas de integração “ali”, a qualquer momento, formará uma sociedade capaz de potencializar sua percepção de senso crítico.

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

O autor da melhor resposta ganha prêmios.

debate - atuais influĂŞncias :: 41

42 :: entrevista - design pelo mundo

Como anda o design para web

pelo mundo?

Você sabia que a expansão da banda larga, das redes sem fio e da nova família de monitores (LCD) vêm transformando a forma como muitos profissionais dos mais diversos cantos do mundo trabalham na criação e no desenvolvimento de ambientes digitais?

A valiosa informação vem de Julius Wiedemann, brasileiro que hoje trabalha na Alemanha como editor chefe para design e pop culture da editora TASCHEN (www.taschen.com).

Nesta entrevista, o especialista vai nos revelar mais aspectos envolvendo o design para web internacional. Boa leitura!

“Sites deixaram de ser apenas um pit stop de entretenimento e estão fazendo parte de um contexto muito maior de conteúdo”

entrevista - design pelo mundo :: 43

Wd :: Em sua carreira, você teve uma experiência de quatro anos no Japão como editor de revistas de design e

“Uma ousadia freqüente está, por exemplo, no design de menus e nos sistemas de navegação”

depois foi trabalhar na TASCHEN, na Alemanha. Como essas diferentes culturas influenciaram em seu trabalho?

Um aspecto que ainda vejo muito, e até acho natural, é o

Julius :: Foi no Japão que realmente entrei em con-

fato de como esses inovadores se tornam conservadores

tato com a cultura digital. O que sempre me fascinou lá (e

assim que são comprados por um grande grupo. Mas, ao

continua a me fascinar com a revolução digital) é a plura-

contrário de muitas outras áreas, na internet a capacidade

lidade de plataformas e a viabilidade de se permitir uma

de substituição desses agentes é muito veloz e logo tem

comunicação cada vez melhor. O ritmo no Japão é frené-

gente que aparece reinventando alguma coisa. Isso é uma

tico e aprendemos a conviver com isso. Eles estão sempre

das coisas que mais me fascina até hoje.

na frente, são muito competitivos e querem fazer o melhor

Wd :: Do “Taschen’s 1000 Favorite Websites”, lança-

pelo país. Na Alemanha, aprendi a ser um gerente. Plane-

do em 2002, até a recente coleção “ICONS, Web Design

jamento aqui é religião. Ter boas idéias não basta, temos

(E-commerce, Flash Sites, Music Sites, Portfolios e Stu-

que ter a habilidade de transformá-las em produtos viáveis

dios)”, você poderia nos dizer quais foram as principais

desde o conceito até a distribuição.

transformações na criação e no desenvolvimento de si-

Wd :: Falando sobre o seu atual trabalho (na TASCHEN), quais são os critérios que vocês utilizam para compilar os sites publicados nos livros sobre a área?

tes pelo mundo?

Julius :: Sites deixaram de ser apenas um pit stop de entretenimento e estão fazendo parte de um contexto

Julius :: Como editor, tenho que ser um estudioso de

muito maior de conteúdo. A internet se consolidou como

cultura contemporânea, suas influências, suas raízes e tam-

canal de comunicação de toda a geração abaixo dos 35

bém o seu futuro. Os critérios sempre variam em função

anos. É só ver as estatísticas dos leitores de jornal, que

do título, mas relevância é a palavra que mais uso quando

estão em mais de 90% acima dos 40 anos. Ainda estamos

estamos selecionando. Também buscamos exemplos em

definitivamente em um período de transformação, mas wi-

todas as partes do mundo, já que sempre me preocupo em

reless e banda larga estão dando uma nova dimensão as

conectar pessoas de todo o mundo dentro de um tema. Uma

possibilidades on-line.

última coisa que sempre presto atenção é se temos não só

Wd :: Quais são as possibilidades/transformações

grandes empresas e designers representados, mas também

que essas tecnologias podem trazer na criação e no de-

os pequenos agentes de transformação. As grandes sur-

senvolvimento de sites?

presas estão hoje em empresas sem vínculos com grandes preocupações. Eles podem ser mais ousados.

Julius :: O que tende a acontecer é que os profissionais criativos vão ter mais flexibilidade para se dedicar às

Wd :: E quais são as características e/ou ousadias

inovações de serviços como o uso de GPS, por exemplo.

que esses pequenos agentes de transformação geral-

No Japão, os novos celulares vêm, na sua maioria, com

mente apresentam?

GPS embutido. Isso possibilita uma série de serviços. Um

Julius :: Hoje em dia, com toda a tecnologia disponí-

exemplo que está virando comum no Japão é o caso de

vel, uma pessoa sozinha pode fazer muitas coisas. Encon-

crianças que carregam esses celulares e, quando entram

tramos, às vezes, sites individuais que são melhores em

nas escolas, um e-mail é mandado automaticamente para

termos de design que sites de grandes corporações.

a mãe indicando que ela está na escola. No retorno para

Uma ousadia freqüente está, por exemplo, no design

casa, um outro e-mail é mandado para avisar em quantos

de menus e nos sistemas de navegação. Empresas peque-

minutos a mãe pode pegar a criança no ponto de ônibus.

nas e designers freelancers tendem a ir por um caminho

Parece complexo, mas tecnologia permite que muita coisa

de maior surpresa, como navegação em 3D, espacial etc.

aconteça automaticamente.

44 :: entrevista - design pelo mundo

Wd :: Em termos de tendências, observamos que o estilo urbano, representado pelo grafite e pelo stencil, parece ser uma das grandes influências no processo criativo de muitas agências do país. Na sua visão, quais são atualmente as principais referências utilizadas no design para web no mundo?

Julius :: A cultura popular tem muito a ver com a alternância da aceitação do que é mainstream, comercial, artístico e cult. Vivemos numa era que valoriza muito a exclusividade, por isso tudo que está à disposição de poucos é valorizado. Daí a segmentação. Em termos de linguagem, estamos numa fase de variedade e colagem, já que a internet é um meio muito aberto e permite que todos possam criar a sua.

Wd :: Você acredita que seguir tendências pode acomodar o trabalho criativo na web? A experimentação é um dos caminhos para se atingir um trabalho original?

Julius :: Sem dúvida. Depois que alguém descobre uma mina de ouro, ninguém quer largar. É natural. O que sempre aconselho é que o profissional mantenha uma atividade ou projetos paralelos que ajudem a pessoa a sair da “bolha”. Por isso, sempre tento viajar e ir a conferências, conversar com pessoas de diferente formação etc. Para mim é natural, mas pode ser que para outros seja um esforço muito grande.

“A internet se consolidou como canal de comunicação de toda a geração abaixo dos 35 anos” Wd :: Na edição de novembro promovemos um debate cujo objetivo era apresentar diversas visões sobre as influências atuais no design para web. Dentre as respostas, Victor Sahate, diretor de arte da agência Gringo (www.gringo.nu), citou o modelo web 2.0, no qual os “...sites normalmente não têm muitas imagens, são leves, com cores chapadas, box bem retos, fontes grandes e padrões, bem ‘HTMLzentos’, lembrando, às vezes, aqueles primeiros sites de dez anos atrás - é como se o site não quisesse correr riscos de não ser acessado por alguém no mundo por qualquer motivo”. Pensando nisso, quais transformações o movimento web 2.0 vem trazendo na criação e no desenvolvimento de sites?

Julius :: Ainda existe muita gente que tende a ver a internet como uma fonte simplista de informação útil. O que quero dizer com isso é que quando um site não funciona para uma senhora de 85 anos, isso não

entrevista - design pelo mundo :: 45

significa que o site é ruim. Existe de tudo: entretenimento, experimento, delírios, arte, informação etc.

Julius :: Os consumidores estão deixando de ser passivos e com isso as estratégias de comunicação da maioria

Internet funciona como uma TV ou jornal, mas em es-

das marcas estão mudando. O consumidor de hoje sabe o

cala muito maior. Os mecanismos de busca estão virando

que é advertising, advertainment, advertorial etc. A velha

os nossos filtros, mas as comunidades são o futuro da inter-

tática do faz de conta não funciona mais. As marcas estão

net. Do jeito como funcionamos como sociedade, cada um

hoje caminhando para a disponibilização do conteúdo e

com os seus códigos. Muitos podem dizer que do jeito que

das ferramentas e permitindo que os consumidores tenham

está, a web contém muito lixo, mas isso também é verdade

acesso. A nova geração dos “digital natives” (em oposição

em impresso, em TV, em propaganda etc.

aos digital immigrants) toma o que quer para si. Nesse sen-

Para um consumidor de internet, o que importa é chegar o mais rápido possível onde se almeja e isso não significa que o caminho tenha que ser em texto simples e uma cor. No meu próximo livro sobre estúdios, que vai

tido, o que as grandes marcas estão fazendo é o natural, para criar um elo entre marca e consumidor.

Wd :: Como podemos definir “digital natives” e “digital immigrants”? Quais são as características de cada um?

sair em fevereiro, vamos abordar em um capítulo como o

Julius :: Os digital natives são os cidadãos de mais ou

design para web no Japão é diferente. Lá, por influência

menos 25 anos para baixo, que cresceram no mundo digi-

da televisão, banda larga e monitores de LCD estão crian-

tal, com internet, câmera digital etc. Não viram LP e outras

do um modelo de interação muito diferente dos usados

aplicações analógicas. Se comunicam por e-mail, chat, são

na Europa. Criar uma regra geral para o mundo inteiro na

hackers, valorizam o mundo digital mais que o analógico.

internet é muito difícil.

Minha filha de dois anos já sabe trocar o DVD e eu já devo

Wd :: Falando especificamente sobre este assunto,

ter umas 15 mil fotos digitais dos meus dois filhos. Para

quais são as principais características do design para

eles, que já usam computador (Joana tem dois anos e o

web no Japão e suas diferenças pelo praticado na Euro-

Pedro tem quatro), existe apenas notebook e wireless, com

pa, por exemplo?

banda larga. Dial up é impensável.

Julius :: No Japão, as pessoas usam monitores de LCD

No Reino Unido, mais de 90% dos leitores de jornais

grandes, com resolução altíssima. A banda larga média passa

têm mais de 40 anos. São os digital immigrants. Como tal,

de 10 MB e as pessoas estão muito acostumadas com televi-

podem aprender muito bem até uma outra língua, mas não

são. Então, os sites de produtos oferecem um entretenimen-

vão perder o sotaque. O processo de aprendizado é muito

to que se assemelha muito com TV. Pouca interatividade,

mais demorado. E internet hoje ainda é bastante focada

muita animação. Isso não é regra, mas acontece muito.

nesse público, porque são eles é que têm o poder aquisiti-

Na Europa, internet ainda é vista bastante como uma

vo de manter muitos dos negócios on-line.

ferramenta para otimizar o seu tempo, aumentar produti-

Temos o desafio de conviver com diversas mídias que

vidade. Os ingleses e alemães são incríveis nisso. Se você

servem as quatro gerações que coexistem nesse planeta

hoje estiver na Alemanha e quiser tirar visto para o Reino

(levando em consideração que cada salto de geração pre-

Unido, você tem que fazer tudo on-line, inclusive marcar a

cisa de mais ou menos 20 anos). Isso cria um fluxo de in-

sua visita. É muito bem feito. E funciona.

formação quase insuportável. Acredito numa consolidação

Wd :: Grandes empresas, como a Coca-Cola e a Nike, por exemplo, vêm investindo no conceito de entreteni-

forte dentro dos próximos dez a 15 anos, com uma redução nos volumes de muitos meios.

mento na hora de se criar e desenvolver novas versões

Wd :: Pela sua experiência na observação dos mais

de seus websites e campanhas on-line. De que forma

diversos projetos interativos, quais são as principais di-

este tipo de estratégia vem modificando o processo de

ferenças entre o design para web praticado no Brasil e

quem trabalha com a criação para web?

em outros países?

46 :: entrevista - design pelo mundo

“O Brasil é super inovador em interação e isso é uma qualidade muito valorizada aqui (Alemanha) e nos EUA” Julius :: O Brasil é super inovador em interação e isso é

tório com quatro pessoas, um é administrador e financeiro.

uma qualidade muito valorizada aqui (Alemanha) e nos EUA.

Quando cheguei aqui vindo do Japão (no meu primeiro dia

Mas, por causa de banda larga, por exemplo, ainda ficamos

de trabalho), uma pessoa me esperava, me levou até a mi-

para trás no que diz respeito ao uso de vídeo. No Brasil, tam-

nha sala e disse: “aqui está o seu computador, sua conta de

bém é muito difícil se comunicar em inglês. Por isso, perde-

e-mail está configurada, seus cartões chegam em dois dias, a

mos alguns milhões (e são muitos mesmo) em exportação.

primeira gaveta tem todos os formulários internos, a segun-

Veja o caso da Suécia, uma das potências em internet

da material de escritório e assim por diante”. Era só começar

hoje (junto com EUA, Brasil, Japão e Reino Unido). Eles

a trabalhar e produzir. Aprendi muito de administração. Isso

fazem trabalhos para o mundo inteiro e a quantidade de

faz qualquer empresa mais produtiva e mais lucrativa. Isso

agências inovadoras é incrível. Tudo bem que eles estão ge-

eu vejo no Brasil como um ponto muito complicado.

ograficamente bem posicionados também, mas você pode

Wd :: Na edição de novembro de 2005, analisamos

ligar para lá que vão poder discutir um projeto inteiro em

quais seriam os próximos passos na criação e no desen-

inglês. Por isso que a Nike na Europa fez a campanha “Joga

volvimento de sites. Dentre os aspectos abordados, Luli

Bonito” com a Framfab (www.framfab.se). Eles não param

Radfahrer, professor-doutor da ECA-USP, ressaltava que

de ganhar clientes. Ou melhoramos isso ou começamos a

“...no futuro, riremos de coisas como o estilo ‘portal’

abrir joint ventures em Nova Iorque e Londres.

que todos os sites têm hoje (três colunas, como uma

Wd :: Analisando a quantidade de profissionais brasi-

página de jornal) e, é claro, de letras tridimensionais

leiros que estão trabalhando atualmente em agências inte-

que piscam, pulam e explodem quando se abre um site”.

rativas espalhadas pelo mundo, podemos dizer que o nosso

Pela sua vivência neste mercado, é possível apontar o

conhecimento na área é extremamente valorizado. Diante

que fazemos hoje no design para web, que não faremos

de sua experiência, quais são as qualidades do profissional

mais no futuro?

brasileiro tão almejadas pelas agências estrangeiras?

Julius :: Concordo plenamente que estamos ainda

Julius :: O que mais ouço é a fl exibilidade. Meu editor

numa fase de construção, mas dizer ao certo o que vamos

assistente também é brasileiro e ele consegue pensar muito

ter em 20 anos é difícil. Banda larga vai ser maior e GPS vai

bem em todos os estágios de produção. O que acontece tam-

provavelmente ser mainstream (no Japão já é). No entanto,

bém é que quando vamos para fora e temos todas as ferra-

a internet tem de manter-se economicamente viável para

mentas que nos faltam internamente, parece tudo tão fácil.

poder se financiar. Com isso, a influência de meios de comu-

Wd :: E quais são as ferramentas que nos faltam internamente?

nicação, no que tange a formatos, influencia muito. Vídeo ainda vai melhorar muito. Navegação pode modificar, já que

Julius :: No Brasil, infelizmente não se aprende a ad-

o controle de reconhecimento de voz, por exemplo, ainda é

ministrar. As escolas não ensinam e as pessoas parecem

quase inutilizado. Acho também que hoje temos limites no

não estar interessadas. Na Europa, se você tem um escri-

espaço e que poderão ser mais bem explorados.

48 :: estudo de caso - 8P

Web 2.0 com o gostinho brasileiro Os operários da fantástica fábrica de sites, que atende

tivo onde vários usuários postam fotos sobre determinado

pelo nome de Globo.com, apresentaram no segundo semes-

tema; a maneira como as interfaces tornam a experiência

tre de 2006 mais uma novidade no mercado de internet. A

mais fluida e divertida e a possibilidade de agrupar fotos

fórmula mais recente se chama 8P (www.8p.com.br).

em álbuns. A transparência e a fomentação da participação

À primeira vista pode parecer mais um serviço de álbum

do usuário também são fatores muito importantes para

de fotos on-line, mas sua concepção vai muito além disso.

a formação de uma comunidade sólida e participativa. O

É mais uma prova de nossa capacidade de absorver antro-

nível de qualidade do produto depende muito da pré-dis-

pofagicamente conceitos e linguagens externas e criar uma

posição da comunidade em criar conteúdo de qualidade e

personalidade própria na hora de produzir projetos digitais.

interagir ao redor desse conteúdo.

Nesta entrevista, Marcelo Gluz, gerente de criação de apli-

Wd :: O 8P é um projeto robusto, que pode ter exi-

cativos da Globo.com, conta mais detalhes envolvendo o 8P

gido um investimento considerável para ser posto em

e os recursos necessários para torná-lo realidade.

prática. Quais recursos foram destinados para a criação

Wd :: O número de serviços disponíveis para criação

de um projeto deste porte?

de álbuns de fotos on-line é grande e apresenta um atra-

Gluz :: Não posso falar sobre valores, mas podemos

tivo extra por causa da expansão do mercado de câmeras

considerar que chegamos a ter algo perto de 16 pessoas

digitais, por exemplo. Diante disso, como surgiu a idéia

trabalhando diretamente com o projeto, entre designers,

de se criar o 8P?

arquitetos funcionais, analistas de produto, arquitetos de

Gluz :: Em primeiro lugar, nunca enxergamos o 8P como

sistemas e programadores.

um álbum de fotos, nem um fotolog nos moldes dos que já

Fizemos um teste de usabilidade completo mais para

existem no mercado brasileiro. Nosso processo mental veio

o fim do projeto e uma série de pequenos testes de usa-

a partir da necessidade de criar um ambiente onde os usuá-

bilidade durante o processo de desenvolvimento, sempre

rios pudessem interagir a partir de determinado contexto.

para testar funcionalidades específicas muito rapidamente.

Esse contexto poderia ser um post de texto, um calendário

Também investimos numa pesquisa sobre hábitos e atitu-

de eventos, um vídeo ou uma foto, como acabou sendo o

des de jovens em sites de relacionamento, que foi muito

caso do 8P. Toda a paridade com a interface clássica de um

rica e esclarecedora.

fotolog veio mais tarde, como uma opção de projeto.

Wd :: Na edição de outubro, na seção Post-it, publica-

Os principais diferenciais de produto são o limite ex-

mos uma nota sobre “A Web 2.0 com a cara do Brasil”. O

tenso de postagem sem precisar pagar nada; o espaço cole-

texto fazia menção ao artigo de Richard MacManus (http://

estudo de caso - 8P :: 49

“Nosso usuário é, acima de tudo, um parceiro na construção do site”

www.8p.com.br

tinyurl.com/zukx3), consultor web e colunista do site ZD-

acima de tudo, um parceiro na construção do site.

Net, que analisou alguns projetos brasileiros que utilizam

Wd :: Antes da realização desta entrevista, você

os conceitos do movimento. Diante da experiência de vo-

relatava que o 8P nasceu “contando com um processo de

cês, é possível afirmar que já começamos a desenvolver

desenvolvimento inovador, com a participação do usuá-

uma maneira própria de trabalhar com a Web 2.0?

rio final e uma documentação pouco ortodoxa”. Diante

Gluz :: Entendo que “Web 2.0” foi um termo cunhado

deste novo cenário, como fica o processo de documen-

para tornar tangível uma filosofia que é a evolução natural do

tação de um projeto que nasce sob o cunho “beta” e em

modo de pensar, projetar e usar a internet. Acho ainda que a

constante desenvolvimento?

maior motivação para a chegada da Web 2.0 é econômica.

Gluz :: Assim como o software que construímos, nossa

Em 1999, um projeto de internet envolvia exércitos de

documentação deve ser “viva”, no sentido de ser evoluti-

jornalistas produzindo conteúdo, documentação infalível,

va. É raro ver documentos impressos por aqui, porque a

escritórios bem decorados, testes rígidos e mais certezas

impressão congela uma idéia numa folha de papel. E idéias

do que dúvidas. Em 2006, os projetos são tocados por meia

congeladas geralmente são nocivas.

dúzia de jovens numa garagem comendo pizza e fazendo

Nossa principal ferramenta de trabalho é um Wiki,

upload de software para ver o que acontece. Imensamente

onde as funcionalidades são descritas superficialmente no

mais barato e muito mais propenso à inovação.

início. Na medida em que o projeto vai andando, as idéias

É claro que a Globo.com não é uma garagem e que temos uma pressão por qualidade muito maior do que os

vão amadurecendo e a equipe vai incrementando o tópico até chegar num formato redondo, mas nunca final.

exemplos clássicos de Web 2.0. Mas ainda assim conseguimos adaptar nosso mindset na direção para a qual caminha nossa indústria. Procuramos reduzir a quantidade de documentação gerada, mas zelamos muito pela qualidade dela.

“Investimos numa pesquisa sobre hábitos e atitudes de jovens em sites de relacionamento que foi muito rica e esclarecedora”

Construímos o hábito de pôr os sites no ar em beta, mas sempre dentro do que achamos aceitável para nosso usuário.

Wiki

O que fica mais claro de tudo é que hoje compreendemos

Software colaborativo que permite a edição coletiva dos

muito bem que a inteligência coletiva da comunidade é um

documentos usando um singelo sistema e sem que o conteúdo

trunfo fantástico e que precisamos manter um relacionamen-

tenha que ser revisto antes da sua publicação.

to transparente e de colaboração com ela. Nosso usuário é,

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

X

50 :: estudo de caso - 8P

“É raro ver documentos impressos por aqui, porque a impressão congela uma idéia numa folha de papel”

nitivamente não aconteceu no desenvolvimento do 8P. Wd :: Em artigo sobre o Fórum Internacional de Design e Tecnologia Digital (FIND), Felipe Memória, designer da Globo.com e professor da PUC-Rio, ressaltava

Outro ponto digno de nota é a parceria com os usuários

um dos pontos altos da palestra de Rei Inamoto, diretor

finais. Durante o desenvolvimento do 8P, nosso escritório foi

de criação da AKQA: “...extremo cuidado em não aplicar

povoado por jovens que se relacionam e se expressam na

a tecnologia simplesmente por ela existir, pelo desejo de

internet com uma fluência enorme. Conversamos com eles,

aplicá-la”. Pensando nisso, o AJAX é uma das melhores

ouvimos idéias, assistimos a maneira que eles usam fotologs,

representações da Web 2.0. Por que vocês decidiram

blogs e sites de relacionamento e aprendemos muito. Até

utilizá-lo dentro do 8P?

hoje temos um canal aberto de debates no blog do projeto e o papel deles nas decisões tomadas é enorme.

Gluz :: O AJAX transmitiu alguns atributos interessantes ao produto, tornando-o mais ágil, esperto, lúdico,

Wd :: Falando em Wikis e no processo de produção

fluido e com jeito de software. Para que tirar o usuário

do 8P, quais foram as principais etapas envolvidas na sua

do seu contexto e direcioná-lo para fluxos alternativos, se

construção e as vantagens no uso deste novo recurso?

tudo pode ser resolvido de modo fácil e rápido na mesma

Gluz :: Continuamos usando mapas de arquitetura,

página? Além de mudar a maneira de conceber interfaces

wireframes, telas em PSD e protótipos funcionais. O que

e fluxos, o AJAX também nos fez repensar se faz sentido

mudou foi o documento de especificação funcional, a ló-

desenvolver o client-side tão distante do server-side. A

gica com que as etapas se encaixam. Se, por exemplo, na

fronteira ficou certamente mais tênue.

primeira semana de projeto, a única coisa que sabemos é

Entendo e concordo com esse cuidado citado pelo

que vamos ter uma ferramenta de upload de fotos, o arqui-

Rei Inamoto. É esse bom senso que diferencia um profis-

teto funcional (no caso do 8P, a arquiteta Patrícia Fontes)

sional de um amador. Procuro sempre orientar a equipe no

escreve no Wiki um parágrafo descrevendo o pouco que ela

sentido de que haja uma consciência na aplicação de cada

sabe sobre essa funcionalidade.

vírgula do site. Não só os recursos tecnológicos, mas cada

Na medida em que as idéias forem amadurecendo, esse parágrafo vira algo mais completo até se transformar no caso

pixel precisa provar sua utilidade para existir. E se a gente estiver em dúvida, é sempre melhor tirar do escopo.

de uso utilizado pelo desenvolvedor. Esse processo tem (e

Wd :: Sobre o design, você nos confidenciou que

deve ter mesmo) idas e vindas e discussões entre arquiteto,

“o produto precisava ter uma personalidade forte e ain-

designer e desenvolvedor. Todos os envolvidos precisaram

da assim deixar muito espaço para a personalidade do

criar o hábito de “visitar” o Wiki para levantar e responder

usuário”, ressaltando daí o uso do conceito de “design

dúvidas, documentar informações pesquisadas e bater o mar-

potencial”. De que forma esta idéia influenciou na cons-

telo quando os assuntos eram dados como resolvidos.

trução da interface e como vocês a aplicaram durante o

É importante ressaltar que esse processo também pode

desenvolvimento do site?

ter defeitos. Temos menos controle e previsibilidade sobre

Gluz :: Toda a idéia de “design potencial”, termo

datas, mas minimizamos esse problema quebrando o tra-

cunhado por Newton Fleury (gerente de produto e co-ide-

balho a ser feito na menor unidade possível. Se cada um

alizador do 8P), surgiu quando percebemos que, em sites

não sabe muito claramente qual a sua função, pode ser que

colaborativos, o trabalho do designer só se consolida quan-

duas pessoas façam a mesma tarefa ou ainda que nenhuma

do o usuário interage com o sistema.

das duas atente para uma outra. Outra possível falha é uma

Cabe ao designer estabelecer as regras daquele es-

maior dependência de talentos individuais ao contrário do

paço de modo a criar uma experiência fácil e lúdica, e que

que ocorre em processos mais rígidos. Mas essa falha defi-

gere um produto final esteticamente interessante. A peça

estudo de caso - 8P :: 51

“O AJAX transmitiu alguns atributos interessantes ao produto, tornando-o mais ágil, esperto, lúdico, fluido e com jeito de software” de design só passa a existir com o conteúdo e com a identidade do usuário.

Nós designers sabemos como é complicado abrir mão da idéia de controle sobre nosso produto final, mas imagino que isso também deve ter acontecido com os roteiristas de cinema que passaram a criar jogos de videogame. Antes, se podia controlar como seria o início, o meio e o fim da história. Nas novas formas de storytelling, o roteirista cria um universo e as regras desse universo. e as regras desse universo. Quem define a história é o usuário.

Wd :: Falando da identidade visual do site, foi criado um logotipo que usa a simbologia da comunicação na internet (caracteres “8” e “P”, que formam um rosto com a língua para fora). Que tipo de estudos e quantas versões foram produzidas para se chegar a que está no ar atualmente?

Gluz :: Para ser muito sincero, não fizemos grandes estudos para definição de nome e marca. Sabíamos que a marca deveria falar muito diretamente para o público jovem-urbano e que não deveria ser nada muito certinho demais nem com cara de “big media”.

A principal característica que buscamos na definição da identidade visual do produto é esperteza. Nem inteligência, que é um conceito distante, nem beleza, nem seriedade, nem uma modernidade no sentido de tecnologia. Se o produto fosse percebido como “esperto”, nossa meta seria atingida. A partir disso, geramos alguns boards conceituais e chegamos rapidamente a uma solução satisfatória.

Para adicionar alguma polêmica à minha resposta, devo dizer que, diferentemente do que se espera que um designer diga, não acredito que a escolha do nome seja um fator tão determinante no sucesso ou fracasso de um produto de internet. Orkut e Google são bons exemplos disso. A personalidade dessas marcas vem muito mais do benefício real do produto e da maneira que ele se relaciona com você. É aí que devemos focar o talento do designer.

Wd :: Vocês aproveitaram as vantagens no uso de ícones para ajudar na orientação dos usuários durante o período de navegação. Como o site apresenta novos recursos, foram criados novos ícones, como álbum de fotos, denunciar e refresh, por exemplo. Assim, de que forma vocês procuraram inserir os ícones dentro da identidade visual do 8P? Gluz :: Uma questão interessante é a da funcionalidade que acabamos chamando de “colar adesivo”. Discutimos muito sobre que label usar para explicar que se poderia comentar num espaço específico da foto que outro usuário publicou. A única referência era a do site americano FlickR, que usa

52 :: estudo de caso - 8P

o nome “add note”, mas de qualquer forma o conceito não era consagrado. Optamos pela nova abordagem de “colar

“Não só os recursos tecnológicos, mas cada pixel precisa provar sua utilidade para existir”

adesivo” porque sabíamos que não existia uma terminologia que fizesse o usuário entender o recurso sem que ele

Gluz :: A idéia inicial era que o blog fosse para o ar no

o explorasse antes. Criamos um ícone de um lápis com um

dia zero do desenvolvimento do 8P, mas acabamos pos-

“post-it” ainda sem a certeza de que o usuário entenderia.

tergando um pouco por não saber se ele seria o melhor

Hoje, o uso massivo da brincadeira provou que a metáfora

canal de comunicação possível. Pensamos em usar uma

com o mundo real gerou interesse na funcionalidade, que

ferramenta de fórum ou até uma sala de chat onde a co-

seria aprendida logo depois que alguém tentasse usá-la.

munidade poderia se reunir com os desenvolvedores em

Wd :: Na edição de abril de 2006, realizamos um

determinadas ocasiões, mas acabamos ficando com o blog

debate sobre o uso de templates. Dentre as opiniões,

pela rapidez de implementação e pela vantagem de postar

Alexandre Saddi, designer da Globo.com, apontava que

coisas mais visuais. Tem dado muito certo. É como se nossa

eles “...têm seu espaço no desenvolvimento de sites e

equipe tivesse sido consideravelmente ampliada.

que não devemos ignorar a possibilidade de usá-los ape-

Wd :: O uso de métricas é essencial para justifi-

nas por engessar um pouco o trabalho do designer”. Por

car o investimento em novos produtos ou serviços e a

que vocês decidiram usar este recurso e qual foi o desafio

manutenção dos já existentes. Qual é a expectativa de

para integrá-lo ao restante da interface do site?

retorno em relação ao 8P?

Gluz :: Não acho nem que o template seja um recurso,

Gluz :: O projeto 8P nasceu com dois objetivos mui-

mas sim uma exigência da nossa indústria, basicamente por

to claros. O primeiro é inovar no processo de desenvolvi-

três fatores. O primeiro é que ganhamos velocidade na

mento de produtos e é claro que a inovação no processo

geração das páginas, quando reutilizamos um layout que

acabou se refletindo em alguns aspectos do produto fi-

foi pensado anteriormente. O segundo é que o usuário que

nal. O segundo, mas não menos importante, é gerar uma

aprendeu a usar o layout anterior não vai precisar pensar

audiência qualitativa, que efetivamente esteja disposta a

em como usar o segundo, podendo se concentrar no que

colaborar com conteúdo interessante, divertido, atualizado

interessa, que é o conteúdo. O terceiro é que designers e

e se relacionar com outros usuários a partir desse conteú-

programadores podem concentrar seus esforços criativos

do. Os principais indicadores de audiência são os números

onde eles são mais úteis.

divulgados pelo Ibope, mas no caso do 8P também temos

Nem toda a página de um site precisa ter uma sacada criativa. Num site de entretenimento, o ideal é posicionar o

uma estimativa de crescimento de cadastros e de fotos postadas no produto.

usuário no ponto perfeito entre desafio e tédio. Esse é um

Wd :: Quais são os próximos passos do 8P?

equilíbrio que deve ajudar a pautar o trabalho do designer.

Gluz :: Temos uma idéia do que será feito no produto

Se o design centrar sua criatividade no usuário, não acho

até a maio de 2007, quando faremos uma ampla pesquisa

que esse “engessamento” se faça real.

sobre o uso desse tipo de ferramenta. Digo “uma idéia”

Wd :: Além do Fale Conosco, o usuário pode aces-

porque esse road map deve ser sensível aos novos inputs

sar um blog para manter contato com a equipe técnica

dos usuários e à nossa própria experiência com o produto.

do site, além de ficar informado sobre as últimas novi-

Após essa pesquisa, vamos ter um pouco mais de certeza

dades. Em qual etapa do projeto foi definida a inserção

se o caminho do 8P é incrementar as funcionalidades base-

e a função da ferramenta blog como forma de comuni-

adas em fotos, ou ampliar o escopo do produto, permitindo

cação com o público?

que o usuário crie e publique outros tipos de conteúdo.

estudo de caso - 8P :: 53

Exclusivo: Estudo de interface do projeto 8P “Esta é uma interface antiga do 8P, com os comentários da equipe. Nela, relacionamos o que foi ao ar com o que havíamos pensado inicialmente” (Marcelo Gluz - Globo.com)

54 :: tecnologia na web

Tecnologia na web Som na caixa: como utilizar recursos sonoros em um site Ao longo do tempo, os novos recursos que vêm sendo

transferência. “Você não pode carregar seu site com arqui-

disponibilizados para o uso da internet, tanto na forma

vos enormes, se não tiver uma banda para que o processo se

como a acessamos (banda larga, internet móvel etc.), como

torne rápido. Não funciona. O usuário quer praticidade. Ele

na maneira que criamos e desenvolvemos projetos na área

só vai optar em ouvir áudio pelo seu site se isto ocorrer de

(ActionScript, AJAX, DHTML etc.), têm provocado profun-

uma maneira simples e intuitiva, em um processo tão simples

das transformações na maneira como os usuários vão usu-

e rápido como ligar o botão de um rádio”, orienta.

fruir o período de navegação dentro de um site.

Ou seja, a idéia é proporcionar uma experiência mais

Um dos favorecidos nesta caminhada foram os recursos

rica e interativa, para que o usuário tenha o prazer de uti-

sonoros, considerados uma ferramenta eficaz para enriquecer

lizar uma mídia interativa completa. “No entanto, devemos

a experiência em ambientes digitais. “Antes do ano 2000, os

tomar cuidado com as desvantagens. Se o sound design for

sites geralmente usavam apenas um loop curto, realmente ir-

mal feito, torna a interação com o site menos prazerosa, ou

ritante, sempre com músicas muito fortes, o que levava muita

até mesmo ridícula se não for feito com o devido cuidado”,

gente a desligar o som quando acessavam um site. No entan-

alerta Marcelo.

to, o desenvolvimento de softwares e a expansão da banda

Etapas para incluir áudio em um site

larga possibilitaram uma integração de sons em websites de

Convencido das vantagens sobre o uso de recursos so-

uma forma muito mais viável”, afirma Marcelo Baldin, diretor

noros, na etapa seguinte será necessário analisar o espaço

de arte e sound designer (www.combustion.ws).

e capacidade disponíveis. “Depois da capacidade de taxa

Segundo o especialista, essa evolução começou a

de transferência, é preciso fazer a compressão de áudio e

tomar corpo no ano de 2001. “Nessa época, já existiam

utilizar alguns recursos da linguagem XML. O profissional

sites que se preocupavam com o sound design, usando

pode também se valer de links a outros sites que tenham es-

muita interação sonora de forma adequada. Hoje, há sites

trutura de acomodar seus arquivos. É como deixar um vídeo

onde você mesmo pode fazer sua própria música, utilizan-

em seu blog que esteja hospedado no YouTube, o que é algo

do aplicações feitas em Flash (www.looplabs.com). Além

relativamente muito simples de fazer”, relata Roberto.

desses tipos de interação, a música ambiente também tem

Assim, a recomendação é que os recursos sonoros

um papel fundamental junto com a integração com víde-

sejam deixados como a última coisa a ser inserida no site.

os. O simples loop está morrendo, pois existem diversos

“Isso porque toda a funcionalidade tem que estar pronta,

caminhos pelos quais um sound designer pode explorar a

para depois os sons serem inseridos. Depois de uma aná-

interatividade. Sites como o Pandora (www.pandora.com)

lise detalhada do que é preciso para o site e sobre o que é

e o Last FM (www.last.fm) exploram o áudio na web de

viável, são feitos os efeitos sonoros e/ou a(s) música(s). O

uma maneira muito boa. O foco é conhecer novos artistas.

Flash faz com que isso seja muito fácil de ser feito. Qualquer

Para tal, eles usam de recursos com integração de base de

um, com o mínimo de conhecimento em Flash, sabe como

dados e Flash de uma maneira eficaz”.

inseri-los. O maior trabalho é feito pelo sound designer com

Devemos usar som conforme o perfil do site?

Para Roberto Maia, diretor de criação da Agência

programas de áudio”, explica Marcelo.

A febre dos podcasts

Pode! (www.agenciapode.com.br), esta questão vai se re-

Atualmente, quando falamos do tema “áudio na web”,

sumir, principalmente, em relação à velocidade e à taxa de

é impossível não relacioná-lo com a expansão dos podcasts,

tecnologia na web :: 55

nível básico

“Ouvir áudio por um site deve ser um processo tão simples e rápido como ligar o botão de um rádio” (Roberto Maia) que parece ter impulsionado o uso desse recurso em ambientes digitais.

Assim, quando devemos recomendar a criação de podcasts em um site?

“A utilização de podcasts pode ser tanto como um formato de áudio blog comum, como também um programa de rádio onde podem ser apresentados os mais diversos assuntos. Aconselho a utilização de podcasts para sites no qual o cotidiano, notícias e novidades são o principal foco.

Sites relacionados à música podem se aproveitar dos podcasts para divulgar novos artistas, bootlegs etc. O podcast realmente só é útil se você tem com o que preenchê-lo. Exatamente como um RSS deve ser utilizado. Eu, por exemplo, escuto podcasts da XLR8R (www.xlr8r.com), revista americana sobre cultura e música, para conhecer novos artistas fora do mainstream”, diz Marcelo.

Dessa forma, a idéia é que o podcast seja usado como uma ferramenta para agregar valor a um site. “E desde que não tire o foco principal ou não carregue este site. Já ouvi podcast de mais de uma hora, com péssima qualidade, de uma pessoa falando como se estivesse no telefone jogando conversa fora. Isso não interessa a ninguém, é totalmente não funcional, se torna um desserviço. Procure entender estas questões de funcionalidade, de convergência e outros aspectos da comunicação moderna. Não usar a tecnologia pela tecnologia, nem a novidade pela novidade. Isso me faz lembrar um desafio, quando foi criado o conceito: ‘a forma segue a função’ e logo em seguida foi questionado que ‘forma segue o fiasco”, alerta Roberto.

Recursos e conhecimentos necessários Para quem pretende se aprofundar na parte de recursos sonoros, a dica dos especialistas é buscar especialização em programas de edição de áudio e no Flash. “Para a criação de sons, conhecimentos básicos em simples programas como Acid (http://tinyurl.com/mjvj6) ou Sound Forge (http://tinyurl.com/87buq). Com eles já se pode ter uma noção de formatos, freqüências, compressões etc. Para a inserção de áudio em um site e também para entender o que pode ser feito, conhecimentos na parte de som do Flash são essenciais”, indica Marcelo. “Conhecer o básico de HTML, ter um editor sonoro (que pode ser gratuito como o Audacity http://tinyurl.com/7xp2v) e ter um editor de RSS para criar os feeds, ou seja, os links para os agregadores sonoros (tipo i-Tunes). Basta dar uma busca com estes itens. Encontram-se dezenas de dicas e programas gratuitos. É a

56 :: tecnologia na web

“Interprete sites como um ambiente rico em interação e explore novas idéias ou aperfeiçoe idéias já feitas” (Marcelo Baldin)

realidade da chamada Web 2.0”, complementa Roberto.

Em termos de bibliografia que ajude na caminhada

O que é e como surgiu o podcast?

pelo conhecimento, é possível encontrar muito material

Forma de transmissão de arquivos de áudio

dentro da própria internet. “Não é preciso gastar dinheiro

pela web, uma espécie de programa de rádio perso-

com livros, não que não sejam necessários, mas podem vir

nalizado, que qualquer um pode fazer e todo mundo

em uma segunda etapa. No começo, basta dar uma busca

pode ouvir. O termo (união de iPod com broadcast)

e ler muito na própria web, pois é preciso separar a boa da

surgiu no artigo “Audible revolution” (http://tinyurl.

má informação. Ler sobre a história do podcast, ver o que

com/yfobq3), escrito por Ben Hammersley em feve-

existe de bom e ruim (lembrar que como qualquer produto

reiro de 2004, no jornal britânico The Guardian. O

cultural deve ter uma finalidade de conteúdo e uma função

mais interessante no podcast é que ele permite a

estética). Se informar sobre conceitos da linguagem XML,

distribuição de conteúdo multimídia para qualquer

programas de edição de áudio e ler sobre os conceitos da

aparelho (computadores, celulares, PDAs), sem a ne-

Web 2.0. Tudo isto lhe dá condição para um bom começo”,

cessidade de servidores específicos, usando apenas

orienta Roberto.

a linguagem padrão da web.

Isso porque o grande problema está na escassez de

Fonte: S2 Comunicação (http://tinyurl.com/yc8feu)

material impresso que faça uma abordagem completa sobre o assunto. “O que pode ser mais facilmente encontra-

Áudio como guia on-line

do são artigos dentro de livros sobre Flash e em revistas

Um bom exemplo de uso de recursos sonoros

sobre webdesign. No ‘New Masters of Flash Volume 3’,

na web está presente no site oficial de turismo da

por exemplo, Danny Franzreb (www.taobot.com) escreveu

cidade de Buenos Aires, na Argentina. Eles criaram

um capítulo sobre utilização de diversos layers de som no

uma seção chamada “Áudio Guia Móvel” (http://

Flash e a interação entre eles. Outro livro, um pouco mais

tinyurl.com/yym9d2), no qual disponibilizam uma

antigo, é o ‘Rich Media Lab (Paperback/2001)’, que fala

série de arquivos de áudio para que o usuário possa

especificamente sobre utilização de vídeo e som na web.

conhecer um pouco da história da cidade.

Sobre áudio especificamente, é melhor ler revistas como Future Music”, diz Marcelo.

Formatos de áudio na web

Além disso, o especialista acrescenta em nossa lista a

Segundo Marcelo Baldin, os formatos “.MP3”,

navegação por diferentes sites que podem abrir o leque de

“.AIFF” e “.WAV” são os mais utilizados. “O melhor

opções quando falamos sobre áudio na web. “Geralmen-

é utilizar AIFF ou WAV e comprimi-los com o Flash,

te, sites que oferecem tutoriais de Flash sempre contam

para o desenvolvedor escolher o que melhor se en-

com recursos relacionados a áudio (www.ultrashock.com).

caixa no quesito peso/qualidade do site. Quanto

Interprete sites como um ambiente rico em interação e ex-

mais sons em um site, maior a compressão é feita

plore novas idéias ou aperfeiçoe idéias já feitas. Navegar e

para diminuir o peso total do site. Uma excelente

conhecer bons sites ajuda na criatividade. Um site que vi-

alternativa para não perder a qualidade é fazer um

sito bastante para ver o que há de bom sendo feito no

loader constante no background, para sons que ain-

mundo é o The FWA (www.thefwa.com), onde os premiados

da serão utilizados. Assim, não precisa carregar to-

sempre sabem utilizar os recursos de áudio”.

dos de uma vez”, argumenta.

“Procure não usar a tecnologia pela tecnologia, nem a novidade pela novidade” (Roberto Maia)

58 :: tutorial

Produtividade 2.0 - Parte 2 Elcio Ferreira Desenvolvedor e instrutor na Visie Padrões Web http://visie.com.br/

Subversion, código sob controle

isso apenas uma vez. No Ubuntu, num terminal qualquer:

Uma das ferramentas de produtividade mais importantes

$ sudo apt-get install apache2 subversion libapache2-svn subversion-tools

de se possuir é uma ferramenta qualquer de controle de versão. Há uma série delas por aí, incluindo as populares SourceSafe, da Microsoft, e a open source CVS. É bastante simples instalar e começar a usar uma ferramenta de controle de versão. O impacto dela sobre o processo de produção é muito grande, de modo que é um bom lugar para começarmos.

Em seguida, você precisa escolher onde vai guardar seu código-fonte. Qualquer diretório serve, depende de sua escolha.

Aqui eu uso /home/dev/subversion. Vamos criar um repositório chamado validar, onde armazenaremos um sistema de validações, com código para validar e-mail, CPF, CNPJ, URL etc. $ cd /home/dev/subversion/ $ svnadmin create validar

Em primeiro lugar, o que é uma ferramenta de controle de

Está criado um repositório, vazio, chamado validar. Va-

versão? É um repositório de documentos, com um bom contro-

mos agora configurar o Apache para que possamos acessar

le de revisões e alterações, em especial para documentos de

nosso repositório. Primeiro, fazemos:

texto. É uma excelente ferramenta para armazenar e controlar

$ sudo gedit /etc/apache2/mods-enabled/dav_svn.conf

código-fonte, de qualquer linguagem. Entre as vantagens do uso de uma ferramenta dessas estão: - Todo o seu código fica num lugar só, fora dos seus servidores de desenvolvimento, testes ou produção. Você vai perceber como isso é útil no dia que precisar fazer uma migração de servidores.

- O controle de alterações vai evitar que você e um colega sobrescrevam o trabalho um do outro ao mexerem no mesmo arquivo ao mesmo tempo.

Há instruções bastante detalhadas no arquivo, para que você possa personalizá-lo às suas necessidades. Veja como ficou o meu: <Location /validar> DAV svn SVNPath /home/dev/subversion/validar AuthType Basic AuthName “Subversion Repository” AuthUserFile /home/dev/subversion.passwd Require valid-user </Location>

- Se vocês mexerem em linhas diferentes, a ferramenta

Você vai reparar numa linha que aponta para o arquivo

faz o trabalho todo automaticamente. Se mexerem nas mesmas

/home/dev/subversion.passwd. Vamos criar esse arquivo, in-

linhas, há excelentes maneiras de se resolver o problema com

cluindo os usuários que terão acesso ao repositório. Para cada

facilidade. Se você, ou outra pessoa da equipe, fizer alguma

um deles, execute:

besteira, é muito fácil voltar as coisas a um estágio anterior. É fácil, inclusive, saber exatamente quem alterou o arquivo, que modificações foram feitas e quando.

- E a maior vantagem, em minha opinião, é que você pode, ao final do dia, da semana e do mês, rever o seu trabalho. Assim, você pode avaliar a maneira como você mesmo trabalha.

A principal atitude do programador pragmático é o fato de pensar sobre o próprio trabalho.

Instalação Vou mostrar a instalação do Subversion no Ubuntu, que

$ htpasswd2 -c /home/dev/subversion.passwd elcio

Onde elcio é o nome de usuário. O aplicativo vai lhe pedir a senha do usuário e seu arquivo está pronto para o uso.

Faltam apenas duas coisas. A primeira é garantir que o Apache tenha acesso aos arquivos do subversion. Uma maneira de fazer isso é modificar o dono dos arquivos. Digamos que seu Apache esteja rodando como o usuário www-data, que é o padrão no Ubuntu: $ sudo chown -R www-data /home/dev/subversion*

Feito isso, falta o último passo, que é reiniciar o Apache: $ sudo invoke-rc.d apache2 restart

é o sistema operacional que eu uso, tanto em meus desktops quanto em meus servidores. Mas a instalação do servidor pode

Se tudo deu certo, ao acessar /validar em seu servidor web,

ser feita com facilidade em qualquer distribuição Linux, em

você deve informar seu login e senha e verá a seguinte tela:

Mac OS X e Windows. Vamos começar pelo repositório e servidor web. Essa é a parte mais chata, porém você terá que fazer

tutorial :: 59

Parabéns, o Subversion está instalado. Vamos popular este repositório vazio e aprender a usá-lo.

Importando seu código Se você já tiver código em seu projeto, é muito fácil e útil importá-lo para dentro do repositório. Digamos que seu projeto esteja em /home/www/ projeto1. Você pode fazer: $ svn import /home/www/projeto1 http://localhost/validar/projeto1

Será aberto o editor de textos, para que você informe o que está fazendo para o log do Subversion. Digite algo como “importando o projeto”, salve e feche. Seu código será salvo dentro do repositório. Ao acessar no navegador, você poderá ver:

Usando o repositório Agora vamos à parte do trabalho do dia-a-dia: a programação usando o Subversion como controle de versão. Há mais de uma maneira de se trabalhar com ele em relação a diretórios de trabalho e servidores. Vou explicar como trabalhamos em minha empresa. Para começar, não temos um servidor de desenvolvimento. Cada desenvolvedor tem servidor web e de banco de dados instalado em sua própria máquina, ou seja, cada máquina de desenvolvedor é um servidor de desenvolvimento.

Temos então um servidor de testes, ou homologação, e um de produção. Isso simplifica muito a manutenção do ambiente e tem um impacto muito grande na produtividade.

Se um colega roda um loop infinito, isso trava apenas a máquina dele e não o servidor em que você está trabalhando. Além disso, você trabalha sempre com arquivos em seu próprio disco, sem ter que esperar por FTP e depender das condições de sua conexão a cada alteração no arquivo. Apenas depois de uma etapa de programação e testes você precisará da rede para submeter seu código ao repositório.

Digamos que o servidor onde você instalou o Subversion fique, por exemplo, no domínio codigo.visie.com.br. Você pode usar um IP de um servidor em sua rede interna, se preferir, não há problema algum. Basta que haja alguma maneira de enviar esse código aos servidores de testes e de produção. Como fazemos muito trabalho à distância, usamos um endereço público para isso.

Vou mostrar como se trabalha com o Subversion usando a linha de comando, que é como eu costumo usar. É útil aprender isso, mesmo que você vá usar uma inter-

60 :: tutorial

face gráfica para lidar com o Subversion, porque poderá executar esse comando em seus servidores remotamente, via SSH. Se você tem pavor de terminais de linha de comando, não se

Tente rodar o st de novo agora: $ svn st validar A validar/javascript A validar/javascript/validadores.js

preocupe. Há uma série de clientes gráficos para o Subversion. No

Ou seja, agora o Subversion sabe que você adicionou um

Linux, você pode experimentar o RapidSVN. Para Windows, o mais

diretório javascript e um arquivo validadores.js dentro dele.

popular é o Tortoise, da Tigris, que você pode baixar em http://tor-

Para enviar isso tudo para o servidor, execute:

toisesvn.tigris.org/ e que se integra ao Windows Explorer, oferecen-

$ svn ci validar

Onde “ci” é “commit”. O editor de texto vai perguntar

do os comandos do Subversion no menu de contexto, assim:

novamente o que você está fazendo. Digite: “criando o esqueleto do validador de emails”, salve e saia. Seu código vai para o servidor. Faça uma alteração no arquivo, trocando a linha: return true

Por: return email.indexOf(“@”)!=-1

Assim nossa função já valida, pelo menos, se existe um arroba no email informado. Execute novamente st: $ svn st validar/ M validar/javascript/validadores.js

O primeiro passo é escolher um diretório em sua máquina onde trabalhar. Aqui eu trabalho em /home/elcio/www, que está publicado no Apache, assim fica fácil de testar. Vou começar baixando o código do repositório nessa pasta: $ cd /home/elcio/www $ svn co http://codigo.visie.com.br/validar

Pronto, temos um diretório validar dentro de /home/elcio/www com o código do repositório. As letras “co” no segundo comando significam “check out”. Vamos criar um diretório dentro dele para os arquivos que vamos criar:

Agora o subversion está te avisando que o arquivo validadores.js foi modificado. Para ver as alterações, execute: $ svn diff validar Index: validar/javascript/validadores.js ============================================== --- validar/javascript/validadores.js (revisão 2) +++ validar/javascript/validadores.js (cópia de trabalho) @@ -3,5 +3,5 @@ */

$ svn mkdir validar/javascript

Está criado o diretório. Crie um arquivo validadores.js dentro dele e, usando seu editor de código predileto, digite: /* Validadores de uso geral */

function validaEmail(email){ return true + return email.indexOf(“@”)!=-1 }

Repare nas duas linhas que deixei em negrito. A primeira, com o sinal de menos, é a linha antiga. A segunda,

function validaEmail(email){ return true }

Tendo feito isso, execute: $ svn st validar ? validar/javascript/validadores.js A validar/javascript

Este comando lista o status atual do repositório local validar. O ponto de interrogação informa que você criou um novo arquivo, mas não disse ao Subversion o que fazer com ele. A letra A na última linha informa o fato de você ter adicionado o diretório validar/javascript. Vamos informar ao Subversion o que fazer com nosso arquivo validadores.js, com o comando: $ svn add validar/javascript/validadores.js

com o mais, é a nova. Para enviar essa alteração, execute: svn ci validar

E digite no editor de textos algo como “agora nosso validador verifica se o email tem um arroba”. Salve e saia.

Bom, este é o começo. Se ainda não parece muito emocionante para você, aguarde até o mês que vem, quando vamos mostrar como isso funciona quando há mais de um desenvolvedor no mesmo projeto. Apresentaremos ainda o Trac, uma excelente ferramenta para controlar seu código e obter informação sobre seu próprio trabalho do Subversion. Depois de vê-lo, você vai entender porque eu não consigo mais viver sem Subversion.

tutorial :: 61

64 :: usabilidade

Cesar Paz Guilhermo Reis Engenheiro com pós-graduação em marketing e comércio exterior. Diretor Presidente da AG2 - Agência Especialista em Arquitetura de Informação e Usabilidade. É autor do Kit de Conhecimento sobre AI de Inteligência Digital. Fundador e diretor da AGADi (Associação Gaúcha das Agências Digitais) e APADi (http://tinyurl.com/p4j6w). Atualmente, é responsável por coordenar projetos e manutenções nos (Associação Paulista das Agências Digitais). Colunista do jornal Propaganda e Marketing e do site Webinsider. websites do Banco Real. cesarpaz@ag2.com.br reis@guilhermo.com

“Making Life Easy!”

Pois então, eu não acho nada fácil fazer a vida fácil (sic). Mas essa é, em tese, a missão dos profissionais de usabilidade, e por isso a UPA (Usability Professionals’ Association), entidade internacional que promove e divulga os conceitos e técnicas de usabilidade, adotou o mote “Making Life Easy” para promover, em 2006, o dia 14 de Novembro, “Dia Mundial da Usabilidade”.

Como nem os “usabilidóides”, nem os psicanalistas e nem mesmo a Telesena seriam capazes de fazer a vida de qualquer ser humano realmente “fácil”, talvez a melhor e mais honesta escolha pudesse ter sido um mote do tipo “Making Life Easier” ou simplesmente “Making it Easy”.

Tudo bem, preciosismos à parte, louvemos ao senhor, ao 14 de Novembro e à UPA, que tem iniciativa e ousadia. A exemplo de vários outros países, o Brasil do Orkut (que, por sinal, apesar do sucesso, não é uma referência de boa usabilidade) não poderia ficar de fora dessa. O Brasil participou do Dia Mundial da Usabilidade, promovendo eventos no RS, PR, SP, DF e RJ. Antes de comemorarmos, vamos pensar um pouco sobre o tema aplicado à web: por definição, usabilidade é o grau de aplicabilidade e facilidade de uso das “coisas”. Essas “coisas” podem ser softwares, hardwares ou qualquer outra engenhoca como uma nave espacial ou uma caixa de fósforos.

Sei que é básico, mas destaco que a primeira lição que nós, profissionais da internet, precisamos modestamente entender é que usabilidade tem ampla aplicação e não se restringe a projetos web. Os conceitos de usabilidade e da sua prima mais velha, a ergonomia, foram concebidos muito antes do Mosaic.

Em contrapartida, é na web que a usabilidade ganha dimensão máxima. Sistemas web são, por definição, sistemas que podem ser acessados por qualquer pessoa conectada à internet, a qualquer hora e de qualquer lugar do mundo. Isso potencializou a necessidade de esses sistemas serem obrigatoriamente interativos, intuitivos e fáceis de usar. Essa interação homem-máquina só é possível por meio de interfaces gráficas que, muitas vezes, carecem apenas de um bom projeto.

Um bom projeto de interface é garantia de aumento de produtividade e satisfação do usuário.

E aí é que está o nó da questão: como fazer um bom projeto de interface? Primeiro e acima de tudo, precisamos formar especialistas nessa nova ciência. Esses especialistas são os “projetistas de interface”, profissionais sem formação acadêmica específica (por enquanto), críticos, heavy users e capazes, via intuição, estudos (normalmente autodidatas) e testes, de entender e perceber a lógica do usuário.

Ah, precisamos também proibir que “diretores de criação” sem experiência e intimidade com o ambiente web façam esse trabalho, em especial aqueles que estão viciados em produções lineares, como é o caso dos filmes para TV. Os caras são capazes de conceber maravilhas gráficas, muito caras e que simplesmente não funcionam...

Bom, voltemos ao nosso protagonista: o projetista de interface é responsável basicamente por três atributos de qualquer interface: formato e densidade informacional, localização desta informação na interface e o modo de interação com o usuário.

usabilidade :: 65

"Depois decriar mais dezosanos de internet a usabilidade “É preciso as de casas, prédios, as praçascomercial, e principalmente as placas já espaço e importância nos principais desenvolvedores deencontrou sinalização.” web do país" São atividades de um projetista de interface: • Entender e definir a lógica de navegação do ambiente; • Fomentar acesso dentro de uma visão de prioridade e hierarquia a conteúdos principais e conteúdos relacionados; • Orientar sempre a navegação do usuário; • Estabelecer zonas de apoio à sua interação; • Garantir interfaces intuitivas e orientadas ao usuário.

Isso pode não parecer, mas é uma arte complexa e refinada que, embora ainda não seja passível de ser aprendida nos bancos universitários, tem sido entendida rapidamente por empresas e profissionais que se dedicam a prover soluções no ambiente digital.

Entre milhares de wireframes e testes de usabilidade, existe pelo menos um grande motivo para os projetistas de interface do Brasil comemorarem o dia 14 de Novembro: depois de mais de dez anos de internet comercial, a usabilidade já encontrou espaço e importância nos principais desenvolvedores web do país. E não foi nada fácil!

Nesse Natal, seja um Papai Noel!

Colabore para que nosso Natal seja cheio de alegria, de sorrisos e de felicidade.

O projeto Magê-Malien está arrecadando alimentos, roupas e brinquedos para o Natal.

Para fazer sua doação, envie um e-mail para: arteccom@arteccom.com.br

Desejamos a todos um Feliz Natal!

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

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

Vale a pena ouvir a “velha guarda”?

Já ouviu falar na “síndrome do século XX”? Sofremos desta doença aparentemente incurável desde as primeiras décadas do século passado. São dois os sintomas: a intolerância implacável das novas tecnologias com as anteriores, e o pânico das antigas com a chegada de novidades.

Tanta intolerância traz a reboque, também, um preconceito: a idéia de que os profissionais de que atuam em “mídias ultrapassadas” devem ficar na poeira da História.

Como trabalho com web desde o seu início, sempre percebi o incômodo dos novos jornalistas com a Velha Guarda. O motivo é lamentável. Como a primeira mídia a exigir do profissional um conhecimento muito maior da tecnologia que a movimenta, a web criou um aparente abismo de gerações entre mais novos e mais experientes, entre uma geração que cresceu absorvendo tecnologia e outra que se desenvolveu profissionalmente passando ao largo da questão.

Sou de uma geração intermediária, e por isso observo os dois lados com tristeza. Assisti, em 2000, as redações serem invadidas pela “garotada” que dominava tecnologia - e que achava que isso era uma grande vantagem - mas pouco sabia de Jornalismo, assim como testemunhei a migração de vários profissionais experientes rumo aos novos “veículos on-line”.

O mercado foi cruel. De início, claro, os jovens se sobressaíram. Com a vantagem da tecnologia, eles tinham o perfil ideal para o novo momento. A Velha Guarda, sábia, procurou o que tinha a aprender com a “mídia emergente”. Havia de fato, algo novo, e era o surgimento do jornalismo on-line.

Mas os jovens jornalistas, detentores das chaves do reino - apesar de não terem preparo teórico ou prático para se dedicar ao assunto, com raríssimas exceções - assumiram o comando. A Velha Guarda não encontrou espaço. Decepcionada, retornou à “mídia tradicional”.

Não procure um culpado. Até porque, poucos anos depois, a experiência dos profissionais da antiga mostrou-se mais eficaz - e mais lucrativa. A Velha Guarda reingressou na mídia on-line; era apenas uma questão de tempo. Casou-se prática com tecnologia, e chegamos à web mais madura com quem convivemos e trabalhamos.

Desde meu estágio na Assessoria de Imprensa da Embrafilme, em meados dos anos 80, até hoje, aprendi a admirar os mais velhos. Na época da Embrafilme, o computador ainda chegava às empresas, e talvez por isso nunca tenha enxergado o domínio de tecnologia como diferencial - faz-se um curso, aprende-se, e retorna-se ao trabalho. Simples assim.

O “papa” da redação on-line, Crawford Kilian, é a prova de que a internet nunca foi nem será uma revolução, mas uma evolução. Longe de ser um “garotão” de 20 anos, Kilian é um bem vivido senhor de quase 70 anos. Autor de “Writing for the Web”, a bíblia no as-

webwriting :: 67

"Eu aplico criar o que VelhaosGuarda me os conceitos, “É preciso asacasas, prédios, asensinou: praças e estude principalmente as placas valorize a experiência, observe o novo e trabalhe" de sinalização.”

sunto, Crawford Kilian, para merecer o destaque que tem, levou para a mídia digital a bagagem de décadas de experiência em rádio e assessoria de imprensa. Ele mostrou o que sabia, observou o que havia de novo na Rede e virou referência. Nada mais natural.

Sigo os passos de Crawford Kilian, e muitos estranham que, nos treinamentos que ministro, raramente uso o computador. Como, um curso de webwriting sem internet? Eu aplico o que a Velha Guarda me ensinou: estude os conceitos, valorize a experiência, observe o novo e trabalhe.

Uma dica para os mais jovens: muitas das conquistas da área da Comunicação Social no Brasil foram alcançadas graças à intercessão entre “velho” e “novo”. Quem construiu esta ponte fomos nós, os profissionais, mais ninguém. Portanto, vale a pena olhar para frente de mãos dadas com quem veio antes. O resultado será melhor para todos, acredite - inclusive para os que estão por vir.

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

Inspire fundo Quando vejo uma aula de spinning, daquelas em que um esquadrão de bicicletas voa baixo sem sair do lugar sob o empuxo furioso de corpos empapados em suor ao som de música infernal, sempre lembro que, em alemão, “Spinnen Sie?” quer dizer “você está maluco???”.

Ok, não escondo: não é só com relação à Academia com “A” maiúsculo que tenho problemas... Quando o assunto é academia com “a” minúsculo e shorts idem tenho calafrios com C maiúsculo. Assumo.

Até hoje não entendi bem o que me pega de mau jeito em academias. A música de fundo? Coloco meus fones, ligo meu player e... fico desconfortável do mesmo jeito. Aquele monte de máquinas à la Inquisição Espanhola versão-digital-cromada? Os semi-deuses desfilando? Os espelhos, o branco polar nas paredes e chão, os televisores cada um em um canal igualmente chato?

Não é isso não. Já tirei os óculos (meu truque pra aplicar Gaussian Blur na realidade à minha frente) e continuei deplacé. Há que ser outra coisa. Tenho que descobrir e tratar de por meu coração em forma.

Hmmm... talvez seja essa a pista que faltava: o coração.

Não sei quanto a você, mas meu coração não é só músculo. Meu coração é maior que o peito, meu coração tem fome, meu coração transborda e gela e paralisa e todo dia me sai pela boca, meu coração é o centro em torno do qual gravita o melhor de mim. Não quero tratá-lo como um glúteo ou bíceps, não quero medi-lo como uma máquina, não quero ouvi-lo dizer apenas tuntum.

Em academias todos sorriem, mesmo sob tortura indisfarçada. Será que é disso que tenho medo, de perder contato com aquilo que me corre nas veias, com aquilo que me inspira, com aquilo que me apavora? Eu quero me tornar humano, demasiadamente humano, e não um impávido goleiro de pebolim. Oras bolas.

Well, o que isso tem a ver conosco? Simples: gente é gente. Usuários são gente. Usuários têm coração. E muitas vezes parece que esquecemos isso.

Façamos um exercício (argh!) rápido, então: - Gente tem medo

- Gente lembra

- Gente vira bicho

- Gente tem preguiça

- Gente esquece

- Gente joga pesado

- Gente tem pressa

- Gente sai do banheiro sem dar

- Gente cansa

- Gente tem vergonha

descarga

- Gente enjoa

- Gente tem nome e sobrenome

- Gente é aparecida

- Gente ri

- Gente tem interesses

- Gente quer privacidade

- Gente é infiel

- Gente é egoísta

- Gente é impaciente

- Gente é fanática

- Gente é generosa

- Gente é tudo diferente

- Gente tem muuuuuito mais

- Gente tem amigos

- Gente produz

o que fazer

- Gente muda

- Gente tem orgulho do que faz

- Gente fala

- Gente tem preconceito

A lista não pára mais, é só questão de fôlego. Pra alongar em outra direção: - Gente não é besta

- Gente não quer saber de problema

- Gente não compra gato por lebre

- Gente não acredita em papo

- Gente não quer vender a alma pro diabo

- Gente não confia

- Gente não quer se sentir presa

- Gente não tem lugar na vida delas para você

marketing :: 69

"Gente é gente. Usuários são gente. Usuários têm coração. E muitas vezes parece que esquecemos isso"

Se você leva em conta desde o início que a bicicleta da internet só anda porque tem gente pedalando, corre muito menos risco de criar projetos absolutamente lindos... mas que não apaixonam ninguém. E, o que é pior, vai ficar transtornado por ver um concorrente feiinho e desconjuntado fazendo um sucesso inexplicável com milhões de pessoas.

“Mas ele é tão feio! Ele não tem fôlego algum, tropeça a cada dois passos... Como pode?”

Pois é: mesmo no mundo do silicone e botox e lipo-aspiração, o segredo não é ser lindo, o segredo é ser gostoso. E “gostoso” é algo indefinível, algo que fita métrica não mede, nem balanças, nem aquela pinça horrorosa pra medir gordura no corpo. Gostoso vai além do layout ou de funcionalidades. Gostoso tem a ver com jeito. Ok, jeito também é indefinível.

Se o segredo é algo nebuloso e que envolve um mix de fatores, o que fazer? Acender uma vela e rezar pra acertar no chute?

Minha dica: o segredo é que pessoas também são múltiplas, inconstantes, pessoas não se enquadram num rótulo único.

Exemplifiquemos, então. Teu público é, digamos... gente de tecnologia? Pois bem, gente de tecnologia também se diverte, também tem amigos, também gosta de música, também tem signo, também tem vaidade, também fotografam. Idem para financistas. Ibidem para publicitários. Se você fizer o teu produto considerando só um lado dessas pessoas, se você rotulá-las, vai ter uma adesão sofrível.

Pense nos produtos que você mais curte. Veja-os com outros olhos: eles certamente te dão liberdade de escolher o que ver, quando ver e como ver. Eles te dão liberdade de construir tua própria rede de relacionamentos. Eles te dão liberdade de descobrir pessoas novas com gosto parecido com o teu. Eles permitem que você tenha nome, sobrenome e voz. A vida fica mais gostosa com eles.

Não é assim?

Pense sempre nas coisas que inspiram. Inspiração não é só coisa de ginástica: sem inspiração eu expiro.

E uma dica genial e gratuita: faça mapas conceituais usando essa ferramenta bárbara e muito gostosa: http://cmap.ihmc.us/

70 :: arquitetura da informação

Guilhermo Reis Especialista em Arquitetura de Informação e Usabilidade, com vasta experiência na área. Coordenou projetos de Internet, Intranet e CRM em empresas líderes em seus respectivos segmentos, como Unilever e Sensormatic. Hoje é responsável por coordenar projetos e manutenções nos websites do Banco Real. reis@guilhermo.com

Vamos pesquisar Começou um novo projeto, e com ele o desafio de criar um novo site para encantar novos e ainda desconhecidos usuários. E como sempre surgem as mesmas perguntas que iniciam todo projeto: Quem são esses usuários? O que eles precisam? Como eles se comportam? Elaborar a arquitetura de informação de um site é criar a sua estrutura de forma que satisfaça as necessidades dos seus usuários. Se não conhecemos os usuários e suas necessidades, como iremos satisfazê-los?

Um projeto de arquitetura de informação começa, ou deveria começar, como uma boa fase de pesquisa, onde se estuda a relação entre o usuário, que possui um conjunto de necessidades, e a empresa (ou qualquer outra entidade que patrocina a construção do site), que se propõe a atendêla. É nessa fase onde se conhece de um lado o usuário, suas necessidades, seu comportamento e sua linguagem, e de outro lado a empresa, seus objetivos, suas restrições, suas capacidades e o que espera lucrar.

Sites com uma boa arquitetura de informação são aqueles que nasceram do conhecimento profundo do usuário, da empresa e da relação entre eles. É isso que pregam todas as disciplinas relacionadas com o design de sites. Seja Marketing, com o seu planejamento estratégico, seja a Usabilidade e o seu Design Centrado no Usuário, seja o Projeto Gráfico e Redação com suas pesquisas de linguagens e referências, seja a Engenharia de Software e com a sua especificação de requisitos. Todas elas, de alguma, forma recomendam uma fase de pesquisa onde designers, sejam eles arquitetos de informação, redatores, programadores ou diretores de arte, saem do seu mundo e entram no mundo do usuário para compreender como eles vivem e pensam para construir um site útil e eficaz.

Infelizmente a prática está distante da teoria. O lugar comum dos projetos de arquitetura de informação é ter uma fase de pesquisa curta, na qual a empresa fornece um briefing raso, que mal dá para saber o objetivo do site. É passada pouca informação sobre a empresa, sobre o público-alvo do site e sobre o que ela espera lucrar com o projeto. Mesmo depois da bolha da internet, ainda é comum o cliente simplesmente contratar o projeto para criar um site sem saber para que precisa dele.

Também são comuns os projetos nos quais é o profissional de atendimento que obtém o briefing do cliente e o repassa para os designers. Eles têm apenas que projetar, não entram em contato direto com o cliente. Todo esse contato é feito pelo ponto focal do atendimento. Por melhor que seja esse profissional, ele é mais um filtro entre os designers e o usuário.

Mas o maior de todos os pecados é não fazer uma pesquisa direta com os usuários, não perguntar diretamente para eles o que eles querem, o que eles precisam e como pretendem utilizá-los. São raros os casos em que são feitos focus group, entrevistas ou qualquer outra forma de contato direto com o usuário. Prefere-se lançar o site e depois consertar a fazer certo da primeira vez. E com isso gastamos mais com correções e manutenções do que conhecendo nosso usuário.

Os relatórios internos da empresa (métricas de acesso e page view, sugestões e reclamações, log de mecanismo de busca) ajudam a compreender o usuário, mas não são suficientes.

Primeiramente esses relatórios têm a visão da empresa, que normalmente está mais preocupada em resolver seus problemas operacionais a atender bem seus usuários. Segundo, eles retratam apenas o comportamento dos usuários que acessaram o site e se prontificaram a dar um feedback.

arquitetura da informação :: 71

"Prefere-se lançar o site e depois consertar a fazer certo da primeira vez. E com isso gastamos mais com correções e manutenções do que conhecendo nosso usuário"

Os usuários que nunca acessaram ou que não acessam a longa data não aparecem nesses relatórios e por isso não se sabe o que precisam, como se comportam e, principalmente, porque deixaram de usar o site.

Em um país pobre como o nosso, com projetos de prazos e orçamentos cada vez mais apertados, falar para se gastar dinheiro com pesquisa pode soar como absurdo. Uma boa fase de pesquisa representa cerca de 10% dos custos do projeto, sem contar o atraso para “começar” o trabalho. Soma-se a isso a falta de conscientização dos clientes com relação à importância dessa fase e, em vários casos, a falta de conhecimento dos designers sobre metodologias de pesquisas com usuário. Assim, temos uma fase de pesquisa esquecida e um design centrado em tudo, menos no usuário.

M a s q u a n t a s v e z e s t i v e m o s d e re f a z e r u m s i t e p o rq u e t i n h a u m a i n t e r f a c e r u i m e o u s u á r i o n ã o a compreendia? Quantas vezes tivemos de fazer reformulações no projeto gráfico do site para torná-lo mais atraente? Quantas campanhas de relançamento já fizemos para atrair os mesmos usuários? Todos esses gastos espalhados pela existência do site são fruto de uma arquitetura de informação que foi elaborada sem conhecer bem os seus usuários.

Realizar uma pesquisa de campo com usuários é mais simples do que parece. Já temos no Brasil várias empresas que oferecem esse serviço com custos bem razoáveis. Elas trazem boas metodologias e muita credibilidade para a fase de pesquisa no seu projeto, o que será muito útil quando for defender suas soluções perante o cliente.

Mas se ainda assim o custo for proibitivo, se o cliente não pode ou não vê razão para arcar com ele, faça você mesmo a pesquisa com os usuários. Estude, monte um questionário e entreviste os usuários. Tome o cuidado de ser imparcial e vá a campo. Se possível leve o seu cliente, faça-o participar como observador. Com certeza vai faltar a metodologia e a credibilidade que uma empresa especializada em pesquisa traz, mas vocês terão a oportunidade de se sensibilizarem com os problemas do seu usuário, com as suas dificuldades e angústias. E até vão reconhecer a importância de fazer pesquisas com usuário.

Assim, vamos valorizar a fase de pesquisa. Vamos conhecer nossos usuários, suas necessidades, seu comportamento e sua linguagem. O que eles querem, o que eles precisam. Vamos sair da frente dos nossos computadores e ir a campo conhecê-lo e se comover com os seus problemas, com a sua vida. Só assim vamos realmente conseguir fazer sites bons e fáceis de usar. * Excepcionalmente, a bula da Catunda não foi publicada neste mês. Mas ela volta em janeiro!

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

Megatendências, estilos e modas Vivemos uma época de sobrecarga de inovação (atenção, eu disse INOVAÇÃO, não INFORMAÇÃO). As pessoas estão sobrecarregadas do novo, o tempo todo. Aquilo que antigamente surgia como experiência inusitada hoje não é nada mais que o simplesmente obrigatório. Não importa se algo é bom; se não é novo, não presta. Com isso, é natural que as pessoas vivam de empilhar experiências, colecionar novidades e permanecer em constante pânico, em busca de uma curva de aprendizado que nunca termina. Pelo contrário, só tende a aumentar.

Desenvolvendo um pouco mais alguns dos argumentos que expus no mês passado, as pessoas, cada vez mais perdidas, sem tempo nem espaço para saborear suas “novas” experiências, procuram a ajuda de “curadores” de estilo. Estes, como os curadores de exposições de arte e museus, se encarregam de definir o que é “bom”, “belo” ou “verdadeiro” dentro de uma variedade cada vez maior de opções. Onde eles estão? Por aí, pela web: seja em blogs, comunidades ou websites pessoais, eles infelizmente também existem aos milhares e, para escolhê-los, é também necessário um belo trabalho de escolha. Isso, é claro, se você não lançar mão de um “curador de curadores” ou qualquer outra esquisitice do gênero. Irônico, não?

Sem enveredar para um papo nostálgico ou qualquer outra baboseira da moda que, em tempos pós-modernos, nada mais é que mais uma “tendência de mercado”, é importante registrar que as pessoas hoje em dia sentem falta de um pouco mais de tempo para se saborear as decisões tomadas (ou lamentá-las, caso sejam erradas). Sem esse tempo de digestão, troca-se a experiência pela velocidade em um processo que, a médio e longo prazo, tende a substituir a tão valiosa experiência de vida por um acúmulo vazio de referências desconectadas, sólidas feito um blog de adolescente.

Uma das mais populares hoje em dia é a tal da convergência das mídias, que reuniria todas as formas de comunicação conhecidas em uma geléia geral única, completa e interativa, abrindo novas fronteiras para o design e a comunicação. Essa coisa esquisita e disforme interligaria a mídia impressa com TV, rádio, web, celulares etc etc etc. Conceitualmente isso até faz algum sentido, mas na prática fica um pouco difícil entender o que esse treco pode significar.

O exemplo que mais se usa dessa convergência é uma tal de TV interativa, em que o espectador poderia, se gostasse de uma roupa usada por algum ator em uma cena de novela, “clicar” nela com o controle remoto e comprá-la. A princípio a idéia até parece engenhosa, mas é só tentar aplicá-la para ver que algumas coisas ficariam bastante complicadas. Imagine que você está vendo uma cena de novela com alguém e esse alguém se interessa por uma sandália usada por uma atriz. Será que vai perder um pedaço da cena procurando o controle remoto e ativando o cursor, depois correr freneticamente atrás dos pés da atriz para poder clicar neles? E pior: interromper o programa do resto de quem esteja assistindo só para saber o preço, modelos e

webdesign :: 73

"O design de superfícies digitais ou interfaces tem muito mais a ver com hipertexto, virtualidade e adimensionalidade que com qualquer efeito do Photoshop ou Actionscript do Flash"

cores e decidir a compra? Não me parece que um sistema assim seja exatamente uma fórmula de sucesso, muito pelo contrário. Ou você gostaria de ser interrompido no meio de uma história que estiver contando por alguém que diga: “mas que bela camisa! Onde você a comprou? Quanto custou? Será que tem o meu número?”. Às vezes a interatividade é assustadora...

A revista Wired disse uma vez que a maioria das nossas previsões sobre o futuro dá errado, porque nos baseamos em um pensamento muito linear. Vemos as coisas como elas são hoje em dia e as projetamos para o futuro, achando que vai ser tudo igual. Pois é, na década de 60 ninguém previu a internet, em 1997 ninguém imaginou o Napster e mesmo hoje em dia muita gente confunde textualidade digital com o ato de ler textos na tela de um computador. Ou celular com telefone. Como fica, então, você que hoje entende bem a web e sabe tudo de design de interfaces? O que você precisaria aprender para não perder o emprego em março próximo?

Pra começar, é fundamental separar o conteúdo de seu suporte. Da mesma forma que um jornal tem muito mais a ver com informação que com um monte de papel sujo entregue na sua casa todas as manhãs, o design de superfícies digitais ou interfaces tem muito mais a ver com hipertexto, virtualidade e adimensionalidade que com qualquer efeito do Photoshop ou Actionscript do Flash. Tecnologia sem uma boa idéia por trás não vale nada e não leva a lugar algum. Para se ter boas idéias em um ambiente digital é fundamental se concentrar no conceito que se quer transmitir e trabalhá-lo muito bem. Depois disso é só escolher as ferramentas disponíveis - de mashups a todas as esquisitices da Web 2.0 - e aplicá-las da forma mais adequada. Simples, não?

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

Promoção assine um plano de hospedagem efetue o pagamento anual e ganhe um pendrive ou uma webcam. Confira o regulamento em nosso site. www.siweb.com.br tel: (11) 4063.8047 info@siweb.com.br

Você quer Hospedagem Profissional? Servidores estáveis e que não saem do ar? Então venha conhecer a DataHosting, suporte diferenciado e qualificado, planos especiais de revenda, plataforma windows e linux. www.datahosting.com.br tel: (11) 6951.2954 - (11) 6939.7305 atendimento@datahosting.com.br

A Brasil Hosting assume a missão de “prestar os melhores serviços, oferecer preços justos e respeitar o consumidor”. Assine agora mesmo um dos nossos planos e sinta a diferença de um hosting com ética. www.brasilhosting.com tel: (48) 4052.9591 atendimento@brasilhosting.com

Oferece hospedagem profissional linux e windows com recursos grátis como loja virtual, blog, enquete, boleto.

Possui planos de revenda ideais para webdesigners.

Suporte qualificado 24 horas e registro de domínios. www.portal123.com/ tel: Minas Gerais (31) 3761.2253 São Paulo (11) 4052.9253 suporte@portal123.com.br

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 e Registro de Domínios.

Domínios .com.br a partir de R$24,99. www.hostpp.info tel: SP (18) 9111.5068 contato@hostpp.info

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 Profissional PHP a partir de R$ 4,90 Servidores 64 bits Dual Core - Revenda de Hospedagem.

Sua melhor opção, Confira! www.infotecnico.com.br tel: (48) 3235.2761 contato@infotecnico.com.br

R$ 50 anuais por 1GB de espaço em disco, 20GB de transferência mensal, PHP, MySQL, Webmail e subdomínios ilimitados. Email com Antispam, 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 na plataforma Windows Plano com 1GB por apenas R$ 14,90 ASP, PHP e ASP.NET 1.1 / 2.0 com AJAX MSSQL 2000 grátis - 5GB transferência www.alugosite.com.br tel: (11) 4656.1776 suporte@alugosite.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

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

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 Tutoriais para Provedores de Hospedagem. Painéis de Controle cPanel, Plesk, WHM, etc. Curso de Joomla/Mambo multimídia. Vídeo-aulas sob-encomenda para apresentações, demonstração de produtos ou questionários (QUIZ). www.abcmixflashtutorials.com tel:(61) 8464.4383 tutoriais@abcmix.com

Ensino a Distância desde 1988. www.ciabyte.com.br/design tel: (11) 4717.1000 contato@ciabyte.com.br

A Bluestar Technology oferece toda a linha de treinamentos oficiais Borland, CA e Conectiva Mandriva.

Temos ainda treinamentos profissionalizantes em Programação Web, com Java, Delphi e PHP. Invista em você, na sua carreira e no seu futuro. www.bluestar.inf.br tel: (61) 3347.9255 atendimentodf@bluestar.inf.br

Pacotão completo 15 cursos com: Digitação, Windows XP, Internet, Office 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 profissionalizantes. 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 profissionais preparados diretamente para o mercado de Web. Crie dinamismo, organize e manipule dados na Web, processando informações em Background .

Cursos de Flash Action Script, Ajax e Tableless, ASP.NET c/ C#.NET www.tecnoponta.com.br tel: 3222.9492 treinamento@tecnoponta.com.br

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

Com enfoque em Produção Gráfica Curso direcionado para: Diretores de arte, arte-finalistas, designers, estudantes. Carga Horária: 24 horas Data e Horário: 11 a 16 de dezembro de 2006 das 18:00 às 22:00h. Material didático Incluso + CD + Certificado de Conclusão + Coffe-Break. Local: SOS Computadores Macaé www.significadesign.com.br tel: (22) 2765.0920

Multiplique conhecimento!

Nossos Treinamentos: OpenOffice, Banco de Dados, Gestão e Qualidade, Programação Java, Análise de Sistemas, PHP e MySQL PHP com Ajax, Gnu/ LINUX LPI tel: (61) 3244.2510 atendimento@x25.com.br SGAS 910 Ed. Mix Park Sul sl 239 – Brasília/DF

Para anunciar nesta seção, envie um e-mail para publicidade@arteccom.com.br, com o título "busca cursos" ou ligue para (21) 2253.0596