40 :: Webdesign

DIAGRAMAO NA WEB
Talvez seja atravs das lembranas que passamos a ter noo da importncia de algumas aes vividas durante a nossa infncia. Quem no se lembra dos deliciosos desaos propostos pelos jogos de quebra-cabeas. Alm de carregar uma essncia divertida, tal experincia serve tambm como um timo exerccio de raciocnio para quem est disposto a combinar diferentes peas para com elas formar um todo, que pode ser uma gura, um mapa, uma frase etc., conforme nos ensina a denio do Dicionrio Houaiss. Para quem escolheu o design como campo de atuao prossional, este cenrio de desaos ganhou certa continuidade, desta vez trazendo uma srie de responsabilidades juntas. Anal, o verbo diagramar uma conjugao quase constante no cotidiano de produo da rea. Mais uma vez, vamos recorrer ao Hoauiss para denirmos essa ao, que consiste em dispor gracamente os elementos (p.ex., textos, ttulos, ilustraes, legendas, os, vinhetas etc.) que devero fazer parte de (uma publicao). Com o surgimento dos dispositivos tecnolgicos, esta prtica acrescentou mais um meio para apresentao de seus trabalhos. Em termos de transformaes no modo de produo, Rafael Schouchana, gerente de arquitetura de informao na Sapient Interactive (www.sapient.co.uk), destaca inicialmente que muitos princpios de diagramao a que estamos habituados no design de impressos continuam a ser aplicados nas mdias digitais. Segundo ele, possvel at listar alguns desses princpios: - A orientao de leitura em pases ocidentais continua sendo do canto superior esquerdo ao canto inferior direito da pgina; - A aplicao de grid na web tambm uma das principais heranas da diagramao de revistas e jornais; - Hierarquia da informao; grcos consistentes. impressos, orienta.

OS DESAFIOS NA CRIAO DE INTERFACES FLEXVEIS E MANIPULVEIS

- Os ndices comparam-se ao mapa do site, assim como

editorias podem ser comparadas s sees; - Estilos so denidos para manter elementos No h como negar que a experincia do usurio, ao interagir com um dispositivo digital, faz com que devamos levar em considerao certos aspectos inexistentes em Assim, como ressalta Jos Ricardo Cereja, coordenador de ps-graduao do Instituto Infnet e gerente de projetos web da Strenna Comunicao Integrada, a tecnologia ampliou as possibilidades de organizao em dois nveis. Primeiro em funo da agilidade e multiplicidade espacial que os softwares trouxeram; e segundo - e mais importante - pelo conceito de interatividade e as animaes que se incorporaram como elementos do processo de diagramao. Agregam-se ento a arquitetura de informao e a usabilidade como campos de estudo do que podemos chamar de diagramao digital. Os princpios bsicos de diagramao se mantm. Em qualquer tipo de interface, contraste, ritmo, harmonia e equilbrio esto sempre presentes na composio. O que muda que, em meios digitais, as interfaces normalmente precisam se adaptar a devices diferentes. Alm do que, num mesmo ambiente, voc pode ter interfaces uidas que se adaptam a interferncia do usurio, completa Lucas Hirata (www.lucashirata.com), senior designer da HUGE.

MANIPULAO DAS INTERFACES

A possibilidade de o usurio alterar a apresentao visual da interface de um site, com o deslocamento e/ou fechamento das caixinhas oferecidas previamente pelo ambiente, j uma realidade em alguns projetos, como o iGoogle (www.google. com.br/ig) e o Netvibes (www.netvibes.com).

capa - Diagramao na Web :: 41

