Ed77 by Luis Rocha

EDITORIAL

O valor da interface “As homepages são o patrimônio mais valioso do mundo. São investidos milhões de dólares em um espaço com menos de um metro quadrado.” Sábias e proféticas palavras publicadas logo na introdução do livro “Homepage: Usabilidade”, escrito pelos especialistas Jakob Nielsen e Marie Tahir. Quase dez anos após a sua publicação, a obra se tornou um clássico do segmento web. Guardadas as devidas proporções financeiras, eles estavam no caminho certo ao fazer tal afirmação. Só para se ter uma ideia, a verba alocada na criação e no desenvolvimento do Portal Brasil, que durou cerca de um ano para ficar pronto, foi de 11 milhões de reais (http://tinyurl.com/77-editorial-1). Por falar neste projeto, ele é um dos 12 cases analisados na matéria “Desconstruindo interfaces” (páginas 32 a 45). Nossa fonte de inspiração acabou surgindo através de algumas consultas feitas justamente à obra de Nielsen e Tahir. Assim, decidimos criar uma versão adaptada ao mundo do design de interfaces. Por falar em livros, biblioteca é um termo que vem logo à cabeça. E também, porque não, remete a edição deste mês! Isso porque preparamos uma reportagem apontando as vantagens no uso de bibliotecas de padrões de interfaces (páginas 52 a 57). Com isso, nossa esperança é que o conteúdo desta edição enriqueça ainda mais o seu cotidiano de produção e estimule a formação de um discurso crítico na área. Boa leitura! Grande abraço, Luis Rocha luis.rocha@arteccom.com.br

77 Direção Geral Adriana Melo Direção de Redação Luis Rocha Direção de Criação Camila Oliveira Projeto Gráfico Tabaruba Design Publicidade Luanna Chacon Thiago Nabuco Atendimento Rebeca Emerick Tecnologia Neilton Silva Rafael Zuma Financeiro Eduardo Costa Eventos Cristiane Dalmati

Revista Webdesign www.revistawebdesign.com.br Revista TIdigital www.revistatidigital.com.br Encontro de Design e Tecnologia Digital www.edted.com.br Fórum Internacional de Design e Tecnologia Digital www.foruminternacional.com.br Concurso Peixe Grande www.peixegrande.com.br Curso Web para Designers www.webparadesigners.com.br

Fale conosco Atendimento: atendimento@arteccom.com.br Redação: redacao@revistawebdesign.com.br Publicidade: publicidade@arteccom.com.br

ONLINE

Conteúdo sobre design O mês de maio também estará recheado de bom conteúdo no www.revistawebdesign.com.br . Acesse e confira mais um projeto exclusivo desconstruído, bate-papo com Felipe Memória sobre parâmetros de qualidade de interfaces e dicas de leitura sobre bibliotecas de padrões.

Curso Design de Interfaces www.designdeinterfaces.com.br

Produção gráfica www.ediouro.com.br Distribuição www.chinaglia.com.br

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

E-mail etc.

E-mails, Twitter, Direito na web

Fique por dentro

Notícias, Blog do mês, Métricas, Internacional, Agenda, Livros PORTFÓLIOS

Portfólio Agência

fullDesign

Portfólio Freelancer ENTREVISTA

Rafael Curi

Sob o impacto da geração Y

Portfólio Ilustrador

O consultor Sidnei Oliveira apresenta as principais características e influências nas estratégias de comunicação

Raphael Sonsino

Portfólio Lente Digital

Freddy Thorvaldsen

Portfólio Fontes de Inspiração

Pedro Moura CAPA

Desconstruindo interfaces

Inspirados no livro “Homepage: Usabilidade”, de Jakob Nielsen e Marie Tahir, preparamos um especial adaptado ao universo do design de interfaces, através da análise conceitual de 12 projetos lançados recentemente OPINIÃO

Ágil sem perder a qualidade

Na correria de prazos curtos e a necessidade de atender a todas as demandas, como garantir um fluxo ágil de produção sem perder a qualidade da execução criativa? REPORTAGEM

Biblioteca de padrões de interfaces

Conheça algumas das principais vantagens de sua aplicação no processo de produção de interfaces digitais e interativas ESTUDO DE CASO

O acervo lúdico de Niemeyer

Diretores do estúdio carioca Caos! Vídeo&Design destacam as principais etapas na criação da nova versão do site deste renomado arquiteto

Tecnologia em foco CONCEITUAL

Design de interfaces para CMS’s TUTORIAL

Papervision 3D no Flash - Parte 3/3

COLUNAS

Ilustração

Carolina Vigna-Marú

Marketing

René de Paula Jr.

Internacional

Julius Wiedemann

Webdesign

Luli Radfahrer Os links citados nesta edição estão reunidos na página principal do site da revista. Acesse www.revistawebdesign.com.br.

E-M A I L S

E-mail etc.

Ficou muito bom o Catálogo Portfólio 2010. Parabéns pela iniciativa, ousadia e coragem. É bacana ver como tem agências digitais crescendo e produzindo coisas boas. Vocês fazem parte dessa história. [CESAR PAZ CESARPAZ@AG2.COM.BR]

Cesar, muito obrigado! Ficamos felizes pelo reconhecimento do trabalho. Para o ano que vem, a ideia é melhorar ainda mais a qualidade do catálogo e divulgar mais agências espalhadas pelo Brasil. Quem tiver boas indicações, mande um e-mail para redacao@ revistawebdesign.com.br.

interfaces/projetos enviados pelos próprios leitores. Estamos maturando melhor esta ideia para, em breve, lançá-la. Aguardem as novidades! Sou leitor da revista desde 2006. Acho a leitura excelente, vocês estão de parabéns! Mas gostaria de saber se alguma edição anterior da revista fala sobre premiações da web. Andei pesquisando e não achei nenhuma outra premiação significante nesse meio, a não ser o Peixe Grande. Não seria uma boa sugestão de pauta? Abraços! [FERNANDO PIRES -

Sara, a previsão da comissão organizadora é que as inscrições sejam abertas a partir do mês de julho. Vamos fazer a divulgação da edição 2010 através do Twitter (@arteccom), informativo e site da Revista Webdesign. Fique de olho nesses canais ;-)

Os e-mails são apresentados resumidamente.

CONTATO@FERNANDODESIGNER.COM]

Fiquei bem feliz e entusiasmado com a nova cara da revista. Realmente, melhorou muito e a leitura ficou mais solta e leve. Agora, estou curioso para saber como vai ser essa seção “Análise de Interfaces”... [DANIEL DE PAOLA DPAOLA@GMAIL.COM]

Olá, Daniel. Só temos a agradecer a colaboração e as palavras de incentivos que recebemos nos últimos dias. Temos ainda alguns ajustes a fazer, mas o intuito é evoluir sempre, obrigado! Sobre a nova seção, um especialista vai fazer uma espécie de consultoria sobre os princípios do design aplicados na construção de

Participe! fale conosco pelo site www.revistawebdesign.com.br envie sua dúvida de Direito na Web para redacao@revistawebdesign.com.br

Oi, Fernando. Agradecemos a confiança em nosso trabalho ao longo do tempo. Realmente, não existem muitas premiações sobre web no Brasil. Além do Peixe Grande, tínhamos antes o Prêmio iBest e a do Fórum de Internet Corporativa. Nesse ano, surgiu uma nova, realizada pelo pessoal da Converge: www. premioconverge.com.br. Lá fora, uma das mais conhecidas é o www.webbyawards.com. Já as indicações do site FWA também são bastante cobiçadas: www.thefwa.com. De repente, o assunto pode virar uma boa pauta. Obrigado pela dica!. Quero saber quando será aberto o período de inscrições para o concurso Peixe Grande 2010. [SARA DANTAS - CONTATO@ SARADANTAS.COM.BR]

T W I T T E R [@arteccom, #revistawebdesign] @ asdruboows @gazozzo Parabéns pela entrevista sobre semiótica na #revistawebdesign! Leitura enriquecedora! Abraço.

@ niltonheck

@ asaferamos

@brunorodrigues

Sou obrigado a dizer que se o pessoal da @arteccom visava inspirar ainda mais os leitores da Webdesign, então, conseguiu. Meus parabéns.

Genteee... A edição de abril da Revista Webdesign acabou de chegar aqui em casa! Tá muito show de bola: Mídias sociais, HTML5, semiótica...

Para ler, guardar e enviar CVs: ed. especial “Webdesign”, “Catálogo Portfólio 2010”, com as melhores agências interativas do país. Imperdível.

Sugestões dadas através dos e-mails enviados à revista passam a ser de propriedade da Arteccom.

| webdesign | 77 > 05/10

D I R E I TO N A W E B

PROTEÇÃO PRÉVIA DE PROPRIEDADE INTELECTUAL DE WEBSITES Estou começando a juntar informações legais sobre a montagem de um site, vendo se é legalmente viável o serviço. Minhas dúvidas são: tem algum jeito de proteger os direitos de um projeto de site antes de encaminhar o mesmo para execução, ou seja, proteger o projeto para depois levar a proposta para a empresa parceira? Se depois de desenvolvido, proteger os direitos autorais? Ou também, depois de registrado, posso vender estes direitos para que o site funcione? RICARDO ROMANI

- simricardo@yahoo.com.br

O seguro morreu de velho, já dizia um ditado. Prudência e caldo de galinha não fazem mal a ninguém, diz outro ditado. Fato é que a prevenção, segundo se diz, é melhor que o remédio. Portanto, nada como proteger previamente a propriedade intelectual de um website antes que surjam dúvidas, discussões e disputas. Mas como proteger? Em primeiro lugar, é preciso analisar se na concepção do projeto há elementos registráveis como propriedade intelectual. Por quê? Porque segundo a lei de direito do autor (Lei 9.610, art. 7º, X) são protegíveis “os projetos, esboços e obras plásticas concernentes à geografia, engenharia, topografia, arquitetura,

Gilberto Martins de Almeida é advogado formado na PUC/RJ, com Mestrado na USP e cursos em Harvard e no M.I.T. Ex-Gerente Jurídico da IBM, onde trabalhou por 11 anos, no Brasil e nos EUA. Sócio de Martins de Almeida – Advogados, escritório especializado.

paisagismo, cenografia e ciência”, e como sabemos, ciência da computação também é ciência. Onde registrar? Na Biblioteca Nacional. Mas e se por alguma razão se considerar que não há elementos suficientes para tal registro? Então que se procure registrar as ideias, planos, desenhos iniciais etc., em cartório de Títulos e Documentos. Porém, para quê? Para se obter uma datação oficial de que, em determinado momento, alguém já possuía tal ideia, concepção, ou desenvolvimento preliminar, e assim, se surgir futuramente outro alguém se dizendo o pai da criança, terá que provar o contrário, ou seja, de que a anterioridade pertence a ele, já que o registro em cartório tem fé pública, e o outro alguém terá que derrubar a presunção legal gerada por ela, o que não é fácil. Há ainda alguma outra coisa que possa ser protegida previamente? Sim. Por exemplo, as bases de dados (protegidas conforme previsto na lei acima citada, art. 7º, XII: “as coletâneas ou compilações, antologias, enciclopédias, dicionários, bases de dados e outras obras, que, por sua seleção, organização ou disposição de seu conteúdo constituam uma criação intelectual”) e o nome ou título que seja dado ao website ou ao software desenvolvido para ele (nome e título esses, protegidos segundo o mesmo dispositivo legal acima, no inciso VI: “os nomes e títulos isolados”). Pode-se ainda registrar a parte gráfica, se já houver sido elaborada, na Escola de Belas Artes. Como se vê, há meios de se construir um verdadeiro “arsenal” prévio, de proteção, com blindagem múltipla, contra a possibilidade de futura concorrência desleal, apropriação indevida, e outros incidentes. E quando vier a hora de apresentar essa proteção no início das conversas com o parceiro? Nessa ocasião, vale citar que a busca de proteção prévia foi para registrar um fato, qual seja, o de quem teve a ideia, a desenhou etc. E que o registro desse fato não significa que não possa haver subsequentemente uma negociação sobre os direitos comerciais (ditos, “patrimoniais”) de exploração da obra. Simplesmente, se assegurou os direitos de paternidade, porém mantendo abertura para, se desejado e conveniente, negociar licença (autorização de uso) ou cessão (“vender”, passando adiante). Quem sabe faz a hora, não espera acontecer. No calor das discussões, e em momentos posteriores, a memória das pessoas fica mais comprometida, tornando menos prático e seguro discutir quem foi o autor original. O melhor mesmo é tirar um retrato oficial, desde o início, com toda a inteligência e estratégia cabíveis. 77 > 05/10 | webdesign |

N OT Í C I A S quem tenho trocado bastante informação), mas também discutir e conversar sobre aspectos e temas interessantes do design”. Uma das últimas novidades do guia é a criação de um canal no YouTube: www. youtube.com/guiasobredesign. Vale a visita.

Fique por dentro

