WIREFRAME PARA WEBSITES

Leandro Maciel Nascimento 1 Mary Merer 2

Resumo: Este artigo apresenta o wireframe como uma das etapas iniciais para o desenvolvimento de projetos para o meio digital e web. As definies aqui apresentadas resultantes de pesquisas na literatura que relaciona o wireframe em suas variantes relacionando suas caracterisca de positivas e negativas em um projeto. Com o intuito de apresenta e exclarecer duvidas aos iniciantes em projetos para website.

Palavras-Chaves: Prottipos de interface; Design estrutural; Desenvolvimento de prottipos; Mapeamento de processos; Maquetes; Arquitetura da informao. 1. Introduo A internet possui inumeros recursos e sua ubiquidade vm modificando o cotidiano da sociedade, pois, pessoas se conectam a rede mundial para desfrutar de comunicao, para fazer compras, utilizar servios da mais diversas finalidades ou mesmo para se divertir. Segundo Nakano (2002), a era da Internet deve-se confluncia de foras tecnolgicas e sociais que impulsionam interao e comunicao entre pessoas e organizaes ao redor do globo. A Internet tornou-se, de fato, uma espcie de rplica do mundo real. Na internet o principal meio de comunicao o website que um conjunto de documentos multimdia de acesso remoto. O que existe nessa multimdia que faz a diferena: algumas contm textos extensos, outras colees de fotos, outras

2 Professora

Acadmico do 6 perodo de curso de Design grfico da Univali Orientadora

ainda estimulam a participao e a conexo dos visitantes a bancos de dados, utilizando recursos de hipertexto. Porm o desenvolvimento de um website contemporneo se faz necessrio profissionais qualificados de diversas areas que interagem-se em busca resultados planejados. Para um website passar a existir funcionalmente necessrio planejamento e uma srie de processos para ser desenvolvido, sendo o wireframe uma das etapas fundamentais do projeto. O wireframe termo muito utilizado pela arquitetura da informao e ao design, refere-se a uma das primeiras etapas no processo inicial de produo de projetos interativos de um website. 2. Objetivos Tonar claro a utilizao e fomentar o conhecimento sobre o wireframe, destina-se a acadmicos de arquitetura de informao e designers em projeto para a websites. O wireframe tem como objetivo estruturar o contedo das principais pginas, organizando os elementos que devem compor a interface, indicando a marcao de textos e o peso dos itens. a forma mais bsica antecedente do layout fundamental para o trabalho do arquiteto de informao porque auxilia a equipe de desenvolvimento na tarefa de produzir o site de maneira mais rpida, padronizada e eficiente (OLIVEIRA, 2003). Neste contexto, este artigo apresenta a descrio funcional de um wireframe esclarecendo sua funo e suas variantes dentro do projeto de um website.

3. Aspectos Metodolgicos Com base na pesquisa aplicada, de forma qualitativa e objetivo exploratrio o artigo se desemvolveu em duas etapas: a reviso e pesquisa bibliogrfica em livros, artigos de peridicos e site conceituados; Construo da fundamentao terica com anlise dos procedimentos pessoais baseada nos conhecimentos adquiridos na etapa de fundamentao esses dados levantados foi processada por reflexo. 4. Fundamentao terica Wireframe (figura 01) como uma planta baixa de um site, os envolvidos no projeto transmitem por ele como o primeiro objeto visual de tudas idias discutidas em reunio com clientes e equipe.

Figura 01: Wireframe Fonte: Acervo pessoal (2010) [...]os wireframes so um rascunho de uma tela especfica que posiciona a informao e a navegao, incluindo-se a agrupamento, ordem e hierarquia do contedo. um esqueleto que organiza os elementos de interface, sem a interferncia do projeto visual.(MEMRIA; 2005,p.37).

Para um melhor entendimento wireframe surge como um ferramenta que vai apresentar a estrutura funcional e os elementos que vo compor uma interface. Outra caracteristica a ajuda para decidir o agrupamento de componente de contedos, ordenando e o priorizando de forma coerente com as necessidades do projeto. Para garantir resultados os profissionais atuantes precisam criar ao coordenada, ou seja a somatria de esforos em prol do mesmo fim. Para apoiar essa troca de informaes o wireframe uma das etapas iniciais do projeto.

