1 de 6

TEMA: WIREFRAMES

Pesquisa Explorar Interface Produção Testes Lançamento

1. O que são Wireframes

O planeamento da arquitetura da informação não pode ser descuidado, e o Wireframing é um dos primeiros passos

para melhorar o planeamento e a definição de interfaces.

O nome “wireframe” vem da junção de duas palavras em inglês: “wire” (linhas) e “frames” (ecrãs).

Antes de se construir uma casa é sempre necessário um projeto, uma maquete, um trabalho de arquitetura. No que

respeita à criação de um Web Site são utilizados os mesmos princípios.

Wireframe corresponde a um documento (ou vários) com indicações para a construção de um Web Site, tais como

blocos de texto, animações, áudio, vídeo, imagens, menus de navegação, banners, logos entre outros. É apenas um

esboço que organiza os elementos da interface onde está incluída e posicionada toda a navegação e informação

correspondente a toda a pesquisa e análise que foi feita na etapa referente ao pré-projeto. De salientar, que não têm

como objetivo interferir na projeção da parte gráfica/visual (desenho do layout gráfico), ou seja, na parte criativa.

Chak (2004) afirma que os wireframes devem apenas mostrar o contorno daquilo que será a interface, sem

aprofundamentos no design gráfico.

Para a conceção de um wireframe de qualidade é necessário investir bastante tempo na pesquisa de informação, e

que esta seja entendida por todos os elementos que formam a equipa de Web Design, não descurando que é

extremamente pertinente que o Web Site vá ao encontro das necessidades e expetativas dos milhões de “utilizadores

on-line”.

A construção do wireframe, de certo modo, garante que todo o Web Site mantenha uma unidade gráfica, padronizada

e uma presença de marca relevante para o cliente (identidade e marca).

Fases na conceção de um Web Site:

1.1 Constituição de um Wireframe

O Wireframe é composto por imagens, textos, formulários, mecanismos de pesquisa que são representados

por diversos elementos gráficos – largura e altura das páginas, quadrados e círculos, traços contínuos e pontilhados,

palavras em negrito e sublinhadas - normalizados para todos os wireframes da documentação.

O Wireframe deverá incluir: áreas de conteúdo (por exemplo, formulário de contato); hierarquia de conteúdos;

identificação dos nomes das páginas; nome(s) do(s) autor(es) dos wireframes e identificação de cada wireframe no

contexto geral do projeto. Para Jesse James Garrett (2003) o valor do wireframe está na forma como se integra os

elementos de design de interface, design de navegação e design de informação.

2 de 6

TEMA: WIREFRAMES

2. Estrutura e tipos de Wireframes

Quando os Wireframes são construídos o arquiteto de informação define os elementos que deverão ter mais

ênfase, destaque e prioridade no Web Site. Neste sentido, define as prioridades relativas às informações e

funções, as regras para a exposição de determinados tipos de informação e o efeito nos diferentes cenários no ecrã.

Um Wireframe deve complementar a informação, a navegação e a interface do Web Site. Os Wireframes podem ter

diferentes níveis de detalhes.

Wireframe de baixa fidelidade

Wireframe de média fidelidade Wireframe de alta fidelidade

Figura 2 – Estrutura de Wireframe com mais detalhes, mais conteúdo e explicações.

Figura 3 – Estrutura de Wireframe que apresenta um valor aproximado do que a página vai realmente ser no final da sua

conceção.

Figura 1 – Estrutura de Wireframe muito simples. Pretende garantir que todo o foco esteja centrado no layout do conteúdo e nos elementos visuais.

3 de 6

TEMA: WIREFRAMES

Wireframe para Plataformas Mobile

3. Vantagens e desvantagens da sua utilização

Vantagens

Facilita a previsão e análise de usabilidade no momento da construção;

Facilita a aplicação de conceitos de usabilidade já testados e comprovados, em projetos anteriores, como

eficientes;

o A partir da elaboração de wireframes, é possível a realização de protótipos interativos que

funcionam como testes introdutórios de usabilidade e da funcionalidade da interface.

Ajuda o grupo de pessoas das áreas de desenvolvimento e programação, produzindo a ideia base,

uniformizada;

