O desenvolvimento de um website envolve várias etapas, desde a criação, ao design, implementação e aprovação final do cliente. Assim, como em qualquer projeto, é importante munirmo-nos de ferramentas e processos de trabalho que sejam capazes de agilizar e, sobretudo, facilitar todo o processo.

 

De facto, a fase inicial de um projeto é uma das mais importantes, pois alinha todos os passos seguintes, o trabalho desenvolvido por cada elemento da equipa e possibilita que cada entrega seja validada antes do arranque da etapa seguinte. É, por isso, que o wireframing é tido hoje como um dos primeiros e mais importantes passos num projeto, pois ajuda a esclarecer exatamente o que é preciso ser feito daí em diante.

 

 

O que é um wireframe?

 

Um wireframe de um website é um rascunho ou esqueleto que, através de texto e caixas, cria uma visão geral do mesmo.

Deve ser o wireframe que determina quase na íntegra como será a estrutura do website e qual o conteúdo, por um lado, e que mostra aos envolvidos qual a direção do projeto, por outro. Podemos comparar um wireframe de um website a um storyboard de um filme.

 

É nesta fase do projecto que o UX (User Experience) deve ser considerado como um dos principais focos. É através do UX Analysis que iremos projetar, observando do ponto de vista do utilizador, a facilidade com que o produto será percepcionado e usado.

 

É importante ainda destacarmos que existem variações na forma como os wireframes são apresentados e desenhados, mas dividem-se sobretudo em duas categorias: wireframes de baixa fidelidade versus wireframes de alta fidelidade. Os primeiros são os modelos mais simples, desenhados manualmente sem muitos detalhes e sem cores. Os wireframes de alta fidelidade são esboços muito mais próximos da versão final, normalmente desenhados recorrendo a ferramentas digitais, onde são incluídas já algumas interações, esquema de cores e elementos gráficos básicos.

 

Qual é a real importância de um wireframe?

 

É no wireframe que conseguimos compreender que tipo de conteúdo o projeto deve conter, qual a posição desse conteúdo e alinhar o mesmo de acordo com a estratégia global de marketing.

 

Se a estratégia é direcionada para a captação de leads, por exemplo, mais facilmente conseguiremos entender qual é a forma correta de distribuir o texto, imagens e call-to-action para incentivar o utilizador a preencher o formulário.

 

Permite corrigir, repensar e ajustar numa fase inicial

 

Ao elaborarmos os Wireframes antes de entregamos o projeto final, evitamos muitos transtornos e feedback tardio. De facto, caso seja verificado que algo está errado, conseguimos ajustar o wireframe quantas vezes for necessário de forma muito mais fácil do que numa fase final de design.

 

 

Ajuda a definir de forma concreta para quem estamos a falar e o que queremos dizer

 

O primeiro passo, tal como na maioria dos projetos, é o desenvolvimento de um briefing com os responsáveis pelo projeto. Assim, é fundamental reunir todas as informações num documento para guiarmos todas as ações, conhecermos de forma aprofundada o target e definirmos bem os objetivos. Como já falámos é crucial hierarquizar as informações/conteúdo de acordo com o objetivo do website. 

 

Possibilita desenhar um conceito muito aproximado para cada página

 

Um wireframe deve incluir o máximo de informações de cada página do novo website e delinear desde logo a estrutura macro das mesmas. Quando estamos a desenhar um wireframe devemos considerar primeiro os elementos principais da maioria das páginas, como os cabeçalhos, rodapés, barras laterais, áreas de conteúdo, meta-informação e áreas de pesquisa . Depois disso, começamos a desenhar o esboço detalhado de cada uma das páginas, colocando já o máximo de conteúdo (textos e imagens) que o designer deve utilizar.

 

Conclusão

 

Desenvolver wireframes é efectivamente um passo fulcral no processo de desenvolvimento e arranque de um website. Mesmo quando estamos a projetar um website minimalista e simples, desenvolver um wireframe ajuda a esclarecer exatamente o que precisamos de fazer nas diferentes páginas do projeto.

Artigos Relacionados