As profisses que utilizam o wireframe, primeiramente o arquitetura de informao que segundo Holzschlag (2004, p.56) reconhece. [...] Arquitetura de informao o processo de identificar, organizar e estruturar o contedo de um site. Wurman (1996) afirma que o profissional em arquitetura de informao : a) O indivduo que organiza os padres inerentes aos dados, tornando o que complexo claro; b) A pessoa que cria a estrutura ou mapa de informao que possibilita a outros encontrarem seus caminhos pessoais para o conhecimento; c) A ocupao profissional emergente do sculo 21 que direciona as necessidades era focada na clareza, entendimento humano e a cincia de organizao da informao.

Outra profisso que utiliza o wireframe o design. Para Moura (2003 p118)
Design significa ter e desenvolver um plano, um projeto, significa designar. trabalhar com a inteno, com o cenrio futuro, executando a concepo e o planejamento daquilo que vir a existir. Criar, desenvolver, implantar um projeto o design significa pesquisar e trabalhar com referncias culturais e estticas, com o conceito da proposta. lidar com a forma, com o feitio, com a configurao, a elaborao, o desenvolvimento e o acompanhamento do projeto.

Uma das vertentes do design a web design:

O design de pginas para a Web hoje se assemelha mais editorao eletrnica que programao. Os caminhos do Web design, porm, so bem diferentes daqueles seguidos na criao para mdia impressa. O Web designer deve conhecer no s as possibilidades do meio onde publicar a sua informao, como suas limitaes. A arte do Web design consiste em aproveitar ao mximo os recursos oferecidos pela Web, garantindo a melhor apresentao, navegabilidade e interatividade de um Web site. A idia atrair os visitantes e estimul-los a voltar outras vezes. s vezes necessrio sacrificar a qualidade da apresentao ou deixar de usar algum recurso til devido a lentido da rede ou incompatibilidades de browsers. importante que o Web designer aprenda a traar uma linha de equilbrio entre os impedimentos tecnolgicos e as possibilidades criativas desta nova mdia, para tirar o maior proveito do seu potencial. (ROCHA, 2000, p.1-2).

A presena de profissionais especializados em diferentes disciplinas est cada vez maior nos dias atuais. Cada rea de conhecimento trabalha diferentes partes do sistema que, desenvolvidas separadamente, contribuem para aperfeioamento de um todo, melhorando a qualidade do produto final (MEMRIA, 2005). Ao construir um wireframe, o arquiteto pensa no limite espacial da pgina e forado a fazer escolhas sobre quais elementos da arquitetura devem estar visveis e acessveis aos usurios. Segundo MARTINS3, wireframe s comea ganhar forma aps o arquiteto de informao ter passado por muitos processos para entender claramente o que ele est concebendo. Dependendo da complexidade e da amplitude do projeto, existem vrias atividades que precedem a criao do produto. Primeiro entender quem o seu cliente e quais so os objetivos dele ao criar ou redesenhar o produto. A partir da, preciso entender quem o usurio final (ou os usurios) e qual o contexto de uso do produto que est sendo criado. Conforme STOCKS4 , uma boa ideia separar as etapas de wireframe e de esttica: apesar de ambas fazerem parte da etapa do design, elas focam a ateno do cliente em aspectos diferentes, uma de cada vez. Pode-se dizer que o wireframe permite ao cliente pensar sobre o layout do ponto de vista da interao, e a esttica permite que ele se concentre puramente na experincia emotiva. Uma vez que a informaes seja recolhidas, importante priorizar como devem ser exibidos na pgina, fazendo assim uma estratgia de navegao. Os clientes podem ter preferncias quanto forma como a navegao deve funcionar e ser colocado na pgina. Se no houver um forte preferncia, requisitos de software e usabilidade pressupe o modo como a navegao deve ser projetado.

3 MARTINS, 4 STOCKS,

Carla. Wireframe. WEBDESIGN. So Paulo:Arteccom, v.79,p.34-38, Julho 2010 Elliot. Como criar layouts sedutores. WWW.COM.BR. So Paulo, Europa, v.114,p.38, Janeiro 2010

Normalmente requerido um wireframe da homepage (pgina inicial), subpginas e quaisquer outras pginas que prestar esclarecimentos ao processo de desenvolvimento do projeto. Os elementos contidos no wireframe so: localizao cabealho, rodap de navegao, objetos de contedo, logotipo. Agrupamento: barra lateral, barra de navegao, rea de contedo, etc. Rotulagem: o ttulo da pgina, os links de navegao, as posies de objetos de contedo, texto fictcio e marcao de posicionamento de imagens. 4.1 Tipos de Wireframe Na prtica o wireframe pode ser classificado como de baixa fidelidade (prottipo com pouco detalhamento) mdio e alta fidelidade.