Ou seja, este modelo de interface praticamente cria um navegador dentro do navegador, como se fosse uma espcie de metalinguagem navegacional. Diante disso, o designer precisa analisar alguns aspectos na hora de se pensar a diagramao de projetos disponveis em um meio que permite extrema manipulao de seus elementos. Esse modelo de site customizvel uma tendncia que veio para car. Nele, o trabalho do designer passa a ser menos autoral. O desao pensar em uma diagramao que deve comportar, da melhor maneira possvel, uma srie de variaes de acordo com a escolha do usurio. Antes de pensar na diagramao de um projeto dessa natureza, preciso analisar criteriosamente todas as possibilidades que sero oferecidas para os usurios nais e suas possveis composies. O designer deve denir padres e projetar para um contedo varivel. So essas possveis variaes do contedo que devem ser levadas em conta no design dos padres, explica Mrcia Lunardi (www.marcialunardi.com), arquiteta de informao e designer da CPM Braxis. Outra questo importante na criao de interfaces exveis envolve a preocupao com a sua usabilidade. Netvibes e iGoogle so agregadores de contedo distribudo via RSS feed. No os vejo como navegadores dentro de navegadores, mas como uma homepage (ou um hub) personalizada. Grandes empresas de mdia, como a BBC, vm aderindo ao modelo de agregao de contedo, j que um dos grandes desaos hoje em dia na internet no somente indexar, como tambm distribuir contedo para o usurio. O que estes sites se propem a fazer dar liberdade e exibilidade para customizar a pgina com o objetivo de deix-la relevante ao usurio. O desao, porm, identicar o quo exvel a sua interface pode ser sem que a usabilidade seja afetada. Como podemos perceber nos sites mencionados, apesar de se poder customizar bastante, existe uma exibilidade controlada, que foi planejada e testada pela equipe de design. Se olharmos essas interfaces com ateno, veremos que aspectos como a grid (e suas variaes), a navegao principal do aplicativo e o modelo de interao so pr-denidos. A customizao se d mesmo na rea onde o contedo apresentado e no visual aplicado pgina, arma Rafael. O maior desao fazer com que o usurio no se perca diante de suas intervenes. Um nmero excessivo de interaes, numa mesma interface, pode provocar uma aparncia por demasiada complexa. O resultado nal no deve prejudicar a execuo das tarefas primordiais, alerta Lucas. Sobre os limites de se estimular tal dinmica, e como isso vai afetar o trabalho de diagramao, Mrcia diz que possvel

desenvolver modelos mistos, onde iro existir contedos, ou caixinhas, sugeridas pelo site e outras para serem escolhidas livremente. O contedo sugerido seria a viso editorial da ferramenta. O que eles consideram importante que o usurio conhea. importante que o usurio seja informado e estimulado a conhecer coisas novas sempre. preciso saber identicar que elementos da interface devem ser xos e quais podero ser manipulados. So os elementos xos e os aspectos mencionados anteriormente que faro a interface fcil de usar. J o contedo ca a cargo do usurio denir o que mais relevante para ele. Uma dica: sets pr-denidos de widgets e contedo ajudam o usurio a entender o funcionamento dessas interfaces no seu primeiro contato com elas. mais fcil para o usurio customizar algo que j exista do que algo que precise ser pensado do zero, diz Rafael.

ARQUITETOS DE INFORMAO E DESIGNERS EM SINTONIA

No processo de diagramao de interfaces digitais, a arquitetura de informao surge como um conceito fundamental para garantir a eccia do trabalho. Ainda comum pelo mercado a etapa de arquitetura anteceder o ato de diagramar. Porm, esta uma realidade que comea a ser transformada gradativamente. No penso que a arquitetura de informao seja uma etapa que anteceda a diagramao. Ao contrrio, os dois mtodos so convergentes e quase se confundem. A arquitetura de informao, a meu ver, pode ser considerada parte integrante do processo de diagramao digital. Dessa forma, no h contrapontos entre o arquiteto de informao e o designer. Ambos devem trabalhar em conjunto, pois a formao destes prossionais compreende as mesmas bases conceituais, arma Cereja. Como destaca Rafael, por ser uma atividade multidisciplinar, essa separao varia entre companhias e prossionais. Na minha experincia, sempre existiu uma grande inuncia do arquiteto de informao na diagramao das interfaces, talvez pelo

42 :: Webdesign