São utilizados após a implementação, para que seja possível a comparação entre o protótipo e o produto

final;

Funciona como uma documentação do sistema e deve ser consultado antes de cada modificação posterior,

para prevenir impactos na arquitetura e funcionalidade;

É conotado como um documento da página auxiliando a análise futura de riscos e de funcionalidades.

Desvantagens

Não atender às expectativas dos clientes devido a uma interface muito rudimentar, ou seja, sem impacto

gráfico;

Se os web designers seguirem á risca todo o wireframe o produto poderá perder o nível de criatividade e

inovação;

Se não for claramente construído necessita de tempo para ser entendido por todos os elementos que farão

parte da equipa do desenvolvimento do projeto;

O projeto poderá ficar comprometido se não for desenhado a uma escala exata, pois pode ocorrer

complicações de dimensões de página.

Figura 4 – Estrutura de Wireframe para Plataformas Mobile

4 de 6

TEMA: WIREFRAMES

4. Software

Existem diversas ferramentas disponíveis para o desenvolvimento de wireframes. No

entanto, se o orçamento for curto, o papel e um lápis é o suficiente (http://www.from-the-

couch.com/post.cfm/title/wireframing-over-the-shoulder). É natural que apresentar a proposta

ao cliente numa folha de papel não é muito atrativo para quem a visualiza.

Neste sentido, o software permite a organização dos diversos elementos geométricos,

textos, etc permitindo a rapidez de alteração da interface. A partir de uma hipótese de

wireframe pode-se duplicar e fazer alterações. Daniel Pink refere no seu livro “software

design is fairly unchartered territory, but will mature in this century”.

Passo a citar alguns softwares que permitem a construção de Wireframes.

4.1 Software Pago:

Microsoft Visio, integrado no Office; Adobe Freehand; QuarkXPress;

Adobe InDesign; SmartDraw; Axure RP (Windows e Mac);

Adobe Illustrator; Pidoco OmniGrapple: para Mac / iPad;

4.2 Software Gratuito

Lovely Charts Lumzy - http://lumzy.com/app/

Cacoo - https://cacoo.com/ MockingBird - https://gomockingbird.com/

Mockflow - http://mockflow.com/ Pencil - extensão para o Firefox

Existem utilizadores que preferem criar os Wireframes em formato XHTML em vez de o fazer em aplicações. A

vantagem é poder entregar ao designer gráfico a estrutura das páginas prontas (com classes, DIVs e IDs definidos). No

entanto, pode-se perder tempo a codificar o XHTML e as folhas de estilo (CSS) correspondentes caso se utilize objetos

“drag & drop”.

Exemplo de Aplicação:

Gliffy - http://www.gliffy.com/ - não é gratuito para exportação.

Figura 5 – Estrutura de

Wireframe em papel

5 de 6

TEMA: WIREFRAMES

5. Análise Critica

Na minha opinião wireframe é mais do que um documento, é uma ferramenta de visualização para a apresentação de

propostas de uma página de Internet ou Web Site.

Considero que o wireframe tem como função organizar o conteúdo de cada página, indicando o peso e a importância

de cada componente do layout e a sua relação com os demais elementos que constituem um Web Site. Há quem

confunda Wireframe com Layouts e Protótipos apesar de cada um ter uma função distinta. Wireframe são ilustrações

ou esboço da estrutura do Web Site, o Layout foca os elementos visuais enquanto que o Protótipo são páginas semi-

funcionais.

Na minha opinião, considero que o Wireframe é fundamental para a criação de um Web Site uma vez que comunica as

ideias iniciais de design, de uma forma simplificada tendo como foco o conteúdo e a estrutura, e não o layout ou a

interface visual. Permite ordenar, agrupar e criar hierarquias de conteúdos bem como reduzir o tempo da conceção

visual dos Web Sites uma vez que os designers têm acesso ao “esqueleto” do que vão desenhar.

Em termos de usabilidade o construtor do wireframe contribui para evitar conteúdos redundantes ou sobreposição

dos mesmos bem como layouts complexos.

No que respeita à apresentação dos Wireframes ao cliente, a empresa ou gestor do projeto poderá economizar tempo