4.1.1 Wireframe de baixa fidelidade (figura 02)

Os prottipos de baixa fidelidade so teis porque tendem a ser simples, baratos e de rpida produo. Isso tambm significa que podem ser rapidamente modificados, oferecendo, portanto, suporte explorao de designs e idias alternativas. (PREECE, 2005, p.263)

Figura 02: Wireframe de baixa fidelidade Fonte: Acervo pessoal (2010)

Pontos favorveis

baixo custo, pouco tempo para elaborao Com pouco detalhamento, no transmite totalmente a idia do produto final para cliente e demais envolvidos.

Pontos Negativos

4.1.2 Wireframe de mdia fidelidade (figura 03) Os wireframe de media fidelidade j contem um pouco mais de elementos j possui maior clareza nas informaes nele contidas.

Figura 03: Wireframe de mdia fidelidade Fonte: Acervo pessoal (2010)

Pontos favorveis

Custo moderado, tempo mdio para elaborao

No tem comprometimento com tamanhos dos textos, Pontos Negativos imagens e no simula todas as interaes existentes no produto final.

4.1.3 Wireframe de alta-fidelidade (figura 04) O wireframe de alta-fidelidade utiliza materiais que voc espera que estejam no produto final e realiza um prottipo que se parece muito mais com algo acabado. (PREECE, 2005).

Figura 04: Wireframe de alta-fidelidade Fonte: Acervo pessoal (2010)

Fcil entendimento, fiel ao produto final com tamanho Pontos favorveis de texto e imagens e capaz de simular todas as interaes do projeto.

Maior custo, maior tempo de elaborao e mais tempo para realizar possveis ajustes. Os revisores e aplicadores de testes tendem a Pontos Negativos comentar aspectos superficiais, em vez do contedo. Pode amarrar o trabalho do designer O foco pode se desviar prematuramente da arquitetura de informao para a interface e design visual

6. Consideraes finais: Os resultados com base na pesquisa bibliogrficas e artigos revelam a relevncia dessa etapa em um projeto web e trata a funcionalidades e finalidades do wireframe em projeto para websites. O desenvolvimento de projetos interativos de diversos meios digitais, principalmente em websites conforme direciona-se o artigo, passa por vrios processos para sua construo sendo uma delas a etapa de contruo do wireframe que torna-se util entre a comunicao da equipe e clientes. Sendo uma das primeiras etapas, a qual possui funcionalidade no planejamento sistemtico e na disposio do contudo num website, indicando onde devem estar localizados os objetos e menus de interao. O wireframe serve para mostrar a funcionalidade e no o aspecto grfico de uma aplicao. Possui baixo custo, podendo ser esboado manualmente com prottipos em papel e aplicativos de criao diversos, atualmente possui um gama de softwares prprios para o desenvolvimento de wireframe como Visio Microsoft, OmniGraffle, SmartDraw e Norpath.

7. Referncias: GABRIELI, Leandro; CORTIMIGLIA, Marcelo; RIBEIRO, Jos. GWEB! Um sistema para gerenciamento de contedo em websites, Porto Alegre, 2005. Disponvel em: <www.abepro.org.br/biblioteca/ENEGEP2005_Enegep0906_1824.pdf >. Acesso em 05. out. 2010 MARQUES, Guilherme. Wireframe. Julho 2008. Disponvel em: <http:// guilhermemarques.wordpress.com/2008/07/07/wireframe> Acesso em 03.Out.2010 MEMRIA, Felipe. Design para a internet: projetando a experincia perfeita. 4.ed. Rio de Janeiro: Elsevier, 2005. MOURA, Mnica et al. Faces do design. So Paulo: Rosari, 2003. NAKANO, R. Web content management: a collaborative approach. Boston: Addison-Wesley, 2002. PREECE, Jennifer; ROGERS, Yvone; SHARPI, Helen. Design de interao: Alm da interao homem-computador. Tradutor: Viviane Possamai. Porto Alegre: Bookman, 2005. ROCHA, Helder lima Santos da. Web design e HTML avanado. v.4 So Paulo: IBPINET, 2000. WEBDESIGN. So Paulo:Arteccom, v.79,p.34-38, Julho 2010 WURMAN, Richard Saul. Information architects. Zurich, Sua: Graphis, 1996. WWW.COM.BR. So Paulo: Europa, v.114, p.38, Janeiro 2010

10