fato de muitos arquitetos, como eu, terem formao em design grco. Descrevendo de uma forma simplicada, o arquiteto de informao responsvel por analisar o cenrio atual (caso esse exista), identicar os requisitos do cliente e do(s) usurio(s) nal(is), entender (e desaar) as limitaes tcnicas e a sim propor no s a organizao do contedo (mapa do site) como tambm um modelo de navegao que facilite a descoberta desse contedo. E a organizao do contedo no se restringe somente a criar o mapa do site e a navegao, mas tambm importante denir a hierarquia da informao em cada pgina ou template criado. J vi muitas vezes, no passado, uma separao bem clara dessas atividades com pouqussima participao do designer na criao dos wireframes. Mas acredito que muito importante envolver o designer na criao dos wireframes, pois muitas vezes o modelo de interao deve ser pensado antes de aplicar a identidade visual interface em questo (e, muitas vezes, a participao do desenvolvedor de interao essencial nesse processo de criao). Dessa forma, os especialistas so unnimes em apontar o wireframe como pea fundamental no processo de diagramao de interfaces digitais. Na verdade, eles so um facilitador para o designer poder focar na criao. No entanto, hoje em dia, existe uma tendncia de se eliminar a documentao excessiva de AI dos projetos, e isso inclui os wireframes como entregveis. O wireframe clssico est morto. Dezenas de telas especicadas ao limite no garantem um produto coeso. Cada vez mais as necessidades de dinamismo e velocidade transformam os wireframes em interfaces de navegao de baixa delidade, construdas a vrias mos e que evoluem de acordo com as necessidades do produto. Particularmente, acredito que os wireframes so extremamente teis para o designer quando so o mais simples possvel. Designer no quer ler documento, quer um mapa visual objetivo dos elementos de uma interface, pode ser at mesmo um sketch. De qualquer forma, cada recomendao gerada em um wireframe foi pensada e tem uma razo de ser. Logo, deve ser respeitada pelo designer. No entanto, cabe ao designer no se acomodar e exercer a sua viso crtica sobre o trabalho que recebe, questionando, dando sugestes e, eventualmente, propondo alternativas, explica Mrcia. phantom labels (reas fantasmas), principalmente pelas possibilidades que o meio digital proporciona para a evoluo no uso destes ambientes. Estou totalmente de acordo com o autor, pois o conceito mais atual em planejamento de interfaces prever que as informaes e contedos se comportam de maneira dinmica em sites de alto nvel. Ou seja, importante desenvolver projetos cujos espaos virtuais contemplem uma exibilidade que permita, quando necessrio, alterar a composio dos elementos da interface e, ao mesmo tempo, manter a identidade visual. Ao contrrio da diagramao grca que, por conta do suporte fsico, torna-se mais rgida, a diagramao digital aplica-se sobre planos que lhe conferem sua dimenso virtual, diz Cereja. Na hora de se planejar tal prtica no processo de diagramao, Rafael destaca que, como qualquer projeto digital, principalmente web, preciso entender o tempo de vida da interface a ser criada. Alguns projetos, como microsites para campanhas publicitrias, tero um tempo de vida curto e, portanto, no precisam ser planejados com uma viso a longo prazo. Porm, projetos de grande escala, tanto de contedo como principalmente aplicativos, devem ser projetados para, pelo menos, trs anos de vida. Em 2007, em uma palestra no Summit de Arquitetura da Informao, realizado em Miami, Brandon Schauer falou sobre o Long Wow e como devemos desenvolver o projeto que estar completo em trs anos e planejar o lanamento contnuo de funcionalidades durante esse perodo para atingir a

CADA RECOMENDAO GERADA EM UM WIREFRAME FOI PENSADA E TEM UMA RAZO DE SER. LOGO, DEVE SER RESPEITADA PELO DESIGNER (MRCIA LUNARDI)

PHANTON LABELS: PLANEJANDO A EXPANSO DAS INTERFACES

