Índice:
Vídeo: Conceitos De Web Design Aula 01 2025
A wireframe é uma visão de diagrama de uma página de site que usa formas simples e elementos de texto para mostrar estrutura, conteúdo e navegação da página. Você pode usar um programa como o Illustrator ou o InDesign para criar quadros de arquivos, mas os arquitetos de informações geralmente preferem o Microsoft Visio para desenvolver sitemaps.
Mapeando zonas de conteúdo para um site
O que se faz em cada página e como o conteúdo é apresentado e navegado é uma tarefa enorme, especialmente para sites de grandes empresas. Algumas empresas optaram por um pouco de trabalho de preparação pré-wireframe e criaram um template para ajudar a equipe a mapear rapidamente zonas de conteúdo para cada página para se certificar de que todos eles trabalharam bem juntos e eram 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 comercial principal pode ser mostrar novos produtos na página inicial e, em páginas subseqüentes, sugerir outros produtos, um usuário pode estar interessado. Com o conhecimento desses objetivos, você pode definir algumas zonas de conteúdo e mostrar seu parente colocação, dimensionamento e prioridade desses componentes na página. Observe como os elementos de baixa prioridade caem abaixo da dobra (fora do alcance de visualização inicial na página da Web, exigindo que os usuários se deslocam para vê-los).
Wireframing no web design
Após um exercício pré-wireframing, você pode preencher os detalhes de cada página. (Uma rodada pré-wireframing é uma etapa opcional recomendada para sites grandes e complexos. A maioria dos sites simplesmente vai direto para wireframes do sitemap.)
Os wireframes servem como uma espécie de lista de lavanderia do que acontece em cada página a partir de um conteúdo e perspectiva de mídia, e também mapear o design de interação (como os usuários usam ferramentas na página ou navegam em conteúdo). Aqui estão alguns exemplos do que o seu quadro de arame pode mostrar:
-
Que cópia - e quanto disso - vai na página
-
Quais objetos do CMS vão na página (se você estiver usando um sistema de gerenciamento de conteúdo) > O tipo de imagens e mídia (como arquivos de vídeo e de vídeo) na página
-
Seu plano técnico e de interação para a página - links, widgets como menus suspensos, expansão de áreas de conteúdo, caixas de seleção e botões
-
O wireframing é um passo importante que você não deve deixar de fora de qualquer projeto interativo - seja para um aplicativo móvel, uma apresentação em Flash em uma feira ou (claro) um site.Como um bom modelo arquitetônico, o wireframe é a sua oportunidade de resolver todos os problemas de design de conteúdo e interação no papel, não só com o cliente, mas também com a equipe técnica que constrói o site.
Você não precisa criar um wireframe para cada página do site. Você só precisa fazer um wireframe para cada layout exclusivo. Por exemplo, se você possui 100 páginas de detalhes do produto no índice da sua página, você pode criar apenas um wireframe que mostra como a página de detalhes do produto funciona. Se uma ou duas páginas de produtos tiverem um layout ligeiramente diferente ou um toque de conteúdo para elas, no entanto, é uma boa idéia fazer uma estrutura de hardware específica de produto-detalhe apenas para elas.
É importante que seus quadros sejam tão chatos e diagramais quanto possível. Eles geralmente estão em escala de cinza, com linhas, caixas, caixas cinzentas e texto fofo. Isso é para garantir que os clientes entendam claramente que estão olhando um esqueleto e não um projeto visual proposto.
