Criar um wireframe pode ser tão simples ou complicado quanto você quiser. Em sua forma mais básica, seu wireframe pode ser nada mais do que um esboço em algum papel milimetrado. Outros “wireframes” são criados digitalmente e são mais parecidos com protótipos, com objetos clicáveis e funcionalidades limitadas.
Normalmente, é bastante simples para um site com apenas algumas páginas, como um site de restaurantes locais, mas sites mais diversos, como um para uma faculdade, terão um wireframe mais complexo. O tipo de wireframe que você cria dependerá do que o projeto individual exige, bem como de como é o seu próprio fluxo de trabalho. Projetos mais complicados provavelmente terão wireframes mais complicados, enquanto sites simples podem ter wireframes mais simples.
O que incluir em um wireframe
Seus wireframes devem incluir informações suficientes para refletir o que precisa aparecer em cada página do seu site.
Pense nos elementos gerais da maioria das páginas da web: cabeçalhos, rodapés, barras laterais e áreas de conteúdo. Em seguida, pense em elementos adicionais que seu projeto específico terá: widgets dinâmicos, recursos básicos do site, como barras de pesquisa e navegação, gráficos e assim por diante. Depois de ter uma ideia do que seu site incluirá, comece a criar seus wireframes com base nesses elementos.
O quão detalhado você deseja obter dependerá novamente do projeto e da finalidade do wireframe. Se o seu wireframe for apenas servir como um documento de orientação para sua própria referência, você não quer se envolver muito no processo de wireframe. Por outro lado, se for usado por mais de um designer ou desenvolvedor, ou apresentado ao seu cliente, ele precisa ser mais formal.
Wireframes de baixa fidelidade vs. de alta fidelidade
Você tem algumas opções quando se trata do estilo de seus wireframes. Alguns designers optam por wireframes de baixa fidelidade (low-fi) que são basicamente apenas linhas em um plano de fundo simples com alguns rótulos. Estes incluem wireframes desenhados à mão e digitais, e geralmente são muito simples.
Um exemplo de um wireframe de baixa fidelidade para um aplicativo da web.
Os wireframes de alta fidelidade (hi-fi) vão um passo além, usando certos elementos de design dentro do wireframe. Isso pode incluir o logotipo ou alguns outros gráficos básicos, bem como o esquema de cores e outros elementos de design visual.
Wireframes como esse começam a se aproximar do nível de maquetes, mas podem ser inestimáveis para transmitir uma ideia de como será o site, especialmente para clientes que podem ter dificuldade em visualizar como será um site com base em um wireframe de baixa fidelidade.
Técnicas de wireframe
Existem dezenas de maneiras diferentes de criar wireframes, desde simples esboços de caneta e papel até diagramas mais complexos que parecem quase tão polidos quanto sites de produção. Existem também diferentes abordagens para o propósito e raciocínio por trás da criação de wireframes, dependendo das necessidades de designers e projetos individuais.