No livro Webwriting: redao e informao para web, o consultor de comunicao digital Bruno Rodrigues (http:// www.bruno-rodrigues.blog.br) analisa que, em arquitetura de informao, mais importante do que pensar no agora planejar o futuro - em outras palavras, no que no existe. Assim, ele lembra a importncia de se trabalhar com a previso de uso de

44 :: Webdesign

viso inicial. Se esperssemos o tempo necessrio para criar e desenvolver todos os recursos que nossos clientes desejam, dicilmente o projeto seria lanado a tempo de ainda ser considerado novidade. o que vemos constantemente em produtos que so lanados em fases alpha e beta, ainda em testes e incompletos, mas que j foram pensados e estruturados de forma que as novas funcionalidades que sero incorporadas j tm seus lugares denidos desde o princpio do projeto. O uso de uma estrutura modular e uma grid bem denida muitas vezes contribui com a escalabilidade da interface. No caso de desenvolvimento de aplicativos, projetar tendo em vista todas as funcionalidades que o produto, j completo, dever ter essencial para que no somente a interface funcione, assim como a arquitetura dos sistemas seja bem denida.

formao mais completa que o permita dialogar e acompanhar todo o processo de desenvolvimento a m de que o projeto de layout e diagramao seja reproduzido tambm a partir das diretrizes e possibilidades da rea de desenvolvimento. O trabalho do designer no se inicia aps o trabalho do arquiteto de informao, tampouco se encerra quando o trabalho do desenvolvedor comea. Todos estes prossionais devem conhecer amplamente o que os outros fazem para a agilidade do processo. Conheo casos interessantes onde o trabalho cumpre um longo tempo na fase de design, vai para a rea de desenvolvimento e retorna por falta ou falhas de adequao s exigncias desta rea tcnica. Coordenei um curso, h dois anos, solicitado por um diretor de uma grande webhouse, justamente para munir os designers e os tcnicos de informaes comuns de meios que os permitissem dialogar e ganhar em produtividade. Hoje, a estrutura mais enxuta e mais produtiva, pois todos sabem o que est ocorrendo em cada uma das fases do projeto, ressalta Cereja. Neste debate, Mrcia argumenta que o designer precisa perder a mania de ter controle total de todos os detalhes das interfaces. Principalmente o designer que quer trabalhar com interfaces digitais, mdias sociais e ans. preciso exercitar esse desapego. Hoje em dia, o designer no assina sozinho um projeto. Muitas vezes, no caso de mdias sociais, por exemplo, o projeto adquire vida prpria. Os usurios criam novas formas de usar funcionalidades inicialmente concebidas com propsitos diferentes. Os arquitetos, desenvolvedores e designers devem aceitar e responder a essas mudanas de forma proativa e no reativa e fazer os ajustes necessrios em tempo hbil para no matar o projeto. Da mesma forma que acredito no dilogo entre o designer e o AI, acho fundamental o dilogo entre o designer e o desenvolvedor. Hoje em dia, a maior parte das interfaces so implementadas em CSS, linguagem que possui suas premissas. importante que o designer saiba como funciona essa implementao, suas diculdades e limitaes. No precisa saber implementar ele prprio, isso tarefa do

DO PSD PARA O DESENVOLVIMENTO DO BACK-END

Na etapa nal de diagramao da interface, o designer vai acabar gerando telas, comumente criadas em arquivos PSD, que vo orientar o trabalho do desenvolvedor no processo de torn-las funcionais. At onde o designer deve participar deste processo? E como garantir que todos os detalhes das interfaces, denidos no PSD, sejam elmente reproduzidos na etapa de programao do site? O trabalho compartimentado uma viso ultrapassada, mas ainda muito presente nos escritrios, ncleos e agncias de design. Este tipo de organizao funcional do trabalho de design j est desatualizado. O designer deve ter uma

EM QUALQUER TIPO DE INTERFACE, CONTRASTE, RITMO, HARMONIA E EQUILBRIO ESTO SEMPRE PRESENTES NA COMPOSIO (LUCAS HIRATA)

especialista, mas quando voc sabe que uma pequena curva, em um detalhe do design da interface, pode demandar cinco vezes mais horas de trabalho da implementao, vale o bom senso e uma avaliao de custo/benefcio para o projeto. O produto nal no um produto apenas de design. Cada vez mais um produto digital o conjunto da obra, resultado do trabalho de diversos prossionais e muitas vezes tambm de usurios de forma colaborativa, em ltima instncia.

capa - Diagramao na Web :: 45

BIBLIOGRAFIA RECOMENDADA
Conra a lista de livros indicados pelo professor doutor Ricardo Cereja: - Design de navegao web: otimizando a experincia do usurio Autor: James Kallbach Um excelente livro para se entender a funcionalidade de um site e com isso, orientar-se na diagramao e no design. - Design para a internet Autor: Felipe Memria Alm de tratar dos requisitos de um bom projeto em webdesign, o mais interessante deste livro so os estudos de casos apresentados. - Design para webdesigners: princpios do design para a web Autor: Wellinton Carrion timo para orientar os designers em composio e diagramao, pois trata de elementos como cor, perspectiva, harmonia, iconograa etc., apresentando tcnicas de criao e elaborao de interfaces. - The principles of beautiful webdesign Autor: Jason Beaird um guia ilustrado que explica o processo de desenvolvimento de um site, o que um bom design, layouts agradveis, leves e uidos, bem como o uso adequado de recursos e elementos de diagramao.

EXEMPLOS DE DIAGRAMAO NA WEB

EYE4U
www.eye4u.com/home/ Site de uma empresa alem de desenvolvimento de projetos de mdia, inclusive, sites em Flash. Navegar pelas pginas uma experincia visual interessante. A diagramao clara e ao mesmo tempo dinmica quanto ao uso dos planos de profundidade. (Ricardo Cereja)

Jason Santa Maria

http://jasonsantamaria.com/ Um timo exemplo de quo verstil pode ser uma interface e como as solues grficas se adaptam ao tipo de contedo. (Lucas Hirata)