Como fazer um wireframe

Decidir quais elementos estarão presentes em seu design. Elementos comuns a serem incluídos são: navegação, áreas de conteúdo, widgets ou caixas de função, imagens e botões. Um exemplo de uma lista que você pode fazer incluem: navegação, controle deslizante de imagem, caixas de introdução, ícones de redes sociais, as últimas ligações do artigo e uma copyright / rodapé

Determinar a largura de seu projeto que pretende começar. dimensões do esquema standard são 960, 980px e 1020px, mas um benefício do wireframe é que ele permite que você a experimentar com a escala de seus elementos, até que tudo parece certo.

Escolha um método para criar o seu wireframe. Criando um wireframe à mão pode ser o mais fácil, mas não pode traduzir bem para um arquivo digital que pode ser usado como um modelo exato para o seu composto. programas de software como o Adobe Photoshop, Illustrator, InDesign ou não são realmente ideal para a criação de wireframes também, mas eles fazem assegurar o máximo de compatibilidade com o seu projeto composto ou real. Sua opção final é usar uma ferramenta wireframing, vários dos quais permitem a colaboração e exportação para projetar-amigáveis ​​formatos.

Crie um novo documento que é pelo menos 1680px de largura e 980px de altura. Você será capaz de imaginar como o seu design e sua escala vai olhar quando apresentado em um navegador da web se o seu espaço de trabalho é maior do que o seu design. Ao desenhar à mão, use papel quadriculado, se possível, onde um quadrado é igual a 10 pixels. Sem uma grade, converter uma polegada de 100 pixels.

Comece criando um rectângulo centrada utilizando a largura e altura da sua dimensões do esquema de partida, as quais irão actuar como a sua estrutura inicial. Desenhe cada elemento nas posições desejadas usando formas simples e tons de cinza. Se estiver usando software, pré-montados e UI kits gráficos vir a calhar nesta fase, fornecendo-lhe elementos padrão que você pode colocar no seu wireframe como ícones, caixas de texto, barras de pesquisa, menus e assim por diante.

Rotular cada elemento claramente com a caligrafia puro ou uma fonte sans-serif. Se você deseja incluir dimensões, fazê-lo usando uma linha pontilhada cor clara fora do elemento e certifique-se o elemento representa os pixels rotulados com precisão.

Adicionar notas de design nas margens ou mantê-los em um arquivo separado para apresentar ao lado do wireframe. Suas notas de design podem incluir ideias relacionadas à cor, funcionalidade ou finalidade de elementos dentro do wireframe. Se estiver usando um programa de software, certifique-se as notas são discretos e claramente se relacionam com os elementos marcados por nome ou número.

Salve o arquivo como um JPG para máxima compatibilidade com qualquer software o cliente pode usar para visualizá-lo. Se estiver usando software que suporta camadas, salvar uma cópia em camadas para si mesmo para que você possa facilmente editar elementos mais tarde, ou use este wireframe novamente como um modelo para outro projeto. Se você desenhou seu wireframe à mão, você vai precisar para digitalizar a imagem e redimensioná-lo para ajustar a representação precisa das dimensões definidas.

Comece criando suas principais dimensões do esquema, que atuará como seu quadro principal. A maioria dos softwares wireframe vem com tamanhos de layout padrão para escolher. Use um fundo colorido ou transparente luz.

Arrastar e soltar ou adicionar elementos das bibliotecas fornecidas dentro da ferramenta. Coisas para manter em mente são espaço em branco, o fluxo de conteúdo, e a experiência do usuário pretendido. Você pode ajustar a escala eo tamanho dos elementos nessas ferramentas, arrastando suas alças de dimensão.

Rotular cada elemento claramente clicando no texto do rótulo dentro de cada elemento e digitando um nome ou número. Se você deseja incluir dimensões, fazê-lo usando uma linha pontilhada cor clara fora do elemento e certifique-se o elemento representa os pixels rotulados com precisão. Alguns wireframes vai fazer isso por você automaticamente.

Adicionar notas de design correspondentes a cada elemento nas margens ou em um documento separado. Suas notas de design podem incluir ideias relacionadas à cor, funcionalidade ou finalidade de elementos dentro do wireframe. Se estiver usando um programa de software, certifique-se as notas são discretos e claramente se relacionam com os elementos marcados por nome ou número.

Exportar ou salvar o arquivo como PDF ou JPG para que o seu cliente pode facilmente visualizá-lo. Se sua ferramenta wireframe escolhido suporta a colaboração, é uma boa idéia de convidar o cliente para entrar e deixar um comentário.