Web design: as noções básicas de wireframing

UMA wireframe

é uma exibição de diagrama de uma página do site que usa formas simples e elementos de texto para mostrar a estrutura da página, conteúdo e navegação. Você pode usar um programa como o Illustrator ou InDesign para criar wireframes, mas arquitetos de informação geralmente preferem Microsoft Visio para o desenvolvimento de sitemaps.

Mapear zonas de conteúdo de um site

Trabalhar para fora o que se passa em cada página e como o conteúdo é apresentado e navegado é uma tarefa enorme, especialmente para sites de grandes empresas. Algumas empresas optam por um pouco de trabalho de pré-wireframe prep e criou um modelo para ajudar a equipe rapidamente mapear zonas de conteúdo para cada página para garantir que todos eles trabalharam bem juntos e foram consistentes.

O modelo inclui informações importantes para ajudar a lembrar a equipe dos objetivos de nível de página. Por exemplo, um objetivo-chave de negócio pode ser para mostrar novos produtos na home page e, nas páginas seguintes, sugerir outros produtos que um usuário pode estar interessado. Com o conhecimento dessas metas, você pode definir algumas zonas de conteúdo e mostrar seu parente colocação, dimensionamento e prioridade desses componentes na página. Observe como elementos de baixa prioridade cair abaixo da dobra (Fora da faixa de visualização inicial da página web, exigindo que os usuários para se deslocar para vê-los).

Wireframing em web design

Após um exercício de pré-wireframing, você pode preencher os detalhes de cada página. (A pré-wireframing rodada é uma etapa opcional recomendado para sites grandes e complexas. A maioria dos sites apenas ir direto para wireframes do mapa do site.)

Wireframes servir como uma espécie de lista de lavanderia do que se passa em cada página a partir de um conteúdo e mídia perspectiva, e também mapear a design de interação (Como os usuários usam ferramentas na página ou navegar pelo conteúdo). Aqui estão alguns exemplos do que o seu wireframe pode mostrar:

• O que copiar - e quanto dela - vai na página

• 
  
  
  

  Quais objetos CMS ir na página (se você estiver usando um sistema de gerenciamento de conteúdo)

• Que tipo de imagens e mídia (como Flash e arquivos de vídeo) ir para a página

• Seu plano técnico e interação para a página - ligações, widgets, como menus suspensos, expandindo as áreas de conteúdo, caixas de seleção e botões

Wireframing é um passo importante que você não deve deixar de fora de qualquer projeto interativo - se é para um aplicativo móvel, uma apresentação em Flash em uma feira comercial, ou (é claro) um site. Como um bom projeto de arquitetura, o wireframe é a sua oportunidade de trabalhar para fora todos os problemas de design de conteúdo e interação em papel não só com o cliente, mas também a equipe técnica que constrói o site.

Você não precisa construir um wireframe para cada página do site. Você só precisa fazer um wireframe para cada layout exclusivo. Por exemplo, se você tem 100 páginas de detalhes do produto em seu índice página, você pode construir apenas um wireframe que mostra como a página de detalhes do produto funciona. Se uma ou duas páginas de produto tem um layout ou conteúdo torção ligeiramente diferente para eles, no entanto, é uma boa idéia para fazer um produto de detalhe wireframe especial só para eles.

É importante que seus wireframes olhar tão chato e esquemática possível. Eles são geralmente em tons de cinza, com linhas, caixas, caixas cinzentas, e texto fictício. Isso é para garantir que os clientes a entender claramente que eles estão olhando para um esqueleto e não um design visual proposto.