e dinheiro. Se o cliente quiser mudar posições dos elementos do Web Site facilmente proceder-se-á às alterações sem

necessitar de alterar layouts e efeitos complexos.

É neste âmbito que considero que os Wireframes são poderosos documentos pois antes de se passar à construção do

Web Site já foram previstos detalhes de arquitetura, navegabilidade, funcionalidade e conteúdo. Contudo, se existir

erros na sua construção poderá comprometer todo o projeto, por isso muitos designers não gostam de ouvir falar de

wireframes. Segundo James Garrett a única maneira de se produzir wireframes de sucesso é por meio da colaboração

(arquiteto de informação e o designer).

Outra abordagem é o wireframe colaborativo. Frederick van Amstel, na arquitetura do Portal BrOffice.org, utilizou um

método original (http://www.broffice.org/pesquisa_portal/): inspirado na organização de cartões (card-sorting) mas

focalizado na ligação da informação, criou o wireframe do Portal BrOffice.org a partir de 128 contribuições

(utilizadores e colaboradores) sobre como deveria ser posicionada a informação numa página específica. O resultado

dos diferentes wireframes, criados pelos participantes da pesquisa, contribuiu para a definição dos elementos da

página inicial bem como a sua importância e inter-relacionamentos.

Ao longo do desenvolvimento deste trabalho interroguei-me algumas vezes: Será necessário construir sempre um

wireframe para um Web Site? A resposta é óbvia. Sim, sem dúvida, nem que seja uns rabiscos no papel. O wireframe é

útil na maior parte dos casos, mas pode não ser primordial para todos os contextos de projetos: é um documento que

auxilia a expressar decisões, análises, pesquisas e definições da Arquitetura de Informação, mas não é nem a síntese

do processo desta, nem o seu resultado.

Isaac Pinnock refere no seu artigo: “The best sites are those where there’s a seamless divide between the look, the

content and the experience. Being able to model an interaction and understand how someone moves through a site

are crucial skills in this trilogy. It’s time designers stepped up to the plate and claimed wireframes as their own”.

6 de 6

TEMA: WIREFRAMES

6. Vídeos sobre o tema apresentado

The Right Way to Wireframe

Wireframing over the shoulder

7. Bibliografia

Chak, Andrew (2004). Como criar sites Persuasivos. Pearson Education do Brasil.

Garrett, Jesse James. (2003). The Elements of User Experience - User-Centered Design for the Web. Berkeley: New Riders.

Peter Morville, Louis Rosenfeld. (2006). Information Architecture for the World Wide Web. 3rd edition, O'Reilly Media.

Pink. Daniel H. (2005). A Whole New Mind: Why Right-Brainers Will Rule the Future. Riverhead Books.

7.1 Sites Visitados

Freitas, Daniel Leal disponível em http://www.novaz.com.br/blog/2010/11/guia-completo-de-wireframing/. Acesso em

27 de outubro de 2011.

Kohary, Nishant disponível em: http://visitmix.com/articles/the-future-of-wireframes. Acesso em 26 de outubro de 2011

Pinnock, Isaac disponível em http://madebymany.com/blog/the-future-of-wireframes. Acesso em 23 de outubro de 2011.

REIS, Guilhermo Almeida. (2007). Centrando a Arquitetura de Informação no usuário. Dissertação (Mestrado) - Escola de

Comunicação e Artes, Universidade de São Paulo. Disponível em: http://www.guilhermo.com/mestrado/. Acesso em 19

outubro de 2011.

Travis, Aaron T. disponível em http://boxesandarrows.com/view/sketchy-wireframes. Acesso em 25 de outubro de 2011.

http://www.userexpertise.com/usabilidade/12-dicas-para-wireframe/. Acesso em 22 de outubro de 2011.

http://graffletopia.com/stencils/358. Acesso em 22 de outubro de 2011.

http://webinsider.uol.com.br/2011/03/18/cinco-ferramentas-para-a-producao-de-wireframes/. Acesso em 22 de outubro

de 2011.

http://www.from-the-couch.com/post.cfm/title/wireframing-over-the-shoulder. Acesso em 22 de outubro de 2011.

http://visitmix.com/articles/the-future-of-wireframes. Acesso em 27 de outubro de 2011.