Como criar a maquete do seu website profissional

Novembro 2016

Depois de criar o caderno de especificações e a arborescência do seu site, começa a fase de prototipagem, também chamada de wireframe. Este é um passo necessário para obter uma imagem mais clara da ergonomia do site. Existem muitas ferramentas pagas e gratuitas para executar esta tarefa. Ela é fácil de usar, elas são particularmente úteis para os profissionais para supervisionar a implementação de um projeto web.


O que é wireframing ou maquete de website

O wireframing (maquete) é a etapa que consiste em representar esquematicamente a organização de um website (ex: arborescência), bem como a sua interface gráfica (interativa e ergonômica).

Esta etapa de esquematização vem logo depois da realização do caderno de especificações, e antes da fase de concepção web propriamente dita. Ela pode ser realizada por várias pessoas que fazem parte do projeto (veja abaixo). Ela permite, entre outras coisas, testar a ergonomia do site, avaliar o tempo necessário para a realização do projeto e estimar os custos de realizações associadas.

Ferramentas e softwares para o wireframing

As ferramentas de maquete se destinam ao conjunto dos profissionais reunidos no projeto de concepção web, sejam eles técnicos ou não. Elas ajudam a realizar as etapas de concepção de um site/blog/aplicativo e asseguram uma boa compreensão entre os diferentes atores (clientes, chefes de projeto web, webdesigner e desenvolvedores, etc.).


Elas são dotadas de diversas funcionalidades (ex: Arrastar/Soltar), que permitem dispor dos elementos gráficos de um site em diferentes páginas, trabalhar as suas dimensões, definir o lugar dos menus, etc.

Para que tipo de profissionais

A ferramentas de wireframing podem ser úteis para diferentes tipos de profissionais e para inúmeros casos:

Chefes de projetos web: que na frente da criação de um website/blog/site de e-commerce, desejam apresentar aos clientes um croquis do projeto conforme o caderno de especificações do mesmo: arborescência e número de páginas, disposição dos menus, plug-ins, ergonomia, etc. As ferramentas de wireframing também facilitam a comunicação com os webdesigners na fase de concepção.
Profissionais de comunicação e marketing: que em casa e sem o uso de uma agência web especializada, tomam a iniciativa de criar o projeto de um site/blog profissional e precisam representá-lo esquematicamente.
Uso fora web: apresentação de gráficos ou diagramas (árvore de ideias, por exemplo).

Algumas ferramentas de criação de maquete gratuitas

Pencil Project

Esta extensão Open Source para o Firefox (4 e superior) é usada para projetar gráficos e interfaces de usuário, utilizando uma vasta gama de ferramentas. Ela oferece muitos gráficos (stencils) para construir o padrão de páginas, além da criação de várias páginas, links entre páginas, editar textos no modelo, exportar para HTML, PNG, OpenOffice.org, Word e PDF e operações padrão como o alinhamento, a rotação e o redimensionamento.

Site oficial do Pencil Projec

Lumzy

Esta ferramenta colaborativa de criação de maquetes online (protótipo de website) tem cinquenta gráficos (botões, listas, caixas de texto, barras de rolagem, figuras geométricas, etc.) e um espaço de trabalho para “Arrastar e Soltar”. Ela também suporta a criação de várias páginas (abas separadas).


A janela que fornece ferramentas de formatação é associada a cada widget Arrastar e Soltar (alinhamento, cores, etc.) e facilita a personalização do projeto. O criador do projeto pode convidar outras pessoas a participarem da colaboração em tempo real.

Lumzy também incorpora uma ferramenta de edição de imagem, mensagens instantâneas e muitos botões de ação padrão (duplicação de itens, sobreposição, bloqueio dos ícones soltos). Teste o Lumzy:

ALT

MockFlow

Na versão gratuita, esta ferramenta online de wireframing está aberta apenas para projetos de quatro páginas, com dois colaboradores, no máximo. Uma configuração para a criação de sites muito pequenos (vitrine).


Ela fornece um grande número de elementos a serem incluídos no modelo para mapear uma série de projetos: aplicação web, formulário de contato, software, etc. Teste o MockFlow:

ALT

Cacoo

Esta ferramenta de diagramação versátil online fornece muitos elementos a serem inseridos, e recursos apenas para criar mapas de sites (sitemaps). Ela também permite que vários usuários trabalhem, simultaneamente, no mesmo projeto. Teste o Cacoo:

ALT

Algumas ferramentas de criação de maquete pagas/Premium

Balsamiq

Esta ferramenta colaborativa (cliente de desktop para Windows, Apple e Linux) permite prototipagem de aplicativos ou de websites. A sua interface tem 75 comandos/ações integradas. Balsamiq conta com 187 ícones inseríveis, tornando-se uma das ferramentas de wireframing mais completas. Ela custa US $ 79. Teste o Balsamiq:

ALT

Mockingbird

Esta ferramenta de criação e compartilhamento de mockups online é muito intuitiva e está disponível a partir de US $ 9 por mês (dois projetos e colaboradores ilimitados).

iPlotz

Em local (download em OS Linux, Windows, licença de US $ 75) ou online (paga além de um projeto de 5 páginas), iPlotz permite modelizar e estruturar eficazmente as interfaces de sites de aplicativos web. Ele é indicado para os usuários especializados, mesmo que esteja em simples utilização. Teste o iPlotz:

ALT

Foto: © Pixabay.

Veja também :
Este documento, intitulado « Como criar a maquete do seu website profissional  »a partir de CCM (br.ccm.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.