Web Design: Os princípios de Wireframing
UMA wireframe
é uma vista 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 para 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 ter certeza de que todos eles trabalharam bem juntos e foram consistentes.
O modelo incluiu informações importantes para ajudar a lembrar a equipe dos objetivos de nível de página. Por exemplo, um objetivo-chave de negócios pode ser a de apresentar novos produtos na home page e, nas páginas seguintes, sugerem outros produtos, 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 destes 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 complexos. A maioria dos sites apenas ir direito de wireframes de o mapa do site.)
Wireframes servir como uma espécie de lista de roupa suja 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 poderá exibir:
O que copiar - e quanto dela - vai na página
Quais objetos CMS ir para a 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 - as ligações, widgets, como menus drop-down, 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 no papel, não só com o cliente, mas também a equipe técnica que constrói o site.
Você não precisa construir uma estrutura de arame 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 de 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 toque ligeiramente diferente para eles, no entanto, é uma boa idéia para fazer um produto de detalhe wireframe especial só para eles.
É importante que os 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 um esqueleto e não um design visual proposto.