Desempenho de sites Combate à dengue no Orkut Nada melhor do que investir em estratégias digitais para chamar a atenção das pessoas sobre assuntos importantes na vida real. Pensando nisso, a Secretaria de Estado de Saúde de Minas Gerais decidiu investir nas redes sociais e contratou a agência Lápis Raro para desenvolver um game via Orkut, chamado Dengue Ville (http://dengue.nu/orkut ). O projeto foi inspirado nos famosos jogos Farmville (Facebook) e Colheita Feliz (Orkut). A ideia é estimular, de forma lúdica e interativa, os usuários a tomarem consciência sobre as ações que ajudam a combater os focos de proliferação do mosquito Aedes aegipty. “Uma pesquisa da Fiocruz mostrou que mais de 90% das pessoas sabem como evitar o mosquito, mas uma porcentagem muito pequena tinha o hábito de colocar essas medidas em prática. O que se conclui é que as campanhas educativas não têm funcionado”, explica o secretário estadual de saúde Antônio Jorge de Souza Marques. Portanto, vamos colocar tais medidas em prática, pessoal!

Guia sobre design Boas notícias para quem procura por materiais on-line de referência na área do design. Foi lançada recentemente a nova versão do Guia sobre Design (www.guiasobredesign. com.br), que mantém o

formato e a estrutura do guia original, disponível no Projeto Sobresites (www.sobresites. com/design). Segundo Eduardo Vieira, criador e responsável pelo espaço, a pretensão é ajudar “não só a estudantes e iniciados (que tem sido um dos públicos que mais tem me fornecido retorno e com

Você sabia que sites que levam mais de cinco segundos para carregar reduzem em 7% a finalização dos pedidos e em 16% a satisfação do cliente com a experiência da compra? Os dados são de pesquisa da empresa de consultoria Aberdeen Group. Diante desse cenário, na busca por ferramentas para medir o desempenho de projetos digitais, a boa notícia é que a Compuware lançou uma solução gratuita chamada “Gomez Custom Benchmark Tool” (www.gomez.com/my-benchmark), que “oferece relatório personalizado de referência que classifica desempenho e disponibilidade dos sites de até quatro concorrentes diferentes.”

MÉTRICAS

17%

Percentual entre os 500 entrevistados, gestores de empresas de todos os segmentos, em São Paulo, que revelaram que suas empresas possuem

31,7 milhões

participação em REDES SOCIAIS. Deste total, a maioria apontou Orkut, Twitter e Facebook como os mais populares. As instituições financeiras são as empresas que mais participam, contando com a adesão de 26% das companhias. Fonte: Associação Comercial de São Paulo (www.acsp.com.br)

subcategoria COMUNIDADES, que inclui sites de redes sociais, blogs, batepapos, fóruns e outros sites de relacionamento. Em fevereiro, o tempo médio por pessoa, nesta subcategoria, atingiu 4 horas e 28 minutos. Fonte: IBOPE Nielsen Online (www.ibope.com.br)

| webdesign | 77 > 05/10

Quantidade de usuário brasileiros que acessaram ambientes ligados à

B LO G D O M Ê S

I N T E R N AC I O N A L

Lado Design

A dica deste mês foi enviada pelo leitor Gabriel Freitas (www. twitter.com/gabriel_freitas). Estamos falando do blog Lado Design (www.ladodesign.com.br), criado recentemente pelo estudante de publicidade Diogo Rodrigues. Segundo a apresentação oficial, o objetivo é publicar “trabalhos relacionados a tudo aquilo que um webdesigner precisa saber:

cores, Gestalt, tipografia, ilustrações, tendências, a semântica do [X]HTML e CSS, efeitos produzidos pelo Flash e Javascript, marketing para web, mídias digitais etc.”. Um dos tópicos interessantes deste blog é a seção Tutorial, que traz dicas curtas e específicas sobre Actionscript, Flash e XML. Além disso, a seção Inspiração também é uma boa pedida sobre referências criativas do universo digital.

Conhece algum blog interessante focado em criação, design, internet e tecnologia? Envie sua dica para redacao@revistawebdesign.com.br

EUA Enviado por Berg Brandt www.bergbrandt.com Muita gente conhece a rede profissional LinkedIn (www. linkedin.com). Por aqui, ela é uma ferramenta que realmente funciona conectando empresas e profissionais. Um perfil completo e atualizado pode garantir boas ofertas de trabalho. Um dos fatores essenciais é a participação em grupos ligados à área de atuação. Pensando nisso, criei o grupo Front-End Engineers (http://bit.ly/linkedinfee), voltado para desenvolvedores web. O grupo conta com a participação de profissionais e caça-talentos de vários países.

Educação TREVISO Enviado por Arnaldo Boico www.numanuma.cc Tive o prazer de participar de um workshop da Fabrica (Laboratório Multimídia da Benetton), graças ao convite do amigo André Amaral (http:// andreamaral.com). Pessoas dos mais diversos países trabalhando juntas em um projeto social para a UNESCO (http://migre.me/v5ho). Entre

discussões, esboços, risadas e mímicas, aprendi muito sobre processo criativo e execução de ideias, e observei muito de perto uma parte do sistema de ensino europeu. Incrível pensar que lugares, como Ars Eletronica (Áustria) ou Hyper Island (Suécia), têm uma mecânica onde aulas não existem. Existe sim uma série de workshops e trabalhos experimentais, onde você direciona naturalmente o foco do seu trabalho, sem uma suposta imposição de estilo ou técnica.

Portfólio FWA LONDRES Enviado por Danilo Figueiredo www.grifo.tv Recentemente, terminei dois projetos significativos e premiados no The FWA. O primeiro foi o site da agência de publicidade DOJO (www.dojosf.com), localizada em São Francisco. Fiz o desenvolvimento Flash a pedido da Magenta.la, de Adhemas Batista. O segundo trabalho foi o site corporativo Costa Navarino (www.costanavarino.com), um excelente destino de férias no Mediterrâneo. Desenvolvido na Less Rain London, fui responsável por todas as animações.

67,5 milhões 192milhões

Total de pessoas com ACESSO À INTERNET no Brasil, em qualquer ambiente (residências, trabalho, escolas, lan-houses, bibliotecas e telecentros), considerando os brasileiros de 16 anos ou mais de idade, no quarto trimestre de 2009. Fonte: IBOPE Nielsen Online (www.ibope.com.br)

Total de nomes de domínios registrados no ano de 2009. Somente no último trimestre do ano passado, foram contabilizados 11 milhões de registros. A base total de domínios “.com” e “.net” cresceu para 96,7 milhões de nomes de

DOMÍNIOS REGISTRADOS no final de 2009. Fonte: Verisign (www.25yearsof.com) 77 > 05/10 | webdesign |

L I V RO S grupos de foco, prototipagem e usabilidade.

Guidelines for Online Success

AG E N DA

08/05

13/05

15° EDTED

12° ENCONTRO LOCAWEB

Local: Porto Alegre www.edted.com.br Os gaúchos serão os primeiros da região Sul a receberem o maior encontro de internet do país, que vai abordar temas como Django, Magento, Joomla!, Mobile Tagging, Design, Cores e Tendências. Conheça as últimas novidades e aproveite para fazer networking com os profissionais mais renomados da área. Inscrições antecipadas ganham desconto.

A cidade do Rio de Janeiro é a penúltima parada da décima segunda edição deste evento voltado para profissionais de internet. Cyberpunk, inovação, tendências do mercado e startups serão alguns dos assuntos em destaque. As inscrições custam R$ 50,00.

19 e 20/05 TELA VIVA MÓVEL

TEDXSUDESTE

Local: São Paulo www.telavivamovel.com.br

No início do mês, os cariocas vão receber o TEDxSudeste, versão independente da maior conferência de ideias inspiradoras do mundo, o TED. O evento, que é gratuito, reunirá no Planetário do Rio de Janeiro mais de 20 palestrantes para discutir o tema “Colaborando para transformar”.

Taschen www.taschen.com

Local: Rio de Janeiro www.encontrolocaweb.com.br

08/05 Local: Rio de Janeiro www.tedxsudeste.com.br

ROB FORD E JULIUS WIEDEMANN

Nona edição deste evento que apresenta discussões sobre conteúdo para celular e entretenimento móvel, além de conceitos técnicos e de negócios aplicáveis ao setor. Inscrições a partir de R$ 1.445,00.

Avaliação e projeto no design de interfaces

JOSÉ GUILHERME SANTA ROSA E ANAMARIA DE MORAES

Para quem domina o inglês, este guia traz uma série de dicas sobre o que fazer e o que não fazer na concepção de projetos digitais, através das análises de profissionais de destaque em diversas agências interativas pelo mundo. Confira: http://tinyurl.com/77fique-1

2AB Editora www.2ab.com.br Este livro é uma ótima fonte de consulta, em língua portuguesa, para os profissionais de design que pesquisam dados e informações atualizadas sobre arquitetura de informação, avaliação heurística, card sorting,

Participe do Fique por dentro! Envie notícias, curiosidades, sugestões ou críticas para redacao@revistawebdesign.com.br.

MÉTRICAS

82%

Percentual de crescimento registrado nos acessos feitos através de BANDA

LARGA MÓVEL no Brasil no ano de 2009. Segundo o estudo “Brazil Quarterly Fixed & Mobile Broadband Database”, foram mais de 1,6 milhões de acessos através desta tecnologia. Fonte: IDC Brasil (www.idcbrasil.com.br)

| webdesign | 77 > 05/10

85,54%

Percentual de COMPRADORES ON-LINE que afirmaram estar satisfeitos com o desempenho das lojas de comércio eletrônico no Brasil. O estudo foi feito em fevereiro deste ano e contou com a participação de 94.201 usuários. Fonte: Câmara Brasileira de Comércio Eletrônico (www.camara-e.net)

76 > 04/10 | webdesign |

Agência

PORTFÓLIO

Movidos pelo planejamento estratégico Capital da República Federativa e considerada a terceira cidade mais rica do país, Brasília tornou-se o mais importante centro das decisões políticas no Brasil. Porém, suas movimentações também se estendem para o mundo digital. Isso porque vemos surgir diversos talentos, como os existentes na fullDesign. “Criada em 2003, por três jovens publicitários (Bruna Richard, Fabiano Abreu e Fernando Portela), a agência surgiu da necessidade de atendermos a demanda por soluções completas em comunicação. De forma pioneira, apostamos no conceito de comunicação integrada, que propõe a integração e a interação entre todas as mídias. Por isso, nossa equipe é composta por profissionais de diversas formações e experiências”, afirma Fabiano Abreu, diretor de planejamento da empresa. Diante da importância da cidade na história contemporânea do país, ele destaca suas influências no cotidiano de trabalho da agência. “Sob o prisma cultural, Brasília é excelente: tem gente de todo o lugar do Brasil. Uma babel formada por uma arquitetura modernista estonteante e manifestações artísticas e culturais brotando em todos os cantos, do centro a

fullDesign Ano de fundação: 2003 Cidade-sede: Brasília N° de funcionários: 5 SITE: www.fulldesign.com.br E-MAIL: contato@fulldesign.com.br TWITTER: @fulldesign

| webdesign | 77 > 05/10

periferia, da periferia ao centro. Fora os espetáculos, exposições e shows internacionais que cada vez mais têm Brasília em suas rotas. Referências verbais e visuais não faltam para profissionais antenados que realmente vivem por aqui.” Sobre os desafios em sobreviver em um segmento tão concorrido e dinâmico, Fabiano ressalta a importância de um planejamento estratégico. “Para criar um site, hotsite ou uma ação integrada nos meios digitais, mostramos ao cliente desde o começo de onde estamos saindo, para onde vamos e o que faremos depois disso. É o planejamento que orienta a criação para sempre promover a unidade entre texto e imagem, técnica e criatividade, dinamismo e estratégia, em busca das necessidades de marketing e resultados.” Em relação ao processo criativo, a realização de pesquisas focadas surge como uma etapa fundamental para se garantir bons resultados. “Depois de pesquisar, gostamos de desconstruir tudo e cruzar as referências de cada meio em um só plano. Limpamos as arestas e continuamos questionando tudo até depois do projeto entregue e, se necessário, modificamos alguns pontos para deixá-lo mais atual e funcional. E não importa de onde tiramos as referências: de uma exposição de grafite, estudando sobre a Grécia Antiga, analisando gestos e roupas de um camelô. Tudo é mensagem e cabe a nós transmiti-la da melhor maneira no meio digital que estamos utilizando.” Para o futuro, os planos são ambiciosos. “Queremos incorporar cada vez mais a atuação de nossos parceiros, como o Sirdar Instituto, detentor exclusivo da Metodologia ROI no Brasil, que consegue mensurar dados tangíveis e intangíveis em projetos digitais. Desenvolver ainda mais estratégias de marketing on-line que integram ações nas redes sociais e SEO, sempre definindo métricas em todo o processo. E conquistar também mais clientes no segmento varejista, repensando a comunicação dessas empresas na web.”

HOTSITE MAXXIMO GARDEN www.maxximogarden.com.br

O PORTFÓLIO RECHEADO DE BOAS SOLUÇÕES

digitais envolvendo empreendimentos imobiliários e também a habilidade na integração com campanhas off-line foram os parâmetros fundamentais para que a fullDesign fosse escolhida para desenvolver o hotsite do projeto do condomínio horizontal de luxo Maxximo Garden, que reúne o trabalho em conjunto de grandes construtoras de Brasília. “O objetivo primordial do projeto era destacar a localização dos lotes e dispor todos os diferenciais do empreendimento. No processo criativo, decidimos fazer uma ‘corrida’ em busca do melhores lotes, estimulando o desejo de futuros moradores e investidores”, afirma Fabiano. DIANTE DISSO, ELE RESSALTA QUE O PROCESSO CRIATIVO procurou, de forma inovadora, conceber um ambiente virtual em que o usuário pudesse criar seu perfil de acordo com as características de sua família. “Ele navega pelo mapa animado e interativo do condomínio, que apresenta o posicionamento, disponibilidade dos lotes e informações sobre as famílias interessadas. O usuário ainda pode indicar um lote de interesse e enviar mensagem para o atendimento comercial. Os lotes vendidos apresentam o nome e o perfil da família compradora.” Os números obtidos pelo projeto parecem ressaltar o seu sucesso: em dois meses, foram 98 lotes vendidos, hotsite acessado por mais de dois mil visitantes únicos e com 11 mil páginas visualizadas. “O departamento comercial relatou várias ligações de clientes que, antes mesmo de concretizar toda a compra do lote, solicitavam o cadastro imediato do nome e características do perfil de suas famílias.”

Sobre a tecnologia ACTIONSCRIPT 3 + AMFPHP + MYSQL

Neste case, Fabiano revela que foram necessários dois meses de produção para que ele fosse disponibilizado oficialmente. “Certamente, o grande destaque foi a arquitetura de informação e a proposta de interação com o usuário. Utilizamos Actionscript e AMFPHP, mas o que diferencia esse projeto dos demais foi o uso de animações convencionais se integrando com a programação. Dessa forma, pudemos controlar frame a frame o bater de asas dos pássaros que vez ou outra sobrevoam o condomínio ou as telas que se abrem para interação do usuário.”

77 > 05/10 | webdesign |

PORTFÓLIO

Agência

UMA INICIATIVA GLOBAL PARA INCENTIVAR O TURISMO sustentável, contando com a participação de mais de 20 países. Este é o mote da campanha Passaporte Verde, que faz parte do projeto “Férias Sustentáveis”, desenvolvido pela Força Tarefa Internacional para o Desenvolvimento do Turismo Sustentável (FTI-DTS), liderada pelo governo da França. No Brasil, o responsável pelas ações é o Governo Federal, juntamente com os Ministérios do Turismo e do Meio Ambiente. “A ideia da campanha é incentivar o exercício da cidadania ambiental em todo o mundo e influenciar o turista a preservar o meio ambiente, tendo um bom relacionamento com a natureza, com as comunidades e com a cultura dos destinos turísticos que visita”, explica Fabiano.

HOTSITE PASSAPORTE VERDE www.passaporteverde.gov.br

ASSIM, UMA DAS PRINCIPAIS TAREFAS DA FULLDESIGN

foi desenvolver o hotsite da campanha no país. “Pesquisamos, de forma aprofundada, a flora e a fauna brasileira, elementos do artesanato, arquitetura e manifestações culturais de diversos pontos turísticos e fizemos um mundo composto dessas diversas camadas que representam as etapas de uma viagem turística sustentável. O grid privilegiou com clareza e eficiência o movimento desse mundo, deixando o background de céu para mobilidade das páginas secundárias.” Mas os trabalhos não pararam por aí. “Além do hotsite, criamos jingle, spots, comercial de TV, vídeo para voos internacionais, cartazes, camisetas, adesivos, chamadas para extratos bancários, mensagens telefônicas, peças digitais e cartilha com dicas de como viajar de forma sustentável. Nossa preocupação, desde o início, foi equilibrar conceitos de turismo e sustentabilidade, integrando visualmente as peças ao discurso, que é didático e ao mesmo tempo divertido e espontâneo.”

| webdesign | 77 > 05/10

Sobre a tecnologia ACTIONSCRIPT 3 + AMFPHP + DRUPAL + POSTGRESQL

Neste projeto, um dos pré-requisitos do edital de licitação apontava o uso de determinadas tecnologias de desenvolvimento. “O Drupal foi uma exigência. Infelizmente, é extremamente engessado. Assim, ele só foi utilizado para a entrada de dados e gerenciamento dos itens de menu”. Segundo Fabiano, com a proposta de se criar um hotsite em Flash, houve um pouco mais de liberdade. “Mas para isso, precisávamos compreender o modelo de dados do Drupal, o que não foi nada fácil. O que levou mais tempo em todo o desenvolvimento foi compreender esse modelo e criar consultas para atender as nossas necessidades. Em seguida, utilizamos o AMFPHP para comunicação do Flash com o banco.”

HOTSITE CATÓLICA VIRTUAL www.fulldesign.com.br/catolicavirtual

A UNIVERSIDADE CATÓLICA DE BRASÍLIA É UMA DAS PRINCIPAIS DA REGIÃO e possui um braço virtual que oferece cursos à distância. Diante da necessidade de divulgação dos cursos de pós-graduação e extensão no segmento, a agência foi contratada para executar o projeto de comunicação. “Na época, foi feito um hotsite baseado no conceito ‘Sua carreira decola com os cursos da Católica Virtual’. Em razão de o público-alvo apresentar um perfil jovem e com alto índice de horas semanais na internet, apostamos na criação de um advertising game, onde os jogadores podiam brincar com o personagem ícone da campanha, que era alçado por balões e, para se manter em pleno voo, precisava fugir das tempestades, uma analogia aos desafios do mercado e ao ensino de má qualidade. Os usuários que participassem do jogo ainda podiam deixar um vídeo de sua performance e interagir uns com os outros pelas redes sociais cadastradas”, revela Fabiano. Além disso, o objetivo foi integrar totalmente o hotsite com as outras ações. “A campanha contou ainda com comercial de TV, anúncios de jornal, banners digitais e estratégia de conteúdo para redes sociais. Integrado a tudo isso, também foi criada ação de street marketing, que envolvia panfletos integrados a balões de gás que foram distribuídos em localidades estratégicas.”

Sobre a tecnologia ACTIONSCRIPT 3 + AMFPHP + FLASH MEDIA SERVER + MYSQL

Com duas equipes de desenvolvimento disponíveis para este projeto, sua execução foi realizada em apenas 15 dias. “Uma ficou focada no desenvolvimento do advertising game e a segunda nas demais funcionalidades do hotsite, incluindo a captura e a transmissão de vídeo com Flash Media Server. Novamente, optamos pelo uso do AMFPHP, o que permitiu que um determinado profissional da equipe ficasse responsável pela implementação das classes disponibilizadas no gateway para uso da equipe.”

77 > 05/10 | webdesign |

Freelancer

PORTFÓLIO

Design atento aos detalhes Se por um lado a inclusão digital no Brasil ainda apresenta um ritmo moderado, por outro podemos dizer que, para quem está decidido a investir no mercado de internet como âmbito profissional, as boas oportunidades existem e não se restringem apenas aos grandes centros urbanos. Com raízes em Pelotas, cidade localizada no interior do Rio Grande do Sul, a trajetória de Rafael Curi serve como um bom exemplo deste novo cenário. “O mercado de web na região é limitado quando se fala em captação de clientes, porém sua mão de obra qualificada, tanto de desenvolvedores quanto designers, tem grande destaque nacional. Pelotas não possui grande influência no meu trabalho, porém é onde recarrego minhas energias perto da família e dos amigos, pois costumo dizer que é uma cidade do interior com um ar de metrópole. Quando preciso de uma influência positiva para criar, gosto de estar mesmo em Porto Alegre. Por lá, a propaganda é explorada de uma forma muito mais intensa.” Mas as suas ambições não param por aí. “Quero passar um tempo estudando e trabalhando fora do país, principalmente na Europa, que tem um estilo de design que me agrada e me identifico muito. Além disso, estou trabalhando em um projeto pessoal, junto com outros três sócios. Trata-se de uma agência digital, a Wthink. Estamos desenvolvendo o primeiro projeto (em sua fase final). Nosso objetivo é captar clientes, principalmente no exterior. Até o final deste ano, a ideia é já ter um volume de trabalho significativo e que demande um envolvimento de cada vez mais pessoas na linha de produção.” Essa busca por novos objetivos encontra estímulo na certeza pela escolha de uma linha de trabalho a ser aplicada em seus projetos. “A maioria dos meus projetos são portais de conteúdo, sites corporativos

Rafael Curi E-MAIL: rafacuri@gmail.com SITE: www.rafaelcuri.com TWITTER: @rafaelcuri

| webdesign | 77 > 05/10

e sistemas web. Uso fontes de sistemas com cores neutras, muita presença de branco, trabalhando em cima de grid, com uma preocupação no alinhamento e padronização dos elementos. Acho importante salientar que um bom designer de interface deve ter um conhecimento básico das tecnologias que serão utilizadas para viabilizar o seu trabalho. É fundamental ser especialista no que faz, porém é indispensável ter essa visão geral do processo.” Além disso, ele ressalta a importância do profissional ficar sempre atento aos detalhes de um projeto. “Fora todas as teorias e as técnicas, um bom designer deve se preocupar, principalmente, que seu trabalho tenha um bom acabamento, se concentrando nos detalhes, dando atenção para cada item na tela por menor e mais simples que seja o elemento. Uso muito uma expressão oriunda da própria web: ‘deve-se trabalhar no pixel’.” Em relação ao aperfeiçoamento e às principais referências de seu processo criativo, Rafael costuma recorrer a diversas fontes. “Procuro influências no trabalho de profissionais de alto nível. Posso citar alguns nomes, como Marcos Nähr, Renato Rosa, Cainã Nunes, Isabela Rodrigues, Alisson Vieira, Guilherme Neumann, Lucas Hirata, Nando Sperb, dentre outros. Busco manter-me atualizado, tanto em relação ao design, quanto às novas tecnologias, através de cursos, lendo muitos blogs, assistindo palestras, encontros e oficinas.”

REFINARIA DE PETRÓLEO RIOGRANDENSE TECNOLOGIAS: CSS + HTML + JQUERY www.refinariariograndense.com.br

OUTRO PROJETO DE SEU PORTFÓLIO QUE RAFAEL faz

LA PIZZA MIA TECNOLOGIAS: FLASH + HTML + JS + PHP www.lapizzamia.com.br

NESTE TRABALHO REALIZADO, NO ANO PASSADO,

dentro da agência Bits (www.bits.inf.br), Rafael aponta como um dos detalhes mais interessantes a certeza na descrição do cliente sobre o que esperava que o ambiente transmitisse: ao acessar o site, o internauta tinha que ter a sensação de estar entrando em um de seus estabelecimentos. “De cara, notei o que o cliente esperava receber: um site temático, porém com uma estrutura mais reservada e que proporcionasse ao usuário uma navegação de nível fácil, já que o público era bem diversificado”, explica. Assim, para cumprir os objetivos deste projeto, Rafael revela que foi feita uma pesquisa com base em fotografias tiradas nas diversas lojas espalhadas pelo Rio Grande do Sul. “A iluminação do ambiente era média, então usei cores escuras no fundo e uma cor mais clara nas áreas de conteúdo para dar contraste de leitura. Além disso, usei madeiras de demolição e tijolos no topo do site, pois são materiais comuns nos ambientes das franquias.”

questão em destacar envolve a produção do site institucional desta tradicional refinaria de petróleo, fundada em 1937, na cidade de Rio Grande (RS), e que foi desenvolvido dentro da agência Worbi (www.worbi.com). Sua primeira etapa consistiu na participação de uma concorrência com outras duas empresas. “Fizemos uma proposta de concept da home. Este projeto teve um gosto especial, pois não passou pela esteira padrão de processos que utilizamos na Worbi. Recebemos um documento explicando um pouco sobre a história da empresa. Em cima dessas informações, começamos a pensar em como deveria ser a estrutura do site. Em um trabalho em parceria com a equipe de arquitetura e planejamento, o site começou a tomar forma. Não tínhamos muito tempo para tomar decisões e precisávamos superar as expectativas do cliente, pois também se tratava de concorrência.” Diante disso, Rafael explica que a ideia foi desenvolver um site limpo, com grande contraste entre o fundo e o conteúdo escrito, que seria bem extenso. “Também sabíamos que o cliente contava com um rico acervo fotográfico. Partindo desse princípio, criamos uma área conceitual bem grande com uma imagem e um texto curto e impactante. Era um site rico em conteúdo. Seguindo a leitura ao final do texto, eram sugeridos assuntos relacionados, acrescentando mais informações ao usuário sobre a refinaria.” No final, o resultado não poderia ter sido melhor. “Ao apresentar o nosso projeto na reunião, juntamente com as outras duas empresas participantes da licitação, ficamos surpresos com a reação do cliente, que se mostrou muito satisfeito com a nossa proposta, fechando naquele momento o contrato.” 77 > 05/10 | webdesign |

Ilustração

PORTFÓLIO

Raphael Sonsino Formado em Desenho Industrial (com habilitação em Programação Visual) pela Universidade Presbiteriana Mackenzie. Designer Gráfico, Ilustrador e Artista. Trabalhos/destaques: OOGLAB (www.ooglab.com); identidade visual e ilustrações para S3 Skateboards (www.s3skateboards.com.br); ilustrações para El Cabriton y Amigos (www.elcabriton.com.br). WD Como define seu estilo? RAPHAEL Tenho o objetivo de passar expressivi-

dade, movimento, diferenciação pela utilização de vários suportes e mistura de técnicas na criação das minhas composições visuais. Sou muito detalhista, porém procuro sempre desenvolver trabalhos menos regrados, sem preocupação com o grid, alinhamento, proporções etc. WD Onde você busca referências para o seu trabalho? RAPHAEL Muitos livros de design e ilustração,

admiração pelos trabalhos de grandes artistas

Raphael Sonsino E-MAIL: raphael@sonsino.com.br SITE: www.sonsino.com.br

| webdesign | 77 > 05/10

como Alphonse Mucha, Frank Frazzeta, Simon Bisley, Kent Williams, Sebastian Krueger, David Carson, HQ’s antigas (aquelas que eram feitas pelo método tradicional com técnicas de aerografia e acrílica, tudo na mão!), skate, arte urbana, fotografia e música (capas de vinil da década de 70/80 de bandas punk, new wave e rock).

Violinistasaxofonistadaconsolação (2009) Cliente Projeto pessoal Técnicas Primeiros estudos em lápis grafite e caneta Bic. Digitalização pelo Photoshop. Arte-finalização pelo Illustrator. Criação de texturas pelo Corel Painter e Art Rage.

Panther (2009) Cliente S3 Skateboards Técnicas Utilização de várias graduações de lápis grafite sobre papel com textura de tela. Algumas das texturas feitas em tinta acrílica. Criação do fundo com Corel Painter e Art Rage. Grafismos, padrões e textura de retícula pelo Illustrador. Digitalização, tratamento e fechamento pelo Photoshop.

Autorretrato (2009) Cliente Projeto Pessoal Técnicas Desenvolvimento de estudos com método tradicional, lápis grafite, canetas diversas e tinta acrílica. Digitalização e arte-finalização no Photoshop, Corel Painter e Art Rage.

77 > 05/10 | webdesign |

PORTFÓLIO

Lente Digital

Freddy Thorvaldsen “Sou coordenador de marketing da OSM Brasil, formado em Publicidade e Propagand,a com curso Portfólio na ESPM e MBA em Marketing pela FGV-RJ e OHIO University. Aprendi fotografia desde pequeno, através do meu pai, e ainda tenho as máquinas antigas como xodó (incluindo uma Polaroid SX-70 que fazia lindas imagens). Sempre fui autodidata, mas tive módulos de fotografia na universidade também.” WD Ângulo, iluminação, textura, movimento, corte... O que mais se destaca no seu trabalho? FREDDY Acredito que o que mais se destaca no meu trabalho seja o “momento fotográfico”. Sempre busco na paisagem uma visão ou perspectiva diferente das coisas como vemos no dia a dia. Sempre fui movido pela paisagem urbana e costumava percorrer a cidade de bicicleta com uma câmera na mochila pronta para registrar algo inusitado. Atualmente, trabalho com uma Canon 50D fazendo trabalhos mais voltados para clientes onde trabalho como webdesigner, mas sempre procuro um momento “Cartier Bresson”, que venha a eternizar uma imagem nem que seja na minha parede!

| webdesign | 77 > 05/10

Freddy Thorvaldsen E-MAIL: freddy@thorcomunicacao.com.br SITE: www.flickr.com/freddythor

Praia da Tartaruga (2007) Câmera: Canon XTi Lente: 17-70mm f2.8 (em 55mm - f8; 1/160s e iso 100)

Prece (2003) Câmera: Sony Cybershot W1 (compacta) Lente: f 4.5 - 1/30s e iso 100 (embutida)

Contemplação (2007) Câmera: Canon XTi Lente: 17-70mm f2.8 (em 18mm - f5; 1/60s e iso 100)

77 > 05/10 | webdesign |

Fontes de Inspiração

PORTFÓLIO

Pedro Moura Designer gráfico formado pela Escola de Belas Artes da UFRJ. Participa do projeto colaborativo Crimes Tipográficos, escreve no site Tipos do Brasil - http://tiposdobrasil.com - e suas fontes mais conhecidas são encontradas em http://tipospopulares.com.br WD Como surgiu a ideia de criar esta fonte? PEDRO Ela surgiu enquanto eu desenvolvia o

projeto gráfico de um produto para crianças. Comecei a desenhar a fonte por pura falta de boas opções - acho que todo mundo já passou por essa dúvida na hora de fazer um projeto desse tipo: “É para crianças; qual fonte eu uso?”. Fui desenhando as letras aos poucos, primeiro no papel e à caneta, e depois finalizando em vetores, conforme o redator liberava as frases para o projeto. Quando eu vi que tinha um set mínimo desenhado, resolvi desenvolver o arquivo de fonte. Tinha experiência em transformar letreiros artesanais em fontes digitais, mas resolvi com a Ticotico uma abordagem diferente: conciliar o bom acabamento de forma da finalização em vetores, sem perder o jeito de letreiramento. Estou numa fase de finalização e testes e quero colocá-la à venda em breve, pelo site do Crimes Tipográficos: http://crimestipograficos.com.br WD De que maneira a tipografia influencia na trans-

missão da mensagem? PEDRO Minha opinião é que a tipografia é o tom

Pedro Moura E-MAIL: contato@pedromoura.com.br SITE: www.pedromoura.com.br

| webdesign | 77 > 05/10

de voz de um texto. Quando se fala de livros, esse tom de voz precisa ser menos presente, já que só assim você pode ouvir, durante a leitura, a voz dos personagens, o timbre do texto, a linha de raciocínio do autor: concentrar-se mais na mensagem, e menos no desenho das letras. Nas revistas, o tom de voz dos textos precisa ser diferente de acordo com o público, já que uma mocinha adolescente possui diferentes interesses de um torcedor de futebol, ou de um webdesigner; você escolhe diferentes tipos para diferentes públicos, e ainda assim vale a clareza de leitura. Mas acredito, sim, que em várias ocasiões uma fonte com um tom de voz bem marcante possa contribuir para o entendimento de um texto. Trabalhos de design que não sejam projetos editoriais são feitos de mensagens de texto bem curtas e objetivas. E isso não significa que um texto sobre um cachorro deva usar uma fonte que saiba latir: quer dizer apenas que um desenho de letra “com sotaque” pode mostrar de onde veio o texto, e quem está falando com o leitor. Todo o meu trabalho com design de tipos pode ser entendido dessa forma: faço fontes com sotaques bem fortes.

Sobre a Ticotico Esta fonte foi desenvolvida a partir de desenhos de letras no estilo dos gibis e concilia legibilidade com expressividade gestual. A fonte foi desenvolvida em unicase (apenas caixa alta), funciona em corpos bem reduzidos e é uma boa escolha para projetos gráficos destinados para crianças. É um design de tipos funcional, mas sem perder o jeito de desenho à mão; um desenho esperto, alegre, mas sem ser bobo.

77 > 05/10 | webdesign |

ENTREVISTA

Sob o impacto da

geração Y

Busca constante e ousada por novas experiências, domínio tecnológico, perfil questionador e realização simultânea de tarefas. Essas são algumas das principais características dessa geração nascida entre 1980 e 1999.

| webdesign | 77 > 05/10

Sidnei Oliveira Consultor, autor e palestrante, expert em conflitos de gerações, geração Y, desenvolvimento de novos talentos e redes sociais. Site: www.sidneioliveira.com.br Twitter: @sidneioliveira

Para entendermos melhor todas as transformações vividas por estes jovens e o seu impacto na concepção de estratégias de comunicação, conversamos com o consultor Sidnei Oliveira, que é autor dos livros “Geração Y: era das conexões, tempo dos relacionamentos” e “Geração Y: o nascimento de uma nova versão de líderes”. Confira o resultado a seguir. WD Dentre as principais características desta geração nascida

a partir de 1980, você destaca a simultaneidade na realização de tarefas e o perfil questionador. Além destas, quais seriam as outras características fundamentais na hora de se definir um perfil resumido desta geração? SIDNEI É possível observar também a grande intimidade com tecnologia. Mesmo em jovens que têm menos acesso aos equipamentos, observamos uma rápida assimilação e aprendizagem quando recebem um equipamento moderno. Na linguagem popular, é como se estes jovens já nasceram “sabendo”. Além destas características, gosto de ressaltar que a geração Y tem “sede” por experiências e ousadia para experimentar. WD Você dedicou um capítulo exclusivo do livro “Geração Y: era

das conexões, tempo dos relacionamentos” para apontar os principais grupos, tribos e tipos pertencentes à geração Y. Em termos de relacionamento, quais são os maiores obstáculos para se garantir um bom diálogo com e entre esses diferentes grupos? É comum vermos jovens inseridos em mais de um determinado grupo? SIDNEI Diferente de jovens de outras gerações, a Y é composta por jovens “mutantes” que pertencem à diversas tribos simultaneamente. A chave está em entender o grupo de relacionamento em que eles estão envolvidos no momento ou na experiência que deseja realizar. Dependendo do grupo e do cenário, não há abertura para diálogo, pois alguns grupos são absolutamente antagônicos (exemplo: pagodeiros e emos). Contudo, é possível localizar, com facilidade, jovens que frequentam ambos os grupos. O paradoxo é uma grande marca desta geração.

WD No post “Saladão do Baguete e o Y das agências” (http://tinyurl.

com/77-ent-1), Jonatas Abbott apresenta algumas argumentações críticas sobre as possíveis classificações existentes sobre a geração Y e ressalta que elas são “totalmente iguais aos jovens de poder aquisitivo de qualquer tempo”. Diante de sua experiência na área, o que podemos classificar de “verdades” e de “mitos” quando falamos desta geração? SIDNEI Sempre vejo alguns artigos céticos sobre a existência ou não de uma geração realmente diferente. Quero esclarecer que existem inúmeros estudos que comprovam que os jovens nascidos a partir de 1980 têm um comportamento muito mais dinâmico que os jovens de outras gerações, principalmente por conta de todo o contexto tecnológico, social e cultural criado e desenvolvido intensamente nos últimos 20 anos. Este fenômeno atinge todas as classes sociais e não apenas os de poder aquisitivo. No Brasil, o conceito de poder aquisitivo está se transformando juntamente com a ampliação do crédito ao consumidor, por isso não representa mais alta renda. Hoje, os desejos dos jovens são relativamente uniformes. O que se altera é a marca, a qualidade e a forma de pagamento que um produto será adquirido pelo jovem consumidor. Se o jovem mais rico irá comprar um iPhone de $ 1.500 à vista, o da classe D, que ganha um salário mínimo, irá desejar e comprar o HIPHONE por 200 em dez vezes no cartão no site ComprenaChina.com. Isso significa que ambos têm os mesmos desejos e características e irão se comportar de formas muito semelhantes. Este fenômeno já foi observado por grandes comerciantes que têm dedicado especial atenção as chamadas classes C e D. Recentemente, ouvi o depoimento de um diretor de RH de uma grande empresa. Ele contou que o presidente havia decidido não participar mais do encerramento dos programas de trainees (atividade que cumpriu nos últimos 15 anos). Sua justificativa foi que antes ele podia cumprimentar os trainees colocando-se à disposição e dizendo que “a porta de sua sala estaria sempre aberta”. Agora, os trainees da geração Y estão indo em sua sala de verdade e fazendo muitas sugestões de gestão da 77 > 05/10 | webdesign |

ENTREVISTA

empresa. A conclusão do diretor de RH foi que jovens são iguais em todas as gerações, mas que esta Y tem realmente algo diferente... WD Em um dos seus últimos artigos, “A juventude é uma religião

a que todos acabam se convertendo” (http://tinyurl.com/77-ent-2), você ressalta que “o adulto de hoje, que precisou fazer um curso de pós-graduação para aprender ‘planejamento estratégico’, não pode ficar omisso diante deste cenário. Não é mais o tempo de se surpreender por um menino estar aprendendo a fazer ‘planejamento estratégico’ com nove anos de idade”. Pensando nisso, quais seriam as consequências diretas que a geração Y trouxe para o planejamento estratégico de comunicação de grandes marcas? E o que mudou na forma como esta geração enxerga o consumo de produtos e serviços? SIDNEI A geração Y é a primeira geração profundamente estimulada

A geração Y quer realmente um contato verdadeiro com a empresa que consome o produto

hiPhone Dispositivo móvel fabricado na China, vendido com o sugestivo slogan “Não é iPhone, é melhor que iPhone”. Trata-se de uma cópia pirata do popular iPhone, criado pela Apple. Fonte: Wikipédia (http://tinyurl.com/77-ent-7) e livro “Os chineses”

| webdesign | 77 > 05/10

por informações. Este fato transforma completamente a forma de comunicação que pode produzir resultados satisfatórios. O jovem dificilmente consome por marca nos dias de hoje. A principal razão para o consumo está nas recomendações recebidas através de suas redes de relacionamentos. Isto cria uma pressão enorme para que as grandes marcas se posicionem nas redes de relacionamentos também. Contudo, este ainda é um território completamente novo para todos (jovens e empresas) e as “verdades” ainda estão sendo descobertas. Esta geração valoriza a coerência e a transparência e, como tem acesso irrestrito pela internet, espera que as grandes empresas mantenham canais abertos de comunicação. E não estou falando de canais como as centrais de relacionamentos feitas por URA’s e contact centers terceirizados. A geração Y quer realmente um contato verdadeiro com a empresa que consome o produto. Ele valoriza a experiência de relacionamento que, se não for satisfatória, pode determinar a ruptura no canal de consumo com um depoimento negativo na rede que pode atingir dimensões inacreditáveis. Veja o exemplo envolvendo a UNITED AIRLINES com um passageiro, que resultou em um vídeo com mais de oito milhões de acessos.

sempre ligadas a uma elevada qualificação do jovem, que assume uma posição de liderança na hierarquia, o que tenho encontrado é um ambiente de profundos conflitos, muitas vezes silenciosos, mas presentes e negativos para a empresa. Harmonizar estas relações está entre os maiores desafios que os departamentos de recursos humanos das empresas estão encontrando atualmente.

WD Na reportagem “Um quinto da geração Y já chefia equipes”

WD Falando ainda sobre o choque de gerações, é possível apon-

(http://tinyurl.com/77-ent-4), publicada pelo Estadão, ficamos sabendo de alguns resultados de estudo da empresa de consultoria Hay Group. Por exemplo: 18% dos entrevistados, entre cinco mil jovens nascidos a partir dos anos 80, já possuem cargo de chefia. Em relação às outras gerações (belle epoque, baby boomers e geração X), o que muda no perfil do chefe, até então representado pelas figuras tradicionais, quando comparamos com os atuais jovens em altos cargos na hierarquia das empresas? SIDNEI Este é talvez o maior e mais visível aspecto da chegada da geração Y no ambiente corporativo, pois o conflito está acontecendo de forma totalmente aberta e direta. Vivemos em um tempo de ampliação na expectativa de vida das pessoas. Isso está alterando a dinâmica na vida profissional destas gerações. O jovem da geração Y chega às empresas e encontra baby boomers e X ainda sentindo-se jovens e produtivos e pouco dispostos a abrir espaço. Quando esta realidade é alterada por circunstâncias quase

tar as principais convergências e as diferenças em termos de atitude, postura pessoal e profissional, visão de mundo entre outras características? SIDNEI A primeira impressão que se tem é de que as gerações estão vivendo um tempo de ruptura total, onde os mais velhos não entendem os jovens de hoje, que por sua vez consideram os mais velhos como absolutamente lentos e desconectados da realidade atual. Evidentemente estas divergências sempre aconteceram entre as gerações. O fato novo é que os conflitos atuais estão mais potencializados, principalmente pelo ritmo de vida que surgiu com as novas tecnologias. Como mencionei em meu último artigo, todos desejam ser jovens pelo maior tempo possível e até o aumento da expectativa de vida, provocado também por avanços da ciência, contribui para a intensidade nos conflitos, pois existem mais gerações lutando por um lugar no mundo. Os mais velhos sentem-se produtivos em seus postos atuais, por isso não abrem espaço para os mais jovens ocuparem estas posições. Claro que esta situação não se sustenta

United Airlines O músico canadense Dave Carroll (www.davecarrollmusic. com/ubg/), da banda Sons of Maxwell, gravou um clipe chamado “United Breaks Guitar” e o postou no YouTube (http:// tinyurl.com/77-ent-3). O objetivo era criticar, de forma bemhumorada, os danos causados em sua guitarra no transporte e no descarregamento realizado pela United Airlines, além do posterior descaso da empresa. O protesto virtual acabou virando um hit nos EUA. Fonte: Blog ideavertising (http://tinyurl.com/77-ent-8)

77 > 05/10 | webdesign |

ENTREVISTA

A principal razão para o consumo está nas recomendações recebidas através de suas redes de relacionamentos por muito tempo. O que é necessário é um novo modelo de relacionamento entre as gerações, onde os mais velhos substituam o papel de executivos/ operadores, guardiães dos processos e zeladores dos resultados, para assumir uma nova carreira - a de líder educador - conhecido como mentor (mentoring), deixando todo o esforço executivo para a geração mais jovem, que tem mais energia e mais habilidades para o atual contexto tecnológico. Esta conscientização também deve acontecer com os jovens da geração Y, que mesmo tendo mais habilidades, precisam reconhecer que isto é apenas fruto de um cenário de superestimulação a que foram submetidos desde a primeira infância. E isso não os torna especiais. Eles precisam entender que são e precisam ser mais preparados para o novo ambiente hipercompetitivo e que, além de todo conhecimento técnico e toda informação que conseguem absorver, precisam acessar um tipo muito especial de conhecimento - o tácito -, que apenas os mais velhos possuem, fruto de todas as experiências acumuladas em suas vidas. O caminho é a negociação de interesse entre as gerações. E esta negociação precisa acontecer com maior rapidez. WD No artigo Cybertalentos (http://tinyurl.com/77-ent-5), Cesar Paz

afirma que, diante das novas ferramentas tecnológicas, os profissionais das áreas de capital e recursos humanos foram beneficiados na hora de se buscar novos talentos pelo mercado. Em sua opinião, quais são os parâmetros fundamentais para que as empresas possam manter e motivar os talentos da geração Y?

| webdesign | 77 > 05/10

76 77 > 04/10 05/10 | webdesign |

ENTREVISTA

SIDNEI A realidade de cada empresa dificulta a apresentação de

“fórmulas infalíveis” que deem resultados reais. O caminho é a verdadeira atenção para o fenômeno (geração Y) e a abertura de canais de comunicação de acordo com a realidade de cada empresa. Primeiramente, as avaliações de clima precisaram ser analisadas com mais profundidade e levadas mais a sério nas empresas. A geração Y está muito focada em sua rede de relacionamentos, o que inclui os colegas com quem trabalha. Outra questão muito importante para motivar e manter os talentos é reavaliar a relação do jovem com seu líder/gestor imediato. Este é o elo mais frágil atualmente e certamente um dos principais motivos para que um jovem se desligue de uma empresa. Este jovem valoriza muito, muito mesmo, a relação que tem com seu chefe. Se for positiva, ele permanece e acredita que pode evoluir; se for negativa, ele se esforçará para se colocar em outra realidade. E, neste caso, não se trata de estabelecer uma relação “paternalista” ou “franciscana” entre o chefe e o jovem. O que a geração busca é um mentor que se preocupe com seu desenvolvimento e que apresente desafios estimulantes, que levem este jovem a crescer e alcançar rapidamente uma posição mais desafiadora na própria organização. WD No post “A cartolina da geração Y” (http://tinyurl.com/77-ent-6),

publicado no blog A Quinta Onda, o autor destaca como as novas tecnologias estão inseridas no processo de educação dos jovens. Levando-se em consideração este novo cenário, o que é preciso transformar nos modelos atuais de educação para atrair e estimular a formação desses novos perfis de jovens? SIDNEI É preciso promover uma ampla transformação na forma como as aulas são realizadas. Hoje, o que vejo são professores que acreditam que modernizaram suas aulas com a adoção de “PowerPoint” e tarefas por e-mail. Isso não é nada mais que a automatização da antiga lousa e das lições de casa no caderno. É necessária uma real transformação, que contemple o jovem superestimulado com total intimidade da tecnologia e completa

| webdesign | 77 > 05/10

exposição às informações. É preciso modificar os métodos de ensino de modo a promover as habilidades de pesquisas e a construção de um raciocínio cognitivo mais refinado. Um exemplo: os erros gramaticais. No mundo atual e futuro, cada vez mais os corretores ortográficos dos programas irão auxiliar na construção de textos, por isso os professores deveriam promover suas aulas de forma a privilegiar a interpretação cognitiva, pois o entendimento e a construção do pensamento abstrato não podem ser automatizados. Evidentemente, a desconstrução de um modelo sedimentado durante os últimos 100 anos não é simples e precisará do envolvimento de muitos educadores, que devem buscar inspirações para o novo modelo em experiências de autoaprendizado que muitos jovens alcançam, principalmente, quando o tema é tecnologia. Este é um dos grandes desafios que a geração Y e a próxima, chamada de Z, trazem para a sua própria formação. WD Boa parte da geração Y estará atingindo os 30 anos de idade em 2010 e iniciando uma nova etapa em suas vidas. Neste processo evolutivo da sociedade, o que podemos esperar da próxima geração que irá suceder a geração Y? E quais serão os principais desafios em se manter um relacionamento ativo e saudável entre essas gerações? SIDNEI Em 2010, os primeiros jovens da geração Y estarão atingindo os 30 anos de idade, o que significa que, nos próximos dez anos, veremos cada vez mais as características desta geração determinando os destinos da sociedade. Eles terão como desafio lidar com a geração Z, que possui as mesmas características, mas de forma ainda mais intensa e profunda. Os conflitos de gerações serão em menor intensidade do que estamos observando atualmente, pois eles encontrarão um cenário já alterado pela própria geração Y. No entanto, os desafios educacionais e de comunicação se intensificarão e, assim como hoje, a comunicação e a negociação transparente de expectativas serão as chaves para um bom relacionamento.

CAPA

Des construindo interfaces Uma anรกlise conceitual de 12 cases digitais

| webdesign | 77 > 05/10

pesar de ter sido lançado em 2001, o livro “Homepage: Usabilidade - 50 websites desconstruídos” (www.useit. com/homepageusability) , de Jakob Nielsen e Marie Tahir, ainda é um material útil nos estudos sobre as diretrizes de usabilidade na web. Inspirados pelo modelo de análise feito por Nielsen e Tahir, decidimos lançar uma versão adaptada ao universo do design de interfaces, através da desconstrução de 12 projetos: 10 de agências digitais do país; um internacional (mas com participação significativa de brazucas); e outro desenvolvido no âmbito governamental. Mas antes de revelarmos o resultado deste trabalho, vamos conhecer os parâmetros utilizados ao se avaliar a qualidade de uma interface. “Eles mudam de acordo com o método de avaliação utilizado, com os objetivos do produto. O próprio conceito de ‘qualidade’ é muito difícil de delimitar. Para um site de e-commerce, por exemplo, qualidade pode ser medida pelo número de produtos comprados, pela taxa de processos de compra que foram iniciados e finalizados sem abandono de carrinho. Isso não se aplicaria a uma campanha de publicidade on-line, que busca apenas divulgar um produto ou uma marca”, explica Mauro Pinheiro (www.feiramoderna.net), professor assistente do departamento de Desenho Industrial da Universidade Federal do Espírito Santo (UFES). Apesar dessas limitações, o professor descreve alguns princípios que podem ser levados sempre em consideração. “O primeiro diz respeito à facilidade de uso. Com algumas exceções de produtos muito segmentados, toda interface deve ser de fácil aprendizado, fácil de usar. A interface visa a permitir a utilização de um sistema de informação, seja ele voltado para: fazer compras, consumo de notícias, jogos e passatempos ou mera exposição de uma marca. Deve ser possível identificar as opções de navegação, os mecanismos de interação e poder - com pouco tempo de uso - prever resultados de cada interação. Idealmente, mesmo quem nunca usou aquele tipo de produto, deve ser capaz de aprender a usá-lo em pouco tempo.” Em seguida, aparecem os aspectos referentes à universalidade de acesso. “Já não é mais tolerável que existam sistemas que excluem pessoas com necessidades especiais. Temos tecnologia, conhecimento e talento suficientes para que isso não ocorra mais. Sistemas que não tem acessibilidade para 100% dos usuários possíveis não podem ser considerados com boa qualidade. Ao contrário, demonstram incompetência e falta de qualidade.” O terceiro, e mais subjetivo, como ressalta Mauro, está relacionado com a linguagem. “Cada produto tem um público específico, que por mais abrangente que seja, demanda uma linguagem própria para uma comunicação efetiva. Isso é traduzido não só graficamente, mas em cada elemento do discurso que é apresentado: texto, imagem, som, todos os elementos trabalham no sentido de construir essa linguagem. Mas nem sempre vemos produtos com

uma abordagem correta dessas questões. Muitas vezes seguem um modismo, sem ter visão crítica, e pecam por não usar uma linguagem adequada ao público ao qual se destinam.” Já em relação aos erros mais comuns cometidos nesta área, Mauro destaca, por exemplo, a falta de foco na ação pretendida. “Muitas vezes, algumas interfaces pecam pelo excesso de elementos e opções de navegação. Embora em alguns casos isso seja uma estratégia, na maioria das vezes causa mais ruído do que ajuda. Isso ocorre mesmo com grandes produtos: a Amazon é um caso exemplar de excesso de opções na interface. Mas, não por acaso, uma vez iniciado efetivamente o processo de compras, as opções de navegação são reduzidas ao mínimo. Ali, eles voltam a ter um foco bem claro: finalizar o processo de compra. Mas nem sempre isso é levado em consideração nos produtos interativos. Apresentar muitas informações não é necessariamente melhor. Em muitos casos, vale a máxima: less is more.” Outro lapso muito comum envolve a aplicação de determinada solução sem visão crítica sobre a sua adequação ao problema. “Incomoda-me o uso indiscriminado do Flash, por exemplo. É uma ferramenta muitas vezes mal utilizada, que gera mais problemas do que benefícios. Normalmente, os sites em Flash são mal implementados, ficando inacessíveis para pessoas com necessidades especiais, alterando comportamentos que são padrão na web ou substituindo elementos de navegação do browser por elementos próprios, mais difíceis ou mesmo impossíveis de usar. Costumo ser avaliador de sites e é assustador ver a quantidade de sites inacessíveis, que ‘corrompem’ comportamentos que deveriam ser esperados na web, sem necessidade. O mesmo tem acontecido com o uso indiscriminado de AJAX, Javascript e DHTML. Repetem-se soluções sem a menor crítica, para seguir um modismo”, argumenta. Para finalizar, o professor lembra que, atualmente, os sistemas de informação demandam uma solução multiplataforma. “Não basta funcionar neste ou naquele browser, tem que funcionar em telefones celulares, sejam eles de tela de toque ou não. O iPad, da Apple, é uma nova plataforma e outras virão. Esse é um dado que não dá para ignorar. Apesar disso, é assustador ver quantos produtos são dependentes de uma plataforma ou uma solução específica. A não ser que a estratégia seja segmentar o produto, sistemas de informação que não sejam multiplataforma demonstram falta de qualidade. Têm que funcionar em diferentes condições de uso, nem que seja sacrificando determinadas características do sistema. É possível trabalhar com versões, sem comprometer o acesso ao conteúdo. A solução mais simples, muitas vezes, é a mais adequada, mas muitos produtos ainda ignoram essa prática. Repito: temos tecnologia, conhecimento e competência suficientes para fazer direito. Desconsiderar essa questão atualmente é um erro grave.” Conhecidas algumas das principais características envolvidas na análise de interfaces, confira nas próximas páginas os conhecimentos compartilhados na descrição de cada case. Boa leitura! 77 > 05/10 | webdesign |

CAPA

CASE: APLICATIVO BHTRÂNSITO EMPRESA: MOBIAN TECNOLOGIAS: CocoaTouch + Objective C http://mobian.com.br/bhtransito/

ARQUITETURA DE INFORMAÇÃO: o aplicativo prima por uma facilidade no acesso às informações, evitando que o usuário precise navegar por vários itens, até alcançar a informação desejada. Por isso, sua navegação possui - no máximo - dois níveis de profundidade e as listas de câmeras e painéis podem ser configurados pelo usuário, de forma a deixar em cima os itens que mais acessa.

Fonte: Leandro Alves (sócio-diretor)

INFORMAÇÃO VISUAL AO INVÉS DE TEXTUAL: em todo o aplicativo, primamos por exibir as informações de forma visual, uma vez que o usuário pode estar parado no trânsito e precisa entender a informação com rapidez. Um bom exemplo é a exibição das condições de tráfego, diretamente sobre o mapa - com as linhas coloridas -, junto da indicação de sua posição, por meio de GPS.

CONTAGEM REGRESSIVA: devido a uma restrição do sistema da BHTrans, as imagens só podem ser atualizadas a cada minuto. Para deixar claro este requisito do sistema, e não frustrar ou deixar o usuário ansioso, optamos por exibir o tempo restante para a próxima atualização. DESENVOLVIMENTO ÁGIL: sua primeira versão, lançada em

dezembro de 2009, tinha o mínimo de funções necessárias e foram implementadas da maneira mais simples possível. Com o feedback dos usuários, estamos constantemente melhorando o produto e adicionando novos recursos. ATUALIZAÇÃO AUTOMÁTICA: o aplicativo recebe as informações diretamente do site da BHTrans, permitindo que fique atualizado instantaneamente, tanto no caso de inclusão de novas câmeras, quanto na atualização da situação do trânsito, devido a um acidente, por exemplo.

Ficha Técnica Gerente de projeto:

SISTEMA DE FEEDBACK: a versão 1.2 (a ser lançada em breve) conta

Fabrício Marchezini

com uma melhoria no sistema de feedback do sistema. A partir dela, ao aguardar pelo carregamento de uma imagem de câmera, ou painel, o usuário irá visualizar um indicador de carregamento e poderá cancelar a ação, clicando no botão voltar.

Diretora de design de interação:

| webdesign | 77 > 05/10

Karine Drumond Concepção da ideia e desenvolvimento:

Leandro Alves

CASE: AVON MAQUIAGEM AGÊNCIA: MKT VIRTUAL TECNOLOGIAS: CakePHP + Flash + jQuery www.avonmaquiagem.com.br

Fontes: Ludmilla Rossi (diretora criativa) e Nivaldo Silva (planejamento)

NAVEGABILIDADE: o vasto conteúdo do site é melhor aproveitado através de ligações transversais. Cada produto apresentado mostra conteúdo relacionado a ele. São notícias, dicas de maquiagem, looks e outros produtos apresentados de forma conveniente e dentro do contexto.

LAYOUT: todo o site respeita um layout geral que divide a tela em três áreas: cabeçalho, corpo e rodapé. A divisão e o isolamento entre as três áreas foi uma solução que nos permitiu empregar a tecnologia mais adequada a cada seção, já que o corpo do site ficou totalmente isolado, sem restrições, e pronto para receber qualquer tipo de conteúdo.

ARQUITETURA DE INFORMAÇÃO: houve um trabalho muito cuidadoso na organização dos itens do catálogo para permitir acesso aos produtos da melhor forma. A divisão principal foi entre os grupos definidos pela própria Avon, quatro grupos básicos que abrigam subgrupos de produtos. Mas fomos além disso, construindo o banco de forma a permitir busca e também catalogando cada item com uma tag que informa sua cor, o que permitiu oferecer aos usuários a opção de explorar o catálogo por cores.

PAINEL DE DESTAQUES: apresenta-se em perspectiva, de modo a exaltar lançamentos, novas funcionalidades do site ou outros canais correlatos da Avon.

MENU: fixo e no formato horizontal. Contém fácil acesso

para todo o conteúdo do site e está presente em todas as páginas internas.

Ficha Técnica Diretora de criação: Ludmilla Rossi Gerentes de projeto: Alexandra Zagur e Christian

Nigmann Diretor de arte: Renato Cunha

IMAGEM EM DESTAQUE: este espaço foi criado para destacar graficamente o

elemento visual da campanha vigente. O site estreou com a atriz Ana Paula Arósio. Depois, a imagem foi alterada para a mesma atriz com a temática de verão. Atualmente, o elemento é um conjunto de batons, que está presente em alguns catálogos da Avon.

Desenvolvimento: Danilo Costa, Fábio Paes, Gabriel Caires, Bruno Marques, Neemias Teixeira e Ricardo Borowski Arquitetura de informação: Nivaldo Silva Redator: Rodrigo

Ferreira

Atendimento: Carolina Merfa e Alexandra Zagur

77 > 05/10 | webdesign |

CAPA

CASE: NOVA FACULDADE AGÊNCIA: BHTEC e:house TECNOLOGIAS: C# (através do Compose, CMS proprietário) + jQuery + SQL Server www.novafaculdade.com.br

ARQUITETURA DE INFORMAÇÃO:

fundamental a adoção de práticas como card sorting, benchmarking e testes de usabilidade. A partir dessas experiências, e tendo em vista os três perfis de público a serem trabalhados (prospects, alunos e professores), desenvolvemos a arquitetura e o wireframe que serviram de base para o layout final.

Fonte: Ronaldo Gazel (diretor de arte)

USABILIDADE: a própria distribuição do conteúdo

em três grandes grupos já funciona como ordenador, fazendo com que o usuário acostume a relacionar o conteúdo pertencente a cada uma dessas áreas às suas respectivas peculiaridades. Além disso, lançamos mão de todas as práticas relacionadas à otimização do código, permitindo grande velocidade no acesso às informações. Some-se a isso, a preocupação em fazer com que os conteúdos sejam sempre relacionados ao seu grupo cognitivo, não misturando estilos ou aproximando elementos de modo temerário.

LEGIBILIDADE: a interface possui três camadas visuais. A primeira, o background com tonalidades suaves baseadas no azul, utilizada nos preenchimentos do padrão de listras diagonais; a segunda, o plano onde as informações são exibidas, com boas margens, espaçamentos generosos e uso coerente de estilos, gerando facilidade na assimilação do conteúdo e na associação deste a seu grupo cognitivo; e o terceiro plano, onde ficam os elementos baseados na cor vermelha e desenhos com aspecto “orgânico”. A presença dessas formas irregulares serve para contrapor ao aspecto cartesiano, reto, geométrico, do restante da interface.

CORES E TIPOGRAFIA: a paleta utilizada segue rigorosamente as possibilidades previstas no manual de identidade visual do cliente. O azul e suas diversas tonalidades são utilizados na composição do conteúdo padrão, enquanto as tonalidades vermelhas são estrategicamente usadas para marcar itens com algum tipo de peculiaridade, sendo percebida num plano mais próximo do usuário, realçando, por exemplo, títulos e links de atualização frequente; quanto à tipografia, optou-se por seguir a família “Futura”, já utilizada na comunicação visual da faculdade, trazendo unidade na percepção visual do brand.

DIAGRAMAÇÃO: a partir da AI e do wireframe, chegamos a um

modelo de organização visual modularizado em três grandes grupos: a primeira coluna, com o filtro e o menu principal, destinada à busca de informações sobre a faculdade; duas colunas centrais de conteúdo e identificadores visuais das seções; e a terceira coluna, voltada para itens utilitários, como busca, calendário, videocast, Twitter, dentre outros.

Ficha Técnica MENU: os verticais são sempre os mais adequados quando se trata de pen-

Atendimento: Ana Carolina Mendonça

sar no futuro, quando novos itens podem vir a integrar a arquitetura. Mas, para diferenciar o terceiro (e último) nível, este foi trazido para a proporção horizontal, posicionando-se acima do conteúdo e estabelecendo um vínculo muito mais direto com o mesmo. Outro item que merece destaque são os separadores, geralmente linhas retas com um prolongamento curvilíneo, que é um elemento sampleado do próprio logotipo, reforçando, mais uma vez, a ideia de unidade estética do brand.

Assistente de atendimento: Virginia Dangeles

| webdesign | 77 > 05/10

Criação: Ronaldo Gazel Produção: Bruno Augusto Animação: Giocele Vieira Coordenação de design: Bruno Rodrigues Desenvolvimento: Elizabeth Queiroz e

Frederico Freitas

CASE: PEPSI REFRESH PROJECT AGÊNCIA: HUGE TECNOLOGIAS: CSS 3 + Doctrine + Drupal + jQuery + XHTML + Zend Framework + WordPress

LISTA DE IDEIAS E FILTROS:

o site é a principal plataforma de votação. Portanto, a grande maioria do espaço útil da interface foi usada para expor ideias e facilitar o voto. Elas são inicialmente ordenadas por ranking, deixando claras as regras do concurso. Fizemos questão de expor os avatares para que o site tivesse uma cara mais “real”. Ao votar, uma mensagem de sucesso, sempre diferente, sugere que os usuários compartilhem a ideia no Twitter ou Facebook. Foram milhões de votos até agora, mais de um bilhão de impressões na mídia e 300 mil novos fãs na página da Pepsi no Facebook.

ABAS: os projetos são divididos em categorias. Cada uma tem sua cor, que é a mesma usada no fundo dos retângulos das ideias. Na home, projetos de diferentes categorias são listados no mesmo espaço, de forma que o ranking que interessa, o relacionado ao prêmio em dinheiro, fique claro. O clique nas abas filtra os projetos, fazendo com que a página fique toda com ideias de uma só cor. Isso facilita a experiência do usuário, que não precisa aprender a usar uma nova interface, já que a página interna é basicamente a homepage.

www.refresheverything.com

HEADER: a Pepsi resolveu, pela primeira vez em 23 anos, não investir no Super Bowl, mas distribuir a verba de $20 milhões em um projeto de mídias sociais e crowdsourcing. Pessoas comuns mandam ideias para fazer um mundo melhor que concorrem em votação popular por financiamento da Pepsi. Todo mês são distribuídos $1,3 milhão aos vencedores. Um dos nossos principais objetivos era deixar imediatamente óbvio do que se tratava a campanha. Optamos por usar logo de cara letras garrafais para explicar a natureza do projeto.

BLOG: a Pepsi fez uma parceria com a

Good Magazine para a parte de conteúdo da campanha. O blog traz notícias sobre o concurso, faz a cobertura de projetos vencedores e oferece informações gerais sobre os assuntos tratados nas categorias. Fonte: Felipe Memória (design director)

Ficha Técnica Partner, Director of User Experience: Gene Liebel Partner, Executive Creative Director: David

Skokna Partner, Director of Production: Aleksandar

BARRA DE STATUS: a barra, que por aqui aparece colada com o rodapé, é na

Kirovski

verdade persistente. Ela fica sempre colada na parte inferior, acompanhando a rolagem. Sua principal função é a contagem dos votos. Cada usuário tem dez votos por dia e pode votar todos os dias. Ela também tem os links para login e cadastro, além de um botão visível para o envio de novas ideias, matériaprima principal do site.

Design Director: Felipe Memória

INFORMAÇÕES COMPLEMENTARES: o objetivo é explicar o projeto em mais detalhes com dados fundamentais: contagem regressiva para o final da votação, número de ideias concorrendo, data de anúncio dos resultados e, finalmente, a quantidade de dinheiro distribuída. O vídeo logo abaixo funciona em tela cheia, mas apenas na área útil do browser, evitando que o usuário perca os controles. Quando fechado, o vídeo pausa no frame exato em que parou. Caso o usuário volte, ele toca dali em diante.

Creative Director: Joe Stewart Engagement Director: Rachael Greer Art Directors: Liang Zhang e Ryan Frank Interaction Designers: Jennifer La Placa, Carl Collins e Angel Anderson Copy Director: Ross Morrison Technical Director: Lawrence Edmondson Technology Producer: Felix Brinadze Web Developers: Rafael Mumme, Brian Nguyen e Lukas Mairl Project Manager: Ana Breton

77 > 05/10 | webdesign |

CAPA

CASE: PORTAL ARCOR AGÊNCIA: CAPPUCCINO DIGITAL TECNOLOGIAS: CSS 3 + Drupal + Flash CS4 + HTML + jQuery + PHP www.arcor.com.br

ARQUITETURA DE INFORMAÇÃO: partimos do conceito da marca: “Momentos Mágicos” e perguntamos: Onde acontecem esses momentos? Quais são eles? Quando acontecem? Com o que acontecem? Dessas perguntas, derivamos os quatro pilares de arquitetura: Momentos, Datas, Produtos e Produtos relacionados. Assim, em Momentos, criamos uma nova maneira de se apresentar quais produtos combinam, por exemplo, para seu filho levar para a escola.

“TIME SPENT”: visando aumentar o tempo do

usuário no portal e, considerando, através de pesquisas, que ele nem sempre chega pela home, todas as páginas foram pensadas contendo conteúdos cruzados de vídeo, redes sociais, concursos culturais etc., para amplificar a navegação.

Fonte: Vitor Elman (diretor de criação)

IMPACTO VISUAL: para trabalhar com COMPARTILHAMENTO: criamos uma iconografia própria para

apresentar um recurso que permeia todo o portal, o de compartilhamento do conteúdo com Twitter, Facebook, Orkut ou e-mail. No rodapé, o Arcorito (personagem da marca) explica como funciona. Um recurso divertido e muito importante para a autodivulgação do portal.

IDENTIDADE VISUAL: respeitamos o guide da marca, criando um layout que explora seus elementos e, a partir deles, dar vida a novas brincadeiras. É o caso dos headers dos produtos. Neles, vencemos o desafio de combinar a linguagem visual dos produtos ao guide chefe da marca. Uma babel que deu samba.

campanhas que mudam constantemente, criar um impacto visual diferenciado e ainda dar mais dinamismo ao portal, chegamos em uma solução inusitada onde um Flash roda no background. Assim, as campanhas “escapam” de seus limites, interferindo em todo o portal e dando vida nova a cada mudança.

Ficha Técnica Diretor de criação: Vitor Elman Planejamento: Leandro Corrêa e Vitor Elman Gerentes de projeto: Ana Morales, Renata Neves

JQUERY: utilizado para solucionar problemas de usabilidade, deixando o portal

e Paula Santana

mais dinâmico e direto. Uma dessas soluções foi o menu que abre “empurrando” o portal para baixo, deixando um espaço clean e confortável para a leitura do segundo nível de navegação. No caso do item “Nossas Marcas”, essa solução foi essencial para que deixássemos a navegação mais direta, devido ao grande número de subitens.

Diretores de arte: Erika Cabral, Vicente Sulzbach

| webdesign | 77 > 05/10

e Juliana Ribeiro Programação: Bruno Corrêa e Vanessa Martins Programação Flash: Raphael Galvão Redatora: Rogéria Vianna

CASE: PORTAL BRASIL AGÊNCIA: GRUPO TV1 TECNOLOGIAS: Flash + HTML + Zope/Plone www.brasil.gov.br

ARQUITETURA DE INFORMAÇÃO: para atender

ao volume de conteúdo gerado pelo portal, fez-se necessário profundo estudo sobre a categorização e a organização dessas informações. Chegamos a três menus principais, um de públicos (“Para”), outro de assunto (“Sobre”) e o de formatos (“navegue por”), onde os temas de um conversam e são espelhados no outro e viceversa. O objetivo é que o usuário consiga sempre encontrar a informação que procura.

Fontes: Mauricio Moreira (diretor de criação/planejamento), Carlos Junior e Milene Ferraz (direção de arte) e Juliana Burger (arquitetura de informação)

CORES E TIPOGRAFIA: as cores da bandeira do Brasil foram utilizadas em uma versão suave, destacando alguns elementos que necessitam de atenção com cores mais fortes como o amarelo. A fonte Arial foi utilizada para conteúdos dinâmicos, o que além de ser acessível permite uma boa legibilidade. Para criar uma identidade leve, utilizamos a Helvetica Neue em lugares estratégicos, destacando pontos da navegação, como o menu.

LEGIBILIDADE: utilizamos o fundo branco como padrão para facilitar a leitura dos textos e oferecer uma leitura agradável. Para cada perfil ou tema, criamos planos de fundos com imagens que melhor traduzissem o assunto. Em datas comemorativas, eles serão trocados de acordo com cada data. Na versão para o exterior, nos preocupamos em transmitir da melhor forma imagens do Brasil direcionadas para este público.

USABILIDADE: recursos padrão e de fácil reconhecimento pelo usuário foram utilizados a fim de facilitar a navegação e a usabilidade do portal. Alguns exemplos: logo com link para a página principal na lateral esquerda do site, menu fixo na lateral esquerda, caixa de busca no canto superior direito e destaques acima da “dobra” para o que entendemos serem as informações mais procuradas e atualizadas (serviços e notícias).

ÍCONES: foram utilizados não apenas como elementos de ilustração, mas também como apoio ao texto e conteúdo. Na página principal, encontramos os ícones na esteira de serviços e na área “Navegue Por”, criada para organizar conteúdos de acordo com a maneira com que são apresentados, se vídeo, texto, minisites etc.

Ficha Técnica Diretor de criação/planejamento: Maurício Moreira Planejamento: Daniela Noyori e Carolina Rezende Gerentes de projeto: James Salinas, Franco Rosário

e Fernando Fogaça Diretores de arte: Carlos Junior e Milene Ferraz Tecnologia: Carlos Cima, Julio Monteiro e Danilo

IDENTIDADE VISUAL: pensando em quebrar a seriedade que um portal de um

Gomes

país traz, optamos por uma paleta de cores e tipografia leves. Utilizamos imagens fortes, criação de ícones padronizados e de grids para servir de base aos módulos que foram criados para montar templates. Conteúdos que têm a necessidade de um tratamento diferenciado são trabalhados como minisites, onde podemos explorar mais recursos visuais.

Arquitetura de Informação: Marco Moreira e Juliana

Burger Editores de conteúdo: Ernesto Bernardes e Ana

Lucia Araújo Atendimento: Daniela Cangiano

77 > 05/10 | webdesign |

CAPA

CASE: PORTAL FUNDEP ARQUITETURA DE INFORMAÇÃO: MAPA DIGITAL DESIGN E PROGRAMAÇÃO DE INTERFACE/FLASH: BOLT BRASIL DESENVOLVIMENTO DE SISTEMAS: BHTEC TECNOLOGIAS: ASP .NET + CSS 2/3 + Flash + jQuery + HTML www.fundep.ufmg.br

PROXIMIDADE VISUAL COM O

Fonte: Alexandre Estanislau (diretor de

TIPOGRAFIA como tínhamos um projeto muito sobrecarregado de informação, precisávamos priorizar a leitura e a hierarquia da informação. Trabalhamos com tipos serifados para os títulos e não serifados para o conteúdo, variando a hierarquia com corpos diferenciados, variações de light, regular e negrito da clássica Helvetica.

WIREFRAME: era uma expectativa do cliente que o design ficasse bem próximo do que foi projetado no wireframe. Então, o desafio maior para a criação era, usando técnicas de design, adequar uma grande quantidade de conteúdo, numa estrutura bem complexa, e ainda assim manter o visual mais leve e agradável possível, sem esquecer a usabilidade.

ARQUITETURA DE INFORMAÇÃO: foi de extrema importância para que pudéssemos visualizar corretamente todo o projeto antes mesmo de iniciar a etapa de design. Neste tipo de projeto, muitas páginas e elementos se repetem e, com um wireframe mais complexo, pudemos escolher as páginas e os elementos que eram diferentes e desenhá-los.

COMBINAÇÃO CROMÁTICA: este projeto foi BACKGROUND ORGÂNICO: um dos elementos muito fortes

e presentes no design foi justamente o uso de imagens de fundo mais orgânicas e diversificadas. Ao usar formas orgânicas, elas precisam de uma continuidade para que tenham o efeito pretendido. Como todo o site vem dentro de caixas, mantivemos uma leve transparência no fundo destas caixas para que o background pudesse aparecer e cumprir o papel corretamente.

baseado na nova identidade visual da Fundep, que tem uma forte utilização das cores azul e cinza - onde o amarelo e o laranja compõem como cores complementares ao azul para destacar links e pontos de interesse. Neste caso, queríamos dar prioridade para a informação. Então, um projeto mais limpo foi importante.

Ficha Técnica Criação: Alexandre Estanislau Gerência do projeto: Sérgio Jardim

BOAS PRÁTICAS DE DESENVOLVIMENTO: a programação de interface foi

Programação Flash: Samuel Judd

executada já prevendo os requerimentos da programação em .Net, como evitar uso de ID’s, privilegiando uso das classes CSS nas estruturas que seriam transformadas em controles de repetição pelo framework. Assim, a equipe de sistemas pode trabalhar sem atropelos e retrabalho, evitando que a interface sofresse alguma alteração indesejada de layout.

Programação Interface: João Marcos Teixeira

| webdesign | 77 > 05/10

Redação: Equipe Comunicação Fundep Atendimento: Graziela Kamei Pesquisa e usabilidade: Mapa Digital Sistemas: BHTEC e.house

CASE: PORTAL ODEBRECHT AGÊNCIA: SIRIUS INTERATIVA TECNOLOGIAS: Drupal + Flash + HTML www.odebrecht.com.br

ARQUITETURA E HIERARQUIA DA INFORMAÇÃO:

o número de categorias de primeiro nível foi intencionalmente controlado tanto para focar nos conteúdos foco (serviços, responsabilidade socioempresarial) quanto para guardar espaço para sua evolução. Ao mesmo tempo, pela natureza institucional do projeto, se optou por uma navegação estruturada sem o uso de aceleradores de DHTML e com sub-homes. Este fluxo intencional de navegação permite contar ao usuário histórias sobre o universo da organização.

CORES E TIPOGRAFIA: todo o visual trabalha,

principalmente, com a cor verde corporativa da marca e com o uso extensivo de espaços negativos. O uso de cor também marca a diversidade de seus negócios e participações. Para a tipografia, o layout faz uso da tecnologia do “Cufon” para usar fontes mais leves, que combinem com o aspecto moderno do site, sem que isso interfira no sistema de administração de conteúdo. DIAGRAMAÇÃO: o layout foi projetado em cima do sistema de grids “960.gs”, usando um modelo com 16 colunas. Essa organização de espaço de trabalho permite uma diagramação bastante consistente por todo o site e, ao mesmo tempo, intervenções criativas no modelo padrão, resultando em páginas com um fluxo de leitura moderno e organizado. Fonte: Raphael Aleixo (diretor de criação)

APLICAÇÃO, TRATAMENTO E DISPOSIÇÃO DE IMAGENS: a Organização Odebrecht possui um acervo com uma qualidade excepcional. Para aproveitar isso, todo o projeto gráfico faz uso de grandes destaques em imagens, como na página principal ou nas sub-homes. Para evitar um layout excessivamente reto, optamos por tratar algumas das fotos para que “quebrassem” suas bordas, criando mais dinamismo para as páginas e dando ainda mais impacto visual.

LEGIBILIDADE: o projeto gráfico buscava dar leveza à interface, mas, ao mesmo tempo, destacar através de imagens a grandeza e a beleza das obras e o retorno que trazem a sociedade. Por isso, foi proposto o uso da cor cinza para os textos. Ainda assim, o contraste entre cor de fundo e de texto foi ajustado para 4.5:1, garantindo uma leitura confortável. Ainda assim, foi proposto o uso do recurso de redimensionamento de fonte.

Ficha Técnica Diretora de conta: Adriana Menescal

CURIOSIDADE: enquanto a disposição dos elementos no projeto seguiram uma

Diretora de criação: Melissa Toledo

organização bem convencional, por se tratar de um portal institucional com bastante conteúdo, tivemos um desafio grande ao fazer o layout da versão em árabe: como a orientação da escrita é da direita para esquerda, todos os elementos tiveram que ser invertidos para manter o mesmo peso e ordenação para os usuários árabes.

Gerente de projeto: Lílian Grumbach Gerente de tecnologia: André Delorme Líderes de desenvolvimento: Diego Costa e Vítor Luz Analista de experiência do usuário: Carlos Mayrink

77 > 05/10 | webdesign |

CAPA

CASE: PORTAL TRAMONTINA AGÊNCIA: W3HAUS TECNOLOGIAS: Flash + HTML + MySQL + PHP www.tramontina.com.br

CABEÇALHO: primeira área de visualização é a marca da Tramontina em destaque, ao lado menu da área Institucional.

BUSCA DO SITE: posicionada na área de navegação global. Na página de resultados, os usuários podem filtrar notícias por produtos e conteúdos institucionais.

Fonte: Alessandro Cauduro (diretor de operações)

MENU: após um levantamento sobre os mais de 16 mil itens existentes, foi realizada uma reorganização da disposição de linhas e produtos da empresa no menu. Destaque também para os segmentos da Tramontina no menu. Com detalhes informativos no mouseover para contextualização, eles remetem os usuários para os sites de cada segmento.

GRIDS: destaques para conteúdos e serviços da empresa,

organizados em grids de três e quatro colunas, favorecendo a percepção e a leitura pelos usuários.

ÁREA DE DESTAQUES: devido a grande quantidade de infor-

mações da marca, a área de destaques oferece conteúdos simultâneos de forma interativa e clara. Ao clicar em uma área do destaque são apresentadas mais informações sem sair da página, com opção de acessar o conteúdo correspondente nas seções internas.

RODAPÉ: repete itens do menu institucional e serve como auxílio e reforço na navegação, para evitar a rolagem da página até o topo.

Ficha Técnica Diretor de criação: Chico Baldini Diretor de conta: Tiago Ritter Executiva da conta: Katia da Rosa Gerente de projetos: Diego Grandi Arquitetura de informação: Gustavo Bastian Designer: Diego Chiarelli HTML: Bruno Lobato Programação: Marcelo Arocha

| webdesign | 77 > 05/10

CASE: RÁDIO HEINEKEN 2010 AGÊNCIA: DIRETTA TECNOLOGIAS: Actionscript + CSS + Flash + PHP + XHTML http://myspace.com/radioheineken

CONCEITO: a rádio completou cinco anos de vida com um grande desafio para 2010: entrar nas redes sociais sem perder a essência construída no trabalho dos anos anteriores. A solução foi migrar a plataforma para o MySpace, ganhando mais interatividade e agregando seguidores cada vez mais focados com o perfil do projeto.

ARQUITETURA DE INFORMAÇÃO: todo o conteúdo foi organizado de forma com que se adaptasse aos padrões e regras do MySpace. No topo, temos o conceito visual e o campo usado para que as bandas independentes brasileiras participem da seleção da equipe de produção dos programas. Os conteúdos foram separados em boxes de acordo com grau de importância no projeto e a organização segue o padrão do veículo.

ESPAÇO PARA COMENTÁRIOS: o canal de recados usado no

Fonte: Daniel Perrone (sócio e diretor de criação)

MySpace permite que o usuário possa editar a cor e a fonte da maneira que quiser. Isso era um problema para a identidade visual da marca. A solução encontrada foi substituir os comentários do MySpace pelo Twitter da rádio, promovendo a troca de informações sem agredir a identidade do projeto.

MECÂNICA DOS PROGRAMAS: com a entrada nas redes sociais, os programas da rádio foram

modificados para que as bandas brasileiras independentes também participassem da programação. No primeiro bloco, o produtor musical Maestro Billy apresenta um panorama sobre o que acontece no mundo independente mundial; no segundo bloco, três bandas do cenário brasileiro são apresentadas para os usuários.

IDENTIDADE VISUAL: como a empresa possui um rígido manual de identidade visual usado em todo o mundo, toda a interface do MySpace foi customizada para que obedecesse todas as regras e os padrões de sinalização da empresa. O resultado foi um projeto totalmente adaptado às redes sociais, sem perder o visual adotado mundialmente.

Ficha Técnica Diretor de criação: Daniel Perrone

INTERATIVIDADE: além de ouvir a programação da rádio diretamente no portal, via

Gerente de projeto: Fabrício Silva

streamming, o usuário pode baixar os programas via podcast ou até mesmo colocar o player em seu perfil no MySpace. Alem disso, pode entrar em contato com o produtor do projeto, através do Twitter da rádio, e interagir com os demais seguidores.

Diretor de arte: Michel Luciano Desenvolvimento: Renato Ferreira Atendimento: Ana Molinari

77 > 05/10 | webdesign |

CAPA

CASE: TEIA 2010 - TAMBORES DIGITAIS EMPRESA: MINISTÉRIO DA CULTURA/ COORDENACÃO DE CULTURA DIGITAL TECNOLOGIAS: CSS3 + HTML + jQuery + WordPress-Mu (PHP) http://culturadigital.br/teia2010/

ARQUITETURA E HIERARQUIA DA INFORMAÇÃO: o trabalho foi dividido em duas fases: antes (divulgação) e durante o evento, por causa da cobertura colaborativa (mais de 40 pessoas). A prioridade nas matérias foi decisiva para que o site se tornasse uma revista eletrônica, priorizando matérias com foto e conteúdo multimídia colaborativo.

COMBINAÇÃO CROMÁTICA: a identidade visual do evento foi selecionada durante um concurso público. A solução tinha como marca principal a cor laranja, bastante brilhante. Para não perder a característica, utilizamos uma paleta derivada, com cores terciárias. Fonte: Yasodara Córdova (gestão de desenvolvimento da coordenação de cultura digital/Minc)

DIAGRAMAÇÃO: a solução encontrada para o grid foi a utilização

do Golden Grid, o famoso 960 (http://960.gs/), por causa da flexibilidade e boa aplicabilidade em vários tipos de gadgets, inclusive mobile (quando fluido).

FERRAMENTAS: muitos plugins foram utilizados para a construção do tema. Podpress (para inserção de vídeos), nextgen gallery, plugins do Flickr (para imagens) e outros, além de ferramentas como livestream.com, até pelo caráter colaborativo.

TIPOGRAFIA: o evento pretendia reunir pessoas de pontos de cultura, que geralmente não têm muitos recursos para acessar a internet. Por causa disso, foram escolhidas apenas fontes de sistema. Para lembrar uma revista, a serifa foi o único pré-requisito exigido com relação à tipografia.

Ficha Técnica DISPOSIÇÃO DE ELEMENTOS: a arquitetura foi feita em conjunto com a editora

da cobertura, de modo que ela pudesse orientar quanto às disposições do conteúdo multimídia, que deveria ser priorizado. Assim, a cobertura ficou com a coluna central e a direita, deixando o menu superior e a coluna da esquerda para o institucional. Todo o material produzido para o layout do site está distribuído sob licença GPL, inclusive o design e o tema.

| webdesign | 77 > 05/10

Coordenação e AI: Yasodara Córdova Diretor de criação: Hozielt Huston Desenvolvimento: Lincoln Sousa Redatora: Danielle Pereira

CASE: SALA DE IMPRENSA TV GLOBO AGÊNCIA: CANVAS WEBHOUSE TECNOLOGIAS: ASP 3 + CSS 3 + jQuery + HTML 4 + Windows Media Player + MP3 http://imprensa.globo.com

ARQUITETURA DE INFORMAÇÃO: optamos por uma navegação que refletisse a importância das informações, de maneira muito objetiva e nessa ordem: links de apoio (home, contato, mapa do site etc.); links de conteúdo aberto, sem necessidade de login (vídeos, grade de programação etc.); e links de áreas fechadas (fotos, releases e radio releases). Os destaques que aparecem na home só podem ser acessados depois de login, o que estimula o usuário a solicitar o cadastro, aumentando o mailing da TV, mas sem permitir acesso ao conteúdo fechado, cuja utilização só pode ser feita com a aprovação prévia dos administradores do site.

COMBINAÇÃO CROMÁTICA: a escolha foi por um fundo

Fonte: Marcelo Albagli (creative strategist)

CARREGAMENTO DO CONTEÚDO: a rapidez foi fundamental para que o jornalista tivesse agilidade em encontrar e usar as informações que precisa. Nesse caso, podemos considerar rapidez uma questão de usabilidade. Como se sabe, a velocidade de carregamento de um site influencia até mesmo no ranqueamento do mesmo nas ferramentas de busca.

neutro (branco e tons de cinza), deixando que o próprio material disponibilizado no site - a maior parte dele formado pelas imagens e vídeos produzidos pela TV Globo - criasse o ambiente lúdico que desejávamos. Utilizar uma paleta de cores mais complexa poderia interferir nesse material, que além de ser dinâmico, é bastante volumoso.

TIPOGRAFIA: as fontes, em sua grande maioria em formato HTML, garantem que o site seja carregado com rapidez. Também levamos em consideração o peso que queríamos dar a cada informação. Links de apoio, por exemplo, usam fontes menores, enquanto as seções têm maior destaque.

IDENTIDADE VISUAL: o fundo branco e os tons de cinza nos outros elementos do projeto proporcionam um ambiente favorável ao destaque das informações e do riquíssimo conteúdo audiovisual publicado no site. O azul pouco saturado nas barras de navegação dá apoio à identidade da marca, sem interferir graficamente nesse material publicado diariamente.

Ficha Técnica Diretor de criação: Marcelo Albagli Gerente de projeto: Cyro Neto Diretor de arte: Alexandre Duarte Desenvolvimento: Fernando Lira, Carlos Oliveira

USABILIDADE: optamos pela simplicidade, do começo ao fim. Tirando a barra de

e Eraldo Sérgio Jr.

navegação lateral redundante, desenvolvido com AJAX/jQuery, não utilizamos nenhum recurso que pudesse criar conflito nas versões mais antigas dos navegadores. Garantir o acesso era a maior preocupação. Por isso, utilizamos quase que integralmente HTML 4 e CSS no desenvolvimento do front-end - e poucas imagens.

HTML/CSS: Hélio Pereira Jr. Redator: TV Globo Atendimento: Natália Maia Aprovação: Andrea Doti

77 > 05/10 | webdesign |

OPINIÃO

Ágil sem perder a qualidade. É possível? No tempo em que o cinema ainda era mudo e projetado em preto e branco, o ator e cineasta Charles Chaplin acabou produzindo um dos maiores clássicos da sétima arte. Estamos falando do filme Tempos Modernos, que retrata criticamente os rumos da sociedade contemporânea com a introdução dos modelos industrializados de produção.

| webdesign | 77 > 05/10

Muitas décadas depois, vemos os processos envolvidos na criação e no desenvolvimento de projetos digitais e interativos se aproximarem cada vez mais de um ritmo industrial. Na correria de prazos curtos e a necessidade de atender a todas as demandas existentes, a pergunta que fica é: como garantir um fluxo ágil de produção sem perder a qualidade da execução criativa? A seguir, profissionais do mercado brasileiro compartilham suas expectativas e opiniões em relação a este cenário, além de revelarem como procuram trabalhar tal questão em seus cotidianos de trabalho.

Octavio Maron Diretor de criação da AG2 www.ag2.com.br

“A correria nas agências on-line sempre vai existir. Isso é algo que não tem muito como ir contra e os prazos vão ser sempre cada vez menores. E cada vez mais a internet/cliente cobra isso de você: agilidade. Com tudo isso, você não tem tempo de errar em nada. Para que o processo como um todo seja o mais ágil, e que garanta uma entrega primorosa, é preciso SEMPRE de um briefing bem escrito antes de qualquer coisa. Sem ele, tudo pode tomar um caminho errado pela simples falta de informação. Depois que todos os envolvidos no projeto leram o briefing, surge a grande reunião de início do projeto, onde tiramos as dúvidas, combinamos as responsabilidades de cada um no projeto e os prazos das entregas. Em seguida, diretor de arte, redator e diretor de criação, responsáveis pelo projeto, sentam para o processo de criação de fato do material, sempre conversando e trocando muitas informações com o pessoal de tecnologia, planejamento e atendimento durante todo o desenvolvimento do trabalho. No dia a dia da AG2, nós sempre nos atentamos para que esse início do projeto seja respeitado. Ele pode até, a princípio, parecer demorado e cansativo, mas é fundamental para que no final não se perca tempo, nem qualidade e muito menos o prazo. Além disso, durante o processo, a troca de informações com as equipes de planejamento e tecnologia não só evitam surpresas desagradáveis, mas somam - na maioria das vezes - melhores ideias para o projeto.”

Para que o processo como um todo seja o mais ágil, e que garanta uma entrega primorosa, é preciso SEMPRE de um briefing bem escrito antes de qualquer coisa

77 > 05/10 | webdesign |

OPINIÃO

Tulio Paiva Diretor de criação digital da Giovanni+DRAFTFCB www.giovannidraftfcb.com.br

“Curioso… escrevi um artigo há pouco tempo que falava exatamente sobre este ritmo industrial e como ele está prejudicando a qualidade dos trabalhos e até a qualidade de vida das pessoas que trabalham na área. Mas acho que hoje vou fazer um contraponto, vou responder ‘do outro lado do balcão’. Ali, no ‘chão de fábrica’, a vida real acaba se impondo. Então, em primeiro lugar, aceito que o ritmo industrial é quase uma condição sine-qua-non. Isso ajuda a focar no que precisa ser feito para corresponder, e não na reclamação, na rabugice que, por mais legítima que seja (e é), não movimenta a engrenagem do negócio. As coisas mudaram. Um novo modelo de mercado está em gestação. A gente tem que aceitar isso, descobrir esse novo modelo ou até mesmo inventá-lo. Em segundo lugar, procuro cultivar em mim e na minha equipe uma visão multidisciplinar. Quem tem uma visão abrangente resolve as coisas mais rápido. Quem vê sua atividade, seja criação, projetos ou atendimento, como algo separado de um todo maior, se apega, precisa valorizar, precisa que aquilo seja valorizado. E consome tempo. Procuro incentivar minha equipe, mais especificamente a criação, a olhar o todo do projeto. Assim, ela relaxa, produz mais rápido, com mais qualidade e, porque não dizer, mais prazer e menos sofrimento. Outras questões que acho essenciais para se produzir rápido e com qualidade são a acuidade do briefing (costumo dizer que a nobre arte do briefing se perdeu), conhecimento profundo do cliente e do negócio do cliente, senso de realidade aguçado e um processo bem definido. Veja bem, não estou falando necessariamente de burocracia, papelada, cronogramas… Os processos podem ser individuais, mas é preciso ter um. Afinal, é fundamental entregar um bom resultado num prazo definido. Portanto, é preciso cumprir etapas, mesmo que sejam as etapas mais confortáveis e produtivas para cada indivíduo. Lembro-me de um jogador de futebol que, acusado de correr sem pensar, saiu-se com a pérola ‘se eu corro, não penso, se eu penso, não corro’. Vamos ter que nos acostumar, pelo menos em parte, a pensar correndo. Ou correr pensando.”

Procuro cultivar em mim e na minha equipe uma visão multidisciplinar. Quem tem uma visão abrangente resolve as coisas mais rápido 48

| webdesign | 77 > 05/10

77 > 05/10 | webdesign |

OPINIÃO

Marcos Nähr e Rafael Bandeira Online Development Manager (gerente da equipe baseada no Brasil) e Online Front-end Product Owner, respectivamente, do time de Global Online da Dell www.dell.com “Os problemas mais comuns que afetam a qualidade na execução de projetos digitais são aqueles que envolvem, invariavelmente, o tempo perdido ao se trabalhar em aspectos não importantes, a pressão constante em função do ritmo industrial adotado que pode acabar com a capacidade cognitiva, as mudanças drásticas em requisitos que já estavam finalizados, a falta de envolvimento e comprometimento da equipe e, o que acreditamos ser o principal, aquelas situações onde o cliente diz X, a equipe entende Y e o designer entrega Z. Mas como um processo ou metodologia pode trazer agilidade para desenvolvimento de projetos e ao mesmo tempo garantir a qualidade da execução criativa? A resposta parece estar, e é o que aplicamos internamente na empresa, na adoção conscientemente de alguns aspectoschave que as metodologias ágeis trazem em seu DNA. A comunicação voltada ao projeto é um destes aspectos e aparece no contato direto e constante com o cliente e na elaboração das equipes, sempre multidisciplinares. Outro aspecto está relacionado à confiança que a metodologia pode trazer na medida em que, mesmo existindo um único responsável pela entrega do resultado (o dono/ owner), toda a equipe se sente (e realmente é) responsável pelo resultado final. Isso acontece quando esta mesma equipe participa ativamente da definição de estimativas e viabilidades e é parte fundamental da definição, automatização e padronização de todos os processos e entregas.”

| webdesign | 77 > 05/10

A comunicação voltada ao projeto é um destes aspectos e aparece no contato direto e constante com o cliente e na elaboração das equipes, sempre multidisciplinares

Beto Macedo Diretor de criação e sócio-fundador da Bumaiê www.bumaie.com.br

“É, nesse mundão pós-revolução digital, nessa era de excessos e do crescimento acelerado, o termo ‘na correria’ virou resposta para perguntas do tipo: como você anda? Não anda, corre. Não é? O fato é que, nessa maratona, o novo se torna velho assim... num estalar de dedos. E, para atender a essa nova exigência, quase nos comparamos às máquinas. Trabalhar oito horas por dia virou motivo de piada: tá fazendo meio período, hein! Diante desse cenário, os processos de produção e as áreas de atuação se diluem criando uma gama cada vez maior de especialistas. Explico: o velho termo (e olha que nem é tão velho assim) webmaster caiu por terra, ou seja, o figura que antes concebia um projeto do começo ao fim deixou de existir. Hoje, temos as etapas de criação e produção distribuídas: planejamento, arquitetura de informação, diretor de arte, assistente de arte e daí entram os programadores, área da qual derivam inúmeras especialidades. Essa ‘setorização’ possibilita uma lógica de produção mais ágil, fato. Mas e o processo criativo? Bom, está aí um assunto que todos debatem e muitos ensinam, mas não acredito em fórmulas. É claro que pesquisar, entender do assunto e abastecer o telhado de referências ajuda muito. Mas não é só isso. Criatividade depende também da sua personalidade e história, de como você vê o mundo e da maneira como sente as coisas. A verdade é que, embora pareça contraditório - porque exercitar a criatividade ainda é algo muito relacionado a um troço abstrato chamado ‘inspiração’ -, ter um limite de tempo para criar pode ajudar. O desafio de resolver um problema, num espaço curto de tempo, acelera nossa capacidade de cognição, que é parte do processo criativo. Não que isso seja uma regra. Por fim, a real é que nos adaptamos ao meio. E se o meio é competitivo e exige agilidade... Run, Forest, run!”

O desafio de resolver um problema, num espaço curto de tempo, acelera nossa capacidade de cognição, que é parte do processo criativo

76 77 > 04/10 05/10 | webdesign |

REPORTAGEM

Biblioteca de padrões de interfaces No segmento da tecnologia, segundo definição do dicionário Houaiss, o termo biblioteca é classificado como uma “coleção ordenada de código de programas e rotinas, a quem um programador pode recorrer para desenvolver outros programas”.

| webdesign | 77 > 05/10

o livro “Design para a internet: projetando a experiência perfeita”, Felipe Memória reforça tal descrição, lembrando que, há algum tempo, o uso de bibliotecas de padrões de interfaces é algo muito comum na indústria de desenvolvimento de software e que “o designer de interfaces deve conhecer profundamente os padrões e as práticas mais utilizadas na web”. Nesta caminhada, trabalhar com bibliotecas de padrões de interfaces, também conhecidas como UI design pattern library, vai ajudar no cumprimento eficaz desta tarefa. “A biblioteca de padrões é uma ferramenta que ajuda na organização e na padronização do trabalho da equipe, além de proporcionar a construção de conhecimento coletivo, uma vez que tira o conhecimento da cabeça dos designers para documentá-lo de forma que todos tenham acesso para usar, modificar e melhorar. É um processo contínuo e um exercício de organização interna”, afirma Eduardo Loureiro (http://eduardoloureiro.com), coordenador de experiência do usuário da Mapa Digital (http://www.mapadigital.net). Diante disso, vamos logo conhecer algumas das principais vantagens de sua aplicação no processo de produção de projetos digitais e interativos. “É importante considerarmos dois pontos fundamentais, que justificam o seu uso. O primeiro é que os usuários passam mais tempo navegando em outros sites do que no seu e, por isso, ele está mais acostumado com convenções. O segundo é que, se todos os modelos de interações forem exatamente como ele imagina, seu esforço passa a ser direcionado para comprar, consumir informações, se relacionar etc. - e menos para entender como se navega no seu ambiente. Todo padrão que é muito usado passa a ser modelo mental dos usuários, tornando-se uma base heurística. O benefício disso é reduzir a carga mental no uso desses ambientes interativos, tornando as interações mais fluidas e prazerosas, assim como servir de referência para desenvolvedores - que não precisam ficar testando a eficiência de cada componente que é criado”, cita Renato Rosa, sócio-diretor da RED (www.redder.com.br). Outro aspecto fundamental, como destaca Caio Cesar (www. caiocesar.cc), um dos coordenadores do curso de design de interação da PUC-Minas, está no fato de que estas bibliotecas são construídas a partir de pesquisas, experimentação e observação. “Assim sendo, é muito maior a chance de que elas tenham sido desenvolvidas levando-se em conta modelos mentais específicos dos usuários-alvo dos tipos de serviço em questão bem como suas características e necessidades. Não devemos deixar passar em branco a questão de que estas bibliotecas servem também para mostrar o que funciona e o que não funciona nos diferentes navegadores e suportes que usamos. Elas servem como um denominador comum para que seja possível garantir integridade visual e funcionamento dos sistemas em diferentes plataformas, suportes e navegadores. Complementando o assunto, em virtude da abrangência e da complexidade das bibliotecas, é comum que

os elementos lá presentes trabalhem também a questão da acessibilidade. Por último, o uso deste tipo de recurso proporciona um resultado final que garante a identidade entre os projetos. Isso é muito importante para a consolidação do projeto e para que o usuário identifique onde está (tanto no sistema quanto na rede como um todo) com mais facilidade.” Além destes fatores, Daniel Blumenthal (www.blumenthal.com. br), designer de experiência do usuário da Globosat, ressalta ainda os ganhos em termos de produção das equipes envolvidas em um projeto. “Não apenas para o designer, o uso de bibliotecas internas é uma estratégia operacional que atinge todos os profissionais de desenvolvimento e permite o lançamento de novos produtos de forma mais ágil. Seguir um padrão significa diminuir operações de aprendizado. Essa regra é aplicada em todos os níveis, desde a nomenclatura de arquivos ou classes, até elementos de interface para o usuário. Se temos componentes com funções comuns em diferentes interfaces, esses elementos devem ser iguais (ou, pelo menos, o mais semelhante possível). Assim, para correções ou melhorias, o processo de evolução dos produtos como um todo é mais simples de ser executado. Nem sempre a padronização minuciosa é possível, mas visar constantemente essa direção irá significar em menor tempo operacional. Alguns exemplos que poderiam ser observados em um fluxo completamente padronizado: compatibilidade tecnológica; profissionais conseguem achar os arquivos facilmente; desenvolvedores sabem as classes que devem ser alteradas; designers avaliam com mais clareza o que não está perfeito; métricas são mais fáceis de serem instaladas; e usuários já estão familiarizados com o uso da interface (ou pelo menos parte). Todos podem (devem) sugerir/providenciar melhorias, até mesmo o usuário.” DERRUBANDO UM MITO

Na segunda edição do livro “Não me faça pensar”, Steve Krug faz a seguinte recomendação: “inove quando souber que tem uma ideia melhor (e todos a quem você mostrar disserem ‘uau!’); caso contrário, aproveite as convenções”. A hora é boa para analisarmos os desdobramentos por trás das palavras do especialista americano, principalmente porque elas vão nos ajudar a desvendar um dos grandes mitos envolvendo o uso de bibliotecas de padrões: uma suposta limitação ao trabalho criativo e inovador do designer de interfaces. “Vejo as bibliotecas de padrões como ferramenta e, como qualquer ferramenta, elas podem ser utilizadas de maneira correta ou incorreta. Geralmente, o argumento de que seu uso inibe a criatividade e a inovação é calcada na crença de que usar padrões é o mesmo que fazer cópia, o que não é verdade. Primeiro, porque os padrões não precisam ser usados de forma literal. Muitas vezes, para atender melhor a especificidade de um projeto, é preciso que os padrões sejam customizados. Segundo, porque as bibliotecas de padrões podem ser fonte de pesquisa e inspiração para a criação 77 > 05/10 | webdesign |

REPORTAGEM

de novos elementos. Afinal, é preciso conhecer muito bem o que já existe para evoluir, ou quebrar as regras e paradigmas. Além disso, bibliotecas de padrões nada mais são que recomendações de boas práticas materializadas. É um recurso que o designer de interfaces tem a sua disposição e deve ser tratado dessa forma, para não virar algo com determinação obrigatória, que faz com que a criação fique presa aos padrões que já foram mapeados. Ou seja, é uma questão de bom senso do designer saber utilizar com sabedoria tal recurso”, argumenta Eduardo. “Gosto de ver as bibliotecas de padrões como ferramentas de trabalho que favorecem o trabalho criativo, não como limitadores da inovação. À medida que o designer utiliza padrões de interface, ele se liberta de ter que ‘reinventar a roda’ e passa a ter mais espaço no projeto para dedicar seu esforço criativo a soluções inovadoras que façam sentido. Acredito que o uso de padrões deve ser sempre dosado com o grau de inovação que o público, o produto e o negócio aceitam”, acrescenta Marcia Maia, especialista em ergonomia, usabilidade e interação humano-computador pela PUC-Rio. Para finalizar esta discussão, lembramos que ela encontra certa semelhança quando falamos sobre o uso (ou não) de wireframes. “A biblioteca de padrões otimiza o trabalho, melhora a qualidade de interação e direciona os fatores-chaves de sucesso de um projeto para diferenciais do negócio. O designer de interação - ou arquiteto de informação - passa a empenhar seus esforços não mais em componentes básicos - onde normalmente não há necessidade -, mas ao negócio e seus diferenciais competitivos. Em virtude disso, acho que o uso dessas bibliotecas contribui para o trabalho criativo e inovador. Afirmar tal limitação seria o mesmo que dizer que um wireframe limita o trabalho de um designer. Pelo contrário, o auxilia a empregar melhor sua criatividade, em fatores que realmente importam”, diz Renato. DESENVOLVENDO BIBLIOTECAS

Para quem ficou convencido das vantagens de sua aplicação e está decidido a iniciar um processo de desenvolvimento de suas próprias bibliotecas, Eduardo explica, de forma resumida, a dinâmica envolvida na descrição dos pontos para cada elemento mapeado da interface: - PROBLEMA: descrição do problema ou requisito que o padrão irá

resolver; - QUANDO USAR: os contextos em que o padrão se aplica; - PRINCÍPIO: os princípios de usabilidade em que o padrão se

baseia; - SOLUÇÃO: a forma como o padrão funciona para resolver o

problema; - POR QUE: como e porque o padrão funciona; - EXEMPLOS: aplicação do padrão em interfaces reais.

“Na prática e na correria do dia a dia, passar a guardar em um lugar central os elementos mais bem resolvidos, e que se saíram melhor em testes, já é um ótimo ponto de partida. Mas complementar os elementos com essas informações (problema, uso, princípio, solução, por que e exemplos) é uma ótima forma de organizar os

| webdesign | 77 > 05/10

Todo padrão que é muito usado passa a ser modelo mental dos usuários, tornando-se uma base heurística Renato Rosa

77 > 05/10 | webdesign |

REPORTAGEM

Exemplo prático: sites dos canais Globosat

Programa Nós 3 (http://multishow.globo.com/nos3), Multishow

padrões e, acima de tudo, melhorar a recuperação deles para uso nos projetos”, completa Eduardo. Para Caio, outro ponto importante está presente na necessidade de um profundo conhecimento do projeto (principalmente, os de grande porte) e de tudo o que o envolve. “Quais os diferentes sites e subsites a serem feitos; para quais públicos estes projetos serão desenvolvidos; quais os elementos que estes projetos terão em comum; o que as pessoas farão nestes sistemas; como isso é feito hoje; quais são as suas (dos usuários) demandas; qual é o direcionamento criativo deste projeto; e qual a periodicidade planejada para renovações da interface. A partir destas informações, pensa-se em desenvolver os elementos básicos que farão parte da biblioteca a partir de wireframes e, em seguida, produzindo os layouts. Nada muito diferente do processo normal. Entretanto, para a construção de uma biblioteca, há a necessidade de se pensar como os elementos construídos serão usados e reaproveitados, quais as possibilidades de variação nos elementos (cores, texturas, letras etc.) e muito importante: tudo com boa documentação, para que todos os envolvidos (imagina-se uma grande equipe que desenvolve vários projetos em diferentes locais) possam compreender como usar os elementos da biblioteca.” Sobre o período recomendado para a sua criação, Renato afirma que essa iniciativa é tomada a partir do momento em que o usuário percebe esses ambientes como produtos de uma mesma marca, que entrega o mesmo benefício. “Um dos maiores erros corporativos na internet é posicionar uma empresa como ela se enxerga e não como seu usuário a vê. Métodos centrados no usuário (UCD) são essenciais na construção desses ambientes, que são mais bem percebidos e utilizados.” “Sempre é recomendada a utilização de bibliotecas de padrões. Elas podem ser mais amplas (bibliotecas que visam mostrar os padrões visuais para construção de menus, abas, formulários, procedimentos em etapas e por aí vai... Questões aplicáveis em qualquer projeto interativo) ou mais fechadas (construção de padrões para uma empresa específica que tem muitos sites ou minisites para que todos tenham a mesma identidade). Vai de

| webdesign | 77 > 05/10

Seriado House (http://uc.globo.com/house/), Universal Channel

cada caso. Para empresas com uma presença bem abrangente e com muitos sites, minisites e subsites, o desenvolvimento de uma biblioteca própria é mandatório. Para apenas agilizar processos para as agências e as produtoras aplicarem em diferentes clientes, o uso de bibliotecas amplas é bem interessante e recomendado”, acrescenta Caio. Um segmento altamente propício à aplicação de bibliotecas, como aponta Eduardo, são os projetos para dispositivos móveis. “É o contexto onde definitivamente o conteúdo é o que importa. As pessoas querem apenas acessar e usar o que precisam usar. É onde os conceitos de clareza, simplicidade e imediatismo têm que estar mais presentes e o uso de boas práticas e de elementos, que as pessoas já sabem identificar e usar, são mais necessários.” REALIDADE DO MERCADO BRASILEIRO

Recorrendo novamente aos pensamentos expostos por Felipe Memória no livro “Design para a internet”, ele ressalta que “seria bom se a maioria dos websites apresentasse uma consistência semelhante à de programas da plataforma Windows (que seguiu o exemplo dado pelas interfaces do Macintosh)”. Na prática, quem vem dando um bom exemplo na área é o departamento de novas mídias da Globosat, com a aplicação de tais conceitos na concepção de sites como, por exemplo, do seriado House (http://uc.globo.com/house/) e do programa Nós 3 (http://multishow.globo.com/nos3). “Os produtos da Globosat são exemplos de aplicações de um padrão planejado. Cada produto mantém sua personalidade com um skin próprio, principalmente na home e em elementos pontuais (como headers, fundos, estilos etc.); à medida que nos aprofundamos na experiência desses produtos, percebemos um padrão entre os elementos de interface. O usuário que já teve a experiência de usar o site de um programa do canal Multishow terá uma curva de aprendizado menor quando visitar o site de alguma série do canal Universal. Na Globosat, o objetivo do núcleo de novas mídias é atender as necessidades dos canais na TV, que são bastante semelhantes e criar novos ambientes participativos

Unanimidade: a biblioteca do Yahoo!

“Sua biblioteca de padrões de desenvolvimento (http://bit.ly/y-ux) é bastante organizada. Mantém a disposição documentação funcional e visual dos componentes utilizados pelos aplicativos e sites de empresa.” (Daniel Blumenthal)

que complementam a experiência da TV na web. Por conta disso, padronizamos as necessidades funcionais comuns para investir mais tempo em novos produtos ou em pontos necessariamente específicos”, revela Daniel. Além da Globosat, este é um bom momento para avaliarmos também como anda a aplicação e o conhecimento sobre bibliotecas de padrões de interfaces no cotidiano das agências digitais e dos profissionais brasileiros. “O uso de padrões de interfaces é muito pouco praticado por agências/profissionais no país. Ainda é comum a mentalidade de que o designer deve contribuir com adornos e impacto visual emotivo, quando deveria estar planejando uma experiência mais consistente e funcional. O designer não deve ter como objetivo evidenciar suas habilidades, mas sim utilizá-las para criar um bom produto. Quando utilizamos as mesmas formas para elementos de mesmas funções, estamos sendo consistentes. A função de cada elemento deve ser facilmente identificada e a consistência propõe que essas funções não precisam ser reaprendidas novamente. Investir em bibliotecas de elementos funcionais também auxilia a conter custos de desenvolvimento à medida que são reaproveitados. É comum investir tempo de design e desenvolvimento elaborando diversas formas de fazer as mesmas coisas, quando poderiam ser feitas uma só vez corretamente e personalizável (cores e estilos) - conforme necessário. Para que desenhar diferentes páginas de login se todas

terão a mesma função?”, argumenta Daniel. Para Eduardo, ainda é possível enxergar a aplicação de bibliotecas restrita apenas ao contexto de sistemas, e-commerces e portais de grande porte. “Obviamente, são projetos que claramente exigem mais consistência e respeito às convenções de interação, pois o seu foco está no conteúdo e na utilização de funcionalidades e não na inovação de interação ou do layout propriamente dito. Além disso, o conhecimento sobre padrões de interface e como utilizá-los no processo de trabalho ainda são pouco difundidos em agências digitais, que muitas vezes dão mais valor as inovações estéticas, talvez com a mentalidade de que isso traga mais valor para os projetos junto aos clientes. O que pode realmente acontecer, mas que entra em detrimento com a experiência do usuário, que precisa a cada website formular um novo modelo mental para utilizar a interface. É claro, cada caso é um caso, grande parte dos jobs das agências digitais são peças publicitárias, o que exige maior apelo estético e até alguma despadronização proposital para instigar o esforço cognitivo dos usuários, mas é preciso saber até onde isso é válido e realmente necessário. É preciso ter uma visão mais estratégica e profunda dos projetos, para entender se há a necessidade de utilização de padrões ou não. Pensar só na questão estética é um erro clássico, mas não quer dizer que ela precisa ser esquecida. Alinhar estética e funcionalidade é muito importante para projetos de sucesso.” 77 > 05/10 | webdesign |

ESTUDO DE CASO

O acervo lúdico e interativo de

Niemeyer

Impossível falar em arquitetura e não citar os trabalhos de Oscar Niemeyer. No final do ano passado, foi lançada a nova versão do seu site institucional (www.niemeyer.org.br). A seguir, Pedro Segreto e Marcelo Alt, diretores do estúdio Caos! Vídeo&Design (www.caosdesign.com.br), revelam os principais detalhes envolvidos na realização deste projeto. Tecnologias: Actionscript 3 + Flash + MySQL + PHP

| webdesign | 77 > 05/10

WD Com uma trajetória envolvendo cerca de 500 obras, entre executa-

das e não executadas, o arquiteto brasileiro Oscar Niemeyer é um dos profissionais mais respeitados internacionalmente no segmento. Em dezembro de 2009, vocês lançaram o novo desenho de seu site oficial. Como surgiu a oportunidade de o estúdio realizar este trabalho? CAOS! De 2005 para 2006, executamos o site da Casa Lúcio Costa. O pessoal da Fundação Oscar Niemeyer viu o trabalho e se interessou. Foi quando entramos em contato e começamos a conversar a respeito. Primeiro, foi pensado um site maior, que foi transformado em algo menor, porque para constar num portal a apresentação das 500 obras acabava que ficava um orçamento muito grande. Então, propomos fazer um site menor, com 60 obras, mas que tivesse uma cara melhor do que o site que eles tinham na época, que, na verdade, era uma colagem de dois ou três sites que eles já tinham tentado fazer. Usava tecnologias ultrapassadas, parte em HTML, parte em Flash. Era um site meio sem pé nem cabeça. Continuamos atrás de patrocínios e apoios para realizar o portal maior, mas já conseguimos colocar no ar, em parceria com a Fundação Oscar Niemeyer, esse site menor. Os principais desafios foram lidar com uma figura tão grande como a de Oscar Niemeyer, tentar apresentar uma interface que não fosse óbvia e que tentasse vender um pouco da ousadia que o próprio Niemeyer apresenta na arquitetura dele. Além de alguns desafios internos, como utilizar algumas tecnologias presentes na rede, integração com serviços já existentes. E fazer um site em Flash com uma área administrativa que o próprio pessoal da Fundação conseguisse atualizar, tanto no próprio timeline de obras, da vida e do contexto, como na parte de notícias. WD Na divulgação oficial do trabalho, ficamos sabendo que, até então, o site em construção recebia uma média de seis mil visitas diárias. Do lançamento da nova versão ao dias atuais, quais foram os resultados obtidos com o trabalho desenvolvido? Que tipo de dados e números a Caos! costuma mensurar? CAOS! Triplicamos o número de acessos. Está previsto para, muito em breve, ser lançada a versão bilíngue do site. Vai ser essa mesma ferramenta, esse mesmo site, só que em português e inglês, o que deve expandir ainda mais o número de visitas. Tivemos uma boa repercussão na mídia e uma série de elogios que colhemos por conta desse trabalho. Algumas críticas, claro, mas tivemos muitos elogios. Achamos, então, que para a Fundação foi muito bom porque, hoje em dia, eles têm um trabalho mais consistente dentro da rede e para a gente também foi bastante positivo, enquanto estúdio. Trabalhamos com o Google Analytics para mensurar visitas e a qualidade, além de certos aspectos técnicos de quem está visitando, como tempo, curva de crescimento e declínio de determinado projeto. Fazemos checagens em determinadas redes sociais, como Facebook e Twitter, principalmente, através de buscas sobre a repercussão de determinados projetos nessas ferramentas. É assim que mensuramos a capilaridade que um projeto tem na rede

e o potencial que ele tem para se desenvolver mais. WD Outro detalhe interessante é que o site oficial do arquiteto atrai

a visita de usuários de diferentes países, como Espanha, Argentina, Portugal, Japão, Estados Unidos, Rússia e Itália. Assim, como falado anteriormente, será desenvolvida uma versão em inglês. Diante da experiência, como se preparar no momento de conceber um ambiente para mais de um idioma? Qual o impacto que esta tarefa acarreta para a produção de um projeto? CAOS! O site está no ar com a versão somente em português, mas ele foi concebido, desde o primeiro momento, para ser bilíngue. Então, a engrenagem, a estrutura dele já está toda pronta para isso. Só estamos aguardando o término da tradução do conteúdo para inglês. Agora, como se preparar para isso? É fazer um briefing claro com o cliente porque se for para ele ser bilíngue ou multilíngue, é necessário que seja concebido desde o início para atender a esse objetivo. Você já começa a escrever o site, a base de dados dele, e até mesmo a desenhá-lo, levando isso em consideração. Fazer isso depois, principalmente em um ambiente da complexidade do site do Niemeyer, seria bem mais doloroso e bem mais dispendioso. Quanto ao impacto, fazer um site bilíngue não é fazer dois sites, mas também não é só duplicar o conteúdo. Nossa ideia é fazer com que essa tradução aconteça dentro do mesmo arquivo e com fluidez, de forma que o usuário não precise recarregar o site para ter outro conteúdo. No caso do Niemeyer, é a forma que achamos mais elegante: o usuário pode trocar de conteúdo sem precisar trocar de seção, simplesmente uma língua sai para dar lugar à outra com o que foi demandado. WD No descritivo deste trabalho, vocês afirmam que o objetivo foi

desenvolver uma interface lúdica, interativa e de simples manuseio. Para atingir estes objetivos, que tipo de testes de usabilidade vocês procuraram aplicar para garantir a facilidade de uso? CAOS! Um projeto dessa dimensão, e com o aporte financeiro que ele tinha, não permitiu que fizéssemos testes de usabilidade em maior escala. Apenas com as pessoas envolvidas no projeto, da Fundação Niemeyer, e com amigos e pessoas próximas. Assim, fomos tendo respostas, fazendo pequenas alterações no desenho e tentando fazer a coisa ficar mais fácil ou mais difícil. Nesse projeto, em termos de usabilidade, resolvemos assumir certo risco e propor algo que não fosse tão conhecido, de modo que a pessoa olhasse e não conhecesse de imediato aquele tipo de ambiente. Tentamos fazer algo que fosse fácil, mas na medida em que a pessoa passasse um tempo ali e experimentasse, que ela pudesse intuir rapidamente como aquele universo funciona e se comporta. WD O design de interfaces acabou se inspirando em uma linha do tempo para apresentar as 60 obras disponíveis atualmente no acervo digital. Diante da considerável quantidade de conteúdo apresentado pelo site, quais foram os fatores necessários para se definir uma arquitetura de informação adequada do ambiente? 77 > 05/10 | webdesign |

CAOS! A divisão que ficou nítida desde o início do projeto foi entre

a área institucional, que apresenta conteúdos sobre contatos, texto institucional sobre a Fundação Oscar Niemeyer e notícias; e, do outro lado, o acervo que seria o que daria sentido ao site. Como caminhávamos para apresentar um site menor, com um recorte dessas quase 600 obras, entre construídas e não construídas, o próprio Niemeyer, junto com o pessoal da Fundação, já vinha trabalhando nessa lista das 60 obras mais importantes. Até por conta da experiência com o site da Casa Lúcio Costa, vimos que era muito importante para esse tipo de projeto, contextualizar ele histórica, cronológica e até geograficamente. Ele ia ficar mais rico e mais potente para as pessoas entenderem. Definimos que, ao entrar no site, a primeira coisa que a pessoa iria se deparar já era com o acervo. Tínhamos essa ideia da linha cronológica e acabamos construindo o site dessa forma: com a área institucional de um lado e a do acervo de outro, que abrangia uma seção especial, com características mais avançadas e mais complexas.

CAOS! Por se tratar de Oscar Niemeyer, tentamos fazer com que o universo tipográfico utilizado no site também remetesse ao Modernismo. Então, fizemos uma pesquisa tipográfica de fontes que tinham essas características, como a Futura, por exemplo, que foi a fonte que utilizamos no site da Casa Lúcio Costa, e que também evoca um espírito de uma época. Acabamos chegando na News Sans, que tem uma família bastante extensa, o que tornou confortável para construirmos um site que tivesse diversas hierarquias visuais entre as fontes. O fato de a família ser grande ajudou por isso. Ela era bastante simples, direta e tinha uma boa legibilidade de tela. E foi assim que chegamos à escolha da fonte a ser utilizada no site.

WD Falando ainda sobre o conteúdo, que apresenta textos, imagens e vídeos, além das informações envolvendo a trajetória profissional de Oscar Niemeyer, são relacionados também fatos históricos. O que foi preciso para selecionar, tratar e editar todo este material? CAOS! Nesse ponto, o nosso trabalho foi até definir e construir essa ideia, junto com o pessoal da Fundação Oscar Niemeyer, de que a gente queria contextualizar o acervo que seria apresentado. Fazer isso a partir de fatos históricos que aconteceram na vida do próprio Oscar Niemeyer, fatos históricos no Brasil e no mundo. Definido isso, quem fez todo esse trabalho de pesquisa e gerou todo esse conteúdo foi o pessoal da Fundação Oscar Niemeyer. Enquanto a gente trabalhava no design e na programação do site, eles estavam editando e construindo todo esse conteúdo. É importante falar no nome da Fernanda Martins. Ela foi a pessoa que, dentro da Fundação, fez grande parte, ajudada, com certeza, por outras pessoas de lá, mas que capitaneou esse processo de execução do conteúdo que ajudou a tornar o site tão interessante e rico.

WD Já em termos de combinação cromática, as interfaces apresentam tonalidades de cinza e as cores mais vivas só aparecem na visualização de algumas fotos. Por que vocês utilizaram este tipo de esquematização de cores? CAOS! Quando estávamos desenhando o site, decidimos fugir um pouco do aproveitamento dos croquis do Niemeyer, evitar traço branco e fundo preto, por exemplo, ou traço preto em fundo branco, que é muito usual em todos os trabalhos gráficos sobre a obra do arquiteto. Optamos, então, por aproveitar a textura do principal material que ele usa em suas obras: o concreto. Assim, decidimos que o fundo ficaria em concreto. Pensamos até em fotografar esse concreto a partir das obras dele mesmo, no MAC, por exemplo. Mas, no final, resolvemos remeter a esse concreto no universo cromático também, trabalhando os tons de cinza. A pesquisa iconográfica foi bastante interessante: tinham imagens muito bonitas, tanto preta e branca, como coloridas. E resolvemos deixar que as obras falassem por si só, quer dizer, que a representação fotográfica das obras do Niemeyer falasse também. Utilizamos traços mais clean, talvez, mais chique. E que tudo fosse apresentado de forma que não ficasse cansativo para poder se perpetuar por um pouco mais de tempo no ar.

WD A tipografia utilizada nos elementos textuais do site está baseada em uma família de fontes sem serifa. Quais foram os estudos feitos para se definir as características na aplicação da tipografia do site?

WD Um dos diferenciais deste projeto é a integração da ferramenta Google Maps, que possibilita ao usuário “localizar geograficamente as obras em um mapa mundi interativo e observá-las a partir de fotos

Ao clicar em uma obra específica, o usuário consegue visualizá-la através do Google Maps

| webdesign | 77 > 05/10

de satélite”. Por que vocês decidiram utilizar esta ferramenta? CAOS! Como estávamos contextualizando as obras do Niemeyer que iríamos apresentar nesse acervo cronológico, achamos também que, pela extensão geográfica que a obra dele abraça - ele tem obras em quase todos os continentes -, que era necessário apresentálas visualmente. Se a gente estava, então, trabalhando com esses pequenos quadrados que representavam cada obra dele, poderíamos organizá-los cronologicamente, mas também geograficamente. Para isso, recebemos da Fundação a listagem das obras e dos itens a serem inseridos sobre a vida dele, cadastramos no Google Maps para saber a latitude e longitude de cada um deles, e depois integramos isso com o Flash. Deu certo trabalho, mas o resultado foi bastante positivo. Poder visitar uma obra do Oscar Niemeyer, clicar nela, consultar um texto que ele mesmo escreveu sobre a obra, e ainda vê-la geográfica e fisicamente por uma foto de satélite, traz uma riqueza e uma proximidade muito grande entre o usuário e toda a possibilidade que ele tem de experimentar essa obra pela rede, sem visitá-la de forma real. WD A inserção do aplicativo do Google Maps ressalta um ponto

importante sobre o uso de ferramentas administradas por terceiros. Como vocês procuram analisar esta questão para evitar qualquer tipo de problema no funcionamento de um projeto? CAOS! Temos trabalhado, cada vez mais, tanto nesse projeto, como em outros, a integração dos sites que executamos com ferramentas externas. Não tem por que inventarmos determinados serviços que já foram muito bem implementados por terceiros, e que podem até trazer visitação e agregar qualidade ao nosso trabalho. É necessário você pensar bem qual ferramenta vai integrar ao seu projeto. Se for bastante estável, você pode confiar. Não pode é fazer integrações com serviços que sejam frágeis, ou que vivem caindo. WD Além do Google Maps, é possível perceber a aplicação do Flash e do plugin SWFObject no site. Quais foram os parâmetros aplicados pela Caos! na hora de se definir as tecnologias de desenvolvimento? CAOS! Temos uma tradição em desenvolver vídeos em Flash, porque consideramos que isso traz mais liberdade para o design que queremos desenvolver e para as experiências que queremos que sejam provocadas pela rede. Então, isso já foi um parâmetro para nós. E, em relação mais às engrenagens da programação e aos pequenos detalhes, o Victor Fusco, que é o nosso engenheiro de software e de programação, é o responsável por tomar as decisões nesse sentido. Ele está sempre atualizado, estudando para ver o que, em um determinado momento, é o ideal para usarmos, dentro das possibilidades que temos de execução e implementação.

pelos usuários e pela própria Fundação. Isso é natural de ocorrer, principalmente em sites mais complexos, por conta das diferenças de ambientes em que eles são consultados e expostos. Por outro lado, esse site foi todo construído com uma ferramenta de administração de conteúdo, desenvolvida exclusivamente para ele. A administração do conteúdo, desde o momento em que ele foi lançado, é feita diretamente pela Fundação Oscar Niemeyer, num ambiente HTML simples para poderem amputar informações, tanto na linha do tempo quanto na seção de notícias. WD Para finalizar, quais as consequências diretas e indiretas que um case de grande porte traz para o portfólio de um estúdio de médio porte? Como vocês procuram divulgar o trabalho do estúdio? CAOS! As consequências diretas são a exposição do nosso trabalho e um número maior de pessoas tendo acesso a ele. Tivemos um boom de visitas quando colocamos o site do Niemeyer no ar. Até hoje, temos um grande número de visitas mensais, que chegam através do site do Oscar Niemeyer. São interessados em querer saber quem fez e em conhecer melhor o nosso trabalho. Fazer um trabalho desse porte, de certa forma, melhora até o nosso relacionamento com outros clientes, porque eles passam a confiar mais no trabalho que a gente faz por saberem que fomos escolhidos para criar um trabalho dessa importância. Então, conseguimos ter um pouco mais de liberdade para poder desenvolver nossas ideias e provocar, experimentar e forçar um pouco mais, sempre com determinados limites. Procuramos divulgar o nosso site, através das redes sociais, principalmente no Twitter e no Facebook, e postando notícias no próprio site. Lá, tem uma seção de notícias sempre atualizada. Enviamos também, mensalmente ou bimestralmente, um informativo on-line, via e-mail, sobre as últimas novidades e sobre o que a gente está fazendo para nosso mailing que foi “levantado” com o passar dos tempos, com contatos de clientes, parceiros, amigos, interessados, pessoas que trabalharam conosco, entre outros. Mas, hoje em dia, o trabalho nas redes sociais é bastante positivo e traz bons frutos. No caso do Niemeyer, resolvemos trabalhar também com uma assessoria de imprensa, a Peteleco - Impulso em Comunicação, que fez um trabalho muito bom, foi parceira, vestiu a camisa do projeto e que teve bons frutos também. O site teria uma exposição natural por conta do nome do Niemeyer, mas com o trabalho da assessoria de comunicação conseguimos divulgar o nosso nome, mostrando que a Caos! foi quem executou o projeto do Niemeyer, qual foi a nossa real intenção. E a Peteleco deu conta com louvores do serviço.

Ficha Técnica WD Diante da característica mutável do ambiente web, sabemos que

o trabalho de criação e desenvolvimento de projetos digitais e interativos não se encerra em seu lançamento, apresentando um forte teor de “trabalho em progresso (work in progress). Do que foi pensado inicialmente e após a publicação do trabalho, qual foi o planejamento feito por vocês para manter o site em constante aperfeiçoamento? Houve alguma alteração significativa conforme os usuários foram experimentando o ambiente? CAOS! Não houve nenhuma alteração significativa até este exato momento. O que aconteceu foram correções de budges reportadas

Diretores de criação: Pedro

Segreto

e Marcelo Alt Desenvolvimento: Diogo

Lean, Victor Fusco e Jeanne Silvares

Estagiária: Natália

Sayuri

77 > 05/10 | webdesign |

CONCEITUAL

NÍVEL MÉDIO

Tecnologia em Foco

DESIGN DE INTERFACES PARA CMS’S

ites são produtos que saem do processo artesanal e se tornam cada vez mais industriais, sem perda de qualidade. Esta foi uma das frases proferidas por Érico Andrei, da Simples Consultoria, durante a reportagem “Como se preparar para escolher um gerenciador de conteúdo” (http://tinyurl.com/77-tecno-1), publicada na edição 33 da Revista Webdesign. Em relação a este cenário descrito pelo especialista, podemos apontar os sistemas de gerenciamento de conteúdo (CMS) como um dos principais motivadores dessas transformações. Além delas, eles causaram também mudanças no processo de criação e de desenvolvimento de projetos digitais. “A principal foi oferecer uma plataforma simples de edição do conteúdo do site, funcionalidade esta requisitada por quase todos os clientes. Como todos querem ter independência para atualizar o conteúdo, sem depender de contratos mensais de atualização, os CMS’s abriram muitas portas para designers produzirem sites rapidamente com baixo custo, sem depender de programadores para desenvolver ferramentas de edição”, afirma o designer, programador e empreendedor digital Humberto Oliveira (http://holiveira.com). Para Marcello Manso (www.marcellomanso.com.br), designer de interfaces da Petrobras, outro ponto a se ressaltar envolve a economia de tempo. “Os gerenciadores de conteúdo promovem, entre outros benefícios, um ganho de tempo muito grande para o designer, pois a maioria deles possui uma vasta biblioteca de plugins e templates que podem ser usados e customizados em seu projeto. O fato de poder utilizar com facilidade todas essas ferramentas prontas dá ao designer tempo de se focar mais em outros lados do projeto, como interatividade e usabilidade, pois ele sabe que estará contando com o suporte de um gerenciador robusto e que dará ao seu cliente autonomia sobre o conteúdo.” INFLUÊNCIAS DO DESIGN

Atualmente, temos uma lista variada de opções (http://php.opensourcecms.com) quando falamos de gerenciadores de conteúdo. No momento de se definir qual sistema utilizar, quais influências o designer de interfaces vai exercer neste processo de escolha? “Existem diferentes gerenciadores para diferentes necessidades (blogs, e-commerce, sites institucionais etc.), e isso influencia diretamente a escolha do designer. Ele deve conhecer o funcionamento dos principais gerenciadores do mercado para que possa preparar o seu projeto tendo em mente o CMS em que ele irá rodar. Esse planejamento é importante justamente para que o designer não tenha a sua interface prejudicada por alguma limitação do CMS escolhido”, orienta Marcello. Além destes fatores, Humberto ressalta a importância de outros dois critérios: popularidade e flexibilidade. “A popularidade faz com que um determinado CMS tenha um grande ecossistema de plugins, temas e fóruns onde é possível tirar dúvidas sobre o seu funcionamento. Além disso, por ser popular, as chances de o seu cliente já saber operá-lo é maior, o que facilita o trabalho de treinamento. E, por último, mas não menos importante, é a flexibilidade na hora de implantar os layouts. O CMS não deve impor uma estrutura rígida e sim ser maleável o suficiente para se adaptar aos mais diferentes tipos de design.” DETALHES NA CRIAÇÃO

No artigo “Design for CMS-Powered Web Sites” (http://tinyurl.com/77-tecno-2), Ryan Cramer destaca algumas boas práticas no design de interfaces para CMS’s. Dentre elas, ele afirma que o designer precisa pensar igual a um arquiteto, pois as interfaces precisam se adaptar a um ambiente de conteúdo extremamente dinâmico. Para o consultor e diretor de arte Agni (www.agni.art.br) , o profissional deve pensar sempre na

| webdesign | 77 > 05/10

experiência do usuário. “É essencial que, na hora de projetar uma interface, sejam definidos mapas mentais representando a forma que o usuário irá interagir com o produto, tanto no momento do lançamento quanto em futuras adequações. Dessa forma, no momento de definição dos fluxos de navegação e wireframes, assim como da criação de uma boa pregnância visual do projeto gráfico, devemos estar atentos tanto no que diz respeito à flexibilidade da interface quanto na escalabilidade do CMS. Na evolução natural que o projeto possa vir a ter, desde a inclusão de novos módulos de conteúdo, novas formas de orientação na navegação local e global, menus contextuais de acordo com o perfil do usuário ou outras ferramentas adaptativas, o maior desafio é manter uma sintonia entre as possíveis extensões da interface com a capacidade de implementação de novos portlet’s ou widget’s pelo CMS em uso, de forma que os diferentes objetivos do site sejam sempre facilmente atingidos pelo usuário.” “Para que um projeto interativo na internet tenha sucesso, é necessário criar a melhor experiência possível para o usuário, utilizando todas as funções e as potencialidades dos gerenciadores de conteúdo. Um design bem elaborado, com uma interface fácil e intuitiva, faz com que os usuários queiram interagir mais com o projeto e consequentemente visitar mais conteúdos do site. Um dos maiores desafios na aplicação do design de interfaces é quebrar a estrutura básica dos gerenciadores de conteúdo e propor novos formatos. Muitas vezes, um vídeo, uma imagem ou um áudio comunicarão muito mais com o cliente do que apenas o formato básico oferecido pelo sistema de gerenciamento, geralmente textual”, acrescenta Thiago Melo (www.profissaoweb.com), coordenador de design de informação do Blog do Planalto (http://blog.planalto. gov.br) na Presidência da República do Brasil. Para finalizar este assunto, o designer de interação Geovane Rodrigues (www.geovanerodrigues.com) alerta para alguns dos erros mais comuns. “O uso de templates sem observar a necessidade real do cliente. Além disso, podemos apontar a falta de planejamento e entendimento do objetivo do projeto, onde o designer por si só acaba criando estruturas altamente complexas que, às vezes, não são suportadas adequadamente pelo CMS ou acabam tendo um custo muito elevado para serem implantadas. Também é um erro não levar em consideração quem irá administrar o conteúdo, não definindo regras claras para inserção da informação e o cliente não acabe levando um susto quando o texto de uma pequena área acabe explodindo todo o site.” CUSTOMIZAÇÃO DE CMS’S

No post chamado “Projetando a administração de um CMS: torne as interfaces mais fáceis e convidativas” (http://tinyurl.com/77-tecno-3), Rafael Marin revela alguns dos principais problemas envolvidos no design de interfaces dos sistemas de administração de CMS’s customizados, que geralmente são definidos pelo próprio programador. Pensando nisso, será preciso conhecer algumas particularidades

Quanto mais simples e intuitiva for a interface do sistema, mas fácil será a publicação de conteúdo THIAGO MELO

existentes nas opções de sistemas disponíveis pelo mercado. “Normalmente, a maioria possui um painel administrativo pronto. Porém, não há como projetar qualquer interface sem conhecer claramente as necessidades de quem irá utilizar o sistema, seja o usuário que irá navegar pelo site, ou a equipe que irá administrar o conteúdo. O WordPress possui um painel administrativo relativamente simples, porém podemos encontrar dificuldades quanto a utilização de plugins que estendem suas funcionalidades, pois normalmente não seguem o mesmo padrão de interface administrativa. No Plone, a administração do conteúdo é feita dentro da mesma interface de navegação utilizada pelos usuários, não havendo um painel de administração específico, o que divide opiniões quanto a facilidade ou confusão que isso pode gerar na administração dos conteúdos. Mesmo que a comunidade de alguns CMS’s venha demonstrando uma preocupação maior com a usabilidade e a experiência do usuário, como é o caso do Drupal para a sua versão 7 (d7ux.org), é essencial que haja uma avaliação do painel administrativo para cada projeto em específico, sendo feita um análise baseada em quem fará uso desta interface. Ao escolhermos um CMS para um projeto, devemos estar sempre atentos à flexibilidade que o sistema possui para a adaptação ou criação de um painel administrativo. O Django, por exemplo, possui uma app de administração padrão, porém ela é opcional, havendo a possibilidade de a equipe desenvolver sua própria interface de administração.” Nesta etapa, Thiago lembra que o trabalho de planejamento e de organização da estrutura do gerenciador de conteúdo não deve começar com o designer de interfaces, mas pode ser ampliado pelo mesmo. “Utilizar interfaces amigáveis, camadas com conteúdos alternativos que facilitem a navegação pelo sistema, simplificar processos em lote, organizar ações e informar sempre o resultado das mesmas ajudam e muito na organização da navegação do sistema, por mais desestruturado que ele seja. Quanto mais simples e intuitiva for a interface do sistema, mas fácil será a publicação de conteúdo.” 77 > 05/10 | webdesign |

T U TO R I A L

ANIMAÇÃO 3D: SAIBA COMO TRABALHAR COM PAPERVISION NO FLASH - PARTE 3/3 Na terceira e última parte deste tutorial, veremos uma das áreas que mais demandam trabalho e planejamento quando projetamos com o Papervision. Essa parte é a animação de interfaces e objetos 3D. O maior desafio desse tipo de projeto é que não temos uma interface ou Stage do Flash para guiar as ações em animação. Por isso, sempre é recomendável trabalhar junto com um storyboard ou, no mínimo, um roteiro descrevendo as ações necessárias para a animação. Sem o uso de qualquer um desses recursos, será muito difícil e trabalhoso encontrar a posição e o alinhamento dos objetos na interface.

O que é necessário para criar animações com o Papervision? Como você já deve ter percebido, não temos a opção de adicionar Keyframes na timeline do Flash para realizar esse tipo de animação. Assim, será necessário o uso de alguma classe personalizada para trabalhar a animação. Uma das mais usadas em conjunto com o Papervision é a classe Tweener, velha conhecida dos animadores em Flash. Essa é uma classe externa ao Flash que precisa ser copiada e instalada de maneira semelhante ao que fazemos com o Papervision. Para fazer o download, visite o seguinte endereço http://code.google.com/p/ tweener/

Logo na direita do website será possível localizar uma área chamada Feature Downloads, em que estará o link para o arquivo “tweener_1_33_74_as3.zip”. Esse é o arquivo que deve ser copiado e extraído para uma pasta no seu computador. Assim como aconteceu com o Papervision, precisamos abrir as configurações do Actionscript e adicionar a pasta em que os arquivos do Tweener foram extraídos. Com isso feito, poderemos usar as opções da classe Tweener para criar animações procedurais com os objetos do Papervision 3D. Crie um novo projeto no Flash usando ActionScript 3.0. O primeiro passo para criar uma animação usando o Tweener é importar as transições, necessárias para usar suavização de movimentos no projeto. Isso é feito escrevendo a seguinte linha: 1.import caurina.transitions.*;

Allan Brito Arquiteto especializado em design de informação, atuando no desenvolvimento de projetos usando computação gráfica 3D. Além dos projetos que desenvolve, atua como professor universitário e escritor de livros sobre computação gráfica. Para saber mais sobre o autor, visite http://www.allanbrito.com ou seu Twitter http://twitter.com/allan_brito.

| webdesign | 77 > 05/10

O objetivo dessa animação será criar um plano fora da área de visualização da câmera 3D e fazer com que o mesmo apareça se movimentando no eixo X e girando sobre o seu eixo Y. Será uma ótima introdução para um objeto pertencente à interface. Com as transições devidamente importadas, podemos passar para a criação da nossa cena no Papervision. Essa cena deve ser composta por uma Camera 3D, Viewport, Scene, Primitiva Plano e o material Wireframe. O início do código fica assim:

2.import org.papervision3d.cameras. Camera3D; 3.import org.papervision3d.render. BasicRenderEngine; 4.import org.papervision3d.scenes.Scene3D; 5.import org.papervision3d.view.Viewport3D; 6.import org.papervision3d.objects. primitives.Plane; 7.import org.papervision3d.materials. WireframeMaterial; Tudo isso é necessário para importar as classes do Papervision para o nosso projeto, sendo que depois precisaremos apenas declarar variáveis e instâncias.

16.cena.addChild(plano); 17.addChild(visao);

Antes de criar o plano usado como objeto dessa animação, podemos determinar algumas opções do material tipo Wireframe, que nada mais é do que a determinação de que esse objeto deve ser composto por linhas semelhantes a arame.

18.Tweener.addTween(plano,{x:300,rotationY: 360,time:2, transition:"easeOutBounce"});

O nome do material será arame e logo abaixo do instanciamento desse material determinamos que o mesmo deve ser visível dos dois lados do plano: 8.var arame:WireframeMaterial = new WireframeMaterial(); 9.arame.doubleSided = true; A propriedade doubleSided dos materiais é sempre configurada por padrão como falsa, fazendo com que os objetos tenham apenas um lado visível. Isso é interessante em objetos fechados como um cubo. Mas, para um plano que deve girar em 3D, o resultado seria que o mesmo ficaria invisível em alguns momentos da animação, o que não é muito bom para qualquer tipo de animação. AGORA, É HORA DE INSTANCIAR OS OUTROS ELEMENTOS DA CENA NECESSÁRIOS PARA GERAR A RENDERIZAÇÃO: 10.var visao:Viewport3D = new Viewport3D(); 11.var cena:Scene3D = new Scene3D(); 12.var camera:Camera3D = new Camera3D(); 13.var render:BasicRenderEngine = new BasicRenderEngine(); O plano deve ser criado com as seguintes especificações: 14.var plano:Plane = new Plane(arame,200,200,5,5); 15.plano.x = -1500; Depois que ele estiver declarado, podemos adicionar uma instância do mesmo dentro da cena:

Isso é o necessário para fazer com que o nosso objeto apareça na cena, sem contar com a parte da renderização. Agora, podemos declarar a parte da animação, usando o Tweener. A declaração é bem simples e segue a seguinte regra: •Tweener.addTween(nome,{parâmetros, transição}); Portanto, podemos adicionar um Tweener no plano com a seguinte declaração:

Isso determina que o plano deva ser animado em 300 unidades no eixo X e fazer uma rotação de 360 graus no eixo Y em dois segundos. A transição do tipo easeOutBounce faz com que a animação desacelere de maneira suave e passe a impressão que o plano está quicando em alguma superfície ou obstáculo no final do movimento. Para finalizar a animação, é necessário usar o evento ENTER_ FRAME em conjunto com o render do Papervision, para fazer com que o nosso plano apareça na animação. Em seguida, adicionamos as seguintes linhas de código, respeitando os nomes das instâncias criadas no início do tutorial:

19.stage.addEventListener(Event.ENTER_ FRAME, renderizar); 20.function renderizar(event:Event):void { 21.render.renderScene(cena, camera, visao); 22.} Assim que testamos o filme do Flash no ambiente de autoria, poderemos visualizar o plano se deslocando da esquerda para a direita e girando em torno do eixo Y. Para fazer animações diferentes, use outros parâmetros do Tweener como y, z, rotationX, rotationZ e outras propriedades do objeto para criar animações diferentes. Se for necessário sincronizar o movimento entre diferentes objetos, use o parâmetro delay. Agora, você já sabe como criar objetos 3D, aplicar texturas e fazer animações usando o Papervision 3D e o Tweener. Coloque os conhecimentos em prática realizando pequenas modificações e adaptações nesse tutorial, para criar interfaces 3D para seus projetos. Até a próxima! 77 > 05/10 | webdesign |

Ilustração Carolina Vigna-Marú

Toda nudez (digital) será castigada A ideia de divindade associada à amamentação vem de longe e está presente em praticamente todas as culturas. Segundo a mitologia grega, a Via Láctea foi formada com um esguicho de leite materno de Juno. Ísis amamentou Hórus, Dewaki a Krishna, Virgem Maria a Jesus. Essa profusão de leite materno sagrado para todo canto enjoa até o mais beato dos mortais. Alberto Manguel, em seu brilhante “Lendo imagens”, faz uma citação hilária de João Calvino: “Não há cidade pequena demais, nem convento [...] demasiado exíguo que não ponha à mostra um pouco de leite da Virgem [...]. A quantidade é tão grande que, se a Virgem Sagrada tivesse sido uma vaca [...], haveria de ter passado a vida inteira em árdua labuta para conseguir produzir uma quantidade tão vasta”.

| webdesign | 77 > 05/10

Literalmente, durante milênios, houve uma divisão bastante clara entre os sexos. O homem pertencia ao mundo público e a mulher ao mundo privado. Ainda temos resquícios disso no idioma: o homem público é político e a mulher pública é prostituta. Sem muita diferença, certamente dirão as línguas mais afiadas, mas ao falar mal dos políticos dão mais um claro exemplo de que a mulher pública não é respeitada. Bem resumiu Rita Lee em Pagu: “Mexo, remexo na inquisição / Só quem já morreu na fogueira / Sabe o que é ser carvão”. Então, voltando, como a mulher pertencia ao mundo privado, era considerado um absurdo representá-la nua. No entanto, temos nudez feminina desde que o mundo é mundo. O pulo do gato era que as mulheres representadas nuas não eram reais, eram divindades, figuras mitológicas. Uma Vênus nua tudo bem, porque não era uma “mulher de verdade”. Esta mentalidade perdurou durante muito, muito tempo. Mais ou menos da Grécia Antiga até o Impressionismo. Estamos falando de algo na ordem de grandeza de três mil anos. A nudez masculina, entretanto, era considerada normal e homens comuns eram representados nus. Provando que o proibido é sempre mais interessante, infelizmente a nudez masculina não é tão popular quanto à feminina. A grande virada nesta mentalidade

Em 2008, o Facebook censurou fotos e pinturas de mães amamentando, alegando que eram obscenas e removeu várias fotos de usuários

de que a mulher é restrita ao mundo privado tem data e nome conhecidos. Foi em 1863, na França. O grande evento no mundo das artes era o Salon de Paris, que acontecia bienalmente desde 1725. Era muito importante, concorrido e difícil de entrar. Édouard Manet (1832-1883) foi um dos que não conseguiu ser aprovado pelos acadêmicos curadores. Montaram, então, o Salão dos Recusados (Salon des Refusés). Manet expôs o seu recusado Le déjeuner sur l’herbe (1862). Foi um choque. Damas empurravam seus maridos para longe do quadro. Senhoritas enrubesciam à sua frente. O GRANDE ALVOROÇO foi porque Manet pintou uma mulher nua sem uma literatura que a justificasse. Ou seja, a mulher não é uma divindade, não é um ser mitológico. É uma mulher real que, como se não bastasse, ainda olha para o espectador como se estar ali almoçando nua na relva fosse a coisa mais natural do mundo. E, para piorar, os homens estão completamente vestidos. Acho que se Manet tivesse pintado o Papa em uma cena pagã não teria causado tanto furor. Naquele momento, rompia-se uma mentalidade de alguns milhares de anos. Não é pouca coisa. Existia ainda um agravante a tudo isso. O repertório das pessoas, na época, era constituído de grandes mestres. Manet faz uma referência clara - era claríssima,

na época - ao Julgamento de Paris (1515), de Raphael (1483-1520), e ao Fiesta campestre (1510), de Ticiano (1473/1490-1576). As pessoas que visitavam os salões reconheciam estas referências com a mesma facilidade que você reconhece um endereço de e-mail. Não precisava ser um estudante de artes. Leigos efetivamente sabiam essas coisas. Então, a afronta de Manet era múltipla: uma mulher real nua, em uma composição que remetia aos grandes mestres, sem qualquer tipo de justificativa literária, cercada por homens vestidos em uma ação trivial e cotidiana. Para a mentalidade da época era um grande choque. Não pense você que esta é uma questão antiga. Em 2008, o Facebook censurou fotos e pinturas de mães amamentando, alegando que eram obscenas e removeu várias fotos de usuários. Teve protesto, é claro. Na época foi criada uma petição on-line intitulada “Hey Facebook, breastfeeding is not obscene!”, que não conseguiu reverter a decisão do site. ESTA CENSURA CAUSOU bastante surpresa em muitas pessoas porque a mãe que amamenta é, ainda hoje, quase que santificada e não pode, portanto, ser compreendida como erótica ou sexual. Os defensores da censura alegam que a amamentação é um ato íntimo e particular e que pertence, portanto, ao mundo privado. Ou seja, mais de um século se

passou desde que Victorine Meurent posou para Manet e ainda temos conflito nesta área. Sob o risco de parecer um pouco mais xiita do que eu gostaria, afirmo que o conflito vai além. É um conflito de (in)compreensão do feminino. Juliana Cunha, em um dos blogs que eu mais gosto de ler, o Já matei por menos, em seu post Conclusão é para os fracos, pergunta: “Primeiro eu leio que as mulheres são apenas 5% dos presidentes de empresas, depois leio que são maioria entre os ricos. Oi? O que a gente faz? Trafica?”. Aproveito para fazer coro à Juliana e perguntar o que a sua empresa está fazendo para atender ao público feminino. Acredite, site com florzinhas ou tons pastéis não é o que precisamos.

Carolina Vigna-Marú é designer e ilustradora das antigas, do tipo que raspou fotolito com gilette e fez separação de cores no papel vegetal, mas que não é saudosista e acha tecnologia o máximo. Trabalhou com multimídia e foi SysOp de BBS. Desenvolve sites desde 1996, especializando-se em CMS e em SEO com tableless e CSS. Começou em uma editora pequena em 1982 e nunca mais parou. Gosta muito de ilustração vetorial, mas não dispensa um bom papel e lápis. Fotógrafa amadora e apaixonada por tudo que é gráfico. vignamaru@gmail.com

77 > 05/10 | webdesign |

Marketing René de Paula Jr.

Façam suas apostas Las Vegas é o tipo de lugar impossível de entender se você não analisar o que está em jogo. Não, não estou falando desse tipo de jogo, poker, blackjack e tal, estou falando daquilo que explica como é que uma cidade tão espalhafatosa pode brilhar no meio do nada. E bote nada nisso: estou falando de deserto mesmo, um deserto duro, quente e plano como uma frigideira de pedra. Da janela do hotel, Vegas parece uma colônia em Marte.

Vamos pensar em outras cidades, então. As colônias espanholas (México, Peru, Colômbia etc.) têm capitais muito semelhantes porque os colonizadores traziam debaixo do braço guidelines para construir cidades: uma praça central (o zócalo), ruas e avenidas num grid cartesiano, proximidade de rios, distância de pântanos insalubres e tal. Tudo bem definidinho pras cidades serem viáveis e funcionais. Já os colonizadores portugueses tinham outra pegada: construíram ao longo da costa, sem muita formalidade, aparentemente mais preocupados em mandar rápido para matriz nossos tesouros naturais do que em construir algo duradouro e sustentável. Leiam “Raízes do Brasil”, do Sérgio Buarque de Holanda, e vocês vão entender finalmente porque somos como somos. O que está em jogo no primeiro caso é

| webdesign | 77 > 05/10

a vontade de construir novas Espanhas, tanto é que o Fernan Cortez, reza a lenda, ateou fogo nos navios para ninguém pensar em voltar para casa. No segundo caso, o que está em jogo é a vontade de sustentar a velha Portugal, sem muita consideração pelo novo mundo. O que está em jogo em Vegas? Por que se dar ao trabalho de construir algo no deserto? Simples: a legislação de Nevada era muito mais tolerante com jogo, bebida e prostituição. No resto do país, a lei era severa pra chuchu. Por mais caro que fosse criar do zero a infra toda para Vegas, o modelo de negócio era tão lucrativo que valia a pena. Teve máfia na história, claro, lavagem de dinheiro e crime organizado também, mas isso foi nos primórdios. Agora, é limpinho :-) O que isso tem a ver com internet, afinal? Well, na minha modesta opinião,

tudo. A gente fala “cidade” sem levar em conta que existem cidades e cidades, e falamos de internet como se a internet aqui fosse como a internet de lá. Não é. Lá, internet brilha fulgurante, dinheiro não falta, grandes negócios surgem do nada. Aqui, internet é mais ou menos como São Paulo: tumultuada, cheia de riscos, cara, complicada, atravancada. São dois planetas diferentes. Estou usando Las Vegas para falar de internet porque acabo de voltar do MIX10, um evento sobre o futuro da web que acontece todo ano em Vegas. É o meu terceiro MIX já e é genial poder conhecer de perto e conversar e trocar histórias com quem faz web no mundo inteiro. NUMA DESSAS CONVERSAS, aproveitei para compartilhar com colegas de outros países histórias do mercado interativo brasileiro. Os caras ficaram impressionados: aqui é outro planeta mesmo, fazer internet aqui é completamente diferente de fazer na Califórnia, na Austrália, na Inglaterra, na Suíça... É diferente porque os custos são outros, os clientes são outros, as agências funcionam de outro jeito, a cultura é outra, o empreendedorismo tem outros desafios etc. E contei para eles como eu tive que jogar fora o “manual de instruções” importado para inventar meu próprio caminho aqui dentro. Well, e o que isso tem a ver com você? Muito. Hoje em dia, todo mundo sabe na ponta da língua as inovações do Vale do

Hoje em dia, todo mundo sabe na ponta da língua as inovações do Vale do Silício, mas pouca gente se dá conta que o que vale lá não vale aqui. Internet não é global Silício, mas pouca gente se dá conta que o que vale lá não vale aqui. Internet não é global. Nada é global. E as coisas que dão certo deram certo porque alavancaram alguma coisa local, contextual, histórica, algo único daquele lugar e daquele momento. E é isso que você deveria estar fazendo agora: analisando teu mercado, teus talentos, as oportunidades para, a partir daí, bolar algo único e inovador que transforme problemas em oportunidades, dificuldades em desafios e que se encaixe como uma luva na realidade que te cerca. É isso o que você tem que fazer e não recriar mais um clone de Twitter. COMO É O TEU MERCADO? Você tem certeza de quem são seus potenciais clientes? E se você estiver focando num segmento saturado demais,

esquecendo de um monte de empresas e pessoas que estão desamparadas interneticamente? E se, ao invés disso, você pudesse oferecer teus serviços remotos para outras cidades e países? E se o teu caminho é maior do que o lugar que você vive e partir é inevitável? E se você procurasse programas de apoio ao empreendedorismo (existe, me pergunte que eu conto)? E se você deixasse de ser maria-vai-com-as-outras e se especializasse em algo que o mercado vai demandar cada vez mais? E se você perceber que está na hora de deixar para trás o que vinha fazendo há anos? E se você parar de perder tempo procurando gente igual a você para descobrir tua diferença, tua singularidade, aquilo que te faz único? E se você investir teu tempo não em diversão inócua, mas em

experiências que te transformem? Eu não gosto de jogo, de nenhum tipo de jogo, mas uma coisa eu sei: é preciso fazer apostas. Quem não aposta joga fora algo muito mais caro que dinheiro. Joga fora oportunidades.

René de Paula Jr. User Experience Evangelist da Microsoft Brasil. É profissional de internet desde 1996, passou pelas maiores agências e empresas do país: Wunderman, AlmapBBDO, AgênciaClick, Banco Real ABN AMRO. É criador da “usina. com”, portal focado no mundo on-line, e do “radinho de pilha” (www.radinhodepilha.com), comunidade de profissionais da área. rene@usina.com

77 > 05/10 | webdesign |

Internacional Julius Wiedemann

A minha versão sobre a quarta tela Já que todo mundo escreveu sobre o iPad, e fui obrigado a dar a minha opinião tantas vezes, eu queria colocar meu ponto de vista por escrito de maneira bastante abrangente. Ainda mais agora que o produto está sendo comercializado. Mais do que isso, gostaria de colocar alguns dados que não foram sequer lembrados pela mídia em geral, que tiveram algumas falhas em analisar o novo lançamento da Apple. Muitos meios pareceram demasiadamente tendenciosos, porque serão os diretamente afetados pelo aparelho. A maioria dos artigos ficou entre o pessimismo, a proteção do “coitadinho” do Kindle e um otimismo controlado para não dar muito na cara. Para início de conversa, declaro-me usuário convicto - e de certa forma apaixonado - da Apple, para que essa pergunta não se faça necessária, mas preciso salientar também que não foi sempre assim. Comecei minha profissão usando Windows e o fiz até um momento bem avançado da carreira.

| webdesign | 77 > 05/10

Quando entrei na Taschen, em 2001, todos os editores usavam Windows e isso só veio a mudar porque como me foi encomendado um Mac (eu então editava os livros e também cuidava de grande parte do processo de design), meu chefe se deu conta de que todos também podiam usar um Mac. Hoje, menos da metade da empresa usa PCs. O flerte entre a Apple e os palm tops (ou hand pads) é antigo. Tem mais de 20 anos. O Newton, que era um excelente device, foi desenvolvido pela Apple entre 89 e 98 e teve seu sistema operacional utilizado ainda em outros aparelhos. Mas alguém se lembra dele? Bom, os jornalistas não lembraram muito. A Apple, na ocasião, estava 20 anos a frente do mercado e isso foi um grande problema. Apesar de um avanço, o aparelho não deu certo. Sua tecnologia de reconhecimento de escrita era fora de série. Produzido pela Sharp, no Japão, o Newton acabou sendo um aparelho de nicho, mesmo dentro dos usuários de Mac. No entanto, a visão da empresa, ou melhor, de Steve Jobs, já era incrível. Esse espaço no mercado me parece que sempre existiu. Porém, quando se adquire algo assim, o cálculo de custo/benefício é o mais importante para o usuário. E, dentro dessa lógica, algumas perguntas surgem imediatamente: quantas tarefas podem ser executadas? Quanto custa? Quanto de overlapping existe entre outros aparelhos que eu já possuo? Quão sincronizadas

Li comentários de que a Apple agora controla o futuro. Isso é uma asneira. Mais do que nunca, quem manda no futuro são os consumidores

estarão as informações com meus outros aparelhos? Foi só agora que a Apple conseguiu responder a essas e outras questões de maneira tão contundente. A CRÍTICA QUE MAIS OUVI SOBRE O IPAD

é de que ele é “apenas” um iPod Touch grande! Apenas? Por que então ninguém fez nada tão bom antes? Toda a discussão sobre o futuro de uma leitura e mídia móvel já acontece há anos. Admira-me, então, que empresas como Sony, HP, Toshiba, Panasonic, LG e muitas outras não terem feito nada que chegasse aos pés do iPad em todos esses anos. Agora, já é - mais uma vez - tarde para eles. E, nesse caso, temos que bater palmas para Amazon, que lançou, em novembro de 2007, o primeiro Kindle. Eles tiveram, pelo menos, a coragem de colocar no mercado algo viável, que fosse integrado com a sua estratégia de vendas on-line. O aparelho, porém, não desenvolveu rápido o suficiente e se posiciona cada vez mais como tendo apenas uma função (ou duas, se contarmos o jornal on-line). Sua tela melhorou de tamanho com o último lançamento, mas a inexistência de cor (que se especula, pode mudar com uma versão que ainda está sendo desenvolvida) diminui ainda mais as aplicações. Não que o aparelho vá morrer, mas a sua utilidade ficou agora reduzidíssima. Se ele, de repente, passar a custar 50 dólares, ainda pode ser um grande sucesso, a meu

ver. A Amazon, no entanto, certamente continuará a vender os livros on-line e terá o suporte de seu App na loja iTunes. Quem está em risco é o Kindle, não a Amazon. A outra dúvida que se coloca sobre o iPad é se ele vai atrair usuários que não tenham Mac. Nesse quesito, a resposta é mais o iTunes do que o iPad (ou mesmo o iPhone e o iPod) que ditou o sucesso da empresa com os produtos. Convergência versus conveniência. Eu defino assim a necessidade (ou, para os menos radicais, a possibilidade) de existência de um leitor intermediário como o iPad.

O futuro da quarta tela agora depende de uma combinação entre a disponibilidade de conteúdo, a capacidade dos aparelhos que estão surgindo (que são vários, é só procurar em sites de gadgets), a integração desses aparelhos com os dados que temos armazenados e, finalmente, de um preço adequado que nos deixe encorajados para comprá-los. Daqui para frente, a leitura de uma coluna como essa pode mudar drasticamente... E para melhor.

O APARELHO SE COLOCA no que está sendo

chamado de a “quarta tela”, numa alusão às outras três telas que usamos diariamente: a TV, o computador e o celular. O formato escolhido também foi apropriado para popularizar o aparelho o mais rápido possível. O uso do ePub pode acelerar a adoção porque já existem muitas lojas vendendo nesse formato e isso permitiria que muitos títulos já comprados fossem imediatamente usados no novo aparelho. Li comentários de que a Apple agora controla o futuro. Isso é uma asneira. Mais do que nunca, quem manda no futuro são os consumidores. Nós queremos soluções, e quando são entregues, claro que as utilizamos. A velocidade de mudança hoje é enorme e ser líder de mercado agora não garante a ninguém uma liderança daqui a dez ou 20 anos.

Julius Wiedemann Nasceu e cresceu no Brasil, onde estudou Design e Marketing (sem terminar) até que teve a oportunidade de ir para o Japão. Trabalhou como designer de revistas e jornais até se tornar editor de arte (e posteriormente editor) de uma editora japonesa. Em 2001, a editora alemã TASCHEN (www.taschen.com) o contratou para ser o editor responsável pelas áreas de design e pop culture. Por lá, desenvolve o programa de títulos nas áreas de propaganda, graphic design, web, animação etc. letschat@juliuswiedemann.com

77 > 05/10 | webdesign |

Webdesign Luli Radfahrer

Turistas vs. viajantes Viajar é sempre muito bom. A não ser nos chatos casos daquelas viagens de negócios histéricas em que se passa mais tempo a caminho do que no destino, é sempre bacana mudar de ares. Fora de sua cidade natal, as pessoas costumam se comportar essencialmente de duas formas: ou pendem para o lado turista ou para o viajante. A diferença é muito simples: o viajante é aquele que procura absorver a cultura do local que visita, enquanto o turista quer, sempre que possível, levar consigo o seu estilo de vida. Todos nós temos nossos momentos “turista e viajante” e ter essa diferença em mente pode ser fundamental quando se pretende desenhar uma nova experiência.

Enquanto o viajante parece ser incansável e não medir esforços para acumular o máximo de experiências que conseguir, o turista costuma ser preguiçoso e pouco disposto a fazer qualquer concessão. Um viajante não se importa com o desconforto de um camping, um turista não se satisfaz com menos do que um resort. Antes que você entre em qualquer espécie de juízo de valor, defendendo este ou aquele estilo de vida, recomendo uma análise um pouco mais detalhada. Quem tem bebês ou filhos pequenos,

| webdesign | 77 > 05/10

por exemplo, precisa de uma estrutura melhor, por mais que curta um “mochileiro way of life”. Para quem está em viagens de negócios, energia elétrica, telefonia e acesso à rede costumam ser muito mais do que futilidades. Casais em lua de mel ou viajantes idosos talvez prefiram um programa mais tranquilo, que não demande tanta energia. Além disso, por mais que a visita a culturas ou lugares remotos seja fascinante, ela pode tomar muito mais tempo do que se tem

disponível, e isso pode tornar algumas comodidades essenciais. Até aí, nada de novo. Como nenhum de nós trabalha na indústria de turismo, toda essa divagação poderia ser uma grande perda de tempo. Ela é, no entanto, extremamente importante se você levar em conta que o que se desenha em ambientes digitais não são páginas, telas, ícones ou botões, mas experiências. É claro que nem mesmo o diretor de marketing mais delirante espera que o seu website seja considerado algo tão importante quanto uma viagem, mas não se pode negar que ambos podem, sim, ter várias características em comum. Viagens, afinal, também são experiências. Por mais que já tenham quase meio século de existência, os meios digitais ainda são os caçulas dos meios de comunicação. Nessa condição, eles ainda estão “pegando o jeito” de conversar com seus usuários. Para complicar a situação, as mudanças tecnológicas ainda estão longe de se assentarem, a ponto de ser difícil para uma forma de interação permanecer ativa cinco ou seis anos depois de inventada. O RESULTADO DESSA TRANSFORMAÇÃO

constante é que ninguém sabe direito o que vai encontrar quando acessa um site, clica num link, começa um game ou abre um aplicativo no computador ou celular. E nem sempre essa surpresa é desejável. Quem nunca se irritou com aquelas interfaces

O que se desenha em ambientes digitais não são páginas, telas, ícones ou botões, mas experiências

bonitinhas, mas ordinárias que proteste. O melhor exemplo desse conflito de interesses está no uso constante do formulário de busca em praticamente qualquer site que se entre. Se você nunca pensou a respeito, veja como a experiência de busca é ruim: é preciso digitar o que se procura, esperar que a página de resultados carregue, analisar a lista de links que aparece, ver qual parece mais aceitável, clicar nele e, se der muita sorte, acessar o conteúdo desejado. Caso contrário, a experiência se repete até que se desista dela. Não acredito que ninguém goste de verdade de usar o formulário de busca. Acho que seu uso é pragmático: considerando que cada um é livre para desenhar seu site como quiser e que, da mesma forma, o usuário não tem a obrigação de adivinhar a estrutura de um serviço se não estiver a fim, a busca acaba sendo a solução menos pior. O MUNDO DIGITAL PERMITE, pela primeira vez na história da comunicação, que a forma seja determinada pelo conteúdo. Ou melhor, pela experiência. Se o que o usuário deseja é algo simples, prático e direto, qualquer serviço que não satisfaça suas necessidades pode ser muito bacana, mas será insatisfatório. Quem quer home banking não está interessado no que o banco faz de bacana na área social, por mais que isso seja, realmente, muito bacana. Uma boa mensagem dita em um

momento inadequado é uma mensagem inadequada, mesmo que seja importante. Pense em Google. Em Twitter. Em sites de comparação de preços. Em Imposto de Renda. Em fóruns. Em Blackberry. Eles são ambientes de turistas, não de viajantes. A experiência tem que ser rápida, confortável, direta e simples. Ninguém tem paciência para ouvir - pior, ninguém está minimamente interessado em saber - as razões esotéricas que levaram seus criadores a estabelecerem essa sequência de telas, ícones e botões. Nada disso. O que se quer é direto, não há tempo para olhar a paisagem. Sites de e-commerce bemsucedidos, em sua maioria, costumam cuidar das transações. As ofertas adicionais e os comentários de quem comprou podem até estar visíveis, mas não podem, de jeito nenhum, interromper a experiência. Agora, pense em sites de filmes. Em blogs. Em portfólios. Em comunidades. Em jogos. A experiência que se deseja ali é outra. Ela leva um tempo diferente, demanda uma atenção diferente, tem uma complexidade maior e é muito menos dependente da tecnologia do que de uma intervenção humana, seja em design, em roteiro ou em interação. Essas experiências costumam demandar a energia e a curiosidade de um viajante, e quanto mais ricas e complexas, mais gratificantes costumam ser. A maioria dos produtos digitais não é

destinada a turistas nem a viajantes. Seu design é burocrático, a experiência que desenvolvem é simplória. É uma pena, principalmente se considerarmos que mesmo antes de visitá-los, seus usuários já sabem o que esperam. Se você não pode ou não quer surpreendê-los positivamente, tente pelo menos compreendê-los. Tenho certeza que eles apreciarão a gentileza.

Luli Radfahrer PhD em Comunicação Digital, já dirigiu a divisão de internet de algumas das maiores agências de propaganda e portais do Brasil. Hoje é professor-doutor da ECA-USP e consultor independente, com clientes no Brasil, Estados Unidos e Oriente Médio. Autor do livro ‘Design/ Web/Design:2’, posta textos semanais sobre criatividade, design de interfaces e inovação no blog, http://www.luli.com.br. webdesign@luli.com.br

77 > 05/10 | webdesign |

Patrocinadores:

| webdesign | 77 > 05/10