Como crear web Wireframes

Os wireframes do sitio web son debuxos de liña simples que mostran a colocación de elementos nunha páxina web. Pódese gardar moito tempo editando o deseño dun cadro de malla simple ao comezo do proceso de deseño no canto dun deseño complexo máis tarde.

Usar wireframes é unha boa forma de comezar un proxecto de sitio web, xa que permite que vostede eo seu cliente se concentren no deseño sen distraer a cor, o tipo e outros elementos de deseño. Concéntrase no que pasa nas páxinas web e na porcentaxe de espazo que ocupa cada elemento, o que pode ser determinado polas necesidades do seu cliente.

01 de 03

Que incluír nun Wireframe web

Exemplo de wireframe simple.

Todos os elementos importantes dunha páxina web deben estar representados no seu wireframe web. Use formas simples en vez de gráficos reais e etiquetalos. Estes elementos inclúen:

02 de 03

Como crear web Wireframes

Captura de pantalla OmniGraffle.

Hai unha variedade de formas de crear un wireframe do sitio web. Inclúen:

Debuxalo a man en papel

Este método é útil cando se atopa cara a cara cun cliente. Esboza as súas ideas de deseño sobre o papel, con foco en que elementos deben ir onde.

Usando Adobe Photoshop, Illustrator ou outro software

A maioría dos paquetes de software gráficos están equipados con todas as ferramentas básicas necesarias para crear filmes. Liñas simples, formas e texto (para etiquetar os seus elementos) son todo o que precisa para crear un cadro wirefable.

Usando o software creado para este tipo de tarefa

Mentres Photoshop e Illustrator poden facer o truco, algúns paquetes de software son desenvolvidos específicamente para este tipo de traballo. OmniGraffle é unha peza de software que simplifica a creación de wireframes proporcionando formas, liñas, frechas e ferramentas de texto para usar nunha lenzo en branco. Aínda pode descargar conxuntos de gráficos personalizados (de forma gratuíta) en Graffletopia, que lle proporciona máis elementos, como os botóns web comúns, para traballar.

03 de 03

Os beneficios

Con wireframes do sitio web, ten a vantaxe de axustar un deseño de liña sinxela para acadar o deseño desexado. En lugar de mover elementos complexos ao redor dunha páxina, pode levar moito tempo arrastrar un par de caixas a novas posicións. Tamén é moito máis produtivo para vostede ou o seu cliente centrarse primeiro no deseño ... non comezará con comentarios como "¡Non me gusta esa cor!". En vez diso, comezará cun deseño e estrutura finalizados. que para basear o teu deseño.